/* Brand-specific merchandising artwork; the delivered item is a digital credential. */
.gift-card[data-product],
.checkout-card[data-product] {
  color: var(--card-ink);
  background: var(--card-surface);
  border: 0;
  overflow: hidden;
}
.product-stage .gift-card[data-product] {
  container-type: inline-size;
  border-radius: 16px;
  box-shadow: 0 20px 36px #0006;
  transform: rotate(-3deg);
}
.gift-card[data-product]:hover {
  transform: rotate(-1deg) translateY(-3px);
}
.gift-card[data-product] .card-art {
  background: var(--card-surface);
  overflow: hidden;
}
.gift-card[data-product] .card-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-shape, transparent);
  clip-path: var(--card-shape-clip, none);
}
.gift-card[data-product] .card-art::after,
.checkout-card[data-product]::before {
  content: "";
  position: absolute;
  inset: var(--mark-inset, 25% 7% 23% 54%);
  background: var(--brand-mark) center / var(--mark-size, contain) no-repeat;
}
.gift-card[data-product] .card-content {
  position: relative;
  padding: 6% 7%;
  background: none;
}
.gift-card[data-product] #card-brand {
  font-size: clamp(22px, 7cqw, 38px);
  font-weight: 650;
  letter-spacing: -.025em;
}
.gift-card[data-product] .card-amount {
  color: var(--card-value-ink, var(--card-ink));
  font-size: clamp(28px, 9cqw, 49px);
  text-shadow: none;
}
.gift-card[data-product] .card-kicker {
  color: var(--card-value-ink, var(--card-ink));
  font-size: clamp(8px, 2.2cqw, 12px);
  letter-spacing: .13em;
  margin-bottom: .3em;
}
.gift-card[data-product] .card-japan {
  color: var(--card-region-ink, var(--card-ink));
  font-size: clamp(9px, 2.3cqw, 12px);
}
.checkout-card[data-product] img { display: none; }
.checkout-card[data-product]::after {
  background: var(--card-shape, transparent);
  clip-path: var(--card-shape-clip, none);
}
.checkout-card[data-product]::before { z-index: 0; }
.checkout-card[data-product] .checkout-card-brand {
  font-size: var(--checkout-brand-size, 13px);
  letter-spacing: -.02em;
  color: var(--card-ink);
  z-index: 1;
}
.checkout-card[data-product] .checkout-card-type {
  font-size: 8px;
  color: var(--card-value-ink, var(--card-ink));
  z-index: 1;
}
.catalog-product[data-product]::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 68px;
  aspect-ratio: 1.62;
  border-radius: 5px;
  background: var(--brand-mark) center / var(--mini-mark-size, 78% auto) no-repeat var(--mini-surface, var(--card-surface));
}
.catalog-product[data-product] .catalog-status {
  padding-right: 78px;
}

/* Uber: its official white wordmark on a black surface. */
[data-product=uber] {
  --card-surface: #000;
  --card-ink: #fff;
  --brand-mark: url("/brand-uber.png");
}
.product-stage[data-product=uber] { background: #202020; }

/* Steam: deep blue, a hard-edged cyan beam, and its original white wordmark. */
[data-product=steam] {
  --card-surface: #112537;
  --card-ink: #fff;
  --brand-mark: url("/brand-steam.svg");
  --card-shape: #205f86;
  --card-shape-clip: polygon(76% 0, 100% 0, 100% 100%, 27% 100%);
  --mark-inset: 28% 6% 28% 49%;
}
.product-stage[data-product=steam] { background: #131f29; }
.gift-card[data-product=steam] .card-art::after { transform: rotate(-14deg); }

/* Apple: the original gift-card artwork on an uncluttered white surface. */
[data-product=apple] {
  --card-surface: #fff;
  --card-ink: #1d1d1f;
  --brand-mark: url("/brand-apple.png");
  --mini-mark-size: auto 85%;
  --mark-inset: 13% 4% 8% 46%;
}
.product-stage[data-product=apple] { background: #222725; }

/* Amazon: its original dark gift-card face, with the smile kept unobstructed. */
[data-product=amazon] {
  --card-surface: #171e28;
  --card-ink: #fff;
  --brand-mark: url("/brand-amazon.jpg");
  --mark-inset: 0;
  --mark-size: 120% auto;
  --mini-mark-size: 120% auto;
  --checkout-brand-size: 10px;
}
.product-stage[data-product=amazon] { background: #20262d; }
.gift-card[data-product=amazon] #card-brand { font-size: clamp(20px, 6cqw, 33px); }

/* MOS: its red/white split and official green brand mark. */
[data-product=mos] {
  --card-surface: #b52724;
  --card-ink: #fffdf5;
  --card-region-ink: #285d40;
  --mini-surface: #fffaf0;
  --checkout-brand-size: 10px;
  --brand-mark: url("/brand-mos.svg");
  --card-shape: #fffaf0;
  --card-shape-clip: polygon(60% 0, 100% 0, 100% 100%, 47% 100%);
  --mark-inset: 24% 5% 22% 56%;
}
.product-stage[data-product=mos] { background: #232b21; }

/* Komeda: the coffee-shop wordmark, cream stock and a coffee-brown footer. */
[data-product=komeda] {
  --card-surface: #fff3db;
  --card-ink: #93341e;
  --card-value-ink: #fff3db;
  --brand-mark: url("/brand-komeda.png");
  --card-shape: #5b3025;
  --card-shape-clip: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  --mark-inset: 29% 12% 41% 12%;
}
.product-stage[data-product=komeda] { background: #2b251e; }
.gift-card[data-product=komeda] #card-brand { font-weight: 750; }

/* Skylark: its original bird emblem with a generous sun-yellow roundel. */
[data-product=skylark] {
  --card-surface: #fffbed;
  --card-ink: #5a2422;
  --brand-mark: url("/brand-skylark.png");
  --mini-mark-size: auto 78%;
  --checkout-brand-size: 10px;
  --card-shape: #ffe482;
  --card-shape-clip: circle(31% at 84% 72%);
  --mark-inset: 25% 8% 12% 61%;
}
.product-stage[data-product=skylark] { background: #2b271e; }
.gift-card[data-product=skylark] #card-brand { font-size: clamp(20px, 6.4cqw, 35px); }

/* Disney Store: its official wordmark on pale blue with a navy value panel. */
[data-product=disney] {
  --card-surface: #eaf4ff;
  --card-ink: #10284f;
  --card-value-ink: #fff;
  --brand-mark: url("/brand-disney.svg");
  --card-shape: #10284f;
  --card-shape-clip: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  --mark-inset: 24% 8% 42% 50%;
  --checkout-brand-size: 10px;
}
.product-stage[data-product=disney] { background: #1d2938; }
.gift-card[data-product=disney] #card-brand { font-size: clamp(20px, 6.4cqw, 35px); }

@media (max-width: 800px) {
  .gift-card[data-product] {
    width: 92%;
    max-width: 440px;
  }
}
@media (max-width: 420px) {
  .catalog-product[data-product=amazon] .catalog-brand {
    font-size: 16px;
    white-space: nowrap;
  }
  .catalog-product[data-product]::before {
    width: 48px;
    right: 12px;
    bottom: 14px;
  }
  .catalog-product[data-product] .catalog-status {
    padding-right: 48px;
    min-height: 38px;
  }
}