/* ═══════════════════════════════════════════════════════════════════════
   v212.css — "The Clarity Release" · 2026-10-13
   Loaded after every other stylesheet. Owner brief: (1) "tap the card to
   see the reverse / front" is not working and not visible — every tap must
   turn the card, back and forth · (2) the four offer button banners are
   unclear and text overlaps the artwork — make them perfectly designed,
   artistic, zero overlapping text.
   Seals: no filter on .bc-card or ancestors · never transform .c-slide or
   Ken-Burns images · v200 gold button gradient untouched · v211 stillness
   rules stay (no blur/mix-blend/infinite motion in the hero).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE BLACK CARD FLIP — every tap turns it, the hint is unmissable ──
   Why the tap "didn't work" on real devices:
   a) .bc-stage-open (z5) and .hero-cue (z4) sat ABOVE the card (z3) and ate
      taps over the card's lower corners; the stage glow pseudo also
      competed for pointer events.
   b) the flip hint was 11px ghost-brown text sitting under the card where
      the cream certificate panel passed behind it — effectively invisible.
   c) taps starting on card text could begin a text-selection/drag gesture
      (no user-select/touch-action hygiene) so the click never arrived.
   Fixes: decor is pointer-transparent, interactive chrome drops BELOW the
   card, the hint becomes a solid gold pill, the whole card-wrap area is a
   tap target, and the card is manipulation-only (no zoom/select). */

/* decor never eats a tap */
.bc-stage-cert,
.bc-hero-stage::before,
.bc-hero-stage #heroDust,
.bc-flip-glint,
.bc-live-light,
.bc-micro-grid,
.bc-noise,
.bc-orbit,
.black-hero .dust,
.black-hero .bc-hero-aurora {
  pointer-events: none !important;
}

/* interactive chrome drops below the card; the card + hint win every overlap */
.bc-stage-open,
.black-hero .hero-cue {
  z-index: 2 !important;
}
.bc-stage-card,
.bc-card-wrap[data-black-card-motion] {
  z-index: 4;
}

/* the card itself: clean tap physics */
.bc-card[data-flip-card] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* the hint — a real, visible gold pill on every ground */
.bc-flip-hint {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0 !important;
  padding: 11px 18px !important;
  background: rgba(10, 7, 3, .92) !important;
  border: 1px solid rgba(233, 196, 106, .75) !important;
  border-radius: 999px !important;
  color: #ffe9b4 !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.3;
  position: relative;
  z-index: 8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.bc-flip-hint .bc-flip-icon {
  color: #e9c46a !important;
  font-size: 16px !important;
}
.bc-flip-hint:hover,
.bc-card-home .bc-flip-hint:hover {
  color: #fff2d3 !important;
  border-color: rgba(240, 210, 140, .95) !important;
}
.bc-flip-hint:focus-visible {
  outline: 2px solid #f1ca69 !important;
  outline-offset: 3px;
}

/* ── 2 · THE FOUR OFFER BUTTON BANNERS — art above, words below ───────
   v210's 190px art circle floated behind the copy in a ~260px card — the
   graphics read as muddy blobs and the words sat ON the artwork. v212
   gives every panel a strict two-zone layout: a painted art BAND on top
   (its own space, no text ever enters) and a clean typographic column
   below with the CTA pinned to the floor. Motifs are redrawn larger and
   crisper — clear figures, honest contrast, no text overlap possible. */

.shv-offer-grid {
  gap: 16px;
}
.shv-offer-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 0 0 18px !important;
  min-height: 322px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.shv-offer-card::after {
  inset: 8px;
  border-radius: 15px;
  opacity: .18;
}

/* ── the art band: full-width header strip, text never enters ── */
.shv-offer-art {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 104px !important;
  min-height: 104px;
  border-radius: 0 !important;
  flex: 0 0 auto;
  z-index: 1;
  overflow: hidden;
}

/* ── the word column: one clean stack, CTA on the floor ── */
.shv-offer-badge {
  align-self: flex-start;
  margin: 16px 18px 0;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 12px;
}
.shv-offer-head {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  margin: 10px 18px 0;
}
.shv-offer-pct {
  font-family: var(--ff-disp, Georgia, serif);
  font-size: clamp(38px, 4.6vw, 50px);
  line-height: 1;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.shv-offer-off {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.shv-offer-sub {
  margin: 10px 18px 0;
  font-size: 12.8px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.shv-offer-sub b.shv-offer-code {
  display: inline-block;
  margin: 0 2px;
}
.shv-offer-go {
  margin: 14px 18px 0 !important;
  margin-top: auto !important;
  align-self: flex-start;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .055em;
  border-radius: 999px;
  padding: 11px 17px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.shv-premium-msg {
  margin: 8px 18px 0;
  font-size: 11.5px;
}
.shv-offer-card:hover .shv-offer-go {
  transform: translateX(3px);
}

/* the corner flourish lives on the art band */
.shv-offer-orn {
  left: 16px !important;
  top: 14px !important;
  width: 22px;
  height: 22px;
  opacity: .7;
  z-index: 2;
}

/* long title on the certificate card must never overflow */
.shv-offer-cert .shv-offer-pct {
  font-size: clamp(28px, 3.3vw, 38px);
  letter-spacing: .01em;
}

/* ── 2a · MAKING · obsidian band with a clear Black-Card ────────────── */
.shv-offer-making {
  background: linear-gradient(172deg, #2c0d13 0%, #401019 58%, #24070b 100%);
  color: #f5e7c8;
}
.shv-offer-making .shv-offer-art {
  background:
    linear-gradient(180deg, rgba(233, 196, 106, .14), transparent 70%),
    linear-gradient(112deg, #1c060b 0%, #3b0e17 62%, #24070b 100%);
  border-bottom: 1px solid rgba(233, 196, 106, .35);
}
/* the Black Card, large and crisp */
.shv-offer-making .shv-offer-art::before {
  content: '';
  position: absolute;
  right: 26px;
  top: 18px;
  width: 118px;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(145deg, #4a1019 0%, #1c060a 72%);
  border: 2px solid rgba(233, 196, 106, .9);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 233, 180, .3);
  transform: rotate(-9deg);
}
/* gold chip + rule on the card */
.shv-offer-making .shv-offer-art::after {
  content: '';
  position: absolute;
  right: 78px;
  top: 38px;
  width: 22px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f0d28c, #b8860b);
  transform: rotate(-9deg);
  box-shadow: 36px 16px 0 -5px 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; }
.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;
}

/* ── 2b · DELIVERY · cream band with a clear tied parcel ────────────── */
.shv-offer-delivery {
  background: linear-gradient(172deg, #fff8ea 0%, #f8e8c6 58%, #f0d9a8 100%);
  color: #5f3b07;
  border: 1px solid rgba(180, 130, 40, .38);
}
.shv-offer-delivery .shv-offer-art {
  background:
    linear-gradient(180deg, rgba(255, 224, 160, .55), transparent 72%),
    linear-gradient(112deg, #f6e4b8 0%, #fbeccb 60%, #efd6a0 100%);
  border-bottom: 1px solid rgba(184, 134, 11, .4);
}
/* the parcel, large and crisp */
.shv-offer-delivery .shv-offer-art::before {
  content: '';
  position: absolute;
  right: 30px;
  top: 18px;
  width: 96px;
  height: 68px;
  border-radius: 12px;
  background: linear-gradient(150deg, #e0b050, #c08c22);
  border: 2px solid rgba(122, 82, 12, .5);
  box-shadow: 0 12px 24px rgba(120, 78, 10, .3), inset 0 2px 0 rgba(255, 246, 214, .75);
  transform: rotate(7deg);
}
/* ribbon cross + knot */
.shv-offer-delivery .shv-offer-art::after {
  content: '';
  position: absolute;
  right: 66px;
  top: 14px;
  width: 16px;
  height: 76px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8f2028, #6f1620);
  transform: rotate(7deg);
  box-shadow: 0 0 0 1px rgba(255, 236, 196, .35);
}
.shv-offer-delivery .shv-offer-badge {
  background: linear-gradient(135deg, #7a1420, #5f0e18);
  color: #ffe9b4;
}
.shv-offer-delivery .shv-offer-pct {
  color: #7a1420;
}
.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);
}

/* ── 2c · PREMIUM · midnight band with a struck medallion ───────────── */
.shv-offer-premium {
  background: linear-gradient(172deg, #3a2410 0%, #2b1608 58%, #1c0c04 100%);
  color: #f0dcae;
}
.shv-offer-premium .shv-offer-art {
  background:
    linear-gradient(180deg, rgba(233, 196, 106, .16), transparent 72%),
    linear-gradient(112deg, #1c0c04 0%, #43280d 62%, #221206 100%);
  border-bottom: 1px solid rgba(233, 196, 106, .4);
}
/* the medallion, large and crisp */
.shv-offer-premium .shv-offer-art::before {
  content: '';
  position: absolute;
  right: 30px;
  top: 12px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0d28c, #c1922c 58%, #8f6516);
  border: 2px solid rgba(255, 236, 180, .55);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 -3px 8px rgba(110, 74, 8, .45);
}
/* engraved ring + star */
.shv-offer-premium .shv-offer-art::after {
  content: '✦';
  position: absolute;
  right: 56px;
  top: 32px;
  font-size: 28px;
  color: #6d4a08;
  text-shadow: 0 1px 0 rgba(255, 240, 196, .55);
}
.shv-offer-premium .shv-offer-badge {
  background: linear-gradient(135deg, #e9c46a, #b8860b);
  color: #2a1604;
}
.shv-offer-premium .shv-offer-pct {
  color: #f0d28c;
}
.shv-offer-premium .shv-offer-off { color: #e0c68c; }
.shv-offer-premium .shv-offer-sub { color: #d8bf88; }
.shv-offer-premium .shv-offer-go {
  background: linear-gradient(135deg, #e9c46a, #d4af5a);
  color: #2a1604;
}
.shv-offer-premium .shv-offer-go:hover {
  box-shadow: 0 12px 28px rgba(212, 175, 90, .35);
}

/* ── 2d · CERTIFICATE · parchment band with a wax seal ──────────────── */
.shv-offer-cert {
  background: linear-gradient(172deg, #fbf3de 0%, #f3e6c4 58%, #ecd9ac 100%);
  color: #5b4312;
  border: 1px solid rgba(170, 128, 46, .42);
}
.shv-offer-cert .shv-offer-art {
  background:
    linear-gradient(180deg, rgba(255, 236, 190, .6), transparent 72%),
    linear-gradient(112deg, #f0e2bc 0%, #f9eed3 60%, #e8d4a4 100%);
  border-bottom: 1px solid rgba(170, 128, 46, .42);
}
/* the wax seal, large and crisp */
.shv-offer-cert .shv-offer-art::before {
  content: 'S';
  position: absolute;
  right: 34px;
  top: 14px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #c4442c, #8f2018 62%, #6d120c);
  border: 2px solid rgba(255, 214, 180, .35);
  box-shadow: 0 12px 26px rgba(90, 30, 14, .4), inset 0 -3px 8px rgba(70, 16, 8, .5);
  color: #ffe2c8;
  font-family: var(--ff-disp, Georgia, serif);
  font-size: 34px;
  line-height: 76px;
  text-align: center;
}
/* seal ribbon tails */
.shv-offer-cert .shv-offer-art::after {
  content: '';
  position: absolute;
  right: 58px;
  top: 82px;
  width: 12px;
  height: 22px;
  background: linear-gradient(180deg, #a53424, #7e2014);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.shv-offer-cert .shv-offer-badge {
  background: linear-gradient(135deg, #8f2018, #6d120c);
  color: #ffe9c8;
}
.shv-offer-cert .shv-offer-pct {
  color: #7c5a14;
}
.shv-offer-cert .shv-offer-off { color: #7c5a14; }
.shv-offer-cert .shv-offer-sub { color: #6b5222; }
.shv-offer-cert .shv-offer-go {
  background: linear-gradient(135deg, #8f2018, #6d120c);
  color: #ffe9c8;
}
.shv-offer-cert .shv-offer-go:hover {
  background: linear-gradient(135deg, #a53424, #8f2018);
}

/* hover lift + one-shot shine stay (v209 rules: never infinite) */
.shv-offer-card:hover, .shv-offer-card:focus-visible {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 26px 62px rgba(61, 14, 21, .26);
}

/* small screens: the band shortens, the words stay in their column */
@media (max-width: 560px) {
  .shv-offer-card { min-height: 0; }
  .shv-offer-art { height: 92px !important; min-height: 92px; }
  .shv-offer-pct { font-size: 40px; }
  .shv-offer-cert .shv-offer-pct { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .shv-offer-card { animation: none; }
  .shv-offer-card:hover, .shv-offer-card:focus-visible { transform: none; }
}