/* Product artwork only. The page, hero and customer identities keep their own styling. */
:where(.premium-product, .product-icon, .organizer-cover-art)[data-bot-kind],
:where(.exp-service-card)[data-service-kind] {
  --art-light: 56, 189, 248;
  --art-warm: 40, 108, 240;
  --art-scene: url("/platform/art/premium-v1/bg-creative.webp");
}
[data-bot-kind="system"], [data-bot-kind="protection"],
[data-bot-kind="staff"], [data-bot-kind="package-server"], [data-service-kind="discord"] {
  --art-scene: url("/platform/art/premium-v1/bg-security.webp");
}
[data-bot-kind="music"], [data-bot-kind="temp-voice"],
[data-bot-kind="movie"] {
  --art-scene: url("/platform/art/premium-v1/bg-audio.webp");
}
[data-bot-kind="games"], [data-bot-kind="giveaway"],
[data-bot-kind="squad"], [data-bot-kind="top-reaction"],
[data-bot-kind="package-games"], [data-service-kind="games"] {
  --art-scene: url("/platform/art/premium-v1/bg-games.webp");
}
[data-bot-kind="bank"], [data-bot-kind="currency"],
[data-bot-kind="payment"], [data-bot-kind="loyalty"],
[data-bot-kind="store"], [data-bot-kind="package"],
[data-bot-kind="package-community"], [data-bot-kind="package-store"],
[data-service-kind="subscriptions"], [data-service-kind="extras"] {
  --art-scene: url("/platform/art/premium-v1/bg-economy.webp");
}
[data-bot-kind="athkar"], [data-bot-kind="shia"] {
  --art-scene: url("/platform/art/premium-v1/bg-devotion.webp");
}
[data-bot-kind="music"], [data-bot-kind="temp-voice"],
[data-bot-kind="movie"], [data-service-kind="subscriptions"] {
  --art-light: 159, 134, 255;
  --art-warm: 67, 84, 205;
}
[data-bot-kind="bank"], [data-bot-kind="currency"],
[data-bot-kind="payment"], [data-bot-kind="loyalty"],
[data-service-kind="extras"] {
  --art-light: 240, 191, 85;
  --art-warm: 38, 123, 166;
}
[data-bot-kind="games"], [data-bot-kind="giveaway"],
[data-bot-kind="squad"], [data-bot-kind="top-reaction"],
[data-bot-kind="package-games"], [data-service-kind="games"] {
  --art-light: 122, 149, 255;
  --art-warm: 177, 69, 220;
}
[data-bot-kind="athkar"], [data-bot-kind="shia"],
[data-bot-kind="welcome"], [data-bot-kind="partnerships"] {
  --art-light: 95, 218, 184;
  --art-warm: 42, 133, 174;
}
[data-bot-kind="colors"], [data-bot-kind="reaction"],
[data-bot-kind="booster"], [data-service-kind="design"],
[data-service-kind="social"] {
  --art-light: 207, 139, 239;
  --art-warm: 65, 167, 224;
}
.premium-product[data-bot-kind] .premium-product-art {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--art-light), .16), transparent 62%),
    linear-gradient(180deg, #020c1eb8, #020c1ee8),
    var(--art-scene),
    #030c1d;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(var(--art-light), .16);
}
.premium-product[data-bot-kind] .premium-product-art::before {
  background:
    linear-gradient(120deg, transparent 27%, rgba(var(--art-light), .045) 27.2%, transparent 27.6%),
    linear-gradient(120deg, transparent 71%, rgba(var(--art-light), .035) 71.2%, transparent 71.6%);
  opacity: 1;
}
.premium-product[data-bot-kind] .premium-product-line {
  border-color: rgba(var(--art-light), .12);
}
.premium-product[data-bot-kind] .premium-product-glyph:has(.exp-bot-art) {
  width: 154px;
  height: 154px;
  max-width: 65%;
  position: relative;
  z-index: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.premium-product[data-bot-kind] .premium-product-glyph .exp-bot-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 13px 16px #0007);
  transition: transform .25s ease;
}
.premium-product[data-bot-kind] .premium-product-art-label {
  color: #aac7e7;
  text-shadow: 0 1px 7px #020b1d;
  z-index: 2;
}
.premium-product[data-bot-kind] .premium-featured {
  z-index: 2;
  background: #061a35e8;
  border-color: #365e8d;
  color: #deedff;
}
.premium-product[data-bot-kind]:hover .exp-bot-art {
  transform: translateY(-3px);
}
.product-icon[data-bot-kind]:has(.exp-bot-art) {
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--art-light), .17), #06162e 82%);
  border-color: rgba(var(--art-light), .2);
  overflow: visible;
}
.product-icon[data-bot-kind] .exp-bot-art {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 7px 10px #0006);
}
.organizer-cover-art[data-bot-kind] {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(var(--art-light), .10), transparent 65%),
    linear-gradient(180deg, #061020bb, #061020ee),
    var(--art-scene),
    #061020;
  background-position: center;
  background-size: cover;
}
.organizer-cover-art[data-bot-kind] > .exp-subscription-art {
  width: 120px;
  height: 120px;
  max-height: 92%;
  object-fit: contain;
  opacity: .78;
  filter: drop-shadow(0 8px 12px #0007);
}
.product-banner[src*="/platform/art/premium-v1/"] {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 60%, #12579935, transparent 70%), #06152c;
}
.exp-service-card[data-service-kind] {
  background:
    radial-gradient(ellipse at 12% 50%, rgba(var(--art-light), .10), transparent 55%),
    linear-gradient(135deg, #07182ee8, #030c1bf5),
    var(--art-scene),
    #030c1b;
  background-position: center;
  background-size: cover;
  border-color: rgba(var(--art-light), .18);
}
.exp-service-card[data-service-kind] > img {
  aspect-ratio: 1;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px #0006);
}
.exp-service-card[data-service-kind].is-compact > img {
  width: 150px;
  height: 150px;
}
.exp-package-art {
  background:
    radial-gradient(ellipse at 50% 55%, #1875c442, transparent 70%),
    linear-gradient(180deg, #020c1eb8, #020c1ee8),
    url("/platform/art/premium-v1/bg-economy.webp"),
    #030c1b;
  background-position: center;
  background-size: cover;
}
.exp-package-art img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .premium-product[data-bot-kind] .premium-product-glyph:has(.exp-bot-art) {
    width: 140px;
    height: 140px;
    max-width: 62%;
  }
  .exp-service-card[data-service-kind] > img {
    max-height: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .premium-product[data-bot-kind] .premium-product-glyph .exp-bot-art {
    transition: none;
  }
  .premium-product[data-bot-kind]:hover .exp-bot-art {
    transform: none;
  }
}