/* Base components: pill button, round tile, product card, badge, accordion, checkbox list.
   Only the design tokens from /tokens.css are used; each var() carries a fallback so
   the components render before (or without) tokens.css. --tile-ring is read as the
   ring's width (a length). Motion respects prefers-reduced-motion (bottom). */

/* ---------- pill button ---------- */
/* Utz buttons (design-spec A.1): 48px, 0 32px, 700 15px, 1px border. Hover = fill wipe:
   a ::before layer in the inverse colour grows from the left over .4s while the label
   colour changes over .3s; only on devices with a real hover. */
.cc-pill {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  min-height: var(--btn-h, 48px); padding: 0 var(--btn-pad-x, 32px);
  font-family: var(--font-body, system-ui, sans-serif); font-size: var(--fs-base, 15px);
  font-weight: var(--fw-bold, 700); line-height: var(--lh-tight, 1.2);
  border: 1px solid transparent; border-radius: var(--radius-pill, 100px); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease, ease), color .3s var(--ease, ease), border-color .3s var(--ease, ease);
}
.cc-pill::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--pill-wipe, #fff); transition: width var(--dur-btn, 400ms) ease;
}
.cc-pill--primary { background: var(--color-button, #000); border-color: var(--color-button, #000); color: var(--color-button-ink, #fff); --pill-wipe: var(--color-button-ink, #fff); }
.cc-pill--secondary { background: var(--color-field, #EDEDED); border-color: var(--color-field, #EDEDED); color: var(--color-text, #000); --pill-wipe: var(--color-button, #000); }
@media (hover: hover) and (pointer: fine) {
  .cc-pill:hover::before { width: calc(100% + 1px); }
  .cc-pill--primary:hover { color: var(--color-button, #000); }
  .cc-pill--secondary:hover { color: var(--color-button-ink, #fff); border-color: var(--color-button, #000); }
}
.cc-pill:active { transform: scale(.98); transition-duration: 100ms; }
.cc-pill[aria-pressed="true"] { background: var(--color-button, #000); border-color: var(--color-button, #000); color: var(--color-button-ink, #fff); }
.cc-pill:focus-visible { outline: var(--focus-ring, 2px solid #001B71); outline-offset: var(--focus-offset, 3px); }
.cc-pill .icon { flex: none; }

/* ---------- round tile ---------- */
.cc-tile {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3, 12px);
  width: var(--tile-size, 120px); color: var(--color-text, #000); text-decoration: none; text-align: center;
}
.cc-tile__ring {
  display: grid; place-items: center; overflow: hidden;
  width: var(--tile-size, 120px); height: var(--tile-size, 120px); border-radius: 50%;
  background: var(--color-surface, #fff);
  box-shadow: inset 0 0 0 var(--tile-ring, 2px) var(--color-ring, #E50909);
  transition: box-shadow var(--dur-fast, 150ms) var(--ease, ease), transform var(--dur-base, 250ms) var(--ease, ease);
}
.cc-tile__img { width: 62%; height: 62%; object-fit: contain; }
.cc-tile__text {
  padding: 0 var(--space-3, 12px); font-weight: var(--fw-bold, 700); font-size: var(--fs-md, 18px);
  line-height: var(--lh-tight, 1.1); color: var(--color-royal, #1A3A8F); overflow-wrap: anywhere;
}
.cc-tile__label { font-weight: var(--fw-semibold, 600); font-size: var(--fs-sm, 14px); line-height: var(--lh-tight, 1.2); }
.cc-tile:hover .cc-tile__ring { box-shadow: inset 0 0 0 calc(var(--tile-ring, 2px) + 2px) var(--color-ring, #E50909); }
.cc-tile:focus-visible { outline: none; }
.cc-tile:focus-visible .cc-tile__ring { outline: var(--focus-ring, 2px solid #001B71); outline-offset: var(--focus-offset, 3px); }
/* Wordmark tiles (brands, flavors): the name is set inside the ring; the label under the
   ring is visually hidden (base.js). ONE size for every tile at a given width: 13.5 % of the
   ring (--cc-tile-scale; all rings in a panel are the same size), capped at --cc-tile-fs
   (--fs-sm below 1280, --fs-md from 1280; the shell may set its own) and never below
   --cc-tile-min (12 px). Only a single word too long for its line goes smaller (--cc-fit,
   from base.js tileWord: pure text maths, no layout reads). Words are never broken. */
.cc-tile--word { --cc-tile-fs: var(--fs-sm, 0.84375rem); --cc-tile-min: var(--fs-xs, 0.75rem); --cc-tile-scale: 13.5; }
@media (min-width: 1280px) { .cc-tile--word { --cc-tile-fs: var(--fs-md, 1rem); } }
.cc-tile--word .cc-tile__ring { container-type: inline-size; }
.cc-tile__word {
  display: block; width: var(--cc-box, 82cqi); font-family: var(--font-heading, system-ui, sans-serif);
  font-weight: var(--fw-bold, 700); line-height: 1.1; letter-spacing: -0.01em;
  font-size: max(var(--cc-tile-min), min(var(--cc-tile-fs), calc(var(--cc-tile-scale) * 1cqi), calc(var(--cc-fit, 100) * 1cqi)));
  color: var(--color-royal, #001B71); text-align: center;
  text-wrap: balance; hyphens: none; overflow-wrap: normal;
  transition: transform var(--dur-slow, 500ms) var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) {
  .cc-tile--word:hover .cc-tile__word { transform: scale(1.04); }
}
@media (max-width: 767px) {
  .cc-tile, .cc-tile__ring { width: var(--tile-size-mobile, 96px); }
  .cc-tile__ring { height: var(--tile-size-mobile, 96px); }
}

/* ---------- badge ---------- */
.cc-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid transparent;
  border-radius: var(--radius-badge, 24px); background: var(--color-badge, #FFD23F); color: var(--color-badge-ink, #1D1D1D);
  font-size: var(--fs-sm, 13.5px); font-weight: var(--fw-bold, 700); line-height: 18px; white-space: nowrap;
}

/* ---------- product card ---------- */
.cc-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2, 8px);
  color: var(--color-text, #000); text-decoration: none; min-width: 0;
}
.cc-card__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-panel, 10px); background: var(--color-surface-2, #F7F7F7);
}
/* Every card sits on the same light-grey square, photo or not, so a row of photo cards and
   label cards reads as one set of tiles (design review r1 #6). Utz's photos carry their own
   white; `multiply` turns that white into the square's grey (and leaves the pack colours). */
.cc-card__media--label { background: var(--color-surface-2, #F7F7F7); }
.cc-card__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow, 500ms) var(--ease, ease); }
.cc-card > .cc-badge { position: absolute; z-index: 1; top: 10px; left: 10px; }
.cc-card__title {
  margin: var(--space-1, 4px) 0 0; font-size: var(--fs-base, 15px); font-weight: var(--fw-semibold, 600); line-height: 24px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.cc-card__sub { margin: 0; font-size: var(--fs-sm, 14px); color: var(--color-subtext, #555); line-height: var(--lh-base, 1.4); }
/* Utz's card zoom (spec 8.3): scale 1.08 over .5 s cubic-bezier(.3,1,.3,1), hover devices only. */
@media (hover: hover) and (pointer: fine) {
  .cc-card:hover .cc-card__img, .cc-card:hover .cc-pack { transform: scale(1.08); }
}
.cc-card:focus-visible { outline: none; }
.cc-card:focus-visible .cc-card__media { outline: var(--focus-ring, 2px solid #001B71); outline-offset: var(--focus-offset, 3px); }

/* ---------- product label (a product without a photo) ----------
   Owner decision: the brand name big and bold in royal, the category icon under it, the
   flavor or variety in small caps below, on the light-grey square. Everything is sized in
   container units of the square (1cqi = 1 % of its side), so a 173 px phone card, a 300 px
   desktop card and the 600 px product-page square are the same drawing. Fixed rows
   (brand / icon / variant) keep the icons level along a carousel or grid row.
   --cc-fit is the brand's fitted size and --cc-lines its line count (base.js fitInto: at
   most 2 lines, 76 % wide); both are set on .cc-pack so the layout can read them too.
   Row budget (cqi): 7 top + 28 brand + 4 + 36 icon + 4 + 15 variant + 6 bottom. The variant
   row holds 2 lines with room to spare, so the 1.08 hover zoom never pushes it to the
   square's edge (design review r2 L8). */
.cc-pack {
  position: absolute; inset: 0; container-type: inline-size;
  transition: transform var(--dur-slow, 500ms) var(--ease, ease);
}
/* The layout sits one level in: container units resolve against an ancestor container. */
.cc-pack__in {
  --cc-top: 7cqi; --cc-brand-h: 28cqi; --cc-icon-h: 36cqi; --cc-icon-min: 26cqi;
  --cc-clear: 40px; --cc-v-room: 0px; --cc-extra: 0px;
  --cc-icon: calc(var(--cc-icon-h) - min(var(--cc-extra), var(--cc-icon-h) - var(--cc-icon-min)));
  position: absolute; inset: 0; display: grid; justify-items: center; row-gap: 4cqi;
  grid-template-rows: calc(var(--cc-brand-h) + var(--cc-extra)) var(--cc-icon) minmax(0, 1fr);
  padding: var(--cc-top) 10cqi 6cqi; text-align: center;
}
.cc-pack__brand {
  align-self: end; max-width: 100%;
  font-family: var(--font-heading, system-ui, sans-serif); font-weight: var(--fw-bold, 700);
  font-size: max(var(--fs-sm, 0.84375rem), calc(var(--cc-fit, 11) * 1cqi)); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--color-royal, #001B71);
}
/* fitInto() sets each fitted line as its own block. */
.cc-fit-line { display: block; white-space: nowrap; }
.cc-pack__icon { grid-row: 2; align-self: center; width: var(--cc-icon); height: var(--cc-icon); object-fit: contain; }
.cc-pack__variant {
  grid-row: 3; align-self: start; max-width: 100%;
  font-size: clamp(var(--fs-xs, 12px), 4.2cqi, var(--fs-lg, 18px)); font-weight: var(--fw-semibold, 600);
  line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted, #666);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* The monogram stands in for the brand on the smallest squares only (list rows, thumbnails). */
.cc-pack__mono { display: none; }
/* A badge overlays the label's top-left corner, as Utz's badges sit over the photos
   (10 px in, 24 px tall: its bottom is 34 px down). The brand keeps its fitted size, the
   same as an unbadged neighbour's, and only moves down when its lines would reach the
   badge: it takes the room it needs (--cc-extra, to 6 px under the badge) from the icon
   row, which gives up at most 10cqi (9 on phones), and on phones from the variant row's
   spare room (--cc-v-room). Only if that is not enough does the brand shrink, never
   below --fs-sm. A one-line brand almost never needs any of it. */
.cc-card__media--badged .cc-pack__in {
  --cc-extra: clamp(0px, calc(var(--cc-clear) + var(--cc-lines, 1) * 1.05 * var(--cc-fit, 11) * 1cqi - var(--cc-top) - var(--cc-brand-h)), calc(var(--cc-icon-h) - var(--cc-icon-min) + var(--cc-v-room)));
}
.cc-card__media--badged .cc-pack__brand {
  font-size: max(var(--fs-sm, 0.84375rem), min(calc(var(--cc-fit, 11) * 1cqi), calc((var(--cc-top) + var(--cc-brand-h) + var(--cc-extra) - var(--cc-clear)) / (var(--cc-lines, 1) * 1.05))));
}
/* No brand and nothing to say instead: the icon alone, centred. */
.cc-pack--icon .cc-pack__in { grid-template-rows: 1fr; align-items: center; padding: 0; }
.cc-pack--icon .cc-pack__icon { grid-row: 1; width: 56cqi; height: 56cqi; }
/* Small cards (phone grid): the icon gives up a little room so the variant keeps 2 lines
   at its 12 px floor instead of being cut to one line with an ellipsis. */
@container (max-width: 219.98px) {
  /* The variant row is 25cqi here; what a 2-line variant (2 x 1.25 x 12 px) leaves of it,
     up to 4cqi, may go to a badged card's brand. */
  .cc-pack__in { --cc-icon-h: 30cqi; --cc-icon-min: 21cqi; --cc-v-room: clamp(0px, calc(25cqi - 2.5 * var(--fs-xs, 0.75rem)), 4cqi); row-gap: 3cqi; padding-bottom: 4cqi; }
}
/* List rows and thumbnails (under 120 px; a phone grid card is 138 px even at 320): a
   name fitted to so small a square would be 7-12 px, so the square shows the brand's
   monogram instead (bold royal, about a quarter of the square: 19 px in a 72 px phone
   row, 25 px at 96 px; never under 12 px) over the category icon. The row beside it
   names the product in full. */
@container (max-width: 119.98px) {
  .cc-pack__in { grid-template-rows: 38cqi 44cqi; row-gap: 4cqi; padding: 7cqi 8cqi 7cqi; }
  .cc-pack__brand, .cc-pack__variant { display: none; }
  .cc-pack__mono {
    display: block; grid-row: 1; align-self: end;
    font-family: var(--font-heading, system-ui, sans-serif); font-weight: var(--fw-bold, 700);
    font-size: max(var(--fs-xs, 0.75rem), 26cqi); line-height: 1; letter-spacing: -0.02em; color: var(--color-royal, #001B71);
  }
  .cc-pack__icon { width: 44cqi; height: 44cqi; }
  .cc-pack--icon .cc-pack__in { grid-template-rows: 1fr; padding: 0; }
}

/* ---------- accordion ---------- */
.cc-acc { border-bottom: 1px solid var(--color-border, #E5E5E5); }
.cc-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  min-height: 52px; padding: var(--space-3, 12px) 0; cursor: pointer; list-style: none;
  font-weight: var(--fw-bold, 700); font-size: var(--fs-base, 16px);
}
.cc-acc__summary::-webkit-details-marker { display: none; }
.cc-acc__summary:focus-visible { outline: var(--focus-ring, 2px solid #001B71); outline-offset: var(--focus-offset, 3px); border-radius: var(--radius-sm, 5px); }
.cc-acc__sign { display: inline-grid; flex: none; }
.cc-acc__sign .icon { grid-area: 1 / 1; }
.cc-acc__sign .icon:last-child { visibility: hidden; }
.cc-acc[open] .cc-acc__sign .icon:first-child { visibility: hidden; }
.cc-acc[open] .cc-acc__sign .icon:last-child { visibility: visible; }
.cc-acc__body { padding: 0 0 var(--space-4, 16px); }

/* ---------- checkbox list ---------- */
.cc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 8px); }
.cc-checks__label { display: flex; align-items: center; gap: var(--space-2, 8px); min-height: 32px; cursor: pointer; font-size: var(--fs-sm, 14px); }
.cc-checks__box { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--color-button, #000); }
.cc-checks__box:focus-visible { outline: var(--focus-ring, 2px solid #001B71); outline-offset: 2px; }
.cc-checks__count { color: var(--color-subtext, #555); }

@media (prefers-reduced-motion: reduce) {
  .cc-pill, .cc-pill::before, .cc-tile__ring, .cc-tile__word, .cc-card__img, .cc-pack { transition: none; }
  .cc-card:hover .cc-card__img, .cc-card:hover .cc-pack, .cc-tile--word:hover .cc-tile__word { transform: none; }
}