/* =============================================================================
   product-metal.css — PAGE-UNIQUE CSS for the Metal product page (FC-08, FC-rebuild).
   -----------------------------------------------------------------------------
   Loaded as $page_css (replaces henry_product.css). The shared FC component look +
   typography now lives in www/css/henry_fc.css (loaded after this + henry_coolgray.css) —
   same architecture as the wave pilot (product-foil.css) and cotton/suede's re-ports.

   This sheet keeps ONLY metal-unique decoration: the "Keep Exploring" decorative card
   scenes. henry_fc.css already owns the FULL keep-exploring STRUCTURE (.card-scene,
   .business-card box/shadow/shine overlay, .stack-a/.stack-b, .visual-label) — per
   inc/page/keep-exploring.php's contract, only the per-material SKIN (background +
   .mat-mark position/color) is page-owned, so that's all that lives here.

   FLAGGED (see the REPORT): the mockup's own markup copy-pasted the SUEDE skin
   (.suede-card) under the "Wood" mat-mark, the COTTON skin (.cotton-card) under
   "Plastic", and the LINEN skin (.linen-card) under "Suede" — the same class of
   copy-paste mismatch cotton.php's own Silk-tab bug already fixed. Wood and Plastic
   get genuine NEW skins here; Suede reuses the EXACT gradient already established
   site-wide in product-cotton.css/product-suede.css (not a re-derived value).

   The prior ~29KB copy (the full pre-fc_v2 mockup CSS) is superseded by
   henry_fc.css / henry_coolgray.css — recoverable from git history (this file's
   previous commit) if ever needed for reference.
   ============================================================================= */

/* ---- Keep-Exploring: per-material card-scene skins (page-owned decoration) ---- */
.keep-exploring .mat-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(38px,4.4vw,56px);font-weight:900;letter-spacing:-.06em;z-index:2}

/* Wood — warm, natural, grained (NEW; mockup wrongly reused the .suede-card dark-velvet skin) */
.keep-exploring .wood-card{background:linear-gradient(150deg,#3a2a1c 0%,#6b4a30 55%,#26190f 100%);border:1px solid rgba(255,255,255,.08)}
.keep-exploring .wood-card .mat-mark{color:#f2e2c8;text-shadow:0 2px 22px rgba(0,0,0,.5)}

/* Plastic — translucent, frosted, modern (NEW; mockup wrongly reused the .cotton-card cream/tan skin) */
.keep-exploring .plastic-card{background:linear-gradient(135deg,rgba(190,225,240,.55),rgba(255,255,255,.16) 55%,rgba(150,200,220,.35));border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.keep-exploring .plastic-card .mat-mark{color:#0e2430;text-shadow:0 2px 14px rgba(255,255,255,.4)}

/* Suede — dark, warm, velvet (reused verbatim from product-cotton.css/product-suede.css, not
   re-derived — the mockup's own definition for this tab was already correct) */
.keep-exploring .suede-card{background:linear-gradient(150deg,#211f1c 0%,#38332b 60%,#1b1916 100%);border:1px solid rgba(255,255,255,.08)}
.keep-exploring .suede-card .mat-mark{color:#e6dccc;text-shadow:0 2px 22px rgba(0,0,0,.5)}