/* Pawsterpiece v4 (2026-10-04): light e-commerce look from research-2026-10-04/02_typography_color_spec.md.
   White page, warm-grey neutrals, Lora headlines, Figtree for every shop element, one raspberry action colour. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f5f4;
  --text: #1c1917;
  --text-muted: #57534e;
  --border: #e7e5e4;
  --border-input: #78716c;
  --brand: #9d174d;
  --cta: #b0174f;
  --cta-hover: #8e1240;
  --cta-text: #ffffff;
  --ink: #1c1917;
  --on-ink: #ffffff;
  --on-ink-muted: #d6d3d1;
  --success: #15803d;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --error: #b91c1c;
  --r: 12px;
  --r-img: 8px;
  --shadow-img: 0 0 0 1px rgba(28, 25, 23, .08), 0 8px 24px rgba(28, 25, 23, .08);
  --head: 'Lora', Georgia, 'Times New Roman', serif;
  --ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --section-y: clamp(44px, 5vw, 72px);
  --wrap: 1120px;
  --gut: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--text-muted); }
.alt { background: var(--surface-alt); }
.dark { background: var(--ink); color: var(--on-ink); }
.dark .muted, .dark .lead { color: var(--on-ink-muted); }

h1, h2 { font-family: var(--head); margin: 0; text-wrap: balance; color: inherit; }
h1 { font-weight: 700; font-size: clamp(32px, 4.2vw + 15px, 52px); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-weight: 600; font-size: clamp(26px, 2.6vw + 16px, 38px); line-height: 1.2; }
h3 { font: 700 19px/1.3 var(--ui); margin: 0; }
p { margin: 0; }
.kicker { font: 600 14px/1.3 var(--ui); color: var(--brand); }
.dark .kicker { color: #f9a8c9; }
.lead { font-size: 18px; line-height: 1.5; color: var(--text-muted); }
.section { padding-block: var(--section-y); }
.section-head { max-width: 62ch; margin-bottom: 24px; }
.section-head h2 { margin-top: 6px; }
.section-head h2 + p { margin-top: 12px; }
.fine { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.dark .fine { color: var(--on-ink-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 10px; border: 0;
  font: 700 17px/1.15 var(--ui); text-decoration: none; text-align: center;
  transition: background-color .15s, box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary, .btn-gold { background: var(--cta); color: var(--cta-text); }
.btn-primary:hover, .btn-gold:hover { background: var(--cta-hover); }
.btn-secondary, .btn-ink, .btn-line { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); min-height: 48px; }
.btn-secondary:hover, .btn-ink:hover, .btn-line:hover { background: var(--surface-alt); }
.dark .btn-secondary, .dark .btn-line { background: transparent; color: var(--on-ink); box-shadow: inset 0 0 0 1.5px var(--on-ink); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.link { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- header ---------- */
.top { background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.wordmark { display: inline-flex; align-items: center; gap: 7px; font: 700 21px/1 var(--head); color: var(--text); text-decoration: none; }
.wordmark .wm-mark { width: 25px; height: 25px; flex: none; color: var(--brand); }
.wm-text { white-space: nowrap; }
.foot .wordmark .wm-mark { color: #f9a8c9; }
.top-nav { display: none; }
.top .btn { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 8px; }

/* ---------- image cards (portraits) ---------- */
.frame { position: relative; background: var(--surface); border-radius: var(--r-img); box-shadow: var(--shadow-img); overflow: hidden; }
.frame > .canvas { position: relative; overflow: hidden; background: var(--surface-alt); aspect-ratio: 3 / 4; }
.frame > .canvas img { width: 100%; height: 100%; object-fit: cover; }
.plaque { display: block; margin-top: 10px; font: 700 15px/1.3 var(--ui); color: var(--text); }
.plaque b { font-weight: 700; }
.plaque .pn { font-weight: 500; color: var(--text-muted); }

/* ---------- hero ---------- */
.hero { padding: 20px 0 40px; }
.hero-grid { display: grid; grid-template-areas: "title" "price" "art" "cta" "trust" "lead"; }
.hero-copy { display: contents; }
.hero-copy h1 { grid-area: title; margin-top: 6px; }
.hero-price { grid-area: price; margin-top: 10px; font: 600 15px/1.4 var(--ui); color: var(--text); }
.hero-art { grid-area: art; position: relative; width: 100%; max-width: 440px; margin: 20px auto 0; }
.hero-copy .lead { grid-area: lead; margin-top: 18px; max-width: 46ch; }
.hero-cta { grid-area: cta; margin-top: 22px; display: grid; gap: 10px; max-width: 440px; width: 100%; justify-self: center; }
.hero-cta .alt { justify-self: center; font: 600 15px/1.2 var(--ui); color: var(--text); padding: 6px 2px; background: none; }
.trust { grid-area: trust; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; max-width: 440px; width: 100%; justify-self: center; }
.trust li { display: flex; align-items: center; gap: 8px; font: 500 14px/1.35 var(--ui); color: var(--text); }
.trust svg { width: 20px; height: 20px; color: var(--text); flex: none; }
.hero-stage { position: relative; }
.hero-art .canvas img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hero-art .canvas img.on { opacity: 1; }
.hero-photo {
  position: absolute; left: -8px; bottom: -14px; width: 30%; z-index: 3;
  background: #fff; padding: 5px 5px 20px; border-radius: 4px; transform: rotate(-4deg);
  box-shadow: 0 10px 24px rgba(28, 25, 23, .22), 0 0 0 1px rgba(28, 25, 23, .06);
}
.hero-photo img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 2px; }
.hero-photo span { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 600 13px/1 var(--ui); color: var(--text-muted); }
.hero-art .plaque-row { text-align: center; margin-top: 12px; }
.hero-art .plaque-row .plaque { display: inline-block; margin-top: 4px; }
.style-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.style-dots button { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: 600 13px/1 var(--ui); padding: 8px 11px; border-radius: 8px; min-height: 36px; }
.style-dots button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ---------- styles grid ---------- */
.styles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 14px; }
.style-card { display: flex; flex-direction: column; }
.style-card h3 { margin-top: 12px; font-size: 17px; }
.style-card p { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.style-card .btn { margin-top: 10px; min-height: 44px; font-size: 15px; padding: 0 14px; align-self: flex-start; }

/* ---------- proof (the one ink band) ---------- */
.proof-grid { display: grid; gap: 28px; align-items: center; }
.ba { position: relative; aspect-ratio: 3 / 4; overflow: hidden; touch-action: pan-y; user-select: none; background: #111; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-top { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.ba .ba-bar { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.ba .ba-knob { position: absolute; top: 50%; left: var(--x, 50%); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); display: grid; place-items: center; pointer-events: none; }
.ba .ba-knob svg { width: 22px; height: 22px; color: var(--ink); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; touch-action: pan-y; }
.ba .ba-label { position: absolute; bottom: 10px; font: 700 13px/1 var(--ui); padding: 7px 9px; border-radius: 6px; background: rgba(28,25,23,.78); color: #fff; pointer-events: none; }
.ba .ba-label.l { left: 10px; } .ba .ba-label.r { right: 10px; }
.proof-switch { display: flex; gap: 8px; margin-top: 14px; justify-content: center; }
.proof-switch button { border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 9px 14px; min-height: 40px; background: transparent; color: var(--on-ink-muted); font: 600 14px/1 var(--ui); }
.proof-switch button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.proof-copy .lead { margin-top: 14px; }
.proof-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.proof-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.proof-points svg { width: 22px; height: 22px; color: #86efac; flex: none; margin-top: 1px; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 18px 18px 66px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 16px/1 var(--ui); }
.steps h3 { font-size: 17px; }
.steps p { margin-top: 4px; color: var(--text-muted); font-size: 15.5px; line-height: 1.5; }

/* ---------- studio ---------- */
.studio { padding-block: var(--section-y); }
.easel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 12px 32px rgba(28,25,23,.06); }
.welcome { display: none; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-alt); font-size: 15px; }
.welcome.show { display: block; }
.drop {
  position: relative; display: grid; place-items: center; text-align: center; gap: 8px;
  min-height: 240px; padding: 24px 16px; border-radius: 12px;
  border: 2px dashed var(--border-input); background: var(--surface-alt); cursor: pointer; transition: background .15s, border-color .15s;
}
.drop:hover, .drop.over { background: #fdf2f6; border-color: var(--brand); }
.drop .drop-icon { width: 48px; height: 48px; color: var(--brand); }
.drop strong { display: block; font: 700 24px/1.2 var(--head); color: var(--text); }
.drop .drop-hint { color: var(--text-muted); font-size: 15px; max-width: 34ch; }
.drop .btn { margin-top: 6px; pointer-events: none; }
.tips { margin-top: 16px; }
.tips-title { font: 700 14px/1.3 var(--ui); color: var(--text); margin: 0 0 8px; }
.tips-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.tip img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); }
.tip.ok img { outline: 2px solid var(--success); outline-offset: -2px; }
.tip span { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; font: 600 13px/1.25 var(--ui); color: var(--text); }
.tip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.tip.ok svg { color: var(--success); }
.tip.no svg { color: var(--error); }
.tips-text { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 10px 0 0; max-width: 62ch; }
.privacy-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.privacy-note svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); margin-top: 1px; }

.pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 0 10px; }
.pick-head h3 { font-size: 17px; }
.pick-head .count { font: 700 14px/1.2 var(--ui); color: var(--brand); white-space: nowrap; }
/* chips are buttons: a stretched button centres its content, so they align to the top (2026-10-07) */
.chips { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.chip { position: relative; display: flex; flex-direction: column; justify-content: flex-start; flex: 0 0 auto; width: 92px; scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; color: var(--text); }
.chip .thumb { position: relative; display: block; width: 92px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .15s; background: var(--surface-alt); }
.chip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.chip .name { display: block; margin-top: 6px; font: 700 13px/1.2 var(--ui); }
.chip .state { display: block; margin-top: 2px; font: 500 13px/1.2 var(--ui); color: var(--text-muted); }
.chip[aria-pressed="true"] .thumb { box-shadow: 0 0 0 3px var(--ink); }
.chip .badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--success); color: #fff; }
.chip .badge svg { width: 13px; height: 13px; }
.chip.done .badge { display: grid; }
.chip.busy .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 220% 100%; animation: sheen 1.6s linear infinite; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.paintings { display: grid; gap: 22px; margin-top: 6px; }
.painting { display: none; }
.painting.show { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.painting .frame { max-width: 420px; margin: 0 auto; }
.painting .canvas img.photo { filter: saturate(.75) brightness(.8) blur(1.5px); transform: scale(1.04); }
.order-item .canvas img.photo { filter: saturate(.6) brightness(.55) blur(6px); transform: scale(1.08); }
.painting .canvas .wash { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 60%); background-size: 260% 100%; animation: sheen 2.4s linear infinite; }
.painting .canvas .status { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 14px 14px; background: linear-gradient(transparent, rgba(28,25,23,.88)); }
.painting .status p { font: 700 18px/1.3 var(--ui); color: #fff; min-height: 1.3em; }
.painting .bar { height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.painting .bar span { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .6s linear; }
.painting .cap { text-align: center; }
.painting .cap small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 13.5px; }
.painting.error .status p { color: #fecaca; }
.painting.error .load .step { color: #fecaca; }
.painting .retry { margin-top: 12px; }
.ai-tag { position: absolute; top: 10px; left: 10px; z-index: 2; font: 700 13px/1 var(--ui); padding: 6px 8px; border-radius: 6px; background: rgba(28,25,23,.72); color: #fff; }

.namefield { display: none; margin-top: 18px; }
.namefield.show { display: block; }
.namefield label { display: block; font: 700 15px/1.3 var(--ui); margin-bottom: 8px; }
.namefield input { width: 100%; min-height: 50px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); padding: 0 14px; font-size: 17px; }
.namefield input::placeholder { color: #a8a29e; }

.studio-msg { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--warning-bg); color: var(--warning); font-size: 15px; display: none; }
.studio-msg.show { display: block; }

/* offer */
.offer { display: none; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.offer.show { display: block; animation: rise .45s var(--ease); }
.offer h3 { font: 700 26px/1.2 var(--head); }
.offer > p { margin-top: 6px; color: var(--text-muted); font-size: 15.5px; }
.packs { display: grid; gap: 10px; margin-top: 16px; }
.pack { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 2px 12px; align-items: center; padding: 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pack:hover { border-color: var(--border-input); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-input); display: grid; place-items: center; }
.pack .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .15s; }
.pack .pname { font: 700 17px/1.25 var(--ui); }
.pack .pdesc { grid-column: 2 / 4; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.pack .price { font: 700 24px/1 var(--ui); font-variant-numeric: tabular-nums; text-align: right; }
.pack .each { display: block; font: 500 13px/1.2 var(--ui); color: var(--text-muted); margin-top: 4px; }
.pack .ribbon { grid-column: 2 / 4; order: -1; font: 700 13px/1.2 var(--ui); color: var(--brand); }
.pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pack:has(input:checked) .dot { border-color: var(--ink); }
.pack:has(input:checked) .dot::after { transform: scale(1); }
.pack:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }

.picks { margin-top: 16px; }
.picks .pick-note { font-size: 14.5px; color: var(--text-muted); margin-bottom: 10px; }
.picklist { display: grid; gap: 8px; }
.pickrow { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; background: var(--surface); }
.pickrow img { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; }
.pickrow .pn { font: 700 15px/1.25 var(--ui); }
.pickrow .ps { display: block; font: 500 13px/1.3 var(--ui); color: var(--text-muted); margin-top: 2px; }
.pickrow .box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--border-input); display: grid; place-items: center; }
.pickrow .box svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.pickrow input { position: absolute; opacity: 0; pointer-events: none; }
.pickrow:has(input:checked) { border-color: var(--ink); }
.pickrow:has(input:checked) .box { background: var(--ink); border-color: var(--ink); }
.pickrow:has(input:checked) .box svg { opacity: 1; }
.pickrow:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.pickrow.one .box { border-radius: 50%; } /* One portrait: a radio list, a tap swaps the pick */
.picklist .pick-more { justify-self: start; min-height: 44px; padding: 0 2px; font: 600 14.5px/1.2 var(--ui); }

.summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 18px; }
.summary > span { flex: 1; min-width: 0; font: 600 15px/1.3 var(--ui); color: var(--text-muted); }
.summary .sl { display: block; }
.summary .sl.to { font-weight: 500; font-size: 13.5px; margin-top: 2px; }
.summary strong { font: 700 28px/1 var(--ui); font-variant-numeric: tabular-nums; }
.checkout-go { margin-top: 12px; }
.checkout-msg { margin: 8px 0 0; font: 600 14px/1.4 var(--ui); color: var(--error); }
.checkout-msg:empty { display: none; }
/* 2026-10-07: order page, one ZIP for everything and a visible canvas card for people who just bought */
.o-all-wrap { text-align: center; margin: 6px 0 22px; }
.o-all-note { margin: 0 auto; max-width: 520px; color: var(--text-muted); font-size: 15px; }
.o-canvas { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; margin: 0 0 26px; padding: 16px 18px; border-radius: 14px; background: #fdf2f8; border: 2px solid var(--brand); }
.o-canvas-t { font: 700 19px/1.3 var(--head); color: var(--text); }
.o-canvas-s { margin-top: 4px; color: var(--text-muted); font-size: 15px; line-height: 1.45; }
.o-canvas-done { grid-column: 1 / -1; color: var(--success); font-weight: 600; }
@media (max-width: 560px) { .o-canvas { grid-template-columns: 1fr; } .o-canvas .btn { width: 100%; } }
/* 2026-10-07: a returning buyer gets one clear way back to the order page */
.owned { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: #ecfdf3; border: 1px solid #b7e4c7; }
.owned-title { font: 700 18px/1.3 var(--head); color: var(--text); }
.owned-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.owned-all { font-weight: 600; color: var(--success); text-decoration: underline; text-underline-offset: 3px; }
.owned-sub { margin-top: 10px; font-size: 15px; color: var(--text-muted); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-mine { font: 600 14px/1 var(--ui); color: var(--text); text-decoration: none; white-space: nowrap; }
.top-mine:hover { text-decoration: underline; text-underline-offset: 3px; }
/* on a narrow phone the wordmark and the link ran together (audit F16): "My portraits" stays in the footer and the
   welcome-back box there */
@media (max-width: 399px) { .top-right .top-mine { display: none; } }
.top .wrap > .top-mine { margin-left: auto; }
/* 2026-10-07: the secret bonus portrait (The Study) that comes with every order */
.bonus-line { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-alt); font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.bonus-line b { color: var(--text); font-weight: 700; }
.bonus-line svg { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 1px; }
.bonus-tag { display: inline-block; margin-right: 4px; padding: 4px 8px; border-radius: 999px; background: var(--brand); color: #fff; font: 700 11px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.reassure { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.reassure li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.reassure svg { width: 18px; height: 18px; flex: none; color: var(--success); margin-top: 1px; }
.buy-terms { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.buy-terms summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
.buy-terms summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.buy-terms p { margin: 6px 0 0; }
.paymarks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.paymarks span { font: 600 13px/1 var(--ui); padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted); }
.again { margin-top: 16px; text-align: center; }
.again button { background: none; border: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14.5px; padding: 8px; }

/* ---------- pricing ---------- */
.price-grid { display: grid; gap: 12px; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.price-card.pick { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.price-card .ribbon { display: block; margin-bottom: 4px; font: 700 13px/1.2 var(--ui); color: var(--brand); }
.price-card h3 { font-size: 18px; }
.price-card .amt { margin-top: 8px; font: 700 32px/1 var(--ui); font-variant-numeric: tabular-nums; }
.price-card .amt small { font: 500 14px/1 var(--ui); color: var(--text-muted); margin-left: 6px; }
.price-card p { margin-top: 8px; color: var(--text-muted); font-size: 15px; }
.included { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.included li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.included svg { width: 20px; height: 20px; flex: none; color: var(--success); margin-top: 2px; }

/* ---------- gift / memorial ---------- */
.split { display: grid; gap: 26px; align-items: center; }
.gift .frame, .memorial .frame { max-width: 360px; margin: 0 auto; width: 100%; }
.split p + p { margin-top: 10px; }
.split .btn { margin-top: 20px; }
.split .lead { margin-top: 12px; }

/* ---------- faq ---------- */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 700 17px/1.35 var(--ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 18px; color: var(--text-muted); font-size: 16px; }

/* ---------- final + footer ---------- */
.final { text-align: center; padding-block: var(--section-y); border-top: 1px solid var(--border); }
.final h2 { max-width: 18ch; margin: 0 auto; }
.final p { margin: 12px auto 0; max-width: 40ch; color: var(--text-muted); }
.final .btn { margin-top: 22px; min-width: 280px; }
.foot { background: var(--ink); color: var(--on-ink-muted); padding: 36px 0 120px; font-size: 14px; }
.foot .wrap { display: grid; gap: 12px; }
.foot .wordmark { color: var(--on-ink); }
.foot a { color: var(--on-ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- sticky mobile CTA ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(28,25,23,.08); transform: translateY(110%); transition: transform .25s var(--ease); }
.sticky.show { transform: none; }
.sticky .btn { width: 100%; }

/* ---------- consent ---------- */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 18px 40px rgba(28,25,23,.18); font-size: 14.5px; }
.consent.show { display: block; }
.consent .row { display: flex; gap: 10px; margin-top: 12px; }
.consent .btn { min-height: 44px; font-size: 15px; flex: 1; }
.consent-title { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.consent-more { display: block; margin: 8px auto 0; padding: 6px 8px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-choose { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.consent-choose[hidden] { display: none; }
.consent-choose label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.consent-choose input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cta); }
.foot-link { padding: 0; background: none; border: 0; font: inherit; color: var(--on-ink); cursor: pointer; text-decoration: underline; }

/* ---------- order page ---------- */
.order-hero { padding: 28px 0 24px; text-align: center; }
.order-hero h1 { font-size: clamp(30px, 4vw + 14px, 46px); }
.order-hero p { margin: 12px auto 0; max-width: 44ch; color: var(--text-muted); }
.order-grid { display: grid; gap: 28px; padding-bottom: 26px; }
.order-item .frame { max-width: 420px; margin: 0 auto; }
.order-item .cap { text-align: center; }
.order-item .actions { display: grid; gap: 10px; max-width: 420px; margin: 14px auto 0; }
.order-item .redo { background: none; border: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14.5px; padding: 6px; }
.order-panel { background: var(--surface-alt); border-radius: 14px; padding: 20px; margin: 8px 0 56px; }
.order-panel h2 { font-size: 24px; }
.order-panel ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); }
.order-panel li + li { margin-top: 6px; }

/* ---------- larger screens ---------- */
/* Cyber, the founder's own cat (2026-10-07): his photo next to three of his nine paintings */
.cyber-head { display: grid; gap: 0 48px; align-items: end; }
.cyber-head .proof-points { margin: 0 0 24px; }
.cyber-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.cyber-row figure { margin: 0; }
.cyber-row figcaption { margin-top: 8px; font: 600 14px/1.3 var(--ui); color: var(--text-muted); }
.cyber-row .is-photo figcaption { color: var(--text); }
#cyber .proof-points svg { color: var(--success); }
#cyber .fine { margin-top: 16px; }

@media (min-width: 720px) {
  :root { --gut: 28px; }
  body { font-size: 18px; line-height: 1.6; }
  h3 { font-size: 21px; }
  .lead { font-size: 20px; }
  .styles-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .styles-grid.n8 { grid-template-columns: repeat(4, 1fr); gap: 28px 18px; }
  .price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding: 64px 20px 22px; }
  .paintings { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .order-grid { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 22px; max-width: none; }
  .consent { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
  .cyber-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
/* 2026-10-13 phone hero (owner: nothing may cover the photo card; the best UX): a slightly smaller headline, the
   style name and style buttons below the fold (all styles are one tap away under the button), and room for the
   rotated photo card above the hero's own button; the painting's width is fitted to the screen by the hero script */
@media (max-width: 959px) {
  .hero { padding-top: 14px; }
  .hero-copy h1 { font-size: clamp(26px, 7.2vw, 32px); margin-top: 2px; }
  .hero-art .plaque-row, .hero-art .style-dots { display: none; }
  .hero-cta { margin-top: 30px; }
}
@media (min-width: 960px) {
  .hero { padding: 48px 0 64px; }
  h1 { line-height: 1.08; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; grid-template-areas: ". art" "title art" "price art" "lead art" "cta art" "trust art" ". art"; grid-template-rows: 1fr auto auto auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .hero-art { margin: 0 0 0 auto; align-self: center; }
  .hero-cta { justify-self: start; }
  .hero-cta .alt { justify-self: start; }
  .trust { justify-self: start; }
  .proof-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; }
  .proof-grid .ba-wrap { max-width: 440px; }
  .cyber-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 370px); gap: 32px; align-items: start; }
  /* until the offer appears, the studio uses the full width instead of leaving an empty column */
  .studio-grid:has(> .offer:not(.show)) { grid-template-columns: minmax(0, 1fr); }
  .studio-grid .offer { margin-top: 0; padding-top: 0; border-top: 0; }
  /* a tall offer scrolls inside its column, with the total and Buy pinned at its foot (audit F04, 2026-10-13) */
  .studio-grid .offer.show { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
  .studio-grid .offer .buybox { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding: 2px 0 14px; border-top: 1px solid var(--border); box-shadow: 0 -14px 14px -10px var(--bg); }
  .styles-grid.n6 { grid-template-columns: repeat(6, 1fr); gap: 28px 18px; }
  .styles-grid.n8 { grid-template-columns: repeat(4, 1fr); gap: 32px 22px; }
  .sticky { display: none; }
  .order-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 719px) {
  .styles-grid .style-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: start; }
  .styles-grid .style-card:last-child:nth-child(odd) .frame { grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- canvas print interest ---------- */
.print-ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-muted); }
.print-q { margin: 0 0 4px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.link-btn[hidden], .print-form[hidden] { display: none; }
.print-form { display: flex; gap: 8px; margin-top: 10px; }
.print-form input[type=email] { flex: 1; min-width: 0; min-height: 46px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); padding: 0 12px; font-size: 16px; color: var(--text); }
.print-form .btn { min-height: 46px; flex: none; padding: 0 18px; }
.print-msg { margin: 8px 0 0; color: var(--text); }
.print-msg:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#pricing .print-ask { max-width: 560px; }

/* ---------- order page: large print file ---------- */
.order-item .print-note { display: block; margin-top: -4px; text-align: center; font-size: 13.5px; color: var(--text-muted); }

/* ---------- 2026-10-05: desktop studio, style picker, painting loader, all-styles summary ---------- */
/* elements toggled with the hidden attribute must stay hidden even when a class gives them a display value */
[hidden] { display: none !important; }
/* The studio column must never grow with its content: eight style chips used to widen it and squeeze the offer. */
.studio-main { min-width: 0; container-type: inline-size; }
@container (min-width: 470px) {
  .chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 4px; }
  .chip { width: auto; }
  .chip .thumb { width: 100%; }
  .chip .name, .chip .state { font-size: 12px; hyphens: auto; overflow-wrap: anywhere; }
}

/* style picker: shown right after the photo is chosen */
.picker { margin-bottom: 8px; max-width: 760px; }
.picker-head { display: flex; gap: 14px; align-items: center; }
.picker-photo { width: 60px; height: 60px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.picker-head h3 { font: 700 21px/1.25 var(--head); text-wrap: balance; }
.picker-sub { margin-top: 4px; color: var(--text-muted); font-size: 14.5px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; margin-top: 16px; }
.ptile { position: relative; border: 0; background: none; padding: 0; text-align: left; color: var(--text); cursor: pointer; }
.ptile .thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .15s, transform .15s; background: var(--surface-alt); }
.ptile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ptile .name { display: block; margin-top: 6px; font: 700 13px/1.25 var(--ui); }
.ptile .tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1.5px var(--border-input); }
.ptile .tick svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.ptile[aria-pressed="true"] .thumb { box-shadow: 0 0 0 3px var(--ink); }
.ptile[aria-pressed="true"] .tick { background: var(--ink); box-shadow: none; }
.ptile[aria-pressed="true"] .tick svg { opacity: 1; }
.ptile.full:not([aria-pressed="true"]) { opacity: .45; }
.ptile:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.picker-go { margin-top: 18px; }
.picker-note { margin-top: 10px; text-align: center; color: var(--text-muted); font-size: 14px; }
@container (min-width: 560px) { .picker-grid { gap: 16px 14px; } .ptile .name { font-size: 14px; } }

/* painting loader: honest steps, an estimate that runs a little long, and the photo underneath */
.painting, .order-item { container-type: inline-size; }
.canvas.easel-bg { background: linear-gradient(160deg, #4a3b33, #1c1917); }
.canvas .load { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 22px 16px 16px; color: #fff; background: linear-gradient(rgba(28,25,23,0), rgba(28,25,23,.86) 22%, rgba(28,25,23,.92)); }
.load .pct { font: 700 40px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.load .pct small { font-size: 20px; margin-left: 2px; }
.load .step { margin-top: 6px; font: 700 17px/1.3 var(--ui); min-height: 1.3em; }
.load .bar { height: 5px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.load .bar span { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .5s linear; }
.load .ticks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; font: 500 13.5px/1.3 var(--ui); color: rgba(255,255,255,.62); }
.load .ticks li { display: flex; gap: 8px; align-items: center; }
.load .ticks li::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); }
.load .ticks li.now { color: #fff; }
.load .ticks li.now::before { border-color: #fff; border-right-color: transparent; animation: spin .9s linear infinite; }
.load .ticks li.done { color: rgba(255,255,255,.85); }
.load .ticks li.done::before { border: 0; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.load .eta { margin-top: 10px; font: 500 13.5px/1.3 var(--ui); color: rgba(255,255,255,.75); }
.load.waiting .step { font-size: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
@container (max-width: 260px) { .load .ticks { display: none; } .load .pct { font-size: 32px; } }
.painting .canvas .reveal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fadein .6s var(--ease); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* "All eight styles": a summary of what is included, not checkboxes that look untickable */
.picklist.all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.incl { position: relative; }
.incl img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px var(--border); }
.incl .pn { display: block; margin-top: 5px; font: 700 12px/1.25 var(--ui); }
.incl .ps { display: block; font: 500 11.5px/1.25 var(--ui); color: var(--text-muted); }
.incl .seen { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; }
.incl .seen svg { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) { .load .ticks li.now::before { animation: none; } .painting .canvas .reveal { animation: none; } }

/* ---------- 2026-10-05b: email while painting, owner's note ---------- */
.picker-note-field { margin-top: 16px; }
.picker-note-field label { display: block; font: 700 15px/1.3 var(--ui); margin-bottom: 8px; }
.picker-note-field input { width: 100%; min-height: 48px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); padding: 0 14px; font-size: 16px; }
.picker-note-field input::placeholder { color: #a8a29e; }
/* 2026-10-07: the email gate is its own class (the old ".lead" restyled every lead paragraph on the page) and is made
   impossible to miss: the owner waited for "loading" portraits without seeing the small hint to add an email. */
.lead-gate { margin: 6px 0 18px; padding: 18px; border-radius: 14px; background: #fdf2f8; border: 2px solid var(--brand); scroll-margin: 96px; }
.lead-gate h3 { display: flex; gap: 10px; align-items: center; font: 700 21px/1.25 var(--head); text-wrap: balance; color: var(--text); }
.lead-gate h3 svg { width: 24px; height: 24px; flex: none; color: var(--brand); }
.lead-gate.nudge { animation: nudge 1.1s ease-out 3; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(157, 23, 77, .5); } 100% { box-shadow: 0 0 0 16px rgba(157, 23, 77, 0); } }
.canvas .tease { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.05); transform: scale(1.12); }
.canvas .gate-lock { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 18px; text-align: center; color: #fff; background: rgba(28, 25, 23, .38); }
.gate-lock svg { width: 34px; height: 34px; }
.gate-lock-t { font: 700 19px/1.3 var(--ui); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); text-wrap: balance; }
.gate-lock .btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .lead-gate.nudge { animation: none; } }
.lead-sub { margin-top: 6px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.lead-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lead-row input { flex: 1 1 220px; min-width: 0; min-height: 52px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); padding: 0 14px; font-size: 17px; }
.lead-row .btn { flex: 0 0 auto; min-height: 52px; }
.lead-optin { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14.5px; line-height: 1.4; color: var(--text-muted); cursor: pointer; }
.lead-optin input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--ink); }
.lead-msg { margin-top: 8px; color: var(--error); font-size: 14.5px; min-height: 0; }
.lead-msg:empty { display: none; }
.lead-done { margin: 6px 0 16px; padding: 12px 14px; border-radius: 10px; background: #ecfdf3; color: var(--success); font-size: 15px; }
@media (max-width: 480px) { .lead-row .btn { flex: 1 1 100%; } }

/* 2026-10-12: the terms and the feature permission, right under the buy button */
.terms-line { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.terms-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 2026-10-12: the order status sits under the headline (no label above a headline) */
.order-hero .o-kicker { margin-top: 8px; }

/* 2026-10-12: Cloudflare Turnstile shows here only when it needs a click */
.ts-box { display: flex; justify-content: center; }
.ts-msg { margin: 10px 0 6px; text-align: center; font-weight: 600; color: var(--text); } /* 2026-10-13: why the box is there */

/* 2026-10-12: the currency choice in the footer */
/* the switch sits in the dark footer, so it takes the on-ink colours */
.cur-switch { color: var(--on-ink-muted); }
.cur-switch [data-cur] { padding: 0 2px; }
.cur-switch [data-cur][aria-pressed="true"] { font-weight: 700; color: var(--on-ink); text-decoration: none; }

/* prints in the offer and under Pricing (2026-10-12; quantities and the wall preview 2026-10-13) */
.printopt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.printopt[hidden] { display: none; }
.printopt-title { margin: 0 0 10px; font: 700 19px/1.3 var(--head); color: var(--text); }
.print-lead { margin: 16px 0 0; font: 700 16px/1.3 var(--ui); color: var(--text); }
.print-lead .muted { font-weight: 500; color: var(--text-muted); }
.prints { display: grid; gap: 8px; margin-top: 10px; }
.pr-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "info price" "info step"; gap: 6px 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.pr-row.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* a row with sizes (2026-10-13): name and price on top, the size switch and Add below */
.pr-row:has(.pr-sizes) { grid-template-areas: "info price" "sizes step"; row-gap: 10px; }
.pr-sizes { grid-area: sizes; justify-self: start; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-alt); }
.pr-sizes button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font: 600 13.5px/1 var(--ui); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.pr-sizes button:hover { color: var(--text); }
.pr-sizes button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(28, 25, 23, .16), 0 0 0 1px rgba(28, 25, 23, .05); }
.pr-sizes button:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pr-sizes button { transition: none; } }
.pr-info { grid-area: info; display: grid; gap: 3px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.pr-info:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.pr-row .pname { font: 700 15.5px/1.25 var(--ui); }
.pr-row .pname small { font: 500 13.5px/1.2 var(--ui); color: var(--text-muted); margin-left: 4px; white-space: nowrap; }
.pr-row .pdesc { font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.pr-row .pset { font: 600 13px/1.3 var(--ui); color: var(--brand); }
.pr-row .pset:empty { display: none; }
.pr-row .price { grid-area: price; justify-self: end; font: 700 17px/1 var(--ui); font-variant-numeric: tabular-nums; }
.stepper { grid-area: step; display: inline-flex; align-items: center; border: 1px solid var(--border-input); border-radius: 999px; overflow: hidden; }
/* one Add button per print, the stepper once it is in the order (trust review 2026-10-13: the Apple bag pattern) */
.pr-add { grid-area: step; justify-self: end; min-height: 40px; min-width: 76px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 15px/1 var(--ui); cursor: pointer; }
.pr-add:active { background: var(--surface-alt); }
.pr-add:disabled { opacity: .45; cursor: default; }
.pr-add:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pr-row.on .pr-add, .pr-row:not(.on) .stepper { display: none; }
.stepper button { width: 44px; height: 40px; border: 0; background: var(--surface); color: var(--text); font: 600 20px/1 var(--ui); cursor: pointer; }
.stepper button:disabled { color: #c4bfba; cursor: default; }
.stepper button:not(:disabled):active { background: var(--surface-alt); }
.stepper button:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.stepper output { min-width: 26px; text-align: center; font: 700 16px/1 var(--ui); font-variant-numeric: tabular-nums; }
.print-more { display: grid; gap: 8px; margin-top: 12px; }
.pm-field { display: grid; gap: 6px; font: 600 13.5px/1.2 var(--ui); color: var(--text-muted); min-width: 0; }
.pm-field select { width: 100%; min-height: 46px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); color: var(--text); padding: 0 10px; font: 500 16px/1.2 var(--ui); } /* 16px: iOS does not zoom on focus */
.pm-field select:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.print-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.print-where { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.print-later { margin: 8px 0 0; font: 600 13.5px/1.45 var(--ui); color: var(--text); }
/* the visitor's own portraits under the wall: a tap hangs that one */
.wall-pets { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.wall-pets[hidden] { display: none; }
.wall-pets::-webkit-scrollbar { display: none; }
.wall-pets button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 12px 4px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 13.5px/1.2 var(--ui); cursor: pointer; }
.wall-pets img { width: 36px; height: 48px; object-fit: cover; border-radius: 6px; }
.wall-pets button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wall-pets button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.print-prices { margin-top: 30px; padding: 18px 20px 20px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
.print-prices[hidden] { display: none; }
.print-prices h3 { font: 700 19px/1.3 var(--ui); margin: 0; }
.print-prices > p { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; }
.print-prices .wall-slot { margin-top: 14px; }
.print-prices ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.print-prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 15.5px; }
.print-prices li small { display: block; font-size: 13.5px; color: var(--text-muted); }
.print-prices li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.print-prices .fine { margin-top: 10px; }
.print-prices .pp-cta { margin: 16px 0 0; }
.print-prices .pp-cta .btn { width: 100%; }
/* a wide screen: the room large on the left, what it costs on the right (owner 2026-10-13: "the wall preview is tiny") */
@media (min-width: 900px) {
  .print-prices { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr repeat(5, auto) 1fr;
    grid-template-areas: "wall ." "wall head" "wall lead" "wall list" "wall note" "wall cta" "wall ."; column-gap: 44px; padding: 28px; }
  .print-prices h3 { grid-area: head; font-size: 24px; line-height: 1.25; }
  .print-prices .pp-lead { grid-area: lead; margin-top: 10px; }
  .print-prices .wall-slot { grid-area: wall; margin-top: 0; }
  .print-prices ul { grid-area: list; margin-top: 18px; }
  .print-prices .fine { grid-area: note; }
  .print-prices .pp-cta { grid-area: cta; margin-top: 20px; }
  .print-prices .pp-cta .btn { width: auto; }
}

/* "on your wall" preview (2026-10-13, site/wall.js): an illustrated room with the portrait as a print, to scale; a 4:3
   close-up of the print and the top of the furniture, the whole room (4:5) on a tap */
.wall { margin: 0; container: wall / inline-size; }
.wall-stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #e9e4dc; cursor: zoom-out; }
.wall-stage.crop { aspect-ratio: 4 / 3; cursor: zoom-in; }
.wall-layer { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; } /* the whole room; the close-up moves it up */
.wall-room { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall-zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(28, 25, 23, .72); color: #fff; font: 600 13px/1 var(--ui); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wall-zoom svg { width: 16px; height: 16px; }
.wall-zoom:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wall-art { position: absolute; transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), opacity .2s ease-out; }
.wall-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall-art.is-canvas { box-shadow: 1px 2px 2px rgba(0, 0, 0, .22), 3px 7px 14px rgba(0, 0, 0, .24); }
.wall-art.is-canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .07)); pointer-events: none; }
.wall-art.is-poster { background: #fbfaf8; box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 2px 6px 12px rgba(0, 0, 0, .18); } /* unframed, full size: the paper is the print */
/* the four rooms as one segmented control: one row on every screen (2026-10-13: the pills wrapped on a phone) */
.wall-rooms { display: flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 12px; background: var(--surface-alt); }
.wall-rooms button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: 600 13px/1.15 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.wall-rooms button:hover { color: var(--text); }
.wall-rooms button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(28, 25, 23, .16), 0 0 0 1px rgba(28, 25, 23, .05); }
.wall-rooms button:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
/* narrow phones (375 px and under): smaller room names that may take two lines; the smallest (320 px): two rows of two.
   After the rules above on purpose: a container query adds no specificity */
@container wall (max-width: 310px) { .wall-rooms button { font-size: 12.5px; line-height: 1.1; white-space: normal; text-wrap: balance; } }
@container wall (max-width: 260px) { .wall-rooms { display: grid; grid-template-columns: 1fr 1fr; } }
.wall-cap { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .wall-art, .wall-rooms button { transition: none; } }
/* the whole room (4:5) never taller than most of the screen; narrower and centred instead */
@media (min-width: 720px) { .wall-stage:not(.crop) { width: min(100%, calc(78vh * 4 / 5)); margin-inline: auto; } }
/* a wide screen: the studio's room view sits in the big left column under the previews (app.js dockWall) */
.wall-dock { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.wall-dock[hidden], .studio-grid:not(:has(> .offer.show)) .wall-dock { display: none; }
.wall-dock .printopt-title { margin-bottom: 12px; font-size: 24px; }

/* order page: the prints of an order and buying prints later (2026-10-13) */
.o-prints, .o-add { margin: 0 0 26px; padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.o-prints[hidden], .o-add[hidden] { display: none; }
.o-prints h2, .o-add h2 { margin: 0; font: 700 22px/1.25 var(--head); }
.op { margin-top: 12px; }
.op + .op { border-top: 1px solid var(--border); padding-top: 14px; }
.op-status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.op-items { display: grid; gap: 10px; margin-top: 12px; }
.op-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.op-item img, .op-ph { width: 72px; height: 96px; border-radius: 8px; object-fit: cover; background: var(--surface-alt); box-shadow: 1px 2px 6px rgba(0, 0, 0, .18); }
.op-meta { display: grid; gap: 6px; min-width: 0; font-size: 15px; }
.op-meta select { width: 100%; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--surface); color: var(--text); padding: 0 10px; font: 500 15px/1.2 var(--ui); }
.op-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.op-go:empty { display: none; }
.op-ship { margin: 10px 0 0; font-size: 13.5px; color: var(--text-muted); }
.o-add-sub { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.45; }
.o-add .o-add-pick { margin-top: 12px; }
.o-add .wall-slot { margin-top: 12px; }
.op-sure { flex-basis: 100%; margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.order-item .o-wall-link { display: block; margin: 2px auto 0; min-height: 44px; font-size: 14.5px; }
.o-add #o-add-go { margin-top: 14px; }
.o-add-msg { margin: 8px 0 0; color: var(--brand); font-size: 14px; }
.o-add-msg:empty { display: none; }
/* a wide screen: the room on the left, the portrait, prints and button on the right */
@media (min-width: 900px) {
  .o-add { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr repeat(7, auto) 1fr;
    grid-template-areas: "wall ." "wall head" "wall sub" "wall pick" "wall rows" "wall more" "wall go" "wall msg" "wall ."; column-gap: 36px; padding: 24px; }
  .o-add h2 { grid-area: head; }
  .o-add .o-add-sub { grid-area: sub; }
  .o-add .o-add-pick { grid-area: pick; }
  .o-add .wall-slot { grid-area: wall; margin-top: 0; align-self: start; position: sticky; top: 24px; } /* stays in view beside the longer right column */
  .o-add #o-add-rows { grid-area: rows; }
  .o-add .print-more { grid-area: more; }
  .o-add #o-add-go { grid-area: go; }
  .o-add .o-add-msg { grid-area: msg; }
}

/* 2026-10-13 welcome-back offer: the banner in the offer and the struck-through price */
.wb-banner { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdf2f6; border: 1px solid #f3c6d7; color: var(--text); font: 600 15px/1.45 var(--ui); }
.was { color: var(--text-muted); font-weight: 400; margin-right: 4px; }
.keep-one { margin-top: 12px; width: 100%; } /* 2026-10-14: the buy step right under each portrait */
.why-not { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); text-align: left; }
.why-q { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.why-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.why-opts button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.why-opts button:hover { border-color: var(--brand); color: var(--brand); }
.why-opts button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 2026-10-14 (owner): a preview card is a short strip while it paints, waits, is locked or failed, so the email, the
   name and the prices are a short scroll away; it opens to the full painting when the portrait arrives */
.load .cname { display: none; }
.painting.compact .cap { display: none; }
.painting.compact .frame > .canvas { aspect-ratio: auto; min-height: 96px; border-radius: 14px; }
.painting.compact .canvas img.photo, .painting.compact .canvas img.tease { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painting.compact .canvas .ai-tag { display: none; }
.painting.compact .canvas .load { position: relative; inset: auto; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 14px 16px; background: rgba(28, 25, 23, .78); }
.painting.compact .load .cname { display: block; grid-column: 1; font: 700 16px/1.25 var(--ui); color: #fff; }
.painting.compact .load .pct { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; }
.painting.compact .load .pct small { font-size: 15px; }
.painting.compact .load .step { grid-column: 1; margin-top: 2px; font: 500 14px/1.3 var(--ui); color: rgba(255, 255, 255, .82); }
.painting.compact .load .bar { grid-column: 1 / -1; margin-top: 10px; height: 4px; }
.painting.compact .load .ticks { display: none; }
.painting.compact .load .eta { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; }
.painting.compact .load.waiting { grid-template-columns: 1fr; }
.painting.compact .load.waiting .step { font-size: 14px; }
.painting.compact .load .retry { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
.painting.compact.error .load .step { grid-column: 1 / -1; color: #fecaca; }
.painting.compact .canvas .gate-lock { position: relative; inset: auto; grid-template-columns: 1fr auto; justify-items: start; align-items: center; gap: 10px; padding: 14px 16px; text-align: left; background: rgba(28, 25, 23, .55); }
.painting.compact .gate-lock svg { display: none; }
.painting.compact .gate-lock-t { font-size: 16px; }
.painting.compact .gate-lock .btn { min-height: 44px; padding: 10px 14px; font-size: 15px; }

/* 2026-10-14 A/B: prints in the offer. a: a bright wall card under the packs; b: the wall first, the digital packs after */
.wall-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; margin: 14px 0 6px; padding: 14px; border-radius: 14px; background: #fdf2f6; border: 1px solid #f3c6d7; }
.wall-card img { width: 64px; height: 85px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.15); grid-row: span 2; }
.wall-card img[hidden] + .wc-text, .wall-card img[hidden] ~ .btn { grid-column: 1 / -1; }
.wall-card .wc-text { display: grid; gap: 2px; font: 500 14.5px/1.4 var(--ui); color: var(--text); }
.wall-card .wc-text b { font: 700 17px/1.3 var(--ui); }
.wall-card .btn { justify-self: start; min-height: 44px; }
.digital-head { margin: 22px 0 2px; font: 700 18px/1.3 var(--ui); }
.digital-sub { margin: 0 0 10px; color: var(--text-muted); font-size: 14.5px; }
[data-ab="b"] #printopt { margin-top: 10px; }
.keep-file { margin-top: 8px; }
.lead-price { margin: 4px 0 10px; font: 600 14.5px/1.45 var(--ui); color: var(--text); }
[data-ab="b"] .painting .cap small .link-btn[data-wall] { display: none; } /* b has its own wall button under the portrait */

/* 2026-10-14 print explainer: art print or canvas, what arrives (owner: people may leave not knowing what they get) */
.print-info { margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.print-info > summary { cursor: pointer; padding: 14px 16px; font: 700 15.5px/1.35 var(--ui); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.print-info > summary::-webkit-details-marker { display: none; }
.print-info > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--brand); }
.print-info[open] > summary::after { content: "−"; }
.pi-grid { display: grid; gap: 14px; padding: 0 16px; }
.pi-card h5 { margin: 10px 0 4px; font: 700 16px/1.3 var(--ui); }
.pi-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font: 400 14px/1.45 var(--ui); color: var(--text); }
.pi-both { margin: 12px 16px 16px; font: 500 13.5px/1.45 var(--ui); color: var(--text-muted); }
.pi-vis { height: 150px; display: grid; place-items: center; border-radius: 10px; background: #efe9e2; overflow: hidden; }
.pi-canvas .c3 { position: relative; width: 84px; height: 112px; transform-style: preserve-3d; transform: perspective(500px) rotateY(-32deg); box-shadow: 14px 12px 18px rgba(0, 0, 0, .28); }
.pi-canvas .c3-front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pi-canvas .c3-side { position: absolute; top: 0; left: 100%; width: 14px; height: 100%; object-fit: cover; object-position: right; transform-origin: left center; transform: rotateY(90deg) scaleX(-1); filter: brightness(.72); }
.pi-print .pp-frame { width: 96px; padding: 9px; background: #2b2420; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.pi-print .pp-frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline: 7px solid #fff; outline-offset: -7px; }
@media (min-width: 560px) { .pi-grid { grid-template-columns: 1fr 1fr; } }