/* Shared storefront navigation: the same shell for every storefront route. */
:root{--store-nav-offset:120px;scroll-padding-top:var(--store-nav-offset)}
.header{position:fixed;inset:18px 0 auto;z-index:40;width:min(1240px,calc(100% - 64px));margin-inline:auto;background:#fffffffa;border:1px solid #e0e6ef;border-radius:999px;box-shadow:0 8px 30px #10254c12;transition:box-shadow 180ms,border-color 180ms;backdrop-filter:blur(16px)}
.header.is-scrolled{box-shadow:0 8px 32px #10254c20;border-color:#d6dfea}
.header .nav{width:100%;max-width:none;height:82px;padding:10px 24px;display:grid;grid-template-columns:170px minmax(0,1fr) 170px;align-items:center;gap:20px;position:relative}
.header .logo{width:145px;max-width:145px;justify-self:start}
.header .nav-links{display:contents;font-size:13px}
.nav-primary{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.header .nav-links a,.header .nav-dropdown-toggle{min-height:44px;padding:10px 17px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.7;color:#536077;white-space:nowrap;transition:background-color 160ms,color 160ms}
.header .nav-links a:hover,.header .nav-dropdown-toggle:hover,.header .nav-dropdown-toggle[aria-expanded="true"]{color:var(--blue);background:#edf3f8}
.header .nav-links a.active,.header .nav-links a[aria-current="page"]{color:var(--blue);background:#edf1fa}
.header .nav-links a:after{display:none}
.header .nav-actions{display:flex;align-items:center;justify-content:end;gap:8px}
.header .nav-actions .icon-btn{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.header .nav-actions .cart-btn{width:auto;min-height:44px;padding:0 17px;border-radius:999px;gap:8px;background:var(--blue);color:#fff}
.header .cart-label{display:inline;font-size:12px;white-space:nowrap}
.header .nav-actions .cart-btn:hover{background:var(--navy)}
.header .menu-toggle{display:none}
.nav-dropdown{position:relative}
.nav-chevron{width:7px;height:7px;display:block;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 160ms}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(225deg) translate(-2px,-1px)}
.nav-dropdown-panel{position:absolute;top:calc(100% + 13px);inset-inline-start:0;width:260px;max-height:min(480px,65dvh);overflow:auto;padding:10px;border:1px solid #e0e6ef;border-radius:20px;background:#fff;box-shadow:0 16px 40px #10254c18;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms,transform 160ms,visibility 160ms}
.nav-dropdown.open .nav-dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.header .nav-dropdown-panel a{white-space:normal;border-radius:12px;padding:12px 14px;line-height:1.8}
.header #extra-pages{display:block}
.hero-stage{padding-top:var(--store-nav-offset)}
.header a:focus-visible,.header button:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
@media(max-width:960px){
 :root{--store-nav-offset:102px}
 .header{top:12px;width:calc(100% - 32px)}
 .header .nav{height:70px;grid-template-columns:1fr auto;gap:14px;padding:9px 17px}
 .header .logo{width:126px;max-width:126px}
 .header .menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #e1e7ef;color:var(--blue);background:#f3f6fa}
 .header .menu-toggle[aria-expanded="true"]{color:#fff;background:var(--blue);border-color:var(--blue)}
 .header .nav-links,.header .nav-links.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;inset:calc(100% + 10px) 0 auto;height:auto;max-height:calc(100dvh - 195px);overflow:auto;padding:14px;gap:14px;border:1px solid #e0e6ef;border-radius:24px;background:#fff;box-shadow:0 16px 40px #10254c18;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 180ms,transform 180ms,visibility 180ms}
 .header .nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}
 .nav-primary{display:flex;flex-direction:column;align-items:stretch;gap:5px}
 .header .nav-links a,.header .nav-dropdown-toggle{width:100%;justify-content:space-between;min-height:48px;border-radius:12px;font-size:14px;padding:12px 16px}
 .nav-dropdown-panel{position:static;width:100%;max-height:none;margin-top:0;border:0;border-radius:14px;box-shadow:none;background:#f7f9fc;padding:0;display:none;transform:none}
 .nav-dropdown.open .nav-dropdown-panel{display:block;margin-top:6px;padding:6px}
 .header .nav-dropdown-panel a{font-size:13px;min-height:44px}
 .header .nav-actions{border-top:1px solid #edf0f5;padding:13px 2px 1px;justify-content:stretch;gap:10px}
 .header .nav-actions .icon-btn{width:48px;height:48px}
 .header .nav-actions .cart-btn{flex:1;width:auto;height:48px;justify-content:center}
 .header .cart-label{display:inline;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.header,.header *{transition:none!important}}

@media(max-width:700px){.footer{padding-bottom:env(safe-area-inset-bottom)}.toast{bottom:calc(20px + env(safe-area-inset-bottom))}}

/* At the top the links form their own capsule; scrolling unifies the shell. */
@media(min-width:961px){
 .header{transition:background-color 200ms,box-shadow 200ms,border-color 200ms,backdrop-filter 200ms}
 .header:not(.is-scrolled){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
 .nav-primary{justify-self:center;width:max-content;max-width:100%;border:1px solid transparent;border-radius:999px;padding:5px;transition:background-color 200ms,border-color 200ms}
 .header:not(.is-scrolled) .nav-primary{background:#ffffff16;border-color:#ffffff30;backdrop-filter:blur(12px)}
 .header:not(.is-scrolled) .logo img{filter:brightness(0) invert(1)}
 .header:not(.is-scrolled) .nav-primary>a,.header:not(.is-scrolled) .nav-dropdown-toggle{color:#fff}
 .header:not(.is-scrolled) .nav-primary>a:hover,.header:not(.is-scrolled) .nav-primary>a.active,.header:not(.is-scrolled) .nav-dropdown-toggle:hover,.header:not(.is-scrolled) .nav-dropdown-toggle[aria-expanded="true"]{background:#ffffff20;color:#fff}
 .header:not(.is-scrolled) .nav-actions #search-toggle{color:#fff;border-color:#ffffff40;background:#ffffff0a}
 .header:not(.is-scrolled) .nav-actions #search-toggle:hover{background:#ffffff20}
 .header:not(.is-scrolled) .nav-actions .cart-btn{background:#63dfd5;border-color:#63dfd5;color:#123c50}
 .header:not(.is-scrolled) .nav-actions .cart-btn:hover{background:#8aebe3;border-color:#8aebe3}
 .header .nav-dropdown-panel a{color:#536077}
 .header .nav-dropdown-panel a:hover{color:var(--blue);background:#edf3f8}
}