/* =========================================================
   Category pages, product-page SEO block, "browse by category" hubs.
   Uses the same design tokens as style.css (light theme).
   ========================================================= */
.seo-wrap{ max-width:var(--container,1220px); margin:0 auto; padding:0; position:relative; z-index:1; }
.seo-cat .seo-wrap{ padding:0; }
.seo-block{ padding:10px 28px 70px; }
.seo-block .seo-wrap{ max-width:900px; }

.seo-lead{ font-size:1.05rem; line-height:1.75; color:var(--milk-dim); max-width:900px; margin:0 0 1.2rem; }
.seo-lead strong{ color:var(--milk); }

.seo-trust{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; margin:0 0 1.4rem; }
.seo-trust li{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--milk);
  background:#fff; border:1px solid var(--steel-line); border-radius:100px; padding:.38rem .85rem;
}
.seo-trust li::before{ content:'✓ '; color:var(--teal); font-weight:700; }

.seo-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.8rem; }
.seo-pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.55rem 1.05rem; border-radius:100px;
  background:#fff; border:1px solid var(--steel-line); color:var(--milk); font-weight:600; font-size:.9rem;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.seo-pill small{ color:var(--milk-faint); font-weight:500; }
.seo-pill:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.seo-pill:hover small{ color:rgba(255,255,255,.8); }

.seo-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2.6rem 0 0; }

.seo-text{ max-width:900px; margin:3rem 0 0; }
.seo-text p{ line-height:1.75; margin:0 0 1rem; }
.seo-h{ font-size:1.25rem; margin:2.2rem 0 .9rem; color:var(--milk); }
.seo-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.seo-chip{
  font-size:.78rem; color:var(--milk-dim); background:rgba(12,127,134,.08);
  border:1px solid rgba(12,127,134,.18); border-radius:100px; padding:.3rem .75rem;
}

.seo-faq details{ background:#fff; border:1px solid var(--steel-line); border-radius:12px; margin:0 0 .7rem; padding:.2rem 1.1rem; }
.seo-faq summary{ cursor:pointer; font-weight:600; padding:.8rem 0; color:var(--milk); list-style-position:outside; }
.seo-faq details p{ padding:0 0 1rem; line-height:1.7; }

.seo-guides{ display:grid; gap:.5rem; }
.seo-guides li::before{ content:'→ '; color:var(--brass); }
.seo-guides a{ color:var(--teal); font-weight:600; }
.seo-guides a:hover{ text-decoration:underline; }

/* ---- "Browse by category" hub (products.html + homepage) ---- */
.seo-hub-section{ padding:20px 28px 80px; background:var(--steel-950); }
.seo-hub-title{ text-align:center; margin:0 0 1.6rem; font-size:clamp(1.4rem,2.6vw,1.9rem); }
.seo-hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; }
.seo-hub-col{ background:#fff; border:1px solid var(--steel-line); border-radius:16px; padding:1.4rem 1.4rem 1.2rem; }
.seo-hub-col h3{ font-size:1.1rem; margin:0 0 .55rem; }
.seo-hub-col h3 a{ color:var(--milk); }
.seo-hub-col h3 a:hover{ color:var(--teal); }
.seo-hub-col p{ font-size:.88rem; line-height:1.6; margin:0 0 .8rem; }
.seo-hub-col ul{ display:grid; gap:.35rem; }
.seo-hub-col li a{ font-size:.9rem; color:var(--teal); font-weight:600; }
.seo-hub-col li a:hover{ text-decoration:underline; }
.seo-hub-col li::before{ content:'› '; color:var(--brass); }

@media (max-width:560px){
  .seo-block{ padding:6px 18px 50px; }
  .seo-hub-section{ padding:10px 18px 56px; }
}