/* BEARPLAY_R19_UI_TUNE_20261002
   Browser catalog: ~20-25% smaller product cards on desktop,
   preorder countdown above decorative frame,
   home page: no PlayStation promo banner strip under the hero. */

/* Home: only the long hero + catalog grid. Region/PlayStation banners stay in /catalog/. */
body.bpx-h2 #banner-shell {
  display: none !important;
}

/* Countdown must stay completely visible above leaves/frame decorations. */
.bpx-exact-card .bpx-skin-cover {
  position: relative;
}
.bpx-exact-card .release-countdown.bpx-skin-release {
  position: absolute !important;
  z-index: 2147483000 !important;
  right: 10px !important;
  bottom: 16px !important;
  max-width: calc(100% - 20px) !important;
  width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  clip: auto !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: clamp(10px, 0.72vw, 13px) !important;
  line-height: 1.15 !important;
}

/* Desktop/browser only. Mini App / phones keep the existing sizing. */
@media (hover: hover) and (pointer: fine) and (min-width: 1180px) {
  #sections .cards.cards-carousel {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: minmax(0, auto) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }
  #sections .cards.cards-carousel > .bpx-exact-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
  #sections .cards.cards-full {
    display: grid !important;
    gap: 12px !important;
  }
  #sections .cards.cards-full > .bpx-exact-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1180px) and (max-width: 1439px) {
  #sections .cards.cards-carousel { grid-auto-columns: calc((100% - 60px) / 6) !important; }
  #sections .cards.cards-full { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1440px) and (max-width: 1679px) {
  #sections .cards.cards-carousel { grid-auto-columns: calc((100% - 72px) / 7) !important; }
  #sections .cards.cards-full { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1680px) {
  #sections .cards.cards-carousel { grid-auto-columns: calc((100% - 84px) / 8) !important; }
  #sections .cards.cards-full { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
}
/* BEARPLAY_R19_1_CATALOG_COMPACT_BADGE_BANNER_20261002
   Compact desktop catalog, preorder badge above the decorative frame,
   and 5px top gap for catalog banners. */

.bpx-banner-shell {
  margin-top: 5px !important;
}

.bpx-exact-card {
  position: relative !important;
}

.bpx-exact-card .bpx-skin-cover {
  position: relative !important;
  overflow: visible !important;
}

.bpx-exact-card .release-countdown.bpx-skin-release {
  position: absolute !important;
  z-index: 2147483647 !important;
  right: 8px !important;
  bottom: -10px !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  clip: auto !important;
  transform: none !important;
  pointer-events: none !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* No hover/pointer condition: desktop Windows devices with touch support
   must receive the compact catalog layout too. */
@media (min-width: 1180px) {
  #sections .cards.cards-carousel {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: minmax(0, auto) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
  }

  #sections .cards.cards-carousel > .bpx-exact-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
  }

  #sections .cards.cards-full {
    display: grid !important;
    gap: 12px !important;
  }

  #sections .cards.cards-full > .bpx-exact-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (min-width: 1180px) and (max-width: 1439px) {
  #sections .cards.cards-carousel {
    grid-auto-columns: calc((100% - 60px) / 6) !important;
  }
  #sections .cards.cards-full {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) and (max-width: 1679px) {
  #sections .cards.cards-carousel {
    grid-auto-columns: calc((100% - 72px) / 7) !important;
  }
  #sections .cards.cards-full {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1680px) {
  #sections .cards.cards-carousel {
    grid-auto-columns: calc((100% - 84px) / 8) !important;
  }
  #sections .cards.cards-full {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}