@layer sections {
  /* sticky wrapper (Shopify wraps every section in its own element, so we style the wrapper via :has) */
  .shopify-section-group-header-group:has(.site-header) { position: sticky; top: 0; z-index: var(--z-header); }
  .shopify-section-group-header-group:has(.site-header[data-overlay]) { margin-bottom: calc(var(--header-h) * -1); }

  .site-header {
    position: relative;
    color: var(--c-cream);
    background: var(--c-ink);
    transition: transform 0.75s var(--ease-out), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), backdrop-filter 0.5s;
    view-transition-name: site-header;
  }
  .site-header[data-overlay]:not(.is-scrolled) { background: linear-gradient(to bottom, rgb(10 6 4 / 0.62), rgb(10 6 4 / 0)); }
  .site-header.is-scrolled {
    background: color-mix(in oklab, var(--c-ink) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.07), 0 24px 44px -30px rgb(0 0 0 / 0.75);
  }
  .site-header.is-hidden { transform: translateY(-112%); }

  .site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: calc(var(--logo-h) + 1.35rem);
    transition: min-height 0.6s var(--ease-out);
  }
  .site-header.is-scrolled .site-header__bar { min-height: calc(var(--logo-h) * 0.8 + 1rem); }

  /* ---- logo ---- */
  .site-header__logo {
    display: block;
    height: var(--logo-h);
    aspect-ratio: 101 / 77;
    transition: height 0.6s var(--ease-out), transform 0.7s var(--ease-spring);
    filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.4));
  }
  .site-header.is-scrolled .site-header__logo { height: calc(var(--logo-h) * 0.8); }
  .site-header[data-overlay]:not(.is-scrolled) .site-header__logo { height: calc(var(--logo-h) * 1.45); transform: translateY(0.35rem); }
  .site-header__logo-svg, .site-header__logo-img { width: 100%; height: 100%; object-fit: contain; }
  .site-header__logo:hover { transform: translateY(-2px) scale(1.04); }
  /* micro-animation of the real badge on hover */
  .site-header__logo .lb-rays-wrap { transition: transform 1.2s var(--ease-out); transform-origin: 96.5px 35px; }
  .site-header__logo:hover .lb-rays-wrap { transform: rotate(12deg) scale(1.12); }
  .site-header__logo .lb-spoon-wrap, .site-header__logo .lb-fork-wrap { transform-origin: 97.2px 55.9px; transition: transform 0.9s var(--ease-spring); }
  .site-header__logo:hover .lb-spoon-wrap { transform: rotate(-24deg); }
  .site-header__logo:hover .lb-fork-wrap { transform: rotate(24deg); }
  .site-header__logo .lb-band { transform-origin: 96.5px 40px; transition: transform 0.9s var(--ease-spring); }
  .site-header__logo:hover .lb-band { transform: scaleX(1.035); }

  /* ---- navigation ---- */
  .site-header__nav--left { justify-self: start; }
  .site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 2.4vw, 2.75rem); }
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.4rem); list-style: none; padding: 0; margin: 0; }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__item--parent:has(.mega) { position: static; }
  .nav__link {
    position: relative; display: block; padding-block: 1.25rem; color: inherit; text-decoration: none;
    font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1;
  }
  .nav__roll { display: block; height: 1.1em; overflow: hidden; line-height: 1.1; }
  .nav__roll > span { display: block; transition: transform 0.6s var(--ease-out); }
  .nav__item:hover .nav__roll > span, .nav__link:focus-visible .nav__roll > span { transform: translateY(-100%); }
  .nav__link[aria-current]::after {
    content: ''; position: absolute; left: 50%; bottom: 0.65rem; width: 6px; height: 6px; background: var(--c-gold); translate: -50% 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }
  .nav__toggle { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: 0.15rem; border-radius: 50%; color: inherit; opacity: 0.8; transition: transform 0.5s var(--ease-out), background var(--dur-s); }
  .nav__toggle .icon { width: 1rem; height: 1rem; }
  .nav__toggle:hover { background: rgb(255 255 255 / 0.1); }
  .nav__item.is-open > .nav__toggle { transform: rotate(180deg); }

  .dropdown {
    position: absolute; top: 100%; left: 50%; min-width: 15.5rem; margin: 0; padding: 0.6rem; list-style: none; border-radius: var(--radius-l);
    background: var(--c-cocoa); color: var(--c-cream); border: 1px solid rgb(255 255 255 / 0.09); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8);
    opacity: 0; visibility: hidden; translate: -50% 10px; transition: opacity 0.35s var(--ease-out), translate 0.55s var(--ease-out), visibility 0s 0.35s;
  }
  .nav__item.is-open > .dropdown { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
  .dropdown li { opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
  .is-open > .dropdown li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 50ms + 80ms); }
  .dropdown__link { display: block; padding: 0.8rem 1rem; border-radius: var(--radius-m); text-decoration: none; font-size: var(--fs-s); letter-spacing: 0.02em; transition: background var(--dur-s), color var(--dur-s), padding var(--dur-m) var(--ease-out); }
  .dropdown__link:hover, .dropdown__link:focus-visible { background: rgb(255 255 255 / 0.07); color: var(--c-honey); padding-left: 1.35rem; }
  .dropdown__link[aria-current] { color: var(--c-gold); }

  /* ---- mega panel ---- */
  .mega {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--c-cocoa); color: var(--c-cream);
    border-top: 1px solid rgb(255 255 255 / 0.08); box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.9);
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.75s var(--ease-out), visibility 0s 0.75s;
  }
  .nav__item.is-open > .mega { clip-path: inset(0 0 -60px 0); visibility: visible; transition: clip-path 0.75s var(--ease-out), visibility 0s; }
  .mega__inner { display: grid; grid-template-columns: minmax(230px, 0.9fr) 3.1fr; gap: clamp(2rem, 4vw, 4.5rem); padding-block: 2.5rem 3rem; align-items: start; }
  .mega__intro { display: grid; gap: 1.1rem; justify-items: start; padding-top: 0.5rem; }
  .mega__title { margin: 0; max-width: 11ch; }
  .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
  .mega-card { opacity: 0; transform: translateY(18px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
  .is-open .mega-card { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 160ms); }
  .mega-card__link { display: grid; gap: 0.35rem; text-decoration: none; color: inherit; }
  .mega-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); background: rgb(255 255 255 / 0.05); margin-bottom: 0.5rem; }
  .mega-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  .mega-card__link:hover .mega-card__img { transform: scale(1.07); }
  .mega-card__title { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2; font-weight: 500; text-wrap: balance; }
  .mega-card__price { font-size: var(--fs-s); color: var(--c-caramel); font-variant-numeric: tabular-nums; }

  /* ---- actions ---- */
  .site-header__actions { display: flex; align-items: center; gap: 0.15rem; }
  .site-header__burger { display: none; justify-self: start; }
  .site-header__account { padding: 0; }
  .site-header__account shopify-account { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; cursor: pointer; --shopify-account-color: currentColor; }
  .site-header__cart { position: relative; }
  .site-header__cart-count { position: absolute; top: 0.2rem; right: 0.1rem; pointer-events: none; }
  .cart-bubble {
    display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding-inline: 0.28rem; border-radius: var(--radius-pill);
    background: var(--c-gold); color: var(--c-ink); font-size: 0.6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    transition: transform 0.55s var(--ease-spring);
  }
  .cart-bubble.is-empty { transform: scale(0); }
  .cart-bubble.is-bump { animation: bump 0.7s var(--ease-spring); }
  @keyframes bump { 35% { transform: scale(1.55); } }

  /* ---- mobile ---- */
  @media (max-width: 989px) {
    .site-header__nav, .site-header__right > .site-header__nav { display: none; }
    .site-header__burger { display: grid; }
    .site-header__bar { grid-template-columns: 1fr auto 1fr; min-height: calc(var(--logo-h) * 0.85 + 1rem); }
    .site-header__logo { height: calc(var(--logo-h) * 0.85); }
    .site-header.is-scrolled .site-header__logo { height: calc(var(--logo-h) * 0.7); }
    .site-header__right { justify-self: end; }
  }

  /* ---- full-screen mobile menu ---- */
  .mobile-menu {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-overlay); background: var(--c-ink); color: var(--c-cream);
    clip-path: circle(0% at 2rem 2.5rem);
    transition: clip-path 0.85s var(--ease-in-out), display 0.85s allow-discrete, overlay 0.85s allow-discrete;
  }
  .mobile-menu[open] { clip-path: circle(150% at 2rem 2.5rem); }
  @starting-style { .mobile-menu[open] { clip-path: circle(0% at 2rem 2.5rem); } }
  .mobile-menu::backdrop { background: transparent; }
  .mobile-menu__inner { height: 100%; overflow-y: auto; display: flex; flex-direction: column; padding: max(1.25rem, env(safe-area-inset-top)) var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); background:
    radial-gradient(120% 60% at 100% 0%, rgb(217 164 65 / 0.14), transparent 60%), var(--c-ink); }
  .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
  .mobile-menu__logo { display: block; height: 56px; aspect-ratio: 101 / 77; }
  .mobile-menu__logo-svg { width: 100%; height: 100%; }
  .mobile-menu__nav { flex: 1; display: grid; align-content: center; padding-block: 2rem; }
  .mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
  .mobile-menu__item { opacity: 0; transform: translateY(26px); transition: opacity 0.4s, transform 0.4s; }
  .mobile-menu[open] .mobile-menu__item { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(0.35s + var(--i, 0) * 70ms); }
  @starting-style { .mobile-menu[open] .mobile-menu__item { opacity: 0; transform: translateY(26px); } }
  .mobile-menu__link { display: flex; align-items: baseline; gap: 1rem; padding-block: 0.35rem; text-decoration: none; font-family: var(--font-display); font-size: clamp(2.2rem, 9.5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: 'SOFT' var(--heading-soft, 40); }
  .mobile-menu__link[aria-current] .mobile-menu__label { color: var(--c-gold); }
  .mobile-menu__num { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--c-caramel); transform: translateY(-0.9em); }
  .mobile-menu__sub { list-style: none; margin: 0.25rem 0 0.75rem 2.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
  .mobile-menu__sub a { color: var(--c-caramel); text-decoration: none; font-size: var(--fs-s); letter-spacing: 0.04em; }
  .mobile-menu__sub a:hover { color: var(--c-honey); }
  .mobile-menu__foot { display: grid; gap: 1.25rem; opacity: 0; transition: opacity 0.4s; }
  .mobile-menu[open] .mobile-menu__foot { opacity: 1; transition: opacity 0.9s var(--ease-out) 0.7s; }
  .mobile-menu__cta { display: grid; gap: 0.75rem; }

  /* ---- reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .site-header, .mega, .dropdown, .mobile-menu { transition: none; }
    .mobile-menu { clip-path: none; }
  }
}