/* The logo and three actions share one row on every storefront page. */
.site-header{border-top:3px solid var(--wine);position:relative;z-index:15}
body .site-header .header-main.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:auto;min-height:6rem;max-width:none;gap:2rem;padding-block:.625rem}
body .site-header .header-main.wrap .wordmark{width:max-content;max-width:100%;justify-self:start}
body .site-header .header-main .header-actions{display:flex;grid-column:2;grid-row:1;align-items:center;justify-self:end;gap:.75rem;margin:0}
body .site-header .header-actions :is(#navigation-toggle,#search-toggle,#cart-button){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;min-height:2.75rem;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:.875rem;line-height:1}
body .site-header .header-actions :is(#navigation-toggle,#search-toggle,#cart-button) svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.5}
body .site-header .header-actions :is(#navigation-toggle,#search-toggle,#cart-button):hover{color:var(--accent-dark)}
body .site-header .header-actions :is(#navigation-toggle,#search-toggle,#cart-button):focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
.site-header #cart-count{position:absolute;top:1px;right:0;display:grid;place-items:center;min-width:1.0625rem;width:auto;height:1.0625rem;padding:0 .1875rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.625rem;font-weight:500;line-height:1}
.nav-chevron{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}
[aria-expanded=true]>.nav-chevron{transform:rotate(180deg)}

/* Search opens beneath the header without changing the navigation controls. */
.site-header #header-search{position:relative;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding-block:0 .875rem}
.site-header #header-search #search-form{position:relative;inset:auto;display:flex;flex:0 1 38rem;grid-column:auto;grid-row:auto;width:min(38rem,100%);max-width:none;min-width:0;height:3rem;margin:0;border-bottom:1px solid var(--line);background:transparent}
.site-header #header-search #search{min-width:0;width:100%;border:0;background:transparent;font-size:1rem}
.site-header #header-search #search-form>button{flex:none;display:grid;place-items:center;width:2.75rem;min-width:2.75rem;height:3rem;padding:.625rem;border:0;background:transparent}
.site-header #search-close{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted)}
.site-header #search-close:hover{color:var(--ink)}
.site-header #search-close svg{width:1.25rem;height:1.25rem}
.site-header #search-close:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}

/* The drawer keeps the existing lateral movement and simple text hierarchy. */
#navigation-dialog{--menu-category-row:2.125rem;--menu-main-row:2.375rem;--menu-heading-height:3rem;--menu-category-size:.90625rem;position:fixed;inset:0 0 0 auto;margin:0;width:min(24rem,calc(100vw - 2rem));max-width:none;height:100vh;height:100dvh;max-height:none;padding:env(safe-area-inset-top) max(1.5rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left));border:0;border-radius:0;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:-8px 0 40px #24212418}
#navigation-dialog::backdrop{background:#24212455;backdrop-filter:none}
.navigation-heading{display:flex;align-items:center;justify-content:flex-end;min-height:var(--menu-heading-height);margin:0;padding:0}
#navigation-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;margin:0 -.5rem 0 0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink)}
#navigation-close svg{width:1.5rem;height:1.5rem;stroke-width:1.5}
#navigation-close:hover{color:var(--accent-dark)}
#navigation-links{display:block;flex:none;order:0;width:100%;margin:0;padding:0;overflow:visible;white-space:normal}
#navigation-links .navigation-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:var(--menu-main-row);padding:.375rem 0;border:0;border-radius:0;background:transparent;text-align:left;font:400 .90625rem/1.4 var(--sans);letter-spacing:.045em;text-transform:uppercase;color:var(--ink);white-space:normal}
#navigation-links>.navigation-item{border-top:1px solid var(--line)}
#navigation-links :is(#category-navigation,#sale-navigation){display:block;position:static;margin:0;border:0}
#navigation-links #categories-button{font-size:.9375rem;font-weight:500}
#navigation-links #categories-button .nav-chevron{flex:none;width:1.125rem;height:1.125rem;margin:0}
#navigation-links #categories-panel{display:grid;grid-template-rows:1fr;position:static;width:auto;max-width:none;max-height:none;margin:0;padding:0 0 .5rem;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1}
#navigation-links #categories-panel[inert]{grid-template-rows:0fr;padding-bottom:0;opacity:0}
#categories-panel>.categories-content{min-height:0;overflow:hidden}
#category-links{list-style:none;margin:0;padding:0 0 0 .75rem}
#category-links :is(a,button){display:flex;align-items:center;width:100%;min-height:var(--menu-category-row);margin:0;padding:.25rem 0;border:0;border-radius:0;background:transparent;color:var(--muted);font:400 var(--menu-category-size)/1.4 var(--sans);text-align:left;text-decoration:none;white-space:normal}
#navigation-links .navigation-item:hover,#navigation-links .navigation-item[aria-current=page],#category-links :is(a,button):hover,#category-links a[aria-current=page],#navigation-links #categories-button:hover{color:var(--accent-dark)}
#category-links a[aria-current=page]{font-weight:500}
#category-links [aria-disabled=true],#category-links [aria-disabled=true]:hover{color:var(--muted);opacity:.55;cursor:not-allowed}
#navigation-dialog :is(a,button):focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
#navigation-links #nav-sale{display:flex;align-items:center;width:100%;min-height:var(--menu-category-row);margin:0;padding:.25rem 0 .25rem .75rem;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 var(--menu-category-size)/1.4 var(--sans);letter-spacing:0;text-transform:none;text-align:left}
#navigation-links #nav-sale:hover{color:var(--accent-dark)}
#navigation-links #sale-message{position:static;width:auto;max-width:none;margin:0;padding:.125rem 0 .75rem .75rem;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font:400 .8125rem/1.6 var(--sans);text-align:left;white-space:normal;transform:none}
#navigation-links #sale-message::after{display:none}

#favorites-note{display:flex;align-items:start;gap:.875rem;border-block:1px solid var(--line);padding:1rem 0;margin:-.25rem 0 1.5rem;color:var(--muted);font-size:.875rem;line-height:1.6}
#favorites-note svg{width:1.25rem;min-width:1.25rem;color:var(--wine);margin-top:.15rem}
#favorites-note strong{display:block;color:var(--ink);font-weight:500}
#catalog-view.is-favorites .filters,#catalog-view.is-favorites .catalog-toolbar{display:none}
#catalog-view.is-favorites .catalog-layout{grid-template-columns:minmax(0,1fr)}

@media(max-width:760px){
  body .site-header .header-main.wrap{grid-template-columns:minmax(0,1fr) auto;gap:.75rem;min-height:5rem;padding-block:.625rem}
  body .site-header .header-main .header-actions{gap:.25rem}
  .site-header #header-search{gap:.375rem;padding-bottom:.625rem}
  .site-header #header-search #search-form{flex:1;width:100%}
  #navigation-dialog{padding-inline:max(1.25rem,env(safe-area-inset-left)) max(1.25rem,env(safe-area-inset-right))}
  #favorites-note{font-size:.8125rem;margin-bottom:1rem}
}
@media(max-width:380px){
  body .site-header .header-main.wrap{gap:.5rem}
  body .site-header .header-main .header-actions{gap:0}
}
@media(min-height:720px){
  #navigation-dialog{--menu-category-row:2.25rem;--menu-main-row:2.5rem;--menu-heading-height:3.25rem}
}
@media(max-height:600px){
  #navigation-dialog{--menu-category-row:2rem;--menu-main-row:2.25rem;--menu-heading-height:2.75rem;--menu-category-size:.875rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
  #navigation-links #categories-panel{padding-bottom:.25rem}
  #navigation-links #categories-panel[inert]{padding-bottom:0}
}
/* In short, wide windows the whole category flow, including Sale, reads down
   the left column and then the right, matching its keyboard order. */
@media(max-height:600px) and (min-width:560px){
  #navigation-dialog{width:min(38rem,calc(100vw - 2rem));--menu-category-row:1.875rem;--menu-main-row:2.125rem}
  #navigation-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem}
  #navigation-links #category-navigation{grid-column:1/-1}
  #navigation-links #categories-panel{overflow:hidden}
  #categories-panel>.categories-content{align-self:start;columns:2;column-gap:1.5rem;padding-left:.75rem}
  #category-links,#navigation-links #nav-sale,#navigation-links #sale-message{padding-left:0}
  #category-links>li,#navigation-links #sale-navigation{break-inside:avoid}
  #navigation-links>.navigation-item{font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.nav-chevron{transition:none}}
@media(prefers-reduced-motion:no-preference){
  #navigation-links #categories-panel{transition:grid-template-rows .34s cubic-bezier(.22,.8,.24,1),padding-bottom .34s cubic-bezier(.22,.8,.24,1),opacity .25s ease}
  #navigation-links #categories-button .nav-chevron{transition:transform .34s cubic-bezier(.22,.8,.24,1)}
  #navigation-dialog{transform:translateX(100%);transition:transform .4s cubic-bezier(.22,.8,.24,1),display .4s allow-discrete,overlay .4s allow-discrete}
  #navigation-dialog[open]{transform:translateX(0)}
  #navigation-dialog::backdrop{opacity:0;transition:opacity .4s ease,display .4s allow-discrete,overlay .4s allow-discrete}
  #navigation-dialog[open]::backdrop{opacity:1}
  @starting-style{
    #navigation-dialog[open]{transform:translateX(100%)}
    #navigation-dialog[open]::backdrop{opacity:0}
  }
}