/* The shop's pages (M07 #5). Phone width first. The storefront's colours arrive as these variables (D-266); the
   values here are the placeholders until Rhys's shop details are in (FILE, D-275). System fonts for the page itself;
   the pictures' type is the renderer's self-hosted pack (D-004). */
:root {
  --ink: #2b2b2b;
  --paper: #f6f5f2;
  --accent: #5a5a5a;
  --accent-ink: #ffffff;
  --muted: color-mix(in srgb, var(--ink) 60%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --gap: 1rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
header, main, footer { max-width: 48rem; margin: 0 auto; padding: 0 var(--gap); }
header { padding-top: var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.home { text-decoration: none; display: inline-block; }
.name { font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.logo { max-height: 2.5rem; width: auto; }
h1 { font-size: 1.5rem; line-height: 1.2; margin: 1.25rem 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1rem 0 .5rem; }
footer { margin-top: 2rem; padding-top: var(--gap); padding-bottom: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.notice { padding: .75rem; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border-radius: 6px; }
button, .button { font: inherit; padding: .65rem 1.1rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary, .button { background: var(--accent); color: var(--accent-ink); }
button:disabled { opacity: .5; cursor: default; }
.search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.search label { flex-basis: 100%; }
.search input { flex: 1 1 12rem; min-width: 0; font: inherit; padding: .6rem; border: 1px solid var(--line); border-radius: 6px; }
.wins, .pictures, .cannot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); }
.win { display: grid; gap: .25rem; text-decoration: none; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.race { font-weight: 600; margin: 0; }
.when { color: var(--muted); font-size: .9rem; margin: 0; }
.pages { display: flex; justify-content: space-between; margin: var(--gap) 0; }
.picture { display: grid; gap: .5rem; }
/* A picture not loaded yet (win.js) keeps its place at the column's width, never its own 800 px. */
.pictures { grid-template-columns: minmax(0, 1fr); }
.picture img[data-src] { width: 100%; aspect-ratio: 800 / 504; background: var(--line); }
.cannot li { color: var(--muted); }
.box { border: 1px solid var(--line); border-radius: 8px; padding: .5rem var(--gap) var(--gap); margin: var(--gap) 0; background: #fff; position: relative; }
.box .change { position: absolute; top: .75rem; right: var(--gap); font-size: .9rem; }
.box .value { margin: 0; }
.box h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.question, .hint { color: var(--muted); margin: .25rem 0; }
.choices { display: grid; gap: .5rem; margin: .5rem 0; }
.choice { display: flex; gap: .5rem; align-items: baseline; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.choice.unavailable { color: var(--muted); }
.slot { margin: .75rem 0; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.thumb { padding: 0; border: 3px solid transparent; border-radius: 6px; background: none; }
.thumb[aria-pressed="true"] { border-color: var(--accent); }
textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.preview { margin: var(--gap) 0; }
.preview { container-type: inline-size; }
/* The moulding (D-067, D-259): its face a share of the frame's whole width (--face = faceMm / (trim + 2 × faceMm)), its
   9-slice overlay, else its flat colour. Set by the page for the first frame and by the builder after. */
.frame { box-sizing: border-box; background: #fff; border-style: solid; border-width: calc(var(--face, 0) * 100cqw);
  border-color: var(--moulding-colour, transparent); border-image-source: var(--moulding-src, none);
  border-image-slice: var(--moulding-slice, 0); border-image-repeat: stretch; }
.live svg { display: block; width: 100%; height: auto; -webkit-font-smoothing: antialiased; }
.live[hidden], .preview img[hidden] { display: none; }
.preview img[data-stale="true"] { opacity: .45; }
.preview img:not([src]) { display: none; }
.actions { display: flex; gap: .5rem; margin-top: .5rem; }
#status { min-height: 1.5rem; margin: .5rem 0 0; }
@media (min-width: 40rem) { .wins { grid-template-columns: repeat(2, 1fr); } }
/* The cart (D-348): each line's picture beside its words; the header's Cart link to the right of the shop's name. */
header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.cart-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.cart-line { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cart-line p { margin: 0 0 .25rem; }
.cart-line .problem { color: #b3261e; }
.total { font-weight: 600; font-size: 1.1rem; }
button.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 420px) { .cart-line { grid-template-columns: 110px minmax(0, 1fr); } .cart-line img { width: 110px; height: auto; } }
/* What a preview leaves out for being too long (I-7): a small line each, under the picture, never on it. */
.too-long { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--muted, #666); }
.too-long[hidden] { display: none; }