/* ============================================================================
   henry_hangtags-overview_v2.css — PAGE sheet for T0-04 Hang Tags Overview
   Source mockup: docs/henry_updates/to-build/tier0-overviews-2026-07-17/
                  T0-04_hang-tags-overview_v01-LOCKED.html  (v01-LOCKED, 2026-07-17)

   WHAT THIS IS: only the rulesets in that mockup that are NOT already in the
   SHARED sheet www/css/henry_overview_v2.css. Derived mechanically (ruleset-level
   diff of the mockup's 37 <style> blocks against the shared sheet), not by
   re-pasting the mockup's <style> wholesale — a full re-paste re-creates the
   per-page drift the shared/page split exists to prevent.

   LOAD ORDER: header-v2 emits henry_common.css → $page_css (henry_overview_v2.css)
   → $_META (this sheet). This sheet therefore wins over the shared one.

   ⚠️ SITE-CHROME EXCLUDED (§5B gate 15): the mockup is a standalone document
   carrying its own topbar, nav and brand CSS. 22 such rulesets were dropped —
   the live page gets its chrome from header-v2.php, and these bare class names
   would repaint the real site nav. Do NOT paste them back from the mockup.

   DROPPED, with reason (not silent):
   - Manrope @import + <link> — the mockup loads that webfont twice and never
     names it in a font-family, so those two requests bought nothing. Dropped as
     dead weight. (The page DOES render in Manrope, but via the shared chrome in
     header-v2.php, which web-loads it once for the whole site — not via these.)
   - The mockup's own <nav>/.topbar/footer markup — header-v2 / footer-v2 own it.

   KEPT-BUT-UNUSED (deliberate, mockup-faithful, zero render effect): the
   .family-card:nth-child(7|8|9) tints, .photo-slot-hint, .is-soon/.soon-badge
   and .family-product-image hooks. They belong to the shared 3x3 families
   grid this page renders with 6 cards; keeping them means a 7th–9th card (or a
   "soon" state) can be added without re-deriving CSS.

   ASSUMES: this page is the only consumer of this sheet. If a second page wants
   any of it, promote that ruleset to henry_overview_v2.css — never fork it here.
   ============================================================================ */

.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-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 }
}
#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 }
#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 }
#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 }
#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 }
#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. */
.family-card.is-soon { opacity:.78 }
.family-card .soon-badge { display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:rgba(201,169,110,.18);color:#9A7B41;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle }