/* ColorSkein — canonical brand tokens.
 * Single source of truth for colors, typography, and radius.
 * Loaded by both index.html (desktop) and mobile.html BEFORE their own stylesheets.
 * Desktop's inline <style> loads after this file and re-declares the same values,
 * so desktop appearance is completely unchanged.
 * Mobile loads mobile.css after this file and reads these variables directly.
 */

:root {
  /* ── Color palette ─────────────────────────────────────────────────── */
  --bg:        #FFF8F1;
  --white:     #FFFFFF;
  --text:      #33292B;
  /* Brand body-copy grey (guidelines use #5A5052 for readable secondary text;
     #9A8E86 is caption-only there and fails contrast for body text). Changed
     r33 so mobile + about/contact/legal match desktop's readability. */
  --muted:     #5A5052;
  --border:    #F3EBE2;
  --purple:    #ED7172;
  --purple-dk: #C2484A;
  --purple-lt: #FDEBE5;
  --stitch:    #33292B;
  --hue:       #F2A94D;
  --teal:      #58BDBD;
  --fern:      #5DA67B;
  --good:      #2F6B4F;

  /* ── Shape + depth ─────────────────────────────────────────────────── */
  --radius: 12px;
  --shadow: 0 1px 3px rgba(51,41,43,.06), 0 4px 14px rgba(51,41,43,.08);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-sans:    'Nunito', system-ui, sans-serif;
  --font-display: 'Fredoka', Georgia, sans-serif;
}

.build-stamp {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

/* Shared palette color bar — both desktop and mobile palette cards.
 * Height is set per-context (desktop inline style block / mobile.css).
 * Card container overflow:hidden clips outer corners — no radius here. */
.palette-bar { display: flex; width: 100%; }
.palette-bar-stripe { flex: 1 1 0; min-width: 0; height: 100%; position: relative; overflow: hidden; }
/* r35: manufacturer yarn photo over the hex — center-cropped to fill the stripe.
   The hex background beneath is the instant paint and the automatic fallback
   (no image / failed load → stripe is the classic hex chip). */
.palette-bar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Ball shots (r38): full-skein photos carry a white label dead center. An <img>
   with object-fit:cover pre-crops the left yarn arc away on narrow stripes, so
   ball images render as stripe BACKGROUNDS positioned into the left arc — pure
   yarn, no label. The hex background-color stays underneath as the fallback
   (background image is only set after a successful preload). */
.palette-bar-stripe--ball {
  background-repeat: no-repeat;
  background-size: 580% auto;
  background-position: 15% 50%;
}
/* Small-framed ball shots (r50 — Premier Charlotte): the ball spans only the
   center ~56% of the frame, so the standard --ball window lands on white
   margin. Tighter window aimed at its left yarn arc. */
.palette-bar-stripe--ball-sm {
  background-repeat: no-repeat;
  background-size: 1250% auto;
  background-position: 31% 50%;
}
/* Upright skein shots (r40 — Hobbii): horizontal label band across the middle,
   yarn dome on top — window aimed top-center. Sized by HEIGHT (r52): a
   width-based size made the visible vertical window depend on stripe width,
   so the r48 default bump 3→6 colors (narrower stripes) slid the window down
   into the label band. auto 320% shows rows ~7%–38% of the photo (label
   starts ~39%) at ANY stripe width / color count. */
.palette-bar-stripe--skein {
  background-repeat: no-repeat;
  background-size: auto 320%;
  background-position: 50% 10%;
}

/* ── One-tap touch targets (r121) — iOS Safari + the IG/Pinterest in-app
 * browsers hold back a single tap to check for a double-tap-zoom, which read
 * as "tap Add twice before it works" on phones. touch-action: manipulation
 * disables that heuristic on interactive elements only (pinch-zoom on the
 * page still works). Mouse users see no change.                              */
a, button { touch-action: manipulation; }

/* ── Shared "quiet Add" button — visual only; sizing stays per-page ──────── *
 * Both .palette-card-add (desktop) and .btn-add (mobile) use these rules.
 * Defined here so one change covers both UIs and they can never drift.       */
.palette-card-add,
.btn-add {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--muted);
}
.palette-card-add.pc-in-cart,
.btn-add.btn-add--on {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
/* Hover feedback is mouse-only (r121): on touch, iOS spends the first tap
 * applying :hover — gating on (hover: hover) keeps taps one-tap and stops
 * the button sticking in its hover color after a tap.                        */
@media (hover: hover) {
  .palette-card-add:hover:not(.pc-in-cart),
  .btn-add:hover:not(.btn-add--on) {
    border-color: var(--purple); color: var(--purple); background: var(--purple-lt);
  }
  .palette-card-add.pc-in-cart:hover,
  .btn-add.btn-add--on:hover {
    background: var(--purple-dk); border-color: var(--purple-dk);
  }
}


/* ── Mobile nav drawer accordion (r34) — shared by mobile.html + about/contact/legal.
   Desktop pages never render these classes. ─────────────────────────────── */
/* Accordion nav (r33/r34) — About / Palettes / Skein / Contact, desktop structure */
.nav-acc { padding: 4px 0 20px; overflow-y: auto; }
.nav-acc-cat-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--text); text-align: left;
  border-bottom: 1px solid var(--border);
}
.nav-acc-cat-btn[aria-expanded="true"] { color: var(--purple); }
.nav-acc-arrow { font-size: 11px; color: var(--muted); transition: transform .18s; }
.nav-acc-cat-btn[aria-expanded="true"] .nav-acc-arrow { transform: rotate(90deg); }
.nav-acc-panel { border-bottom: 1px solid var(--border); background: var(--bg); }
.nav-acc-panel[hidden] { display: none; }
.nav-acc-link {
  display: block; padding: 13px 24px; font-size: 15px; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.nav-acc-link:active { color: var(--purple); }
.nav-sub-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 24px; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text); text-align: left;
}
.nav-sub-btn[aria-expanded="true"] { color: var(--purple); }
.nav-sub-panel { padding: 0 12px 8px; }
.nav-sub-panel[hidden] { display: none; }

/* Drawer option rows — same look as desktop's Skein fly-out rows */
.skein-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  transition: background .12s, color .12s; user-select: none;
}
.skein-row:active { background: #ebebeb; -webkit-tap-highlight-color: transparent; }
.skein-row.active { background: var(--purple-lt); color: var(--purple-dk); }
.skein-row.unavailable { opacity: .3; pointer-events: none; }
.skein-radio {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #ccc; flex-shrink: 0; box-sizing: border-box;
}
.skein-row.active .skein-radio {
  border-color: var(--purple); background: var(--purple);
  box-shadow: inset 0 0 0 3px var(--purple-lt);
}
.skein-row-label { font-size: 14px; line-height: 1.35; flex: 1; }
.skein-row-count { display: block; font-size: 12px; color: var(--muted); }
.skein-row.active .skein-row-count { color: var(--purple); opacity: .7; }