/* shop.css — shared styles for subpages that sell or recommend something.
   Depends on the tokens defined in style.css (:root). */

/* ---------- subpage header (mirrors why-pvalue) ---------- */
.subhead{background:var(--night);color:var(--on-night);position:relative}
.subhead .wrap{padding:104px 24px 56px}
.subhead h1{color:#fff;font-size:clamp(30px,5vw,48px);max-width:22ch;margin-bottom:16px}
.subhead .lede{color:#b9c1c8;font-size:clamp(16px,2vw,19px);max-width:58ch}
.crumbs{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#7c858d;margin-bottom:22px}
.crumbs a{color:#a3abb2;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:#fff;border-bottom-color:#f0604a}
.navlinks a[aria-current="page"]{color:#fff;border-bottom-color:#f0604a}

/* ---------- status / disclosure note band ---------- */
.shopnote{border-top:1px solid var(--rule);background:var(--paper-2)}
.shopnote .wrap{padding:34px 24px}
.statuslabel{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.shopnote p{color:var(--ink-2);max-width:76ch}
.shopnote p + p{margin-top:10px}
.shopnote strong{color:var(--ink);font-weight:600}
.fineprint{font-size:14px;color:var(--ink-3)}

/* ---------- product cards ---------- */
.catalog{border-top:1px solid var(--rule)}
.catalog .wrap{padding:66px 24px}
.catalog h2{font-size:14px;margin-bottom:32px}
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.card{
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;
}
.cardhead{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.card h3{font-size:21px}
.badge{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;
  color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--rule);border-radius:4px;padding:3px 8px;white-space:nowrap;
}
.cardlede{color:var(--ink-2);font-size:16px}
.spec{margin:0;display:grid;gap:8px;border-top:1px solid var(--rule);padding-top:14px}
.spec > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:baseline}
.spec dt{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;text-transform:uppercase;color:var(--ink-3);
}
.spec dd{margin:0;font-size:15px;color:var(--ink)}
@media (max-width:420px){
  .spec > div{grid-template-columns:1fr;gap:2px}
}
.why{
  font-size:15px;color:var(--ink-2);
  border-left:2px solid var(--accent);padding-left:14px;
}
.whylbl{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;text-transform:uppercase;color:var(--accent);margin-bottom:4px;
}
.cardcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.btn-sm{padding:9px 15px;font-size:14px}
.btn-line{border-color:var(--rule);color:var(--ink)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.catnote{margin-top:26px;font-size:14px;color:var(--ink-3);max-width:76ch}
.catnote a{color:var(--accent)}

/* ---------- B2B band ---------- */
.b2b{border-top:1px solid var(--rule);background:var(--paper-2)}
.b2b .wrap{padding:66px 24px}
.ticklist{margin:14px 0 24px;padding:0;list-style:none;display:grid;gap:9px}
.ticklist li{
  position:relative;padding-left:22px;color:var(--ink-2);font-size:16px;
}
.ticklist li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
}

/* ---------- cross links ---------- */
.crosslink{border-top:1px solid var(--rule)}
.crosslink .wrap{
  padding:56px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
}
.xlcard{border:1px solid var(--rule);border-radius:10px;padding:24px}
.xlkicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}
.xlcard h3{font-size:19px;margin-bottom:8px}
.xlcard p{color:var(--ink-2);font-size:15px;margin-bottom:14px}

/* ---------- affiliate disclosure ---------- */
.disclose{
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 8px 8px 0;
  padding:20px 22px;
}
.disclose .lbl{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.disclose p{color:var(--ink-2);font-size:15px;max-width:78ch}
.disclose p + p{margin-top:9px}
.disclose .ko{font-size:14px;color:var(--ink-3)}

/* ---------- generic prose for these pages ---------- */
.copy{border-top:1px solid var(--rule)}
.copy .wrap{padding:62px 24px}
.copy h2{font-size:clamp(20px,2.5vw,26px);margin-bottom:14px}
.copy p{color:var(--ink-2);max-width:70ch}
.copy p + p{margin-top:13px}
.copy section + section{margin-top:44px;padding-top:40px;border-top:1px solid var(--rule)}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .subhead .wrap{padding:88px 18px 44px}
  .shopnote .wrap{padding:26px 18px}
  .catalog .wrap,.b2b .wrap,.crosslink .wrap,.copy .wrap{padding:44px 18px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:22px 20px}
  .card h3{font-size:19px}
  .cardlede,.ticklist li{font-size:15px}
  .cardcta .btn{flex:1 1 auto;justify-content:center}
  .copy section + section{margin-top:34px;padding-top:30px}
}