/* ============================================================
   Product art tiles - ASANA:1218416287481940 (imagery / art direction).
   Split out of one-jifu.css in Phase 5 (ASANA:1218422910269074) so that
   file can be deleted: the tiles stay until Marketing's real product
   photography lands, then the imagery ticket deletes this file and its
   <link> in base.html. Rules moved verbatim; no new .oj-* rules.
   ============================================================ */

:root {
  /* The tile chrome references the documented custom properties in
     base.html's :root - no raw hex for the mirrors. */
  --oj-v12-sahara: var(--jifu-accent-sahara);
  /* ASANA:1219413299038519: the page-ground token went white; the tile
     type stays Parchment on its ash ground, so mirror the palette token. */
  --oj-v12-parchment: var(--jifu-parchment);
}

/* ============================================================
   Product art tiles (slice 2). Rendered by _product_art.html;
   family art symbols live in /static/one-jifu-art/sprite.svg.
   The tile fills whatever aspect box the caller already has
   (aspect-[4/3] card, square PDP, w-40 list thumb, w-14 mini),
   so it is a fill-in-the-box system - zero layout change.
   ============================================================ */
.oj-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* v1.2: Midnight Ash tile ground (var(--jifu-cta) = #191919 in
     base.html's documented custom properties). */
  background: var(--jifu-cta);
  overflow: hidden;
  isolation: isolate;
}
.oj-art .oj-art-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.35s ease;
}
/* Card hover: zoom the ART, not the photo (photo scale classes still
   work where call sites pass them on the img). */
a.group:hover .oj-art .oj-art-bg,
.group:hover .oj-art .oj-art-bg { transform: scale(1.06); }

/* Real photo: rendered as-is on a plain white ground. Clark (2026-09-30):
   the product renders carry their own backgrounds, so the shop must not
   paint a second shade behind them - no family art (the template skips
   the .oj-art-bg svg in frame mode), no Midnight Ash / light-family tile
   ground, no padding, no drop shadow. Declared AFTER the family ground
   rules below so it wins for every family. The photo takes over the
   card-hover zoom the art used to carry. */
.oj-art .oj-art-img { position: relative; z-index: 2; display: block; }
/* No photo: the img is a transparent placeholder kept for alt text +
   the PDP gallery-swap JS contract; the art + wordmark are the visual. */
.oj-art--word .oj-art-img { position: absolute; top: 0; left: 0; z-index: 1; }

/* Gold letter-spaced wordmark + caption (mockup .pcard .ph treatment). */
.oj-art-word-mark {
  position: absolute;
  left: 6%; right: 6%;
  top: 45%;
  transform: translateY(-50%);
  z-index: 3;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.14em;
  /* v1.2: Sahara wordmark, no gold glow (glows are logo/brand misuse). */
  color: var(--oj-v12-sahara);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
}
.oj-art-name {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 8%;
  z-index: 3;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oj-v12-parchment);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Wordmark scale per surface (card sizes 160px up to full-width PDP). */
.oj-art--card .oj-art-word-mark  { font-size: clamp(20px, 4.5vw, 30px); }
.oj-art--thumb .oj-art-word-mark { font-size: 20px; }
.oj-art--list .oj-art-word-mark  { font-size: 20px; }
.oj-art--pdp .oj-art-word-mark   { font-size: clamp(34px, 9vw, 56px); letter-spacing: 0.18em; text-shadow: 0 3px 28px rgba(0, 0, 0, 0.4); }
.oj-art--pdp .oj-art-name        { font-size: 12px; }
.oj-art--list .oj-art-name,
.oj-art--thumb .oj-art-name      { font-size: 8.5px; letter-spacing: 0.18em; }
.oj-art--mini .oj-art-word-mark  { font-size: 11px; letter-spacing: 0.08em; }
.oj-art--mini .oj-art-name       { display: none; }

/* Light-tile families (pearl/rose STM Skin, sage GLO) need dark type. */
.oj-art--stm-skin { background: #f3e4e7; }
.oj-art--glo      { background: #e2eadd; }
.oj-art--stm-skin .oj-art-word-mark { color: #a8556b; text-shadow: 0 0 26px rgba(255, 255, 255, 0.75); }
.oj-art--stm-skin .oj-art-name      { color: #8d6b74; }
.oj-art--glo .oj-art-word-mark      { color: #5d7355; text-shadow: 0 0 26px rgba(255, 255, 255, 0.8); }
.oj-art--glo .oj-art-name           { color: #72816d; }

/* Frame mode ground + hover - see the note above; keep this last. */
.oj-art--frame { background: #fff; }
.oj-art--frame .oj-art-img { transition: transform 0.35s ease; }
a.group:hover .oj-art--frame .oj-art-img,
.group:hover .oj-art--frame .oj-art-img { transform: scale(1.04); }