/* Direction-aware fixed header, with a full-screen mobile navigation. */
:root{--header-space:112px}
body{padding-top:var(--header-space)}
body>.header{position:fixed;inset:0 0 auto;height:var(--header-space);z-index:30;transform:translateY(0);transition:transform 300ms ease, height 300ms ease;background:#f1eddf;border-bottom:1px solid #52694b30;box-shadow:none}
body>.header.is-scrolled{height:88px;box-shadow:0 6px 20px -8px #2a3c2c29}
body>.header.is-scrolled .logo img{transform:scale(.82)}
body>.header .logo img{transition:transform 300ms ease;transform-origin:center}
body>.header.is-hidden{transform:translateY(-102%);pointer-events:none}
body>.header:focus-within{pointer-events:auto}
html{scroll-padding-top:120px}
.mobile-menu{position:fixed;inset:0;margin:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#354733;color:var(--cream);overflow-y:auto;overscroll-behavior:contain;transform:none;opacity:0;transition:opacity 300ms ease,display 300ms allow-discrete,overlay 300ms allow-discrete}
.mobile-menu[open]{opacity:1;transform:none}
.mobile-menu::backdrop{background:transparent}
@starting-style{.mobile-menu[open]{opacity:0;transform:none}}
.mobile-menu-inner{min-height:100%;display:flex;flex-direction:column;padding:88px max(36px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(36px,env(safe-area-inset-left))}
.mobile-menu-close{position:fixed;z-index:2;top:14px;right:16px;width:48px;height:48px;border:0;background:transparent;color:#dc9c77;display:grid;place-items:center}
.mobile-menu-close::before,.mobile-menu-close::after{content:'';position:absolute;width:25px;height:2px;background:currentColor;transform:rotate(45deg)}
.mobile-menu-close::after{transform:rotate(-45deg)}
.mobile-nav-list{display:flex;flex-direction:column;gap:8px}
.mobile-nav-list>a,.mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;min-height:52px;width:100%;padding:12px 0;border:0;background:transparent;color:inherit;font:400 20px/1.4 Onest,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-align:left}
.mobile-nav-chevron{display:block;flex:0 0 28px;transform-origin:center;transition:transform 200ms ease}
.mobile-nav-heading[aria-expanded=true]{color:#dc9c77}
.mobile-nav-heading[aria-expanded=true] .mobile-nav-chevron{transform:rotate(180deg)}
.mobile-nav-list a:hover,.mobile-nav-list a[aria-current=page]{color:#dc9c77}
.mobile-nav-sub{padding:8px 0 16px 24px}
.mobile-nav-sub[hidden]{display:none}
.mobile-nav-sub a{display:block;padding:10px 0;min-height:44px;font-size:15px;line-height:1.5;color:var(--cream)}
.mobile-nav-brand{margin:auto auto 0;padding-top:56px;display:block}
.mobile-nav-brand img{width:150px;height:auto;background:transparent;padding:0;filter:grayscale(1) invert(1) brightness(1.7);mix-blend-mode:screen}
.mobile-menu[open] .mobile-nav-list>*{animation:mobile-item-in 400ms var(--ease) both}
.mobile-menu[open] .mobile-nav-list>:nth-child(2){animation-delay:50ms}
.mobile-menu[open] .mobile-nav-list>:nth-child(3){animation-delay:100ms}
.mobile-menu[open] .mobile-nav-list>:nth-child(4){animation-delay:150ms}
@keyframes mobile-item-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
body.mobile-nav-open{overflow:hidden}
@media(min-width:901px){body .header .menu-toggle{display:none}}
@media(max-width:900px){:root{--header-space:96px}body>.header,body>.header.is-scrolled{padding:8px var(--edge);display:grid;grid-template-columns:48px 1fr 48px;gap:0;align-items:center}body>.header.is-scrolled{height:80px}body .header nav,body .header.open nav,body .header-order{display:none}body .header .logo{grid-column:2;justify-self:center;width:118px;margin:0}body>.header.is-scrolled .logo img{transform:scale(.85)}body .header .menu-toggle{grid-column:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;min-height:48px;padding:10px;border:0;background:transparent;color:var(--ink)}.menu-toggle span{display:block;width:25px;height:2px;background:currentColor}html{scroll-padding-top:96px}}
@media(prefers-reduced-motion:reduce){body>.header,body>.header .logo img,.mobile-menu,.mobile-nav-chevron{transition:none}.mobile-menu[open] .mobile-nav-list>*{animation:none}}

@media(min-width:901px) and (max-width:1250px){body .header nav{gap:18px;margin-left:24px}body .header nav a{font-size:18px}body .header .logo{width:108px}body .header-order{font-size:12px;padding:14px}}

/* Direct mobile access to the basket, beside the menu toggle. */
.mobile-cart{display:none}
@media(max-width:900px){
 body>.header,body>.header.is-scrolled{grid-template-columns:minmax(0,1fr) 48px 48px;column-gap:8px}
 body .header .logo{grid-column:1;grid-row:1;justify-self:start}
 body .header .mobile-cart{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;position:relative;width:48px;height:48px;color:var(--ink);border-radius:50%}
 body .header .menu-toggle{grid-column:3;grid-row:1}
 .mobile-cart-count{position:absolute;top:0;right:0;min-width:19px;height:19px;padding:0 4px;border-radius:12px;display:grid;place-items:center;background:var(--rust);color:var(--cream);font:600 10px/1 Onest,sans-serif}
 .mobile-cart:hover{background:#99502d12}
 .mobile-cart:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
}
