/* ============================================================
   PROXY — PRODUCT PAGE SYSTEM (extends styles.css)
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex;gap:10px;align-items:center;font-size:13px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy)}
.crumbs .sep{color:var(--gold)}
.crumbs .here{color:var(--navy);font-weight:700}

/* ---------- editorial hero ---------- */
.p-hero{padding:var(--s8) 0}
.p-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.p-hero .eyebrow{display:block;margin-bottom:var(--s3)}
.p-hero h1{font-size:64px;font-weight:800;letter-spacing:.01em;line-height:1;margin-bottom:var(--s3)}
.p-hero .tagline{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--s5)}
.p-hero p.body{color:var(--muted);max-width:460px;margin-bottom:var(--s3)}
.p-hero .quickspec{font-family:var(--mono);font-size:12.5px;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0;margin:var(--s5) 0;display:flex;gap:var(--s5);flex-wrap:wrap}
.p-hero .ctas{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.p-plinth{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s7);display:flex;align-items:center;justify-content:center}
.p-plinth img{max-height:460px;width:auto}

/* ---------- configurator ---------- */
.config{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6)}
.config-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:start}
.config h3{margin-bottom:var(--s2)}
.config .note{font-size:13px;color:var(--muted);margin-bottom:var(--s5)}
.cfg-group{margin-bottom:var(--s5)}
.cfg-group .cfg-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s3)}
.cfg-group .cfg-label b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.cfg-group .cfg-label span{font-family:var(--mono);font-size:11.5px;color:var(--gold-text)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip-btn{font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;cursor:pointer;transition:all var(--t-micro) var(--ease)}
.chip-btn:hover{border-color:var(--navy)}
.chip-btn.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-btn:disabled{opacity:.38;cursor:not-allowed;border-style:dashed}
.chip-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* color swatch chips */
.chip-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-sm)}
.chip-swatch .dot{width:34px;height:34px;border-radius:var(--r-full);border:1px solid var(--line);transition:box-shadow var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.chip-swatch span{font-size:11px;color:var(--muted)}
.chip-swatch.sel .dot{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold);transform:scale(1.05)}
.chip-swatch.sel span{color:var(--navy);font-weight:700}
.chip-swatch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfg-hint{font-size:12px;color:var(--muted);margin-top:8px;font-style:italic}
/* build summary */
.build{position:sticky;top:96px}
.build .p-plinth{padding:var(--s5);margin-bottom:var(--s4)}
.build .p-plinth img{max-height:280px;transition:opacity var(--t-std) var(--ease);opacity:1}
.build .imgnote{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:var(--s4)}
.build-sheet{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s4) var(--s5)}
.build-sheet .bs-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--s3)}
.build-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4)}
.build-sheet dt{font-size:12.5px;font-weight:700;color:var(--navy)}
.build-sheet dd{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.build .btn{width:100%;margin-top:var(--s4)}

/* ---------- benefits ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}

/* ---------- spec tables ---------- */
.spec-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
table.spec{border-collapse:separate;border-spacing:0;width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
table.spec th{background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:12px 18px}
table.spec td{border-top:1px solid var(--line);padding:11px 18px;font-size:14px;color:var(--ink)}
table.spec tr:first-child td{border-top:none}
table.spec td:first-child{font-weight:700;color:var(--navy);width:45%}
table.spec td.mono,table.spec td:last-child{font-family:var(--mono);font-size:13px}
table.spec td:first-child{font-family:var(--font)}

/* ---------- packaging strip ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pack-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.pack-item b{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.pack-item p{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---------- engineering mode ---------- */
.eng-toggle-band{background:var(--navy);padding:var(--s7) 0}
.eng-toggle-inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.eng-toggle-band h2{color:#fff;font-size:26px}
.eng-toggle-band p{color:rgba(255,255,255,.7);font-size:14.5px;max-width:480px}
.eng-mode{background:var(--navy);overflow:hidden;max-height:0;opacity:0;transition:max-height 600ms var(--ease),opacity 420ms var(--ease)}
.eng-mode.open{max-height:2400px;opacity:1}
.eng-inner{max-width:var(--content-max);margin:0 auto;padding:var(--s6) var(--s5) var(--s9)}
.eng-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.eng-stage{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:var(--s5);position:relative}
.eng-stage svg{width:100%;height:auto;display:block}
.eng-stage .stage-note{font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.45);text-align:center;margin-top:var(--s3)}
.eng-controls{display:flex;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.eng-controls .chip-btn{background:transparent;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.eng-controls .chip-btn.sel,.eng-controls .chip-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
/* component list */
.comp-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.comp-list button{width:100%;text-align:left;display:flex;align-items:center;gap:14px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:12px 16px;cursor:pointer;transition:all var(--t-micro) var(--ease)}
.comp-list button:hover{border-color:var(--gold)}
.comp-list button.sel{background:rgba(201,150,46,.12);border-color:var(--gold)}
.comp-list .cnum{font-family:var(--mono);font-size:11px;color:var(--gold);width:22px;height:22px;border:1px solid var(--gold);border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.comp-list b{display:block;font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.03em}
.comp-list span{display:block;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
.comp-detail{background:rgba(255,255,255,.05);border-left:2px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s4) var(--s5);margin-top:var(--s4);min-height:96px}
.comp-detail b{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.comp-detail .mat{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.85);display:block;margin-bottom:8px}
.comp-detail p{font-size:13.5px;color:rgba(255,255,255,.78)}
/* svg component styling */
.eng-svg .comp{stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.5;transition:stroke var(--t-std) var(--ease),fill var(--t-std) var(--ease)}
.eng-svg .comp.hl{stroke:var(--gold);fill:rgba(201,150,46,.14)}
.eng-svg .hotspot{cursor:pointer}
.eng-svg .hotspot circle{fill:var(--navy);stroke:var(--gold);stroke-width:1.25;transition:fill var(--t-micro) var(--ease)}
.eng-svg .hotspot text{fill:var(--gold);font-family:var(--mono);font-size:10px;text-anchor:middle;dominant-baseline:central}
.eng-svg .hotspot:hover circle,.eng-svg .hotspot.sel circle{fill:var(--gold)}
.eng-svg .hotspot:hover text,.eng-svg .hotspot.sel text{fill:#141B33}
/* oil path */
.eng-svg .oilpath{stroke:var(--gold);stroke-width:2.25;fill:none;stroke-linecap:round;stroke-dasharray:6 7;opacity:0;transition:opacity var(--t-std) var(--ease)}
.eng-svg .vaporpath{stroke:rgba(255,255,255,.85);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:3 8;opacity:0;transition:opacity var(--t-std) var(--ease)}
.eng-svg.flow .oilpath{opacity:1;animation:dashflow 1.6s linear infinite}
.eng-svg.flow .vaporpath{opacity:1;animation:dashflow 1.2s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-26}}
.eng-svg .pathlabel{fill:rgba(255,255,255,.6);font-family:var(--mono);font-size:9px;opacity:0;transition:opacity var(--t-std) var(--ease)}
.eng-svg.flow .pathlabel{opacity:1}

/* ---------- zirconia engineering (exploded assembly) ---------- */
.zr-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start}
.zr-stage{background:#FAF7F0;border:1px solid rgba(201,150,46,.18);border-radius:var(--r-md);padding:var(--s6);box-shadow:0 14px 40px rgba(10,14,30,.28)}
.zr-fig{position:relative}
.zr-fig img{width:100%;display:block;transition:filter var(--t-std) var(--ease)}
.zr-fig.focus img{filter:contrast(1.06)}
/* spotlight veil: whitens the non-active components; the active component
   shows through a feathered hole at full, unaltered fidelity */
.zr-veil{position:absolute;inset:0;background:rgba(250,247,240,.8);opacity:0;transition:opacity var(--t-std) var(--ease);pointer-events:none}
.zr-veil.on{opacity:1}
/* invisible hover regions over each component on the illustration */
.zr-hot{position:absolute;cursor:pointer;background:transparent}
.zr-hot:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--r-sm)}
.zr-note{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;margin-top:16px;letter-spacing:.08em}
.zr-summary{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:16px}
.zr-summary b{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.zr-summary p{font-size:13px;color:var(--ink)}
.zr-summary .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);display:block;margin-top:8px}
/* engineering list — specification-sheet hierarchy */
.zr-list{list-style:none}
.zr-list li{display:flex;gap:14px;padding:14px;border-left:2px solid transparent;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:opacity var(--t-std) var(--ease),border-color var(--t-std) var(--ease),background var(--t-std) var(--ease)}
.zr-list li:last-child{border-bottom:none}
.zr-list li:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.zr-list .num{font-family:var(--mono);font-size:11px;color:var(--gold);width:22px;height:22px;border:1px solid var(--gold);border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:background var(--t-std) var(--ease),color var(--t-std) var(--ease)}
.zr-li-body{flex:1;min-width:0}
.zr-li-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zr-list b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.zr-list .mat{font-family:var(--mono);font-size:10.5px;color:var(--gold);text-align:right;letter-spacing:.02em}
.zr-list p{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
.zr-list.dim li{opacity:.42}
.zr-list.dim li.on{opacity:1;border-left-color:var(--gold);background:rgba(201,150,46,.07)}
.zr-list.dim li.on .num{background:var(--gold);color:var(--navy-900)}
/* entry: illustration fades in (site reveal), list rows settle with a stagger */
.zr-list.reveal.in li{animation:zrRowIn 420ms var(--ease) backwards}
.zr-list.reveal.in li:nth-child(1){animation-delay:60ms}
.zr-list.reveal.in li:nth-child(2){animation-delay:120ms}
.zr-list.reveal.in li:nth-child(3){animation-delay:180ms}
.zr-list.reveal.in li:nth-child(4){animation-delay:240ms}
.zr-list.reveal.in li:nth-child(5){animation-delay:300ms}
.zr-list.reveal.in li:nth-child(6){animation-delay:360ms}
.zr-list.reveal.in li:nth-child(7){animation-delay:420ms}
@keyframes zrRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:959px){.zr-grid{grid-template-columns:1fr}}

/* ---------- related products ---------- */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:760px}
.related-grid .card .plinth{height:180px}
.related-grid .card .plinth img{max-height:160px}
.related-reason{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--s2);display:block}

/* ---------- mobile sticky CTA ---------- */
.msticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(30,39,73,.97);backdrop-filter:blur(8px);padding:10px var(--s4);transform:translateY(110%);transition:transform var(--t-std) var(--ease)}
.msticky.show{transform:none}
.msticky .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.msticky .who{color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em}
.msticky .who span{display:block;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.6);font-weight:400}

/* ---------- responsive ---------- */
@media(max-width:1199px){.benefit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:959px){
  .p-hero-grid,.config-grid,.eng-layout,.spec-cols{grid-template-columns:1fr;gap:var(--s6)}
  .p-hero h1{font-size:48px}
  .build{position:static}
  .pack-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:639px){
  .benefit-grid{grid-template-columns:1fr}
  .msticky{display:block}
  .p-hero .ctas .btn{width:100%}
}

@media (prefers-reduced-motion: reduce){.build .p-plinth img{transition:none}}

/* ============================================================
   GLASS — PRODUCTION REFINEMENT (scoped; other pages untouched)
   ============================================================ */
/* vertical rhythm: one consistent system, ~25% tighter */
.pg-glass .section{padding:var(--s9) 0}
.pg-glass .section.tight{padding:var(--s8) 0}
.pg-glass .section-head{margin-bottom:var(--s6)}
.pg-glass .close-band{padding:var(--s8) 0}
/* hero: larger render, tighter, balanced */
.pg-glass .p-hero{padding:var(--s7) 0 var(--s8)}
.pg-glass .p-hero-grid{gap:var(--s7)}
.pg-glass .p-hero .p-plinth{padding:var(--s6)}
.pg-glass .p-hero .p-plinth img{max-height:540px}
.pg-glass .p-hero h1{margin-bottom:var(--s2)}
.pg-glass .p-hero .tagline{margin-bottom:var(--s4)}
.pg-glass .p-hero .quickspec{margin:var(--s4) 0 var(--s5)}
/* engineering: continuous story */
.pg-glass .eng-toggle-band{padding:var(--s8) 0 var(--s5)}
.pg-glass .eng-toggle-inner{display:block}
.pg-glass .eng-toggle-band p{max-width:560px}
.pg-glass .eng-mode{max-height:none;opacity:1;transition:none}
.pg-glass .eng-inner{padding:var(--s4) var(--s5) var(--s8)}
.pg-glass .eng-stage{padding:var(--s6)}
.pg-glass .eng-svg{max-width:400px;margin:0 auto}
/* merged dimensions rows inside specifications */
.pg-glass .dims-sub{margin:var(--s7) 0 var(--s5)}
.pg-glass .dims-sub .eyebrow{display:block;margin-bottom:var(--s2)}
.pg-glass .dims-sub .rule{width:96px;height:2px;background:var(--gold);border:none}
.pg-glass .spec-cols + .dims-sub + .spec-cols{margin-top:0}
/* packaging: 4-up technical grid */
.pg-glass .pack-grid{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
/* OEM: slim premium callout */
.pg-glass .oem-callout{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-md);padding:var(--s6) var(--s7);display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.pg-glass .oem-callout h3{font-size:24px;margin:var(--s2) 0 var(--s3)}
.pg-glass .oem-callout .oem-line{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.pg-glass .oem-callout .oem-copy{font-size:14.5px;color:var(--ink);max-width:640px;margin-bottom:var(--s3)}
.pg-glass .cfg-hint b{color:var(--navy);font-style:normal}
.pg-glass .cfg-hint a{color:var(--gold-text);font-weight:700;text-decoration:none}
.pg-glass .cfg-hint a:hover{text-decoration:underline}
/* related: larger imagery, balanced row */
.pg-glass .related-grid{max-width:920px}
.pg-glass .related-grid .card .plinth{height:220px}
.pg-glass .related-grid img{max-height:200px}
/* packaging -> OEM: sibling cream sections read as one void; close the gap */
.pg-glass #oem{padding-top:0}
/* benefits: closer to configurator */
.pg-glass .benefit-grid{gap:var(--s5)}
@media (max-width:900px){
  .pg-glass .pack-grid{grid-template-columns:repeat(2,1fr)}
  .pg-glass .oem-callout{padding:var(--s5)}
  .pg-glass .p-hero .p-plinth img{max-height:420px}
}
@media (max-width:600px){
  .pg-glass .pack-grid{grid-template-columns:1fr}
}

/* ============ AIO color selector — premium tile component ============ */
.cw-collection{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.cw-tile{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:54px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:0;
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease),transform 200ms var(--ease)}
.cw-tile .cw-swatch{width:30px;height:30px;border-radius:9px;border:1px solid rgba(30,39,73,.10);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55),inset 0 -1px 2px rgba(30,39,73,.08);
  transition:transform 200ms var(--ease)}
.cw-tile:hover{border-color:#C8C2B2;transform:translateY(-1px);box-shadow:0 2px 8px rgba(30,39,73,.07)}
.cw-tile:hover .cw-swatch{transform:scale(1.06)}
.cw-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cw-tile.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 3px 10px rgba(30,39,73,.10);transform:translateY(-1px)}
.cw-tile.sel::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;
  background:var(--gold) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2 5.2 4.2 7.4 8 3" fill="none" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/8px no-repeat;
  box-shadow:0 1px 3px rgba(30,39,73,.25)}
.cfg-group[data-group="color"] .cfg-label span[data-current]{font-weight:700;color:var(--gold-text);letter-spacing:.02em}
.cfg-group[data-group="color"] .cfg-hint{margin-top:10px}
@media (prefers-reduced-motion: reduce){
  .cw-tile,.cw-tile .cw-swatch{transition:none}
  .cw-tile:hover,.cw-tile.sel{transform:none}
}