/* ============================================================================
 * henry_bc-overview_v2.css — T0-01 Business Cards Overview, page-unique CSS only
 *
 * Source: T0-01_business-cards-overview_v72-LOCKED.html (Henry, locked 2026-07-17).
 *
 * SCOPE — this sheet holds ONLY the one <style> block of that mockup that is not
 * already in the shared sheet. The mockup carries 36 style blocks; 35 of them are
 * either byte-identical to www/css/henry_overview_v2.css (rule-level verified) or
 * are site-chrome that header-v2 owns. Re-pasting the mockup's full <style> here
 * would re-create the per-page drift the shared sheet exists to prevent, and would
 * re-introduce the nav/topbar chrome that §5B gate 15 forbids.
 *   load order: henry_overview_v2.css (shared)  ->  this sheet (page-unique wins)
 *
 * DROPPED from the mockup block, deliberately:
 *   @import Manrope — the mockup imports AND <link>s Manrope but never references
 *   it in a single font-family declaration (verified across the whole 2.8MB file).
 *   It was two blocking external requests for a font nothing uses; header-v2 already
 *   web-loads the site face once for every page, so these stay dropped.
 *   (Historical note worth keeping: the site face was Montserrat when this was written,
 *    and became MANROPE on 2026-08-14 — the very font this mockup was already reaching
 *    for. The import is still correctly dropped; it was redundant, not wrong.)
 * ========================================================================== */


/* ===== 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(5,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-grid{ width:100%; max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1vw,16px); margin:0; }
#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:900px){ #families .family-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ #families .family-grid{ grid-template-columns:1fr; } #families .family-card{ aspect-ratio:4/3; } }

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

/* ============================================================================
 * BUILD ADDITIONS — not in the mockup block. Two reasons, both about the fact
 * that the live page has real photography where the mockup had placeholders.
 * ========================================================================== */

/* Family photo render (.family-photo = real photography → cover; .family-product-image =
 * transparent render → contain) is SINGLE-HOMED in henry_overview_v2.css (owner-directed
 * 2026-07-24), so every overview page renders identically. Do not re-add it here. */

/* The sample-kit CTA slot is a dev ASSET SLOT in the mockup; the live page has an
 * approved flat-lay for it. Photo-fill rules live in henry_overview_v2.css
 * (.cta-photo.has-photo img). */

/* The 3D PROOFER SHOWCASE block that used to live here MOVED to henry_overview_v2.css on
 * 2026-08-19 — the plastic-cards overview now hosts the same section, and this sheet is
 * loaded by the business-cards page only. Its own header had already flagged the move as
 * the correct action once a second page picked the component up. Do not re-add it here. */