/* FPS additions on top of the Salamander Select stylesheet. */
:root{--ok:#3c6e47;--warn:#9a6b00;--bad:#a43a25}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:10}.skip-link:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.photo{display:grid;place-items:center}
.photo .placeholder{color:var(--muted);font-size:14px;text-align:center;padding:24px;max-width:340px}
.photo img{object-fit:contain;background:#fff}
.fit-badge{font-size:12px;font-weight:600;padding:4px 10px;border:1px solid currentColor;letter-spacing:.3px}
.fit-compatible{color:var(--ok)}.fit-incompatible{color:var(--bad)}
.option-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice[aria-disabled=true]{opacity:.55}
.choice .tag{display:inline-block;font-size:11px;font-weight:600;margin-top:8px;padding:2px 7px;border:1px solid currentColor}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.product-card{border:1px solid var(--border);background:#fff;text-align:left;padding:0;display:flex;flex-direction:column;position:relative}
.product-card:hover{border-color:var(--accent)}
.product-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#fcf6f3}
.product-card .thumb{height:140px;background:#fff;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.product-card .thumb img{max-width:100%;max-height:140px;object-fit:contain}
.product-card .thumb span{font-size:12px;color:var(--muted);padding:10px;text-align:center}
.product-card .body{padding:12px 14px 14px}
.product-card strong{display:block;font-size:14px;font-weight:500}
.product-card small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.product-card ul{margin:8px 0 0;padding-left:16px;font-size:12px;color:var(--bad)}
.unavailable{margin-top:22px}.unavailable summary{font-size:14px;color:var(--muted)}
.unavailable li{font-size:13px;color:var(--muted);margin:6px 0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form-grid label,.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.form-grid .span-2{grid-column:span 2}
.form-grid input,.form-grid select,.field input,.field select{border:1px solid #bfc4bb;padding:10px 12px;background:#fff;color:var(--ink);border-radius:0;font-weight:400}
.form-grid input[aria-invalid=true]{border-color:var(--bad)}
.form-grid small{font-weight:400;color:var(--muted);font-size:12px}
select{font:inherit}
.hp{position:absolute!important;left:-5000px!important}
.dialog-copy{color:var(--muted);font-size:14px}
.form-error{color:var(--bad);font-size:14px;min-height:1px;margin:12px 0 0}
dialog{width:min(520px,calc(100vw - 32px))}
.issue-list{list-style:none;padding:0;margin:16px 0}
.issue-list li{font-size:14px;padding:10px 12px;border-left:3px solid var(--warn);background:var(--paper);margin-bottom:8px}
.issue-list li.block{border-left-color:var(--bad)}
.issue-list li .sev{font-weight:700;font-size:11px;letter-spacing:1px;display:block;margin-bottom:2px}
.issue-list li.block .sev{color:var(--bad)}
.issue-list li.warn .sev{color:var(--warn)}
.issue-list li .nx{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.notice{font-size:14px;padding:12px 14px;border-left:3px solid var(--accent);background:#fcf6f3;margin:12px 0}
.acc-row{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--border)}
.acc-row input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.acc-row strong{font-size:14px;font-weight:500;display:block}
.acc-row small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.acc-row .acc-extra{margin-top:8px;display:flex;gap:8px;align-items:center;font-size:13px}
.acc-row .acc-extra input{width:90px;padding:6px 8px;border:1px solid #bfc4bb}
.acc-row .sku{font-size:12px;color:var(--muted);white-space:nowrap}
.acc-group{margin-top:24px}.acc-group h3{font-size:13px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin:0 0 4px;text-transform:uppercase}
.equip-row{display:grid;grid-template-columns:1.4fr 1.2fr .7fr auto;gap:8px;align-items:end;padding:12px;background:var(--paper);margin-bottom:8px}
.equip-row label{font-size:12px;display:flex;flex-direction:column;gap:4px}
.equip-row input,.equip-row select{padding:8px;border:1px solid #bfc4bb;font-size:14px;min-width:0}
.equip-row .checks{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.equip-row .checks label{flex-direction:row;align-items:center;gap:6px}
.add-btn{border:1px dashed var(--border);background:#fff;padding:10px 14px;font-size:14px;width:100%;text-align:left}
.summary-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.summary-table th{text-align:left;font-size:11px;letter-spacing:1.2px;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--border)}
.summary-table td{padding:10px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.summary-table td.num{text-align:right;white-space:nowrap}
.summary-table .sku{font-size:12px;color:var(--muted);display:block;word-break:break-all}
.summary-table tfoot td{font-weight:600;border-bottom:0}
.doc-list{list-style:none;padding:0;margin:8px 0}
.doc-list li{padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.doc-list a{font-weight:500}
.doc-list small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.doc-group{font-size:12px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin:18px 0 0;text-transform:uppercase}
.share-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px;background:var(--paper);margin-top:14px}
.share-box code{font-size:18px;font-weight:600;letter-spacing:1px}
.share-box input{flex:1;min-width:200px;padding:8px;border:1px solid #bfc4bb;font-size:13px}
.output-actions{display:grid;gap:10px;margin-top:20px}
.output-actions button{text-align:left;display:flex;justify-content:space-between;gap:12px;padding:14px 18px}
.output-actions small{font-weight:400;opacity:.8}
.open-form{display:flex;gap:8px}.open-form input{padding:11px 12px;border:1px solid #bfc4bb;width:180px;text-transform:uppercase}
.legacy-strip{padding:0 0 32px}.legacy-strip p{font-size:14px;color:var(--muted);border-left:2px solid var(--accent);padding:10px 14px;background:var(--paper);margin:0}
.build-row dd small{display:block;color:var(--muted);font-size:12px}
.price-on{color:var(--ink);font-weight:600}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row .choice{padding:10px 14px}
@media(max-width:720px){.product-grid,.option-grid.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.equip-row{grid-template-columns:1fr 1fr}.option-grid{grid-template-columns:1fr}.open-form{width:100%}.open-form input{flex:1;width:auto}.summary-table{font-size:13px}}
.review-note.flush{margin:0}
.acc-more summary{font-size:12px;color:var(--muted);margin-top:4px}.acc-more summary::after{content:""}
.tag.rec{color:var(--accent);margin-left:6px}
.acc-advanced{margin-top:24px;border-top:1px solid var(--border);padding-top:12px}.acc-advanced>summary{font-size:14px;font-weight:600}
[aria-busy=true]{opacity:.6;pointer-events:none}
#next:disabled{opacity:.45}
.usage-grid .choice strong,.usage-grid .choice small{grid-column:2}.usage-grid .choice .usage-icon{grid-row:1/span 2}
@media(max-width:720px){.output-actions button{flex-direction:column;align-items:flex-start;gap:4px}}
/* Public "From $X" starting price on the product-type tiles (owner 2026-10-20). */
.pcard .pfrom{display:block;padding:0 10px 12px;font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:720px){.pcard .pfrom{padding:0 4px 8px;font-size:13px}}
/* Naming and Beta tag (owner 2026-10-20). */
.brand-id{display:flex;align-items:center;gap:12px}
.beta-tag{display:inline-block;font:600 11px/1 var(--font);letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 7px;vertical-align:middle}
h1 .beta-tag{font-size:13px;margin-left:6px;position:relative;top:-6px}
.who-contacts{font-size:14px;color:var(--ink);background:var(--paper);border-left:3px solid var(--ok);padding:10px 12px;margin:14px 0 0}
/* Easy mode: the default landing. */
.easy{border-top:1px solid var(--border);padding:24px 0 36px}
.easy-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.easy-head h2{font:normal 34px/1.1 var(--display);margin:0}
.easy-head button{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.easy-head button small{font-weight:400;color:var(--muted);font-size:12px}
.easy-block{border:0;padding:0;margin:22px 0 0;min-width:0}
.easy-block legend{font-size:16px;font-weight:600;margin-bottom:10px;padding:0}
/* #easy prefix: select.css loads after this file and centers .choice-grid. */
#easy .easy-mounts{max-width:none;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
/* `hidden` must win over display:flex on form labels. */
[hidden]{display:none!important}
.easy-mount{cursor:pointer;display:block}
.easy-mount input{position:absolute;opacity:0;width:1px;height:1px}
.easy-mount:has(input:checked){border-color:var(--accent);background:#fcf6f3;box-shadow:inset 0 0 0 1px var(--accent)}
.easy-mount:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:4px}
.easy-mount:has(input[aria-invalid=true]){border-color:var(--bad)}
.easy-hint{font-size:15px;font-weight:500;margin:16px 0 0;min-height:1px}
.form-grid textarea{border:1px solid #bfc4bb;padding:10px 12px;font-weight:400;min-height:70px}
.advanced-bar{padding:12px 0 0}
/* Accessibility: visible focus on every control (select and textarea were missing). */
select:focus-visible,textarea:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#main:focus,#configuration:focus{outline:none}
@media(max-width:720px){#easy .easy-mounts{grid-template-columns:1fr}.easy-head h2{font-size:28px}h1 .beta-tag{top:-3px}
  /* The toast sits at the top on phones so it never covers the action buttons at the bottom. */
  #toast{bottom:auto;top:12px;max-width:calc(100vw - 32px)}}
/* Easy-mode picture cards (owner 2026-10-20: images make it easier). A hidden radio inside each
   label keeps native keyboard behavior (Tab into the group, arrows to move, Space to pick). */
.pick-grid{display:grid;gap:12px}
.pick-photo{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick-size{grid-template-columns:repeat(7,minmax(0,1fr))}
.pick-device{grid-template-columns:repeat(4,minmax(0,1fr))}
.pick{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);background:#fff;cursor:pointer;padding:0 0 12px;text-align:left;min-width:0}
.pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick:hover{border-color:var(--accent)}
.pick:has(input:checked){border-color:var(--accent);background:#fcf6f3;box-shadow:inset 0 0 0 1px var(--accent)}
.pick:has(input:checked)::after{content:'✓';position:absolute;top:6px;right:9px;color:var(--accent);font-size:13px}
.pick:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.pick:has(input[aria-invalid=true]){border-color:var(--bad)}
.pick-pic{position:relative;display:grid;place-items:center;height:96px;background:#fff;border-bottom:1px solid var(--border);overflow:hidden;color:var(--muted)}
.pick-photo .pick-pic{height:200px}
/* Cropped product photos (inline SVG with the product's crop box as viewBox) fill the picture box
   with an 8 px margin and stay centered at every width (defect 2026-10-20: a photo card showed only
   the photo's white margin). */
.pick-crop{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
/* Neutral backdrop so the letterbox around a cropped photo reads as a frame, not empty space. */
.pick-photo .pick-pic,.pick-device .pick-pic:has(.pick-crop){background:var(--paper)}
.pick-device .pick-pic{height:130px}
.pick strong{display:block;font-weight:500;font-size:14px;padding:10px 10px 0}
.pick-photo strong{font:400 19px var(--display)}
.pick small{display:block;font-size:12px;color:var(--muted);padding:4px 10px 0}
.pick .pfrom{display:block;padding:6px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.pick-icon{width:52px;height:52px}
.pick-size-art{width:100%;height:100%;padding:6px}
.pick-size-art .ground{stroke:#bfc4bb;stroke-width:1}
.pick-size-art .person{fill:#9a948e}
.pick-size-art .stand{fill:#6b6c67}
.pick-size-art .screen{fill:#242622}
.pick:has(input:checked) .pick-size-art .screen{fill:var(--accent)}
.easy-extra{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.easy-extra input{border:1px solid #bfc4bb;padding:10px 12px;font-weight:400}
.stepper{display:flex;align-items:stretch;gap:0;max-width:220px}
.stepper button{padding:10px 18px;font-size:20px;line-height:1}
.stepper input{width:80px;text-align:center;border:1px solid #bfc4bb;border-left:0;border-right:0;font-size:16px}
@media(max-width:1000px){.pick-size{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.pick-photo .pick-pic{height:150px}.pick-size{grid-template-columns:repeat(2,minmax(0,1fr))}.pick-device{grid-template-columns:repeat(2,minmax(0,1fr))}.pick-photo strong{font-size:17px}}
/* 3D view (cart/stand viewer, loaded on demand). Fixed canvas height so the page does not jump. */
.view3d{margin:18px 0;max-width:640px;border:1px solid var(--border);background:#fbfbfb}
.view3d .v3d-canvas{position:relative;height:420px;overflow:hidden;touch-action:none}
.view3d .v3d-canvas canvas{display:block}
.view3d .v3d-canvas .photo{height:100%;background:#fff}
.view3d .v3d-canvas .pick-crop{width:100%;height:100%}
.v3d-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px;border-top:1px solid var(--border);background:#fff}
.v3d-caption{font-size:12px;font-weight:600;color:var(--muted)}
.v3d-notes{margin:0;padding:0 12px 8px;list-style:none;background:#fff;font-size:11px;line-height:1.4;color:var(--muted)}
.v3d-notes:empty{display:none}
@media(max-width:720px){.view3d .v3d-canvas{height:300px}}

/* Display ranges, plain compatibility and finish chips (Chris, 2026-10-21). */
.range-hint{font-size:13px;color:var(--muted);margin:-4px 0 10px}
.pick-range{grid-template-columns:repeat(5,minmax(0,1fr))}
.pick-range .pick-pic{height:78px}
.pick-range-art{width:100%;height:100%;padding:8px 6px}
.pick-range-art .screen{fill:#242622}.pick-range-art .stand{fill:#6b6c67}
.pick-range-art .on{fill:var(--accent)}.pick-range-art .off{fill:#e2e0dc}
.pick-range-art .panel{fill:#3a3c37}.pick-range-art .pattern{fill:none;stroke:#d9d6d0;stroke-width:1;stroke-dasharray:3 2}.pick-range-art .hole{fill:#fff}
.pick:has(input:checked) .pick-range-art .panel{fill:#5a3b2e}
.range-block{margin-top:18px}
.exact-fields{margin:16px 0 4px;border-top:1px solid var(--border);padding-top:10px}
.exact-fields>summary{font-size:14px;font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}
.exact-fields .form-grid{margin-top:8px}
.easy-hint .hint-msg{display:block}
.easy-hint[data-hint=custom_request] .hint-msg{border-left:3px solid var(--accent);background:#fcf6f3;padding:10px 12px}
.rec-list{display:grid;gap:8px;margin-top:10px}
.rec-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;border:1px solid var(--border);background:#fff;padding:8px 10px}
.rec-item:not(:has(.rec-thumb)){grid-template-columns:1fr}
.rec-thumb{width:64px;height:64px;display:grid;place-items:center;overflow:hidden}.rec-thumb img{max-width:100%;max-height:64px;object-fit:contain}
.rec-thumb span{font-size:10px;color:var(--muted)}
.rec-item strong{display:block;font-size:14px;font-weight:600}
.rec-item small{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.rec-item small.adapter{color:var(--ink)}
.model-card{display:flex;flex-direction:column;min-width:0}
.model-card .pcard{flex:1}
.pcard .compat{display:block;margin-top:8px;color:var(--ink);font-size:13px;line-height:1.35}
.pcard .compat.adapter{color:var(--accent);margin-top:4px}
.pcard .tag{display:inline-block;margin-top:8px}
.finish-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:4px 10px 4px 6px;border:1px solid var(--border);background:#fff;font-size:12px;line-height:1.2;text-align:left;cursor:pointer;color:var(--ink)}
.chip[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#fcf6f3}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sw{width:22px;height:22px;flex:none}
.finish-one{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:8px 0 0}
.compat-line{font-size:14px;margin:8px 0 0}
.note-list{list-style:none;padding:0;margin:12px 0}.note-list li{font-size:13px;color:var(--muted);padding:6px 0 6px 12px;border-left:2px solid var(--border);margin-bottom:6px}
.switch-btn{margin-top:8px;min-height:44px;display:inline-flex;align-items:center}
.ask-box button{margin-top:10px;display:block}
.unavailable li .switch-btn{display:inline-flex}
@media(max-width:1000px){.pick-range{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.pick-range{grid-template-columns:repeat(2,minmax(0,1fr))}.pick-range .pick-pic{height:64px}.chip{font-size:12px}}
/* Phone: grid tracks may shrink below their content (a long select option used to push the display
   step 36 px wider than a 375 px screen), and selects never exceed their column. */
.form-grid select,.form-grid input{min-width:0;max-width:100%}
@media(max-width:720px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Guided selector (Chris, 2026-10-22) ----
   Four picture cards on the landing page, then type, size, display, options and quote pages, in the
   clean card style of the UNIFI chooser and the Select Pro Cabinets page. The picture of a landing
   card cycles through stills from our own 3D viewer (JS: guideStartCycle); with prefers-reduced-motion
   the first picture stays and nothing fades. No 3D canvas on the landing, type or size pages. */
.guide{max-width:1300px;margin:0 auto 24px}
.guide-bar{display:flex;align-items:center;gap:14px;min-height:44px;margin:0 0 6px}
.guide-bar #g-restart{margin-left:auto;flex:none}
.guide-trail{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0;padding:0;min-width:0}
.guide-trail li{display:flex;align-items:center}
.guide-trail li+li::before{content:'›';margin:0 8px;color:#9a948e}
.guide-title{font:300 clamp(28px,3.2vw,40px)/1.15 var(--display);text-align:center;margin:10px 0 8px;color:#3d3936}
.guide-lede{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 22px}
.guide-adv{text-align:center;color:var(--muted);margin:4px 0 20px}
.chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),280px));justify-content:center;gap:20px;margin:18px 0 22px}
.chooser-card{display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid var(--border);border-radius:0;text-align:left;color:inherit;min-width:0;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.chooser-card:hover{border-color:#9a9d96;box-shadow:0 6px 18px rgba(36,38,34,.1)}
.chooser-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chooser-pics{position:relative;display:block;aspect-ratio:3/2;background:var(--paper);overflow:hidden}
.chooser-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.chooser-pics img.on{opacity:1}
.chooser-cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:2px 9px;font-size:12px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.88)}
.chooser-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px 10px}
.chooser-title strong{display:block;font:400 24px/1.2 var(--display)}
.chooser-title small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.chooser-chev{flex:none;font-size:34px;line-height:1;color:var(--muted)}
.guide .view3d{margin:6px auto 22px;max-width:640px}
/* From the display page on, the 3D view sits beside the choices on wide screens (and stays in view
   while the visitor scrolls the options), above them on narrow ones. */
@media(min-width:1000px){.guide-main.has3d{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:28px;align-items:start}.guide-main.has3d #guide-3d{grid-column:2;grid-row:1;position:sticky;top:12px;margin:6px 0}.guide-main.has3d #guide-body{grid-column:1;grid-row:1}.guide-main.has3d .pick-size{grid-template-columns:repeat(5,minmax(0,1fr))}.guide-main.has3d .pick-range{grid-template-columns:repeat(3,minmax(0,1fr))}}
.guide .view3d .v3d-canvas{height:340px}
#guide-body{max-width:1100px;margin:0 auto}
#guide-body .step-title{font:400 27px/1.25 var(--display);text-align:center;color:#3d3936;margin:4px 0 14px}
.g-line{text-align:center;font-size:18px;line-height:1.5;margin:20px auto 6px;max-width:760px}
.g-adapter{text-align:center;color:var(--muted);margin:0 auto 18px;max-width:760px}
.g-other{display:block;max-width:240px;margin:12px 0 0}
.g-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:14px 0}
.g-check input{width:20px;height:20px}
#g-status{max-width:760px;margin:12px auto 0}
.g-heavier{text-align:center;margin:0 auto 14px}
/* Display page (Chris, 2026-10-23): one size box beside the No display tick, then the height range. */
.g-size-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 28px}
.g-diag{display:block;font-weight:600;font-size:14px}
.g-diag input{display:block;width:150px;margin-top:6px;font-size:20px;padding:10px 12px;border:1px solid var(--border);background:#fff}
.g-diag input:disabled{background:#f1f1ee;color:var(--muted)}
.g-size-row .g-check{margin:0}
.g-height{text-align:center;color:var(--muted);margin:16px auto 0;max-width:760px}
/* Above / Below the display toggle beside a chosen camera shelf or soundbar bracket. */
.mount-row{flex-wrap:wrap}
.mount-row .g-where{margin:0;flex:1 1 100%;justify-content:flex-start}
.mount-row .g-where button{padding:10px 14px;white-space:nowrap}
@media(max-width:720px){.mount-row .g-where button{flex:1}}
.v3d-bar [data-v3d-nodisplay]{margin-left:auto}
.guide .actions{margin-top:22px}
/* On phones the Feedback pill stays fixed at the bottom right and never steps aside, so card text
   keeps 104px clear on the right and the chevron is dropped (Chris, 2026-10-22). */
@media(max-width:560px){.chooser{grid-template-columns:minmax(0,1fr);gap:14px}.chooser-title{padding-right:104px}.chooser-chev{display:none}.chooser-title strong{font-size:22px}.guide .view3d .v3d-canvas{height:260px}.guide-bar{gap:10px}}
@media(prefers-reduced-motion:reduce){.chooser-pics img,.chooser-card{transition:none}}

/* Options page beside the 3D view (Chris, 2026-10-23): the mount pickers shrink to the column instead of running under the picture. */
.guide-main.has3d #guide-body{min-width:0}
.guide-main.has3d .panel-white,.guide-main.has3d .mount-row{min-width:0;max-width:100%}
.mount-pick select{width:100%;min-width:0}