/* ═══════════════════════════════════════════════════════════════════════
   v210.css — "The Gallery Release" · 2026-10-12
   Two owner orders: (1) the four home offer banners must stop being simple —
   each becomes its own little art panel; (2) the films case must never look
   dead — every film that cannot autoplay shows a gold tap-to-play badge.
   Loaded after every stylesheet. Seals: no filter on the flip chain, no
   scroll-frame writers, reduced-motion honoured, all text ≥ v207 contrast.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE FOUR OFFER BANNERS — one gallery, four art panels ──────── */

.shv-offer-grid {
  gap: 18px;
}
.shv-offer-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 26px 24px 22px !important;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease;
  animation: v210Rise .8s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: 0 18px 44px rgba(61, 14, 21, .18);
}
.shv-offer-grid .shv-offer-card:nth-child(2) { animation-delay: .1s; }
.shv-offer-grid .shv-offer-card:nth-child(3) { animation-delay: .2s; }
.shv-offer-grid .shv-offer-card:nth-child(4) { animation-delay: .3s; }
@keyframes v210Rise {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* engraved double frame on every panel */
.shv-offer-card::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 16px;
  border: 1px solid currentColor;
  opacity: .22;
  pointer-events: none;
  z-index: 2;
}
.shv-offer-card:hover, .shv-offer-card:focus-visible {
  transform: translateY(-7px) scale(1.012);
  box-shadow: 0 30px 70px rgba(61, 14, 21, .3);
}
.shv-offer-card:active { transform: scale(.985); }

/* the art scene (painted per variant) sits top-right, behind the words */
.shv-offer-art {
  position: absolute;
  top: -26px;
  right: -26px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.shv-offer-orn {
  position: absolute;
  left: 18px;
  top: 16px;
  width: 26px;
  height: 26px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-radius: 6px 0 0 0;
  opacity: .55;
  z-index: 2;
  pointer-events: none;
}

/* words above the art */
.shv-offer-badge, .shv-offer-head, .shv-offer-sub, .shv-offer-go,
.shv-offer-code, .shv-premium-msg {
  position: relative;
  z-index: 3;
}
.shv-offer-badge {
  align-self: flex-start;
  letter-spacing: .14em;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 13px;
}
.shv-offer-pct {
  font-family: var(--ff-disp, Georgia, serif);
  font-size: clamp(46px, 6vw, 62px);
  line-height: .95;
  letter-spacing: -.02em;
}
.shv-offer-off {
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
}
.shv-offer-go {
  margin-top: 14px;
  align-self: flex-start;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 11px 18px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.shv-offer-go:hover, .shv-offer-card:hover .shv-offer-go {
  transform: translateX(4px);
}

/* ── 1a · the MAKING panel — obsidian Black-Card atelier ───────────── */
.shv-offer-making {
  background:
    radial-gradient(140% 120% at 88% -10%, rgba(233, 196, 106, .28), transparent 52%),
    repeating-conic-gradient(from 210deg at 82% 6%,
      rgba(233, 196, 106, .1) 0deg 5deg, transparent 5deg 13deg),
    linear-gradient(165deg, #2c0d13 0%, #45101a 56%, #22060a 100%);
  color: #f5e7c8;
}
.shv-offer-making .shv-offer-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(233, 196, 106, .32), transparent 62%);
}
.shv-offer-making .shv-offer-art::before {
  /* a small Black Card silhouette, tilted in the light */
  content: '';
  position: absolute;
  top: 62px;
  right: 42px;
  width: 108px;
  height: 68px;
  border-radius: 11px;
  background: linear-gradient(135deg, #57121d, #240609 70%);
  border: 1.5px solid rgba(233, 196, 106, .85);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 233, 180, .35);
  transform: rotate(-13deg);
}
.shv-offer-making .shv-offer-art::after {
  content: '✦';
  position: absolute;
  top: 78px;
  right: 74px;
  color: #f0d28c;
  font-size: 26px;
  transform: rotate(-13deg);
  text-shadow: 0 2px 12px rgba(240, 210, 140, .55);
}
.shv-offer-making .shv-offer-badge {
  background: linear-gradient(135deg, #e9c46a, #d4af5a);
  color: #2a0c12;
}
.shv-offer-making .shv-offer-pct {
  color: #ffe9b4;
  text-shadow: 0 4px 26px rgba(233, 196, 106, .5);
}
.shv-offer-making .shv-offer-off { color: #e9d3a2; }
.shv-offer-making .shv-offer-sub { color: #ecd8ae; }
.shv-offer-making .shv-offer-go {
  background: rgba(233, 196, 106, .16);
  color: #ffe9b4;
  border: 1px solid rgba(233, 196, 106, .55);
}
.shv-offer-making .shv-offer-go:hover {
  background: linear-gradient(135deg, #e9c46a, #d4af5a);
  color: #2a0c12;
}

/* ── 1b · the DELIVERY panel — cream festive parcel post ───────────── */
.shv-offer-delivery {
  background:
    radial-gradient(130% 110% at 90% -12%, rgba(255, 214, 140, .5), transparent 52%),
    linear-gradient(155deg, #fff8ea 0%, #f8e8c6 58%, #f0d9a8 100%);
  color: #5f3b07;
  border: 1px solid rgba(180, 130, 40, .38);
}
.shv-offer-delivery .shv-offer-art {
  background: radial-gradient(circle at 50% 50%, rgba(199, 154, 46, .22), transparent 62%);
}
.shv-offer-delivery .shv-offer-art::before {
  /* a tied parcel with ribbon */
  content: '';
  position: absolute;
  top: 70px;
  right: 44px;
  width: 96px;
  height: 78px;
  border-radius: 12px;
  background: linear-gradient(150deg, #e9c46a, #c79a2e);
  box-shadow: 0 16px 30px rgba(120, 78, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
  transform: rotate(8deg);
}
.shv-offer-delivery .shv-offer-art::after {
  /* the ribbon cross */
  content: '';
  position: absolute;
  top: 70px;
  right: 82px;
  width: 18px;
  height: 78px;
  background: linear-gradient(180deg, #a97714, #8f6516);
  transform: rotate(8deg);
  box-shadow: 39px 0 0 #8f6516;
}
.shv-offer-delivery .shv-offer-badge {
  background: linear-gradient(135deg, #7a1420, #5f0e18);
  color: #ffe9b4;
}
.shv-offer-delivery .shv-offer-pct {
  color: #7a1420;
  text-shadow: 0 3px 18px rgba(122, 20, 32, .22);
}
.shv-offer-delivery .shv-offer-off { color: #6b5518; }
.shv-offer-delivery .shv-offer-sub { color: #5a4726; }
.shv-offer-delivery .shv-offer-code {
  background: rgba(122, 20, 32, .1);
  border: 1.5px dashed rgba(122, 20, 32, .55);
  color: #7a1420;
  border-radius: 10px;
  padding: 3px 10px;
  letter-spacing: .14em;
  font-weight: 800;
}
.shv-offer-delivery .shv-offer-go {
  background: linear-gradient(135deg, #7a1420, #5f0e18);
  color: #ffe9b4;
}
.shv-offer-delivery .shv-offer-go:hover {
  background: linear-gradient(135deg, #96182a, #7a1420);
}

/* ── 1c · the PREMIUM panel — midnight gold medallion ──────────────── */
.shv-offer-premium {
  background:
    radial-gradient(120% 110% at 88% -10%, rgba(120, 78, 10, .38), transparent 55%),
    linear-gradient(165deg, #3a2410 0%, #2b1608 58%, #1c0c04 100%);
  color: #f0dcae;
}
.shv-offer-premium .shv-offer-art {
  background: radial-gradient(circle at 50% 50%, rgba(233, 196, 106, .2), transparent 62%);
}
.shv-offer-premium .shv-offer-art::before {
  /* medallion with engraved ring */
  content: '';
  position: absolute;
  top: 58px;
  right: 40px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0d28c, #b8860b 62%, #8f6516);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 244, 214, .6);
}
.shv-offer-premium .shv-offer-art::after {
  content: '✦';
  position: absolute;
  top: 86px;
  right: 72px;
  font-size: 42px;
  color: #6b4a0c;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
}
.shv-offer-premium .shv-offer-badge {
  background: rgba(233, 196, 106, .95);
  color: #2a1d08;
}
.shv-offer-premium .shv-offer-pct {
  color: #f0d28c;
  text-shadow: 0 4px 24px rgba(233, 196, 106, .4);
}
.shv-offer-premium .shv-offer-off { color: #e0c892; }
.shv-offer-premium .shv-offer-sub { color: #e8dcc0; }
.shv-offer-premium .shv-offer-go {
  background: linear-gradient(135deg, #e9c46a, #d4af5a);
  color: #2a0c12;
}
.shv-offer-premium .shv-offer-go:hover { transform: translateX(4px) translateY(-1px); }

/* ── 1d · the CERTIFICATE panel — parchment & wax seal ─────────────── */
.shv-offer-cert {
  background:
    radial-gradient(120% 110% at 90% -12%, rgba(199, 154, 46, .22), transparent 55%),
    linear-gradient(155deg, #fdf6e7 0%, #f6ead0 60%, #eeddb4 100%);
  color: #5f3b07;
  border: 1px solid rgba(180, 130, 40, .38);
}
.shv-offer-cert .shv-offer-art {
  background: radial-gradient(circle at 50% 50%, rgba(169, 119, 20, .16), transparent 62%);
}
.shv-offer-cert .shv-offer-art::before {
  /* wax seal */
  content: '';
  position: absolute;
  top: 64px;
  right: 42px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #c2402c, #8f1d12 70%);
  box-shadow: 0 16px 32px rgba(120, 30, 12, .35), inset 0 2px 0 rgba(255, 190, 170, .5),
              inset 0 -8px 18px rgba(70, 10, 5, .4);
}
.shv-offer-cert .shv-offer-art::after {
  content: 'S';
  position: absolute;
  top: 78px;
  right: 70px;
  font-family: var(--ff-disp, Georgia, serif);
  font-size: 52px;
  font-weight: 700;
  color: #f6d9b8;
  text-shadow: 0 2px 6px rgba(70, 10, 5, .55);
}
.shv-offer-cert .shv-offer-orn {
  border-color: #b8860b;
}
.shv-offer-cert .shv-offer-badge {
  background: linear-gradient(135deg, #b8860b, #8f6516);
  color: #fff6e6;
}
.shv-offer-cert .shv-offer-pct {
  color: #a97714;
  font-size: clamp(30px, 4.6vw, 40px);
  font-style: italic;
  text-shadow: 0 2px 14px rgba(169, 119, 20, .28);
}
.shv-offer-cert .shv-offer-off { color: #6b5518; }
.shv-offer-cert .shv-offer-sub { color: #5a4726; }
.shv-offer-cert .shv-offer-go {
  background: rgba(169, 119, 20, .12);
  color: #7a5a10;
  border: 1px solid rgba(169, 119, 20, .5);
}
.shv-offer-cert .shv-offer-go:hover {
  background: linear-gradient(135deg, #b8860b, #8f6516);
  color: #fff6e6;
}

/* small screens: keep the art, tighten the stage */
@media (max-width: 640px) {
  .shv-offer-card { min-height: 190px; padding: 22px 18px 18px !important; }
  .shv-offer-art { width: 150px; height: 150px; top: -20px; right: -20px; }
  .shv-offer-making .shv-offer-art::before,
  .shv-offer-delivery .shv-offer-art::before,
  .shv-offer-premium .shv-offer-art::before,
  .shv-offer-cert .shv-offer-art::before { transform: scale(.82) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .shv-offer-card { animation: none; }
  .shv-offer-card:hover, .shv-offer-card:focus-visible { transform: none; }
}

/* ── 2 · FILMS CASE — never a dead card ───────────────────────────── */
.sv-film-wrap {
  background: #170608;
}
.sv-film-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(20, 3, 7, .72);
  border: 1px solid rgba(233, 196, 106, .8);
  color: #ffe9b4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.sv-case-card .sv-case-no { z-index: 3; }
.sv-case-hint { letter-spacing: .18em; }