/* ──────────────────────────────────────────────────────────────────────────
   Cabinworx — shared product DETAIL MODAL styles.
   Used by stock.html, catalogue.html and bespoke.html (all drive the same modal
   via assets/catalogue.js). SINGLE SOURCE OF TRUTH — edit here, not inline.
   Linked AFTER each page's inline <style> so it overrides any stale inline copy.
   ────────────────────────────────────────────────────────────────────────── */

/* detail gallery: hero + photo/render/plan thumbnail strip */
.pd-imgwrap{flex-direction:column;gap:12px}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pd-th{padding:0;background:#fff;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;
  width:60px;height:60px;overflow:hidden;transition:.14s;flex:0 0 auto}
.pd-th img{width:100%;height:100%;object-fit:cover;display:block}
.pd-th[aria-pressed="true"]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.cw-gal{margin:16px 0 2px}
.cw-sw{display:flex;flex-wrap:wrap;gap:10px}
.cw-sw button{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;
  cursor:pointer;font:inherit;width:64px}
.cw-sw .dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.cw-sw button[aria-pressed="true"] .dot{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.cw-sw .lab{font-size:10.5px;color:var(--body);font-weight:600;line-height:1.15;text-align:center}
.cw-sw .ral{font-size:9.5px;color:var(--muted)}
.pd-stockline{display:inline-flex;align-items:center;gap:6px;color:#1f7a3d;font-weight:700;font-size:13px;margin:2px 0 8px}

/* detail modal */
#planOverlay{position:fixed;inset:0;background:rgba(26,26,23,.55);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;z-index:120;padding:40px 18px;overflow:auto}
#planOverlay.show{display:flex}
.pd-modal{background:var(--white);border-radius:18px;max-width:880px;width:100%;position:relative;box-shadow:var(--shadow-md)}
.pd-x{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:#fff;font-size:20px;cursor:pointer;color:var(--body);line-height:1}
.pd-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;align-items:start}
/* seeded units: image + dropdowns stacked left, sticky buy-box right */
.pd-grid--stack{grid-template-areas:"img info" "detail info"}
.pd-grid--stack .pd-imgwrap{grid-area:img;position:static}
.pd-grid--stack .pd-info{grid-area:info;position:sticky;top:0;align-self:start}
.pd-grid--stack .pd-detail{grid-area:detail;padding:0 18px 16px;margin-top:14px}
.pd-grid--stack .pd-detail .pd-acc:first-of-type{margin-top:0}
/* image + gallery pins to the top (sticky) and align-self:start stops it stretching
   to the info column's height. Transparent background = no grey box, so toggling a
   dropdown grows the (white) info side without ever touching the image.
   min-height:0 neutralises any stale inline min-height in older page copies. */
.pd-imgwrap{background:transparent;border-radius:18px 0 0 18px;display:flex;align-items:center;
  justify-content:flex-start;padding:18px;position:sticky;top:0;align-self:start;min-height:0}
.pd-imgwrap img{width:100%;height:auto;object-fit:contain;max-height:440px}
.pd-info{padding:30px 30px 26px}
.pd-cat{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pd-info h2{font-size:24px;font-weight:700;margin:6px 0 4px}
.pd-sub{color:var(--body);font-size:14.5px;margin-bottom:16px}
.pd-val{font-family:var(--disp);font-weight:800;font-size:34px;color:var(--ink);line-height:1.1}
.pd-note{font-size:12.5px;color:var(--muted);margin:7px 0 4px;line-height:1.5}
.pd-info h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:18px 0 8px}
.pd-fix{list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px;font-size:14px;color:var(--body)}
.pd-fix li b{color:var(--ink)}
.pd-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12.5px;background:var(--grey-50);border:1px solid var(--border);border-radius:20px;padding:4px 11px;color:var(--body)}
/* collapsible dropdowns (Overview / Specification) — themed cards */
.pd-acc{border:1px solid var(--border-strong);border-radius:12px;background:var(--white);
  margin-bottom:14px;overflow:hidden;transition:border-color .14s,box-shadow .14s}
.pd-acc:first-of-type{margin-top:36px}
.pd-acc:hover{border-color:var(--ink)}
.pd-acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);
  background:none;border:none;padding:16px 18px;cursor:pointer;text-align:left}
.pd-acc-h:hover{color:var(--orange-deep)}
.pd-acc-i{flex:0 0 auto;color:var(--muted);transition:transform .22s,color .22s}
.pd-acc-h[aria-expanded="true"]{border-bottom:1px solid var(--border)}
.pd-acc-h[aria-expanded="true"] .pd-acc-i{transform:rotate(180deg);color:var(--orange-deep)}
.pd-acc-b{padding:16px 18px 18px}
.pd-acc-b[hidden]{display:none}
.pd-acc-b h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:28px 0 10px}
.pd-acc-b h4:first-child{margin-top:0}
.pd-desc{margin:0 0 4px;color:var(--body);font-size:14.5px;line-height:1.65}
.pd-desc p{margin:0 0 9px}
.pd-highlights{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.pd-highlights li{position:relative;padding-left:22px;font-size:14px;color:var(--body);line-height:1.45}
.pd-highlights li::before{content:"✓";position:absolute;left:0;top:0;color:#1f7a3d;font-weight:800}
.pd-specs{width:100%;border-collapse:collapse;margin:4px 0 2px;font-size:13.5px}
.pd-specs th,.pd-specs td{text-align:left;vertical-align:top;padding:7px 10px;border-bottom:1px solid var(--border)}
.pd-specs th{font-weight:600;color:var(--muted);width:42%;white-space:nowrap}
.pd-specs td{color:var(--ink)}
.pd-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
#pdShare{display:inline-flex;align-items:center}
#pdShare.ok{border-color:var(--green,#1f8a5b);color:var(--green,#1f8a5b);background:rgba(31,138,91,.07)}
@media(max-width:680px){
  .pd-grid{grid-template-columns:1fr}
  .pd-imgwrap{border-radius:18px 18px 0 0;position:static;justify-content:center}
  .pd-grid--stack{grid-template-areas:"img" "info" "detail"}
  .pd-grid--stack .pd-info{position:static}
}