/* Competitive Lawn — theme chrome (header, nav, footer). Tokens inherited from the design system :root. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.cl-skip-link{position:absolute;left:-9999px}
.cl-skip-link:focus{left:8px;top:8px;background:var(--green);color:#fff;padding:8px 14px;border-radius:6px;z-index:1000}
.cl-main{min-height:40vh}

/* Header */
.cl-site-header{background:var(--white);border-bottom:1px solid var(--border);position:relative;z-index:100}

.cl-header-inner{max-width:1240px;margin:0 auto;padding:0 max(20px,(100vw - 1240px)/2);display:flex;align-items:center;gap:28px;min-height:72px}
.cl-logo a,.cl-logo strong{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--green);text-decoration:none;letter-spacing:-.2px;display:inline-flex;align-items:center}
.cl-logo img{max-height:44px;width:auto}
/* Primary nav */
.cl-primary-nav{margin-left:auto}
.cl-nav-menu{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.cl-nav-menu > li{position:relative}
.cl-nav-menu > li > a{display:flex;align-items:center;gap:5px;color:var(--text);text-decoration:none;font-weight:500;font-size:15px;padding:10px 13px;border-radius:7px;line-height:1;white-space:nowrap;transition:background .15s,color .15s}
.cl-nav-menu > li > a:hover{background:var(--green-pale);color:var(--green)}
.cl-nav-menu > li.menu-item-has-children > a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .2s;flex:0 0 auto}
.cl-nav-menu > li.menu-item-has-children:hover > a::after,.cl-nav-menu > li.menu-item-has-children:focus-within > a::after{transform:rotate(225deg) translateY(-1px);opacity:.9}
/* Dropdown */
.cl-nav-menu .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 44px rgba(27,58,45,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:120}
.cl-nav-menu > li:hover > .sub-menu,.cl-nav-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cl-nav-menu .sub-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.cl-nav-menu .sub-menu a{display:block;padding:9px 12px;border-radius:7px;color:var(--text-mid);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;transition:background .13s,color .13s}
.cl-nav-menu .sub-menu a:hover{background:var(--green-pale);color:var(--green)}
/* Header actions */
.cl-header-actions{display:flex;align-items:center;gap:6px}
.cl-header-search{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:99px;overflow:hidden;background:var(--cream);height:40px}
.cl-header-search input{border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;padding:0 4px 0 15px;width:150px;color:var(--text)}
.cl-header-search button{border:0;background:transparent;cursor:pointer;color:var(--green);padding:0 13px 0 4px;display:grid;place-items:center;font-size:15px;line-height:1}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--green);text-decoration:none;transition:background .15s;padding:0}
.icon-btn:hover{background:var(--green-pale)}
.cl-cart{position:relative;font-size:20px;line-height:1}
.cl-cart-count{position:absolute;top:0;right:0;background:var(--gold);color:#fff;border-radius:99px;font-size:10px;font-weight:700;min-width:16px;height:16px;display:grid;place-items:center;padding:0 3px;line-height:1}
.cl-nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.cl-nav-toggle span{width:22px;height:2px;background:var(--green);display:block}
.cl-site-header--ppc .cl-header-inner{justify-content:space-between}
.cl-header-trust{font-size:12px;color:var(--text-mid);font-weight:500}

/* Footer */
.cl-site-footer{background:#0F241A;color:rgba(255,255,255,.82);margin-top:0;border-top:3px solid var(--gold)}
.cl-footer-cols{max-width:1240px;margin:0 auto;padding:56px max(20px,(100vw - 1240px)/2) 36px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.cl-footer-brand{max-width:340px}
.cl-footer-brand strong{font-family:var(--serif);font-size:21px;color:#fff;display:block;margin-bottom:12px}
.cl-footer-brand img{max-height:96px;width:auto;filter:brightness(0) invert(1);margin-bottom:12px}
.cl-footer-brand p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.62);margin:0 0 18px}
.cl-footer-newsletter-h{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#fff;margin:0 0 10px;font-weight:600}
.cl-footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#fff;margin:0 0 16px;font-weight:600}
.cl-footer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cl-footer-menu a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;transition:color .13s}
.cl-footer-menu a:hover{color:#fff}
.cl-footer-bottom{border-top:1px solid rgba(255,255,255,.14);max-width:1240px;margin:0 auto;padding:20px max(20px,(100vw - 1240px)/2);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:rgba(255,255,255,.55)}
.cl-legal-menu{list-style:none;display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0}
.cl-legal-menu a{color:rgba(255,255,255,.55);text-decoration:none;font-size:13px}
.cl-legal-menu a:hover{color:#fff}
.cl-site-footer--ppc{margin-top:24px}
.cl-site-footer--ppc .cl-footer-bottom{border-top:0}

/* Search */
.cl-search{display:flex;gap:8px;max-width:460px;margin-top:8px}
.cl-search input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--sans);font-size:14px}

/* Mobile */
@media(max-width:960px){
	.cl-header-search{display:none}
}
@media(max-width:900px){
	.cl-nav-toggle{display:flex;margin-left:auto}
	.cl-primary-nav{position:fixed;left:0;right:0;top:72px;bottom:0;background:var(--white);border-top:1px solid var(--border);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s ease;margin:0;padding:8px max(20px,4vw) 48px;z-index:90;overflow-y:auto}
	body.admin-bar .cl-primary-nav{top:104px}
	body.cl-nav-open .cl-primary-nav{transform:translateX(0);visibility:visible}
	.cl-nav-menu{flex-direction:column;align-items:stretch;gap:0}
	.cl-nav-menu > li > a{padding:15px 6px;font-size:16px;border-bottom:1px solid var(--border);border-radius:0;justify-content:space-between}
	.cl-nav-menu > li.menu-item-has-children > a::after{margin-left:auto}
	.cl-nav-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 10px 14px;min-width:0;display:none;background:transparent}
	.cl-nav-menu > li.cl-sub-open > .sub-menu{display:block}
	.cl-nav-menu > li.cl-sub-open.menu-item-has-children > a::after{transform:rotate(225deg)}
	.cl-nav-menu .sub-menu a{padding:11px 8px;font-size:15px}
	.cl-footer-cols{grid-template-columns:1fr 1fr;gap:28px}
	.cl-footer-brand{grid-column:1 / -1;max-width:none}
	.cl-footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:782px){body.admin-bar .cl-site-header{top:46px}body.admin-bar .cl-primary-nav{top:118px}}
@media(max-width:520px){.cl-footer-cols{grid-template-columns:1fr}}


/* ---- Phase 3 additions ---- */
/* Classes used by engine content but previously unstyled */
.hero-lead { font-size: 1.05rem; color: var(--text-mid, #5a5a4e); max-width: 46ch; }
.faq-wrap { max-width: 880px; }
.expert-link { font-weight: 600; }
.cl-ppc { max-width: none; margin: 0 auto; padding: 0 0 56px; }

/* Logo */
.cl-logo img { display: block; width: auto; height: 56px; max-height: 56px; object-fit: contain; }
/* White source logo: darken to brand green in the light header, keep white in the dark footer */
.cl-site-footer .cl-logo img { height: 64px; max-height: 64px; }
.cl-site-header--ppc .cl-logo img { height: 48px; }

/* Logo — bulletproof visibility (overrides any conflicting rule / flex collapse) */
.cl-logo{flex:0 0 auto;display:flex;align-items:center;min-width:0}
.cl-site-header .cl-logo a{display:inline-flex;align-items:center}
.cl-site-header .cl-logo img,.cl-site-header .cl-logo .custom-logo{display:block!important;width:auto!important;height:52px!important;max-height:52px!important;max-width:240px!important;opacity:1!important;visibility:visible!important;filter:none!important;object-fit:contain}

/* Shop layout: filter sidebar */
.cl-shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
.cl-shop-sidebar { align-self: start; }
.cl-filter-widget { border: 1px solid var(--line, #e5ded3); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.cl-filter-title { margin: 0 0 10px; font-size: 0.95rem; }
.cl-filter-widget ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cl-filter-widget li { margin: 6px 0; }
.cl-filters-toggle { display: none; }
@media (max-width: 860px) {
	.cl-shop-layout { grid-template-columns: 1fr; }
	.cl-filters-toggle { display: inline-block; margin-bottom: 12px; border: 1px solid var(--line, #e5ded3); background: #fff; border-radius: 999px; padding: 8px 18px; font: inherit; cursor: pointer; }
	.cl-shop-sidebar { display: none; position: static; }
	body.cl-filters-open .cl-shop-sidebar { display: block; }
}

/* ---- Post-launch fixes (v1.2) ---- */
/* Mobile-friendly content tables */
@media(max-width:600px){
	.cl-page .compare,.cl-page .dtable,.cl-page table.u-f18936,.cl-page table.u-60db50{font-size:12.5px}
	.cl-page .u-60e373,.cl-page .u-8adbd5,.cl-page .u-fa5413,.cl-page .u-9e3c4c{position:relative}
	.cl-page .u-60e373::after,.cl-page .u-8adbd5::after,.cl-page .u-fa5413::after{content:'\2194 scroll';position:sticky;left:0;display:block;font-size:11px;color:var(--text-light);padding-top:6px}
}
/* Respect reduced-motion site-wide */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* Curated SVG icon set (replaces emoji in icon slots) */
.cl-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em}
.cl-page .pillar-swatch .cl-ico,.cl-page .u-371229 .cl-ico,.cl-page .al-ic .cl-ico,.cl-page .mc-ic .cl-ico,.cl-page .rb-ic .cl-ico,.cl-page .fit-icon .cl-ico,.cl-page .u-0bd417 .cl-ico,.cl-page .chk .cl-ico{width:1em;height:1em;vertical-align:middle}
.cl-page .pillar-swatch,.cl-page .u-371229{display:inline-flex;align-items:center;justify-content:center}
/* 1. Emoji images: WordPress may replace inline emoji with <img class="emoji">. Without an
   explicit size these inherit the global img{max-width:100%;height:auto} and balloon to full
   container width (the giant green ✅ squares). Pin them to text size. */
img.emoji,
.cl-page img.emoji {
	display: inline-block !important;
	height: 1em !important;
	width: 1em !important;
	max-width: 1em !important;
	margin: 0 .05em 0 .1em !important;
	vertical-align: -0.1em !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	padding: 0 !important;
}

/* 2. Gold "Shop" tag: u-e658cf only set a background, so on the padding-less .guide-tag it
   rendered as a full-width gold bar that looked like a strike-through. Make it a real badge. */
.cl-page .guide-tag.u-e658cf {
	display: inline-block;
	align-self: flex-start;
	color: #fff;
	padding: 3px 10px;
	border-radius: 5px;
	letter-spacing: .6px;
}

/* 3. WooCommerce pages (shop archive, single product, cart, checkout, account) render via
   woocommerce_content() with no .section wrapper, so they lost the site's content gutter and
   went edge-to-edge. Give the Woo .cl-page the same centered 1180px column as .section. */
.cl-woocommerce > .cl-page {
	padding: 40px max(6vw, (100% - 1180px) / 2) 64px;
}
/* Cart / Checkout / My-Account are WordPress pages (shortcode/blocks) via page.php, not the
   woocommerce.php template, so they miss the gutter above. Add it via the WooCommerce body classes. */
body.woocommerce-cart .cl-main > .cl-page,
body.woocommerce-checkout .cl-main > .cl-page,
body.woocommerce-account .cl-main > .cl-page {
	padding: 40px max(6vw, (100% - 1180px) / 2) 64px;
}

/* Collections hub list */
.collection-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.collection-list li { background: #fff; border: 1px solid var(--line, #e5ded3); border-radius: 8px; }
.collection-list a { display: block; padding: 12px 14px; text-decoration: none; font-weight: 500; }