html,body{font-family:Nunito,system-ui,sans-serif}
@font-face{font-family:"Nunito";src:url("/assets/storefront/fonts/nunito.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
/* Shared storefront header contract (standardized). This file is the single
   authoritative source for desktop/mobile header geometry. Route stylesheets
   style page content only and must not redefine these selectors. header.css
   loads last on every public page so shared rules win. */
.site-header { position:relative; z-index:40; background:var(--bg); border-bottom:1px solid var(--mist); overflow:visible; }
.header-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:72px; overflow:visible; }
/* Header/nav shell owns its edge spacing on every route. Route `.wrap` rules
   (notably product.css) must not leak 16px into the shared shell. */
.site-header .header-inner, .cat-nav.wrap { padding-left:0; padding-right:0; }
.brand { min-width:0; justify-self:start; }
.brand img { display:block; min-width:140px; width:160px; height:40px; object-fit:contain; object-position:center; background:transparent; }
.site-header:not(.checkout-site-header) .brand img { min-width:222px; width:222px; height:50px; object-position:left center; }
.search-wrap { position:relative; flex:1; max-width:640px; margin:0 auto; width:100%; }
.search-form { display:flex; gap:0; align-items:center; flex:1; max-width:640px; margin:0 auto; width:100%; }
.search-form input { box-sizing:border-box; flex:1; height:var(--control); min-height:var(--control); border:1px solid var(--border); border-right:0; border-radius:var(--radius) 0 0 var(--radius); padding:0 14px; background:var(--bg); color:var(--ink); min-width:0; font-size:16px; width:100%; }
.search-form input:focus { outline:2px solid var(--ink); outline-offset:-2px; position:relative; z-index:1; }
.search-form .search-btn { box-sizing:border-box; height:var(--control); min-height:var(--control); border-radius:0 var(--radius) var(--radius) 0; background:var(--ink); border:1px solid var(--ink); color:#fff; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:var(--control); height:var(--control); border:1px solid var(--mist); background:var(--bg); border-radius:var(--radius); cursor:pointer; color:var(--ink); }
.hamburger { display:none; }
.header-inner .hamburger { border:0; background:transparent; }
.header-actions { display:flex; gap:4px; align-items:center; }
.header-actions .icon-btn { border:0; background:transparent; box-shadow:none; width:auto; min-width:var(--control); padding:0 10px; gap:6px; border-radius:var(--radius); color:var(--ink); }
.header-actions .action-label { font-size:14px; white-space:nowrap; }
.mobile-search-toggle { display:none; }
.cat-nav { border-top:1px solid var(--mist); overflow:visible; }
.cat-nav>ul { list-style:none; margin:0; padding:0; display:flex; gap:4px; overflow:visible; justify-content:flex-start; }
.cat-nav>ul>li { position:relative; overflow:visible; }
.cat-nav>ul>li+li { border-left:1px solid var(--mist); }
.cat-nav a, .cat-nav .drop-btn { display:inline-flex; align-items:center; min-height:var(--control); padding:0 16px; text-decoration:none; white-space:nowrap; border-radius:var(--radius); border:0; background:none; cursor:pointer; color:inherit; font-size:16px; }
/* Navbar content starts flush with the shell gutter: the outer edges carry no
   inner left/right padding, so labels line up with the header/search content. */
.cat-nav>ul>li:first-child>a, .cat-nav>ul>li:first-child>.drop-btn { padding-left:0; }
.cat-nav>ul>li:last-child>a, .cat-nav>ul>li:last-child>.drop-btn { padding-right:0; }
.dropdown { position:absolute; left:0; top:100%; width:1480px; max-width:calc(100vw - 32px); background:var(--bg); border-radius:var(--radius); padding:0; outline:1px solid var(--mist); outline-offset:-1px; display:none; flex-direction:column; z-index:50; overflow:visible; }
.has-dropdown:hover>.dropdown, .dropdown.open { display:flex; }
.dropdown a { min-height:var(--control); }
.dropdown-columns { columns:3; column-gap:26px; width:1480px; max-width:calc(100vw - 32px); padding:10px 12px; }
.dropdown-columns a { display:block; min-height:34px; padding:7px 10px; font-size:13px; break-inside:avoid; text-decoration:none; }
.dropdown-columns a:hover, .dropdown-columns a:focus-visible { background:var(--mist); text-decoration:none; }
.search-wrap .search-form { max-width:none; margin:0; }
.search-suggestions { position:absolute; top:100%; left:0; right:0; z-index:70; list-style:none; margin:4px 0 0; padding:6px; background:var(--bg); border:1px solid var(--mist); border-radius:var(--radius); box-shadow:0 10px 30px rgba(36,62,74,.12); max-height:320px; overflow:auto; }
.search-suggestions li button { display:block; width:100%; text-align:left; border:0; background:none; padding:10px 12px; min-height:var(--control); font-size:15px; color:var(--ink); cursor:pointer; border-radius:6px; }
.search-suggestions li button:hover, .search-suggestions li button:focus-visible { background:var(--mist); outline:none; }
/* Hover feedback is pointer-only: on touch devices a tap paints the hover
   background and reads as a gray flash. Inside the media query the desktop
   rules are unchanged. */
@media (hover:hover) {
  .search-form .search-btn:hover { background:var(--ink); }
  .icon-btn:hover { background:var(--mist); }
  .header-actions .icon-btn:hover { background:transparent; }
}
.header-actions .icon-btn, .hamburger, .mobile-search-toggle, .cart-btn, .track-btn, .menu-nav-list a, .menu-nav-list button { -webkit-tap-highlight-color:transparent; }
.header-sub { overflow:visible; }
.menu-list { display:grid; gap:8px; }
.menu-view[hidden] { display:none; }
.menu-view { min-height:0; flex:1; }
.menu-view-main { display:flex; flex-direction:column; }
#menu-dialog[open] { display:flex; flex-direction:column; }
#menu-dialog[open] .menu-list { flex:1; display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.menu-nav-extra { margin-top:auto; padding-top:12px; border-top:1px solid var(--mist); }
.menu-nav-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.menu-nav-list a, .menu-nav-list button { box-sizing:border-box; width:100%; display:flex; align-items:center; min-height:var(--control); padding:0 14px; border:1px solid var(--mist); border-radius:var(--radius); color:var(--ink); background:var(--bg); font:inherit; font-size:16px; text-decoration:none; text-align:left; }
.menu-nav-list a:hover, .menu-nav-list a:focus-visible, .menu-nav-list button:not(:disabled):hover, .menu-nav-list button:not(:disabled):focus-visible { background:var(--mist); }
.menu-view-link { justify-content:space-between; cursor:pointer; }
.menu-view-chevron { font-size:24px; line-height:1; }
.menu-extra-link { gap:10px; }
.menu-extra-link svg { width:24px; height:24px; flex:0 0 auto; }
.menu-future-link[disabled] { cursor:default; opacity:.72; }
.menu-view-all { display:flex; flex-direction:column; overflow:hidden; }
.menu-subview-head { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; min-height:60px; border-bottom:1px solid var(--mist); }
.menu-subview-title { grid-column:2; color:var(--ink); font-size:18px; text-align:center; }
.menu-back { grid-column:1; border:0; background:transparent; }
.menu-all-list { min-height:0; overflow-y:auto; padding:8px 0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.menu-all-list .dropdown-columns { columns:1; width:auto; max-width:none; padding:0; }
.menu-all-list .dropdown-columns a { display:flex; align-items:center; min-height:44px; margin-top:6px; padding:0 12px; border:1px solid var(--mist); border-radius:var(--radius); color:var(--ink); text-decoration:none; }
#menu-dialog { margin:0 auto 0 0; max-width:min(340px,85vw); width:min(340px,85vw); height:100dvh; max-height:100dvh; border-radius:0; }
/* The drawer enters as a smooth slide from the left edge; the dimmed backdrop
   fades in with it. Motion is disabled for reduced-motion users. */
#menu-dialog[open] { animation:menu-drawer-slide .28s cubic-bezier(.22,.61,.36,1); }
@keyframes menu-drawer-slide { from { transform:translateX(-100%); } to { transform:translateX(0); } }
#menu-dialog[open]::backdrop { animation:menu-backdrop-fade .28s ease-out; }
@keyframes menu-backdrop-fade { from { background:rgba(19,33,41,0); } }
@media (prefers-reduced-motion:reduce) {
  #menu-dialog[open] { animation:none; }
  #menu-dialog[open]::backdrop { animation:none; }
}
#menu-dialog .filter-chip { color:var(--ink); }

@media (max-width:767px) {
  .site-header { position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--mist); }
  .site-header .header-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"menu logo actions" "search search search"; align-items:center; gap:6px; position:relative; width:100%; max-width:100%; margin:0; padding:6px 16px; min-width:0; min-height:0; box-sizing:border-box; }
  .hamburger { grid-area:menu; display:inline-flex; width:48px; height:48px; min-width:48px; min-height:48px; padding:0; padding-left:0; justify-content:flex-start; justify-self:start; color:var(--ink); position:relative; z-index:1; }
  .hamburger svg { width:27px; height:27px; display:block; }
  /* Mobile logo: an approximately 180x40 rendered box, centered on the viewport,
     proportionally contained (the admin asset is never distorted). It is
     absolutely positioned so it can never push the header wider than the
     viewport; max-width is a guard against crossing the 16px gutters on the
     narrowest 360px target. */
  .brand { grid-area:auto; width:auto; min-width:0; justify-self:center; position:absolute; left:50%; top:6px; transform:translateX(-50%); max-width:none; z-index:0; }
  .brand img { width:180px; height:40px; min-width:0; max-width:calc(100vw - 32px); object-fit:contain; object-position:center; transform:none; }
  .site-header:not(.checkout-site-header) .brand img { width:180px; height:40px; min-width:0; max-width:calc(100vw - 32px); object-fit:contain; object-position:center; transform:none; }
  /* Non-home keeps the 48px search toggle in the top-right action row. Cap the
     viewport-centered logo so it can never cover that icon at the 360px target
     while it still renders the full ~180px box at 390px. */
  .site-header:not(.checkout-site-header):not(.home-site-header) .brand img { max-width:calc(100vw - 203px); }
  .header-actions { grid-area:actions; justify-self:end; display:flex; align-items:center; gap:0; min-width:0; position:relative; z-index:1; }
  .header-actions .icon-btn { width:48px; height:48px; min-width:48px; min-height:48px; color:var(--ink); }
  .header-actions .cart-btn { justify-content:flex-end; padding-right:0; text-decoration:none; display:inline-flex !important; }
  .mobile-search-toggle { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; min-width:48px; min-height:48px; margin-inline:auto; color:var(--ink); }
  .mobile-search-toggle svg, .cart-btn svg, .track-btn svg { width:27px; height:27px; display:block; }
  .home-site-header .mobile-search-toggle { display:none !important; }
  .search-wrap { grid-area:search; width:100%; max-width:100%; display:none; min-width:0; }
  .search-wrap.is-open { display:flex; }
  .home-site-header .search-wrap { display:flex; }
  .search-form { width:100%; max-width:100%; display:flex; flex-wrap:nowrap; align-items:stretch; min-width:0; }
  .search-form input { height:44px; min-height:44px; min-width:0; flex:1 1 auto; }
  .search-form .search-btn { height:44px; min-height:44px; min-width:44px; flex:0 0 auto; }
  .cat-nav { display:none; }
  .track-btn { display:none !important; }
  .cart-btn .action-label, .track-btn .action-label { display:none; }
  .hamburger, .mobile-search-toggle, .cart-btn { color:var(--ink); }
  /* Drawer submenu: the same canonical categories flow one-per-row inside the
     drawer; the 1480px desktop panel never applies here. */
  #menu-dialog .has-dropdown>.dropdown { position:static; width:auto; max-width:none; display:none; box-shadow:none; outline:0; background:transparent; padding:0 0 0 12px; }
  #menu-dialog .has-dropdown>.dropdown.open { display:block; }
  .menu-nav-list .dropdown-columns { columns:1; width:auto; padding:4px 0; }
  .menu-nav-list .dropdown-columns a { min-height:44px; border:1px solid var(--mist); border-radius:var(--radius); margin-top:6px; padding:0 12px; }
  .menu-nav-list .dropdown .all-products-link { display:flex; align-items:center; min-height:44px; margin-top:8px; border:1px solid var(--ink); border-radius:var(--radius); color:var(--ink); text-decoration:none; font-weight:700; padding:0 12px; }
  #menu-dialog .dialog-head { justify-content:flex-end; }
  #menu-dialog { margin:0 auto 0 0; max-width:85vw; width:85vw; height:100dvh; max-height:100dvh; border-radius:0; }
}

@media (max-width:767px) {
  #menu-dialog .has-dropdown:hover>.dropdown:not(.open){display:none!important}
  #menu-dialog .has-dropdown>.dropdown.open{display:block!important}
  #menu-dialog .menu-nav-list[data-menu-nav]{flex:0 0 auto;min-height:max-content;overflow:visible}
  #menu-dialog .menu-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
.header-actions .track-btn {
  text-decoration: none;
}
.header-actions .cart-btn {
  text-decoration: none;
}
.header-actions .track-btn:hover,
.header-actions .cart-btn:hover {
  text-decoration: underline;
}
.header-actions .track-btn:focus-visible,
.header-actions .cart-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}