/* BRIGHTWORK — store pages (shop + product).
   Same tokens as the homepage, plus the two new templates. The homepage keeps
   its own inline CSS; this file is the shop's half of the same system.       */

:root{
  --bg:#F3F2F6;
  --panel:#E8E6EE;
  --ink:#16141B;
  --ink-soft:rgba(22,20,27,.62);
  --ink-faint:rgba(22,20,27,.40);
  --line:rgba(22,20,27,.12);

  --racing-red:#A81E24;
  --black-cherry:#5A162B;
  --coffee-bean:#48291F;
  --alabaster:#C9C7D0;
  --accent:var(--racing-red);

  --night:#15131C;
  --night-2:#100E16;
  --ink-inv:#F3F2F6;
  --soft-inv:rgba(243,242,246,.66);
  --line-inv:rgba(243,242,246,.16);
  --accent-night:#E4585F;

  --glow-2700k:#FFB06A;
  --glow-spill:#E09248;

  --pad:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{background:var(--bg);color:var(--ink);font-family:'Switzer',system-ui,sans-serif;
  overflow-x:clip;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
h1,h2,h3{font-family:'Melodrama',Georgia,serif;font-weight:400;text-wrap:balance;}
h1 em,h2 em{font-style:italic;font-weight:300;}
a{color:inherit;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.mono{font-family:'Azeret Mono',ui-monospace,monospace;}
.section-label{font-family:'Azeret Mono',ui-monospace,monospace;font-weight:500;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:300;background:var(--night);color:var(--ink-inv);
  padding:.7rem 1.1rem;border-radius:999px;}

/* ------------------------------------------------------------------ chrome */
header{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;padding:1.15rem var(--pad);
  background:rgba(243,242,246,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.mark{font-family:'Azeret Mono',monospace;font-weight:500;font-size:.8rem;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;color:inherit;}
nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2rem);}
nav a{color:inherit;text-decoration:none;font-size:.85rem;opacity:.8;}
nav a:hover,nav a[aria-current]{opacity:1;}
nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);}
.cart{border:1px solid currentColor;border-radius:999px;padding:.5rem 1.1rem;font-size:.8rem;
  background:none;color:inherit;font-family:'Switzer',sans-serif;cursor:pointer;}
@media (max-width:820px){
  header{flex-wrap:wrap;row-gap:.7rem;}
  .mark{flex:1;}
  nav{order:2;width:100%;gap:1.4rem;font-size:.82rem;}
  .cart{order:1;padding:.42rem .95rem;}
}

.btn{display:inline-flex;align-items:center;gap:.65rem;font-family:'Switzer',sans-serif;
  font-weight:500;font-size:.9rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  border-radius:999px;padding:.9rem 1.7rem;text-decoration:none;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;}
.btn:hover{background:transparent;color:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--bg);}
.btn[disabled]{opacity:.4;pointer-events:none;}

footer{background:var(--night);color:var(--ink-inv);padding:4rem var(--pad) 2.5rem;margin-top:6rem;}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;gap:2.5rem;}
.footer-brand .mark{display:inline-block;margin-bottom:.9rem;color:var(--ink-inv);}
.footer-brand p{font-size:.88rem;color:var(--soft-inv);max-width:34ch;line-height:1.55;}
.footer-cols{display:flex;gap:clamp(2.5rem,6vw,5rem);flex-wrap:wrap;}
.footer-col h4{font-family:'Azeret Mono',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soft-inv);margin-bottom:1rem;font-weight:500;}
.footer-col a{display:block;color:var(--ink-inv);text-decoration:none;font-size:.9rem;
  margin-bottom:.65rem;opacity:.85;}
.footer-col a:hover{opacity:1;}
.footer-bottom{max-width:1400px;margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--line-inv);font-size:.8rem;color:var(--soft-inv);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;}

.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad);}

/* --------------------------------------------------- the shared day/night frame */
.lightframe{position:relative;width:100%;overflow:hidden;background:var(--panel);isolation:isolate;}
.lightframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lightframe .night{opacity:0;}
.lightframe .glow{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(56% 40% at 54% 52%, var(--glow-2700k) 0%, transparent 64%),
    radial-gradient(92% 78% at 54% 56%, var(--glow-spill) 0%, transparent 74%);}
.lightframe img,.lightframe .glow{transition:opacity .8s cubic-bezier(.4,0,.2,1);}
@media (prefers-reduced-motion:reduce){
  .lightframe img,.lightframe .glow{transition:none !important;}
}

.lights-toggle{display:inline-flex;align-items:center;gap:.85rem;cursor:pointer;
  font-family:'Azeret Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:999px;
  padding:.85rem 1.5rem;transition:background .3s,color .3s;}
.lights-toggle:hover{background:transparent;color:var(--ink);}
.lights-toggle .bulb{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor;
  opacity:.35;transition:opacity .35s ease,box-shadow .35s ease;}
.lights-toggle.lit .bulb{opacity:1;background:var(--glow-2700k);
  box-shadow:0 0 0 3px rgba(255,176,106,.25),0 0 14px 2px rgba(255,176,106,.75);}

/* ==========================================================================
   SHOP
   The bold move: the compare rail. Tick up to three fixtures and a tray rises
   from the foot of the page holding their real numbers side by side — the
   thing a lighting catalogue is actually for, and the thing none of them do.
   ========================================================================== */
.shop-head{padding:clamp(3.5rem,8vh,6rem) 0 0;display:flex;justify-content:space-between;
  align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.shop-head h1{font-size:clamp(2.6rem,6.5vw,5rem);line-height:.98;letter-spacing:-.015em;
  margin:1rem 0 1.25rem;max-width:14ch;}
.shop-head .lede{font-size:1.02rem;line-height:1.6;color:var(--ink-soft);max-width:46ch;}

.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin:clamp(2.5rem,5vh,3.5rem) 0 1.1rem;}
.chip{display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Azeret Mono',monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;
  cursor:pointer;color:var(--ink-soft);transition:border-color .2s,color .2s,background .2s;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.chip .swatch{width:10px;height:10px;flex:none;border:1px solid rgba(255,255,255,.35);}
.ledger{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);font-family:'Azeret Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.ledger b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);padding-top:clamp(2rem,4vh,3rem);}
.card{display:flex;flex-direction:column;}
.card.is-out{display:none;}
.card .lightframe{aspect-ratio:4/5;margin-bottom:1.1rem;border-radius:3px;}
.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.45rem;}
.card h2{font-size:1.7rem;line-height:1.1;}
.card h2 a{text-decoration:none;}
.card h2 a:hover{text-decoration:underline;text-underline-offset:5px;}
.card__price{font-family:'Azeret Mono',monospace;font-weight:500;font-size:.82rem;
  color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;}
.card__finish{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;
  font-family:'Azeret Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);}
.swatch{width:10px;height:10px;flex:none;border:1px solid var(--line);}
.card__desc{font-size:.92rem;line-height:1.55;color:var(--ink-soft);margin-bottom:1.1rem;flex:1;}
.card__acts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.card__acts .btn{padding:.72rem 1.3rem;font-size:.85rem;}

.cmp-tick{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:'Azeret Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);}
.cmp-tick input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;}
.cmp-tick:hover{color:var(--ink);}

/* the rail */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--night);
  color:var(--ink-inv);border-top:1px solid var(--line-inv);
  transform:translateY(100%);transition:transform .5s var(--ease);}
.rail.is-up{transform:none;}
.rail__in{max-width:1400px;margin:0 auto;padding:1.1rem var(--pad) 1.3rem;}
.rail__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:.9rem;}
.rail__top p{font-family:'Azeret Mono',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soft-inv);}
.rail__clear{background:none;border:0;cursor:pointer;color:var(--soft-inv);
  font-family:'Azeret Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;}
.rail__clear:hover{color:var(--ink-inv);}
.rail__scroll{overflow-x:auto;}
/* content-width, not stretched: two picks should not spread to the page edges */
.rail table{border-collapse:collapse;width:auto;}
.rail th,.rail td{text-align:left;padding:.5rem 2.5rem .5rem 0;font-size:.85rem;min-width:9rem;
  border-bottom:1px solid var(--line-inv);white-space:nowrap;}
.rail tr:last-child th,.rail tr:last-child td{border-bottom:0;}
.rail thead th{font-family:'Melodrama',Georgia,serif;font-weight:400;font-size:1.25rem;}
.rail tbody th{font-family:'Azeret Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft-inv);font-weight:500;width:11rem;}
.rail td{font-variant-numeric:tabular-nums;color:var(--ink-inv);}
.rail td.best{color:var(--glow-2700k);}
@media (max-width:700px){
  .rail tbody th{width:8rem;}
  .rail__in{padding-bottom:1rem;}
  /* three columns of seven rows would otherwise take the whole phone screen */
  .rail__scroll{max-height:52vh;overflow-y:auto;overscroll-behavior:contain;}
}

/* ==========================================================================
   PRODUCT
   The bold move: the fixture on the page is wired. Drag the dimmer and the
   photograph goes from daylight-off to 1%, and the readout gives you the real
   delivered lumens at that setting — the spec, demonstrated, not tabulated.
   ========================================================================== */
.crumbs{padding:1.4rem 0 0;font-family:'Azeret Mono',monospace;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 .5rem;}

.pdp{display:grid;gap:clamp(2rem,4.5vw,4rem);padding-top:clamp(1.5rem,4vh,2.5rem);
  grid-template-columns:1fr;}
/* grid items default to min-width:auto — see the same note in strata's store.css */
.pdp > *{min-width:0;}
@media (min-width:980px){
  .pdp{grid-template-columns:1.12fr .88fr;align-items:start;}
  .pdp__media{position:sticky;top:5.5rem;}
}

.stage{border-radius:3px;aspect-ratio:4/5;}
@media (min-width:980px){ .stage{aspect-ratio:1/1;} }
.stage-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:.8rem;font-family:'Azeret Mono',monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

/* the dimmer — the homepage control, brought onto the product */
.dimmer{margin-top:1.4rem;padding:1.1rem 1.25rem 1.25rem;background:var(--night);
  color:var(--ink-inv);border-radius:3px;}
.dim-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;
  font-family:'Azeret Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft-inv);}
.dim-top .readout{color:var(--glow-2700k);font-variant-numeric:tabular-nums;}
.dim-row{display:flex;align-items:center;gap:.85rem;}
.endpoint{flex:none;width:14px;height:14px;color:var(--soft-inv);}
.endpoint svg{display:block;width:100%;height:100%;}
input[type=range].dim{-webkit-appearance:none;appearance:none;flex:1;height:26px;
  background:transparent;cursor:ew-resize;margin:0;}
input[type=range].dim::-webkit-slider-runnable-track{height:2px;
  background:linear-gradient(to right,var(--glow-2700k) var(--fill,100%),
             rgba(243,242,246,.28) var(--fill,100%));}
input[type=range].dim::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:24px;border-radius:2px;background:var(--ink-inv);margin-top:-11px;}
input[type=range].dim::-moz-range-track{height:2px;background:rgba(243,242,246,.28);}
input[type=range].dim::-moz-range-progress{height:2px;background:var(--glow-2700k);}
input[type=range].dim::-moz-range-thumb{width:13px;height:24px;border-radius:2px;border:none;
  background:var(--ink-inv);}
.dim-note{margin-top:.75rem;font-size:.8rem;line-height:1.5;color:var(--soft-inv);max-width:44ch;}

.buy h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:-.015em;
  margin:.8rem 0 .6rem;}
.buy__price{font-family:'Azeret Mono',monospace;font-size:1.05rem;color:var(--accent);
  margin-bottom:1.2rem;font-variant-numeric:tabular-nums;}
.buy__lede{font-size:1rem;line-height:1.65;color:var(--ink-soft);max-width:46ch;}

fieldset{border:0;margin:1.9rem 0 0;}
legend{font-family:'Azeret Mono',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.85rem;}
.opts{display:flex;gap:.5rem;flex-wrap:wrap;}
.opt{position:relative;border:1px solid var(--line);border-radius:2px;
  padding:.7rem .95rem;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  transition:border-color .25s,background .25s;}
.opt:hover{border-color:var(--ink-soft);}
.opt input{position:absolute;opacity:0;pointer-events:none;}
.opt:has(input:checked){border-color:var(--ink);background:var(--panel);}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.opt__n{font-size:.9rem;}
.opt .swatch{width:14px;height:14px;border-radius:1px;}
.opt__note{font-size:.85rem;color:var(--ink-soft);line-height:1.55;margin-top:.85rem;
  max-width:46ch;min-height:2.6em;}
.opt__note b{color:var(--accent);font-weight:500;}

.qtyrow{display:flex;align-items:center;gap:.9rem;margin-top:1.9rem;flex-wrap:wrap;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;}
.qty button{width:2.5rem;height:2.75rem;background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:1.05rem;border-radius:999px;}
.qty button:hover{background:var(--panel);}
.qty input{width:2.5rem;height:2.75rem;border:0;background:none;text-align:center;
  font-family:'Azeret Mono',monospace;font-size:.85rem;color:var(--ink);-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;}
.qtyrow .btn{flex:1;justify-content:center;min-width:13rem;}
.buy__ship{font-family:'Azeret Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.9rem;}

/* the numbers, as a strip */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.2rem;}
.figures div{background:var(--bg);padding:1rem 1.1rem;}
.figures .k{font-family:'Azeret Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem;}
.figures .v{font-family:'Melodrama',Georgia,serif;font-size:1.5rem;line-height:1;}
.figures .v small{font-family:'Switzer',sans-serif;font-size:.7rem;color:var(--ink-soft);
  margin-left:.2rem;}

.specs-block{margin-top:clamp(2.2rem,5vh,3rem);border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc__q{width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;
  font-family:'Switzer',sans-serif;font-size:1rem;font-weight:500;text-align:left;}
.acc__q .plus{font-family:'Azeret Mono',monospace;font-size:1.1rem;color:var(--accent);
  transition:transform .25s ease;flex:none;}
.acc.is-open .acc__q .plus{transform:rotate(45deg);}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.acc__a-in{padding-bottom:1.4rem;}
.spec-list{list-style:none;}
.spec-list li{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.8rem 0;
  border-bottom:1px solid var(--line);}
.spec-list li:last-child{border-bottom:0;}
@media (min-width:560px){ .spec-list li{grid-template-columns:12rem 1fr;gap:1.5rem;} }
.spec-list .k{font-family:'Azeret Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:.2rem;}
.spec-list .v{font-size:.93rem;line-height:1.6;color:var(--ink-soft);}
.faq-q{font-weight:500;margin-bottom:.35rem;}
.faq-a{font-size:.93rem;line-height:1.6;color:var(--ink-soft);margin-bottom:1.2rem;max-width:56ch;}

.pairs{margin-top:clamp(4rem,9vh,7rem);}
.pairs h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:.9rem 0 2rem;}
.pairs .grid{grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),24rem));}