/* The configurator: the board on one side, the choices on the other, and a
   running total that never leaves the screen. */

.shop-page { background: var(--ink); }

.cfg {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 4vw, 72px);
  width: 100%; max-width: 1500px; margin-inline: auto;
  padding: 0 var(--gutter) 140px;
}

/* the board */
.cfg-stage {
  position: sticky; top: 66px; align-self: start;
  height: min(78vh, 760px);
  display: flex; flex-direction: column;
}
.cfg-stage canvas { flex: 1; width: 100%; min-height: 0; touch-action: none; }
.cfg-stage canvas:focus-visible { outline: 2.5px solid var(--turmeric); outline-offset: -4px; }
.cfg-caption {
  font-size: 14px; color: var(--dim); text-align: center;
  padding: 0 0 10px; min-height: 2.4em;
}
.no-webgl .cfg-stage canvas { display: none; }
.no-webgl .cfg-stage { height: auto; }

/* the choices */
.cfg-panel { padding-block: clamp(40px, 6vw, 84px) 0; }
.cfg-head { margin-bottom: clamp(36px, 5vw, 60px); }
.cfg-kicker { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--turmeric); margin-bottom: 14px; }
.cfg-head h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 16px; }
.cfg-head p { color: var(--dim); max-width: 46ch; }

.step { padding-block: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; padding-top: 0; }
.step h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 10px;
}
.step-n {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--turmeric); border: 1px solid var(--line); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto;
}
.step-note { font-size: 15.5px; color: var(--dim); max-width: 52ch; margin-bottom: 18px; }

.opts { display: grid; gap: 8px; margin-top: 14px; }
.opts-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.opt {
  appearance: none; text-align: left; cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 17px;
  background: var(--ink-2); color: var(--ivory);
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--font-body);
  transition: border-color .16s, background-color .16s;
}
.opt:hover { border-color: color-mix(in srgb, var(--turmeric) 55%, var(--line)); }
.opt.is-on { border-color: var(--turmeric); background: color-mix(in srgb, var(--turmeric) 7%, var(--ink-2)); }
.opt:focus-visible { outline: 2.5px solid var(--turmeric); outline-offset: 2px; }

.opt-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.opt-title { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.opt-sub { font-size: 14px; color: var(--dim); line-height: 1.45; }
.opt-right {
  flex: 0 0 auto; align-self: center; text-align: right;
  font-size: 14.5px; font-weight: 700; color: var(--ivory-2); white-space: nowrap;
}
.opt.is-on .opt-right { color: var(--turmeric); }
.opts-tall .opt-title { font-size: 17.5px; }

.opt-swatch { display: flex; flex: 0 0 auto; border: 1px solid var(--line); align-self: flex-start; margin-top: 2px; }
.opt-swatch i { display: block; width: 13px; height: 34px; }
.opt.is-on .opt-swatch { outline: 1.5px solid var(--turmeric); outline-offset: 1px; border-color: transparent; }

.opt-group {
  grid-column: 1 / -1; margin-top: 12px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--turmeric); letter-spacing: .01em;
}
.opt-group:first-child { margin-top: 0; }

.cfg-foot { margin-top: 26px; font-size: 14.5px; color: var(--dim); max-width: 50ch; }

/* the total, always in view */
.cfg-summary {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 3vw, 40px);
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--ink) 93%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.sum-lines { min-width: 0; flex: 1; }
.sum-what { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.sum-detail { font-size: 14px; color: var(--dim); }
.sum-money { text-align: right; }
.sum-total { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--turmeric); line-height: 1.1; }
.sum-lead { font-size: 13.5px; color: var(--dim); }
.cfg-summary .btn { flex: 0 0 auto; }
body.is-asking .cfg-summary { opacity: 0; pointer-events: none; }

@media (max-width: 980px) {
  .cfg { grid-template-columns: 1fr; padding-bottom: 170px; }
  .cfg-stage { position: static; height: 54vh; min-height: 320px; padding-top: 18px; }
  .cfg-panel { padding-top: 8px; }
}
@media (max-width: 560px) {
  .cfg-summary { padding: 12px var(--gutter) 14px; }
  .sum-lines { flex: 1 0 100%; }
  .sum-money { text-align: left; margin-right: auto; }
  .cfg-summary .btn { width: auto; }
  .opt-sub { display: none; }
  .opts-tall .opt-sub { display: block; }
}