/**
 * Happy Cappy — V2 site header / mega-nav / mobile drawer.
 * File: assets/css/hc-header.css  (CHILD theme)
 *
 * Extracted from the approved v5 design stylesheet (header/nav/mega/drawer
 * rules only). Loaded ONLY on V2 pages (hc_v2_active), where the new header
 * renders. Relies on the design tokens (:root vars) already provided by
 * product-v2.css. Dark-mode (data-theme) rules and the mocked cart-drawer
 * internals are intentionally omitted — those come in a later increment.
 *
 * v0.2.87 — increment 1: structural header, desktop mega nav, mobile drawer.
 */

/* The parent theme's global `button{padding:.6em 1em .4em}` crushes the SVG
   inside our fixed-size circular <button> icons (hamburger, language) down to
   ~8px wide. The <a> icons (cart/search/account) escape it. Zero the padding
   on all icon buttons so the icons render full size (v5 parity). */
.icon-btn:not(.lang-btn){padding:0!important}

/* Brand logo sizing (v5). Scoped to .brand so it beats WooCommerce's
   `.woocommerce-page img{height:auto}` (0,1,1) — a bare `.logo-img` (0,1,0)
   loses that cascade and the logo renders at natural size. */
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand .logo-img{height:84px;width:auto;display:block}

/* Language dropdown items are <a> (Polylang links); v5 only styled <button>.
   Mirror the button layout for anchors so the menu isn't unstyled. */
.lang-menu a{display:flex;align-items:center;gap:11px;text-align:left;padding:10px 11px;border-radius:9px;font-size:14px;font-weight:600;color:var(--teal-ink);text-decoration:none;transition:background .12s}
.lang-menu a .lc{display:flex;align-items:center;justify-content:center;width:30px;height:22px;flex-shrink:0;border-radius:5px;background:var(--card-2);font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
.lang-menu a .ln{flex:1}
.lang-menu a .ck{width:16px;height:16px;flex-shrink:0;opacity:0}
.lang-menu a .ck svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.6}
.lang-menu a:hover{background:var(--card-2)}
.lang-menu a.active{background:color-mix(in srgb,var(--teal) 9%,var(--surf))}
.lang-menu a.active .lc{background:var(--teal);color:#fff}
.lang-menu a.active .ln{color:var(--teal)}
.lang-menu a.active .ck{opacity:1}

html:root .mega-col a,html:root .mega-col.prod a,html:root .mega-col.concern a{border-radius:10px}
html:root .cart-dot b{background:var(--cta)}
html:root header{background:#ffffff}
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--cream) 86%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:0;flex-shrink:0;min-width:0}
.brand-tagline{font-family:var(--font-display);font-style:normal;font-weight:600;font-size:12px;line-height:1.1;letter-spacing:-.01em;color:var(--accent);padding-left:0;flex-shrink:0;white-space:nowrap}
nav.menu{display:flex;gap:2px;font-size:14.5px;font-weight:600;color:#3a4c52;flex:1 1 auto;min-width:0;justify-content:center}
.nav-item{position:static}
.nav-item.has-drop{position:relative}
.nav-link{display:flex;align-items:center;gap:3px;padding:8px 11px;position:relative;white-space:nowrap;color:inherit;border-radius:var(--radius-sm)}
.nav-link .caret{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .2s;opacity:.6}
.nav-link:hover,.nav-item:hover .nav-link,.nav-item:focus-within .nav-link{color:var(--teal)}
.nav-link::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;width:auto;transform:scaleX(0);transform-origin:center;background:var(--accent);transition:transform .2s}
.nav-item:hover .nav-link::after,.nav-item:focus-within .nav-link::after{transform:scaleX(1)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:55}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:30px 28px;display:flex;align-items:stretch;gap:0}
.mega-col{flex:1 1 0;min-width:0;padding:0 26px;border-right:1px solid var(--line-2)}
.mega-col:first-child{padding-left:0}
.mega-inner > .mega-col:last-of-type{border-right:none;padding-right:26px}
.mega,.drop{--mega-sep:rgba(1,67,98,.09)}
.mega-col h4{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.mega-col a{display:block;padding:9px 10px;margin:0;border-radius:6px;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--teal-ink);border-bottom:1px solid var(--mega-sep);transition:background .14s,color .14s}
.mega-col a:last-of-type,.mega-col a.mega-textlink{border-bottom:none}
.mega-col a:not(.mega-textlink):hover{color:#fff;background:var(--teal-ink)}
.mega-col.prod a{display:flex;align-items:center;gap:12px;padding:8px;margin:0;border-radius:6px;border-bottom:1px solid var(--mega-sep);transform:none;transition:background .14s}
.mega-col.prod a:last-of-type{border-bottom:none}
.mega-col.prod a:hover{transform:none;background:var(--teal-ink)}
.mega-col.prod .mthumb{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-2);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.mega-col.prod .mthumb img{width:100%;height:100%;object-fit:contain;display:block}
.mega-col.prod .mlabel{display:flex;flex-direction:column;gap:1px;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--teal-ink);transition:color .14s}
.mega-col.prod .msub{font-size:11px;font-weight:500;color:var(--muted);line-height:1.25}
.mega-col.prod a:hover .mthumb{border-color:var(--teal-ink)}
.mega-col.prod a:hover .mlabel{color:#fff}
.mega-col.prod a:hover .msub{color:rgba(255,255,255,.72)}
.mega-col .mega-textlink{display:flex;align-items:center;gap:6px;padding:7px 0;font-size:12.5px;font-weight:700;color:var(--teal);letter-spacing:.01em}
.mega-col .mega-textlink svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.mega-col .mega-textlink:hover{color:var(--accent);transform:none}
.mega-col .mega-textlink:hover svg{transform:translateX(3px)}
.mega-col.bundles{display:flex;flex-direction:column}
.mega-col.bundles .bscroll{max-height:340px;overflow-y:auto;padding-right:8px;margin-right:-4px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--teal) 38%,var(--surf)) transparent}
.mega-col.bundles .bscroll::-webkit-scrollbar{width:6px}
.mega-col.bundles .bscroll::-webkit-scrollbar-track{background:transparent}
.mega-col.bundles .bscroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--teal) 34%,var(--surf));border-radius:8px}
.mega-col.bundles .bscroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--teal) 55%,var(--surf))}
.mega-subhead{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:11px 0 2px;padding-top:9px;border-top:1px solid var(--line-2)}
.mega-subhead.first{margin-top:0;padding-top:0;border-top:0}
.mega-col.concern a{display:flex;align-items:center;gap:11px;padding:8px;margin:0;border-radius:6px;border-bottom:1px solid var(--mega-sep);transform:none;transition:background .14s}
.mega-col.concern a:last-of-type{border-bottom:none}
.mega-col.concern a:hover{transform:none;background:var(--teal-ink)}
.mega-col.concern .cdot{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--teal) 9%,var(--surf));border:1px solid var(--line-2);transition:background .15s,border-color .15s}
.mega-col.concern .cdot svg{width:19px;height:19px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.mega-col.concern .mlabel{font-size:13.5px;font-weight:600;line-height:1.2;color:var(--teal-ink);transition:color .14s}
.mega-col.concern a:hover .cdot{background:#fff;border-color:#fff}
.mega-col.concern a:hover .cdot svg{stroke:var(--teal-ink)}
.mega-col.concern a:hover .mlabel{color:#fff}
.mega-col.concern a.crossbrand:hover .mlabel{color:#fff}
.mega-col.concern a.crossbrand{align-items:center}
.mega-col.concern a.crossbrand .mthumb{width:46px;height:46px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line-2);transition:border-color .15s,box-shadow .15s}
.mega-col.concern a.crossbrand .mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mega-col.concern a.crossbrand .mlabel{display:flex;flex-direction:column;gap:1px}
.mega-col.concern a.crossbrand .msub{font-size:11px;font-weight:500;color:var(--muted);line-height:1.25}
.mega-col.concern a.crossbrand:hover .mthumb{border-color:var(--accent);box-shadow:0 4px 11px rgba(216,121,79,.22)}
.mega-col.concern a.crossbrand:hover .msub{color:rgba(255,255,255,.72)}
.mega-feature{flex:1.05 1 0;margin-left:26px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 9%,var(--surf)),var(--card-2));border-radius:var(--radius-lg);padding:22px;overflow:hidden;min-height:170px}
.mega-feature img{position:absolute;top:-6px;right:-10px;width:130px;height:auto;filter:drop-shadow(0 8px 16px rgba(16,58,69,.18))}
.mega-feature.alt{justify-content:center}
.mega-feature.brand{justify-content:flex-end;align-items:stretch;padding:18px;background:radial-gradient(120% 80% at 82% 22%,rgba(255,225,190,.22),rgba(255,225,190,0) 52%),linear-gradient(160deg,#dd7f55 0%,#cd6840 52%,#bd5430 100%);transition:filter .18s ease}
.mega-feature.brand:hover{filter:brightness(1.05)}
.mega-feature.brand::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.4px,transparent 1.6px);background-size:15px 15px;opacity:.7}
.mega-feature.brand .ff-bottle{position:absolute;top:15px;right:15px;height:66%;width:auto;z-index:2;filter:none;transform-origin:top right;transition:transform .22s ease}
.mega-feature.brand:hover .ff-bottle{transform:scale(1.018)}
.mega-feature.brand .ff-scrim{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;background:linear-gradient(to top,rgba(46,17,6,.80) 0%,rgba(46,17,6,.36) 52%,rgba(46,17,6,0) 100%)}
.mega-feature.brand>span:not(.ff-scrim){position:relative;z-index:3}
.mega-feature.brand .mf-eyebrow{color:#ffe0b0}
.mega-feature.brand .mf-title{color:#fff;max-width:58%;font-size:16.5px;line-height:1.18}
.mega-feature.brand .mf-desc{color:rgba(255,255,255,.93);font-size:12px;line-height:1.42;margin-top:3px;max-width:100%}
.mega-feature.brand .mf-trust{display:block;color:rgba(255,255,255,.82);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:8px}
.mega-feature.brand .mf-cta{color:#fff;margin-top:9px}
.mega-feature.brand .mf-cta svg{stroke:#fff;transition:transform .18s ease}
.mega-feature.brand:hover .mf-cta svg{transform:translate(3px,-3px)}
.mega-promo{display:none}
html:root .mega-inner:has(.mega-promo){flex-wrap:wrap}
html:root .mega-inner:has(.mega-promo) .mega-col{flex:1 1 30%}
html:root .mega-inner:has(.mega-promo) .mega-feature.brand{display:none}
html:root .mega-col.concern .crossbrand,html:root .mega-col.concern .mega-subhead{display:none}
html:root .mega-promo{order:9;flex:1 1 100%;position:relative;display:flex;align-items:center;gap:22px;margin:18px 0 0;padding:16px 22px 16px 150px;min-height:108px;overflow:hidden;border-radius:var(--radius);text-decoration:none;background:radial-gradient(120% 90% at 88% 20%,rgba(255,225,190,.25),rgba(255,225,190,0) 55%),linear-gradient(135deg,#dd7f4e,#bb5f30);box-shadow:0 8px 22px -14px rgba(120,52,20,.5);transition:filter .18s ease}
html:root .mega-promo:hover{filter:brightness(1.04)}
html:root .mega-promo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.4px,transparent 1.6px);background-size:15px 15px;opacity:.6}
html:root .mega-promo .ff-bottle{position:absolute;left:24px;top:50%;transform:translateY(-50%);height:128px;width:auto;z-index:2;filter:drop-shadow(0 8px 16px rgba(80,30,8,.35));transition:transform .22s ease}
html:root .mega-promo:hover .ff-bottle{transform:translateY(-50%) scale(1.03)}
html:root .mega-promo .mp-body{position:relative;z-index:2;flex:1;min-width:0}
html:root .mega-promo .mf-eyebrow{color:#ffe0b0}
html:root .mega-promo .mf-title{color:#fff;max-width:none;margin-top:1px}
html:root .mega-promo .mf-desc{color:rgba(255,255,255,.92);font-size:12.5px;line-height:1.4;margin-top:3px;max-width:560px}
html:root .mega-promo .mf-cta{position:relative;z-index:2;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#bb5f30;font-family:var(--font-display);font-weight:700;font-size:13px;padding:9px 16px;border-radius:var(--radius-sm)}
html:root .mega-promo .mf-cta svg{width:15px;height:15px;stroke:#bb5f30;transition:transform .18s ease}
html:root .mega-promo:hover .mf-cta svg{transform:translate(2px,-2px)}
.mega-feature.alt .mf-title{max-width:100%;font-size:18px}
.mega-feature:hover .mf-cta svg{transform:translateX(3px)}
.drop{position:absolute;top:100%;left:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:55}
.nav-item.has-drop:hover .drop,.nav-item.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;white-space:nowrap;padding:9px 12px;font-size:14px;font-weight:600;color:var(--teal-ink);border-radius:var(--radius-sm);border-bottom:1px solid var(--mega-sep);transition:background .14s,color .14s}
.drop a:last-of-type{border-bottom:none}
.drop a:hover{background:var(--teal-ink);color:#fff}
.m-drawer{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;z-index:71;background:var(--cream);box-shadow:none;transform:translateX(104%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.m-drawer.show{transform:translateX(0);box-shadow:-18px 0 50px -20px rgba(0,0,0,.45)}
.m-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.m-drawer-head .m-drawer-logo{height:52px;width:auto}
.m-nav{flex:1;overflow-y:auto;padding:6px 0}
.m-acc{border-bottom:1px solid var(--line-2)}
.m-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--teal-ink);text-align:left}
.m-acc-trigger .mcaret{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none;transition:transform .22s;flex-shrink:0}
.m-acc.open .m-acc-trigger{color:var(--teal)}
.m-acc.open .m-acc-trigger .mcaret{transform:rotate(180deg);stroke:var(--teal)}
.m-acc-panel{max-height:0;overflow:hidden;transition:max-height .28s ease}
.m-acc-inner{padding:2px 18px 14px}
.m-acc-inner a{display:block;padding:9px 0 9px 12px;font-size:14.5px;font-weight:500;color:#3a4c52;border-left:2px solid var(--line);transition:color .14s,border-color .14s}
.m-acc-inner a:hover{color:var(--accent);border-color:var(--accent)}
.m-acc-inner a .m-sub{display:block;font-size:12px;font-weight:500;color:var(--muted);line-height:1.25;margin-top:1px}
.m-acc.solo .m-acc-trigger .mcaret{display:none}
.m-drawer-foot{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);flex-shrink:0}
.m-drawer-foot a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;font-weight:700;color:var(--teal-ink);background:var(--card)}
.m-drawer-foot a:hover{border-color:var(--teal);color:var(--teal)}
.m-drawer-foot svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
.nav-icons{display:flex;gap:2px;align-items:center;flex-shrink:0;justify-content:flex-end}
.icon-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--teal-ink);background:transparent;border:0;cursor:pointer;transition:background .15s}
.icon-btn:hover{background:color-mix(in srgb,var(--teal) 13%,var(--surf));color:var(--teal)}
.lang-btn:hover .lang-code{color:var(--teal)}
.lang-btn:hover svg{stroke:var(--teal)}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none}
.cart-dot{position:relative}
.cart-dot b{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.hamburger{display:none}
.lang-switch{position:relative}
.lang-btn{width:auto;gap:5px;padding:0 10px;border-radius:999px}
.lang-btn svg{width:19px;height:19px;stroke:var(--teal-ink);fill:none;stroke-width:1.7}
.lang-code{font-size:12.5px;font-weight:700;color:var(--teal-ink);letter-spacing:.02em}
.lang-menu{position:absolute;top:46px;right:0;min-width:188px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:5px;display:none;flex-direction:column;gap:1px;z-index:70}
.lang-switch.open .lang-menu{display:flex}
.lang-menu button{display:flex;align-items:center;gap:11px;text-align:left;padding:10px 11px;border-radius:9px;font-size:14px;font-weight:600;color:var(--teal-ink);transition:background .12s}
.lang-menu button .lc{display:flex;align-items:center;justify-content:center;width:30px;height:22px;flex-shrink:0;border-radius:5px;background:var(--card-2);font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
.lang-menu button .ln{flex:1}
.lang-menu button .ck{width:16px;height:16px;flex-shrink:0;opacity:0}
.lang-menu button .ck svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.6}
.lang-menu button:hover{background:var(--card-2)}
.lang-menu button.active{background:color-mix(in srgb,var(--teal) 9%,var(--surf))}
.lang-menu button.active .lc{background:var(--teal);color:#fff}
.lang-menu button.active .ln{color:var(--teal)}
.lang-menu button.active .ck{opacity:1}
.lang-menu button[data-lang="AR"] .ln{font-size:15px}
.cart-switch{position:relative}
.brand-tagline{font-family:var(--font-body)}
html:root .mega-col a:not(.mega-textlink):hover,html:root .mega-col.prod a:hover,html:root .mega-col.concern a:hover,html:root .drop a:hover{background:#2f6fa8}
html:root .mega-col.concern a:hover .cdot{background:#fff;border-color:#fff}
html:root .mega-col.concern a:hover .cdot svg{stroke:#2f6fa8}
html:root .mega-col .mega-textlink{color:#2f6fa8;padding:9px 10px;border-radius:6px;transition:background .14s,color .14s,transform .15s}
html:root .mega-col .mega-textlink:hover{color:#fff;background:#2f6fa8}
html:root .mega-col .mega-textlink:hover svg{stroke:#fff}

@media(max-width:1000px){
.lang-btn{padding:0 8px;gap:4px}
.lang-menu{right:0;left:auto;max-width:calc(100vw - 24px)}
}
@media(max-width:560px){
.brand-tagline{display:none}
}
@media(max-width:1000px){
nav.menu,.nav-icons .desk{display:none}
.nav-icons{margin-left:auto}
.hamburger{display:flex}
}
/* ---- mobile drawer scrim + body lock + group headings (from v5) ---- */
.m-scrim{position:fixed;inset:0;z-index:70;background:rgba(13,30,36,.5);opacity:0;transition:opacity .28s}
.m-scrim.show{opacity:1}
.m-grp{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:14px 0 6px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.m-grp:first-child{margin-top:2px}
body.m-open{overflow:hidden}

/* Desktop: keep the mobile drawer + scrim out of the layout entirely
   (the ≤1000px collapse of nav.menu / .nav-icons .desk / .hamburger is
   already defined by the extracted v5 media rules above). */
@media(min-width:1001px){ .m-scrim,.m-drawer{display:none!important} }

/* The legacy theme pads #main to clear its old (fixed) header. The new V2
   header sits in normal flow, so that top padding is dead space under the
   bar — zero it on V2 (mirrors the existing padding-bottom:0 fix). */
body.hc-pdp-v2 #main{padding-top:0}

/* ---- mobile header adjustments (from v5; missed in first extraction) ---- */
@media(max-width:1000px){
	.lang-btn{padding:0 8px;gap:4px}
	.lang-menu{right:0;left:auto;max-width:calc(100vw - 24px)}
}
@media(max-width:560px){
	.brand .logo-img{height:60px}   /* shrink logo to fit the mobile bar */
	.brand-tagline{display:none}
}

/* ---- promo / announcement top bar (rotating messages, from v5) ---- */
.promo{background:var(--ink-surface);color:#eaf6f8;font-size:13.5px;font-weight:500;position:relative;height:40px;overflow:hidden}
.promo-rotator{position:relative;height:100%;max-width:var(--maxw,1200px);margin:0 auto}
.promo-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;text-align:center;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.promo-msg.active{opacity:1;transform:none}
.promo b{color:#ffd9a0;font-weight:700}

/* v5 parity: links inherit their contextual colour (mirrors v5's global
   a{color:inherit;text-decoration:none}). The V2 chrome renders SITE-WIDE, so
   on non-product pages the parent _s style.css leaks in — a{royalblue},
   a:visited{#800080}, underline, button{#e6e6e6} — because product-v2.css's
   global reset only loads on product pages. Neutralise it within the chrome:
   :visited (0,1,2) beats the theme's a:visited (0,1,1); component colours
   (.nav-link, .mega-col a …) still win the base state. Icon backgrounds are
   cleared on .icon-btn above. */
header a,header a:visited,.m-drawer a,.m-drawer a:visited{color:inherit;text-decoration:none}
/* The chrome (header + mobile drawer) must use the V2 body font (Inter) and not
   inherit the parent theme's Poppins/UA button styling off product pages. */
header,.promo,.m-drawer{font-family:var(--font-body)}
header button,.m-drawer button{background:transparent;border:0;cursor:pointer;font-family:inherit}

/* ------------------------------------------------------------------ *
 * Structural header rules for STANDALONE / global rendering (step 2b).
 * Left behind in product-v2.css by the original header prune; copied here
 * so the chrome renders complete on non-product pages (where product-v2.css
 * isn't loaded). Same values — on a product page they're simply reasserted
 * after product-v2.css with no visual change.
 * ------------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.nav{display:flex;align-items:center;gap:20px;height:84px}
.mf-tag,.mf-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.mf-title{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.2;color:var(--teal-ink);max-width:74%}
.mf-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--teal);margin-top:4px}
.mf-cta svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .15s}
@media(max-width:640px){ .wrap{padding:0 18px} }
@media(max-width:560px){ .nav{gap:12px;height:66px} }

/* ---- Chrome rules relocated from product-v2.css (single source of truth). ---- */
html[data-theme="dark"] .m-acc-inner a{color:var(--teal-ink)}
.logo .mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#3fa6bd,var(--teal) 60%,var(--teal-deep));position:relative;box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.logo .mark::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85);top:9px;left:11px}
.logo small{display:block;font-family:var(--font-body);font-weight:600;font-size:9.5px;letter-spacing:.16em;color:var(--teal);text-transform:uppercase;margin-top:1px}
.logo-img{height:84px;width:auto;display:block}
.m-drawer-logo{height:52px;width:auto}
.m-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--teal-ink)}
.m-close:hover{background:var(--card-2)}
.m-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
@media(max-width:560px){.logo small{display:none}}
@media(max-width:560px){.logo-img{height:60px}}
html[data-theme="dark"] header{background:#101e2d}