/* pp-hub.css — shared styles for the 2026-07 sitewide redesign (every page
   outside index/shop/products, which already carry these systems).
   Load order: this file sits immediately ABOVE /pp-theme.css in <head> —
   pp-theme.css documents a contract requiring it to load last.

   Contents: (1) the approved product-card pass from shop.html, so hub grids
   match the shop; (2) the PPDigits no-dotted-zero digit override from the
   product pages; (3) the shared hub vocabulary (.hub-facts chips, .hub-cta,
   .hub-about, .hub-faq, .hub-ruo). Page-local tuning stays in page <style>. */

/* ── 1. approved cards (shop.html pass, 2026-07-24) ─────────────────────── */
.grid{grid-template-columns:repeat(4,1fr);background:none;border:0;border-radius:0;padding:0;gap:22px}
.card{background:var(--surface);border-radius:12px}
.card .pv{height:auto;aspect-ratio:1;background:#0B1A24;padding:0;align-items:center}
.card .vimg{height:100%;width:100%;object-fit:cover;margin:0;-webkit-mask-image:none;mask-image:none;transition:transform .45s var(--ease)}
.card:hover .vimg{transform:scale(1.04)}
.card .top{border-bottom:none;padding:14px 0 0}
.card .cat{font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:6px}
.card .nm{text-transform:uppercase;margin:4px 0 0}
.card .pr{font-weight:500;font-variant-numeric:tabular-nums;margin:8px 0 14px}
.card .add{border:1px solid rgba(255,255,255,.14);border-radius:8px}
.card .heart{border-radius:8px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}

/* ── 2. digits: Barlow numerals inside mono contexts, tabular everywhere ── */
@font-face{font-family:'PPDigits';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-regular.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-500.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-600.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-700.woff2) format('woff2');
  unicode-range:U+0030-0039}
:root{--mono:"PPDigits","JetBrains Mono",ui-monospace,SFMono-Regular,monospace}
.formula,.cmp td,.price,[class*="mono"]{font-variant-numeric:tabular-nums}
/* Promo ticker (injected by pp-header.js into every page's header). pp-theme.css
   loads AFTER this file and sets .marquee-inner to raw JetBrains Mono, whose zero
   is dotted — doctrine 2.12 bans that anywhere on the site. !important is the only
   way to win from here without editing the frozen pp-theme.css. */
.marquee-inner,.marquee-inner b{font-family:var(--mono)!important;font-variant-numeric:tabular-nums}

/* ── 3. hub vocabulary ──────────────────────────────────────────────────── */
/* facts strip: max four fragments, 2-4 words each. Fill + shadow, no border. */
.hub-facts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.hub-facts .hf{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border-radius:999px;padding:9px 15px;box-shadow:var(--sh-1,0 1px 3px rgba(11,26,36,.10));
  font-family:"Sora",sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.hub-facts .hf svg{width:16px;height:16px;flex:none}
.hub-facts .hf .tick{display:inline-grid;place-items:center;width:17px;height:17px;flex:none;
  border-radius:50%;background:#1e9e57}
.hub-facts .hf .tick svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* one filled CTA under the grid — colour comes from the one blue rule sitewide */
.hub-cta{display:flex;justify-content:center;margin:30px 0 8px}
.hub-cta a{display:inline-flex;align-items:center;gap:9px;background:var(--pp-fade,linear-gradient(120deg,#0E9F8A,#2F6BE0));
  color:#fff;font-family:"Sora",sans-serif;font-weight:600;font-size:15px;border-radius:11px;
  padding:14px 26px;box-shadow:0 8px 22px rgba(47,107,224,.28);transition:transform .2s,box-shadow .2s}
.hub-cta a:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(47,107,224,.36)}

/* prose that moved below the grid: reading measure, quiet type */
.hub-about{max-width:72ch;margin:44px auto 0}
.hub-about h2{font-size:clamp(20px,2vw,25px);margin:0 0 12px}
.hub-about p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 14px}

/* FAQ accordions — same pattern as the product pages' phone sections */
.hub-faq{max-width:72ch;margin:38px auto 0}
.hub-faq h2{font-size:clamp(20px,2vw,25px);margin:0 0 10px}
.hub-faq details{border-top:1px solid var(--line)}
.hub-faq details:last-of-type{border-bottom:1px solid var(--line)}
/* block, not flex: the locale switcher injects <span class="notranslate"> around
   brand names inside these questions, and flex would space them apart. The
   chevron is positioned instead of being a flex sibling. */
.hub-faq summary{list-style:none;cursor:pointer;display:block;position:relative;
  padding:15px 30px 15px 2px;font-family:"Sora",sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.hub-faq summary::-webkit-details-marker{display:none}
.hub-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mint-deep);border-bottom:2px solid var(--mint-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.hub-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.hub-faq details p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 15px;padding:0 2px}

/* the single, quiet research-use line at the page foot */
.hub-ruo{max-width:72ch;margin:34px auto 0;font-size:12.5px;color:var(--faint,#8aa0ab);text-align:center}

/* comparison tables never overflow the page — they scroll in their own frame */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── 4. category-hub additions (12 research/ + best/ hubs, 2026-07-26) ──── */
.hub-h2{font-family:"Sora",sans-serif;font-size:clamp(20px,2.4vw,26px);color:var(--ink);margin:0 0 12px}
.hub-about p a,.hub-faq p a{color:var(--mint-deep);font-weight:600}
.hub-about p a:hover,.hub-faq p a:hover{text-decoration:underline}
.hub-about p b,.hub-about p strong{color:var(--ink);font-weight:600}

/* tall panels collapse on a phone and stay open on every larger screen; the
   markup always ships [open] and a one-liner on the page closes it <=760px */
.hub-fold>summary{list-style:none;cursor:pointer;display:block;position:relative;
  padding:14px 30px 14px 2px;font-family:"Sora",sans-serif;
  font-weight:600;font-size:15.5px;color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hub-fold>summary::-webkit-details-marker{display:none}
.hub-fold>summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mint-deep);border-bottom:2px solid var(--mint-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.hub-fold[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.hub-fold[open]>summary{border-bottom-color:transparent}
@media(min-width:761px){.hub-fold>summary{display:none}}

/* a row of verb-only link chips — fill + shadow, never an outline */
.hub-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0}
.hub-links a{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border-radius:999px;padding:11px 18px;box-shadow:var(--sh-1,0 1px 3px rgba(11,26,36,.10));
  font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);
  transition:transform .18s,box-shadow .18s}
.hub-links a:hover{transform:translateY(-1px);box-shadow:var(--sh-2,0 8px 22px rgba(11,26,36,.14))}

/* comparison table (moved out of the six best/ pages) */
.cmp-wrap{max-width:72ch;margin:22px auto 0;border:1px solid var(--line);border-radius:14px}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmp thead th{text-align:left;font-family:"Sora",sans-serif;font-weight:600;font-size:12.5px;
  color:var(--ink);background:var(--surface);padding:13px 16px;
  border-bottom:1px solid var(--line-strong);white-space:nowrap}
.cmp td{padding:13px 16px;border-top:1px solid var(--line);color:var(--muted);
  vertical-align:top;line-height:1.55}
.cmp td.nm a{color:var(--ink);font-weight:600;font-family:"Sora",sans-serif}
.cmp td.nm a:hover{color:var(--mint-deep)}
.cmp td.vial{white-space:nowrap;font-weight:600;color:var(--ink);
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* the hub content column. Narrower than the full page so a card is card-sized
   (the shop's product column is ~1100px wide behind its sidebar) and so the
   first Add lands inside the fold — the fold is a budget, doctrine §2.1. */
.hub-wrap{max-width:1120px}
.hub-wrap .crumb{padding:2px 0 6px}
.hub-wrap h1.shop-title{font-size:clamp(27px,3vw,40px);line-height:1.08;margin:0 0 12px}
.hub-wrap .hub-facts{margin:6px 0 10px}
/* one axis: the reading column, the table and the foot line start where the
   breadcrumb, the h1 and the grid start */
.hub-wrap .hub-about,.hub-wrap .hub-faq,.hub-wrap .cmp-wrap{margin-left:0;margin-right:auto}
.hub-wrap .hub-ruo{margin-left:0;margin-right:auto;text-align:left}
.hub-wrap .hub-cta,.hub-wrap .hub-links{justify-content:flex-start}

/* phone: the facts strip is a compact 2×2 so the grid stays inside the fold */
@media(max-width:760px){
  .hub-facts{gap:8px;margin:12px 0 16px}
  .hub-facts .hf{font-size:12px;padding:7px 12px;gap:6px}
  .hub-facts .hf .tick{width:15px;height:15px}
  .hub-about,.hub-faq,.hub-ruo,.cmp-wrap{max-width:none}
  .hub-cta{margin:22px 0 4px}
  .hub-links{justify-content:flex-start}
  .hub-wrap h1.shop-title{font-size:26px;margin:0 0 10px}
}
/* two-up on a phone, exactly as shop.html lays its catalogue out — one card per
   row pushes the first Add ~180px past the fold. The body/button tuning below is
   shop.html's own narrow-phone block, so a hub card and a shop card are the same
   object at every width (without it "Add to cart" breaks over three lines). */
@media(max-width:460px){
  .hub-wrap .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .hub-wrap .card-b{padding:0 12px 14px}
  .hub-wrap .card .nm{overflow-wrap:break-word;hyphens:auto}
  .hub-wrap .card .acts{gap:6px}
  .hub-wrap .card .add{padding:10px 6px;font-size:12px;gap:5px}
  .hub-wrap .card .add svg{width:13px;height:13px}
  .hub-wrap .card .heart{width:38px;height:38px}
}
/* the dual-format cards' spray tile rides the photo corner on small screens */
@media(max-width:860px){
  .hub-wrap .card .sprayside{top:-74px;right:8px;width:46px;z-index:3}
  .hub-wrap .card .sprayside .sp-th{width:46px;height:58px;border-radius:9px}
  .hub-wrap .card .sprayside .sp-th img{height:52px}
  .hub-wrap .card .sprayside .sp-pr{font-size:10px}
  .hub-wrap .card .sprayside~.cat,.hub-wrap .card .sprayside~.nm,
  .hub-wrap .card .sprayside~.fmt,.hub-wrap .card .sprayside~.pr{margin-right:0}
}
