/* Sweet Counter - candy-base + m5-counter layout, ported from the mock */
/* ============================================================
   Cozy Caramels - shared candyland base
   LOCKED CONTRACT: every merged mock links this file and must
   NOT redefine the tokens or the primitives below. Mocks add
   their own layout CSS on top in an inline <style>.
   ============================================================ */

:root{
  --cream:#FFF6E9;
  --caramel-light:#F5DCB7;
  --caramel:#EDA54C;
  --brown:#A5581B;
  --brown-deep:#7E3F0E;
  --dark:#3B2314;
  --berry:#E85D75;
  /* Berry is a LARGE-TYPE-ONLY surface. White on berry is ~3.4:1 and dark on
     berry ~4.4:1 - both under the 4.5:1 AA floor for normal text. Use berry
     behind type >=24px (or >=18.7px bold), and use --berry-ink when you want
     berry-coloured small text on cream. */
  --berry-ink:#B03A50;
  --mint:#7FC8A9;
  --sky:#7EB3E8;
  --lemon:#F2D64B;

  --shadow:6px 6px 0 var(--dark);
  --shadow-lift:9px 9px 0 var(--dark);
  --shadow-sm:4px 4px 0 var(--dark);
  --border:3px solid var(--dark);
  --border-thin:2px solid var(--dark);
  --r:22px;

  --font-display:'Baloo 2',cursive;
  --font-body:'Quicksand',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}

/* Cards are display:flex, which beats the UA [hidden] rule. The catalog
   filters by toggling [hidden], so this has to win. */
[hidden]{display:none!important;}

body{
  background:var(--cream);
  color:var(--dark);
  font-family:var(--font-body);
  font-weight:600;
  overflow-x:hidden;
  /* candyland polka-dot ground */
  background-image:
    radial-gradient(var(--caramel-light) 2px, transparent 2px),
    radial-gradient(var(--caramel-light) 2px, transparent 2px);
  background-size:48px 48px;
  background-position:0 0,24px 24px;
}

h1,h2,h3,h4,.chunky{font-family:var(--font-display);line-height:1.1;}
a{color:inherit;}
img{max-width:100%;}
button{font:inherit;color:inherit;}

/* interactive background canvas sits behind everything */
#cozy-bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
/* :where() keeps the :not() from contributing ID specificity. Written as
   body > *:not(#cozy-bg) this is (1,0,1) and beats .modal{position:fixed}
   at (0,1,0) - which rendered every modal as an in-flow block thousands of
   pixels down the page while scroll was locked. */
body > *:where(:not(#cozy-bg)){position:relative;z-index:1;}

/* focus visibility, kept consistent across mocks */
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;}

/* ---------------- nav pill ---------------- */
.pill-nav{
  max-width:1200px;margin:20px auto 0;padding:14px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:var(--border);border-radius:999px;
  box-shadow:var(--shadow);
}
.pill-nav .logo{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;
}
.pill-nav .logo svg{width:34px;height:34px;flex-shrink:0;}
.navlinks{display:flex;gap:10px;align-items:center;font-weight:700;flex-wrap:wrap;}
.navlinks a{
  text-decoration:none;padding:8px 16px;border-radius:999px;
  border:3px solid transparent;transition:.15s;font-family:var(--font-display);
}
.navlinks a:hover{border-color:var(--dark);background:var(--lemon);transform:rotate(-1deg);}
/* dark ground, not berry: nav CTA text is normal-size, and berry cannot
   carry normal-size text at AA. lemon-on-dark is 10:1. */
.nav-cta{
  background:var(--dark);color:var(--lemon);border-color:var(--dark)!important;
  box-shadow:var(--shadow-sm);
}
.nav-cta:hover{background:var(--brown-deep);color:var(--lemon);}

/* ---------------- hero ---------------- */
.badge-sticker{
  display:inline-block;background:var(--mint);border:var(--border);border-radius:999px;
  padding:10px 24px;font-weight:800;font-family:var(--font-display);
  box-shadow:var(--shadow);transform:rotate(-2deg);font-size:1rem;letter-spacing:.5px;
}
.hero-title{margin-top:34px;line-height:1.05;}
.hero-word{
  display:inline-block;font-weight:800;font-family:var(--font-display);
  font-size:clamp(2.8rem,9vw,7rem);
  padding:.04em .18em;border:var(--border);border-radius:18px;
  box-shadow:var(--shadow);margin:.12em;
}
.w1{background:var(--lemon);transform:rotate(-1.5deg);}
.w2{background:var(--berry);color:#fff;transform:rotate(1deg);}
.w3{background:var(--sky);transform:rotate(-1deg);}
.w4{background:var(--mint);transform:rotate(1.5deg);}
.hero-sub{
  margin:34px auto 0;max-width:600px;font-weight:600;font-size:1.15rem;
  background:#fff;display:inline-block;padding:16px 28px;border:var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);
}

/* ---------------- marquee ----------------
   Band keeps top/bottom border only. The BLACK OUTLINE lives on
   the letters via -webkit-text-stroke. */
.marquee-wrap{
  border-top:var(--border);border-bottom:var(--border);
  background:var(--brown);color:var(--cream);
  overflow:hidden;margin:50px 0;transform:rotate(-.6deg) scale(1.02);
}
.marquee{display:flex;width:max-content;animation:cozy-scroll 26s linear infinite;}
.marquee span{
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  padding:14px 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;
  -webkit-text-stroke:2px var(--dark);
  paint-order:stroke fill;
}
.marquee span::after{
  content:"";width:12px;height:12px;background:var(--lemon);
  border:2px solid var(--dark);border-radius:50%;display:inline-block;
  -webkit-text-stroke:0;
}
@keyframes cozy-scroll{to{transform:translateX(-50%);}}

/* ---------------- the candyland button ---------------- */
.btn-candy{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  background:var(--dark);color:var(--lemon);text-decoration:none;
  padding:14px 28px;border-radius:999px;border:var(--border);
  box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:.5rem;
  cursor:pointer;transition:.15s;
}
.btn-candy:hover{transform:rotate(-2deg) translate(-2px,-2px);box-shadow:var(--shadow-lift);}
.btn-candy:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--dark);}
.btn-candy.sm{font-size:1rem;padding:10px 22px;}
.btn-candy.lemon{background:var(--lemon);color:var(--dark);}
.btn-candy.berry{background:var(--berry);color:#fff;}
.btn-candy.cream{background:#fff;color:var(--dark);}

/* ---------------- stickers ---------------- */
.sticker{
  position:absolute;top:-16px;right:-12px;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  background:#fff;border:var(--border);border-radius:999px;
  padding:6px 14px;box-shadow:var(--shadow-sm);transform:rotate(8deg);
  white-space:nowrap;
}
.sticker.hot{background:var(--lemon);}
.sticker.best{background:var(--mint);}
.sticker.value{background:var(--sky);}

/* ---------------- search ---------------- */
.candy-search{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:var(--border);border-radius:999px;
  box-shadow:var(--shadow);padding:12px 22px;
}
.candy-search svg{width:22px;height:22px;flex-shrink:0;}
.candy-search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--dark);
}
.candy-search input::placeholder{color:var(--brown);opacity:.55;}
.candy-search .clear-x{
  border:var(--border-thin);background:var(--dark);color:var(--cream);
  width:28px;height:28px;border-radius:50%;cursor:pointer;line-height:1;
  font-weight:800;flex-shrink:0;display:none;place-items:center;
}
.candy-search.has-q .clear-x{display:grid;}
.search-count{
  font-weight:800;font-size:.9rem;color:var(--brown);white-space:nowrap;
}

/* ---------------- category chips ---------------- */
/* max-width matters: in a column flex parent with align-items:center the
   chip row would otherwise size to its max-content width and blow past the
   viewport, which also defeats the overflow-x:auto below. */
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:100%;}
.chip{
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
  background:#fff;border:var(--border);border-radius:999px;
  padding:9px 20px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.15s;
}
.chip:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);}
.chip.is-active{background:var(--lemon);}
.chip-count{opacity:.6;font-size:.85em;margin-left:.35em;}
/* zero results for the live query: dimmed, but still clickable - clicking
   one clears the search rather than dead-ending */
.chip.is-empty{opacity:.42;}
.chip.is-empty.is-active{opacity:.7;}

/* ---------------- empty state ---------------- */
.empty-state{
  grid-column:1 / -1;text-align:center;
  background:#fff;border:var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:44px 28px;
}
.empty-state h3{font-size:1.6rem;font-weight:800;margin-bottom:8px;}
.empty-state p{margin-bottom:18px;}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.2rem;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute;inset:0;background:rgba(59,35,20,.55);}
.modal-card{
  position:relative;width:min(680px,100%);max-height:88vh;overflow:auto;
  background:var(--cream);border:var(--border);border-radius:var(--r);
  box-shadow:10px 10px 0 var(--dark);
  animation:cozy-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cozy-pop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:42px;height:42px;border-radius:50%;border:var(--border);cursor:pointer;
  background:var(--berry);color:#fff;font-size:1.3rem;font-weight:800;
  box-shadow:var(--shadow-sm);transition:.15s;
}
.modal-close:hover{transform:rotate(90deg);}
.modal-body{padding:34px 36px 36px;}
.m-logo{
  width:78px;height:78px;display:grid;place-items:center;
  background:#fff;border:var(--border);border-radius:20px;padding:14px;
  box-shadow:var(--shadow-sm);
}
.m-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.m-cat{
  display:inline-block;margin-top:16px;
  font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  background:var(--lemon);border:var(--border-thin);border-radius:999px;padding:4px 12px;
}
.m-title{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;margin:10px 0 0;}
.m-desc{margin:12px 0 22px;max-width:56ch;}
.m-sub{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin-bottom:12px;}
.opt-list{display:flex;flex-direction:column;gap:12px;}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fff;border:var(--border);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;
}
/* whole row reacts, and the Order pill warms to caramel
   (caramel + --dark ink is 7.0:1, so it clears AA at this size) */
.opt:hover,.opt:focus-visible{
  background:#FFF9EF;
  transform:translate(-3px,-3px);
  box-shadow:var(--shadow);
}
.opt:hover .opt-cta,.opt:focus-visible .opt-cta{
  background:var(--caramel);color:var(--dark);
}
.opt:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--dark);}
/* the pill is inside the row's hover area, so let the row own the motion
   instead of both of them transforming at once */
.opt .btn-candy:hover{transform:none;box-shadow:var(--shadow-sm);}
.opt-label{font-weight:800;font-size:1.05rem;font-family:var(--font-display);}
.opt-warranty{font-size:.88rem;display:flex;align-items:center;gap:6px;margin-top:2px;}
.opt-warranty svg{width:16px;height:16px;flex-shrink:0;}
.opt-side{display:flex;align-items:center;gap:14px;margin-left:auto;}
.opt-price{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;white-space:nowrap;
}
.m-note{
  margin-top:22px;font-size:.9rem;
  background:var(--caramel-light);border:var(--border-thin);border-radius:14px;padding:14px 16px;
}
.m-note svg{width:18px;height:18px;vertical-align:-4px;margin-right:.3em;}
.btn-candy svg{width:20px;height:20px;flex-shrink:0;}

/* ---------------- footer ---------------- */
.cozy-foot{
  max-width:1240px;margin:0 auto 40px;padding:24px;text-align:center;
  background:#fff;border:var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);transform:rotate(.4deg);font-weight:700;
}
/* berry-ink, not berry: this is a 16px link, and raw --berry on white is
   3.36:1. --berry-ink on white is 5.9:1. */
.cozy-foot .fb{color:var(--berry-ink);}

/* ---------------- scroll reveal base ----------------
   Mocks pick their own entry transform by overriding
   .reveal:not(.is-in). Default: fade + rise.
   --i is the element's OWN index, set at render time, so the stagger is
   the same no matter how fast you scroll. */
.reveal{
  opacity:0;
  transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.4,.64,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
.reveal:not(.is-in){transform:translateY(26px);}
.reveal.is-in{opacity:1;transform:none;}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .navlinks a:not(.nav-cta){display:none;}
}
@media(max-width:720px){
  /* six chips do not fit on a phone - scroll them instead of wrapping
     into three stacked rows */
  .chips{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding:6px 4px 10px;margin-inline:-4px;
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;scroll-snap-align:start;}
}
@media(max-width:600px){
  .pill-nav{flex-direction:column;border-radius:var(--r);text-align:center;}
  .marquee span{font-size:1.05rem;-webkit-text-stroke-width:1.5px;}
  .hero-sub{font-size:1rem;padding:14px 20px;}
  /* modal becomes a bottom sheet */
  .modal{align-items:end;padding:0;}
  .modal-card{
    width:100%;max-height:92svh;
    border-radius:var(--r) var(--r) 0 0;border-bottom:none;
    box-shadow:0 -6px 0 var(--dark);
  }
  .modal-body{padding:26px 20px 32px;}
}

/* touch devices have no cursor to react to */
@media(pointer:coarse){
  .chip,.btn-candy{min-height:44px;}
}

/* ---------------- reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee{animation:none;}
  .modal-card{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .reveal:not(.is-in){transform:none;}
  .btn-candy:hover,.chip:hover,.navlinks a:hover,.opt:hover{transform:none;}
  .opt{transition:none;}
}


/* ---- m5-counter layout ---- */

  /* ============ m5-counter: the split shop counter ============
     Left: a compact tray of every treat. Right: a sticky counter
     panel showing the picked one full size. Below 900px the panel
     folds away and a tap opens the shared modal instead.
     Mock-scoped custom properties use the --m5-* prefix. ======== */

  .wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

  /* candy-base sets body{overflow-x:hidden}. `hidden` turns the body into a
     scroll container, which in several engines neutralises position:sticky
     for its descendants - and this mock is built on two sticky columns.
     `clip` stops the same horizontal overflow WITHOUT creating one.
     Engines that do not know `clip` drop this line and keep `hidden`. */
  body{overflow-x:clip;}

  /* candy-base's `body > *:not(#cozy-bg){position:relative;z-index:1}` has
     specificity (1,0,1) - it outranks `.modal{position:fixed;z-index:100}`
     (0,1,0) and drops the dialog into the document flow. Matching that
     specificity from a later sheet puts the fixed layers back. */
  body > #product-modal{position:fixed;z-index:100;}
  body > #drip{position:fixed;z-index:120;}

  /* ---- caramel drip: scroll progress pinned to the top of the viewport ---- */
  #drip{
    top:0;left:0;right:0;height:9px;pointer-events:none;
    background:var(--caramel-light);border-bottom:2px solid var(--dark);
  }
  #drip-fill{
    display:block;height:100%;width:0;position:relative;
    background:linear-gradient(90deg,var(--lemon),var(--caramel) 52%,var(--berry));
    border-right:2px solid var(--dark);
  }
  /* the drip itself, hanging off the leading edge */
  #drip-fill::after{
    content:"";position:absolute;right:-9px;top:5px;
    width:14px;height:16px;background:var(--caramel);
    border:2px solid var(--dark);border-top:none;
    border-radius:0 0 60% 60% / 0 0 75% 75%;
  }

  /* ---- hero ---- */
  .hero{max-width:1200px;margin:56px auto 30px;padding:0 20px;text-align:center;}
  .hero-trust{
    list-style:none;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    margin:30px 0 0;
  }
  .hero-trust li{
    display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;
    background:#fff;border:var(--border);border-radius:999px;
    padding:9px 18px;box-shadow:var(--shadow-sm);
  }
  .hero-trust svg{width:19px;height:19px;flex-shrink:0;color:var(--brown);}
  .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}

  /* ---- section heads ---- */
  .section-head{text-align:center;margin-bottom:26px;}
  .section-head h2{
    font-size:clamp(2rem,5vw,3.4rem);font-weight:800;
    text-decoration:underline wavy var(--berry) 4px;text-underline-offset:10px;
  }
  .section-head p{margin-top:14px;font-weight:600;max-width:60ch;margin-inline:auto;}

  /* ---- the counter strip: search + chips, sticky at the top ---- */
  .counter-strip{
    position:sticky;top:0;z-index:5;
    display:flex;flex-direction:column;gap:11px;
    background:#fff;border:var(--border);border-radius:var(--r);
    box-shadow:var(--shadow);padding:13px 16px;margin-bottom:26px;
  }
  .strip-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;}
  .strip-label{
    flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.14em;
    background:var(--caramel-light);border:var(--border-thin);border-radius:999px;
    padding:6px 15px;
  }
  .counter-strip .candy-search{
    flex:1 1 240px;min-width:0;padding:9px 18px;box-shadow:var(--shadow-sm);
  }
  .counter-strip .chips{justify-content:flex-start;min-width:0;}
  .counter-strip #result-count{
    flex:0 0 auto;margin-left:auto;font-weight:800;font-size:.9rem;color:var(--brown);
    white-space:nowrap;
  }

  /* ---- the split ---- */
  .counter-split{display:grid;gap:28px;grid-template-columns:1fr;align-items:start;}
  .tray,.panel-col{min-width:0;}
  /* .counter-split is align-items:start, which shrinks this column to the
     panel's own height - leaving position:sticky zero travel, so the panel
     scrolled away instead of docking. Stretch it to the full row height. */
  .panel-col{align-self:stretch;}
  @media(min-width:900px){
    .counter-split{grid-template-columns:minmax(300px,380px) 1fr;}

    /* The tray docks on the same line as the panel and scrolls its own rows.
       Without this the 20 rows run far past the counter and the left column
       ends up several screens taller than the right. */
    .tray{
      position:sticky;top:calc(20px + var(--m5-strip-h,0px));
      align-self:start;
      display:flex;flex-direction:column;min-height:0;
    }
    #candy-grid{
      min-height:0;overflow-y:auto;overscroll-behavior:contain;
      /* room inside the scroll box for the row shadows and for the pinned
         row's translate(-5px,-5px), which would otherwise be clipped */
      padding:6px 12px 10px 8px;
      /* Eight rows, then scroll. --m5-tray-h is measured in JS off the 8th
         visible row so it stays right when a title wraps to two lines or a
         filter leaves fewer than eight. The min() keeps it inside the
         viewport on short screens. */
      /* 44px = the 20px dock offset + 24px of breathing room at the bottom.
         Any larger and the cap clips the eighth row on a 900px-tall screen. */
      max-height:min(var(--m5-tray-h,662px), calc(100svh - var(--m5-strip-h,0px) - 44px));
    }
    .tray-cap{padding-left:8px;}
  }

  /* ---- left: the tray ---- */
  #candy-grid{display:flex;flex-direction:column;gap:10px;}

  /* scrollbar dressed to match the hard-border language */
  #candy-grid{scrollbar-width:thin;scrollbar-color:var(--caramel) var(--caramel-light);}
  #candy-grid::-webkit-scrollbar{width:11px;}
  #candy-grid::-webkit-scrollbar-track{
    background:var(--caramel-light);border:2px solid var(--dark);border-radius:999px;
  }
  #candy-grid::-webkit-scrollbar-thumb{
    background:var(--caramel);border:2px solid var(--dark);border-radius:999px;
  }
  #candy-grid::-webkit-scrollbar-thumb:hover{background:var(--brown);}
  .tray-cap{
    display:flex;align-items:center;gap:8px;margin-bottom:12px;
    font-family:var(--font-display);font-weight:800;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.12em;color:var(--brown);
  }
  .tray-cap::after{content:"";flex:1;height:0;border-top:2px dashed var(--dark);opacity:.4;}

  .counter-row{
    position:relative;display:flex;align-items:center;gap:12px;width:100%;
    text-align:left;cursor:pointer;
    background:#fff;border:var(--border);border-radius:16px;
    box-shadow:var(--shadow-sm);padding:11px 14px;
    transition:transform .15s,box-shadow .15s,background .15s;
  }
  .counter-row:hover,.counter-row:focus-visible{
    transform:translate(-2px,-2px);box-shadow:var(--shadow);
  }
  /* the picked treat is pinned to the counter */
  .counter-row.is-selected{
    background:var(--lemon);box-shadow:var(--shadow-lift);
    transform:translate(-5px,-5px) rotate(-.7deg);
  }
  .row-chip{
    flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
    background:#fff;border:var(--border-thin);border-radius:13px;padding:8px;
    box-shadow:2px 2px 0 var(--dark);
  }
  .row-chip img{width:100%;height:100%;object-fit:contain;display:block;}
  .row-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;}
  .row-title{
    font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.15;
    overflow-wrap:anywhere;
  }
  .row-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .row-cat{
    font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
    color:var(--brown);
  }
  .row-tag{
    font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    background:var(--mint);border:2px solid var(--dark);border-radius:999px;
    padding:1px 8px;white-space:nowrap;
  }
  .row-price{
    flex:0 0 auto;text-align:right;font-family:var(--font-display);
    font-weight:800;font-size:1.14rem;line-height:1;white-space:nowrap;
  }
  .row-from{
    display:block;font-family:var(--font-body);font-size:.6rem;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;color:var(--brown);margin-bottom:3px;
  }
  /* brown on lemon is only 3.6:1 - swap the small type to ink on the pinned row */
  .counter-row.is-selected .row-cat,
  .counter-row.is-selected .row-from{color:var(--dark);}

  #candy-grid .empty-state{padding:30px 20px;}
  #candy-grid .empty-state h3{font-size:1.35rem;}

  /* ---- right: the counter panel ---- */
  .panel-dock{
    position:sticky;top:calc(20px + var(--m5-strip-h,0px));z-index:2;
  }
  .panel-flag{
    position:absolute;top:-15px;left:26px;z-index:3;
    font-family:var(--font-display);font-weight:800;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.1em;
    background:var(--sky);border:var(--border);border-radius:999px;
    padding:5px 15px;box-shadow:var(--shadow-sm);transform:rotate(-3deg);
  }
  .panel-card{
    background:var(--cream);border:var(--border);border-radius:var(--r);
    box-shadow:var(--shadow);padding:32px 32px 30px;
    max-height:calc(100vh - 44px - var(--m5-strip-h,0px));overflow:auto;
  }
  .panel-empty{font-family:var(--font-display);font-size:1.6rem;font-weight:800;}
  .panel-empty + p{margin-top:8px;}
  @media(max-width:899.98px){
    .panel-col{display:none;}
  }

  /* screen-reader-only announcement for the counter swap */
  .m5-sr{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }

  /* ---- m5 reveal flavour: rows slide in from the left ---- */
  .reveal:not(.is-in){transform:translateX(-24px);}

  /* ---- how / faq / cta ---- */
  .band{margin-block:70px;}  /* margin-block only: the margin shorthand would reset .wrap's margin:0 auto and break centering */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
  .step{
    background:var(--brown);color:var(--cream);border:var(--border);
    border-radius:var(--r);box-shadow:var(--shadow);padding:24px;
  }
  .step b{font-family:var(--font-display);display:block;font-size:2.2rem;color:var(--lemon);}
  .step h3{font-size:1.2rem;margin:4px 0 6px;}
  .step p{font-weight:600;font-size:.94rem;}

  .faq-list{max-width:820px;margin:0 auto;}
  .faq-item{
    background:#fff;border:var(--border);border-radius:var(--r);
    box-shadow:var(--shadow-sm);padding:16px 22px;margin-bottom:14px;
  }
  .faq-item summary{
    font-family:var(--font-display);font-weight:800;font-size:1.06rem;cursor:pointer;
    list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+';font-size:1.6rem;line-height:1;}
  .faq-item[open] summary::after{content:'–';}
  .faq-item p{margin-top:10px;font-weight:600;font-size:.95rem;}

  .cta-band{
    background:var(--berry);border:var(--border);border-radius:var(--r);
    box-shadow:var(--shadow);padding:44px 30px;text-align:center;color:#fff;
    transform:rotate(-.5deg);
  }
  /* berry is a large-type-only surface - both lines here clear 24px */
  .cta-band h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;}
  .cta-band p{font-size:1.5rem;font-weight:700;margin:12px 0 24px;}

  @media(max-width:600px){
    .counter-strip{padding:11px 12px;border-radius:18px;}
    .strip-label{display:none;}
    .counter-strip #result-count{margin-left:0;}
    .counter-row{padding:10px 11px;gap:10px;}
    .row-chip{width:42px;height:42px;border-radius:11px;padding:7px;}
    .row-title{font-size:.98rem;}
  }