/* Build-Your-Glass stepper — shared across the 7 dimension pages + the Density
 * Selector (Opacity step). Re-declares the palette tokens it needs so it stays
 * portable, and matches the Resources family (dark ground, gold accent, Proxima).
 * Step-page body styling is borrowed from glass-anatomy/style.css (.ga-* classes).
 */

.bs-stepper{
  --bs-bg:#0a0a0c; --bs-bg-2:#16161a; --bs-bord:#25252a;
  --bs-text:#e8e8ea; --bs-mute:#9b9ba2; --bs-faint:#6a6a72; --bs-gold:#c8a96a;
  font-family:"proxima-nova","Proxima Nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  max-width:1400px; margin:0 auto; padding:22px 24px 4px; color:var(--bs-text);
}

/* Step pages run full-bleed dark like the Opacity tool (its body class scopes
 * the dark ground; build-step pages need the same so the 1400px content isn't
 * boxed on a light theme background). */
body.page-template-page-build-step{background:#0a0a0c; color:#e8e8ea}
body.page-template-page-build-step #main,
body.page-template-page-build-step .site-content,
body.page-template-page-build-step .content-area{background:#0a0a0c}

.bs-stepper__top{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.bs-stepper__count{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bs-gold)}
.bs-stepper__note{font-size:12px; color:var(--bs-faint)}

/* progress rail — every dimension is a clickable node */
.bs-rail{display:flex; align-items:flex-start; gap:0; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none}
.bs-rail::-webkit-scrollbar{display:none}
.bs-node{position:relative; flex:1 1 0; min-width:84px; text-align:center}
/* connector line between nodes */
.bs-node + .bs-node::before{content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--bs-bord); z-index:0}
.bs-node.is-on::before, .bs-node.is-done::before{background:var(--bs-gold)}
.bs-node a{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; color:var(--bs-mute); padding:0 4px}
.bs-node__num{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--bs-bg-2); border:2px solid var(--bs-bord); color:var(--bs-mute);
  font-size:12px; font-weight:600; transition:.15s;
}
.bs-node__lbl{font-size:11px; letter-spacing:.04em; color:var(--bs-mute); transition:.15s; white-space:nowrap}
.bs-node a:hover .bs-node__num{border-color:var(--bs-faint); color:var(--bs-text)}
.bs-node a:hover .bs-node__lbl{color:var(--bs-text)}
.bs-node.is-done .bs-node__num{border-color:var(--bs-gold); color:var(--bs-gold)}
.bs-node.is-on .bs-node__num{border-color:var(--bs-gold); background:var(--bs-gold); color:var(--bs-bg)}
.bs-node.is-on .bs-node__lbl{color:var(--bs-gold); font-weight:600}

/* Back / Next */
.bs-prevnext{display:flex; justify-content:space-between; gap:12px; margin-top:22px}
.bs-pn{
  display:inline-block; padding:12px 22px; border-radius:6px; font-size:13px; font-weight:600;
  letter-spacing:.03em; text-decoration:none; border:1px solid var(--bs-bord); color:var(--bs-text); transition:.15s;
}
.bs-pn:hover{border-color:var(--bs-faint)}
.bs-pn--next{background:var(--bs-gold); color:var(--bs-bg); border-color:var(--bs-gold)}
.bs-pn--next:hover{background:#d8bd86}

/* step page body */
.bs-main{padding-top:26px}
.bs-panel{max-width:none; margin:0 auto}

/* option rows that carry a product image: thumbnail | option | description.
 * Overrides the base .ga-row two-column grid (build.css loads after the anatomy
 * stylesheet, so this wins). Literal colors — the --bs-* tokens are scoped to
 * .bs-stepper and don't reach here. */
.bs-row{grid-template-columns:440px 300px 1fr; align-items:start; gap:38px; padding:30px 0}
.bs-row__img{align-self:stretch}
.bs-row__img img{
  display:block; width:100%; height:300px; object-fit:cover;
  border-radius:10px; border:1px solid #25252a; background:#16161a;
}
/* bigger supporting text — scoped to build-step rows so the Anatomy page,
 * which shares .ga-row__opt / .ga-row__say, keeps its tighter sizing. */
.bs-row .ga-row__opt{font-size:23px; font-weight:500; line-height:1.25}
.bs-row .ga-row__opt small{display:block; font-size:14.5px; margin-top:8px; line-height:1.5}
.bs-row .ga-row__say{font-size:18px; line-height:1.65}
.bs-row .ga-chips{margin-top:16px; gap:9px}
.bs-row .ga-chip{font-size:13px; padding:6px 13px}
.bs-row .ga-chip--lbl{font-size:11px}

@media(max-width:1000px){
  .bs-row{grid-template-columns:340px 1fr; gap:28px}
  .bs-row__img{grid-row:span 2}
}
@media(max-width:680px){
  .bs-row{grid-template-columns:1fr; gap:16px}
  .bs-row__img{grid-row:auto}
  .bs-row__img img{height:260px}
}

@media(max-width:640px){
  .bs-node__lbl{font-size:10px}
  .bs-stepper{padding-left:16px; padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .bs-node__num,.bs-node__lbl,.bs-pn{transition:none}
}