/* T0-04 Hang Tags — real-photography override layer (photo-loop, 2026-07-17; extended
   build-worker photos pass, 2026-07-18).
   FIRST real photography on this page (every visual was previously a CSS swatch/illustration).
   (product-hang-tags.css itself is never edited — this file is additive/removable: delete it
   and the page reverts cleanly to its illustrated placeholder state).

   Slots covered (round 2 additions marked ⭐):
     header#top .retail-stage — the hero's illustrated rack/garment/tag scene, replaced by a
       real photo of a finished hang tag attached to a product. The .price-anchor caption box
       is KEPT as a floating overlay above the photo (matches product-linen.css's
       .build-visual.has-photo::after{z-index:2} precedent for a kept decorative element).
     #stocks .stock-grid .swatch-silk / .swatch-cotton / .swatch-suede — 3 of the 6 stock-card
       swatches, wired in round 1.
     ⭐ #stocks .swatch-uncoated — wired from the HERO folder's "uncoated.png" (Aphrodite Studio
       tag), not section 2's own "5. uncoated.jpg" — that file turned out to be a business-card
       photo (no hole/cord, standard card proportions), wrong product for a hang-tag stock
       swatch. The hero-folder file is a genuine, on-brand hang tag and a much better match;
       see the build-worker REPORT for the full image-review reasoning.
     ⭐ #stocks .swatch-layered — wired from "6.Suede - Foiled edges - Restaurant - Flavor.jpg"
       (the wave board's noted replacement for the trashed original) — a hand-held edge shot
       showing a striped foil edge treatment; on-topic for "edge color, architectural presence"
       but stylistically darker/moodier than its crisp studio-lit siblings (flagged, not held).
     #pairings .pairing-wrap .pairing-visual (3rd card, "Layered Thick + Edge Finish") — wired
       in round 1.
     ⭐ #pairings — Silk+Raised Spot UV / Suede+Raised Foil / Cotton+Emboss / Onyx Black+Foil
       (4 of the remaining 5 pairing cards) — all clean image-review PASSes, genuine hang tags.
     ⭐ #samples .proof-gallery — the "It is a close-up" proof section's illustrated
       product-box/shelf scene replaced by ONE real close-up photo (Glacier Gold Honey Co.),
       matching the section's singular framing. The dev-facing "Image / video slot" placeholder
       label (2nd child of .proof-note) was REMOVED from the markup once a real photo landed —
       it read as a build-team note, not buyer copy (audience-fit gate).

   STILL NOT WIRED — genuine wrong-product mismatches, held for Alicia (see REPORT):
     - .swatch-onyx (stock) — delivered file is a business card ("Synergy Flight Center"),
       not a hang tag. No hole, no cord, standard card proportions.
     - #pairings .pairing-visual.uncoated ("Uncoated + Die Cut") — delivered file shows two
       business cards ("Skyline Investment"), not hang tags.

   www/product.php already auto-loads this file if it exists (verified against the current
   gj-configurator tip, product.php:436-440) — no wiring change needed there.

   ── HERO — .retail-stage illustration replaced with a real photo ──────────────────────────
   .retail-stage already has position:relative + overflow:hidden + border-radius (base rule,
   product-hang-tags.css ~line 225), so it's already the right clipping/positioning context —
   no extra rule needed on the container itself. The rack bar, hanging garment, string, and
   illustrated tag card are all specific illustrated STAND-INS for what the real photo already
   shows in one shot (a finished tag hanging from a real product), so they're hidden rather than
   left as a backdrop (unlike a generic texture/gradient, these are distinct illustrated shapes
   that would visually clash/duplicate against a real photo of the same scene). */
.retail-stage .retail-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.retail-stage::before,.rack-bar,.hanging-product,.string,.tag-hero{display:none} /* rack/garment/string/tag illustration — superseded by the real photo */
.retail-stage .price-anchor{z-index:2} /* keep the caption floating above the photo */

/* ── #stocks .stock-swatch — silk/cotton/suede/uncoated/layered get real photos; the shared
   base rule (.stock-swatch{height:138px;position:relative}) already gives the right box —
   only each in-scope swatch's illustrated rotated-card ::after is hidden. Onyx stays illustrated
   (held — see file-header note). ─────────────────────────────────────────────────────────── */
.stock-swatch .stock-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.swatch-silk::after,.swatch-cotton::after,.swatch-suede::after,.swatch-uncoated::after,.swatch-layered::after{display:none} /* rotated-card illustration — superseded by the real photo */

/* ── #pairings .pairing-visual — 5 of 6 pairing cards get real photos (Layered Thick + Edge
   Finish from round 1; Silk+Spot UV, Suede+Foil, Cotton+Emboss, Onyx+Foil this round).
   Uncoated + Die Cut stays illustrated (held — see file-header note). ────────────────────── */
.pairing-visual.has-photo .pairing-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.pairing-visual.has-photo::after{display:none} /* rotated-card illustration — superseded by the real photo */

/* ── #samples .proof-gallery — the illustrated product-box/shelf scene replaced by one real
   close-up photo. .proof-note's remaining caption gets its own small glass-card treatment
   (matching .price-anchor's kept-overlay precedent above) since, unlike .price-anchor, it had
   no background of its own and would lose legibility straight over a photo. ───────────────── */
.proof-gallery.has-photo .proof-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.proof-gallery.has-photo .product-box,.proof-gallery.has-photo .shelf{display:none} /* illustrated boxes/shelf — superseded by the real photo */
.proof-gallery.has-photo .proof-note{z-index:2}
.proof-gallery.has-photo .proof-note>div{background:rgba(0,0,0,.42);backdrop-filter:blur(6px);padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.14)}

/* ── v1/v2 slots: Onyx stock + "Uncoated + Die Cut" pairing (ORCH doctrine 2026-07-18) ──
   The rotated-card CSS illustration is retired in BOTH versions, because NEITHER version
   should show a decorative placeholder: v1 carries Alicia's delivered photo (her approval
   outranks our taste on v1), v2 carries a plain-English "waiting on" note naming the shot
   that is actually missing. A placeholder here is what previously let this page look
   finished while two stock/finish combinations were unrepresented. */
.swatch-onyx::after,.pairing-visual.uncoated::after{display:none}
.swatch-onyx .stock-photo,.pairing-visual.uncoated .pairing-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
/* .swatch-layered joins them (owner-caught 2026-07-18): its delivered file is ALSO a stack of
   business cards, not a hang tag — the same wrong-product case as onyx, which we had
   mis-described as merely "weaker lighting". Its ::after is already hidden by the line 59
   selector list, so only the v2 note needs a home here. */
.await-note{position:absolute;inset:0;z-index:2;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:12.5px;line-height:1.55;font-weight:500;color:#5B6470;background:#EDF1F4;border:1px dashed #C4CCD4;border-radius:inherit}
.await-note strong{font-weight:700;color:#14181D}
/* Stable jump targets for the per-page difference explainer (/photo-decisions/T0-04/).
   Deliberately IDs rather than #:~:text= fragments: a text fragment breaks SILENTLY the
   moment Henry edits the card copy, only fires on user-initiated navigation, and can't be
   verified by automation. An id survives copy edits and is mechanically checkable.
   scroll-margin-top clears the sticky header so the card isn't hidden under it on arrival. */
#stock-onyx,#stock-uncoated,#stock-layered,#pair-uncoated-diecut{scroll-margin-top:120px}