/* FC-08 Metal Business Cards — real-photography override layer (worker session, 2026-07-17).
   Wires Alicia's delivered photography into the 4 content-section photo slots per
   /page-add-photos Step 5 (product-metal.css itself is never edited — this file is
   additive/removable). Slots covered: #finishes .finish-swatch (x4), #craft .craft-large
   (3-state hover-swap: engraving/etched/diecut), #keepsakes .oc-photo (Pocket comb only —
   Small ruler has no delivered/library asset, see the on-page dev note below), #sample-kit
   .sample-visual. Hero + admin gallery are untouched (admin-driven, faithful-to-admin).

   ⚠️ WIRING GAP (verified against source, not assumed): as of this worktree's branch tip,
   www/product.php has NO file_exists-gated loader for a per-page "*_photos.css" file — this
   pattern does not exist anywhere in product.php today, and no sibling cool-gray product page
   uses a separate "_photos.css" file either (their photo-override CSS lives directly in their
   own product-<slug>.css). This file therefore needs ONE small addition wherever product.php's
   other $_META CSS appends live (after the henry_coolgray.css append, so this wins the cascade
   too, though none of the rules below currently collide with coolgray's shared selectors):
     if ($_bespoke && $_bespoke_slug) {
       $_photos_path = __DIR__ . '/css/henry_' . $_bespoke_slug . '_photos.css';
       if (is_file($_photos_path)) {
         $_META .= "\n" . '<link rel="stylesheet" href="css/henry_' . $_bespoke_slug
                 . '_photos.css?' . (@filemtime($_photos_path) ?: '1') . '" />';
       }
     }
   Until that lands (or an equivalent), these rules are inert — the <img> tags in metal.php
   render but are NOT absolutely-positioned/cropped into their slots. Flagged to the
   orchestrator; not applied here since it requires editing the shared www/product.php. */

/* ── #finishes — 4 finish-swatch tiles (black / stainless / gold / rose) ────────────────── */
.finish-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.finish-swatch:before{display:none} /* decorative rotated card outline — superseded by the real photo */

/* ── #craft — hover/focus 3-state photo swap (engrave / etch / cut) ─────────────────────── */
.craft-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;z-index:0}
/* default state (no JS / initial load) = is-engraving, matching the existing JS comment
   "default is-engraving is correct with JS off" — no JS change needed, this just keys off
   the class the markup already ships with. */
.craft-large:not(.is-etched):not(.is-diecut) .craft-photo[data-craft="engraving"]{opacity:1}
.craft-large.is-etched .craft-photo[data-craft="etched"]{opacity:1}
.craft-large.is-diecut .craft-photo[data-craft="diecut"]{opacity:1}
.craft-large:before,.craft-large:after{display:none} /* decorative rotated panel + static "engrave / etch / cut" tag — the real photo + the existing .craft-large-label (still active, z-index:3) replace both */

/* ── #keepsakes — Pocket comb has a delivered photo; Small ruler does not ───────────────── */
.oc-photo.has-photo{background:none}
.oc-photo.has-photo::after{display:none} /* "Photo" corner tag — superseded by the real photo */
.oc-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Small ruler: no delivered asset, and the broader Silkcards Assets library (grepped via
   docs/henry_updates/silkcards-assets-index.txt, 6670 entries) has zero ruler/measure/gauge
   hits and no closer trades/builder-themed metal die-cut either — nothing to substitute
   (page-add-photos Step 3 case 4: never force a mismatched photo into an empty slot).
   This is an on-page photo-team note, CSS-only (no markup touched) — obvious to the team,
   styled so it reads as scaffolding, not buyer content; it disappears entirely the moment a
   real photo + markup <img> land here (this rule only fires while .oc-photo has no has-photo class). */
.object-card.ruler .oc-photo::before{
  content:"Photo needed: ruler-shaped die-cut metal card (no match in Alicia's delivery or the asset library)";
  position:absolute;inset:12px;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:normal;text-transform:none;
  color:#F4C77A;background:rgba(20,24,29,.35);border:1px dashed rgba(255,255,255,.4);border-radius:14px;
}

/* ── #sample-kit — generic SilkCards sample-kit shot (delivered for this exact section) ─── */
.sample-visual.has-photo{background:none}
.sample-visual.has-photo::after{display:none} /* "sample kit proof moment" dev caption — superseded by the real photo */
.sample-visual-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}