:root {
    --kraft: #D8C29C;      /* beer-crate cardboard */
    --kraft-deep: #C9AE82;
    --enamel: #F6EFE0;     /* enamel sign white */
    --ink: #2A1A10;        /* dark kiaat brown */
    --bottle: #1F4A36;     /* bottle-glass green */
    --amber: #E39A26;      /* the beer */
    --steel: #8E8C86;      /* the opener */

    --display: "Alfa Slab One", Georgia, serif;
    --body: "Barlow", system-ui, sans-serif;
    --label: "Barlow Condensed", "Arial Narrow", sans-serif;

    --wrap: 1180px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background-color: var(--kraft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--bottle); outline-offset: 3px; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

  .label {
    font-family: var(--label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 15px;
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--label); font-weight: 700; font-size: 19px;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 16px 30px; border-radius: 6px; border: 3px solid var(--ink);
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary { background: var(--bottle); color: var(--enamel); box-shadow: 5px 5px 0 var(--ink); }
  .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
  .btn-primary:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--enamel); }

  /* ---------- top bar + header ---------- */
  .topbar {
    background: var(--ink); color: var(--enamel);
    text-align: center; padding: 9px 16px; font-size: 14px;
  }
  .topbar span { color: var(--amber); }

  header.site {
    border-bottom: 3px solid var(--ink);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
  .wordmark {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--display); font-size: 34px; text-decoration: none; line-height: 1;
  }
  .wordmark svg { width: 42px; height: 42px; }
  .nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
  .nav ul a { text-decoration: none; font-family: var(--label); font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .1em; }
  .nav ul a:hover { color: var(--bottle); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .cart-btn {
    position: relative; background: none; border: 3px solid var(--ink); border-radius: 6px;
    padding: 8px 14px; cursor: pointer; font-family: var(--label); font-weight: 700;
    font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  }
  .cart-count {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 6px;
    background: var(--amber); border-radius: 50%; font-size: 15px;
  }

  /* ---------- hero ---------- */
  .hero { padding: 64px 0 88px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
  .hero h1 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(56px, 8.4vw, 116px); line-height: .92; letter-spacing: -.01em;
    margin: 18px 0 26px;
  }
  .hero h1 em { font-style: normal; color: var(--bottle); display: block; }
  .hero .lede { font-size: 21px; max-width: 30ch; margin: 0 0 34px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  .trust { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 34px; font-size: 16px; font-weight: 500; }
  .trust li { list-style: none; display: flex; gap: 8px; align-items: center; }
  .trust ul { padding: 0; margin: 0; display: contents; }
  .tick { width: 20px; height: 20px; flex: none; }

  .hero-photo { position: relative; }
  .hero-photo .frame {
    border: 3px solid var(--ink); border-radius: 10px; overflow: hidden;
    box-shadow: 12px 12px 0 var(--ink); background: var(--ink);
    aspect-ratio: 4 / 5;
  }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }

  /* signature: the crown-cap price seal */
  .cap-seal {
    position: absolute; left: -58px; bottom: 54px;
    width: 176px; height: 176px;
    display: grid; place-items: center; text-align: center;
    animation: capdrop .9s cubic-bezier(.3,1.5,.5,1) .35s both;
  }
  .cap-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(5px 6px 0 var(--ink)); }
  .cap-seal .inner { position: relative; line-height: 1; color: var(--ink); transform: rotate(-9deg); }
  .cap-seal .from { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  .cap-seal .price { font-family: var(--display); font-size: 44px; display: block; margin: 4px 0 2px; }
  .cap-seal .note { font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
  @keyframes capdrop {
    from { opacity: 0; transform: translateY(-120px) rotate(-200deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
  }

  /* ---------- section shell ---------- */
  section.block { padding: 96px 0; border-top: 3px solid var(--ink); }
  .block-head { max-width: 720px; margin-bottom: 52px; }
  .block-head h2 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(38px, 5vw, 60px); line-height: 1; margin: 14px 0 18px;
  }
  .block-head p { font-size: 20px; margin: 0; }

  /* ---------- how it works ---------- */
  .how { background: var(--enamel); }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
  .steps li {
    counter-increment: step; position: relative;
    border: 3px solid var(--ink); border-radius: 10px; padding: 34px 30px 30px; background: #fff;
  }
  .steps li::before {
    content: counter(step);
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px;
    font-family: var(--display); font-size: 26px; color: var(--enamel);
    background: var(--bottle); border-radius: 50%;
  }
  .steps h3 { font-family: var(--label); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; line-height: 1.15; }
  .steps p { margin: 0; }

  /* ---------- the build (specs) ---------- */
  .build-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
  .build-photo { border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 12px 12px 0 var(--bottle); }
  .build-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
  .specs { border-top: 3px solid var(--ink); margin: 0; }
  .specs div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 2px dashed rgba(42,26,16,.45); }
  .specs dt { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 17px; }
  .specs dd { margin: 0; }
  .placeholder { background: rgba(227,154,38,.35); padding: 0 5px; border-radius: 3px; }

  /* ---------- gifting ---------- */
  .gift { background: var(--bottle); color: var(--enamel); }
  .gift .label { color: var(--amber); }
  .gift-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
  .occasions { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 34px 0 40px; }
  .occasions li {
    border: 2px solid var(--enamel); border-radius: 999px; padding: 8px 20px;
    font-family: var(--label); font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
  }
  .gift .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
  .gift-card {
    background: var(--enamel); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
    padding: 36px; transform: rotate(2deg); box-shadow: 10px 10px 0 var(--ink);
  }
  .gift-card .to { font-family: var(--label); font-weight: 600; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px dashed var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
  .gift-card p { font-family: var(--display); font-size: 30px; line-height: 1.15; margin: 0 0 18px; }
  .gift-card .from { font-size: 17px; }

  /* ---------- reviews placeholder ---------- */
  .reviews-empty {
    border: 3px dashed var(--ink); border-radius: 10px; padding: 48px; text-align: center; background: rgba(246,239,224,.5);
  }
  .reviews-empty p { max-width: 52ch; margin: 10px auto 0; }

  /* ---------- faq ---------- */
  .faq { background: var(--enamel); }
  .faq-list { max-width: 820px; border-top: 3px solid var(--ink); }
  .faq details { border-bottom: 3px solid var(--ink); }
  .faq summary {
    list-style: none; cursor: pointer; padding: 24px 0;
    display: flex; justify-content: space-between; gap: 20px; align-items: center;
    font-family: var(--label); font-weight: 700; font-size: 23px; letter-spacing: .02em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--display); font-size: 30px; line-height: 1; transition: transform .2s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { margin: 0 0 26px; max-width: 65ch; }

  /* ---------- final cta ---------- */
  .final { text-align: center; padding: 110px 0; border-top: 3px solid var(--ink); }
  .final h2 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 7vw, 92px); line-height: .95; margin: 0 0 22px; }
  .final p { font-size: 20px; margin: 0 auto 38px; max-width: 40ch; }

  footer { background: var(--ink); color: var(--enamel); padding: 48px 0; font-size: 16px; }
  .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
  .foot .wordmark { font-size: 28px; color: var(--enamel); }
  .foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; }
  .foot a { text-decoration: none; opacity: .85; }
  .foot a:hover { opacity: 1; text-decoration: underline; }
  .legal { width: 100%; opacity: .7; font-size: 14px; margin: 8px 0 0; }

  /* ---------- toast + sticky mobile bar ---------- */
  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, calc(100% + 60px));
    background: var(--ink); color: var(--enamel); padding: 14px 22px; border-radius: 8px;
    font-weight: 600; transition: transform .3s ease; z-index: 20; border: 2px solid var(--amber);
  }
  .toast.show { transform: translate(-50%, 0); }
  .sticky-buy { display: none; }


  /* ---------- hover motion ---------- */
  :root {
    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  }
  .glow { position: relative; display: inline-block; isolation: isolate; }
  .hero h1 em.glow { display: inline-block; }
  .glow::before {
    content: ""; position: absolute; inset: -12% -10%; z-index: -1;
    border-radius: 40%;
    filter: blur(22px);
    opacity: 0; transform: scale(.94);
    /* fade out: slow and gentle, like embers cooling */
    transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), transform 1100ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
    pointer-events: none;
  }
  .glow-amber::before { background: radial-gradient(closest-side, rgba(227,154,38,.95), rgba(227,154,38,.35) 70%, transparent); }
  .glow-green::before { background: radial-gradient(closest-side, rgba(94,170,122,.75), rgba(31,74,54,.25) 70%, transparent); }

  .steps li {
    box-shadow: 0 0 0 var(--ink);
    transition: transform 250ms var(--ease-smooth-out), box-shadow 250ms var(--ease-smooth-out);
  }
  .steps li::before {
    transition: transform 400ms var(--ease-bounce), background-color 250ms ease, color 250ms ease;
  }

  /* occasion pills: amber fills up from the bottom like a glass being poured, with a foam line on top */
  .occasions li {
    position: relative; overflow: hidden; isolation: isolate; cursor: default;
    transition: transform 250ms var(--ease-smooth-out), color 250ms ease, border-color 250ms ease;
  }
  .occasions li::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--amber);
    border-top: 3px solid var(--enamel);
    transform: translateY(105%);
    transition: transform 250ms var(--ease-smooth-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .occasions li:hover { transform: translateY(-3px); color: var(--ink); border-color: var(--amber); }
    .occasions li:hover::before {
      transform: translateY(0);
      transition: transform 450ms var(--ease-smooth-out);
    }

    .glow-head:hover .glow::before {
      opacity: 1; transform: scale(1);
      transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 900ms var(--ease-smooth-out);
    }
    .glow-head:hover .glow-green::before { transition-delay: 120ms; }

    .steps li:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }
    /* the number badge pops up like a bottle cap coming off */
    .steps li:hover::before {
      transform: translateY(-6px) rotate(-18deg) scale(1.08);
      background-color: var(--amber); color: var(--ink);
    }
  }


  /* ---------- more for the bar (secondary products) ---------- */
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .product {
    display: flex; flex-direction: column;
    background: var(--enamel); border: 3px solid var(--ink); border-radius: 10px; overflow: hidden;
    box-shadow: 0 0 0 var(--ink);
    transition: transform 250ms var(--ease-smooth-out), box-shadow 250ms var(--ease-smooth-out);
  }
  .product-img { aspect-ratio: 1; background: #fff; border-bottom: 3px solid var(--ink); position: relative; }
  .product-img img { width: 100%; height: 100%; object-fit: cover; }
  .product-img.contain img { object-fit: contain; padding: 18px; }
  .product-img.missing img { display: none; }
  .product-img.missing::after {
    content: "Product photo"; position: absolute; inset: 16px; display: grid; place-items: center;
    border: 2px dashed rgba(42,26,16,.4); border-radius: 6px;
    font-family: var(--label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; opacity: .6;
  }
  .product-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .product h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.05; margin: 0; }
  .product p { margin: 0; font-size: 17px; }
  .product .facts { font-family: var(--label); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
  .product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
  .product-price { font-family: var(--display); font-size: 30px; line-height: 1; }
  .product .btn { padding: 12px 18px; font-size: 16px; box-shadow: 3px 3px 0 var(--ink); }

  .packs { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .packs legend { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
  .packs label { position: relative; }
  .packs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .packs span {
    display: block; min-width: 48px; text-align: center; padding: 6px 12px;
    border: 2px solid var(--ink); border-radius: 999px;
    font-family: var(--label); font-weight: 700; font-size: 16px;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .packs input:checked + span { background: var(--ink); color: var(--enamel); }
  .packs input:focus-visible + span { outline: 3px solid var(--bottle); outline-offset: 2px; }

  @media (hover: hover) and (pointer: fine) {
    .product:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }
  }
  @media (max-width: 900px) {
    .more-grid { grid-template-columns: 1fr; max-width: 460px; }
  }

  .was { font-family: var(--body); font-size: 15px; font-weight: 500; opacity: .6; margin-left: 4px; }
  .cap-seal .note s { text-decoration-thickness: 2px; }


  /* ---------- moving glow on price caps (home seal + shop "Save" seal) ---------- */
  .glow-cap { isolation: isolate; }
  /* a band of light that travels around the cap */
  .glow-cap::before {
    content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,214,120,.95) 50deg, rgba(227,154,38,.5) 100deg, transparent 150deg, transparent 360deg);
    filter: blur(12px);
    animation: orbit 3.6s linear infinite;
  }
  /* a soft halo that breathes underneath it */
  .glow-cap::after {
    content: ""; position: absolute; inset: -14px; z-index: -2; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(227,154,38,.75), rgba(227,154,38,0));
    filter: blur(8px);
    animation: breathe 2.8s ease-in-out infinite alternate;
  }
  /* a light sweep across the price itself */
  .shine-text {
    background: linear-gradient(100deg, var(--ink) 0 38%, #FFF4D6 50%, var(--ink) 62% 100%);
    background-size: 260% 100%; background-position: 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 3.6s ease-in-out infinite;
  }
  @keyframes orbit { to { transform: rotate(360deg); } }
  @keyframes breathe { from { opacity: .35; transform: scale(.94); } to { opacity: .9; transform: scale(1.06); } }
  @keyframes shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }

  /* ---------- nav: shop link ---------- */
  .nav ul a.shop-link { background: var(--ink); color: var(--enamel); padding: 8px 16px; border-radius: 6px; }
  .nav ul a.shop-link:hover { color: var(--amber); text-decoration: none; }
  .nav ul a[aria-current="page"] { background: var(--amber); color: var(--ink); }
  .more-cta { margin-top: 44px; }

  /* ---------- shop page ---------- */
  .shop-head { padding: 64px 0 44px; }
  .shop-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: .95; margin: 14px 0 16px; }
  .shop-head p { font-size: 20px; margin: 0; max-width: 46ch; }

  .featured {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--enamel); border: 3px solid var(--ink); border-radius: 12px;
    box-shadow: 12px 12px 0 var(--ink);
  }
  .featured-img { position: relative; min-height: 480px; border-right: 3px solid var(--ink); border-radius: 9px 0 0 9px; overflow: hidden; background: var(--ink); }
  .featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
  .ribbon {
    position: absolute; top: 18px; left: 18px;
    background: var(--amber); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
    padding: 6px 16px; font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
    animation: ribbon-pulse 2.4s ease-out infinite;
  }
  @keyframes ribbon-pulse { 0% { box-shadow: 0 0 0 0 rgba(227,154,38,.8); } 70%, 100% { box-shadow: 0 0 0 14px rgba(227,154,38,0); } }

  .featured-body { padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 18px; }
  .featured-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; margin: 0; }
  .featured-body p { margin: 0; font-size: 19px; }

  .deal { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 6px 0 4px; }
  .deal-price { position: relative; display: flex; align-items: baseline; gap: 18px; isolation: isolate; }
  .deal-price::before {
    content: ""; position: absolute; inset: -35% -18%; z-index: -1;
    background: radial-gradient(closest-side, rgba(227,154,38,.65), rgba(227,154,38,0));
    filter: blur(16px);
    animation: breathe 2.8s ease-in-out infinite alternate;
  }
  .deal-price .now {
    font-family: var(--display); font-size: clamp(60px, 6.4vw, 88px); line-height: 1; display: inline-block;
    animation: pop-in 600ms var(--ease-bounce) 900ms both, shine 3.6s ease-in-out 1.5s infinite;
  }
  .deal-price .old { position: relative; font-family: var(--label); font-weight: 700; font-size: 32px; opacity: .6; }
  .deal-price .old::after {
    content: ""; position: absolute; left: -5px; right: -5px; top: 52%; height: 3px; border-radius: 2px;
    background: var(--ink); transform: scaleX(0); transform-origin: left center;
    animation: strike 500ms var(--ease-smooth-out) 400ms forwards;
  }
  @keyframes strike { to { transform: scaleX(1); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }

  .save-seal {
    position: relative; width: 124px; height: 124px; flex: none;
    display: grid; place-items: center; text-align: center;
    animation: capdrop .9s cubic-bezier(.3,1.5,.5,1) 1.1s both;
  }
  .save-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(4px 5px 0 var(--ink)); }
  .save-seal .inner { position: relative; line-height: 1; transform: rotate(-9deg); }
  .save-seal .small { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
  .save-seal .big { font-family: var(--display); font-size: 34px; display: block; margin-top: 2px; }

  .featured-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
  .featured .facts { font-family: var(--label); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
  .shop-more { padding: 96px 0; }

  @media (max-width: 900px) {
    .featured { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--ink); }
    .featured-img { min-height: 0; aspect-ratio: 4 / 5; border-right: 0; border-bottom: 3px solid var(--ink); border-radius: 9px 9px 0 0; }
    .featured-body { padding: 28px 22px 30px; }
    .shop-head { padding: 40px 0 32px; }
    .shop-more { padding: 72px 0; }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 900px) {
    .nav ul { gap: 0; }
    .nav ul li:not(:first-child) { display: none; }
    .nav ul a.shop-link { padding: 8px 14px; }
    .hero { padding: 40px 0 64px; }
    .hero-grid, .build-grid, .gift-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-photo { max-width: 520px; margin: 0 auto; width: 100%; }
    .cap-seal { left: -8px; bottom: -40px; width: 140px; height: 140px; }
    .cap-seal .price { font-size: 34px; }
    .steps { grid-template-columns: 1fr; }
    section.block { padding: 72px 0; }
    .specs div { grid-template-columns: 1fr; gap: 4px; }
    .gift-card { transform: none; }
    .sticky-buy {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
      background: var(--enamel); border-top: 3px solid var(--ink); padding: 12px 16px;
      align-items: center; justify-content: space-between; gap: 12px;
    }
    .sticky-buy strong { font-family: var(--display); font-size: 24px; font-weight: 400; white-space: nowrap; }
    .sticky-buy .btn { padding: 12px 20px; font-size: 17px; box-shadow: 3px 3px 0 var(--ink); }
    footer { padding-bottom: 110px; }
  }
  @media (max-width: 520px) {
    .wrap { padding: 0 16px; }
    .wordmark { font-size: 28px; }
    .hero .lede { font-size: 19px; }
    .btn { width: 100%; }
    .reviews-empty { padding: 32px 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* Header: six links don't fit below ~1100px, so keep only the Shop button there */
  .nav ul a { white-space: nowrap; }
  @media (max-width: 1100px) {
    .nav ul { display: flex; gap: 0; }
    .nav ul li:not(:first-child) { display: none; }
    .nav ul a.shop-link { padding: 8px 14px; }
  }

  /* Quantity: one clear "How many?" control on every product */
  .qty-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .qty-label, .packs-clear legend { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
  .qty-ctl { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; background: var(--enamel); overflow: hidden; }
  .qty-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease; touch-action: manipulation; }
  .qty-btn:active { transform: scale(0.92); }
  .qty-btn:disabled { opacity: .3; cursor: default; }
  .qty-btn:focus-visible { outline: 3px solid var(--bottle); outline-offset: -3px; }
  @media (hover: hover) and (pointer: fine) { .qty-btn:not(:disabled):hover { background: rgba(42,26,16,.08); } }
  .qty-num { min-width: 34px; text-align: center; font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
  .featured-qty { justify-content: flex-start; gap: 16px; margin: 4px 0 14px; }
  .packs-clear { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .packs-clear legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: 8px; }
  .packs-clear span { min-width: 0; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; text-align: center; }
  .packs-clear span b { font-family: var(--display); font-weight: 400; font-size: 20px; margin-right: 4px; }
  .pack-note { grid-column: 1 / -1; margin: 2px 0 0 !important; font-family: var(--label); font-weight: 700; font-size: 15px !important; letter-spacing: .04em; color: var(--bottle); }

  /* ---------- Header: every page link, on every screen ---------- */
  .nav ul { gap: 22px; }
  .nav ul li, .nav ul li:not(:first-child) { display: list-item; }
  .nav ul a { font-size: 16px; }
  .nav ul a[aria-current="page"]:not(.shop-link) { background: var(--amber); color: var(--ink); padding: 8px 12px; border-radius: 6px; text-decoration: none; }
  @media (max-width: 1180px) {
    .nav { height: auto; flex-wrap: wrap; row-gap: 10px; padding: 14px 0 12px; }
    .nav > nav { order: 3; flex: 1 0 100%; min-width: 0; margin: 0 -20px; position: relative; }
    .nav > nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(216,194,156,0), var(--kraft)); }
    .nav ul { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nav ul::-webkit-scrollbar { display: none; }
    .nav ul li { flex: none; scroll-snap-align: start; }
    .nav ul a, .nav ul a.shop-link, .nav ul a[aria-current="page"]:not(.shop-link) {
      display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
      border: 2px solid var(--ink); border-radius: 999px; font-size: 15px; letter-spacing: .08em;
    }
    .nav ul a:hover { text-decoration: none; }
    .nav ul a.shop-link { padding: 0 18px; }
  }

  /* ---------- Phones: more room, bigger targets, stacked buying ---------- */
  @media (max-width: 600px) {
    body { font-size: 17px; line-height: 1.6; }
    .wrap { padding: 0 20px; }
    .nav > nav { margin: 0 -20px; }
    .topbar { font-size: 13px; padding: 8px 20px; line-height: 1.4; }
    .wordmark { font-size: 30px; gap: 10px; }
    .wordmark svg { width: 36px; height: 36px; }
    .cart-btn { min-height: 44px; }

    .hero { padding: 32px 0 72px; }
    .hero h1 { font-size: clamp(50px, 15vw, 64px); margin: 14px 0 20px; }
    .hero .lede { font-size: 19px; margin-bottom: 28px; }
    .btn { min-height: 54px; font-size: 17px; }
    .hero-grid, .build-grid, .gift-grid { gap: 40px; }
    .cap-seal { left: 10px; bottom: -34px; width: 132px; height: 132px; }
    .cap-seal .price { font-size: 27px; }
    .cap-seal .from, .cap-seal .note { font-size: 11px; }

    section.block { padding: 64px 0; }
    .steps { gap: 18px; }

    .product-body { padding: 22px 20px 22px; gap: 14px; }
    .product h3 { font-size: 26px; }
    .product p { font-size: 17px; line-height: 1.55; }
    .qty-btn { width: 48px; height: 48px; }
    .product-foot { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 4px; }
    .product-foot .product-price { font-size: 32px; }
    .product .btn { width: 100%; min-height: 52px; font-size: 17px; }
    .more-grid { gap: 28px; }
    .featured-qty { justify-content: space-between; }

    details summary { padding-top: 18px; padding-bottom: 18px; }
    .foot { flex-direction: column; align-items: flex-start; gap: 20px; }
    .foot-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 20px !important; width: 100%; }
    .foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
    .sticky-buy { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .sticky-buy strong { font-size: 22px; }
  }

  /* Fixes: keep the first header pill off the edge, and stop the shop's main card spilling sideways */
  @media (max-width: 1180px) { .nav ul { scroll-padding-inline: 20px; } }
  .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .featured-body, .featured-img { min-width: 0; }
  @media (max-width: 900px) { .featured { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 600px) {
    .deal { flex-wrap: wrap; gap: 14px 18px; }
    .deal-price { flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
    .deal-price .now { font-size: 46px; }
    .deal-price .old { font-size: 22px; }
    .save-seal { width: 96px; height: 96px; }
    .save-seal .big { font-size: 26px; }
    .cap-seal .price { font-size: 23px; }
  }
  @media (max-width: 600px) {
    .cap-seal { width: 146px; height: 146px; left: 8px; bottom: -38px; }
    .cap-seal .price { font-size: 22px; letter-spacing: -.01em; }
  }

  /* Launch price seal: text sizes itself from the seal, so R399.99 always sits inside the dashed ring */
  .cap-seal { width: 196px; height: 196px; container-type: inline-size; }
  .cap-seal .price { font-size: 13.2cqw; letter-spacing: -.01em; margin: 5px 0 4px; white-space: nowrap; }
  .cap-seal .from, .cap-seal .note { font-size: clamp(10px, 6.4cqw, 13px); white-space: nowrap; }
  @media (max-width: 900px) { .cap-seal { width: 156px; height: 156px; } }
  @media (max-width: 600px) { .cap-seal { width: 150px; height: 150px; left: 8px; bottom: -38px; } }

  /* Seal price: keep every digit solid; the sweep is a gentle warm glint, never a see-through gap */
  .cap-seal .price.shine-text {
    background: linear-gradient(100deg, var(--ink) 0 40%, #6B4526 50%, var(--ink) 60% 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  @media (min-width: 901px) {
    .cap-seal { width: 206px; height: 206px; left: -64px; }
    .cap-seal .price { font-size: 12.6cqw; }
  }

  /* Phones and tablets: photo sits beside the headline, like on desktop */
  @media (max-width: 900px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
      grid-template-areas: "label photo" "title photo" "lede photo" "actions actions" "trust trust";
      column-gap: 16px; row-gap: 0; align-items: start;
    }
    .hero-grid > div:first-child { display: contents; }
    .hero-grid .label { grid-area: label; }
    .hero-grid h1 { grid-area: title; }
    .hero-grid .lede { grid-area: lede; }
    .hero-grid .hero-actions { grid-area: actions; margin-top: 30px; }
    .hero-grid .trust { grid-area: trust; }
    .hero-photo { grid-area: photo; max-width: none; margin: 4px 0 0; align-self: start; }
    .hero-photo .frame { box-shadow: 6px 6px 0 var(--ink); border-width: 2px; }
    .cap-seal { width: 118px; height: 118px; left: -26px; bottom: -44px; }
    .cap-seal .price { font-size: 13.4cqw; }
    .cap-seal .from, .cap-seal .note { font-size: 7.2cqw; }
  }
  @media (max-width: 600px) {
    .hero { padding: 26px 0 60px; }
    .hero h1 { font-size: clamp(34px, 10.4vw, 48px); margin: 10px 0 14px; }
    .hero .lede { font-size: 16px; line-height: 1.5; margin: 0; max-width: none; }
    .hero-grid .label { font-size: 12px; }
    .hero-grid .hero-actions { margin-top: 64px; }
    .trust { margin-top: 24px; }
    .cap-seal { width: 108px; height: 108px; left: -22px; bottom: -48px; }
  }

  /* More for the bar, phones: compact side by side cards (photo left, details right) */
  @media (max-width: 600px) {
    .more-grid { grid-template-columns: 1fr; max-width: none; gap: 18px; }
    .more-grid .product {
      display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: stretch;
      box-shadow: 5px 5px 0 var(--ink);
    }
    .more-grid .product-img { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 3px solid var(--ink); }
    .more-grid .product-img img { position: absolute; inset: 0; }
    .more-grid .product-body { padding: 16px 14px 16px 14px; gap: 10px; }
    .more-grid .product h3 { font-size: 21px; line-height: 1.1; }
    .more-grid .product p { font-size: 15px; line-height: 1.45; }
    .more-grid .product .facts { display: none; }
    .more-grid .qty-step { gap: 8px; }
    .more-grid .qty-label { font-size: 12px; letter-spacing: .08em; }
    .more-grid .qty-btn { width: 40px; height: 40px; font-size: 20px; }
    .more-grid .qty-num { min-width: 26px; font-size: 19px; }
    .more-grid .product-foot { gap: 10px; padding-top: 2px; }
    .more-grid .product-foot .product-price { font-size: 26px; }
    .more-grid .product .btn { min-height: 46px; font-size: 15px; padding: 10px 12px; box-shadow: 3px 3px 0 var(--ink); }
  }
  @media (max-width: 360px) {
    .more-grid .product { grid-template-columns: 34% minmax(0, 1fr); }
    .more-grid .qty-label { display: none; }
    .more-grid .qty-step { justify-content: flex-start; }
  }

  /* ---------- Cart page ---------- */
  .cart-page { padding: 56px 0 96px; }
  .cart-head { margin-bottom: 28px; }
  .cart-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1; margin: 10px 0 0; }
  .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .cart-layout[hidden], .cart-empty-state[hidden] { display: none; }
  .cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .cart-line {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center;
    background: var(--enamel); border: 3px solid var(--ink); border-radius: 10px; padding: 14px;
    box-shadow: 5px 5px 0 var(--ink);
  }
  .cart-line-img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); background: #fff; }
  .cart-line-info { display: grid; gap: 4px; justify-items: start; min-width: 0; }
  .cart-line-title { font-family: var(--display); font-size: 22px; line-height: 1.1; }
  .cart-line-each { font-size: 15px; opacity: .8; }
  .cart-remove {
    margin-top: 4px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink);
    font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  }
  .cart-remove:hover { color: #9B2F1F; }
  .cart-line-right { display: grid; gap: 10px; justify-items: end; }
  .cart-line-total { font-family: var(--display); font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; }
  .cart-summary {
    position: sticky; top: 20px; display: grid; gap: 12px;
    background: var(--enamel); border: 3px solid var(--ink); border-radius: 10px; padding: 22px;
    box-shadow: 8px 8px 0 var(--bottle);
  }
  .cart-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; }
  .cart-sum-row .free { font-weight: 700; color: var(--bottle); }
  .cart-sum-row.total { border-top: 2px dashed rgba(42,26,16,.45); padding-top: 12px; margin-top: 4px; }
  .cart-sum-row.total strong { font-family: var(--display); font-weight: 400; font-size: 32px; }
  .cart-note { margin: 0; font-size: 15px; line-height: 1.5; opacity: .85; }
  .cart-summary .btn { width: 100%; text-align: center; }
  .cart-empty-state { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 48px 20px 24px; }
  .cart-empty-state svg { width: 120px; height: 120px; filter: drop-shadow(4px 5px 0 var(--ink)); }
  .cart-empty-state p { margin: 0; font-size: 19px; max-width: 30ch; }
  a.cart-btn { display: inline-flex; align-items: center; text-decoration: none; }
  a.cart-btn[aria-current="page"] { background: var(--amber); }
  .toast a { color: var(--amber); font-weight: 700; margin-left: 8px; }

  @media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
  }
  @media (max-width: 600px) {
    .cart-page { padding: 32px 0 72px; }
    .cart-line { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 14px; padding: 12px; }
    .cart-line-img { width: 80px; height: 80px; grid-row: span 2; }
    .cart-line-title { font-size: 20px; }
    .cart-line-right { grid-column: 2; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; }
    .cart-line-total { font-size: 22px; }
  }
  @media (max-width: 600px) {
    .cart-line-right { grid-auto-flow: row; grid-template-columns: auto auto; column-gap: 12px; justify-content: space-between; width: 100%; }
    .cart-line .qty-btn { width: 38px; height: 38px; font-size: 19px; }
    .cart-line .qty-num { min-width: 24px; font-size: 18px; }
    .cart-line-total { font-size: 20px; justify-self: end; white-space: nowrap; }
  }
  .cart-free-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(227,154,38,.18); border: 2px solid var(--amber); font-weight: 600; font-size: 15px; }
  .cart-free-note.done { background: rgba(31,74,54,.1); border-color: var(--bottle); color: var(--bottle); }
  .cart-free-note:empty { display: none; }
  /* Cart summary: plain labels with a short explanation under each amount */
  .cart-sum-row { align-items: flex-start; gap: 16px; }
  .cart-sum-row .lbl { display: grid; gap: 2px; font-weight: 600; }
  .cart-sum-row .lbl small { font-weight: 400; font-size: 14px; opacity: .75; }
  .cart-sum-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cart-sum-row .amt.free { color: var(--bottle); font-weight: 700; }
  .cart-sum-row.total { align-items: center; }
  .cart-sum-row.total .lbl { font-family: var(--display); font-weight: 400; font-size: 22px; }
  .cart-sum-row.total .lbl small { font-family: var(--body); font-size: 14px; }
  .cart-sum-row.total .lbl { font-size: 20px; white-space: nowrap; }
  .cart-sum-row.total strong { font-size: 30px; }
  /* Header pill row: line up with the page edge at every width */
  @media (max-width: 1180px) {
    .nav > nav { margin: 0 -24px; }
    .nav ul { padding: 2px 24px 6px; scroll-padding-inline: 24px; }
  }
  @media (max-width: 600px) {
    .nav > nav { margin: 0 -20px; }
    .nav ul { padding: 2px 20px 6px; scroll-padding-inline: 20px; }
  }

  /* contact line in the footer */
  .foot-contact { width: 100%; margin: 4px 0 0; font-size: 16px; }
  .foot-contact a { color: var(--amber); text-decoration: none; }
  .foot-contact a:hover { text-decoration: underline; }

  /* checkout button on the cart page */
  .cart-summary .cart-checkout { width: 100%; }
  .cart-secure { margin: -4px 0 0; font-size: 14px; opacity: .75; text-align: center; }