/* Alder & Kiln concept shop (JayLM Studio). Fictional brand; demo only. */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../../../assets/fonts/font-6e4f2958c3a7c4a80acd.woff2) format('woff2'); }
@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 300 900; font-stretch: 75% 125%; font-display: swap; src: url(../../../assets/fonts/font-5ea3740633e5ac7af56c.woff2) format('woff2'); }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #e2d6c1; }

:root {
  --bg: #17110e; --bg-2: #1f1813; --bg-3: #2a2019; --bg-4: #352a21;
  --line: rgba(241, 233, 220, .16); --line-strong: rgba(241, 233, 220, .34);
  --bone: #f1e9dc; --bone-2: #d8cdbd; --muted: #b3a697; --ink: #17110e; --ink-2: #4a3f37;
  --ember: #e8905a; --ember-deep: #c9703e; --clay-raw: #b5775a; --sage-ok: #9fb39c; --error: #f0a38f;
  --oat: #e2d6c1; --sage: #9fb39c; --indigo: #4a5b80; --ember-g: #b85a3c;
  --r-s: 10px; --r-m: 16px; --r-l: 24px;
  --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px); --max: 1360px; --chrome: 100px;
  --gx: 70%; --gy: 50%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--bone); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; color: var(--bone); text-wrap: balance; }
p { margin: 0; }
a { color: var(--bone); }
svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h2[tabindex="-1"]:focus, [data-confirm]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.no-js .needs-js { display: none !important; }
/* Without JavaScript nothing can change the glaze or the pose, so the story becomes a static page: the pot once at the
   top, then the opening and the chapters in order, instead of a pinned stage keeping one glaze beside every name */
.no-js .stage { position: relative; }
.no-js .chapters { margin-top: 0; }
.no-js .step, .no-js .hero { min-height: 0; padding-top: 24px; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--bone); color: var(--ink); padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 8px; }
.eyebrow { font-size: .75rem; font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }

/* Concept bar, header, footer */
.concept-bar { background: var(--bone); color: var(--ink); font-size: .8125rem; line-height: 1.4; text-align: center; padding: 8px var(--gutter); }
.concept-bar a { color: inherit; }
/* In the studio build a 3.25rem "Back to JayLM Studio" bar is sticky above this page; the shop header sits under it on
   wide screens and scrolls away on phones so the stage keeps its room. */
.site-head { position: static; z-index: 30; background: rgba(23, 17, 14, .72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .site-head { position: sticky; top: calc(3.25rem + 1px); }
  :root { scroll-padding-top: calc(3.25rem + 1px + 72px); }
}
@media (min-width: 900px) and (max-height: 500px) { .site-head { top: 0; } :root { scroll-padding-top: 72px; } }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 64px; padding: 4px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bone); text-decoration: none; font: 500 1.45rem/1 var(--serif); letter-spacing: -.01em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; color: var(--bone-2); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav a:hover { color: var(--bone); background: var(--bg-3); }
.cart-icon { display: none; width: 22px; height: 22px; flex: none; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--ember); color: var(--ink); font-size: .75rem; font-weight: 700; }
@media (max-width: 599px) {
  .brand { font-size: 1.2rem; gap: 8px; }
  .brand svg { width: 24px; height: 24px; }
  .nav a { padding: 0 8px; }
  .nav .nav-more { display: none; }
  .cart-icon { display: block; }
  .cart-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 379px) { .brand { font-size: 1.05rem; gap: 6px; } .nav a { padding: 0 5px; } .count { margin-left: 4px; } }
main { flex: 1; }
.site-foot { background: var(--bone); color: var(--ink); padding: 48px 0 40px; }
.site-foot a { color: inherit; }
.foot-row { display: grid; gap: 20px; }
@media (min-width: 720px) { .foot-row { grid-template-columns: 1fr auto; align-items: start; } }
.site-foot .brand { color: inherit; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.site-foot :focus-visible { outline-color: var(--ink); }
.disclaimer { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(23, 17, 14, .2); font-size: .875rem; color: var(--ink-2); max-width: 70ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; background: var(--bone); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.btn:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-green { background: var(--ember); }
.btn-green:hover { background: var(--ember-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--ember); text-decoration: underline; cursor: pointer; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { background: var(--bg-3); }

/* Illustrations (SVG fallback and cart thumbs): --glaze drives the colour */
.pot { --gz-hi: color-mix(in srgb, var(--glaze) 72%, #fff); --gz-lo: color-mix(in srgb, var(--glaze) 70%, #2a1810); width: 100%; height: auto; aspect-ratio: 1; }
.pot-shadow { fill: rgba(0, 0, 0, .45); }
.pot-foot { fill: var(--clay-raw); }
.pot-rim { fill: var(--gz-lo); }
.pot-inner { fill: var(--glaze); opacity: .5; }
.pot-floor { fill: var(--glaze); opacity: .7; }
.pot-well { fill: var(--gz-lo); opacity: .22; }
.pot-rim-hi { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.pot-sheen { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 7; stroke-linecap: round; }
.pot-handle { fill: none; stroke: var(--gz-lo); stroke-width: 14; stroke-linecap: round; }
.pot-handle-in { fill: none; stroke: var(--glaze); stroke-width: 6; stroke-linecap: round; }
.pot-speck { fill: var(--gz-lo); opacity: .35; }
.pot-soil { fill: #3b2a1f; }

/* Story: sticky 3D stage with chapters scrolling over it */
.story { position: relative; }
.stage { position: sticky; top: 0; z-index: 0; height: 100svh; overflow: hidden; pointer-events: none; --glow: var(--glaze, #e2d6c1); transition: --glow .35s linear; }
.stage-glow { position: absolute; inset: 0; background: radial-gradient(38% 42% at var(--gx) var(--gy), color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%); }
.stage-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-art { position: absolute; left: var(--gx); top: var(--gy); width: min(52vh, 72vw); translate: -50% -50%; }
.has-3d .stage-canvas { display: block; }
.has-3d .stage-art { display: none; }
.chapters { position: relative; z-index: 1; margin-top: -100svh; }
.step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.step-s { min-height: 80svh; }
.chapter-body { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.hero { min-height: calc(100svh - var(--chrome)); }
/* The display sizes are capped against the viewport width so 200 % text still wraps inside a 320 px screen */
.hero h1 { font-size: min(clamp(2.35rem, 6vw, 5.6rem), 12vw); font-weight: 300; letter-spacing: -.03em; line-height: .98; margin-top: 14px; max-width: 12ch; overflow-wrap: anywhere; }
.lede { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--bone-2); max-width: 40ch; margin-top: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.glaze-row { display: none; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.glaze-row p { color: var(--muted); font-size: .875rem; margin-right: 6px; }
.gchip, .thumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--bone-2); cursor: pointer; font-size: .9375rem; font-weight: 500; }
.gchip:hover, .thumb:hover { border-color: var(--line-strong); color: var(--bone); }
.gchip[aria-pressed="true"], .thumb[aria-selected="true"] { border-color: var(--bone); color: var(--bone); background: var(--bg-3); }
.dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(255, 255, 255, .25); flex: none; }
.scroll-hint { display: flex; align-items: center; gap: 12px; margin-top: 44px; color: var(--muted); font-size: .8125rem; letter-spacing: .04em; }
.scroll-hint::before { content: ''; width: 36px; height: 1px; background: var(--line-strong); }
.step-text { max-width: min(36rem, 100%); min-width: 0; }
.step-text h3 { margin-top: 10px; }
.step-text p { margin-top: 14px; color: var(--bone-2); font-size: clamp(1rem, 1.35vw, 1.2rem); max-width: 34ch; }
.step-text .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--ember); font-weight: 500; text-decoration: none; }
.step-text .more:hover { text-decoration: underline; }
.glaze-name { font-size: min(clamp(4rem, 16vw, 12rem), 22vw); font-weight: 300; letter-spacing: -.04em; line-height: .9; overflow-wrap: anywhere; }
.craft-name { font-size: min(clamp(2.6rem, 6vw, 5rem), 14vw); font-weight: 300; letter-spacing: -.03em; overflow-wrap: anywhere; }
.craft-name small { display: block; font: 300 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.step .glaze-name, .step .craft-name { color: var(--bone-2); transition: color .3s; }
.step.is-active .glaze-name, .step.is-active .craft-name { color: var(--bone); }
@media (max-width: 899px) {
  /* Phones: the stage is an opaque 38svh window pinned at the top (the studio-return bar covers its first 53 px); the
     chapters scroll underneath the window, never over the pot, and the opening text starts right below it. The
     concept notice and the shop bar take 170 px above the story, so the opening keeps a tight rhythm: pot, title and
     the first action still fit an 844 px screen (a 640 px one with the smaller window below). */
  :root { --stage-h: 36svh; --gx: 50%; --gy: 56%; }
  .stage { height: var(--stage-h); z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
  .stage-art { width: min(calc(var(--stage-h) * .62), 60vw); }
  .chapters { margin-top: calc(-1 * var(--stage-h)); }
  .step { justify-content: flex-start; padding-top: calc(var(--stage-h) + 24px); min-height: 84svh; }
  .step.step-s { min-height: 80svh; }
  .hero { padding-top: calc(var(--stage-h) + 8px); }
  .hero h1 { margin-top: 4px; }
  .hero .lede { margin-top: 10px; }
  .hero .actions { margin-top: 16px; }
}
/* Short phones (≤ 640 px tall): a smaller window and a smaller title so the first action still fits the first screen */
@media (max-width: 899px) and (max-height: 640px) {
  :root { --stage-h: 29svh; }
  .hero { padding-top: calc(var(--stage-h) + 4px); }
  .hero h1 { font-size: min(1.75rem, 11vw); }
  .hero .lede { font-size: .95rem; margin-top: 8px; max-width: none; }
  .hero .actions { margin-top: 12px; }
  .hero .lede { max-width: 32ch; }
  .actions .btn { flex: 1 1 auto; padding: 0 18px; }
  .scroll-hint { margin-top: 28px; }
}
@media (min-width: 900px) {
  .step .chapter-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .glaze-row { display: flex; }
}

/* Collection and studio */
.section { padding: 96px 0 0; position: relative; z-index: 1; background: var(--bg); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.section h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.025em; }
.section-head p { color: var(--muted); max-width: 44ch; }
.grid { display: grid; gap: 16px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card { display: block; text-decoration: none; color: inherit; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: transform .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.card .panel { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 10%; background: radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--glaze) 30%, transparent), transparent 75%), var(--bg-3); }
.card .pot { width: 78%; }
.card img { width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.card h3 { font-size: 1.45rem; font-weight: 400; }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price { font-weight: 600; }
.swatches { display: flex; gap: 6px; }
.swatches li { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: var(--sw); }
.studio { display: grid; gap: 24px; padding: 96px 0 112px; }
@media (min-width: 900px) { .studio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.studio p { color: var(--bone-2); font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 44ch; font-family: var(--serif); font-weight: 300; line-height: 1.4; }
.studio p + p { margin-top: 16px; }

/* Product page */
.crumbs { font-size: .875rem; color: var(--muted); padding: 12px 0 4px; }
.crumbs ol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; margin: 0 -4px; color: var(--bone-2); }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--line-strong); }
.product { display: grid; gap: 16px; padding: 4px 0 64px; grid-template-areas: 'head' 'gallery' 'form' 'more'; }
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; grid-template-areas: 'gallery head' 'gallery form' 'gallery more'; gap: 12px 64px; padding-top: 20px; } }
.buy-head { grid-area: head; }
.buy-head h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.025em; }
.buy-head .price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.buy-head .price { font-size: 1.25rem; }
.avail { font-size: .875rem; color: var(--muted); }
.buy-more { grid-area: more; }
.blurb { color: var(--bone-2); max-width: 50ch; margin-bottom: 20px; }
.gallery { grid-area: gallery; position: relative; display: grid; gap: 10px; align-content: start; }
.viewer { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(50% 50% at 50% 56%, color-mix(in srgb, var(--glaze) 32%, transparent), transparent 76%), var(--bg-2); border: 1px solid var(--line); }
.viewer figure { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 6%; }
.viewer .pot { height: 100%; width: auto; }
.viewer canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.viewer canvas:focus-visible { outline-offset: -4px; }
.has-3d.viewer canvas { display: block; }
.has-3d.viewer figure { display: none; }
.drag-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 7px 12px; border-radius: 999px; background: rgba(23, 17, 14, .7); color: var(--bone-2); font-size: .75rem; pointer-events: none; opacity: 0; transition: opacity .3s; }
.has-3d .drag-hint { opacity: 1; }
.has-3d.dragged .drag-hint { opacity: 0; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .viewer { aspect-ratio: 5 / 4; } }
.buy-form { grid-area: form; display: grid; gap: 18px; align-content: start; }
.buy-form legend { font-weight: 600; margin-bottom: 10px; display: block; width: 100%; }
.buy-form legend span { font-weight: 400; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg-2); color: var(--bone-2); cursor: pointer; font-weight: 500; }
.chip label:hover { border-color: var(--line-strong); color: var(--bone); }
.chip input:checked + label { border-color: var(--bone); background: var(--bone); color: var(--ink); }
.chip input:checked + label small { color: var(--ink-2); }
.chip input:focus-visible + label { outline: 3px solid var(--ember); outline-offset: 3px; }
.chip input:disabled + label { cursor: not-allowed; color: var(--muted); border-style: dashed; background: transparent; }
.chip input:disabled + label .dot { opacity: .45; }
.chip small { font-size: .75rem; color: var(--muted); font-weight: 500; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.qty button { width: 44px; height: 48px; border: 0; background: transparent; font-size: 1.25rem; border-radius: 999px; cursor: pointer; }
.qty button:hover { background: var(--bg-3); }
.qty button:focus-visible, .qty input:focus-visible { outline-offset: -3px; }
.qty input, .qty output { width: 44px; height: 48px; line-height: 48px; text-align: center; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-s button { width: 40px; height: 40px; }
.qty-s output { width: 30px; height: 40px; line-height: 40px; }
.buy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 160px; }
.note { font-size: .875rem; color: var(--muted); }
.acc { border-top: 1px solid var(--line); margin-top: 8px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 2px; cursor: pointer; font-weight: 600; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.6rem; font-weight: 300; color: var(--ember); }
.acc details[open] summary::after { content: '\2212'; }
.acc-body { padding: 0 2px 18px; color: var(--bone-2); max-width: 58ch; }
.acc-body p + p { margin-top: 8px; }

/* Cart drawer */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .2s; }
.drawer { position: fixed; top: calc(3.25rem + 1px); right: 0; bottom: 0; z-index: 50; width: min(100%, 440px); display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.drawer.open { transform: none; visibility: visible; transition: transform .25s ease; }
.drawer-open body { overflow: hidden; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.6rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px; }
.drawer-foot { padding: 16px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.empty { padding: 32px 0; color: var(--muted); text-align: center; }
.empty a { color: var(--ember); }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-thumb { width: 64px; height: 64px; padding: 6px; border-radius: var(--r-s); background: var(--bg-3); }
.line-name { font-weight: 600; }
.line-var { font-size: .875rem; color: var(--muted); }
.line-ctl { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.line-total { font-weight: 600; }
.totals { display: grid; gap: 6px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-weight: 600; font-size: 1.125rem; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }

/* Checkout */
.page-head { padding: 36px 0 24px; }
.page-head h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.025em; }
.page-head p { color: var(--muted); margin-top: 6px; }
.checkout { display: grid; gap: 32px; padding-bottom: 72px; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; }
.stepper li { font-size: .8125rem; font-weight: 600; color: var(--muted); padding-top: 10px; border-top: 3px solid var(--line); }
.stepper li[aria-current] { color: var(--bone); border-color: var(--ember); }
.stepper li.done { color: var(--sage-ok); border-color: var(--sage-ok); }
.step-panel h2 { font-size: 1.75rem; margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select { min-height: 48px; width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 0 14px; font: inherit; background: var(--bg-3); color: var(--bone); color-scheme: dark; }
.field input::placeholder { color: var(--muted); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--ember); outline-offset: 1px; border-color: var(--ember); }
.field input:user-invalid { border-color: var(--error); }
.two { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; } }
.opt { display: flex; gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px; margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--bg-2); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--bone); background: var(--bg-3); }
.opt:has(input:focus-visible) { outline: 3px solid var(--ember); outline-offset: 3px; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--ember); flex: none; }
.opt .lbl { flex: 1; }
.opt .lbl small { display: block; color: var(--muted); font-size: .875rem; }
.opt .pr { font-weight: 600; }
.demo-pay { background: var(--bg-2); border: 1.5px dashed var(--ember); border-radius: var(--r-m); padding: 20px; display: grid; gap: 8px; }
.demo-pay h3 { font-size: 1.4rem; }
.demo-pay p { color: var(--bone-2); }
.form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.form-nav .btn { flex: 1; min-width: 140px; }
.summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 22px; }
.summary h2 { font-size: 1.5rem; margin-bottom: 4px; }
.summary .totals { margin-top: 14px; }
.confirm { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-l); padding: 36px 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.confirm h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 300; }
.confirm p { color: var(--bone-2); max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-height: 500px) { .drawer { top: 0; } }