/* Region spacing polish
   Makes the region storefront feel less over-indented while keeping a safe,
   consistent design margin on mobile and desktop. */

.app.region-page {
  --region-side-padding: clamp(18px, 3.2vw, 24px);
  max-width: 680px;
  padding-left: var(--region-side-padding) !important;
  padding-right: var(--region-side-padding) !important;
}

.app.game-detail-page,
.app.cart-page {
  max-width: 680px;
  padding-left: clamp(16px, 3vw, 24px) !important;
  padding-right: clamp(16px, 3vw, 24px) !important;
}

.region-page .page-head,
.region-page .region-hero,
.region-page .shelf,
.region-page .subscriptions,
.region-page .section,
.region-page .cart-shell,
.game-detail-page .game-detail,
.cart-page .cart-shell {
  max-width: 100%;
}

.region-page .shelf-row,
.region-page .hero-track {
  scroll-padding-left: 0 !important;
}

/* Uniform vertical gap between all section types — overrides the 36px in region-layout-fix.css
   since this file loads later. Single-subscription (EA Play) keeps the same gap as shelves. */
.region-page .shelf,
.region-page .subscriptions,
.region-page .single-subscription,
.region-page .section {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}

/* Hide shelves that the parser hydrated but returned zero products.
   An empty shelf (just a floating header) creates a visual gap that looks
   much bigger than the gap between two shelves that have cards. */
.region-page .shelf.is-empty-parsed-shelf {
  display: none !important;
}

@media (max-width: 560px) {
  .app.region-page {
    --region-side-padding: 18px;
  }

  .app.game-detail-page,
  .app.cart-page {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 380px) {
  .app.region-page {
    --region-side-padding: 16px;
  }

  .app.game-detail-page,
  .app.cart-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}