/* =============================================================================
   product-cotton.css — PAGE-UNIQUE CSS for the Cotton product page (FC-03, 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 smoke-test #1 (product-suede.css).

   This sheet keeps ONLY cotton-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 "Silk" tab visual used the `.cotton-card` skin
   class (cream/tan, meant for an actual cotton material scene) under the mat-mark text
   "Silk" — a real customer-facing mismatch (the same class of copy-paste bug suede.php
   already found + fixed for its own Silk/Onyx tabs). Fixed here with a genuine .silk-card
   skin, reusing the EXACT definition suede.php's own product-suede.css already established
   site-wide for this skin (cool, smooth gray-to-tan gradient) — so "Silk" now renders
   consistently regardless of which page's keep-exploring points at it. The mockup's own
   .suede-card / .linen-card skins are correct as delivered and ported verbatim.

   The prior 1,060-line 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}

/* Suede — dark, warm, velvet (mockup's own definition, verbatim) */
.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)}

/* Silk — smooth, cool, polished (NEW here; mockup wrongly reused .cotton-card for this tab —
   this is the same skin suede.php's own product-suede.css already ships site-wide) */
.keep-exploring .silk-card{background:linear-gradient(145deg,#2c2f33,#c7c2b8 55%,#8b867c)}
.keep-exploring .silk-card .mat-mark{color:#f7f4ee;text-shadow:0 2px 20px rgba(0,0,0,.35)}

/* Linen — light, woven texture (mockup's own definition, verbatim) */
.keep-exploring .linen-card{background:linear-gradient(145deg,#ece5d8,#d8cfbe);border:1px solid rgba(120,105,80,.14)}
.keep-exploring .linen-card .linen-weave{position:absolute;inset:0;opacity:.55;background:repeating-linear-gradient(0deg,rgba(150,133,105,.16) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(150,133,105,.16) 0 1px,transparent 1px 5px)}
.keep-exploring .linen-card .mat-mark{color:#7d7059}