/* inSona EU · views/products.css · area C (scoped under .v-products)
   New pieces (built from base components, no new visual language):
   .jump    in-page range index under the H1 (hairline text links)
   .hours   the range's day, one row per scene (time · K swatch · scene · what it does)
   .spg     spec table + sticky detail panel
   .filters download-centre filters (base .chips-n, which select in ink, never clay) */

.v-products .kind{font:500 14px/1.3 var(--sans);color:var(--ink-2);margin-bottom:16px}

/* ---------- index head ---------- */
/* fold: H1 and lede side by side so the first range image starts by y ≈ 340 at 1440 */
.v-products{--meta:#5F5751}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v-products{--meta:#B5ACA2}}
:root[data-theme="dark"] .v-products{--meta:#B5ACA2}
.v-products .page-head{padding:32px 0 0}
.v-products .page-head .crumbs-nav{margin-bottom:28px}
.v-products .page-head .hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 72px;align-items:end}
.v-products .page-head .hd h1{white-space:nowrap;max-width:none}
.v-products .page-head .hd .lede{margin:0 0 8px;max-width:36em}
.v-products .jump{margin-top:32px;border-top:1px solid var(--line)}
.v-products .jump ul{display:flex;flex-wrap:wrap;gap:0 32px}
.v-products .jump a{display:inline-flex;align-items:center;min-height:48px;font:400 15px var(--sans);color:var(--ink-2);text-decoration:none;transition:color var(--t-ui)}
@media (hover:hover){.v-products .jump a:hover{color:var(--ink)}}

/* ---------- index: ranges ---------- */
.v-products .rg.first{padding-top:24px}
.v-products .rg .frame{max-height:720px}
.v-products .rg .txt .lede{margin-top:20px}
.v-products .hrs{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-2)}
.v-products .hrs .hl{font:500 14px/1.3 var(--sans);color:var(--ink-2);letter-spacing:0}
.v-products .hrs .hv{margin-top:6px;font:400 17px/1.45 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.v-products .hrs .sched{margin:20px 0 0}

/* ---------- works with ---------- */
.v-products .works .wk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:88px;align-items:start}
.v-products .works .kv{border-top:1px solid var(--line-2)}
.v-products .works .kv dd{color:var(--ink)}
.v-products .mute{color:var(--ink-2)}

/* ---------- download centre ---------- */
.v-products .dlhead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:88px;align-items:end}
.v-products .dlhead .lede{margin-top:20px}
.v-products .dlhead .plain{font:400 15px/1.55 var(--sans);color:var(--ink-2);max-width:34em}
.v-products .filters{display:grid;gap:20px;margin-top:48px}
.v-products .filters fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
.v-products .filters legend{float:left;font:500 14px/1.3 var(--sans);color:var(--ink-2);padding:0}
.v-products .ufilt{display:flex;flex-wrap:wrap;gap:0 28px}
.v-products .ufilt label{margin:0;position:relative}
.v-products .ufilt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.v-products .ufilt span{display:inline-flex;align-items:center;min-height:40px;font:400 15px/1.2 var(--sans);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:8px;transition:color var(--t-ui),text-decoration-color var(--t-ui);white-space:nowrap}
@media (hover:hover){.v-products .ufilt label:hover input:not(:checked)+span{color:var(--ink);text-decoration-color:var(--line)}}
.v-products .ufilt input:checked+span{color:var(--ink);font-weight:500;text-decoration-color:var(--ink);text-decoration-thickness:2px}
.v-products .ufilt input:focus-visible+span{box-shadow:var(--focus);border-radius:4px}
.v-products .dlbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:40px 0 12px;min-height:48px}
.v-products .dlbar .count{font:400 14px var(--sans);color:var(--ink-2)}
.v-products .dlist{display:grid;gap:48px}
.v-products .dg{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 64px;align-items:start}
.v-products .dgh{font-size:28px;position:sticky;top:calc(var(--hdr) + 24px)}
.v-products .dg>.dp{grid-column:2}
.v-products .dp+.dp{margin-top:20px}
.v-products .dp h4{margin:0 0 8px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.v-products .dp h4 .n{color:var(--ink-2);margin-right:6px}
.v-products .dlempty{margin-top:24px}

/* document rows: band glyph marker, file name, meta line, "Request →" text link */
.v-products .dl-r li{grid-template-columns:14px minmax(0,1fr) auto;gap:16px;padding:14px 0}
.v-products .dl-r .mk{color:var(--ink-3);align-self:start;margin-top:8px}
.v-products .dl-r .nm b{font:500 15px/1.35 var(--sans);font-variant-numeric:tabular-nums}
.v-products .dl-r .nm .meta{display:block;margin-top:3px;font:400 12px/1.4 var(--sans);color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
.v-products .dl-r .act{font-size:14px;min-height:40px}

/* ---------- specifying inSona ---------- */
.v-products .spfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:88px;align-items:start}
.v-products .spfg .lede{margin-top:20px}
.v-products .spf .after{margin-top:28px}
.v-products .spk{border-top:1px solid var(--line-2);grid-template-columns:minmax(150px,auto) minmax(0,1fr)}
.v-products .spk dd{color:var(--ink)}
.v-products .spk .clause{display:block;font:400 19px/1.5 var(--serif);color:var(--ink);quotes:"“" "”"}
.v-products .spk .cn{display:block;margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--meta)}
.v-products .tnote{margin-top:12px;font:400 12px/1.45 var(--sans);color:var(--meta)}
.v-products .spf.compact{margin-top:48px}
.v-products .spf.compact h3{font-size:24px;margin-bottom:16px}
.v-products .spf.compact .spk{font-size:14.5px}
.v-products .spf.compact .clause{font-size:17px}
.v-products .spf.compact .after{margin-top:20px}

/* ---------- closing consultation path (shared by both routes) ---------- */
.v-products .endp{padding-bottom:40px}
.v-products .endc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:center;padding:48px 56px}
.v-products .endc .lede{margin-top:16px}
.v-products .endc .pill-row{display:flex;gap:12px;flex-wrap:wrap}
.v-products .rpager{margin-top:64px}

/* ---------- range hero (headline cap at the photo top + 96 px) ---------- */
.v-products .rhero{padding:28px 0 16px}
.v-products .rhero .crumbs-nav{margin-bottom:32px}
.v-products .rh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:88px;align-items:start}
.v-products .rh .copy{padding-top:80px}
.v-products .rh .short{display:none}
.v-products .rh .body{margin-top:28px;max-width:42ch;color:var(--ink-2)}
.v-products .rh .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.v-products .rh .frame{height:min(720px,calc(100vh - 180px));min-height:560px;aspect-ratio:auto}

/* ---------- the day ---------- */
.v-products .dayg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:88px;align-items:start}
.v-products .hours{border-top:1px solid var(--line)}
.v-products .hours li{display:grid;grid-template-columns:72px 56px minmax(0,190px) minmax(0,1fr);gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.v-products .hours .tm{font:300 28px/1 var(--sans);letter-spacing:-.4px;color:var(--ink)}
/* the pill sits on the shared baseline, then drops so its centre is on the scene label's x-height */
.v-products .hours .kw{height:10px;border-radius:5px;align-self:baseline;transform:translateY(calc(5px - .24em));font-size:15px;box-shadow:inset 0 0 0 1px rgba(60,30,10,.08)}
.v-products .hours .sc b{display:block;font:500 15px/1.3 var(--sans)}
.v-products .hours .sc span{display:block;font:400 13px/1.35 var(--sans);color:var(--ink-2)}
.v-products .hours p{font-size:17px;line-height:27px;color:var(--ink)}
.v-products .day .cite{margin-top:16px}

/* ---------- spec table + detail panel ---------- */
.v-products .sphead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:end;margin-bottom:40px}
.v-products .spg{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start}
.v-products .spec tbody tr{cursor:pointer}
.v-products .spec tbody tr:focus-visible{box-shadow:inset var(--focus);border-radius:0}
.v-products .spec td{font-size:14.5px}
/* colour temperature never breaks ("1,800–12,000 K" stays on one line) */
.v-products .spec th:has(button[data-col="cct"]),.v-products .spec td:has(.sw-k){min-width:200px;white-space:nowrap}
.v-products .spec th button:after{opacity:0;transition:opacity var(--t-ui)}
@media (hover:hover){.v-products .spec th button:hover:after{opacity:.5}}
.v-products .spec th button:focus-visible:after{opacity:.5}
.v-products .spec th[aria-sort="ascending"] button:after,.v-products .spec th[aria-sort="descending"] button:after{opacity:1}
.v-products .pnl{position:sticky;top:calc(var(--hdr) + 24px);padding:32px}
.v-products .pnl.in{animation:pr-in var(--t-ui) ease-out}
@keyframes pr-in{from{opacity:.4}to{opacity:1}}
.v-products .pnl .pref{font:500 13px/1.3 var(--sans);color:var(--ink-2)}
.v-products .pnl h3{margin-top:8px}
.v-products .pnl .note{margin-top:12px;font-size:16px;line-height:25px;color:var(--ink-2)}
.v-products .pnl .kv{margin-top:20px;grid-template-columns:150px minmax(0,1fr);font-size:14px}
.v-products .pnl .kv dt{white-space:normal;min-width:0}
.v-products .pnl .kv dt,.v-products .pnl .kv dd{padding:10px 0}
.v-products .pnl .kv dt{padding-right:16px}
.v-products .pnl .dlh{margin:28px 0 10px;font:500 14px/1.3 var(--sans);color:var(--ink-2)}
.v-products .pnl .dl li{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
.v-products .pnl .dl .sz{grid-column:2;grid-row:2;margin-top:-10px;font-size:12.5px}
.v-products .pnl .dl .act{grid-column:3;grid-row:1/3}
.v-products .pnl .dl .nm b{font-size:14.5px}
.v-products .pnl .after{margin-top:24px}

/* ---------- where it's used / project ---------- */
.v-products .used .lede{margin:20px 0 36px}
.v-products .used .rooms{align-items:start}
.v-products .used .rooms .fcol{align-self:start}
.v-products .used .rooms .frame{aspect-ratio:4/5;align-self:start}
.v-products .proj .statement{margin-bottom:28px}
.v-products .proj .ph-note{margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .v-products .rh,.v-products .works .wk,.v-products .dlhead,.v-products .dayg,.v-products .sphead,.v-products .spfg{gap:56px}
  .v-products .spg{grid-template-columns:minmax(0,1fr) 380px}
}
@media (max-width:1100px){
  .v-products .spg{grid-template-columns:minmax(0,1fr)}
  .v-products .pnl{position:relative;top:auto}
  .v-products .dayg{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:980px){
  .v-products .rhero{padding:20px 0 0}
  .v-products .rh{grid-template-columns:minmax(0,1fr);gap:0}
  .v-products .rh .copy{display:contents}
  .v-products .rh .kind{order:1;margin-bottom:12px}
  .v-products .rh h1{order:2}
  .v-products .rh .short{order:3;display:block;margin-top:12px;color:var(--ink-2)}
  .v-products .rh .fig{order:4;margin-top:24px}
  .v-products .rh .body{order:5;margin-top:28px}
  .v-products .rh .ctas{order:6}
  .v-products .rh .frame{height:220px;min-height:0}
  .v-products .works .wk,.v-products .dlhead,.v-products .sphead,.v-products .spfg{grid-template-columns:minmax(0,1fr);gap:24px}
  .v-products .page-head .hd{grid-template-columns:minmax(0,1fr);gap:20px}
  .v-products .page-head .hd h1{white-space:normal}
  .v-products .dg{grid-template-columns:minmax(0,1fr);gap:16px}
  .v-products .dg>.dp{grid-column:1}
  .v-products .dgh{position:static}
  .v-products .endc{grid-template-columns:minmax(0,1fr);padding:36px 32px}
  .v-products .rg .frame{max-height:none}
}
@media (max-width:600px){
  .v-products .page-head .crumbs-nav{margin-bottom:24px}
  .v-products .jump ul{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0 20px;margin:0 -16px;padding:0 24px 0 16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent 100%)}
  /* 24 px fades at whichever edges have more to scroll to (set from products.js) */
  .v-products .jump ul.fl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
  .v-products .jump ul.fl.end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px);mask-image:linear-gradient(90deg,transparent 0,#000 24px)}
  .v-products .jump ul::-webkit-scrollbar{display:none}
  .v-products .jump li{flex:none}
  .v-products .rg.first{padding-top:40px}
  .v-products .rg .frame{aspect-ratio:3/2}
  .v-products .filters fieldset{grid-template-columns:minmax(0,1fr);gap:10px}
  .v-products .ufilt{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;gap:0 22px;scrollbar-width:none}
  .v-products .ufilt::-webkit-scrollbar{display:none}
  .v-products .ufilt label{flex:none}
  .v-products .spk{grid-template-columns:minmax(0,1fr)}
  .v-products .spk dt{padding-bottom:0;border-bottom:0}
  .v-products .spk dd{padding-top:4px}
  .v-products .dgh{font-size:24px}
  .v-products .hours li{grid-template-columns:64px minmax(0,1fr);gap:6px 16px;padding:18px 0}
  .v-products .hours .tm{font-size:24px;grid-row:1/3}
  .v-products .hours .kw{display:none}
  .v-products .hours p{grid-column:2;font-size:16px;line-height:25px}
  .v-products .pnl{padding:24px 18px}
  .v-products .endc{padding:28px 20px}
  .v-products .endc .pill-row .pill{flex:1 1 auto}
  .v-products .rh .ctas .pill{flex:1 1 auto}
  .v-products .rpager{margin-top:48px}
  .v-products .spec{min-width:760px}
  .v-products .used .rooms .frame{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){ .v-products .pnl.in{animation:none} }