/*
 * The brand shell — everything both products share.
 *
 * Tokens read off References/UI Inspo.jpg and UI Inspo2.jpg — sampled, not guessed.
 * Both references do the same three things: a coloured outer field with an inset rounded
 * sheet on it; every image seated on its own colour tile rather than on the page; one dark
 * and one hot colour repeated everywhere with the rest as tints.
 *
 * This file moved out of painted.css when the map product arrived. The split is by
 * OWNERSHIP, not by convenience: anything a second product would have had to copy lives
 * here, and anything only one product can use stays in that product's stylesheet. Which is
 * why the size chips, the cart and the paint-green pill are here, and the poster stage and
 * the brush wipe are not.
 */
:root {
  /* palette */
  --field:   #F2C9C0;  /* Inspo 1 blush — the page ground */
  --sheet:   #FBF3E4;  /* Inspo 2 cream — the working surface */
  --sheet-2: #F4E9D4;  /* nested panels and wells */
  --forest:  #1F472F;  /* Inspo 1's most-used colour */
  --forest-2:#17381F;  /* the same green, pressed */
  --tomato:  #CF453A;  /* Inspo 2 accent */
  --sky:     #ADCAD8;
  --butter:  #FFD880;
  --ink:     #2A2A28;
  --muted:   #7A6E60;
  --rule:    #E4D6C4;

  /* space, 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;

  /* radii */
  --r-pill: 999px; --r-panel: 22px; --r-tile: 16px; --r-chip: 12px; --r-input: 14px;
}

@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Bricolage'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Bricolage'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}
/* The face the posters are lettered in, so the button's hover label is the same hand.
   Trial licence — local testing only, see assets/fonts/belmonte-cursive/font.json. */
@font-face {
  font-family: 'Belmonte'; font-style: normal; font-weight: 400; font-display: block;
  src: url('/fonts/belmonte.otf') format('opentype');
}
/*
 * The static cuts the map poster's type block is set in — the SAME files resvg rasterises
 * for the print, so the block on screen and the block on paper are one drawing. See
 * assets/fonts/bricolage/font.json for why these are static and not the variable file.
 */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/bricolage-light.ttf') format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/bricolage-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/bricolage-bold.ttf') format('truetype');
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: 15px/1.5 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }

/* the inset sheet — the move both references share */
.page { max-width: 1240px; margin: 0 auto; padding: var(--s3); }
.sheet { background: var(--sheet); border-radius: var(--r-panel); padding: var(--s4); }
@media (min-width: 900px) {
  .page { padding: var(--s6); }
  .sheet { padding: var(--s8) var(--s8) var(--s12); border-radius: 26px; }
}

/* type roles */
.display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; text-transform: lowercase; }
.lede { font-size: 26px; line-height: 1.15; margin: 0 0 var(--s6); }
@media (min-width: 900px) { .lede { font-size: 34px; } }
.micro {
  display: block; font-size: 11px; line-height: 1.2; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: var(--s2);
}
.eyebrow {
  margin: 0 0 var(--s2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--tomato);
}
.subline { margin: calc(var(--s6) * -1 + var(--s1)) 0 var(--s6); color: var(--muted); font-size: 15px; }
.section-title { font-size: 24px; margin: 0 0 var(--s6); }
@media (min-width: 900px) { .section-title { font-size: 30px; } }

/* ── furniture ───────────────────────────────────────────────────────────── */
.announce {
  margin: 0; padding: 9px var(--s4); text-align: center; background: var(--forest);
  /* caps, and tracked a little wider for them — the copy stays lowercase in the markup so
     the two places it is compared against still read as written */
  color: var(--sheet); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.mark {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: -0.03em;
  color: var(--forest); text-decoration: none;
}
.nav { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.nav a {
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--forest);
  border: 1px solid transparent; border-radius: var(--r-pill); padding: 7px 14px;
}
.nav a:hover { background: var(--sheet-2); }
.nav a[aria-current="page"] { background: var(--sheet-2); border-color: var(--rule); }
.nav a#cart-link { background: var(--sheet-2); border-color: var(--rule); }
.nav a#cart-link:hover { background: var(--butter); border-color: var(--butter); }

.foot {
  margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--rule);
  display: grid; gap: var(--s3);
}
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot-links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--forest); text-decoration: underline; }
.foot-links a[aria-disabled="true"] { opacity: .55; }
.foot-note { margin: 0; font-size: 13px; color: var(--muted); }

/* ── the two-column product frame, shared by both products ───────────────── */
.product { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
/*
 * A grid item's min-width is `auto`, which is its min-content — so one wide child sets the
 * column's width and pushes the whole page sideways. The map product's five tabs did
 * exactly that on a 390px screen: the row scrolls internally, but its min-content still
 * stretched the column to 417px. Items that are allowed to shrink can scroll instead.
 */
.product > * { min-width: 0; }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr); gap: var(--s8); align-items: start; }
}
.controls { background: var(--sheet-2); border-radius: var(--r-panel); padding: var(--s6); }
@media (min-width: 900px) { .controls { padding: var(--s8); } }
.field { border: 0; padding: 0; margin: 0 0 var(--s6); }
textarea, input[type="text"], input[type="search"] {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.35;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-input);
  background: var(--sheet); color: var(--ink);
}
textarea { font-size: 18px; resize: vertical; }
.product-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0 var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--rule);
}
.product-name { margin: 0; font-size: 17px; font-weight: 600; }
.product-price { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* size chips — one list, one look, both products */
/* ── material, then that material's sizes ─────────────────────────────────
   Two chips side by side, each naming the material and what it is. The row of sizes under
   them is the same `.size` chip it always was — switching material swaps which list is
   shown, so the sizes keep their own idiom and only the thing above them is new. */
.materials {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3);
}
.material {
  display: grid; gap: 2px; cursor: pointer; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-chip); padding: 12px 14px;
}
.material:has(input:checked) { background: var(--forest); border-color: var(--forest); color: var(--sheet); }
/* the input is the state, not the decoration — the whole chip reads as selected instead */
.material input { position: absolute; opacity: 0; pointer-events: none; }
.material-name { font-weight: 600; }
.material-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.material-from { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.material:has(input:checked) .material-note,
.material:has(input:checked) .material-from { color: var(--butter); }
/* a chip is a label wrapping a visually-hidden radio, so the focus ring has to be asked for */
.material:has(input:focus-visible) { outline: 2px solid var(--tomato); outline-offset: 2px; }

/* a material this product cannot be had in yet: shown, so it is known to exist, but not pickable */
.material[data-soon] { cursor: not-allowed; background: transparent; border-style: dashed; }
.material[data-soon] .material-name { color: var(--muted); }
.material[data-soon] .material-from { color: var(--tomato); font-weight: 600; }

/* the second step's label, which carries the cm/in switch the sizes are written in */
.sizehead-sub { margin: var(--s3) 0 var(--s2); }

@media (max-width: 420px) { .materials { grid-template-columns: 1fr; } }

.sizes { display: grid; gap: var(--s2); }
.size {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-chip); padding: 12px 14px;
}
.size:has(input:checked) { background: var(--forest); border-color: var(--forest); color: var(--sheet); }
.size:has(input:checked) .size-price { color: var(--butter); }
.size input { accent-color: var(--tomato); margin: 0; }
.size-label { flex: 1; }
.size-price { color: var(--muted); font-variant-numeric: tabular-nums; }

/* the green pill, and its quiet sibling */
.addcart {
  display: block; width: 100%; text-align: center; text-decoration: none; font: inherit;
  font-size: 15px; font-weight: 600; padding: 15px 28px; border: 0; border-radius: var(--r-pill);
  background: var(--forest); color: var(--sheet); cursor: pointer;
}
.addcart:hover { background: var(--forest-2); }
.addcart[disabled] { opacity: .5; cursor: not-allowed; }
.ghostbtn {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--sheet); color: var(--forest); border: 1px solid var(--rule);
  border-radius: var(--r-pill); padding: 9px 16px;
}
.ghostbtn:hover { background: var(--butter); border-color: var(--butter); }
.ghostbtn[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--sheet); }
.textbtn {
  border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font: inherit;
  font-size: 14px; text-decoration: underline;
}

/* ── the wall bundle, display only ─────────────────────────────────────────
   An offer, not a coupon: a contained band in a warm tint of the house butter, a lead in the
   label voice, three segments with the saving in words and the percentages in tomato. The
   segment the cart has reached is lit — a sheet-white well and a forest edge — never a flash.
   `.bundle-compact` is the same band, one row, for the /art grid. The cart's own line is
   further down and keeps its own quieter style. */
.bundle {
  --bundle-fill: color-mix(in srgb, var(--butter) 30%, var(--sheet));
  margin: var(--s4) 0 var(--s6); padding: var(--s4); border-radius: var(--r-tile);
  background: var(--bundle-fill); border: 1px solid color-mix(in srgb, var(--butter) 70%, var(--rule));
}
.bundle-lead {
  margin: 0 0 var(--s3); font-size: 11px; line-height: 1.2; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.bundle-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.bundle-tier {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--sheet) 55%, transparent); border: 1px solid transparent;
}
.bundle-n { font-size: 13px; color: var(--ink); }
.bundle-pct { font-size: 16px; font-weight: 700; color: var(--tomato); font-variant-numeric: tabular-nums; }
.bundle-tier.is-on { background: var(--sheet); border-color: var(--forest); }
.bundle-note { margin: var(--s3) 0 0; font-size: 13px; color: var(--muted); }
.bundle-status { margin: var(--s2) 0 0; font-size: 13px; font-weight: 600; color: var(--forest); }

.bundle-compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s4); margin: 0 0 var(--s6);
}
.bundle-compact .bundle-lead { margin: 0; }
.bundle-compact .bundle-tiers { display: flex; gap: var(--s2); }
.bundle-compact .bundle-tier { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; }
.bundle-compact .bundle-n { font-size: 12px; }
.bundle-compact .bundle-pct { font-size: 13px; }
.bundle-compact .bundle-note, .bundle-compact .bundle-status { margin: 0; font-size: 12px; }
@media (max-width: 599px) {
  .bundle-compact .bundle-tiers { width: 100%; }
  .bundle-compact .bundle-tier { flex: 1; flex-direction: column; gap: 0; }
}

.bundle-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: var(--s4) 0 0; padding: 9px 12px 9px 14px; border-radius: var(--r-chip);
  background: var(--sheet-2); font-size: 14px; color: var(--ink);
}
.bundle-line a { color: var(--forest); font-weight: 600; }
.bundle-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.bundle-x:hover { color: var(--ink); }

/* ── tabbed controls, shared by the map and zodiac products ──────────────── */
.stagefoot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s3);
}
.credit { margin: 0; font-size: 11px; color: var(--muted); }

/* the share confirmation */
.toast {
  position: fixed; left: 50%; bottom: var(--s6); z-index: 20;
  transform: translate(-50%, 12px); opacity: 0;
  background: var(--forest); color: var(--sheet); font-size: 14px;
  padding: 11px 18px; border-radius: var(--r-pill);
  box-shadow: 0 8px 24px -10px rgba(42, 42, 40, .7);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.up { opacity: 1; transform: translate(-50%, 0); }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s1); margin-bottom: var(--s6); padding: var(--s1);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-pill);
  /* five tabs on a 390px screen: let them scroll rather than crush the labels */
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; }
.tab input { position: absolute; opacity: 0; pointer-events: none; }
.tab span {
  display: block; text-align: center; cursor: pointer; padding: 8px 12px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
}
.tab:hover span { color: var(--ink); }
.tab:has(input:checked) span { background: var(--forest); color: var(--sheet); font-weight: 600; }
.tab:has(input:focus-visible) span { outline: 2px solid var(--tomato); outline-offset: 2px; }

.panel { display: block; }

.hint { margin: var(--s2) var(--s1) 0; font-size: 13px; color: var(--muted); }

/* ── style ───────────────────────────────────────────────────────────────── */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.swatch { display: grid; gap: var(--s2); cursor: pointer; justify-items: center; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch img {
  width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; background: var(--sheet);
  border-radius: var(--r-chip); border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(42, 42, 40, .14);
  transition: transform 120ms ease, border-color 120ms ease;
}
.swatch:hover img { transform: translateY(-2px); }
.swatch:has(input:checked) img { border-color: var(--tomato); }
.swatch:has(input:focus-visible) img { outline: 2px solid var(--tomato); outline-offset: 2px; }
.swatch-name { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.25; }
.swatch:has(input:checked) .swatch-name { color: var(--ink); font-weight: 600; }

/* ── orientation and shape ───────────────────────────────────────────────── */
.pillrow {
  display: flex; gap: var(--s1); padding: var(--s1);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-pill);
}
.pillopt { flex: 1; }
.pillopt input { position: absolute; opacity: 0; pointer-events: none; }
.pillopt span {
  display: block; text-align: center; cursor: pointer; padding: 9px 8px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted);
}
.pillopt:hover span { color: var(--ink); }
.pillopt:has(input:checked) span { background: var(--forest); color: var(--sheet); font-weight: 600; }
.pillopt:has(input:focus-visible) span { outline: 2px solid var(--tomato); outline-offset: 2px; }

/* ── the place search, shared by /maps and /starmap ────────────────────────────────────────────────────────────── */
.searchrow { display: flex; gap: var(--s2); align-items: stretch; }
.searchrow input { flex: 1; min-width: 0; }
.searchrow .ghostbtn { white-space: nowrap; }

.results {
  list-style: none; margin: var(--s2) 0 0; padding: var(--s1);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-input);
  max-height: 232px; overflow-y: auto;
}
.result {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
  border: 0; background: none; cursor: pointer; padding: 9px 10px; border-radius: var(--r-chip);
  color: var(--ink);
}
.result:hover { background: var(--butter); }

select, input[type="date"], input[type="time"] {
  width: 100%; font: inherit; font-size: 15px;
  padding: 11px 12px; border: 1px solid var(--rule); border-radius: var(--r-input);
  background: var(--sheet); color: var(--ink);
}

/* ── shared sections ─────────────────────────────────────────────────────── */
.how, .gallery, .faq { margin-top: var(--s12); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.step { background: var(--sheet-2); border-radius: var(--r-panel); padding: var(--s6); }
.step-n { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--tomato); }
.step-h { font-size: 20px; margin: var(--s2) 0 var(--s2); }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

.trust {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: center;
  margin: var(--s12) 0 0; padding: var(--s4); background: var(--sheet-2);
  border-radius: var(--r-pill); font-size: 13px; color: var(--muted); text-align: center;
}
.trust span::before { content: '· '; color: var(--tomato); }

/*
 * A question, as a component rather than a line of text on a hairline.
 *
 * Shared, so `/painted` and `/voice` get the same one — a polished list on one page and
 * bare hairlines on the next is the thing "one hand" rules out.
 *
 * Each row is a well, which is what --sheet-2 is for and what `.step` and `.controls`
 * already do. Open, it lightens to the sheet so the answer reads on the page's own paper
 * and the closed rows stay quietly behind it.
 */
.qa {
  background: var(--sheet-2); border: 1px solid transparent; border-radius: var(--r-tile);
  margin-bottom: var(--s2);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.qa:hover { border-color: var(--rule); }
.qa[open] { background: var(--sheet); border-color: var(--rule); }

.qa summary {
  cursor: pointer; font-weight: 600; font-size: 16px; line-height: 1.35;
  /* a comfortable tap target: 44px of height before the text even starts to wrap */
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); min-height: 56px;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; border-radius: var(--r-tile); }

/*
 * The affordance is a plus that becomes a minus. Drawn from two rules rather than a glyph,
 * so it is the same hairline weight as everything else on the page and needs no font.
 */
.qa-mark {
  flex: 0 0 auto; margin-left: auto; position: relative;
  width: 14px; height: 14px;
}
.qa-mark::before, .qa-mark::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--tomato); border-radius: 1px;
}
.qa-mark::before { width: 14px; height: 1.5px; }
.qa-mark::after { width: 1.5px; height: 14px; transition: transform 160ms ease; }
.qa[open] .qa-mark::after { transform: scaleY(0); }

.qa p { margin: 0; padding: 0 var(--s4) var(--s4); color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 62ch; }
@media (min-width: 760px) { .qa summary { padding: var(--s4) var(--s6); } .qa p { padding: 0 var(--s6) var(--s6); } }

@media (prefers-reduced-motion: reduce) {
  .qa, .qa-mark::after { transition: none; }
}

/* ── cart, one cart for every product ────────────────────────────────────── */
.cartpage { max-width: 660px; }
.cart-lines { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.cart-line { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.cart-thumb { border-radius: var(--r-chip); object-fit: contain; background: var(--sky); height: auto; padding: var(--s1); }
.cart-meta { flex: 1; min-width: 0; }
.cart-words { margin: 0 0 var(--s1); font-weight: 600; overflow-wrap: anywhere; }
/* the title links back to the studio with that design loaded */
.cart-words a { color: inherit; text-decoration: none; }
.cart-words a:hover { color: var(--forest); text-decoration: underline; }
.cart-kind {
  display: inline-block; margin: 0 0 var(--s1); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--tomato);
}
.cart-size { margin: 0 0 var(--s1); color: var(--muted); font-size: 14px; }
.cart-price { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.cart-foot .addcart { width: auto; }
.total { font-weight: 600; margin: 0; }
.cart-note { margin: var(--s4) 0 0; max-width: 720px; color: var(--ink); }
.cart-note[data-kind="error"] { color: #9a2b1d; }
.empty { text-align: center; color: var(--muted); padding: var(--s12) 0; }
.empty .addcart { max-width: 220px; margin: var(--s4) auto 0; }

/* accessibility floor */
:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--tomato); outline-offset: 2px; border-radius: var(--r-chip);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ── the cm / in switch ──────────────────────────────────────────────────── */
/*
 * Display only: it changes what a label says and nothing else. Sized to sit on a legend
 * beside the word "Size" without becoming the loudest thing in the panel.
 */
.sizehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.units {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-pill);
}
.unit-opt { display: block; }
.unit-opt input { position: absolute; opacity: 0; pointer-events: none; }
.unit-opt span {
  display: block; cursor: pointer; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}
.unit-opt:hover span { color: var(--ink); }
.unit-opt:has(input:checked) span { background: var(--forest); color: var(--sheet); }
.unit-opt:has(input:focus-visible) span { outline: 2px solid var(--tomato); outline-offset: 2px; }

/* the footer's copy of it */
.foot-units {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 0; font-size: 12px; color: var(--muted);
}
.foot-units-label { letter-spacing: 0.04em; }