/* MODUVO 3D — clone storefront. Palette taken from the live theme (ink #1C1D45, white ground);
   green is reserved to mean "this product has a 3D model". */
:root {
  --ink:        #1C1D45;
  --ink-soft:   #5E5F7E;
  --ground:     #FFFFFF;
  --paper:      #F6F5F2;
  --surface:    #FFFFFF;
  --hairline:   #E3E1DC;
  --stage-a:    #E8E6E1;
  --stage-b:    #CFCCC5;
  /* The showroom sweep the 3D stage stands on. Deliberately a step deeper than the panel
     behind it: nearly everything in the range is white or near-white, and white on a
     near-white ground has no edge to it. */
  --sweep-near: #DAD6CF;
  --sweep-far:  #ADA89F;
  --accent:     #1C1D45;
  --accent-ink: #FFFFFF;
  --three-d:    #1F6F5C;
  --three-d-bg: rgba(31, 111, 92, 0.10);
  /* the only red on the site: a cart line the checkout will not take */
  --danger:     #A4231F;
  --danger-bg:  rgba(164, 35, 31, .08);
  --shadow:     0 1px 2px rgba(28, 29, 69, .06), 0 10px 30px rgba(28, 29, 69, .07);
  --maxw: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #ECEAF2;
    --ink-soft:   #A0A2BC;
    --ground:     #121324;
    --paper:      #181A2E;
    --surface:    #1C1E33;
    --hairline:   #2C2F4A;
    --stage-a:    #262940;
    --stage-b:    #0E0F1C;
    --sweep-near: #2E3252;
    --sweep-far:  #14162A;
    --accent:     #C9C8E8;
    --accent-ink: #14152A;
    --three-d:    #5CC9A6;
    --three-d-bg: rgba(92, 201, 166, .14);
    --danger:     #FF9E97;
    --danger-bg:  rgba(255, 158, 151, .12);
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --ink:        #ECEAF2;
  --ink-soft:   #A0A2BC;
  --ground:     #121324;
  --paper:      #181A2E;
  --surface:    #1C1E33;
  --hairline:   #2C2F4A;
  --stage-a:    #262940;
  --stage-b:    #0E0F1C;
  --sweep-near: #2E3252;
  --sweep-far:  #14162A;
  --accent:     #C9C8E8;
  --accent-ink: #14152A;
  --three-d:    #5CC9A6;
  --three-d-bg: rgba(92, 201, 166, .14);
  --danger:     #FF9E97;
  --danger-bg:  rgba(255, 158, 151, .12);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: Assistant, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------------- chrome ---------------- */
.announce {
  background: var(--ink); color: var(--ground); text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 12px;
}
.masthead { border-bottom: 1px solid var(--hairline); background: var(--ground); position: sticky; top: 0; z-index: 30; }
/* the direct child only — the menu panel has its own .shell and must not inherit the
   bar's flex layout or its 66px height */
.masthead > .shell { display: flex; align-items: center; gap: 20px; height: 66px; }
.wordmark {
  display: inline-flex; align-items: center; margin-right: auto; color: var(--ink);
}
/* The lockup is inline SVG rather than an <img> so it takes currentColor: the masthead
   is white in light and #121324 in dark, and a black logo would vanish in one of them. */
.wordmark .logo { height: 26px; width: auto; display: block; }
@media (max-width: 640px) { .wordmark .logo { height: 22px; } }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: Assistant, sans-serif; font-size: 14.5px; font-weight: 600;
  color: var(--ink); background: none; border: 1px solid var(--hairline);
  border-radius: 3px; padding: 8px 14px;
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle .bars {
  width: 15px; height: 9px; position: relative; display: inline-block;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.masthead > .shell .out { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.masthead .out:hover { color: var(--ink); }

.site-menu {
  border-top: 1px solid var(--hairline); background: var(--surface);
  box-shadow: var(--shadow); max-height: 78vh; overflow-y: auto;
}
.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px; padding: 26px 22px 30px;
}
@media (max-width: 1100px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .menu-grid { grid-template-columns: minmax(0, 1fr); } }
.menu-col h3 {
  font-family: Archivo, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.menu-col a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  text-decoration: none; font-size: 14.5px; padding: 7px 0; color: var(--ink);
  border-bottom: 1px solid transparent;
}
.menu-col a:hover { color: var(--three-d); }
.menu-col a[aria-current="page"] { font-weight: 600; }
.menu-col a span {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.menu-col.tools a { display: block; padding: 9px 0; }
.menu-col.tools strong { display: block; font-size: 14.5px; font-weight: 600; }
.menu-col.tools em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
body.menu-open { overflow: hidden; }

footer.site {
  margin-top: 64px; border-top: 1px solid var(--hairline); background: var(--paper);
  padding: 30px 0 44px; font-size: 13.5px; color: var(--ink-soft);
}
footer.site .shell { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; }
footer.site a { color: var(--ink-soft); }

/* ---------------- home ---------------- */
/* The hero was a photograph of a team that does not exist, in a warehouse that is not
   ours, wearing five different approximations of the logo. It is the mark itself now, on
   the brand navy, lit the way the product renders are — so there is nothing in it that is
   not true. The panel is always dark, in either theme, so the logo is set light here
   rather than taking currentColor. */
.hero {
  position: relative; margin-top: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, #23264a 0%, #14152e 58%, #0E0F1F 100%);
}
.hero .copy {
  display: grid; place-content: center; justify-items: center; text-align: center;
  color: #F4F2ED; padding: clamp(56px, 11vw, 108px) 20px;
  min-height: clamp(300px, 40vw, 460px); box-sizing: border-box;
}
.hero .logo {
  width: min(340px, 62vw); height: auto; display: block;
  margin: 0 0 clamp(26px, 4vw, 40px); color: #F4F2ED;
}
.hero .tagline {
  font-family: Archivo, sans-serif; font-size: 17px; font-weight: 500;
  letter-spacing: .01em; opacity: .72; margin: 10px 0 0;
}
.hero h1 {
  font-family: Archivo, sans-serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(30px, 5vw, 52px); margin: 0 0 18px; text-wrap: balance;
}
.btn {
  display: inline-block; font-family: Assistant, sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: 12px 26px; border: 1px solid currentColor; border-radius: 2px; background: none; color: inherit;
}
.hero .btn { background: #fff; color: #16172E; border-color: #fff; }
.btn.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--three-d); outline-offset: 2px; }

.strip { padding: 54px 0 8px; }
.strip .lede { max-width: 62ch; margin: 0 auto 34px; text-align: center; color: var(--ink-soft); font-size: 17px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 46px 0 18px; }
.section-head h1, .section-head h2 {
  font-family: Archivo, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0;
}
.section-head .more { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }

.how {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 24px 24px 8px; margin-top: 30px;
}
.how .section-head { margin-top: 0; }
.steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px;
}
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 6px; }
.steps li::before {
  content: counter(step); font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--ink-soft); border-top: 2px solid var(--three-d); padding-top: 8px;
  width: 100%; letter-spacing: .1em;
}
.steps strong { font-family: Archivo, sans-serif; font-size: 15px; letter-spacing: -.01em; }
.steps span { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.steps a { color: inherit; text-underline-offset: 3px; }
.swatches { display: flex; gap: 5px; margin-top: 10px; }
.swatches .sw {
  width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--hairline);
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.card { text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.card .thumb {
  position: relative; aspect-ratio: 1 / 1; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.card .thumb .elevation { width: 100%; height: 100%; color: var(--ink-soft); padding: 10%; }
.elevation-main { width: 100%; }
.elevation-main .elevation { width: 100%; max-height: 380px; color: var(--ink-soft); padding: 4%; }
.card h2, .card h3 { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.3; }
.card .price { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.collection-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; padding: 16px; text-decoration: none; border-radius: 3px;
  border: 1px solid var(--hairline); background: var(--paper);
}
.collection-tile:hover { border-color: var(--ink); }
.collection-tile strong { font-family: Archivo, sans-serif; font-size: 16px; font-weight: 600; }
.collection-tile span { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-soft); }

/* ---------------- product ---------------- */
.crumbs { font-size: 13px; color: var(--ink-soft); padding: 20px 0 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
@media (max-width: 940px) { .product { grid-template-columns: minmax(0, 1fr); } }

.stage {
  position: relative; height: clamp(340px, 54vh, 560px); overflow: hidden;
  border: 1px solid var(--hairline); border-radius: 3px;
  background: radial-gradient(120% 88% at 50% 6%, var(--stage-a) 0%, var(--stage-b) 100%);
}
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.stage .poster { position: absolute; inset: 0; margin: auto; max-height: 92%; width: auto; opacity: .92; transition: opacity .25s ease; }
/* The still is a different camera and light from the live model, so showing it while the
   model loads reads as one picture flashing into another. It stays hidden unless the
   model is slow (4s) or cannot load at all — then it is the picture. */
.stage[data-model]:not(.ready):not(.no-3d) .poster { opacity: 0; animation: poster-late .3s ease 4s forwards; }
@keyframes poster-late { to { opacity: .92; } }
.stage.ready .poster { opacity: 0; pointer-events: none; }
.stage .hint {
  position: absolute; left: 12px; bottom: 10px; margin: 0; pointer-events: none;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ground) 70%, transparent); padding: 4px 8px; border-radius: 2px;
}
.gallery { display: grid; gap: 12px; }
.gallery .main {
  border: 1px solid var(--hairline); border-radius: 3px; background: var(--paper);
  aspect-ratio: 4 / 3; display: grid; place-content: center; overflow: hidden;
}
.gallery .main img { max-height: 100%; object-fit: contain; }
.gallery .thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery .thumbs img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 3px; background: var(--paper); cursor: pointer; }
.no-model {
  font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0;
  padding-left: 10px; border-left: 2px solid var(--hairline);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.toolbar .divider { width: 1px; align-self: stretch; background: var(--hairline); margin: 2px 4px; }
.toolbar button {
  font-family: Assistant, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 7px 13px; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.toolbar button:hover { border-color: var(--three-d); }
.toolbar button[aria-pressed="true"] { background: var(--three-d); border-color: var(--three-d); color: #fff; }
.views { display: flex; gap: 6px; }
.views button { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: 12px; padding: 7px 10px; }
.views button.on { background: var(--three-d-bg); border-color: var(--three-d); color: var(--ink); }

.buy .vendor {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.buy h1 {
  font-family: Archivo, sans-serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 33px);
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 10px; text-wrap: balance;
}
.buy .price { font-family: "IBM Plex Mono", monospace; font-size: 19px; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.buy .tax { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 22px; }
.optset { margin-bottom: 20px; }
.optset h2, .spec-block h2 {
  font-family: Archivo, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 9px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 13.5px; padding: 7px 13px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--ground); }
a.chip { text-decoration: none; display: inline-block; }
a.chip:hover { border-color: var(--ink); }
.chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--ground); cursor: default; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.swatch { padding: 0; border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; background: none; cursor: pointer; display: block; }
.swatch .chipcolor { display: block; height: 32px; }
.swatch .name { display: block; font-size: 9.5px; line-height: 1.25; padding: 4px 3px 5px; color: var(--ink-soft); background: var(--surface); text-align: center; }
.swatch[aria-pressed="true"] { border-color: var(--three-d); box-shadow: 0 0 0 2px var(--three-d-bg); }
.swatch[aria-pressed="true"] .name { color: var(--ink); }

.cta { display: grid; gap: 10px; margin: 22px 0 8px; }
.note { font-size: 12.5px; color: var(--ink-soft); }

.spec-block { margin-top: 30px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; }
.rows dt { color: var(--ink-soft); font-size: 13.5px; }
.rows dd { margin: 0; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.desc { margin-top: 34px; max-width: 68ch; }
.desc h2 { font-family: Archivo, sans-serif; font-size: 18px; margin: 0 0 10px; }
.desc p, .desc li { color: var(--ink-soft); }
.desc ul { padding-left: 20px; }
.desc a { color: var(--ink); }

.related { margin-top: 56px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ---------------- cart & enquiry ---------------- */
.cart-table { width: 100%; max-width: 640px; border-collapse: collapse; }
.cart-table td { padding: 12px 8px; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
.cart-table tfoot td { font-weight: 600; border-bottom: none; }
.cart-table .amt { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.cart-table .qty { display: flex; align-items: center; gap: 8px; }
.cart-table .qty button {
  width: 26px; height: 26px; border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink); border-radius: 3px; cursor: pointer; line-height: 1;
}
.cart-table .link { background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 13px; text-decoration: underline; padding: 0; }
/* The checkout bar — every page but the cart, once there is something in the cart. Fixed
   to the bottom because that is where a thumb is; cart.js adds .has-checkout-bar to the
   body so the page can still scroll clear of it. */
.checkout-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--hairline);
  box-shadow: 0 -2px 24px rgba(28, 29, 69, .10);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.checkout-bar-row {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.checkout-bar-sum { display: grid; gap: 1px; text-decoration: none; color: var(--ink); font-size: 13px; }
.checkout-bar-sum strong { font-size: 14px; }
.checkout-bar-sum span {
  color: var(--ink-soft); font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.checkout-bar .btn { white-space: nowrap; }
.checkout-bar .btn[disabled] { opacity: .55; cursor: progress; }
.checkout-bar-error {
  max-width: var(--maxw); margin: 0 auto 8px; font-size: 12.5px;
  color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: 3px; padding: 8px 10px;
}
body.has-checkout-bar { padding-bottom: 78px; }
@media (max-width: 560px) {
  .checkout-bar { padding-left: 12px; padding-right: 12px; }
  .checkout-bar .btn { padding-left: 20px; padding-right: 20px; }
}

/* Card checkout sits above the enquiry form: it is the way most orders should finish, and
   the enquiry is the fallback for the cabinets we have not priced. */
#cart-actions { max-width: 640px; margin-top: 22px; }
.pay-row { margin: 0 0 10px; }
.pay-row .btn { width: 100%; max-width: 320px; text-align: center; }
.pay-row .btn[disabled] { opacity: .55; cursor: progress; }
.pay-error {
  color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: 3px; padding: 9px 11px; margin: 0 0 12px; max-width: 460px;
}
.quote { margin-top: 34px; border-top: 1px solid var(--hairline); padding-top: 22px; max-width: 640px; }
.quote h2 { font-family: Archivo, sans-serif; font-size: 18px; margin: 0 0 6px; }
.quote .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 14px; }
@media (max-width: 560px) { .quote .fields { grid-template-columns: minmax(0, 1fr); } }
.quote label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.quote label.wide { display: block; }
.quote input, .quote textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 9px 11px;
}
.quote textarea { margin-top: 5px; resize: vertical; }
.quote input:focus-visible, .quote textarea:focus-visible { outline: 2px solid var(--three-d); outline-offset: 1px; }

/* ---------------- policy pages ---------------- */
.desc.legal { max-width: 72ch; }
.desc.legal h2 { font-size: 26px; margin-bottom: 18px; }
.desc.legal h3 { font-family: Archivo, sans-serif; font-size: 16px; margin: 26px 0 6px; color: var(--ink); }
.desc.legal p, .desc.legal li { color: var(--ink-soft); }

.toolbar button.layer[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

.toolbar button[disabled] { opacity: .45; cursor: default; }

/* ---------------- configurator ---------------- */
.configurator { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
@media (max-width: 900px) { .configurator { grid-template-columns: minmax(0, 1fr); } }
.configurator .stage { height: clamp(380px, 58vh, 620px); }
.cfg { display: flex; flex-direction: column; gap: 18px; }
.cfg .optset { margin: 0; }
.cfg input[type="range"] { width: 100%; accent-color: var(--three-d); }
.cfg-value { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.bays { display: grid; gap: 10px; }
.bays label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.bays select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 8px 10px;
}
.bom-wrap { overflow-x: auto; }
.cart-table.bom { max-width: 720px; }
.cart-table.bom th {
  text-align: left; font-family: Archivo, sans-serif; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); padding: 8px; border-bottom: 1px solid var(--hairline);
}
.cart-table.bom th.amt { text-align: right; }

#picker-kind {
  font: inherit; font-size: 14px; width: 100%; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 8px 10px; margin-bottom: 12px;
}
.picker { max-height: 340px; overflow-y: auto; align-content: start; }
.picker .chip { display: flex; gap: 8px; justify-content: space-between; width: 100%; font-size: 13px; }
.picker .chip span { font-family: "IBM Plex Mono", monospace; color: var(--ink-soft); }

.cart-table .line-opts {
  display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px;
}
.checkout { margin: 18px 0 0; }
.checkout .btn { width: 100%; text-align: center; }

/* The photographs that sit under a product's 3D viewer. */
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.shots .shot {
  width: 58px; height: 58px; padding: 0; display: grid; place-content: center;
  border: 1px solid var(--hairline); border-radius: 3px; background: var(--paper);
  cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .06em; color: var(--ink-soft);
}
.shots .shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shots .shot.on { border-color: var(--ink); color: var(--ink); }
.stage .photo {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; background: var(--paper);
}

/* Touch targets. Every control on a product page is a 34px button, which is fine under a
   mouse and under the 44px both Apple and Google ask for on a finger — and this whole
   catalogue is chosen on a phone. Only the pointer-coarse case is padded, so the desktop
   layout is untouched. */
@media (hover: none) and (pointer: coarse) {
  .toolbar button,
  .chip,
  .views button,
  .shots .shot { min-height: 44px; }
  .swatch .chipcolor { height: 40px; }
  .cart-table .qty button { min-width: 40px; min-height: 40px; }
}