/* ============================================================================
   henry_stickers-overview_v2.css — PAGE-SPECIFIC sheet for T0-06 Stickers
   Overview (locked mockup: T0-06_stickers-overview_v01-LOCKED.html)

   Loaded AFTER www/css/henry_overview_v2.css (the shared Tier-0 overview
   sheet) via $_META in www/stickers.php.

   WHAT THIS IS: the 2 <style> blocks (of 37 in the mockup) that are NOT
   byte-identical / not selector-covered across the five Tier-0 overview
   mockups — confirmed by diffing every block's selectors against the built
   shared sheet before writing this file. The other 35 blocks (base reset,
   hero-glass CTA, shop-by filter chrome minus this page's own additions
   below, the by-industry interactive switcher, the browse-tabs chip grid,
   etc.) are already in henry_overview_v2.css — do not re-paste them here.

   OMITTED FROM THE MOCKUP: the `@import` of Google Fonts "Manrope" that
   shipped inside families-3x3-v58. Grepped the entire mockup file — Manrope
   is referenced only in that @import and in the mockup's own <head> <link>
   (site-chrome, not ours); no `font-family: Manrope` rule exists anywhere in
   scope, so the import fetches a font nothing on this page uses. Dropped to
   avoid an unnecessary external request (LCP/perf gate in the page's own
   dev-handoff checklist). Flagged in the worker REPORT for central/owner
   awareness in case a sibling page's block actually needs it.
   ============================================================================ */

/* 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. */

/* ===== 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; }

/* ===== 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); }
/* A menu item that is not orderable yet: the link's own box, not clickable. No opacity on the item: the badge
   inside it is 10.5px text, and dimming the whole item took it to about 2.5:1 on its tint (computed 2026-09-30).
   In a menu the badge text is darkened to #7A5F2E — about 5.3:1 on the same tint. */
.filter-menu [role="menuitem"][aria-disabled="true"]{ display:block; padding:10px 14px; border-radius:7px; font-size:14px; color:var(--muted); cursor:default; }
.filter-menu .soon-badge{ color:#7A5F2E; }
@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; }
/* Full-bleed photos (owner-directed 2026-07-20): was object-fit:contain with
   clamp() padding — the mockup's inset "photo on a tinted card" treatment.
   Owner wants the photo to FILL the card; sources re-cut from Alicia's
   originals (5760px-class) as the -v2- webps so cover doesn't go soft. */
/* .family-photo / .family-product-image render is single-homed in henry_overview_v2.css (2026-07-24; incl. the hover filter/transform transition). */
/* Stronger hover light-up (owner-directed 2026-07-20): the dark overlay lifting
   alone read too subtle — the photo now also brightens and gently zooms. */
#families .family-card:hover .family-media img,
#families .family-card:hover .family-media .family-product-image{ filter:brightness(1.14) saturate(1.06); transform:scale(1.04); }
#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; }

/* Mine, additive: the mockup's .photo-slot-hint is a `white-space:nowrap` pill
   sized for a 2-word dev label ("Photo slot"). Per the project's no-jargon /
   plain-English-await-note standard, the two Coming Soon tiles need a full
   sentence ("Waiting on a photo of a real sticker sheet — ..."), which would
   overflow a nowrap pill. `.is-soon` is the only context this class still
   appears in on this page (the four real families all carry photos), so this
   override is scoped to it and never collides with a real-photo card. */
#families .family-card.is-soon .family-media .photo-slot-hint{ white-space:normal !important; max-width:76% !important; line-height:1.35 !important; text-transform:none !important; letter-spacing:.01em !important; font-size:11.5px !important; text-align:center !important; }

#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; } }

/* ===== 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; }
#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; }

/* ===== Hero CTA — sticky bottom bar on scroll ===== */
/* Hero CTA sticky bottom bar: shared block in henry_overview_v2.css. */

/* ===== T0-06 adapt (verbatim from the mockup's own t006-v72-adapt block) ===== */
.family-card.is-soon{opacity:.78}
/* The same badge inside a Shop By menu (Kiss Cut, 2026-09-30) — one rule, two places. */
.family-card .soon-badge,.filter-menu .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}