/* Lugfolio watch media slots — A2 Cool paper (GD 2026-10-25)
   Never leave empty image windows (Howard: 唔要天窗).
   Placeholders are GD-original silhouettes — not OEM product photos. */

:root {
  --lug-watch-paper: #F4F5F7;
  --lug-watch-line: #E2E4E8;
  --lug-watch-ink: #1A1A1A;
  --lug-watch-muted: #5A5C60;
  --lug-watch-ph-generic: url("/media/watches/watch-placeholder-generic.svg");
}

/* Listing / detail media frame — always 1:1, paper fill, never collapses */
.watch-media,
.watch-card__media,
.watch-detail__media,
.listing-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--lug-watch-paper);
  background-image: var(--lug-watch-ph-generic);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--lug-watch-line);
  border-radius: 8px;
}

.watch-media > img,
.watch-card__media > img,
.watch-detail__media > img,
.listing-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: var(--lug-watch-paper);
}

/* Broken / missing src → keep paper + CSS placeholder visible */
.watch-media > img[src=""],
.watch-media > img:not([src]),
.watch-card__media > img[src=""],
.watch-detail__media > img[src=""] {
  opacity: 0;
}

/* Optional label when still on placeholder */
.watch-media__ph-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.65rem;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lug-watch-muted);
  pointer-events: none;
}

/* Brand-specific default backgrounds (optional data-brand on frame) */
.watch-media[data-brand="rolex"] { background-image: url("/media/watches/placeholder-rolex.svg"); }
.watch-media[data-brand="omega"] { background-image: url("/media/watches/placeholder-omega.svg"); }
.watch-media[data-brand="patek-philippe"] { background-image: url("/media/watches/placeholder-patek-philippe.svg"); }
.watch-media[data-brand="audemars-piguet"] { background-image: url("/media/watches/placeholder-audemars-piguet.svg"); }
.watch-media[data-brand="cartier"] { background-image: url("/media/watches/placeholder-cartier.svg"); }
.watch-media[data-brand="tudor"] { background-image: url("/media/watches/placeholder-tudor.svg"); }
.watch-media[data-brand="seiko"] { background-image: url("/media/watches/placeholder-seiko.svg"); }
.watch-media[data-brand="grand-seiko"] { background-image: url("/media/watches/placeholder-grand-seiko.svg"); }

/* === Priority pack models (S1) === */
.watch-media[data-model="rolex-submariner-124060"] { background-image: url("/media/watches/models/rolex-submariner-124060.svg"); }
.watch-media[data-model="rolex-datejust"] { background-image: url("/media/watches/models/rolex-datejust.svg"); }
.watch-media[data-model="rolex-daytona"] { background-image: url("/media/watches/models/rolex-daytona.svg"); }
.watch-media[data-model="omega-speedmaster"] { background-image: url("/media/watches/models/omega-speedmaster.svg"); }
.watch-media[data-model="omega-seamaster"] { background-image: url("/media/watches/models/omega-seamaster.svg"); }
.watch-media[data-model="patek-nautilus"] { background-image: url("/media/watches/models/patek-nautilus.svg"); }
.watch-media[data-model="patek-calatrava"] { background-image: url("/media/watches/models/patek-calatrava.svg"); }
.watch-media[data-model="ap-royal-oak"] { background-image: url("/media/watches/models/ap-royal-oak.svg"); }
.watch-media[data-model="cartier-tank"] { background-image: url("/media/watches/models/cartier-tank.svg"); }
.watch-media[data-model="cartier-santos"] { background-image: url("/media/watches/models/cartier-santos.svg"); }
.watch-media[data-model="tudor-black-bay"] { background-image: url("/media/watches/models/tudor-black-bay.svg"); }
.watch-media[data-model="tudor-pelagos"] { background-image: url("/media/watches/models/tudor-pelagos.svg"); }
.watch-media[data-model="seiko-prospex"] { background-image: url("/media/watches/models/seiko-prospex.svg"); }
.watch-media[data-model="seiko-presage"] { background-image: url("/media/watches/models/seiko-presage.svg"); }
.watch-media[data-model="gs-snowflake"] { background-image: url("/media/watches/models/gs-snowflake.svg"); }
.watch-media[data-model="gs-evolution9"] { background-image: url("/media/watches/models/gs-evolution9.svg"); }

/* === Category fallbacks === */
.watch-media[data-category="dive"] { background-image: url("/media/watches/categories/category-dive.svg"); }
.watch-media[data-category="chrono"] { background-image: url("/media/watches/categories/category-chrono.svg"); }
.watch-media[data-category="dress"] { background-image: url("/media/watches/categories/category-dress.svg"); }
.watch-media[data-category="integrated"] { background-image: url("/media/watches/categories/category-integrated.svg"); }

/* GD UX smoke 2026-10-25 — one clean webp; no SVG ghost behind loaded img */
.watch-media:has(> img[src]:not([src=""])),
.watch-card__media:has(> img[src]:not([src=""])),
.watch-detail__media:has(> img[src]:not([src=""])),
.listing-card__media:has(> img[src]:not([src=""])) {
  background-image: none;
}