/* =========================================================
   Product page extras — sticky sub‑nav, tabs, feature grid
   v1.2 • 2025‑08‑18
   ========================================================= */

/* ---------- Feature grid (2‑up, symmetrical) ---------- */
.features { padding-top: 1rem; }
.features-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:1.5rem;
}
.feature-card{
  background: var(--c-charcoal-2);
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.feature-card h3{ margin-bottom:.6rem; font-weight:600; }
.feature-card .checklist li{ margin-bottom:.35rem; }

@media (max-width: 800px){
  .features-grid{ grid-template-columns: 1fr; }
}

/* ---------- Variant tabs (dual template) ---------- */
.variant-tabs{ display:flex; gap:.75rem; flex-wrap:wrap; margin: .5rem 0 1rem; }
.variant-tabs .tab{
  appearance:none; cursor:pointer; user-select:none;
  border:1px solid var(--c-charcoal-2);
  background: var(--c-charcoal-2);
  color: var(--c-grey-light);
  padding:.6rem 1rem; border-radius: 999px;
  font-weight:600; letter-spacing:.02em;
}
.variant-tabs .tab:focus{ outline:2px solid var(--c-grey-light); outline-offset:2px; }
.variant-tabs .tab.active{
  background: var(--c-red);
  border-color: var(--c-red);
  color:#fff;
}
.variant-panel{ margin-top:1rem; }
.variant-panel[hidden]{ display:none; }
.variant-panel .spec-table{ margin-top:.75rem; }

/* ---------- Sticky local sub‑nav ---------- */
:root{ --sticky-top: 74px; --subnav-h: 48px; --section-offset: calc(var(--sticky-top) + var(--subnav-h) + 12px); }

.local-subnav{ position:sticky; top:var(--sticky-top); z-index:9; background:var(--c-charcoal-2); border-bottom:1px solid rgba(255,255,255,.06); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.local-subnav .container{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:var(--subnav-h); }
.local-subnav .links{ display:flex; align-items:center; gap:.5rem; overflow:auto; padding:.4rem 0; }
.local-subnav a{ display:inline-block; padding:.55rem .9rem; border-radius:999px; text-decoration:none; color:var(--c-grey-light); white-space:nowrap; border:1px solid transparent; }
.local-subnav a:hover{ background:rgba(255,255,255,.06); }
.local-subnav a.current{ background: var(--c-red); color:#fff; border-color: var(--c-red); }

/* Ensure in‑page anchor sections don’t hide under sticky bars */
section[data-section]{ scroll-margin-top: var(--section-offset); }

/* Optional: compact the sub‑nav on narrow screens */
@media (max-width: 700px){
  :root{ --sticky-top: 68px; --subnav-h: 44px; }
}

.spec-grid{ display:grid; grid-template-columns: repeat(2, minmax(280px,1fr)); gap:1.5rem; }
@media (max-width: 800px){ .spec-grid{ grid-template-columns:1fr; } }