/* Unified product header: game and category on the left, storefront tags on
   the right. Buyer selections appear only in the purchase form/cart/orders. */
.offer-editorial .offer-hero-top,
.product-info .product-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-width: 0;
  margin-bottom: 16px;
}
.offer-editorial .offer-hero-top .offer-game { margin-bottom: 0; align-self: center; }
.offer-editorial .offer-hero-badges,
.product-info .product-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
}
.offer-editorial .offer-category-badge,
.product-info .product-hero-badges .cat { margin: 0; flex-shrink: 0; }
.offer-editorial .offer-hero-badges .offer-highlights {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}
.offer-editorial .offer-hero-badges .offer-highlight {
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  background: #172b45;
  max-width: 100%;
}
.offer-editorial .offer-hero-badges .offer-highlight .ico { width: 15px; height: 15px; }
.product-info .product-game-anchor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  align-self: center;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.product-info .product-game-anchor:hover { color: var(--accent); }
.product-info .product-game-anchor .gtile { flex-shrink: 0; }
.product-info .product-game-dot { color: #7188a9; }
.product-info .product-game-category { color: #acc7e8; }
.product-info .product-catalog-filters { margin-top: 12px; }
@media (max-width: 620px) {
  .offer-editorial .offer-hero-top,
  .product-info .product-hero-top { gap: 9px 12px; }
  .offer-editorial .offer-hero-badges,
  .product-info .product-hero-badges { width: 100%; justify-content: flex-end; }
  .offer-editorial .offer-hero-badges .offer-highlights { gap: 6px; }
  .offer-editorial .offer-hero-badges .offer-highlight { padding: 5px 8px; }
}
/* Opt-in full-width game artwork; assign a theme and image for future games. */
body.product-game-theme {
  position: relative;
  isolation: isolate;
  background: #080f1d;
}
body.product-game-theme--wardogs {
  --product-hero-art: url('/static/themes/wardogs-tactical-shadow-v3.png');
}
body.product-game-theme--wowforever {
  --product-hero-art: url('/static/themes/wowforever-alliance-legacy-v3.png');
}
body.product-game-theme--diablo4 {
  --product-hero-art: url('/static/themes/diablo4-dark-sanctuary-v2.png');
}
body.product-game-theme--roblox {
  --product-hero-art: url('/static/themes/roblox-city-v1.png');
  --product-panel-from: rgba(18, 38, 63, .78);
  --product-panel-to: rgba(12, 27, 47, .78);
}
body.product-game-theme::before {
  position: absolute;
  inset: 64px 0 auto;
  height: max(900px, 60vw);
  background:
    linear-gradient(180deg, rgba(6, 17, 34, .04) 0%, rgba(8, 15, 29, .06) 55%, #080f1d 100%),
    var(--product-hero-art) center top / 100% auto no-repeat;
}
body.product-game-theme .main.wrap { max-width: 1008px; padding-top: 20px; }
.product-game-hero .product-offer.offer-editorial {
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: stretch;
  background: linear-gradient(110deg, var(--product-panel-from, rgba(13, 32, 55, .76)), var(--product-panel-to, rgba(10, 26, 46, .54)));
  border-color: rgba(99, 162, 230, .32);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.product-game-hero .offer-copy { padding: 32px 34px; }
.product-game-hero h1 { font-size: clamp(28px, 2.8vw, 40px); }
.product-game-hero .offer-intro { font-size: 13px; line-height: 1.75; }
.product-game-hero .offer-order {
  background: rgba(6, 20, 37, .32);
  border-radius: 0 15px 15px 0;
}
/* The existing monochrome cover becomes a crisp emblem over the same scene.
   Screen blending removes its black rectangle without replacing the image. */
.product-game-hero .offer-order-cover { background: transparent; }
.product-game-hero--wardogs .offer-order-cover::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5px;
  background: var(--product-hero-art) 78% 24% / auto 560px no-repeat;
  filter: blur(4px) brightness(.7);
  opacity: .16;
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%);
  mask-image: linear-gradient(#000 60%, transparent 100%);
}
.product-game-hero--wardogs .offer-order-cover > img { mix-blend-mode: screen; }
.product-game-hero .why-g2u { background: rgba(9, 24, 42, .5); }
.product-game-hero .why-g2u-card { background: rgba(19, 41, 64, .66); }
/* Each registered game covers all /game filters and products without photos.
   Keep the full-width category navigation intact. */
body.product-game-theme--roblox::before {
  height: max(900px, 60vw);
  background-image:
    linear-gradient(180deg, rgba(8, 20, 43, .32), rgba(8, 15, 29, .3) 55%, #080f1d 100%),
    var(--product-hero-art);
}
body.product-game-theme .g-page,
body.product-game-theme .gnav-in { max-width: 1120px; }
body.product-game-theme .gnav { background: rgba(8, 21, 40, .82); }
body.product-game-theme .g-game-hero,
body.product-game-theme .g-game-section,
body.product-game-theme .product-info,
body.product-game-theme .buybox:not(.offer-purchase) {
  background: linear-gradient(110deg, var(--product-panel-from, rgba(13, 32, 55, .76)), var(--product-panel-to, rgba(10, 26, 46, .64)));
  border: 1px solid rgba(99, 162, 230, .26);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
body.product-game-theme .g-game-section { padding: 24px; }
body.product-game-theme .product-info { min-width: 0; padding: 28px; }
body.product-game-theme .pcard,
body.product-game-theme .why-g2u,
body.product-game-theme .item-tools { background: rgba(10, 27, 46, .72); }
body.product-game-theme .why-g2u-card { background: rgba(20, 43, 66, .64); }
body.product-game-theme .crumbs {
  color: #d4e4fa;
  text-shadow: 0 1px 5px #06152d;
}
/* Alliance Legacy, Dark Sanctuary and Tactical Shadow share the Luxury
   Gradient foundation; art intensity is independent of the glass panels. */
body.product-game-theme.game-theme-ambient {
  --game-art-opacity: .16;
  --product-panel-from: rgba(10, 29, 51, .74);
  --product-panel-to: rgba(8, 23, 42, .82);
  background:
    radial-gradient(ellipse 85% 75% at 50% 0, rgba(28, 66, 124, .2), transparent 75%),
    linear-gradient(180deg, #071426, #081425 42%, #080f1d 100%);
}
body.product-game-theme.game-theme-ambient::before {
  background: var(--product-hero-art) center top / 100% auto no-repeat;
  opacity: var(--game-art-opacity);
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%);
  mask-image: linear-gradient(#000 60%, transparent 100%);
}
body.game-theme-ambient .g-game-hero .g-cur-art { opacity: .28; }
@media (max-width: 900px) {
  .product-game-hero .product-offer.offer-editorial { grid-template-columns: minmax(0, 1fr); }
  .product-game-hero .offer-order { border-radius: 0 0 15px 15px; }
  body.product-game-theme::before { background-size: auto, auto 760px; }
}
@media (max-width: 540px) {
  .product-game-hero .offer-copy { padding: 22px 18px; }
  body.product-game-theme .g-game-section,
  body.product-game-theme .product-info { padding: 20px 16px; }
}
@media (max-width: 760px) {
  body.product-game-theme.game-theme-ambient { --game-art-opacity: .045; }
  body.product-game-theme.game-theme-ambient::before { background-size: auto 760px; }
  body.game-theme-ambient .g-game-hero .g-cur-art { opacity: .12; }
}

/* g2u-luxury-roblox-ambient-v2: same intensity as other themed games. */
body.product-game-theme--roblox.game-theme-ambient {
  --game-art-opacity: .16;
  --product-panel-from: rgba(10, 29, 51, .74);
  --product-panel-to: rgba(8, 23, 42, .82);
}
body.product-game-theme--roblox.game-theme-ambient::before {
  background-image: var(--product-hero-art);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: var(--game-art-opacity);
  -webkit-mask-image: linear-gradient(#000 60%, transparent 100%);
  mask-image: linear-gradient(#000 60%, transparent 100%);
}
@media (max-width: 760px) {
  body.product-game-theme--roblox.game-theme-ambient { --game-art-opacity: .045; }
  body.product-game-theme--roblox.game-theme-ambient::before { background-size: auto 760px; }
}