/* ───────────────────────────────────────────────────────────────
   Sitehouse — the extras page
   The included list, the selectable add-on rows and the bar that
   follows you down the page carrying the running total. Lifted out
   of the landing page when the catalogue got its own page.
   ─────────────────────────────────────────────────────────────── */

/* The 34 that come with every build. A rule, not a price list — so the
   row carries a tick and nothing else. */
.inc-row {
  position:relative; padding-left:1.4rem;
  font-size:0.875rem; line-height:1.45; color:rgb(var(--c-ink));
}
.inc-row::before {
  content:''; position:absolute; left:0; top:0.34em;
  width:0.72rem; height:0.4rem;
  border-left:1.8px solid rgb(var(--c-accent));
  border-bottom:1.8px solid rgb(var(--c-accent));
  transform:rotate(-45deg);
}

/* A selectable add-on. The whole row is the control, the number on the
   right never moves, and ticking one only changes a total — no submit,
   no navigation, no reload. */
.pick {
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:0 0.75rem; padding:0.68rem 0.4rem 0.68rem 0.15rem;
  border-bottom:1px solid rgb(var(--c-line));
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color 140ms ease;
}
.pick:hover { background:rgb(var(--c-ink) / 0.025); }
.pick--soon { cursor:default; grid-template-columns:1fr auto; }
.pick--soon:hover { background:none; }

.pick-cb {
  position:absolute; width:1px; height:1px; opacity:0;
  margin:0; padding:0; pointer-events:none;
}
.pick-box {
  align-self:center; width:1.05rem; height:1.05rem; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgb(var(--c-line-firm)); border-radius:0.3rem;
  background:rgb(var(--c-paper)); color:rgb(var(--c-on-accent));
  transition:background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pick-box svg { width:0.72rem; height:0.72rem; opacity:0; transform:scale(0.6); transition:opacity 120ms ease, transform 160ms cubic-bezier(0.2,0.9,0.3,1.3); }
.pick-cb:checked ~ .pick-box { background:rgb(var(--c-accent)); border-color:rgb(var(--c-accent)); }
.pick-cb:checked ~ .pick-box svg { opacity:1; transform:scale(1); }
.pick-cb:focus-visible ~ .pick-box { outline:2px solid rgb(var(--c-accent)); outline-offset:2px; }
.pick:active .pick-box { transform:scale(0.92); }

.pick-name { font-size:0.9375rem; font-weight:600; line-height:1.4; color:rgb(var(--c-ink)); }
.pick-note { font-weight:400; color:rgb(var(--c-ink-soft)); }
.pick-price { font-size:0.9375rem; font-weight:600; white-space:nowrap; color:rgb(var(--c-ink)); }
.pick-cb:checked ~ .pick-price { color:rgb(var(--c-accent-text)); }

.pick-total {
  position:sticky; bottom:1rem;
  margin-top:0.5rem; padding:1.15rem 1.25rem;
  border:1px solid rgb(var(--c-line-firm)); border-radius:0.5rem;
  background:rgb(var(--c-paper));
  box-shadow:0 10px 30px rgb(var(--c-shadow) / 0.10);
}
.pick-total[hidden] { display:none; }
.pick-total-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.pick-clear {
  border:0; background:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:0.8125rem; font-weight:600; color:rgb(var(--c-accent-text));
  text-decoration:underline; text-underline-offset:3px;
}
.pick-clear:hover { color:rgb(var(--c-accent)); }

@media (prefers-reduced-motion:reduce) {
  .pick, .pick-box, .pick-box svg { transition:none; }
  .pick:active .pick-box { transform:none; }
}


/* ── The sticky bar ────────────────────────────────────────────
   Sits under the site header, so its top offset is the header's
   height. Carries the jump links and, once anything is ticked, the
   running total — the one number worth following you down a page
   this long. */
.ex-bar {
  position: sticky; top: 61px; z-index: 9;
  border-bottom: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-paper) / 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ex-bar > div { min-height: 52px; }

.ex-bar-nav {
  display: flex; align-items: center; gap: 1.25rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 0;
}
.ex-bar-nav::-webkit-scrollbar { display: none; }
.ex-bar-nav a {
  flex: none;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  color: rgb(var(--c-ink-soft));
  text-decoration: none;
  transition: color 160ms ease;
}
.ex-bar-nav a:hover { color: rgb(var(--c-ink)); }

.ex-bar-sum {
  margin-left: auto; flex: none;
  font-size: 0.8125rem; color: rgb(var(--c-ink-soft)); white-space: nowrap;
}
.ex-bar-sum[hidden] { display: none; }
.ex-bar-sum b { color: rgb(var(--c-ink)); font-weight: 600; }

@media (max-width: 639px) {
  .ex-bar { top: 57px; }
  .ex-bar > div { flex-direction: column; align-items: stretch; gap: 0; }
  .ex-bar-sum { margin: 0 0 0.7rem; }
}

/* On its own page the total has room to sit at the bottom of the
   viewport rather than at the end of the column. */
.pick-total { bottom: 1.25rem; }