/* Product page, cart, checkout and confirmation. Loaded after shared.css, whose variables, header, showroom control,
   buttons, badges, form fields and footer these pages use unchanged. Mobile-first: 390px has no sideways scroll. */

main{display:block}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:8px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* ---- product page ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-block:18px 48px}
.pdp .info{display:grid;gap:14px;align-content:start;min-width:0}
.pdp h1{font-size:clamp(24px,5.6vw,34px);line-height:1.12}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.price b{font-weight:600;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{color:var(--ink-3);font-size:13.5px}
.availrow{margin-top:-4px}
.availrow .avail{font-size:13px;padding:5px 11px;white-space:normal}
.chip{height:34px;padding:0 14px;font-weight:600;border:1.5px solid var(--line-2);border-radius:999px;font-size:13.5px;white-space:nowrap}
.chip:hover{border-color:var(--ink-2)}

/* the drawing: ImageOne's views, on a light sheet */
.stage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px 12px;color:#2A333B;min-width:0}
/* A FIXED stage (Amro, 2026-10-13): its size never depends on the selected door. Each view is drawn to the stage's
   height (ImageOne's viewBox is the door's own height plus its margins, so 6'8", 7'0" and 8'0" fill nearly the same
   height), and a wider door only grows wider, centred; the widest pair is narrowed to fit rather than the box
   growing. The plan, the caption and the photos below keep their places: every row has a set height. */
.stage{--arth:230px;--planh:120px;--notesh:7.2em}
.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}
.views.one{grid-template-columns:minmax(0,1fr);justify-items:center}
.views figure,.planfig{margin:0;display:grid;grid-template-rows:auto 18px;gap:6px;justify-items:center;min-width:0;width:100%}
.art{width:100%;height:var(--arth);display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.art svg{height:100%;width:auto;max-width:100%;display:block}
.art.plan{height:var(--planh)}
.planfig{margin-top:10px;padding-top:10px;border-top:1px dashed #DDE1E4;box-sizing:content-box;height:calc(var(--planh) + 24px);align-content:start}
.views figure{height:calc(var(--arth) + 24px);align-content:end}
.planfig.noplan{visibility:hidden}
.stage figcaption{font-size:12.5px;font-weight:600;color:#565F67;text-align:center;line-height:18px;height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.artnotes{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid #DDE1E4;display:grid;align-content:start;gap:3px;font-size:13px;line-height:1.35;color:#565656;height:var(--notesh);overflow:hidden}
.artnotes li:first-child{color:#2A333B;font-weight:600}
/* A slab or bifold (.pic.solo): its one view takes the plan's room too, so it fills the stage above the notes, centred,
   with no caption and no empty plan box. Before the choices (.pic.blank) the plain slab fills the whole stage with one
   quiet line under it, no notes and no divider. Both add up to a prehung door's rows, so the stage never changes size:
   views (arth + 24) + plan (planh + 45: margin, border, padding, caption) + notes (12 + notesh, border-box, in 13px). */
.pic.solo .views figure{height:calc(var(--arth) + var(--planh) + 69px);grid-template-rows:minmax(0,1fr);align-content:stretch}
.pic.blank .views figure{font-size:13px;height:calc(var(--arth) + var(--planh) + 81px + var(--notesh));grid-template-rows:minmax(0,1fr) 18px;align-content:stretch}
.pic.solo .art,.pic.blank .art{height:100%;align-items:center;box-sizing:border-box;padding-block:8px}
.stage figcaption.hint{font-weight:400;color:var(--ink-3)}

/* pickers */
.picks{display:grid;gap:0;border-top:1px solid var(--line)}
.pick{border:0;margin:0;padding:14px 0;border-bottom:1px solid var(--line);min-width:0;display:grid;gap:8px}
.pick legend{float:left;width:100%;display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:14.5px;margin-bottom:8px;padding:0}
.pick legend .pv{font-weight:400;color:var(--ink-3);font-size:13.5px;text-align:right}
.pick>*:not(legend){clear:both}
.sublab{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:58px;min-height:40px;padding:0 11px;border:1.5px solid var(--line-2);border-radius:8px;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums;background:var(--sheet)}
.pill:hover{border-color:var(--ink-2)}
.pill[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pill small{font-size:11px;font-weight:400;opacity:.75}
.pill:disabled{opacity:.35;cursor:not-allowed}
.pill.wide{flex:1 1 140px;justify-content:space-between;padding:10px 12px}
.pill.wide[aria-pressed="true"]{background:var(--sheet);color:var(--ink);border-color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.pill .sw{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.25);flex:none}
.pick.locked .pills{opacity:.8}
.pnote{font-size:12.5px;color:var(--ink-3);margin:0}
.pick.locked .pv{color:var(--ink);font-weight:600}
/* Unconfigured page (Amro, 2026-10-13): an unfilled group says a quiet "Choose one"; a group waiting on an earlier one
   says what to choose first; the big price is a starting price until every group is chosen. */
.pick legend .pv .choose{font-style:italic;color:var(--ink-3)}
.pick.waiting legend{color:var(--ink-2)}
.pnote.gate{margin:0 0 6px}
.price b.from{font-size:26px}

/* quantity + add */
.addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-top:4px}
.qty{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.qbox{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;height:46px;overflow:hidden;background:var(--sheet)}
.qbox button{width:40px;height:100%;font-size:18px;color:var(--ink)}
.qbox input{width:48px;height:100%;border:0;text-align:center;background:transparent;font-weight:600;font-size:16px;-moz-appearance:textfield;appearance:textfield}
.qbox input::-webkit-outer-spin-button,.qbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.addrow .btn{flex:1 1 100%}
/* Add to cart becomes a stepper in place (Amro, 2026-10-13): same width and height as the button, red filled. */
.stepper{flex:1 1 100%;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;height:46px;border-radius:999px;background:var(--red);color:#fff;overflow:hidden}
.stepper button{height:100%;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:600;line-height:1}
.stepper button:hover{background:rgba(0,0,0,.14)}
.stepper button:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:999px}
.stepper button:disabled{opacity:.45}
.stepper button svg{width:18px;height:18px}
.stepper .n{text-align:center;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.stepper.fresh{animation:stepin .28s ease-out}
@keyframes stepin{from{transform:scaleX(.96);background:var(--char)}to{transform:none}}
.addnote{flex:1 1 100%;margin:0;font-size:13px;color:var(--ink-2);text-align:center}
.addnote a{font-weight:600;color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.stepper.fresh{animation:none}}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.custom{font-size:13.5px;color:var(--ink-2);background:var(--alt);border-radius:10px;padding:12px 14px}
.custom b{font-weight:600;color:var(--ink)}

/* moulding */
.mtile{display:grid;place-items:center;align-content:center;gap:6px;min-height:130px;background:repeating-linear-gradient(90deg,#EFE6D8 0 22px,#E9DECD 22px 23px);border-radius:10px;color:#2A333B;padding:20px;text-align:center}
.mdims{font-weight:600;font-size:18px}
.mimg{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:1;margin:0 auto;object-fit:contain}
.mspec{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-size:14px}
.mspec dt{color:var(--ink-3)}.mspec dd{margin:0}
.lengths{display:grid;gap:8px}
.related h2{font-size:17px;margin-bottom:8px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.related li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.related li span{color:var(--ink-3);font-size:13px}
.related a{font-weight:600;text-decoration:none}
.related a:hover{text-decoration:underline}

@media (min-width:900px){
  .pdp{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:40px;padding-block:28px 72px}
  .pdp .stage{position:sticky;top:96px;align-self:start;padding:24px 20px 16px;--arth:340px;--planh:128px;--notesh:5.6em}
}

/* ---- cart, checkout, confirmation ---- */
.shophead{padding-block:22px 6px;display:grid;gap:6px}
.shophead h1{font-size:clamp(28px,6vw,42px)}
.shophead p{color:var(--ink-2)}
.cartgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:14px 56px}
.lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cartlines{min-width:0}
.cartnote{margin-top:10px}
.cline{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cline .pic{background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;align-self:start;display:grid;place-items:center;overflow:hidden}
.cline .pic svg{width:100%;height:auto;display:block}
.cline .pic.m{aspect-ratio:134/189;background:repeating-linear-gradient(90deg,#EFE6D8 0 12px,#E9DECD 12px 13px);color:#2A333B;font-size:11px;font-weight:600;text-align:center;padding:6px}
.cline .body{display:grid;gap:6px;min-width:0}
.cline h2{font-size:15.5px;line-height:1.3;letter-spacing:-.005em}
.cline h2 a{text-decoration:none}.cline h2 a:hover{text-decoration:underline}
.lopts{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin:0;font-size:13px}
.lopts dt{color:var(--ink-3)}.lopts dd{margin:0;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.cline .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:2px}
.cline .row .qbox{height:44px}
.cline .row .qbox button{width:44px}.cline .row .qbox input{width:40px}
.cline .amt{font-weight:600;font-variant-numeric:tabular-nums}
.cline .amt small{display:block;font-weight:400;color:var(--ink-3);font-size:12px;text-align:right}
.rm{justify-self:start;font-size:14px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding-inline:2px;margin-block:-10px -12px}
.rm:hover{color:var(--red)}
.summary{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px;align-self:start}
.summary h2{font-size:18px}
.sumrow{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.sumrow b{font-variant-numeric:tabular-nums}
.sumrow.total{font-size:18px;font-weight:600;border-top:1px solid var(--line);padding-top:12px}
.taxnote{font-size:13px;color:var(--ink-2);background:var(--alt);border-radius:8px;padding:10px 12px}
.summary .btn{width:100%}
.storeline{font-size:14px;color:var(--ink-2)}
.storeline b{color:var(--ink)}
.storeline a{color:var(--red);font-weight:600}
.warnline{font-size:13px;color:var(--red);font-weight:600}
.empty{padding:32px 0 56px;display:grid;gap:14px;justify-items:start}
.minisum{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}
.minisum li{display:flex;justify-content:space-between;gap:12px}
.minisum li span:first-child{min-width:0}
.minisum small{display:block;color:var(--ink-3);font-size:12px}
.co .form{gap:16px}
.co .field input[type=text],.co .field input[type=tel],.co .field input[type=email],.co .field textarea{font-size:16px}
.co .field textarea{min-height:100px}
.hint{font-size:12.5px;color:var(--ink-3);font-weight:400}
.addr{display:grid;gap:14px}
.co form:has(#ful-pickup:checked) .addr,.addr[hidden]{display:none}
/* checkout, one column, 390 px first (Amro, 2026-10-13) */
.coflow{display:grid;gap:14px;max-width:640px;margin-inline:auto;padding-block:6px 56px}
.co .shophead{max-width:640px;margin-inline:auto}
.costep{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:14px}
.costep h2{font-size:18px}
.costep h2 .hint{margin-left:6px}
.ferr{font-size:13px;color:var(--red);font-weight:600;margin:0}
.ferr[hidden]{display:none}
.formerr{background:var(--sheet);border:1.5px solid var(--red);border-radius:10px;padding:10px 12px}
.co .field [aria-invalid=true]{border-color:var(--red)}
.co .field select{width:100%;min-height:44px;border:1.5px solid var(--line-2);border-radius:8px;padding:10px 8px;background:var(--paper);font-size:16px}
.fulcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fulcard{position:relative;display:grid;align-content:start;gap:4px;padding:14px 12px 14px 40px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--paper);cursor:pointer;min-height:96px}
.fulcard input{position:absolute;left:12px;top:15px;margin:0;width:18px;height:18px;accent-color:var(--red)}
.fulcard b{font-size:15.5px;line-height:1.25}
.fulcard .sub{font-size:13px;color:var(--ink-2);line-height:1.35}
.fulcard .tag{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.fulcard:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.fulcard:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.delnote{font-size:13.5px;color:var(--ink-2);background:var(--alt);border-radius:8px;padding:10px 12px;margin:0}
.arow{display:grid;grid-template-columns:minmax(0,1fr) 84px 96px;gap:10px;align-items:start}
.arow .field{align-content:start}
.asearch{position:relative}
.asugg{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;margin:4px 0 0;padding:4px;background:var(--paper);border:1.5px solid var(--line-2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.asugg li{display:grid;gap:1px;padding:10px;border-radius:6px;cursor:pointer;font-size:14.5px}
.asugg li small{color:var(--ink-3);font-size:12.5px}
.asugg li.on,.asugg li:hover{background:var(--alt)}
.rlines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rlines li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:start;font-size:14px}
.rlines .rtext{display:grid;gap:2px;min-width:0}
.rlines .rtext a{font-weight:600;color:var(--ink);text-decoration:none}
.rlines small{color:var(--ink-3);font-size:12.5px}
.rlines b{font-variant-numeric:tabular-nums}
.rpic{background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px;display:grid;place-items:center;overflow:hidden;aspect-ratio:134/189}
.rpic svg,.rpic img{width:100%;height:auto;display:block}
.rpic.m{aspect-ratio:1}
.review .sumrow.ful span{color:var(--ink-2)}
.review>.link{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-block:-8px}
.co .sendrow .btn{min-height:54px;font-size:16.5px}
@media (max-width:380px){.fulcards{grid-template-columns:1fr}.fulcard{min-height:0}}
.sendrow{display:grid;gap:8px}
.sendrow .btn{width:100%}
.done{padding-block:28px 64px;display:grid;gap:18px;max-width:720px}
.sent{max-width:640px;margin-inline:auto;gap:14px}
.sentHead{display:grid;gap:8px}
.qmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-3);margin:0}
.qmeta b{color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.done h1{font-size:clamp(28px,6.5vw,44px)}
.done .lead{font-size:17px;color:var(--ink-2)}
.qno{display:inline-flex;align-items:baseline;gap:10px;font-size:14px;color:var(--ink-3)}
.qno b{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:14.5px;color:var(--ink-2)}
.steps li::before{content:counter(s);width:24px;height:24px;border-radius:999px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
@media (min-width:900px){
  .cartgrid{grid-template-columns:minmax(0,1fr) 360px;gap:40px}
  .cline{grid-template-columns:120px minmax(0,1fr)}
  .summary{position:sticky;top:96px}
}
.ccount{min-width:22px;height:22px;border-radius:999px;background:var(--red);color:#fff;display:inline-grid;place-items:center;font-size:12px;font-weight:600;padding:0 6px}
.ccount[hidden]{display:none}
.ccount.pulse{animation:cpulse .5s ease-out}
@keyframes cpulse{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ccount.pulse{animation:none}}

.stagecol{display:grid;gap:12px;align-content:start;min-width:0}
@media (min-width:900px){.pdp .stagecol{position:sticky;top:120px;align-self:start}.pdp .stagecol .stage{position:static}}

/* Door type (Single | Double) and a pair's width chips: the opening, with the two leaves under it */
.pills.seg .pill.wide{justify-content:center;flex:1 1 0}
.pill.two{padding:6px 11px}
.pill.two span{display:grid;justify-items:center;line-height:1.2}
.pill.two em{font-style:normal;font-weight:400;font-size:10.5px;opacity:.75}

/* ---- the configurator's option grids (Amro, 2026-10-13): equal cells in fixed columns, ascending, never staggered. Single widths: 6 columns on desktop, 3 on phone.
   Size cells: the size, its inches, and a delta line reserved even when empty, so every cell is the same height. ---- */
.cells{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
.cells.c1{grid-template-columns:minmax(0,1fr)}
.cells.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells.widths{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells.heights{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (min-width:700px){.cells.widths{grid-template-columns:repeat(6,minmax(0,1fr))}.cells.widths.dbl{grid-template-columns:repeat(4,minmax(0,1fr))}.cells.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{display:grid;grid-template-rows:auto auto 15px;justify-items:center;align-content:center;gap:1px;min-width:0;min-height:58px;padding:7px 6px 5px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--sheet);text-align:center;font-variant-numeric:tabular-nums;color:var(--ink)}
.cell:hover{border-color:var(--ink-2)}
.cell b{font-weight:600;font-size:14px;line-height:1.25;max-width:100%}
.cells.widths .cell b,.cells.heights .cell b,.cell .sub,.cell .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cell .sub{font-size:11px;color:var(--ink-3);line-height:1.3}
.cell .d{font-size:11px;font-weight:600;color:var(--ink-2);line-height:15px}
.cell[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);background:var(--sheet)}
.cell[aria-pressed="true"] b{color:var(--ink)}
.cell:disabled{opacity:.35;cursor:not-allowed}
.cell.has-sw{grid-template-rows:auto auto 15px}
.cell .sw{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.25)}
.cell.type b{font-size:15px}
.cell.type .sub{font-size:12.5px;color:var(--ink-2)}
.cells.widths.dbl .cell{min-height:70px}
/* Availability on each width cell (Amro, 2026-10-13), three states: green dot = commonly stocked; amber dot, normal
   text = likely special order (not out of stock, never greyed); no dot, lighter grey = may not be offered. */
.cell .dot,.wlegend .dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--dot-ok);margin-right:4px;vertical-align:1px}
.cell .dot.special,.wlegend .dot.special{background:var(--dot-special)}
.wlegend .dot{margin-left:2px}
.cell.av-unsold b{font-weight:500;color:var(--ink-3)}
.cell.av-unsold .sub{opacity:.75}
.wlegend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px}
.wlegend .key{font-weight:400;font-size:12px;color:var(--ink-3)}

/* ---- Products pages: /products/ and the six category pages (src/listing.ts); the tile itself is in shared.css ---- */
.listing{padding-top:18px;padding-bottom:48px}
.listing h1{margin:6px 0 4px}
.listing .count{margin:0 0 18px;color:var(--ink-3);font-size:14px}
.ptiles.cats .pname{font-size:17px}

/* ---- phones (<= 768 px): the pinned Add to cart (product-page.js); the price rides on its button ---- */
.mbar{display:none}
@media (max-width:768px){
  .mbar:not([hidden]){display:flex;flex-wrap:wrap;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--sheet);border-top:1px solid var(--line);box-shadow:0 -4px 12px rgba(20,28,36,.08)}
  .mbar .btn,.mbar .stepper{flex:1 1 100%}
}
/* ---- under 900 px: the render bar (product.js renderBar, product-page.js place). Pinned under the sticky header once
   the stage has scrolled away: the door being built (ImageOne, 96 px tall), the price, and one line of the choices.
   Fixed, so it never moves the page; it fades in, and not at all with reduced motion. Off on desktop, where the
   stage itself is sticky. ---- */
.minibar{display:none}
@media (max-width:899px){
  .minibar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;top:64px;z-index:24;width:100%;margin:0;
    padding:8px var(--gut);background:var(--sheet);border:0;border-bottom:1px solid var(--line);box-shadow:0 4px 12px rgba(20,28,36,.08);
    font:inherit;color:var(--ink);text-align:left;cursor:pointer;visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s linear .16s}
  .minibar.on{visibility:visible;opacity:1;transform:none;transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s}
  .minibar:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
  .mbart{flex:none;height:96px;min-width:44px;max-width:112px;display:flex;align-items:center;justify-content:center;color:#2A333B}
  .mbart svg{height:100%;width:auto;max-width:112px;display:block}
  .mbtxt{display:grid;gap:2px;min-width:0}
  .mbprice{font-weight:600;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .mbsum{font-size:13px;line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pdp.door .stage{scroll-margin-top:76px}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.minibar,.minibar.on{transition:none;transform:none}}
.smslink{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;margin-left:6px;border:1.5px solid var(--line-2);border-radius:999px;font-weight:600;font-size:.92em;white-space:nowrap;text-decoration:none;color:var(--ink)}

/* /products/: the eighth tile, "Plenty more by special order" (the selected store's call and text links) */
.moretile{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;height:100%;padding:12px;border:1px dashed var(--line-2);border-radius:12px;background:var(--sheet);color:var(--ink)}
.moreic{color:var(--red);background:var(--paper-2)}
.moreic svg{width:34%;height:34%}
.morelinks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;font-weight:600}
.morelinks a{color:var(--red);text-decoration:none}
.morelinks a:hover{text-decoration:underline}
.ptile .morelinks a{display:inline;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--red)}

/* checkout: "Send to <store>" while Odoo creates the quote (public/checkout.js sending) */
form.locked .card,form.locked .sendrow .formnote{opacity:.6;pointer-events:none}
.sending{display:grid;justify-items:center;gap:2px;text-align:center;color:var(--ink)}
.sline{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:15px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slow{margin:0;font-size:14px;color:var(--red)}
/* Phone pass (2026-10-14): breadcrumbs and the related list are 44 px tap targets (the whole related row is the
   link), the text-the-store pill taps at 44 px (its look unchanged), and the cart reserves room while its lines render so the footer doesn't
   jump (it was Lighthouse's whole layout shift on the cart, 0.185). */
.crumbs a{display:inline-block;padding-block:14px;margin-block:-14px}
.related li{position:relative}
.related a::after{content:"";position:absolute;inset:0}
.smslink{position:relative}
.smslink::after{content:"";position:absolute;inset:-6px -2px}
#cartbody{min-height:60vh}

/* Hidden online at the selected store (product.js hiddenHTML): where else it can be had, as store buttons. */
.pdp.hiddenhere { display: block; max-width: 640px; }
.pdp.hiddenhere .storepick { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pdp.hiddenhere .pnote { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; }

/* "About this door / moulding" (src/product-about.ts): specs, what's included, the description and three questions,
   below the configurator, outside #pdp. Plain reading text; one column on a phone, specs beside the text from 900px. */
.about{padding-block:8px 56px;border-top:1px solid var(--line)}
.about h2{font-size:22px;margin:28px 0 14px}
.about h3{font-size:15px;margin:18px 0 8px}
.about .about-specs h3:first-child{margin-top:0}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px}
.about .specs{margin:0;border-top:1px solid var(--line)}
.about .specs div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.about .specs dt{color:var(--ink-3)}
.about .specs dd{margin:0;overflow-wrap:anywhere}
.about-text{max-width:68ch}
.about-text p{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.about .faq{border-top:1px solid var(--line);max-width:68ch}
.about .faq details{border-bottom:1px solid var(--line)}
.about .faq summary{cursor:pointer;font-weight:600;padding:12px 0;min-height:44px;box-sizing:border-box}
.about .faq details p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px}
@media (min-width:900px){
  .about-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .about-text{padding-top:30px}
}

/* Door category pages, /interior-doors/<facet>/ (src/listing.ts facetPage): intro, FAQ, and the links to every other one
   (also under /products/ and the door categories). */
.facet .facetintro{max-width:820px;margin:8px 0 18px;color:var(--ink-2);font-size:15.5px}
.facet .facetintro p{margin:0 0 10px}
.facetfaq{max-width:820px;margin:36px 0 8px}
.facetfaq h2{font-size:clamp(20px,3.4vw,26px);margin:0 0 6px}
.facetfaq h3{font-size:16.5px;margin:18px 0 4px}
.facetfaq p{margin:0;color:var(--ink-2)}
.facetnav{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.facetnav h2{font-size:clamp(18px,3vw,22px);margin:0 0 6px}
.facetnav .fgroup{margin-top:12px}
.facetnav h3{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 6px;letter-spacing:.01em}
.facetnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.facetnav a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.facetnav a:hover{border-color:var(--ink)}
.facetnav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.facetnav .sizes a{min-height:32px;padding:0 10px;font-size:13px}