/* =============================================================
   Sunday Polish — builder / sets / shade
   Owner: Agent 2. Everything namespaced .bys-*
   Consumes tokens.css. Never redefines shared vocabulary.
   ============================================================= */

:root {
  --bys-top: 88px;             /* set at runtime from header height */
  --bys-outline: #DCD4CC;
  --bys-num: #C6BCB3;
}

/* ---------- utility ---------- */
.bys-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;
}
.bys-hide { display: none !important; }
.bys-strike { text-decoration: line-through; color: var(--sp-muted); font-weight: 400; }

/* =============================================================
   1. THE PAINT SWEEP
   ============================================================= */
.bys-paint__coat {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 420ms var(--sp-spring);
  will-change: transform;
}
.bys-paint.is-on .bys-paint__coat { transform: scaleY(1); }

.bys-paint__gloss {
  opacity: 0;
  transition: opacity 320ms var(--sp-ease) 230ms;
}
.bys-paint.is-on .bys-paint__gloss { opacity: 1; }

.bys-paint.is-off .bys-paint__coat { transition-timing-function: var(--sp-ease); }
.bys-paint.is-off .bys-paint__gloss { transition-delay: 0ms; transition-duration: 120ms; }

@media (prefers-reduced-motion: reduce) {
  /* plain cross-fade instead of a sweep */
  .bys-paint__coat { transform: none !important; opacity: 0; transition: opacity 1ms linear !important; }
  .bys-paint.is-on .bys-paint__coat { opacity: 1; }
  .bys-paint__gloss { transition: opacity 1ms linear !important; }
}

/* =============================================================
   2. PAGE SHELL
   ============================================================= */
/* No max-width here: a 46ch measure is sized for body text, and putting
   display type inside it wraps a six-word headline onto four lines. The
   heading takes its own measure; only the supporting copy is constrained. */
.bys-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.bys-head > p, .bys-head > .lede { max-width: 54ch; }
.bys-head > .display { max-width: 15ch; }
.bys-shell { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1040px) {
  /* Build on the left, what you're ordering and the price on the right.
     The HTML order is left alone so the mobile behaviour below 1040px —
     where the slot row pins to the top and the CTA to the bottom — still
     works; only the visual order swaps. */
  .bys-shell { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-6); }
  .bys-palette { order: 1; }
  .bys-stage   { order: 2; }
}

/* flex and grid children default to min-width:auto and refuse to shrink
   below their content — the classic source of sideways page scroll */
.bys-shell > *, .bys-stage > *, .bys-stage__inner > *,
.bys-setcard > *, .bys-setcard__body > *,
.bys-shadehero > *, .bys-inbox > *, .bys-slotrow > * { min-width: 0; }
.bys-shell, .bys-stage, .bys-slotcard, .bys-rail { min-width: 0; max-width: 100%; }

.bys-stage { display: grid; gap: var(--sp-4); }
@media (min-width: 1040px) {
  .bys-stage {
    position: sticky; top: var(--bys-top); z-index: 6;
    max-height: calc(100dvh - var(--bys-top) - 1rem);
  }
}

/* =============================================================
   3. THE SLOT ROW  — the picking surface
   ============================================================= */
.bys-slotcard {
  position: relative;
  background: var(--sp-paper);
  border-radius: var(--sp-r-lg);
  border: 1px solid var(--sp-line-soft);
  box-shadow: var(--sp-shadow-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-5) calc(var(--sp-4) + 8px);
}
.bys-slotcard::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 7px;
  border-radius: var(--sp-r-lg) 0 0 var(--sp-r-lg);
  background: linear-gradient(180deg, var(--sp-lilac), var(--sp-lilac-soft));
}
.bys-slotcard__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.bys-slotcard__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--sp-ink-2);
}
.bys-slotcard__hint { font-size: var(--sp-t-xs); color: var(--sp-muted); }

.bys-slotrow {
  display: flex; align-items: flex-end;
  gap: var(--bys-rowgap, clamp(6px, 1.6vw, 20px));
  list-style: none; margin: 0;
  padding: 12px 17px 4px 11px;   /* right pad clears the badge overhang */
  max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.bys-slotrow::-webkit-scrollbar { display: none; }

/* soft fade on the right edge, only while the row actually scrolls */
.bys-slotrow[data-scroll="true"] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.bys-slotrow[data-scroll="end"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}

.bys-slot {
  position: relative;
  flex: 1 1 0; min-width: 40px; max-width: 88px;
  scroll-snap-align: center;
  transition: translate 480ms var(--sp-spring), opacity 240ms var(--sp-ease), scale 300ms var(--sp-spring);
}
.bys-slot.is-new { animation: bysSlotIn 460ms var(--sp-spring) both; }
.bys-slot.is-gone { opacity: 0; scale: .6; pointer-events: none; }
@keyframes bysSlotIn {
  from { opacity: 0; scale: .5; }
  to { opacity: 1; scale: 1; }
}

/* the nail itself — Agent 1's .nslot__art, or our own fallback */
.bys-slot .nslot { width: 100%; }
.bys-slot .nslot__art,
.bys-slot .bys-slot__art {
  display: block; position: relative; cursor: pointer;
  width: 100%;                    /* let the row decide, not a fixed --nw */
  border-radius: 14px;
  transition: transform 300ms var(--sp-spring);
}
.bys-slot .nslot__art:hover,
.bys-slot .bys-slot__art:hover { transform: translateY(-4px); }
.bys-slot .nslot__art:focus-visible,
.bys-slot .bys-slot__art:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 5px; }
.bys-slot .bys-slot__art svg { display: block; width: 100%; height: auto; }

.bys-slot__num {
  position: absolute; left: 0; right: 0; bottom: 15%;
  text-align: center; font-size: 13px; font-weight: 500;
  color: var(--bys-num); pointer-events: none;
}
.bys-slot__name {
  display: block; text-align: center; font-size: 11px; line-height: 1.2;
  font-weight: 600; color: var(--sp-ink-2); margin-top: 5px; min-height: 1.3em;
  overflow-wrap: anywhere; hyphens: auto;
}
.bys-slot--static .bys-slot__name { padding-inline: 1px; }

/* base.css sets `svg { fill: currentColor }`, whose specificity beats the
   inline fill="none" on stroke-only icons — which turns the ⊕ / ⊗ badge into
   a solid disc. Restore it for any SVG explicitly authored as stroke-only. */
svg[fill="none"], svg[fill="none"] * { fill: none; }

/* the shared badge is drawn small on purpose — grow the hit area
   without touching its look, so it clears a 40px tap target */
.bys-slot .nslot__badge::after,
.bys-slot .bys-slot__badge::after {
  content: ''; position: absolute; inset: -11px; border-radius: 50%;
}

.bys-slot__badge {
  position: absolute; top: -4px; right: -6px;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; background: #fff;
  border: 1px solid var(--bys-outline);
  color: var(--sp-ink-2); cursor: pointer;
  box-shadow: 0 1px 3px rgba(26, 20, 24, .08);
  transition: transform 320ms var(--sp-spring), border-color 200ms var(--sp-ease),
              background-color 200ms var(--sp-ease), color 200ms var(--sp-ease);
}
.bys-slot__badge svg { width: 18px; height: 18px; display: block; }
.bys-slot__badge:hover { transform: scale(1.14); border-color: var(--sp-ink); color: var(--sp-ink); }
.bys-slot__badge:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 2px; }
.bys-slot[data-filled="true"] .bys-slot__badge { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-cream); }

/* focused slot */
.bys-slot[data-focused="true"] .nslot__art,
.bys-slot[data-focused="true"] .bys-slot__art { transform: translateY(-6px); }
.bys-slot[data-focused="true"]::after {
  content: ''; position: absolute; inset: -10px -7px -4px;
  border-radius: 20px;
  border: 2.5px solid var(--sp-lilac);
  pointer-events: none;
  animation: bysSlotPulse 1.7s var(--sp-ease) infinite;
}
@keyframes bysSlotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(155, 132, 201, .35); }
  50% { opacity: .75; box-shadow: 0 0 0 7px rgba(155, 132, 201, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bys-slot[data-focused="true"]::after { animation: none; }
}

/* read-only strip (sets + shade pages) — always fits, never scrolls */
.bys-slot--static { pointer-events: none; max-width: 84px; min-width: 30px; }
.bys-slotrow--static { padding-top: 6px; overflow: visible; gap: clamp(4px, 1.6vw, 18px); }

/* the whole card gives a small nudge when the set goes in the bag */
.bys-slotcard.is-sent { animation: bysSent 600ms var(--sp-spring) both; }
@keyframes bysSent {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

/* =============================================================
   4. PHOTOGRAPHY
   ============================================================= */
.bys-photo {
  display: block; overflow: hidden;
  border-radius: var(--sp-r-lg);
  background: var(--sp-cream-2);
}
.bys-photo__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.bys-photo--square { aspect-ratio: 1 / 1; }
.bys-photo--wide { aspect-ratio: 4 / 3; }
.bys-photo--pano { aspect-ratio: 16 / 10; }

@media (prefers-reduced-motion: reduce) {
  .bys-slotcard.is-sent { animation: none; }
}

/* =============================================================
   5. PRICE RAIL + CTA
   ============================================================= */
.bys-rail {
  display: grid; gap: var(--sp-3);
  background: var(--sp-paper);
  border: 1px solid var(--sp-line-soft);
  border-radius: var(--sp-r-lg);
  box-shadow: var(--sp-shadow-1);
  padding: var(--sp-4);
}
.bys-rail__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bys-rail__count { font-size: var(--sp-t-sm); font-weight: 600; color: var(--sp-ink-2); }
.bys-rail__money { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.bys-rail__price { font-family: var(--sp-font-display); font-size: var(--sp-t-2xl); line-height: 1; }
.bys-rail__save { font-size: var(--sp-t-sm); font-weight: 600; color: var(--sp-ok); }
.bys-rail__nudge { font-size: var(--sp-t-sm); color: var(--sp-ink-2); }
.bys-rail__nudge b { color: var(--sp-fg); }

/* segmented tier control */
.bys-seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--sp-cream-2); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-pill); padding: 3px; isolation: isolate;
}
.bys-seg__thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 4);
  border-radius: var(--sp-r-pill);
  background: var(--sp-paper);
  box-shadow: 0 1px 3px rgba(26, 20, 24, .14);
  transform: translateX(calc(var(--bys-seg-i, 1) * 100%));
  transition: transform 420ms var(--sp-spring);
}
.bys-seg button {
  position: relative; z-index: 1; appearance: none; background: none; border: 0;
  font: inherit; font-weight: 600; font-size: var(--sp-t-sm);
  padding: 8px 4px; border-radius: var(--sp-r-pill); cursor: pointer;
  color: var(--sp-muted);
  transition: color 240ms var(--sp-ease);
}
.bys-seg button[aria-pressed="true"] { color: var(--sp-ink); }
.bys-seg button:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 2px; }

/* progress */
.bys-prog__track {
  height: 10px; border-radius: var(--sp-r-pill);
  background: var(--sp-cream-2); overflow: hidden;
}
.bys-prog__fill {
  height: 100%; width: 100%; border-radius: var(--sp-r-pill);
  background: linear-gradient(90deg, var(--sp-coral), var(--sp-lilac));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 560ms var(--sp-ease-out);
}
.bys-prog__dots { position: relative; height: 18px; margin-top: 5px; }
.bys-prog__dot {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--sp-muted);
  transition: color 240ms var(--sp-ease), transform 300ms var(--sp-spring);
}
.bys-prog__dot.is-hit { color: var(--sp-fg); transform: translateX(-50%) scale(1.12); }

.bys-cta { display: grid; gap: 6px; }
.bys-cta__btn { width: 100%; font-size: var(--sp-t-lg); }
.bys-cta__btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bys-cta__why { font-size: var(--sp-t-xs); color: var(--sp-muted); text-align: center; min-height: 1.2em; }

/* Under 1040px the stage stops being one block: the slot row pins to the top
   of the viewport and the CTA pins to the bottom, with everything else
   scrolling between them. `display: contents` promotes the stage's children
   to grid items of .bys-shell so each can stick independently. */
.bys-more { display: none; }
@media (max-width: 1039px) {
  .bys-stage { display: contents; }

  .bys-slotcard {
    position: sticky; top: var(--bys-top); z-index: 7;
    padding: var(--sp-3) var(--sp-3) var(--sp-4) calc(var(--sp-3) + 8px);
    box-shadow: var(--sp-shadow-2), 0 14px 20px -16px rgba(26, 20, 24, .5);
  }
  /* scrim so nothing peeks through the gap above the pinned row.
     Kept inside the card's own width — anything wider would push the
     document sideways, and the page must never scroll horizontally. */
  .bys-slotcard::after {
    content: ''; position: absolute; left: -6px; right: -6px;
    bottom: 100%; height: calc(var(--bys-top) + 2px);
    background: var(--sp-bg); pointer-events: none;
  }
  .bys-slot { min-width: 46px; }
  .bys-slotrow--static .bys-slot { min-width: 30px; }

  /* last grid row so bottom-stickiness holds for the whole builder,
     then settles once the palette runs out */
  .bys-cta {
    order: 1;
    position: sticky; bottom: 0; z-index: 7;
    background: linear-gradient(to top, var(--sp-bg) 58%, rgba(253, 244, 234, 0));
    padding: var(--sp-4) 0 var(--sp-3);
  }

  .bys-stage__collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 440ms var(--sp-ease-out); }
  .bys-stage.is-open .bys-stage__collapse { grid-template-rows: 1fr; }
  .bys-stage__collapse > * { overflow: hidden; min-height: 0; }
  .bys-stage__collapse .bys-stage__inner { display: grid; gap: var(--sp-3); }
  .bys-stage.is-open .bys-stage__collapse .bys-stage__inner { padding-top: var(--sp-1); }

  .bys-more {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    width: 100%; appearance: none; cursor: pointer; font: inherit;
    background: var(--sp-paper); border: 1px solid var(--sp-line-soft);
    border-radius: var(--sp-r-pill); padding: 10px 16px; color: var(--sp-fg);
    box-shadow: var(--sp-shadow-1);
  }
  .bys-more b { font-family: var(--sp-font-display); font-size: var(--sp-t-lg); font-weight: 400; }
  .bys-more__chev { transition: transform 320ms var(--sp-spring); display: block; flex: 0 0 auto; }
  .bys-stage.is-open .bys-more__chev { transform: rotate(180deg); }
}
@media (min-width: 1040px) {
  .bys-stage__collapse > * { overflow: visible; }
  .bys-stage__collapse .bys-stage__inner { display: grid; gap: var(--sp-4); }
}

/* =============================================================
   6. PALETTE
   ============================================================= */
.bys-palette { display: grid; gap: var(--sp-4); }
.bys-toolbar { display: grid; gap: var(--sp-3); }
.bys-toolrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bys-toolrow__label {
  font-size: var(--sp-t-xs); text-transform: uppercase; letter-spacing: var(--sp-track-wide);
  color: var(--sp-muted); font-weight: 600;
}

.bys-pill {
  appearance: none; font: inherit; font-size: var(--sp-t-sm); font-weight: 500;
  padding: 7px 14px; border-radius: var(--sp-r-pill);
  border: 1px solid var(--sp-line); background: var(--sp-paper); color: var(--sp-ink-2);
  cursor: pointer;
  transition: transform 200ms var(--sp-spring), border-color 200ms var(--sp-ease),
              background-color 200ms var(--sp-ease), color 200ms var(--sp-ease);
}
.bys-pill:hover { transform: translateY(-1px); border-color: var(--sp-ink); }
.bys-pill[aria-pressed="true"], .bys-pill.is-active {
  background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-cream);
}
.bys-pill:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 2px; }

.bys-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
}
@media (min-width: 520px) { .bys-grid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); } }

.bys-chip {
  position: relative; appearance: none; font: inherit; cursor: pointer;
  display: grid; gap: 6px; justify-items: center;
  padding: var(--sp-3) 8px 10px;
  background: var(--sp-paper); color: var(--sp-fg);
  border: 1px solid var(--sp-line-soft); border-radius: var(--sp-r-md);
  transition: transform 280ms var(--sp-spring), box-shadow 240ms var(--sp-ease),
              border-color 200ms var(--sp-ease), background-color 200ms var(--sp-ease);
}
.bys-chip:hover { transform: translateY(-3px); border-color: var(--sp-line); box-shadow: var(--sp-shadow-2); }
.bys-chip:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 3px; }
.bys-chip[aria-pressed="true"] {
  border-color: var(--sp-ink); background: var(--sp-cream);
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--sp-lilac-soft), var(--sp-shadow-2);
}
.bys-chip[aria-pressed="true"]:hover { transform: translateY(-6px); }

.bys-chip__art { width: 100%; max-width: 60px; }
.bys-chip__art svg { display: block; width: 100%; height: auto; }
.bys-chip__name { font-size: var(--sp-t-sm); font-weight: 600; line-height: 1.2; text-align: center; }
.bys-chip__meta { font-size: 11px; color: var(--sp-muted); letter-spacing: .04em; }

.bys-chip__pos {
  position: absolute; top: -9px; right: -7px;
  min-width: 25px; height: 25px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--sp-r-pill); border: 2px solid var(--sp-ink);
  background: var(--sp-coral); color: var(--sp-ink);
  font-family: var(--sp-font-display); font-size: 13px; line-height: 1;
  opacity: 0; transform: scale(.4);
  transition: opacity 200ms var(--sp-ease), transform 320ms var(--sp-spring);
  pointer-events: none;
}
.bys-chip[aria-pressed="true"] .bys-chip__pos { opacity: 1; transform: scale(1); }

.bys-chip__tick {
  position: absolute; left: 8px; top: 8px; width: 20px; height: 20px;
  opacity: 0; transform: scale(.4) rotate(-25deg);
  transition: opacity 180ms var(--sp-ease) 60ms, transform 340ms var(--sp-spring) 60ms;
  pointer-events: none;
}
.bys-chip[aria-pressed="true"] .bys-chip__tick { opacity: 1; transform: none; }

.bys-chip.is-flash { animation: bysFlash 520ms var(--sp-ease); }
@keyframes bysFlash {
  0% { box-shadow: 0 0 0 0 var(--sp-lilac), var(--sp-shadow-2); }
  40% { box-shadow: 0 0 0 12px rgba(155, 132, 201, 0), var(--sp-shadow-2); }
  100% { box-shadow: 0 0 0 3px var(--sp-lilac-soft), var(--sp-shadow-2); }
}

.bys-grid__empty { grid-column: 1 / -1; padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--sp-muted); }

.bys-setchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bys-setchip {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: var(--sp-r-pill);
  border: 1px solid var(--sp-line); background: var(--sp-paper); color: var(--sp-fg);
  font-size: var(--sp-t-sm); font-weight: 600;
  transition: transform 200ms var(--sp-spring), border-color 200ms var(--sp-ease), box-shadow 200ms var(--sp-ease);
}
.bys-setchip:hover { transform: translateY(-2px); border-color: var(--sp-ink); box-shadow: var(--sp-shadow-1); }
.bys-setchip:focus-visible { outline: 3px solid var(--sp-lilac-deep); outline-offset: 2px; }
.bys-setchip__dots { display: flex; }
.bys-setchip__dots i {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--sp-paper); margin-left: -5px;
}
.bys-setchip__dots i:first-child { margin-left: 0; }

/* =============================================================
   7. ADD-ONS
   ============================================================= */
.bys-addons { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bys-addon {
  display: grid; gap: 6px; padding: var(--sp-4); align-content: start;
  border: 1px solid var(--sp-line-soft); border-radius: var(--sp-r-md); background: var(--sp-paper);
  transition: transform 260ms var(--sp-spring), box-shadow 260ms var(--sp-ease);
}
.bys-addon:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-2); }
.bys-addon__name { font-weight: 600; }
.bys-addon__price { font-family: var(--sp-font-display); font-size: var(--sp-t-lg); }
.bys-addon__blurb { font-size: var(--sp-t-sm); color: var(--sp-ink-2); }
.bys-addon button { justify-self: start; margin-top: 4px; }

/* photo + facts split (in-the-box panel, shade "putting it on") */
.bys-inbox { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 760px) { .bys-inbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); } }

.bys-speclist { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.bys-speclist li {
  position: relative; padding-left: 26px; font-size: var(--sp-t-sm); color: var(--sp-ink-2);
}
.bys-speclist li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2.5px solid var(--sp-coral);
  border-bottom: 2.5px solid var(--sp-coral); transform: rotate(-45deg);
  border-radius: 1px;
}

/* =============================================================
   8. SETS PAGE
   -------------------------------------------------------------
   Browse-and-compare, not a slideshow. One grid, eight cards, one
   card anatomy: colour spine, five named nails in five fixed
   columns, name, one line, price, two buttons. Because every card
   is built the same way, two sets can be read against each other
   without opening either.
   ============================================================= */

/* ---- hero: short on purpose ---- */
.bys-sethero { display: grid; gap: var(--sp-5); align-items: center; }
.bys-sethero > * { min-width: 0; }
/* Two columns as early as a tablet. Stacked, the photo alone is most of a
   768px screen — which is the same "hero eats the viewport" problem in a
   different costume. */
@media (min-width: 700px) {
  .bys-sethero { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--sp-6); }
}
@media (min-width: 1000px) { .bys-sethero { gap: var(--sp-7); } }
.bys-sethero__copy { display: grid; justify-items: start; gap: var(--sp-3); min-width: 0; }
/* The display face runs to 108px at --sp-t-4xl. Six words at that size is a
   whole screen spent saying nothing, so: one step down, and a measure that
   breaks the line in two rather than four. */
.bys-sethero__title { font-size: var(--sp-t-3xl); max-width: 13ch; margin: 0; }
.bys-sethero__copy .lede { max-width: 50ch; margin: 0; }
.bys-sethero__copy .lede b { font-weight: 600; color: var(--sp-ink); white-space: nowrap; }
/* capped, so the photo never grows into the screen-filling hero we started
   this redesign to get rid of */
.bys-sethero__art { min-width: 0; max-width: 32rem; margin-inline: auto; width: 100%; }
.bys-sethero__art .media { box-shadow: var(--sp-shadow-2); }
/* stacked on a phone the photo is the tallest thing on the screen; letterbox
   it so the filter chips still land above the fold */
@media (max-width: 699px) { .bys-sethero__art .media { aspect-ratio: 16 / 9; } }

.bys-setfacts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-1) 0 0; padding: 0; list-style: none;
  font-size: var(--sp-t-sm); font-weight: 500; color: var(--sp-ink-2);
}
.bys-setfacts li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bys-setfacts li::before {
  content: ''; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sp-coral);
}

/* ---- filter bar ---- */
.bys-setbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3) var(--sp-5);
}
.bys-setbar__title { margin: 0; min-width: 0; }
.bys-setfilter { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
/* the shared chip is 36px tall; a phone wants 40+ */
.bys-setfilter .chip { min-height: 42px; }
.bys-setfilter .chip[aria-pressed="true"] { box-shadow: var(--sp-shadow-1); }
.bys-setcount { margin: 0; }

/* ---- the grid ----
   Column count is set by the five shade names, not by taste: below ~56px a
   column can no longer hold "Rosewater" on one line, and a card whose
   swatches read "Rosewa / ter" has stopped selling anything. That puts the
   ceiling at three columns — four would need a 1600px measure we never get. */
.bys-setgrid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}
.bys-setgrid > * { min-width: 0; }
@media (min-width: 800px) {
  .bys-setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .bys-setgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- one card ---- */
.bys-setcard {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  scroll-margin-top: calc(var(--bys-top) + 16px);
  background: var(--sp-paper);
  border: 1px solid var(--sp-line-soft);
  border-radius: var(--sp-r-lg);
  overflow: hidden;
  box-shadow: var(--sp-shadow-1);
  transition: transform 300ms var(--sp-ease), box-shadow 300ms var(--sp-ease),
              border-color 300ms var(--sp-ease);
}
.bys-setcard:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-2); }
.bys-setcard:focus-within { box-shadow: var(--sp-shadow-2); border-color: var(--sp-lilac-soft); }
.bys-setcard.is-sent { animation: bysSent 600ms var(--sp-spring) both; }

/* index.html deep-links sets.html#<setid>; the card's own id is set-<setid> */
.bys-anchor { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; }

/* the colour spine — the palette, readable from across the room */
.bys-setcard__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 7px; }
.bys-setcard__rail i { display: block; height: 100%; }

.bys-setcard__swatch {
  padding: var(--sp-4) clamp(8px, 2.2vw, 16px) var(--sp-3);
  border-bottom: 1px solid var(--sp-line-soft);
  background-color: var(--sp-cream);
  background-repeat: no-repeat;
  min-width: 0;
}
/* five fixed columns, so column 3 of one card lines up with column 3 of the
   next — the thing that makes eight boxes comparable rather than eight blobs */
.bys-setcard__nails {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(3px, 1.1vw, 12px);
  margin: 0 auto; padding: 0; list-style: none;
  max-width: 34rem;                 /* one wide card must not spread the five */
}
.bys-setcard__nail { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.bys-setcard__art { display: block; width: 100%; max-width: 96px; }
.bys-setcard__art svg { display: block; width: 100%; height: auto; }
/* a swatch nobody can name is not a product. Two lines are reserved so the
   row of nails keeps one baseline even if a name does have to break. */
.bys-setcard__shade {
  min-width: 0; min-height: 2.5em; text-align: center;
  font-size: 11px; letter-spacing: -0.012em;
  font-weight: 600; line-height: 1.25; color: var(--sp-ink-2);
  overflow-wrap: break-word; hyphens: auto;
}

.bys-setcard__body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  min-width: 0;
}
.bys-setcard__title {
  margin: 0; font-family: var(--sp-font-display); font-weight: 700;
  font-size: clamp(1.32rem, 1.15rem + 0.5vw, 1.62rem);
  line-height: 1.05; letter-spacing: -0.005em;
}
.bys-setcard__tag {
  margin: 0; max-width: 42ch; font-size: var(--sp-t-sm); line-height: 1.5;
  color: var(--sp-ink-2); text-wrap: pretty;
}
.bys-setcard__price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px var(--sp-2); margin: var(--sp-1) 0 0;
}
.bys-setcard__price b {
  font-family: var(--sp-font-display); font-weight: 700;
  font-size: var(--sp-t-xl); line-height: 1;
}
.bys-setcard__price s { font-size: var(--sp-t-sm); }
.bys-setcard__save {
  padding: 3px 9px; border-radius: var(--sp-r-pill);
  background: var(--sp-lilac-wash); color: var(--sp-lilac-deep);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.bys-setcard__pens { margin: 0; font-size: var(--sp-t-xs); color: var(--sp-muted); }

/* the long story, folded away — it is worth reading, it is not worth
   eight paragraphs of it between you and the next card */
.bys-setcard__more { margin: 2px 0 0; }
.bys-setcard__more > summary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 4px 0; cursor: pointer; list-style: none;
  font-size: var(--sp-t-sm); font-weight: 600; color: var(--sp-lilac-deep);
}
.bys-setcard__more > summary::-webkit-details-marker { display: none; }
.bys-setcard__more > summary::marker { content: ''; }
.bys-setcard__more > summary::after {
  content: ''; flex: none; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms var(--sp-ease);
}
.bys-setcard__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.bys-setcard__more > summary:hover { color: var(--sp-ink); }
.bys-setcard__more > summary:focus-visible {
  outline: 3px solid var(--sp-lilac-deep); outline-offset: 3px; border-radius: 6px;
}
.bys-setcard__more p {
  margin: var(--sp-2) 0 0; max-width: 56ch; font-size: var(--sp-t-sm);
  line-height: 1.6; color: var(--sp-ink-2);
}

.bys-setcard__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-3);
}
.bys-setcard__actions .btn { flex: 1 1 8rem; min-width: 0; max-width: 15rem; }

@media (prefers-reduced-motion: reduce) {
  .bys-setcard:hover { transform: none; }
  .bys-setcard.is-sent { animation: none; }
}

/* =============================================================
   9. SHADE PAGE
   ============================================================= */
.bys-shadehero { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 880px) { .bys-shadehero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-7); } }
.bys-shadehero__art {
  position: relative;
  background: linear-gradient(160deg, var(--sp-cream) 0%, var(--sp-cream-2) 100%);
  border-radius: var(--sp-r-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  box-shadow: var(--sp-shadow-1);
}
.bys-shadehero__pen { display: grid; place-items: center; }
.bys-shadehero__pen svg { display: block; max-height: 240px; width: auto; }
@media (max-width: 520px) { .bys-shadehero__pen svg { max-height: 180px; } }
.bys-shadehero__no {
  position: absolute; top: 6px; left: var(--sp-4);
  font-family: var(--sp-font-display); font-size: var(--sp-t-3xl); line-height: 1;
  color: var(--sp-ink); opacity: .12; pointer-events: none;
}
.bys-shadehero__body { display: grid; gap: var(--sp-3); align-content: start; }
.bys-shadehero__title { font-family: var(--sp-font-display); font-size: var(--sp-t-3xl); line-height: 1; margin: 0; }
.bys-shadehero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.bys-facts { display: grid; gap: 0; margin: 0; padding: 0; }
.bys-facts div {
  display: grid; grid-template-columns: 86px 1fr; gap: var(--sp-3);
  font-size: var(--sp-t-sm); padding: 10px 0; border-top: 1px solid var(--sp-line-soft);
}
.bys-facts dt { color: var(--sp-muted); }
.bys-facts dd { margin: 0; }

.bys-pairs { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bys-pair {
  display: grid; justify-items: center; gap: 6px; width: 92px;
  padding: var(--sp-3) 6px 10px; text-decoration: none; color: var(--sp-fg);
  border: 1px solid var(--sp-line-soft); border-radius: var(--sp-r-md); background: var(--sp-paper);
  transition: transform 280ms var(--sp-spring), border-color 200ms var(--sp-ease), box-shadow 200ms var(--sp-ease);
}
.bys-pair:hover { transform: translateY(-4px); border-color: var(--sp-line); box-shadow: var(--sp-shadow-2); }
.bys-pair svg { display: block; width: 46px; height: auto; }
.bys-pair span { font-size: var(--sp-t-xs); font-weight: 600; }

.bys-reviews { display: grid; gap: var(--sp-3); }
.bys-review {
  border: 1px solid var(--sp-line-soft); border-radius: var(--sp-r-md);
  padding: var(--sp-4); background: var(--sp-paper); display: grid; gap: 8px;
}
.bys-review__head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.bys-review__who { font-weight: 600; font-size: var(--sp-t-sm); }
.bys-review__when { font-size: var(--sp-t-xs); color: var(--sp-muted); }
.bys-review__title { font-weight: 600; margin: 0; }
.bys-review__body { font-size: var(--sp-t-sm); color: var(--sp-ink-2); margin: 0; }
.bys-stars { letter-spacing: 2px; color: var(--sp-coral-deep); font-size: var(--sp-t-sm); }
.bys-ratingsum { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--sp-t-sm); }

.bys-prevnext { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bys-prevnext a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sp-fg);
  border: 1px solid var(--sp-line-soft); border-radius: var(--sp-r-pill); padding: 8px 16px;
  font-size: var(--sp-t-sm); font-weight: 600; background: var(--sp-paper);
  transition: transform 200ms var(--sp-spring), border-color 200ms var(--sp-ease);
}
.bys-prevnext a:hover { transform: translateY(-2px); border-color: var(--sp-ink); }
.bys-prevnext i { width: 16px; height: 20px; border-radius: 8px 8px 6px 6px; display: block; }

/* =============================================================
   10. Staggered entrance
   Uses the independent `translate` property so it never fights the
   `transform` used for selected/hover states.
   ============================================================= */
.bys-in { opacity: 0; translate: 0 14px; }
.bys-in.is-in {
  opacity: 1; translate: 0 0;
  transition: opacity 460ms var(--sp-ease-out) var(--bys-d, 0ms),
              translate 600ms var(--sp-ease-out) var(--bys-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .bys-in { opacity: 1; translate: none; }
  .bys-slot.is-new { animation: none; }
}