/* ==========================================================================
   LiquorZone Village Liquors · mobile-first, modern CSS
   Layers: tokens → reset → base → layout → components → filters → motion → utils
   ========================================================================== */

@layer tokens, reset, base, layout, components, filters, motion, utils;

/* ░░ animatable custom properties ░░ */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg }
@property --glow  { syntax: "<percentage>"; inherits: false; initial-value: 60% }
@property --lift  { syntax: "<length>"; inherits: false; initial-value: 0px }

@layer tokens {
  :root {
    color-scheme: light dark;

    /* brand */
    --lqz-red: oklch(57% 0.225 24);
    --lqz-red-deep: oklch(46% 0.21 24);
    --lqz-navy: oklch(27% 0.085 272);
    --lqz-navy-deep: oklch(18% 0.055 272);
    --lqz-leaf: oklch(72% 0.095 132);
    --lqz-gold: oklch(80% 0.14 78);

    /* semantic, light theme */
    --bg: oklch(97% 0.017 85);
    --bg-tint: oklch(94% 0.022 85);
    --surface: oklch(100% 0 0);
    --surface-2: oklch(96% 0.014 85);
    --ink: oklch(24% 0.03 272);
    --ink-soft: oklch(45% 0.025 272);
    --ink-faint: oklch(62% 0.02 272);
    --line: oklch(87% 0.015 85);
    --accent: var(--lqz-red);
    --accent-ink: oklch(99% 0 0);
    --tile: oklch(95% 0.018 88);
    --shadow: 0 1px 2px oklch(24% 0.03 272 / 8%), 0 12px 28px -12px oklch(24% 0.03 272 / 22%);
    --shadow-lift: 0 2px 4px oklch(24% 0.03 272 / 10%), 0 26px 50px -20px oklch(24% 0.03 272 / 30%);

    /* rhythm */
    --wrap: 1240px;
    --gut: clamp(1.15rem, 4vw, 2.5rem);
    --gutter-block: clamp(3.5rem, 9vw, 7.5rem);
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --head-h: 64px;
    --demo-h: 3.25rem;

    /* type */
    --font-display: "Bricolage Grotesque", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Figtree", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --fs-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
    --fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.96rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    --fs-lg: clamp(1.14rem, 1.05rem + 0.5vw, 1.4rem);
    --fs-h2: clamp(1.95rem, 1.35rem + 3.4vw, 3.6rem);
    --fs-h3: clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem);
    --fs-hero: clamp(2.7rem, 1.2rem + 9.5vw, 7rem);
    --fs-price: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem);

    transition: --lqz-red 0.4s;
  }

  @media (min-width: 720px) {
    :root { --head-h: 78px }
  }

  /* dark theme, both by preference and by toggle */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: var(--lqz-navy-deep);
      --bg-tint: oklch(21% 0.06 272);
      --surface: oklch(25% 0.07 272);
      --surface-2: oklch(29% 0.07 272);
      --ink: oklch(95% 0.012 85);
      --ink-soft: oklch(80% 0.02 272);
      --ink-faint: oklch(62% 0.02 272);
      --line: oklch(36% 0.05 272);
      --tile: oklch(31% 0.055 272);
      --shadow: 0 1px 2px oklch(0% 0 0 / 40%), 0 16px 34px -14px oklch(0% 0 0 / 60%);
      --shadow-lift: 0 2px 6px oklch(0% 0 0 / 45%), 0 30px 60px -22px oklch(0% 0 0 / 70%);
    }
  }

  :root[data-theme="dark"] {
    --bg: var(--lqz-navy-deep);
    --bg-tint: oklch(21% 0.06 272);
    --surface: oklch(25% 0.07 272);
    --surface-2: oklch(29% 0.07 272);
    --ink: oklch(95% 0.012 85);
    --ink-soft: oklch(80% 0.02 272);
    --ink-faint: oklch(62% 0.02 272);
    --line: oklch(36% 0.05 272);
    --tile: oklch(31% 0.055 272);
    --shadow: 0 1px 2px oklch(0% 0 0 / 40%), 0 16px 34px -14px oklch(0% 0 0 / 60%);
    --shadow-lift: 0 2px 6px oklch(0% 0 0 / 45%), 0 30px 60px -22px oklch(0% 0 0 / 70%);
  }
}

@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box }

  * { margin: 0 }

  html {
    block-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--head-h) + var(--demo-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-block-size: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    text-wrap: pretty;
    overflow-x: clip;
    padding-block-start: calc(var(--head-h) + var(--demo-h));
    padding-inline: env(safe-area-inset-inline-start, 0px);
    padding-inline-end: env(safe-area-inset-inline-end, 0px);
  }

  body:has(#age-gate[open]) { overflow: hidden }

  img,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  picture { display: contents }

  input,
  button,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button { background: none; border: 0; cursor: pointer }

  ul, ol { list-style: none; padding: 0 }

  a { color: inherit; text-decoration: none }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  address { font-style: normal }

  table { border-collapse: collapse; inline-size: 100% }

  s { text-decoration-thickness: 2px }

  [hidden]:where(:not([hidden="until-found"])) { display: none !important }
}

@layer base {
  ::selection {
    background: color-mix(in oklab, var(--accent) 22%, var(--bg));
    color: var(--ink);
  }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
  }

  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden }

  .wrap {
    inline-size: min(100% - (var(--gut) * 2), var(--wrap));
    margin-inline: auto;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline: 0.5rem;
    z-index: 999;
    padding: 0.7rem 1.1rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius-pill);
    font-weight: 700;
    translate: 0 -160%;
    transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .skip-link:focus-visible { translate: 0 0 }

  .ico {
    inline-size: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .kicker {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .kicker--light { color: color-mix(in oklab, var(--lqz-gold) 80%, white) }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--lqz-gold) 70%, white);
  }

  .dot {
    inline-size: 9px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ink-faint);
    flex: none;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--lqz-leaf) 70%, transparent);
  }

  .dot[data-status="open"] {
    background: var(--lqz-leaf);
    animation: pulse 2.4s ease-out infinite;
  }

  .dot[data-status="closed"] { background: var(--accent) }

  .mark { color: var(--accent) }
}

@layer layout {
  .section {
    padding-block: var(--gutter-block);
    position: relative;
  }

  .section--tint { background: var(--bg-tint) }

  .section--dark {
    background:
      radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--lqz-navy) 92%, var(--lqz-red)) 0%, transparent 62%),
      var(--lqz-navy-deep);
    color: oklch(95% 0.012 85);
  }

  .section--dark .section__lede { color: oklch(80% 0.02 272) }

  .section--legal {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    background: var(--surface-2);
    border-block-start: 1px solid var(--line);
  }

  .section__head {
    display: grid;
    gap: 0.7rem;
    margin-block-end: clamp(1.75rem, 4vw, 3rem);
    max-inline-size: 62ch;
  }

  .section__head h2 { font-size: var(--fs-h2) }

  .section__lede {
    color: var(--ink-soft);
    font-size: var(--fs-lg);
    line-height: 1.55;
    max-inline-size: 58ch;
  }
}

/* ░░ temporary demo notice ░░ */
@layer components {
  .demo-banner {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 110;
    min-block-size: var(--demo-h);
    display: grid;
    place-items: center;
    padding-block: 0.45rem;
    padding-inline: calc(var(--gut) * 0.6);
    background: var(--lqz-gold);
    color: var(--lqz-navy-deep);
    box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--lqz-navy-deep) 30%, transparent);
  }

  .demo-banner p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem 1.15rem;
    font-size: var(--fs-xs);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
  }
}

/* ░░ header ░░ */
@layer components {
  .site-head {
    position: fixed;
    inset-block-start: var(--demo-h);
    inset-inline: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border-block-end: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  }

  .site-head__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2.4vw, 1rem);
    block-size: var(--head-h);
  }

  .brand {
    display: flex;
    align-items: center;
    flex: none;
    view-transition-name: brand;
  }

  .brand__logo {
    display: block;
    padding: 0.3rem 0.55rem;
    background: white;
    border: 1px solid color-mix(in oklab, var(--line) 60%, white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    line-height: 0;
  }

  .brand__logo img {
    block-size: clamp(34px, 7.2vw, 46px);
    inline-size: auto;
    width: auto;
  }

  .site-nav {
    display: none;
    gap: clamp(0.4rem, 1.6vw, 1.1rem);
    margin-inline-start: auto;
    font-weight: 600;
    font-size: var(--fs-sm);
  }

  .site-nav a {
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    transition: color 0.2s, background 0.2s;
  }

  .site-nav a:hover {
    color: var(--ink);
    background: color-mix(in oklab, var(--accent) 10%, transparent);
  }

  @media (min-width: 980px) {
    .site-nav { display: flex }
    .site-head__actions { margin-inline-start: auto }
  }

  .site-head__actions {
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.6vw, 0.5rem);
    margin-inline-start: auto;
  }

  .icon-btn {
    display: grid;
    place-items: center;
    inline-size: clamp(38px, 11.5vw, 42px);
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
  }

  .icon-btn:active { transform: scale(0.94) }

  /* two classes: outranks the single-class .icon-btn display rule above */
  @media (min-width: 980px) {
    .icon-btn.burger { display: none }
  }

  .icon-btn svg {
    inline-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon-btn .ico-moon { display: none }

  :root[data-theme="dark"] .icon-btn .ico-sun { display: none }
  :root[data-theme="dark"] .icon-btn .ico-moon { display: block }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .icon-btn .ico-sun { display: none }
    :root:not([data-theme]) .icon-btn .ico-moon { display: block }
  }

  .call-cta span { display: none }

  @media (min-width: 480px) {
    .call-cta span { display: inline }
  }

  /* buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.15rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
    line-height: 1.1;
    border: 2px solid transparent;
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, background 0.2s, color 0.2s;
  }

  .btn:active { transform: translateY(1px) scale(0.99) }

  .btn--sm { padding: 0.5rem 0.85rem }

  /* the header call button drops its number below 480px, so reclaim that padding */
  .call-cta { padding-inline: clamp(0.55rem, 2.6vw, 0.85rem) }

  .btn--lg { padding: 0.95rem 1.5rem; font-size: var(--fs-base) }

  .btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--accent) 70%, transparent);
  }

  .btn--primary:hover {
    background: var(--lqz-red-deep);
    box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--accent) 80%, transparent);
    transform: translateY(-2px);
  }

  .btn--outline {
    border-color: color-mix(in oklab, currentColor 32%, transparent);
    color: inherit;
  }

  .btn--outline:hover {
    border-color: currentColor;
    background: color-mix(in oklab, currentColor 8%, transparent);
  }

  .btn--ghost { color: var(--ink-soft) }
  .btn--ghost:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent) }

  /* mobile nav sheet */
  .nav-sheet {
    inset: calc(var(--head-h) + var(--demo-h)) 0 auto 0;
    margin: 0;
    padding: 1.25rem var(--gut) calc(1.25rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    display: grid;
    gap: 0.85rem;
    animation: sheet-in 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
  }

  .nav-sheet::backdrop {
    background: color-mix(in oklab, var(--lqz-navy-deep) 55%, transparent);
    backdrop-filter: blur(3px);
  }

  /* a closed popover keeps display:none only from the UA sheet, and `display: grid`
     below would win; without this the sheet is painted on every desktop page load */
  .nav-sheet:not(:popover-open) { display: none }

  .nav-sheet nav {
    display: grid;
    gap: 0.15rem;
  }

  .nav-sheet nav a {
    padding: 0.75rem 0.25rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    border-block-end: 1px solid var(--line);
  }

  .nav-sheet nav a:active { color: var(--accent) }

  .nav-sheet .btn { inline-size: 100% }

  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(-10px) }
  }

  /* ░░ hero ░░ */
  .hero {
    position: relative;
    display: grid;
    align-items: end;
    min-block-size: max(560px, 100svh);
    min-block-size: max(560px, 100dvh);
    /* the lower band is reserved so the product shelf never collides with the copy */
    padding-block: clamp(2.5rem, 8vh, 5rem) clamp(130px, 26svh, 230px);
    padding-inline: 0;
    background:
      radial-gradient(90% 70% at 85% 8%, color-mix(in oklab, var(--lqz-red) 42%, transparent) 0%, transparent 55%),
      radial-gradient(70% 60% at 10% 100%, color-mix(in oklab, var(--lqz-gold) 26%, transparent) 0%, transparent 60%),
      linear-gradient(170deg, var(--lqz-navy) 0%, var(--lqz-navy-deep) 68%, oklch(12% 0.04 272) 100%);
    color: oklch(96% 0.01 85);
    overflow: clip;
    isolation: isolate;
  }

  .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: clip }

  .hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    mix-blend-mode: screen;
  }

  .hero__glow--a {
    inset-block-start: -18%;
    inset-inline-end: -12%;
    inline-size: min(60vw, 520px);
    aspect-ratio: 1;
    background: conic-gradient(from var(--sweep), var(--lqz-red), var(--lqz-gold), var(--lqz-red));
    animation: sweep 18s linear infinite;
  }

  .hero__glow--b {
    inset-block-end: -22%;
    inset-inline-start: -14%;
    inline-size: min(52vw, 460px);
    aspect-ratio: 1;
    background: radial-gradient(circle at var(--glow) 40%, var(--lqz-leaf), transparent 62%);
    animation: breathe 9s ease-in-out infinite alternate;
  }

  .hero__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, oklch(100% 0 0 / 5%) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(100% 0 0 / 5%) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(80% 60% at 50% 20%, black, transparent 75%);
  }

  .hero__noise {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.13;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .hero__body {
    display: grid;
    gap: clamp(1rem, 2.4vh, 1.5rem);
    justify-items: start;
    z-index: 2;
  }

  .hero__title {
    font-size: var(--fs-hero);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.92;
    text-transform: uppercase;
  }

  .hero__title .line { display: block }

  .hero__title .line--2 {
    color: transparent;
    background: linear-gradient(96deg, oklch(96% 0.01 85) 0%, oklch(96% 0.01 85) 55%, var(--lqz-gold) 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .hero__title .mark { color: var(--lqz-red); -webkit-text-fill-color: var(--lqz-red) }

  .hero__lede {
    max-inline-size: 46ch;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: oklch(86% 0.02 272);
    text-wrap: pretty;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
  }

  .hero__facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.75rem;
    inline-size: 100%;
    margin-block-start: clamp(0.5rem, 2vh, 1.25rem);
    padding-block-start: 1.1rem;
    border-block-start: 1px solid oklch(100% 0 0 / 14%);
  }

  .hero__facts > div {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
  }

  .hero__facts dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(70% 0.02 272);
  }

  .hero__facts dd {
    font-weight: 700;
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }

  .hero__facts a { text-decoration: underline; text-underline-offset: 3px }

  @media (max-width: 420px) {
    .hero__facts { grid-auto-flow: row; grid-auto-columns: none }
  }

  /* shelf of real product cut-outs */
  .hero__shelf {
    position: absolute;
    inset-block-end: clamp(-1.5rem, -1vh, 0rem);
    inset-inline: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(0.25rem, 1.5vw, 1.25rem);
    padding-inline: clamp(0.5rem, 4vw, 4rem);
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
    opacity: 0.94;
  }

  .hero__shelf > img {
    flex: 0 1 auto;
    inline-size: auto;
    block-size: clamp(74px, 17svh, 190px);
    object-fit: contain;
    filter: drop-shadow(0 18px 22px oklch(8% 0.03 272 / 60%));
    border-radius: 8px;
    transform: translateY(var(--lift));
    transition: --lift 0.5s;
  }

  .hero__shelf > img:nth-child(odd) { rotate: -1.2deg }
  .hero__shelf > img:nth-child(even) { rotate: 1.4deg }

  @media (prefers-reduced-motion: no-preference) {
    .hero__shelf > img { animation: bob 7s ease-in-out infinite alternate; animation-delay: var(--bob, 0s) }
    .hero__shelf > img:nth-child(2) { --bob: -1.1s }
    .hero__shelf > img:nth-child(3) { --bob: -2.3s }
    .hero__shelf > img:nth-child(4) { --bob: -0.6s }
    .hero__shelf > img:nth-child(5) { --bob: -3.1s }
    .hero__shelf > img:nth-child(6) { --bob: -1.7s }
    .hero__shelf > img:nth-child(7) { --bob: -2.8s }
    .hero__shelf > img:nth-child(8) { --bob: -0.9s }
    .hero__shelf > img:nth-child(9) { --bob: -3.6s }
  }

  @media (max-width: 640px) {
    .hero__shelf > img:nth-child(3),
    .hero__shelf > img:nth-child(6),
    .hero__shelf > img:nth-child(9) { display: none }
  }

  .hero__rail {
    position: absolute;
    inset-block-end: -14px;
    inset-inline: -10%;
    block-size: 60px;
    background: linear-gradient(to bottom, oklch(100% 0 0 / 16%), transparent);
    filter: blur(6px);
  }

  .hero__scroll {
    position: absolute;
    inset-block-end: 0.9rem;
    inset-inline-end: var(--gut);
    z-index: 2;
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(75% 0.02 272);
  }

  .hero__scroll svg {
    inline-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    animation: nudge 1.8s ease-in-out infinite;
  }

  @media (min-width: 900px) {
    .hero__scroll { display: flex }
  }

  /* ░░ ticker ░░ */
  .ticker {
    overflow: hidden;
    background: var(--accent);
    color: var(--accent-ink);
    border-block: 2px solid oklch(100% 0 0 / 22%);
    padding-block: 0.6rem;
    --dur: 32s;
  }

  .ticker__track {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    inline-size: max-content;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    animation: marquee var(--dur) linear infinite;
  }

  .ticker__track i { font-style: normal; opacity: 0.55; font-size: 0.7em }

  .ticker:hover .ticker__track { animation-play-state: paused }

  @keyframes marquee { to { transform: translateX(-50%) } }
}

/* ░░ rails + cards ░░ */
@layer components {
  /* aisles rail */
  .aisles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 300px);
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* must equal the rail's own start padding, otherwise snapping scrolls the
       gutter away and the first card lands at the viewport edge */
    scroll-padding-inline-start: max(var(--gut), (100vw - var(--wrap)) / 2);
    padding-inline: max(var(--gut), (100vw - var(--wrap)) / 2);
    padding-block: 0.5rem 1.5rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .aisles > li { scroll-snap-align: start; container-type: inline-size }

  .aisle > a {
    display: grid;
    gap: 0.6rem;
    block-size: 100%;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
  }

  .aisle > a:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  }

  .aisle__art {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--art, var(--tile));
    border-radius: calc(var(--radius-lg) - 8px);
    overflow: clip;
  }

  .aisle__art img {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .aisle > a:hover .aisle__art img { transform: scale(1.07) }

  .aisle h3 { font-size: var(--fs-h3) }

  .aisle p {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.45;
  }

  .aisle__from {
    margin-block-start: auto;
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  @container (min-width: 260px) {
    .aisle > a { gap: 0.75rem; padding: 1rem }
    .aisle__art { aspect-ratio: 5 / 4 }
  }

  /* ░░ deals ░░ */
  .deals { position: relative }

  .chips {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-block: 0.25rem 0.9rem;
    padding-inline-end: var(--gut);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .chips::-webkit-scrollbar { display: none }

  .chips label {
    flex: none;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--line);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    scroll-snap-align: start;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .chips label:active { transform: scale(0.96) }

  .chips label:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)) }

  .deals__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: clamp(1.25rem, 3vw, 2rem);
  }

  .search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 260px;
    padding: 0.6rem 0.95rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
  }

  .search svg {
    inline-size: 18px;
    flex: none;
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .search input {
    border: 0;
    background: none;
    inline-size: 100%;
    field-sizing: content;
    min-inline-size: 8ch;
  }

  .search input::-webkit-search-cancel-button { display: none }

  .deals__count {
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  /* subgrid keeps title / copy / price rows aligned across every card */
  .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  @media (min-width: 430px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  }

  @media (min-width: 760px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  }

  @media (min-width: 1080px) {
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  }

  @media (min-width: 1440px) {
    .grid { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  }

  .deal {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    /* no container-type here: inline-size containment stops the card reporting
       its block size to the outer grid, and the subgrid silently degrades to
       an independent grid — the price rows then drift out of alignment */
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s, border-color 0.28s;
  }

  .deal:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  }

  .deal__art {
    --art-h: 168px;
    position: relative;
    block-size: var(--art-h);
    background: var(--tile);
    border-radius: calc(var(--radius-lg) - 8px);
    overflow: clip;
  }

  /* the media box is pinned by all four insets: a subgrid track has an indefinite
     block size, so height:100% / object-fit would never get a box to fit into */
  .deal__art svg,
  .deal__art img {
    position: absolute;
    inset: 0.5rem;
    inline-size: auto;
    block-size: auto;
    max-inline-size: calc(100% - 1rem);
    max-block-size: calc(100% - 1rem);
    object-fit: contain;
    margin: auto;
  }

  .deal__art svg {
    filter: drop-shadow(0 10px 14px oklch(30% 0.03 272 / 25%));
  }

  .deal__art img { border-radius: 6px }

  /* flyer cut-outs sit on a tile painted with the colour sampled from their own edge */
  .deal__art--photo {
    background: var(--art, var(--tile));
  }

  .deal__art--photo img {
    inset: 0.35rem;
    inline-size: calc(100% - 0.7rem);
    block-size: calc(100% - 0.7rem);
    max-inline-size: none;
    max-block-size: none;
    border-radius: 10px;
  }

  /* illustrated aisle scenes bleed edge to edge */
  .deal__art--scene { background: var(--tile) }

  .deal__art--scene svg {
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    filter: none;
  }

  .deal__body {
    display: grid;
    align-content: start;
    gap: 0.2rem;
  }

  .deal__body h3 { font-size: var(--fs-h3); letter-spacing: -0.02em }

  .deal__body p {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.4;
  }

  .deal__price {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-price);
    letter-spacing: -0.045em;
    color: var(--accent);
    line-height: 1;
  }

  .deal__price sup {
    font-size: 0.45em;
    letter-spacing: -0.02em;
    translate: 0 -0.15em;
  }

  .deal__price s {
    font-size: 0.42em;
    font-weight: 700;
    color: var(--ink-faint);
    margin-inline-end: 0.35rem;
  }

  .badge {
    justify-self: start;
    margin-block-start: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--lqz-leaf) 24%, var(--surface));
    color: color-mix(in oklab, var(--lqz-leaf) 55%, var(--ink));
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .badge--case {
    background: color-mix(in oklab, var(--lqz-gold) 30%, var(--surface));
    color: color-mix(in oklab, var(--lqz-gold) 60%, var(--ink));
  }

  .deal--hot {
    border-color: color-mix(in oklab, var(--lqz-leaf) 60%, var(--line));
    background: color-mix(in oklab, var(--lqz-leaf) 7%, var(--surface));
  }

  .deal--case {
    border-color: color-mix(in oklab, var(--lqz-gold) 55%, var(--line));
    background: color-mix(in oklab, var(--lqz-gold) 8%, var(--surface));
  }

  .deals__more {
    display: grid;
    place-items: center;
    margin-block-start: clamp(1.25rem, 3vw, 2rem);
  }

  .empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ink-faint);
    font-weight: 600;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
  }

  /* single-column layout: the tile spans the full measure, so it can be taller */
  @media (max-width: 429px) {
    .deal__art { --art-h: 186px }
  }

  /* ░░ wholesale ░░ */
  .wholesale {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
  }

  @media (min-width: 900px) {
    .wholesale { grid-template-columns: 1.05fr 0.95fr }
  }

  .wholesale__copy { display: grid; gap: 1rem; justify-items: start }

  .wholesale__copy h2 { font-size: var(--fs-h2) }

  .wholesale__copy > p { color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.55 }

  .ticks { display: grid; gap: 0.5rem }

  .ticks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
  }

  .ticks li::before {
    content: "✓";
    font-weight: 900;
    color: var(--lqz-leaf);
  }

  .wholesale__panel {
    padding: clamp(1rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--lqz-red) 22%, transparent), transparent 60%),
      var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
  }

  .crate {
    display: grid;
    gap: 0.9rem;
    position: relative;
    padding-block: 1rem;
  }

  .crate > img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .crate__tag {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0;
    z-index: 2;
    padding: 0.35rem 0.7rem;
    background: var(--lqz-navy);
    color: white;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .crate__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }

  .crate__row li {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    background: var(--art, var(--tile));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .crate__row img {
    block-size: 118px;
    inline-size: 100%;
    object-fit: contain;
  }

  .crate__price {
    justify-self: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .crate__price strong {
    font-family: var(--font-display);
    font-size: var(--fs-price);
    letter-spacing: -0.04em;
    color: var(--accent);
    text-transform: none;
    margin-inline-start: 0.35rem;
  }

  /* ░░ flyers rail ░░ */
  .flyers {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 260px);
    gap: 0.85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: max(var(--gut), (100vw - var(--wrap)) / 2);
    padding-block: 0.5rem 1.5rem;
    scrollbar-width: thin;
  }

  .flyers > li { scroll-snap-align: center }

  .flyer__btn {
    display: grid;
    gap: 0.6rem;
    inline-size: 100%;
    text-align: start;
    padding: 0.6rem;
    background: oklch(100% 0 0 / 6%);
    border: 1px solid oklch(100% 0 0 / 14%);
    border-radius: var(--radius-lg);
    transition: transform 0.25s, background 0.25s, border-color 0.25s;
  }

  .flyer__btn:hover {
    transform: translateY(-6px) rotate(-0.6deg);
    background: oklch(100% 0 0 / 10%);
    border-color: var(--lqz-gold);
  }

  .flyer__btn img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--radius-lg) - 8px);
    background: white;
  }

  .flyer__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: oklch(92% 0.015 85);
  }

  .flyer__meta svg {
    inline-size: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
  }

  /* ░░ modals ░░ */
  .modal:not([open]) { display: none }

  .modal {
    border: 0;
    padding: 0;
    background: none;
    max-inline-size: none;
    max-block-size: none;
    overflow: visible;
    color: var(--ink);
  }

  .modal::backdrop {
    background: color-mix(in oklab, var(--lqz-navy-deep) 72%, transparent);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
  }

  .modal--gate {
    margin: auto;
    inline-size: min(100% - 2rem, 480px);
  }

  .gate {
    display: grid;
    gap: 0.85rem;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    text-align: center;
    justify-items: center;
  }

  .gate__mark {
    display: grid;
    place-items: center;
    inline-size: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in oklab, var(--lqz-leaf) 20%, var(--surface));
    color: var(--lqz-leaf);
  }

  .gate h2 { font-size: clamp(1.5rem, 6vw, 2rem) }

  .gate p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5 }

  .gate menu {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin-block-start: 0.35rem;
    inline-size: 100%;
  }

  .gate menu .btn { flex: 1 1 auto }

  .gate__note { font-size: var(--fs-xs); opacity: 0.8 }

  .gate__note a { text-decoration: underline; text-underline-offset: 2px }

  .modal--lightbox {
    margin: auto;
    inline-size: min(94vw, 900px);
    block-size: min(88svh, 1100px);
    display: grid;
    place-items: center;
  }

  .modal--lightbox figure {
    display: grid;
    gap: 0.7rem;
    block-size: 100%;
    justify-items: center;
    min-block-size: 0;
  }

  .modal--lightbox img {
    max-block-size: calc(min(88svh, 1100px) - 4rem);
    max-inline-size: 100%;
    inline-size: auto;
    object-fit: contain;
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-lift);
  }

  .modal--lightbox figcaption {
    font-weight: 700;
    color: oklch(92% 0.015 85);
    font-size: var(--fs-sm);
    text-align: center;
  }

  .modal__close {
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    inline-size: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    box-shadow: var(--shadow);
    z-index: 3;
  }

  .modal__close svg {
    inline-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  /* ░░ community ░░ */
  .community {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  @media (min-width: 860px) {
    .community { grid-template-columns: 0.85fr 1.15fr }
  }

  .community__media {
    display: grid;
    gap: 0.9rem;
    position: relative;
    container-type: inline-size;
  }

  .community__media > img {
    inline-size: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    border: 6px solid white;
    background: white;
  }

  .stamp {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: -0.5rem;
    padding: 0.5rem 0.9rem;
    background: var(--accent);
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow);
    rotate: -4deg;
  }

  .stamp em { font-style: italic; text-transform: uppercase }

  .strip { display: grid; gap: 0.4rem }

  .strip img {
    inline-size: 100%;
    border-radius: 12px;
    filter: saturate(0.92) contrast(1.05);
  }

  .strip figcaption {
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .community__copy { display: grid; gap: 1rem; align-content: start }

  .community__copy h2 { font-size: var(--fs-h2) }

  .community__copy p { color: var(--ink-soft); line-height: 1.65 }

  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-block-start: 0.75rem;
  }

  .stats > div {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .stats dt {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--accent);
    line-height: 1;
  }

  .stats dd {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    margin-block-start: 0.35rem;
    line-height: 1.35;
  }

  /* ░░ visit ░░ */
  .visit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .card {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: clamp(1.15rem, 3vw, 1.75rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    container-type: inline-size;
  }

  .card h3 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem) }

  .card address { color: var(--ink-soft); line-height: 1.6 }

  .card > p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55 }

  .contact { display: grid; gap: 0.4rem }

  .contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 0.4rem 0.6rem;
    border-radius: 12px;
    background: var(--surface-2);
    transition: background 0.2s, color 0.2s, transform 0.15s;
  }

  .contact a:hover { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent) }
  .contact a:active { transform: scale(0.98) }

  .contact .ico { color: var(--accent) }

  .affil { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.35rem }

  .affil__pill {
    padding: 0.3rem 0.7rem;
    border: 1px dashed color-mix(in oklab, var(--accent) 45%, var(--line));
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--accent);
  }

  .card--hours table { font-size: var(--fs-sm) }

  .card--hours tr { border-block-end: 1px solid var(--line) }
  .card--hours tr:last-child { border-block-end: 0 }

  .card--hours th {
    text-align: start;
    font-weight: 700;
    padding-block: 0.55rem;
    color: var(--ink);
  }

  .card--hours td {
    text-align: end;
    padding-block: 0.55rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* today's row, driven by JS setting [data-today] on the matching <tr> */
  .card--hours tr[data-today] {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
    border-radius: 10px;
  }

  .card--hours tr[data-today] th { color: var(--accent) }

  .hours__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line);
  }

  /* the map card spans full width because it holds an iframe */
  .card:has(> iframe) { grid-column: 1 / -1 }

  .card--map iframe {
    inline-size: 100%;
    block-size: clamp(240px, 40vw, 380px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    filter: saturate(0.85) contrast(1.02);
  }

  @container (min-width: 460px) {
    .card--map iframe { block-size: 300px }
  }

  /* ░░ legal + footer ░░ */
  .legal {
    display: flex;
    gap: 1rem;
    align-items: start;
  }

  .legal__icon {
    inline-size: 40px;
    flex: none;
    color: var(--lqz-leaf);
  }

  .legal h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); margin-block-end: 0.35rem }

  .legal p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6 }

  .legal a { text-decoration: underline; text-underline-offset: 2px }

  .site-foot {
    background: var(--lqz-navy-deep);
    color: oklch(88% 0.015 272);
    padding-block: clamp(2.5rem, 6vw, 4rem) 0;
    padding-block-end: env(safe-area-inset-bottom);
  }

  .site-foot__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    padding-block-end: clamp(2rem, 5vw, 3rem);
  }

  .site-foot h3 {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(62% 0.02 272);
    margin-block-end: 0.7rem;
  }

  .site-foot nav { display: grid; gap: 0.4rem }

  .site-foot nav a,
  .site-foot p { font-size: var(--fs-sm) }

  .site-foot nav a { color: oklch(84% 0.015 272); transition: color 0.2s }
  .site-foot nav a:hover { color: var(--lqz-gold) }

  .brand--foot .brand__logo {
    background: white;
    border-color: transparent;
  }

  .site-foot__tag {
    margin-block-start: 0.9rem;
    color: oklch(70% 0.02 272);
    font-size: var(--fs-sm);
    max-inline-size: 34ch;
  }

  .site-foot__base {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    padding-block: 1.1rem;
    border-block-start: 1px solid oklch(100% 0 0 / 12%);
    font-size: var(--fs-xs);
    color: oklch(62% 0.02 272);
  }

  /* ░░ back to top ░░ */
  .to-top {
    position: fixed;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom));
    inset-inline-end: 1rem;
    z-index: 90;
    display: grid;
    place-items: center;
    inline-size: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity 0.3s, translate 0.3s;
  }

  .to-top svg {
    inline-size: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body:has(.site-foot) .to-top[data-show="true"] {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
}

/* ░░ CSS-only aisle filtering (radios are siblings of .grid) ░░ */
@layer filters {
  /* "All" hides nothing; every other chip hides the cards outside its aisle */
  #cat-brandy:checked ~ .grid > .deal:not([data-cat~="brandy"])   { display: none }
  #cat-vodka:checked  ~ .grid > .deal:not([data-cat~="vodka"])    { display: none }
  #cat-cider:checked  ~ .grid > .deal:not([data-cat~="cider"])    { display: none }
  #cat-liqueur:checked ~ .grid > .deal:not([data-cat~="liqueur"]) { display: none }
  #cat-beer:checked   ~ .grid > .deal:not([data-cat~="beer"])     { display: none }
  #cat-wine:checked   ~ .grid > .deal:not([data-cat~="wine"])     { display: none }
  #cat-wholesale:checked ~ .grid > .deal:not([data-cat~="wholesale"]) { display: none }

  /* active chip */
  #cat-all:checked    ~ .chips > label[for="cat-all"],
  #cat-brandy:checked ~ .chips > label[for="cat-brandy"],
  #cat-vodka:checked  ~ .chips > label[for="cat-vodka"],
  #cat-cider:checked  ~ .chips > label[for="cat-cider"],
  #cat-liqueur:checked ~ .chips > label[for="cat-liqueur"],
  #cat-beer:checked   ~ .chips > label[for="cat-beer"],
  #cat-wine:checked   ~ .chips > label[for="cat-wine"],
  #cat-wholesale:checked ~ .chips > label[for="cat-wholesale"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }

  /* keyboard ring on the hidden radio shows on its chip */

  #cat-all:focus-visible    ~ .chips > label[for="cat-all"],
  #cat-brandy:focus-visible ~ .chips > label[for="cat-brandy"],
  #cat-vodka:focus-visible  ~ .chips > label[for="cat-vodka"],
  #cat-cider:focus-visible  ~ .chips > label[for="cat-cider"],
  #cat-liqueur:focus-visible ~ .chips > label[for="cat-liqueur"],
  #cat-beer:focus-visible   ~ .chips > label[for="cat-beer"],
  #cat-wine:focus-visible   ~ .chips > label[for="cat-wine"],
  #cat-wholesale:focus-visible ~ .chips > label[for="cat-wholesale"] {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
}

/* ░░ motion: scroll-driven where supported, JS reveal otherwise ░░ */
@layer motion {
  @keyframes sweep { to { --sweep: 360deg } }
  @keyframes breathe { from { --glow: 30% } to { --glow: 75% } }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lqz-leaf) 65%, transparent) }
    70%, 100% { box-shadow: 0 0 0 12px transparent }
  }
  @keyframes nudge { 50% { transform: translateY(5px) } }
  @keyframes bob { to { --lift: -10px } }
  @keyframes rise {
    from { opacity: 0; transform: translateY(26px) scale(0.985) }
    to { opacity: 1; transform: none }
  }
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(18px) }
    to { opacity: 1; transform: none }
  }

  /* hero entrance */
  @media (prefers-reduced-motion: no-preference) {
    .hero__body > * {
      animation: hero-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .hero__body > *:nth-child(1) { animation-delay: 0.05s }
    .hero__body > *:nth-child(2) { animation-delay: 0.14s }
    .hero__body > *:nth-child(3) { animation-delay: 0.24s }
    .hero__body > *:nth-child(4) { animation-delay: 0.32s }
    .hero__body > *:nth-child(5) { animation-delay: 0.4s }
  }

  /* scroll-driven reveals, no JS needed */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .aisle,
      .flyer,
      .card,
      .deal:not([hidden]),
      .stats > div {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 26%;
        animation-fill-mode: both;
      }

      /* header scroll progress bar */
      .site-head::after {
        content: "";
        position: absolute;
        inset-block-end: -1px;
        inset-inline: 0;
        block-size: 2px;
        background: linear-gradient(90deg, var(--accent), var(--lqz-gold));
        transform: scaleX(0);
        transform-origin: 0 50%;
        animation: progress linear both;
        animation-timeline: scroll(root block);
      }

      @keyframes progress { to { transform: scaleX(1) } }
    }
  }

  /* fallback for browsers without scroll-driven animations */
  @supports not (animation-timeline: view()) {
    html.js-io .aisle,
    html.js-io .flyer,
    html.js-io .card,
    html.js-io .deal,
    html.js-io .stats > div {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
      transition-delay: calc(var(--i, 0) * 45ms);
    }

    html.js-io .aisle.is-in,
    html.js-io .flyer.is-in,
    html.js-io .card.is-in,
    html.js-io .deal.is-in,
    html.js-io .stats > div.is-in {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .ticker__track { animation: none; transform: none }
    .hero__shelf { opacity: 0.8 }
  }

  /* view transitions */
  @supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0.35s }

    :root[data-animating="theme"] {
      view-transition-name: none;
    }

    ::view-transition-old(theme-bg),
    ::view-transition-new(theme-bg) {
      animation-duration: 0.45s;
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }
  }
}

/* ░░ print ░░ */
@media print {
  .site-head,
  .nav-sheet,
  .hero__bg,
  .hero__shelf,
  .ticker,
  .to-top,
  .chips,
  .search,
  .flyers { display: none !important }

  body { padding-block-start: 0; background: white; color: black }

  /* fixed chrome repeats on every printed page; keep the notice to one */
  .demo-banner { position: static; color: black; background: white; border: 2px solid black }

  .section { padding-block: 1rem; break-inside: avoid }

  .deal { break-inside: avoid; box-shadow: none; border: 1px solid #ccc }
}