/* =============================================================================
   product-edge-finishes.css — PAGE-UNIQUE CSS for the Edge Finishes product page
   (FC-13, FC-rebuild wave re-port 2026-07-24).
   -----------------------------------------------------------------------------
   Loaded as $page_css (replaces henry_product.css). The shared FC component look +
   typography lives in www/css/henry_fc.css (loaded after this + henry_coolgray.css).
   This sheet keeps ONLY page-unique decoration:
     1. Keep-Exploring card scenes (component owns structure in henry_fc.css; the
        page owns the scene skin here — same pattern as product-foil.css).
     2. The #edge-color-system 61-swatch wall (HAND-BUILT-OK one-off per the
        Lane-B board's component manifest — this page's own thing, not forced
        into foil-range.php, which is FC-01/FC-20 only). Reuses the SAME fw38-*
        visual mechanic already proven in henry_fc.css's #foil-range block,
        retargeted to this section's own id so it does not depend on (or leak
        into) the foil-only component.

   The prior 212-line copy (the full v1.2/v1.4 mockup CSS) is superseded — this
   page now uses the shared FC component system like every other Phase-2 re-port.
   ============================================================================= */

/* ---- Keep-Exploring: foil / spot-uv / die-cut card scenes (page decoration) --- */
.keep-exploring .foil-card{background:linear-gradient(145deg,#0b0b0c,#25262a);border:1px solid rgba(255,255,255,.13)}
.keep-exploring .foil-mark{position:absolute;left:56px;top:47px;font-size:58px;font-weight:900;letter-spacing:-.07em;background:linear-gradient(115deg,#7a5315,#fbe7a2 30%,#ba8734 55%,#fff2b1 78%,#8c641f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 10px 30px rgba(216,173,78,.25)}
.keep-exploring .foil-name{position:absolute;left:58px;bottom:52px;color:#fff;font-size:24px;font-weight:700}
.keep-exploring .foil-rule{position:absolute;left:58px;right:58px;bottom:36px;height:5px;border-radius:99px;background:linear-gradient(90deg,#8a611f,#ffe89f,#b57d29)}
.keep-exploring .raised-card{background:linear-gradient(145deg,#f8f8f8,#dedede);box-shadow:0 30px 70px rgba(0,0,0,.18)}
.keep-exploring .raised-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:55px;font-weight:900;letter-spacing:-.075em;color:#e7e7e7;text-shadow:-2px -2px 2px rgba(255,255,255,.95),3px 4px 7px rgba(0,0,0,.26),0 18px 24px rgba(0,194,255,.13)}
@media(max-width:560px){.keep-exploring .foil-mark,.keep-exploring .raised-logo{font-size:38px}}

/* ---- Edge Color System: 61-swatch filterable wall (hand-built one-off) ---- */
/* .foilsys-eyebrow is already global in henry_fc.css — reused as-is, no copy needed. */
#edge-color-system .fw38-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;max-width:none}
#edge-color-system .fw38-head-copy{text-align:left;max-width:640px}
#edge-color-system .fw38-head-copy .foilsys-eyebrow{justify-content:flex-start;margin-bottom:12px}
#edge-color-system .fw38-head-copy .foilsys-eyebrow::before{display:none}
#edge-color-system .fw38-head-copy h2{text-align:left;margin:0 0 8px}
#edge-color-system .fw38-head-copy .lead{text-align:left;margin:0}
#edge-color-system .fw38-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--soft);border-radius:12px;padding:5px}
#edge-color-system .fw38-tab{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--body);padding:8px 15px;border-radius:9px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease;white-space:nowrap}
#edge-color-system .fw38-tab:hover{color:var(--ink)}
#edge-color-system .fw38-tab.is-active{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--blue),0 1px 2px rgba(0,0,0,.06)}
#edge-color-system .fw38-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,16px);margin-top:clamp(26px,3vw,40px)}
#edge-color-system .fw38-tile{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b0e12;isolation:isolate;transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease}
#edge-color-system .fw38-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .3s ease,transform .35s ease}
#edge-color-system .fw38-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top,rgba(6,9,12,.74),rgba(6,9,12,0));z-index:2;pointer-events:none}
#edge-color-system .fw38-name{position:absolute;left:12px;right:10px;bottom:9px;z-index:3;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.55)}
#edge-color-system .fw38-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(0,194,255,.22)}
#edge-color-system .fw38-tile:hover .fw38-media{filter:brightness(1.12) saturate(1.05)}
@media(max-width:1120px){#edge-color-system .fw38-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){#edge-color-system .fw38-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#edge-color-system .fw38-head{align-items:flex-start}}
@media(max-width:520px){#edge-color-system .fw38-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}