/* ─────────────────────────────────────────────────────────────
   Products pages — build ON TOP of sds-detail.css (chrome: tokens,
   header, breadcrumb, footer, .btn, .wrap/.doc-wrap) and REUSE the
   shared page layer in solutions.css (hero, .mast-kicker, .lede,
   .sol-body/.sol-intro/.sol-sec, .feature-list, .qa-callout, and the
   .sol-cta-band). This file adds only the product-specific pieces:
   the 6-up category hub grid, product-listing cards with SDS links,
   and the advantages grid.
   Product pages therefore link: sds-detail.css + solutions.css + products.css
   ───────────────────────────────────────────────────────────── */

/* ── HUB GRID (products.html) — 3-up category cards ── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.4rem}
.prod-grid .sol-card-top{align-items:flex-start}
.prod-grid .sol-card h3{font-size:1.18rem}
.prod-fam{display:block;margin:.55rem 1.7rem 0;color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* ── PRODUCT LISTING (category detail pages) ── */
.product-list{display:grid;gap:1.3rem;margin:.4rem 0 .6rem}
.product-item{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.product-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.product-item-head h3 a{text-decoration:none}
.product-item-head h3 a:hover{text-decoration:underline}
.product-item-links{display:flex;align-items:baseline;gap:1.2rem}
.product-item h3{font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.product-item > p{color:var(--slate);font-size:1.02rem;line-height:1.65;margin:.5rem 0 .2rem;max-width:74ch}
.apps-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:1.05rem 0 .55rem}
.product-item .feature-list{margin:0}

/* View-SDS link (and the "on request" note when no datasheet exists yet) */
.sds-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sds-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s var(--ease)}
.sds-link:hover{color:var(--navy)}
.sds-link:hover svg{transform:translateX(3px)}
/* Request-SDS button — shown for products whose datasheet isn't available yet */
.sds-request{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:6px 12px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--blue);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.sds-request svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.sds-request:hover{background:#fff;border-color:var(--blue);color:var(--navy)}

/* ── ADVANTAGES GRID ── */
.adv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:.4rem}
.adv-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.3rem 1.4rem}
.adv-card h3{margin:0 0 .4rem;color:var(--navy);font-size:1rem;text-transform:none;letter-spacing:0}
.adv-card p{margin:0;color:var(--slate);font-size:.98rem;line-height:1.55}

/* ── RESPONSIVE ── */
@media (max-width:960px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .adv-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .prod-grid{grid-template-columns:1fr}
  .product-item-head{gap:.35rem}
}

/* Secondary button readable on white sections (was btn-light: white-on-white) */
.btn-outline-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline-dark:hover{background:var(--navy);color:#fff;border-color:var(--navy)}