/* ════════════════════════════════════════════════════════════════════════════
   product-thick.css — SCOPED stylesheet for the Thick Business Cards page (pid 125).
   FC-REBUILD wave RE-PORT (2026-07-24) — evolves the prior cool-gray build onto the shared FC
   component system. Loaded via $page_css INSTEAD OF henry_product.css; cascade on this page:
   product-thick.css -> henry_common.css -> henry_coolgray.css -> henry_fc.css (curated
   'cool_gray' + 'fc_v2' both true). Base tokens/typography, .section, .btn variants, .lead,
   .dark-band, and every FC component's own CSS (fw-hero, sfc-band, g3-band, best-for-section,
   route-band, keep-exploring, samples--kit, reviews--G, g3-table, page-menu, sticky-cta, FAQ
   standard) are SINGLE-SOURCED in henry_coolgray.css + henry_fc.css — NOT re-authored here (§B3).
   This sheet carries ONLY: (1) "The Thickness System" — a HAND-BUILT-OK one-off cross-catalog
   comparison chart with no shared-component equivalent; (2) two card-scene skin fixes for the
   Keep Exploring section's page-owned decoration (component owns structure, page owns
   decoration — see inc/page/keep-exploring.php).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The Thickness System (#thickness-system) — ported verbatim from the mockup ── */
#thickness-system .tks-eyebrow{color:var(--gold,#C9A96E);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px}
#thickness-system .tks-title{margin:0;color:var(--ink,#14181D);font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.08}
#thickness-system .tks-lead{margin:18px 0 0;max-width:74ch;color:var(--body,#424B55);font-size:15.5px;line-height:1.65}
#thickness-system .tks-lead strong{color:var(--ink,#14181D);font-weight:800}
#thickness-system .tks-photo{width:100%;aspect-ratio:5/2;border-radius:12px;background:var(--cool-100,#F4F6F8) center/cover no-repeat;border:1px solid var(--line,#E7EBEF);pointer-events:none;transition:transform .2s ease,box-shadow .2s ease,border-color .16s ease;will-change:transform}
#thickness-system .tks-pt{font-size:clamp(21px,1.9vw,27px);font-weight:800;color:var(--ink,#14181D);letter-spacing:-.03em;line-height:1}
#thickness-system .tks-pt span{font-size:.58em;font-weight:700;color:var(--muted,#7A8590);margin-left:1px}
#thickness-system .tks-mat{margin-top:7px;font-size:13px;font-weight:600;color:var(--body,#424B55);line-height:1.3}
#thickness-system .tks-ref{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted,#7A8590);line-height:1.35}
#thickness-system .tks-ref b{color:var(--ink,#14181D);font-weight:800}
#thickness-system .tks-cover-link{position:absolute;inset:0;z-index:3;border-radius:inherit;font-size:0;color:transparent}
#thickness-system .tks-cover-link:focus-visible{outline:2px solid var(--blue,#00C2FF);outline-offset:2px}
/* FEATURED — Silk Standard highlighted in-grid (gold top edge) */
#thickness-system .tks-card.is-featured{border-top:3px solid var(--gold,#C9A96E)}
#thickness-system .tks-feyebrow{color:var(--gold,#C9A96E);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin:0 0 9px}
/* 2-up grid (9 cards; the last sits alone in its row) */
#thickness-system .tks-grid{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
#thickness-system .tks-card{position:relative;background:var(--white,#fff);border:1px solid var(--line,#E7EBEF);border-radius:var(--radius-md,18px);padding:16px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
#thickness-system .tks-card:hover{border-color:#CBD4DC;box-shadow:0 14px 34px rgba(20,24,29,.10);z-index:8}
#thickness-system .tks-card .tks-photo{margin-bottom:14px}
#thickness-system .tks-card:hover .tks-photo{border-color:var(--blue,#00C2FF)}
/* HOVER-ZOOM — pop the edge photo larger; grows inward so it never runs off-page (pointer devices only) */
#thickness-system .tks-grid>.tks-card:nth-child(odd) .tks-photo{transform-origin:left center}
#thickness-system .tks-grid>.tks-card:nth-child(even) .tks-photo{transform-origin:right center}
@media (hover:hover) and (pointer:fine){
  #thickness-system .tks-card:hover .tks-photo{transform:scale(1.6);box-shadow:0 26px 60px rgba(20,24,29,.30)}
}
@media(max-width:540px){#thickness-system .tks-grid{grid-template-columns:1fr;margin-top:28px}#thickness-system .tks-card:hover .tks-photo{transform:none;box-shadow:none}}
#thickness-system .tks-caption{margin:22px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted,#7A8590);text-align:center}

/* ── Keep Exploring — page-owned card-scene decoration (component: inc/page/keep-exploring.php) ──
   FIXED (see REPORT): the mockup's "Silk"/"Metal" tabs reused the wrong skin classes (a
   recurring copy-paste bug this wave has caught on cotton/suede/metal/plastic too). .suede-card
   was already correct as delivered; .silk-card + .metal-card are the canonical site-wide
   definitions (product-suede.css / product-plastic.css), reused verbatim here. */
.keep-exploring .suede-card{background:linear-gradient(150deg,#211f1c 0%,#38332b 60%,#1b1916 100%);border:1px solid rgba(255,255,255,.08)}
.keep-exploring .suede-card .mat-mark{color:#e6dccc;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.keep-exploring .silk-card{background:linear-gradient(145deg,#2c2f33,#c7c2b8 55%,#8b867c)}
.keep-exploring .silk-card .mat-mark{color:#f7f4ee;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.keep-exploring .metal-card{background:linear-gradient(135deg,#9aa0a6,#e9edf0 55%,#7e848a)}
.keep-exploring .metal-card .mat-mark{color:#14181D;text-shadow:0 1px 10px rgba(255,255,255,.5)}