/* ---------- Home ---------- */
.sm-hero { padding: 20px 0 8px; overflow: hidden; }
.sm-hero__in { display: grid; gap: 20px; align-items: center; }
.sm-hero__h { margin: 0 0 12px; color: var(--ink); }
@media (max-width: 959px) { .sm-hero__copy .sm-lead { font-size: 1rem; } }
.sm-hero__h .sm-layers:last-child { color: var(--laser-deep); }
.sm-hero__brand { display: block; margin: 0 0 10px; font: 600 var(--fs-ui)/1.3 var(--f); font-variation-settings: 'wdth' 75; letter-spacing: .01em; color: var(--ink-2); }
@media (min-width: 1280px) { .sm-hero__brand { font-size: 17px; } }
.sm-hero__copy .sm-lead { margin-bottom: 0; }

/* keychain configurator */
.sm-kc { position: relative; }
.sm-kc__stage { position: relative; height: min(46vw, 300px); border-radius: calc(var(--r-lg) - 8px); overflow: hidden; cursor: grab;
  background: radial-gradient(70% 80% at 50% 25%, #fff 0%, #eef1f4 70%, #e2e7ee 100%); }
.sm-kc__stage:active { cursor: grabbing; }
.sm-kc__stage canvas { width: 100% !important; height: 100% !important; }
/* before WebGL is ready: a static printed-look nameplate so the hero never looks empty */
.sm-kc__stage:not(.is-ready)::before { content: attr(data-name); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg);
  padding: 14px 26px 14px 44px; border-radius: 16px; background: var(--kc-plate, var(--ink)); color: var(--kc-text, var(--laser)); font: 900 42px/1 var(--f); font-variation-settings: 'wdth' 110;
  box-shadow: 0 18px 30px -14px rgba(12,31,61,.6); }
.sm-kc__stage.is-fallback::after { content: "3D preview isn't available on this device."; position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.sm-kc__controls { display: grid; gap: 12px; }
.sm-kc__name { min-height: 56px !important; font-size: 20px !important; font-weight: 700; text-align: center; letter-spacing: .02em; }
.sm-kc__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); }
.sm-kc__price { display: flex; flex-direction: column; font-weight: 900; font-size: 26px; font-variation-settings: 'wdth' 90; line-height: 1.05; }
.sm-kc__price small { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); font-variation-settings: 'wdth' 100; }
.sm-kc__buy .sm-btn { flex: 1; max-width: 260px; }
/* swatches reused from studio */
.sm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-sw { position: relative; cursor: pointer; }
.sm-sw input { position: absolute; opacity: 0; }
.sm-sw span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(12,31,61,.18), inset 0 -4px 8px rgba(0,0,0,.12); transition: scale var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.sm-sw input:checked + span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.sm-sw input:focus-visible + span { outline: 2.5px solid var(--laser); outline-offset: 5px; }
/* the checked colour, named on screen (phones have no hover titles): under Plate/Letters on desktop, in the toggle chip on phones */
.sm-kc__cn { font-weight: 600; color: var(--ink-3); }
.sm-kc__cn::before { content: "· "; content: "· " / ""; }
.sm-kc__lb .sm-kc__cn { display: block; font-size: var(--fs-xs); color: var(--ink); }
.sm-kc__lb .sm-kc__cn::before { content: none; }
.sm-kc__tog [aria-pressed="true"] .sm-kc__cn { color: inherit; opacity: .8; }

.sm-hero__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sm-hero__links .sm-btn { flex: 1 1 auto; white-space: nowrap; } /* phone: stack full width rather than wrap a label */
@media (min-width: 960px) { .sm-hero__links .sm-btn { flex: 0 0 auto; } }

/* 8+ owner-managed colours: label above, swatches on one line */
.sm-kc__row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sm-kc__lb { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.sm-kc__row .sm-swatches { flex-wrap: nowrap; gap: 6px; overflow-x: auto; max-width: 100%; padding: 6px; margin: -6px 0 0 -6px; scrollbar-width: none; }
.sm-kc__row .sm-sw span { width: 32px; height: 32px; }
.sm-kc__row .sm-sw::after { content: ''; position: absolute; inset: -6px -3px; } /* 44px-tall tap target, edge to edge across the 6px gaps */

/* desktop hero fits the fold on 720-900px-tall laptops (tested 1280x720 ... 1536x864) */
@media (min-width: 960px) {
  .sm-kc { padding: 14px 16px 16px; }
  .sm-kc__stage { height: clamp(200px, calc(100vh - 460px), 320px); height: clamp(200px, calc(100svh - 460px), 320px); border-radius: var(--r-sm); }
  .sm-kc__controls { gap: 10px; }
  .sm-kc__row { flex-direction: row; align-items: center; gap: 12px; }
  .sm-kc__lb { flex: 0 0 auto; min-width: 52px; }
  .sm-kc__buy { margin-top: 12px; padding-top: 12px; }
}

/* ==========================================================================
   Visuals 2026-09-27: bench hero, navy bento, lab cards, photo steps
   ========================================================================== */
/* hero: the configurator sits on the studio bench */
.sm-kc__stage > canvas { position: absolute; inset: 0; z-index: 1; }
.sm-kc__bench { display: none; }
/* the live size, drawn as a CAD dimension line under the piece (app.css draws the ticks) */
.sm-kc__size { position: absolute; left: 50%; right: auto; bottom: 6px; z-index: 2; translate: -50% 0; width: min(70%, 280px); margin: 0 !important; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); pointer-events: none; }
.sm-kc__tog { display: none; }
.sm-frame { --frame: #ff904d; }
@media (max-width: 959px) {
  .sm-hero { padding-top: 8px; }
  .sm-hero__h { margin-bottom: 8px; }
  .sm-hero__brand { margin-bottom: 6px; }
  .sm-hero__links { margin-top: 12px; }
  .sm-kc { padding: 8px 8px 14px; }
  .sm-kc > .sm-frame, .sm-hero__bench { display: none; }
  /* 156: the brand line above the H1 must not push Add to cart under the tab bar (390x844); a showing seasonal bar (--bar-h, 60px) costs the stage the same */
  .sm-kc__stage { height: calc(156px - var(--bar-h, 0px)); background: var(--frost-2); }
  .sm-kc__bench { display: block; position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; --pos: 50% 62%; }
  .sm-kc__controls { gap: 8px; margin-top: 8px; }
  .sm-kc__name { min-height: 50px !important; }
  /* one swatch row at a time, plate/letters toggle (keeps "Add to cart" above the tab bar) */
  .sm-kc__tog { display: flex; flex-wrap: wrap; gap: 6px; } /* wrap: colour names are owner-editable (Stak HQ > Colors) */
  .sm-kc__tog .sm-chip { position: relative; min-height: 38px; padding: 6px 14px; font-size: var(--fs-ui); }
  .sm-kc__tog .sm-chip::after { content: ''; position: absolute; inset: -3px 0; } /* 44px tap target */
  .sm-kc[data-show="text"] [data-kc-row="plate"], .sm-kc[data-show="plate"] [data-kc-row="text"] { display: none; }
  .sm-kc__row .sm-kc__lb { display: none; }
  .sm-kc__buy { margin-top: 10px; padding-top: 10px; }
}
@media (min-width: 960px) {
  .sm-hero { padding: 0; overflow: visible; }
  .sm-hero__in { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .sm-hero__copy { padding: 32px 0; }
  .sm-hero__media { display: flex; align-items: center; min-height: clamp(560px, calc(100vh - var(--top-h)), 760px); min-height: clamp(560px, calc(100svh - var(--top-h)), 760px); padding: 32px 0; }
  .sm-hero__bench { position: absolute; inset: 0; aspect-ratio: auto; --pos: 100% 55%; }
  .sm-hero__media .sm-kc { position: relative; z-index: 2; width: min(460px, 64%); margin-left: -8px; box-shadow: var(--lift-3); }
  .sm-kc__size { bottom: 8px; }
}

/* ---------- Make Lab band: photo bleeds right ---------- */
.sm-labband { position: relative; overflow: hidden; padding: 0 0 var(--sec);
  background-image: linear-gradient(var(--lab-line) 1px, transparent 1px), linear-gradient(90deg, var(--lab-line) 1px, transparent 1px); background-size: 32px 32px; background-position: center; }
.sm-labband .sm-lead { color: #b3c2d8; }
.sm-labband__in { display: grid; gap: 20px; align-items: center; }
.sm-labband__media { order: -1; position: relative; margin: 0 calc(-1 * var(--bleed)); }
.sm-labband__ph { border-radius: 0; }
.sm-labband__ph::after { background: linear-gradient(transparent 60%, var(--lab)); }
@media (min-width: 960px) {
  .sm-labband { padding: 0; }
  .sm-labband__copy { padding: var(--sec) 0; }
  .sm-labband__media { order: 0; margin: 0 calc(-1 * var(--bleed)) 0 0; align-self: stretch; }
  .sm-labband__ph { position: absolute; inset: 0; aspect-ratio: auto; }
  .sm-labband__ph::after { background: linear-gradient(90deg, var(--lab), transparent 35%); }
}

/* ---------- Souvenirs & giveaways band (navy): copy + how-it-works chips, 2x2 occasion doors ---------- */
.sm-souv { background: var(--ink); color: #c9d4e6; }
.sm-souv .sm-h2 { color: #fff; max-width: 13em; }
.sm-souv__in { display: grid; gap: 24px; }
.sm-souv__copy > p { margin: 0 0 20px; max-width: 30em; font-size: 17px; }
.sm-souv__how { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; }
.sm-souv__how li { counter-increment: s; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; color: #fff; }
/* the step number: a small condensed tag above its chip (real steps, no leading zeros) */
.sm-souv__how li::before { content: counter(s); order: 0; padding: 4px 7px 3px; border-radius: var(--r-xs); background: rgba(255,255,255,.12); color: #fff; font: 800 13px/1 var(--f); font-variation-settings: 'wdth' 75; letter-spacing: .02em; } /* quiet label: orange stays on the page's main action */
.sm-souv__how span { order: 3; }
.sm-souv__how .sm-pchip { box-shadow: 0 0 0 2px var(--lab-2), 0 0 0 3.5px rgba(255,255,255,.18); }
.sm-souv__how .sm-pchip--icon { background: #fff; color: var(--ink); } /* a light disc like the photo chips */
.sm-souv__all { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
@media (hover: hover) and (pointer: fine) { .sm-souv__all:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px #fff; } }
.sm-souv__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sm-souv__grid .sm-tile { background: var(--lab-2); box-shadow: none; }
.sm-souv__grid .sm-ph { aspect-ratio: 1; }
.sm-souv__grid .sm-tile__t { transition: background-color var(--dur-1) ease; }
.sm-souv__grid .sm-tile__t small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.sm-souv__grid .sm-tile:focus-visible .sm-tile__t { background: var(--laser); }
@media (hover: hover) and (pointer: fine) { .sm-souv__grid .sm-tile:hover .sm-tile__t { background: var(--laser); } }
@media (max-width: 767px) { .sm-souv__grid .sm-tile__t { font-size: var(--fs-sm); left: 8px; bottom: 8px; padding: 5px 8px; } }
@media (min-width: 768px) { .sm-souv__how { max-width: 520px; } .sm-souv__how li { font-size: var(--fs-ui); } }
@media (min-width: 960px) {
  .sm-souv__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .sm-souv__grid { gap: 16px; }
  .sm-souv__grid .sm-ph { aspect-ratio: 4 / 3; }
}

/* ---------- How it's made: three machine loops on lab-dark cards, the card is the link ---------- */
.sm-mach .sm-section__head a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sm-mach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; --pp-pad: 8px; } /* --pp-pad: the card padding, for the pause button (motion.css) */
.sm-mach__card { display: block; height: 100%; padding: 8px; border-radius: var(--r-lg); background: var(--lab); color: #dfe8f5; box-shadow: var(--lift);
  transition: translate var(--dur-1) var(--ease-out), box-shadow var(--dur-1) ease, scale var(--dur-press) var(--ease-out); }
/* motion.js puts the pause button on the <li> (never inside the link), level with the HUD; it lifts with the card */
.sm-mach__list .smm-pp { transition: translate var(--dur-1) var(--ease-out), scale var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sm-mach__list > li:hover > .sm-mach__card { translate: 0 -2px; box-shadow: var(--lift-2); }
  .sm-mach__list > li:hover > .smm-pp { translate: 0 -2px; }
}
.sm-mach__card .sm-motion { border-radius: calc(var(--r-lg) - 8px); }
.sm-mach__b { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 6px; }
.sm-mach__b .sm-h3 { margin: 0; color: #fff; }
.sm-mach__b small { font-size: var(--fs-sm); color: #b3c2d8; }
@media (max-width: 767px) { .sm-mach__list { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; } .sm-mach__list::-webkit-scrollbar { display: none; } .sm-mach__list > li { scroll-snap-align: start; } }
@media (min-width: 768px) { .sm-mach__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- Recent orders: real orders on plain backdrops (SM_WORK_CLEAN), squares; from 768px the lead photo takes 2x2 ---------- */
.sm-made .sm-work { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sm-made .sm-work__item { margin: 0; }
.sm-made .sm-work__btn { height: 100%; display: flex; flex-direction: column; }
.sm-made .sm-work__btn img { aspect-ratio: 1; object-fit: cover; }
.sm-made .sm-work__cap { flex: 1; }
@media (min-width: 768px) {
  .sm-made .sm-work { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sm-made .sm-work__item:first-child { grid-column: span 2; grid-row: span 2; }
  .sm-made .sm-work__item:first-child .sm-work__btn img { flex: 1 1 0px; min-height: 0; aspect-ratio: auto; } /* 0px, not 0%: a % basis falls back to the photo's height and stretches the rows; the squares set them */
  .sm-made .sm-work__item:first-child .sm-work__cap { flex: none; } /* the photo takes the height, not the caption */
  .sm-made .sm-work__item:nth-child(n+6) { display: none; } /* lead (2x2) + four squares fill two rows exactly; phones show all six */
}