/* ============================================================================
   henry_plastic-overview_v2.css — T0-02 Plastic Cards Overview page-unique CSS
   Loaded AFTER the shared henry_overview_v2.css (via $_META in
   www/plastic-cards-overview.php). Everything common to the Tier-0 overview
   redesign (28 shared blocks incl. #by-industry, #quick-path, #customer-voice,
   FAQ accordion, page-menu/sticky-cta chrome) lives in the shared sheet —
   this file carries ONLY the 3 blocks unique to this page's own <style>
   (families-3x3-v58, browse-v60, t002-v72-adapt), ported verbatim from
   T0-02_plastic-cards-overview_v04-LOCKED.html.
   ============================================================================ */

/* ===== Section 1 — Hero (headline HARD-LOCKED to 2 lines) ===== */
.fw-hero{ padding:clamp(46px,6.5vw,100px) clamp(16px,4vw,44px) clamp(24px,3vw,42px); text-align:center; background:var(--white); }
.fw-hero-inner{ max-width:1100px; margin:0 auto; }
.fw-hero-title{ font-size:clamp(22px,3.1vw,46px); line-height:1.12; letter-spacing:-.03em; font-weight:800; color:var(--ink); margin:0 auto; max-width:none; }
.fw-hero-sub{ font-size:clamp(15px,1.5vw,20px); line-height:1.55; color:var(--muted); margin:20px auto 0; max-width:62ch; }
/* Hero CTA row + button skins: shared block in henry_overview_v2.css
   (inc/page/overview/hero-cta.php). Mockup's cyan-fill Build My Card
   (Henry 2026-07-12) superseded by owner rule 2026-07-18: no blue at rest. */

/* ===== Shop-By filter bar ===== */
.shop-by-bar{ background:var(--white); padding:clamp(6px,1vw,14px) clamp(16px,2.5vw,48px) clamp(22px,3vw,40px); }
.shop-by-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.filter-box{ position:relative; }
.filter-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--white); border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .2s,box-shadow .2s; }
.filter-toggle:hover{ border-color:#c3ccd4; }
.filter-box.open .filter-toggle{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,194,255,.15); }
.filter-toggle .chev{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.filter-box.open .chev{ transform:rotate(180deg); }
.filter-menu{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 44px rgba(20,24,29,.14); padding:8px; z-index:50; display:none; max-height:320px; overflow:auto; }
.filter-box.open .filter-menu{ display:block; }
.filter-menu a{ display:block; padding:10px 14px; border-radius:7px; font-size:14px; color:var(--body); text-decoration:none; transition:background .15s,color .15s; }
.filter-menu a:hover{ background:var(--soft); color:var(--blue-dark); }
@media (max-width:820px){ .shop-by-inner{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .shop-by-inner{ grid-template-columns:1fr; } }

/* ===== Signature Families — FULL-WIDTH 3x3 grid ===== */
#families{ max-width:none !important; margin:0 !important; padding-inline:clamp(16px,2.5vw,48px) !important; padding-top:clamp(20px,3vw,46px) !important; }
#families .families-intro{ max-width:none; margin:0; padding:0 0 clamp(16px,1.8vw,26px); text-align:left; }
#families .families-intro h2{ font-size:clamp(21px,2.8vw,36px) !important; line-height:1.06 !important; letter-spacing:-.02em; font-weight:800 !important; color:var(--ink); margin:0 !important; text-align:left !important; max-width:none !important; }
#families .family-card{ position:relative; aspect-ratio:1/1; min-height:0; overflow:hidden; display:block; padding:0; border:0; border-radius:12px; background:#12161b; box-shadow:none; isolation:isolate; transition:none; }
#families .family-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
#families .family-card .family-media{ position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; overflow:hidden; background:transparent; display:block; }
/* .family-photo / .family-product-image render is single-homed in henry_overview_v2.css (2026-07-24). */
#families .family-card .family-media::after{ content:""; position:absolute; inset:0; z-index:2; background:rgba(11,15,20,.42); opacity:1; transition:opacity .55s ease; }
#families .family-card:hover .family-media::after{ opacity:0; }
#families .family-card .family-media::before{ content:""; position:absolute; left:0; right:0; top:0; height:52%; z-index:3; background:linear-gradient(to bottom,rgba(8,11,15,.82) 0%,rgba(8,11,15,.34) 55%,rgba(8,11,15,0) 100%); pointer-events:none; }
#families .family-card .family-body{ position:absolute; top:40px; left:0; right:0; z-index:4; max-width:none; margin:0; padding:0 clamp(16px,2vw,26px); text-align:center; background:transparent; pointer-events:none; }
#families .family-card h3{ margin:0 0 8px; font-size:clamp(18px,1.5vw,24px); line-height:1.14; letter-spacing:-.02em; font-weight:750; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.5); }
#families .family-card .fam-emo{ max-width:34ch; margin:0 auto; font-size:clamp(12.5px,.95vw,14.5px); line-height:1.42; color:rgba(255,255,255,.85); text-shadow:0 1px 14px rgba(0,0,0,.45); }
#families .family-card .fam-spec{ display:none; }
/* explore more — bottom center at rest; fades out on hover so the Customize badge takes over */
/* explore more removed (Henry 2026-07-12) */
#families .family-card .family-media .photo-slot-hint{ position:absolute !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; transform:translate(-50%,-50%) !important; z-index:4 !important; display:inline-block !important; color:rgba(255,255,255,.55) !important; background:rgba(255,255,255,.05) !important; border:1px dashed rgba(255,255,255,.3) !important; border-radius:100px !important; padding:7px 14px !important; font-size:10.5px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important; backdrop-filter:none !important; white-space:nowrap !important; }

/* ===== Customize-this-Style badge (lower-left; circle → expands to capsule on hover) ===== */
#families .family-card .customize-badge{ position:absolute; left:16px; bottom:16px; z-index:6; display:inline-flex; align-items:center; height:55px; width:55px; padding:0; background:#fff; color:var(--ink); border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.30); overflow:hidden; white-space:nowrap; text-decoration:none; pointer-events:auto; transition:width .4s cubic-bezier(.2,.8,.2,1), color .25s ease, box-shadow .25s ease; }
#families .family-card .customize-badge .cb-icon{ flex:0 0 55px; width:55px; height:55px; display:grid; place-items:center; }
#families .family-card .customize-badge .cb-icon svg{ width:37.5px; height:37.5px; }
#families .family-card .customize-badge .cb-text{ font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--blue); opacity:0; padding-right:22px; transition:opacity .22s ease .06s; }
/* expand ONLY when hovering the circle itself (not the whole box) */
#families .family-card .customize-badge:hover{ width:252px; color:var(--blue); box-shadow:0 10px 26px rgba(0,0,0,.32); }
#families .family-card .customize-badge:hover .cb-text{ opacity:1; }
/* whole tile clicks through to the product page */
#families .family-card .card-cover-link{ position:absolute; inset:0; z-index:5; display:block; font-size:0; color:transparent; }

#families .family-card:nth-child(1) .family-media{ background:linear-gradient(150deg,#2b313a,#12161b 70%); }
#families .family-card:nth-child(2) .family-media{ background:linear-gradient(150deg,#332c25,#17130f 72%); }
#families .family-card:nth-child(3) .family-media{ background:linear-gradient(150deg,#2c2e31,#141517 72%); }
#families .family-card:nth-child(4) .family-media{ background:linear-gradient(150deg,#12202a,#0c1116 72%); }
#families .family-card:nth-child(5) .family-media{ background:linear-gradient(150deg,#20222a,#101115 72%); }
#families .family-card:nth-child(6) .family-media{ background:linear-gradient(150deg,#232a31,#12161b 72%); }
#families .family-card:nth-child(7) .family-media{ background:linear-gradient(150deg,#2a2330,#141018 72%); }
#families .family-card:nth-child(8) .family-media{ background:linear-gradient(150deg,#2a2926,#151412 72%); }
#families .family-card:nth-child(9) .family-media{ background:linear-gradient(150deg,#2b3036,#14171b 72%); }
@media (max-width:560px){ #families .family-card{ aspect-ratio:4/3; } }

/* Hero CTA sticky bottom bar: shared block in henry_overview_v2.css. */

/* Shop-By Bar label — left-justified to the Card Stock dropdown */
.shop-by-bar .shop-by-label{ text-align:left; margin:0 0 12px; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }

/* Shop-By Bar — sticky just below the main nav on scroll (--sbTop = nav height, set by JS) */
.shop-by-bar{ position:sticky !important; top:var(--sbTop,80px); z-index:19; background:var(--white) !important; transition:box-shadow .25s ease; }
.shop-by-bar.is-stuck{ box-shadow:0 8px 20px rgba(20,24,29,.09); border-bottom:1px solid var(--line); }
/* below tablet the bar stacks (2→1 col) and would eat the viewport if pinned — keep it static there */
@media (max-width:820px){ .shop-by-bar{ position:static !important; } .shop-by-bar.is-stuck{ box-shadow:none; border-bottom:none; } }
/* room to show the full 9-item Industry list (and 10-item Card Stock) without scrolling */
.shop-by-bar .filter-menu{ max-height:440px !important; }

/* ============================================================
   Browse Everything (#browse) — v60
   Full-width white · title-left / segmented-tabs-right · image tiles
   Label TOP-LEFT · Customize badge BOTTOM-LEFT (from #families)
   ============================================================ */
.browse-band{ background:var(--white) !important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:0 !important; }
#browse{ max-width:none !important; margin:0 !important; padding:clamp(58px,6vw,98px) clamp(16px,2.5vw,48px) !important; }

/* header row */
#browse .browse-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; margin:0 0 clamp(26px,3vw,44px); flex-wrap:wrap; }
#browse .sec-head{ text-align:left !important; max-width:none !important; margin:0 !important; }
#browse .step-eyebrow{ margin-bottom:14px !important; gap:0 !important; }
#browse .step-label{ color:var(--gold-ink) !important; }
#browse .sec-head h2{ text-align:left !important; max-width:none !important; margin:0 !important; font-size:clamp(21px,2.8vw,36px) !important; line-height:1.06 !important; letter-spacing:-.02em !important; font-weight:800 !important; color:var(--ink) !important; }
#browse .sec-head p{ text-align:left !important; margin-top:14px !important; max-width:54ch !important; font-size:clamp(15px,1.2vw,17px) !important; color:var(--body) !important; line-height:1.5 !important; }

/* segmented tabs */
#browse .browse-tabs-wrap{ text-align:right; flex:0 0 auto; padding-bottom:4px; }
#browse .browse-tabs{ display:inline-flex; gap:4px; padding:5px; background:var(--soft) !important; border:1px solid var(--line) !important; border-radius:12px !important; margin:0 !important; }
#browse .tab-btn{ appearance:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px !important; font-weight:800 !important; letter-spacing:.11em !important; text-transform:uppercase; color:var(--muted) !important; background:transparent !important; padding:10px 20px !important; border-radius:9px !important; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
#browse .tab-btn:hover{ color:var(--ink) !important; }
#browse .tab-btn[aria-selected="true"]{ background:var(--white) !important; color:var(--ink) !important; box-shadow:0 1px 3px rgba(20,24,29,.12), inset 0 0 0 1.5px rgba(0,194,255,.92) !important; }

/* tile grid */
#browse .tab-panel[hidden]{ display:none; }
#browse .chip-grid{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:clamp(10px,1vw,16px) !important; }
#browse .chip{ position:relative; display:block !important; aspect-ratio:4/3; width:auto !important; min-height:0 !important; overflow:hidden; border:0 !important; border-radius:14px !important; padding:0 !important; background:#12161b !important; text-decoration:none; color:#fff; box-shadow:none !important; isolation:isolate; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
#browse .chip:hover{ transform:translateY(-3px) !important; box-shadow:0 14px 30px rgba(20,24,29,.16), 0 0 0 2px var(--blue) !important; }

/* media — LOCKED reference photo, cover-fit (dark fallback behind) */
#browse .chip .chip-media{ position:absolute; inset:0; z-index:0; display:block; background-color:#12161b; background-size:cover; background-position:center; transition:filter .45s ease, transform .5s ease; }
#browse .chip .chip-media .chip-product-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; padding:clamp(12px,10%,30px); box-sizing:border-box; display:block; }
/* rest = deep veil (matches #families ~.42) → CLEARS on hover so the photo visibly lights up */
#browse .chip .chip-media::after{ content:""; position:absolute; inset:0; background:rgba(8,11,15,.42); opacity:1; transition:opacity .45s ease; }
#browse .chip:hover .chip-media::after{ opacity:0; }
#browse .chip:hover .chip-media{ filter:brightness(1.12) saturate(1.05); } /* extra absolute lift on hover */

/* TOP scrim (label lives up top) — eases back on hover so the top brightens too, kept enough for legibility */
#browse .chip::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .45s ease; background:linear-gradient(to bottom, rgba(8,11,15,.90) 0%, rgba(8,11,15,.55) 24%, rgba(8,11,15,.12) 52%, rgba(8,11,15,0) 76%); }
#browse .chip:hover::before{ opacity:.72; }

/* label — TOP-LEFT */
#browse .chip .chip-body{ position:absolute; left:0; right:0; top:0; z-index:2; padding:13px 40px 14px 15px; display:block !important; pointer-events:none; }
#browse .chip .chip-name{ display:block !important; font-size:clamp(15px,1.15vw,18px) !important; font-weight:800 !important; letter-spacing:-.01em !important; color:#fff !important; text-shadow:0 1px 12px rgba(0,0,0,.55); }
#browse .chip .chip-line{ display:block !important; margin-top:3px !important; font-size:clamp(11.5px,.82vw,13px) !important; line-height:1.34 !important; color:rgba(255,255,255,.86) !important; text-shadow:0 1px 10px rgba(0,0,0,.45); }

/* tile-link arrow — TOP-RIGHT (points to the product page) */
#browse .chip .chip-arrow{ position:absolute; right:13px; top:12px; z-index:2; color:#fff !important; font-size:18px !important; font-weight:900 !important; line-height:1; flex:none !important; pointer-events:none; transition:transform .25s ease, color .25s ease; }
#browse .chip:hover .chip-arrow{ color:var(--blue) !important; transform:translateX(4px); }

/* full-cover product-page link (below badge) */
#browse .chip .chip-cover-link{ position:absolute; inset:0; z-index:5; display:block; font-size:0; color:transparent; text-decoration:none; }

/* Customize badge — BOTTOM-LEFT (ported from #families, scaled for the smaller tile) */
#browse .chip .customize-badge{ position:absolute; left:12px; bottom:12px; z-index:6; display:inline-flex; align-items:center; height:44px; width:44px; padding:0; background:#fff; color:var(--ink); border-radius:999px; box-shadow:0 5px 16px rgba(0,0,0,.28); overflow:hidden; white-space:nowrap; text-decoration:none; pointer-events:auto; transition:width .4s cubic-bezier(.2,.8,.2,1), color .25s ease, box-shadow .25s ease; }
#browse .chip .customize-badge .cb-icon{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; }
#browse .chip .customize-badge .cb-icon svg{ width:29px; height:29px; }
#browse .chip .customize-badge .cb-text{ font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--blue); opacity:0; padding-right:18px; transition:opacity .22s ease .06s; }
#browse .chip .customize-badge:hover{ width:214px; color:var(--blue); box-shadow:0 8px 22px rgba(0,0,0,.30); }
#browse .chip .customize-badge:hover .cb-text{ opacity:1; }

/* responsive */
@media (max-width:1100px){ #browse .chip-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:820px){ #browse .browse-head{ align-items:flex-start; } #browse .browse-tabs-wrap{ text-align:left; } #browse .chip-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width:560px){ #browse .chip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #browse .chip{ aspect-ratio:5/4; } }

/* T0-02: the locked mockup's own <style> never styled #quick-path-title's .ln spans
   (only #samples .cta-box h2 .ln got display:block) — the markup clearly intends two
   lines (same .ln convention as #samples, which IS styled), so this fills the gap
   rather than shipping "start?Pick the job." with no space/line-break, live-caught
   at tablet width. */
#quick-path .sec-head h2 .ln{ display:block; }

/* T0-02: 7-item By-Use selector — last item spans full width (mirrors v72's 9th-item rule) */
.best-for-section .audience-item:nth-child(7){grid-column:1 / -1}
@media(max-width:1100px){.best-for-section .audience-item:nth-child(7){grid-column:auto}}