/* ─────────────────────────────────────────────────────────────────────────
   Roasted Sip · Gift Cards — drop-in styles
   Requires the three PNGs (any path; update the url() lines below) and
   gift-cards.js for cursor tilt. Tokens come from your own colors_and_type.css;
   fallback values inline so this works standalone.
   ───────────────────────────────────────────────────────────────────────── */

.rs-gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 44px;
  align-items: end;
}
@media (max-width: 980px) {
  .rs-gift-grid { grid-template-columns: 1fr; gap: 72px; max-width: 520px; margin: 0 auto; }
}

.rs-gift-slot {
  perspective: 1400px;
  perspective-origin: 50% 60%;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

.rs-gift-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1010 / 638;
  border-radius: 14px;
  background-color: #1A1814;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 480ms cubic-bezier(.22,.61,.36,1),
              box-shadow 480ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  filter: brightness(.88) contrast(1.08) saturate(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.30) inset,
    0 0 0 1px rgba(0,0,0,.25),
    0 4px 8px rgba(10,9,7,.20),
    0 22px 40px -10px rgba(10,9,7,.42),
    0 50px 80px -22px rgba(10,9,7,.50);
  overflow: hidden;
}

/* ── Point these three at wherever your gift-card PNGs live ── */
.rs-gift-card[data-variant="10"] { background-image: url("giftcard-10.png"); }
.rs-gift-card[data-variant="25"] { background-image: url("giftcard-25.png"); }
.rs-gift-card[data-variant="50"] { background-image: url("giftcard-50.png"); }

/* Embossed inner plate */
.rs-gift-card::before {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 0 2px rgba(0,0,0,.18) inset;
  mix-blend-mode: overlay;
  opacity: 1;
}

/* Foil sheen — slow, repeating wash that lights up the gold */
.rs-gift-sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(255,236,190,0) 44%,
    rgba(255,236,190,.55) 50%,
    rgba(255,236,190,0) 56%,
    transparent 62%);
  background-size: 240% 100%;
  background-position: 200% 0;
  mix-blend-mode: overlay;
  animation: rs-foil 6.5s cubic-bezier(.22,.61,.36,1) infinite;
}
.rs-gift-sheen.is-secondary {
  background: linear-gradient(100deg,
    transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  mix-blend-mode: soft-light;
  animation: rs-foil 9.5s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: -3s;
}
@keyframes rs-foil {
  0%   { background-position: 220% 0; }
  55%  { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}

/* Cursor specular — disabled (kept in markup, never shown) */
.rs-gift-spec { display: none; }

/* Vignette — gives the card weight */
.rs-gift-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 85% at 50% 38%, transparent 38%, rgba(0,0,0,.42) 95%);
  mix-blend-mode: multiply;
  opacity: .95;
}

/* Floor shadow */
.rs-gift-pedestal {
  width: 86%; height: 30px; margin-top: -12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10,9,7,.42), rgba(10,9,7,0) 72%);
  filter: blur(3px);
  transition: transform 480ms cubic-bezier(.22,.61,.36,1);
}

/* Optional caption block — drop in or remove */
.rs-gift-meta {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(31,30,26,.14);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.rs-gift-meta .rs-name {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-weight: 500; font-size: 24px; line-height: 1;
  color: var(--coal, #1F1E1A);
}
.rs-gift-meta .rs-price {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic; font-weight: 500; font-size: 30px;
  color: var(--coal, #1F1E1A);
}
.rs-gift-meta .rs-price .rs-n {
  font-size: 20px; margin-right: 2px; color: var(--coal, #1F1E1A);
}
.rs-gift-meta .rs-note {
  grid-column: 1 / -1; margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(31,30,26,.55); max-width: 36ch;
}

/* Reduced-motion users get a flat card */
@media (prefers-reduced-motion: reduce) {
  .rs-gift-sheen { animation: none; }
  .rs-gift-card { transition: none; }
}