/* One header for every page: the forest bar finished with the site's hand-drawn wave, and a Get the kit button (Ali, 24 Sep 2026: option C) */
.site-header{position:relative;z-index:6}
.site-header::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:22px;background:#143d2b;-webkit-mask:url('assets/site/wave-top.svg') top/100% 22px no-repeat;mask:url('assets/site/wave-top.svg') top/100% 22px no-repeat;transform:scaleY(-1);pointer-events:none}

/* Get the kit: always one tap from checkout */
.header-cta{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:48px;padding:10px 24px;background:#f3bf3d;color:#143d2b;font:700 18px/1.1 'Figtree',system-ui,sans-serif;text-decoration:none;white-space:nowrap;border:1.5px solid #f3bf3d;border-radius:46% 42% 40% 37% / 76% 78% 62% 75%;box-shadow:0 3px 0 #0b2418;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.header-cta:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 5px 0 #0b2418}
.header-cta:active{transform:translateY(1px);box-shadow:0 1px 0 #0b2418}
.header-cta:focus-visible{outline:3px solid #f3bf3d;outline-offset:4px}

/* Layout: logo left, links and button right, Menu button last on small screens */
.site-header,.site-header>.wrap{justify-content:flex-start}
.site-header .desktop-nav,.site-header .site-nav{margin-left:auto;margin-right:clamp(18px,2.4vw,34px)}
.site-header .nav-toggle{order:3}.site-header .header-cta{order:2}
/* Sign in / My kitchen: optional account link (account.js swaps the label once signed in) */
.header-account{order:2;display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;min-width:44px;justify-content:center;margin-right:16px;color:#fff5dd;font:600 17px/1.1 'Figtree',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.header-account svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.header-account:hover .header-account-label{text-decoration:underline;text-decoration-color:#f3bf3d;text-decoration-thickness:2px;text-underline-offset:5px}
.header-account:focus-visible{outline:3px solid #f3bf3d;outline-offset:3px;border-radius:8px}
@media(max-width:1480px){.header-account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header-account{margin-right:12px}}
@media(max-width:1200px){.site-header .header-account{margin-left:auto;margin-right:10px}.site-header .header-cta{margin-left:0}.site-header .mobile-menu,.site-header .nav-toggle{margin-left:12px}}
@media(max-width:400px){.site-header .logo{width:164px!important;margin-left:-8px!important}}
@media(max-width:560px){.site-header .header-cta{display:none}.site-header .header-account{margin-right:4px}.site-header .mobile-menu,.site-header .nav-toggle{margin-left:8px}.site-header::after{height:16px;-webkit-mask-size:100% 16px;mask-size:100% 16px}}

@media(prefers-reduced-motion:reduce){.header-cta{transition:none}.header-cta:hover{transform:none}}
@media(forced-colors:active){.header-cta{border:2px solid ButtonText}.site-header::after{display:none}}
@media(max-width:360px){.site-header>.wrap{padding-inline:12px!important}.site-header .logo{width:132px!important;margin-left:-4px!important}.site-header .nav-toggle{padding:8px 10px;min-width:0}}