/* ===== product single template (9 models) =====
   Rhythm: frame (asphalt) → overview (haze) → configuration (asphalt) → sheet (light) →
   packing (asphalt-2) → ordering (haze) → related (light) → enquiry (frame). */

/* hero frame: a captioned photo, or a studio cut-out on a white plate inside the same frame */
.pd-hero{position:relative;background:var(--asphalt);color:var(--white);overflow:hidden}
.pd-hero .crumbs ol{margin-bottom:14px}
.pd-hero h1{font-size:clamp(2.8rem,5.6vw,5.6rem);max-width:15ch}
.pd-cat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:.92rem;font-weight:600;color:var(--haze)}
.pd-cat a{text-decoration:none}
.pd-cat a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--amber)}
.pd-cat .tag{margin-top:0}
.pd-hero .lead{max-width:54ch}
.pd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;max-width:760px;border-top:1px solid var(--asphalt-3)}
.pd-facts div{padding:12px 16px 0 0}
.pd-facts dt{font-size:.78rem;font-weight:600;color:var(--haze)}
.pd-facts dd{font:600 clamp(1.4rem,2.2vw,2rem)/1.05 var(--d);font-variant-numeric:tabular-nums;color:var(--white)}
.pd-facts dd.ns{font:500 .95rem/1.3 var(--f);color:var(--haze);padding-top:4px}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pd-actions .btn-line{color:var(--white)}
.pd-actions .btn-line:hover{background:var(--white);color:var(--ink)}

/* photo variant */
.pd-photo{min-height:clamp(600px,82svh,820px);display:flex;flex-direction:column;justify-content:flex-end}
.pd-photo .pd-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,36,39,.9) 0,rgba(31,36,39,.62) 40%,rgba(31,36,39,.08) 72%),linear-gradient(180deg,rgba(31,36,39,.35) 0,rgba(31,36,39,0) 30%,rgba(31,36,39,.8) 100%);pointer-events:none}
.pd-photo .pd-text{position:relative;z-index:2;width:100%;padding-block:120px clamp(32px,4vw,56px)}
.pd-photo .credit{z-index:3}
.js .pd-photo .pd-media{animation:open 1.4s var(--ease) both}

/* plate variant */
.pd-plate .pd-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);align-items:center;padding-block:clamp(36px,4vw,64px)}
.pd-plate-fig{margin:0}
.pd-plate-fig .plate{background:#fff;aspect-ratio:4/3;display:grid;place-items:center}
.pd-plate-fig .plate img{width:100%;height:100%;object-fit:contain;padding:clamp(12px,2vw,28px)}
.pd-plate-fig figcaption{font-size:.8rem;color:var(--haze);padding-top:10px}
.js .pd-plate .plate{animation:open 1.4s var(--ease) both}

/* in-page nav (site.js marks the section in view on .stepnav links) */
.pd-nav a{font-size:.9rem}
.pd [id^="pd-"]{scroll-margin-top:56px}

/* shared section type */
.pd-sec{padding-block:clamp(64px,8vw,112px)}
.pd-h{font:600 clamp(2.2rem,3.6vw,3.4rem)/1 var(--d);text-transform:uppercase;max-width:18ch;text-wrap:balance}
.pd-lede{margin-top:18px;font-size:1.06rem;max-width:58ch}
.pd-dark{background:var(--asphalt);color:var(--white)}
.pd-dark .pd-lede,.pd-dark p{color:var(--haze-2)}
.pd-dark .mini-h{color:var(--white)}
.pd-light{background:var(--haze-3)}

/* overview: gallery + who it suits */
.pd-overview{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:start}
.pd-overview .gallery-main{aspect-ratio:4/3}
.pd-overview .gallery-main figcaption,.pd-cap{font-size:.82rem;color:var(--ink-2);padding-top:8px}
.pd-overview .checklist{grid-template-columns:1fr}
.pd-record{margin-top:24px;padding:16px 18px;background:var(--haze-3);font-size:.94rem;color:var(--ink-2);max-width:56ch}
.pd-record b{color:var(--ink)}
.pd-mosaic{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(420px,44vw,600px);margin:0}
.pd-mosaic img{width:100%;height:100%;object-fit:cover;min-height:0}
.pd-mosaic img:first-child{grid-row:1/3}
.pd-mosaic figcaption{grid-column:1/-1}

/* configuration: versions + standard / options / on request */
.pd-config-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end}
.pd-versions{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:40px}
.pd-versions li{padding:20px 22px 22px;background:var(--asphalt-2);border-top:3px solid var(--asphalt-3)}
.pd-versions li.is-main{border-top-color:var(--amber)}
.pd-versions b{display:block;font:600 clamp(2rem,3vw,2.8rem)/1 var(--d);color:var(--white);font-variant-numeric:tabular-nums}
.pd-versions span{display:block;margin-top:8px;font-size:.92rem;color:var(--haze)}
.pd-versions em{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--amber);margin-bottom:8px}
.pd-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:48px}
.pd-cols h3{font:600 1.35rem/1 var(--d);text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid var(--haze)}
.pd-cols ul{list-style:none;padding:0}
.pd-cols li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--asphalt-3);color:var(--haze-2);font-size:.95rem}
.pd-cols .std li::before{content:"";position:absolute;left:2px;top:16px;width:11px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.pd-cols .opt li::before,.pd-cols .ask li::before{content:"";position:absolute;left:2px;top:20px;width:12px;height:2px;background:var(--amber)}
.pd-cols .opt li::after{content:"";position:absolute;left:7px;top:15px;width:2px;height:12px;background:var(--amber)}
.pd-cols .ask li::before{background:var(--haze)}
.pd-cols .none{color:var(--haze);font-size:.92rem;padding-top:12px}
.pd-config-media{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:56px;padding-top:48px;border-top:1px solid var(--asphalt-3)}
.pd-config-media figure{margin:0}
.pd-config-media video{width:100%;max-height:620px;object-fit:cover;background:#1f2427}
.pd-config-media img{width:100%;background:#fff}
.pd-config-media figcaption{font-size:.8rem;color:var(--haze);padding-top:10px}
.pd-config-media.wide{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}

/* the supplier's sheet: sticky figure + grouped lines */
.pd-sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:40px}
.pd-sheet-aside{position:sticky;top:72px}
.pd-sheet-aside figure{margin:0;background:#fff}
.pd-sheet-aside figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pd-sheet-aside figure.doc{background:var(--white);padding:16px;box-shadow:0 24px 48px -30px rgba(31,36,39,.55);transform:rotate(-1deg)}
.pd-sheet-aside figure.doc img{aspect-ratio:auto;object-fit:contain;max-height:720px}
.pd-sheet-aside figcaption{font-size:.82rem;color:var(--ink-2);padding:10px 2px 0}
.pd-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd-pair img{aspect-ratio:1!important}
.pd-sheet .spec-group+.spec-group{margin-top:40px}
.pd-sheet .spec-table div.ns dd{color:var(--ink-2);font-style:italic}
.pd-sheet .spec-table div.ns dd::before{content:"";display:inline-block;width:18px;height:0;border-top:2px dashed var(--asphalt-3);vertical-align:middle;margin-right:10px}
.pd-sheet .chips{padding-top:14px}
.pd-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:.88rem;color:var(--ink-2)}
.pd-legend i{display:inline-block;width:18px;border-top:2px dashed var(--asphalt-3);vertical-align:middle;margin-right:8px}
.pd-ask{margin-top:40px;padding:24px;background:var(--asphalt);color:var(--white);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;border-top:3px solid var(--amber)}
.pd-ask p{max-width:52ch;color:var(--haze-2)}
.pd-ask b{display:block;font:600 1.5rem/1.05 var(--d);text-transform:uppercase;color:var(--white);margin-bottom:6px}

/* packing and container */
.pd-pack{background:var(--asphalt-2);color:var(--white)}
.pd-pack-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);margin-top:40px;align-items:start}
.pd-mini{font:600 1.25rem/1 var(--d);text-transform:uppercase;margin-bottom:18px;color:var(--white)}
.pd-boxes{display:grid;gap:28px}
.pd-ruler{position:relative;height:18px;border-bottom:1px solid var(--asphalt-3);font-size:.72rem;color:var(--haze)}
.pd-ruler span{position:absolute;bottom:4px;transform:translateX(-50%);left:calc(var(--v) / 200 * 100%)}
.pd-ruler span:first-child{transform:none}
.pd-ruler span:last-child{transform:translateX(-100%)}
.pd-box{position:relative;width:calc(var(--l) / 200 * 100%);aspect-ratio:var(--l) / var(--h);background:rgba(224,154,59,.16);border:2px solid var(--amber);margin-top:22px}
.pd-box .bl{position:absolute;left:0;right:0;top:-22px;text-align:center;font-size:.8rem;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums}
.pd-box .bh{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.pd-box .bw{position:absolute;inset:auto 8px 6px;font-size:.76rem;color:var(--haze)}
.pd-box-name{font-size:.84rem;color:var(--haze);margin-top:8px}
.pd-box-name b{color:var(--white);font-weight:600}
.pd-pack dl.ledger-mini{margin-top:24px;border-top:1px solid var(--asphalt-3)}
.ledger-mini div{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,3fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--asphalt-3)}
.ledger-mini dt{font-size:.86rem;font-weight:600;color:var(--haze)}
.ledger-mini dd{font-variant-numeric:tabular-nums}
.ledger-mini .ns dd{color:var(--haze);font-style:italic}
.pd-load{list-style:none;padding:0;display:grid;gap:22px}
.pd-load li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px 20px;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--asphalt-3)}
.pd-load b{font:600 3rem/.9 var(--d);font-variant-numeric:tabular-nums;color:var(--white)}
.pd-load small{display:block;font-size:.8rem;color:var(--haze);margin-top:6px}
.pd-load .units{margin-top:4px}
.pd-load .units i{width:9px;height:9px}
.pd-load .ns b{font:500 1rem/1.3 var(--f);color:var(--haze);font-style:italic}
.pd-pack figure{margin:28px 0 0}
.pd-pack figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pd-pack figcaption{font-size:.8rem;color:var(--haze);padding-top:8px}
.pd-pack .note-line{color:var(--haze);border-top-color:var(--asphalt-3)}
.pd-empty{padding:28px;border:2px dashed var(--asphalt-3);color:var(--haze)}
.pd-empty b{display:block;font:600 1.5rem/1 var(--d);text-transform:uppercase;color:var(--white);margin-bottom:10px}

/* ordering */
.pd-order-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:48px}
.pd-order-grid figure{margin:0}
.pd-order-grid figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pd-order-grid figcaption{font-size:.82rem;color:var(--ink-2);padding-top:8px}
.pd .flow{margin-top:40px}
.pd .flow li{font-size:.95rem}
.pd .flow b{color:var(--amber-deep)}
.pd-terms{border-top:2px solid var(--ink)}
.pd-terms div{display:grid;grid-template-columns:minmax(140px,2fr) minmax(0,3fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.pd-terms dt{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.pd-terms .ns dd{color:var(--ink-2);font-style:italic}
.pd-send{margin-top:28px}

/* related */
.pd-related .related h2{margin-bottom:24px}

@media (max-width:1000px){
  .pd-cols{grid-template-columns:1fr 1fr}
  .pd-cols>div:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .pd-overview,.pd-sheet,.pd-pack-grid,.pd-order-grid,.pd-config-head,.pd-plate .pd-grid,.pd-config-media,.pd-config-media.wide{grid-template-columns:1fr}
  .pd-sheet-aside{position:static}
  .pd-config-media video{max-height:520px;width:auto;margin-inline:auto}
}
@media (max-width:760px){
  .pd-facts{grid-template-columns:1fr 1fr}
  .pd-photo{min-height:0}
  .pd-photo .pd-media{position:relative;inset:auto;height:auto;aspect-ratio:4/3}
  .pd-photo::after{display:none}
  .pd-photo .pd-text{padding-block:24px 40px}
  .pd-photo .credit{top:auto;bottom:auto;right:auto;position:relative;display:block;margin:0;padding:8px var(--gutter);background:#1f2427;order:0}
  .pd-photo{display:flex;flex-direction:column}
  .pd-cols{grid-template-columns:1fr}
  .pd-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .pd-mosaic img{aspect-ratio:4/3;height:auto}
  .pd-mosaic img:first-child{grid-row:auto;grid-column:1/-1}
  .pd-load li{grid-template-columns:1fr}
  .pd-box{width:calc(var(--l) / 200 * 88%)}
  .pd-sheet-aside figure.doc{transform:none}
}
@media (prefers-reduced-motion:reduce){.js .pd-photo .pd-media,.js .pd-plate .plate{animation:none}}
.spec-group .spec-h{font:600 1.5rem/1 var(--d);text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.pd-ruler span{white-space:nowrap}
.pd-photo .pd-media{object-position:65% 55%}
@media (max-width:900px){.pd-config-media video{max-height:460px}}
.pd-sheet-aside figure.plate img{object-fit:contain;padding:18px}
.pd-config-media .pd-pair img{background:#fff}
.pd-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.pd-parts figure{margin:0}
.pd-parts img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pd-parts figcaption{font-size:.76rem;color:var(--haze);padding-top:6px}
@media (max-width:600px){.pd-parts{grid-template-columns:1fr 1fr}}
/* keep the height label inside the column when a carton runs close to 200 cm */
.pd-boxes{padding-right:64px}
@media (max-width:760px){.pd-box{width:calc(var(--l) / 200 * 100%)}}
/* plate hero: text column is narrower, so key facts sit 2 × 2 */
.pd-plate .pd-facts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
/* supplier photos shot against a grey wall: plate takes the wall tone instead of white */
.pd-plate-fig .plate.wall,.gallery-main.wall,.pd-sheet-aside figure.wall{background:#8f877e}
.pd-plate-fig .plate.wall img,.pd-sheet-aside figure.wall img{padding:0}
.pd-sheet-aside figure figcaption{background:var(--haze-2)}
/* review: links inside dark bands inherited ink from .note-line .link and vanished on asphalt */
.pd-hero .link,.pd-dark .link,.pd-pack .link,.pd-ask .link{color:var(--white)}