/* Store cards and rarity tags supplied by the client. */
body[data-view="shop"] .shop-card {
  box-sizing: border-box !important;
  width: 360px !important;
  max-width: none !important;
  margin-right: -16px !important;
  margin-left: -16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="shop"] .shop-list {
  display: flex !important;
  box-sizing: border-box !important;
  width: 360px !important;
  min-height: 736px !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 16px !important;
}

body[data-view="shop"] .shop-item,
body[data-view="shop"] .shop-list .shop-item:nth-child(3n) {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 328px !important;
  height: auto !important;
  min-height: 224px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
  isolation: isolate !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #f8f9fa !important;
  box-shadow: none !important;
}

body[data-view="shop"] .shop-item.quality-rare,
body[data-view="shop"] .shop-item.quality-common {
  background: linear-gradient(180deg, #000751 0%, #2c3033 100%) !important;
}

body[data-view="shop"] .shop-item.quality-epic,
body[data-view="shop"] .shop-item.quality-premium {
  background: linear-gradient(180deg, #463200 0%, #2c3033 100%) !important;
}

body[data-view="shop"] .shop-item.quality-legendary {
  background: linear-gradient(180deg, #3f004e 0%, #2c3033 100%) !important;
}

body[data-view="shop"] .shop-item::after {
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  right: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 224px !important;
  height: 224px !important;
  border: 0 !important;
  border-radius: 0 !important;
  content: "" !important;
  opacity: 0.3 !important;
  transform: none !important;
}

body[data-view="shop"] .shop-item.quality-rare::after,
body[data-view="shop"] .shop-item.quality-common::after {
  background:
          radial-gradient(circle at 100% 0%,
          #030846 0 112px,
          transparent 113px
          ),
          radial-gradient(circle at 100% 0%,
          #12175b 0 161px,
          transparent 162px
          ),
          radial-gradient(circle at 100% 0%,
          #1a206b 0 224px,
          transparent 225px
          ) !important;
}

body[data-view="shop"] .shop-item.quality-epic::after,
body[data-view="shop"] .shop-item.quality-premium::after {
  background:
          radial-gradient(circle at 100% 0%,
          rgba(89, 83, 13, 0.8) 0 112px,
          transparent 113px
          ),
          radial-gradient(circle at 100% 0%,
          rgba(132, 107, 27, 0.7) 0 161px,
          transparent 162px
          ),
          radial-gradient(circle at 100% 0%,
          rgba(107, 88, 26, 0.5) 0 224px,
          transparent 225px
          ) !important;
}

body[data-view="shop"] .shop-item.quality-legendary::after {
  background:
          radial-gradient(circle at 100% 0%,
          #3a0a48 0 112px,
          transparent 113px
          ),
          radial-gradient(circle at 100% 0%,
          #4f125b 0 161px,
          transparent 162px
          ),
          radial-gradient(circle at 100% 0%,
          #5d1a6b 0 224px,
          transparent 225px
          ) !important;
}

body[data-view="shop"] .shop-item > * {
  position: relative !important;
  z-index: 1 !important;
}

body[data-view="shop"] .shop-item-head {
  display: flex !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body[data-view="shop"] .shop-item-head > span,
body[data-view="shop"] .shop-pack-label {
  display: none !important;
}

body[data-view="shop"] .shop-item-head b {
  display: flex !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  color: #f8f9fa !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

body[data-view="shop"] .quality-rare .shop-item-head b,
body[data-view="shop"] .quality-common .shop-item-head b {
  width: 55px !important;
  min-width: 55px !important;
  max-width: 55px !important;
  background: linear-gradient(180deg, #3a48dd 0%, #000da1 100%) !important;
}

body[data-view="shop"] .quality-epic .shop-item-head b,
body[data-view="shop"] .quality-premium .shop-item-head b {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

body[data-view="shop"] .quality-legendary .shop-item-head b {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  background: linear-gradient(180deg, #db4dff 0%, #9300b8 100%) !important;
}

body[data-view="shop"] .shop-copy {
  display: flex !important;
  width: 304px !important;
  height: auto !important;
  min-height: 50px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

body[data-view="shop"] .shop-copy > strong {
  display: block !important;
  width: 304px !important;
  height: 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f8f9fa !important;
  font: 600 18px/24px "Montserrat", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="shop"] .shop-copy p {
  display: -webkit-box !important;
  width: 304px !important;
  height: auto !important;
  max-height: 40px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #d4d9de !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
  opacity: 1 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body[data-view="shop"] .shop-item-foot {
  display: contents !important;
}

body[data-view="shop"] .shop-price {
  display: flex !important;
  width: auto !important;
  max-width: 304px !important;
  height: 24px !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
  border-radius: 4px !important;
}

body[data-view="shop"] .shop-price i {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
}

body[data-view="shop"] .shop-price[data-currency="stars"] i {
  background-image: url("/assets/figma/coin-standard.webp") !important;
}

body[data-view="shop"] .shop-price strong {
  display: block !important;
  max-width: 276px !important;
  overflow: hidden !important;
  color: #f8f9fa !important;
  font: 600 18px/24px "Montserrat", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="shop"] .shop-item-foot .shop-buy {
  display: flex !important;
  box-sizing: border-box !important;
  width: 304px !important;
  min-width: 304px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  box-shadow: none !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

/* Beat the legacy shop-specific measurements. */
html body[data-view="shop"] .shop-list .shop-item.shop-item,
html body[data-view="shop"] .shop-list .shop-item.shop-item:nth-child(3n) {
  width: 328px !important;
  height: 224px !important;
  min-height: 224px !important;
  padding: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-clip: padding-box !important;
}

html body[data-view="shop"] .shop-list .shop-item.quality-rare,
html body[data-view="shop"] .shop-list .shop-item.quality-common {
  background: linear-gradient(180deg, #000751 0%, #2c3033 100%) !important;
}

html body[data-view="shop"] .shop-list .shop-item.quality-epic,
html body[data-view="shop"] .shop-list .shop-item.quality-premium {
  background: linear-gradient(180deg, #463200 0%, #2c3033 100%) !important;
}

html body[data-view="shop"] .shop-list .shop-item.quality-legendary {
  background: linear-gradient(180deg, #3f004e 0%, #2c3033 100%) !important;
}

html body[data-view="shop"] .shop-item.shop-item .shop-item-foot {
  position: static !important;
  inset: auto !important;
  display: contents !important;
}

html body[data-view="shop"] .shop-item.shop-item .shop-price,
html body[data-view="shop"] .shop-item.shop-item .shop-buy {
  position: relative !important;
  z-index: 1 !important;
}