/* KEDAICDID FIX8 — mobile promo text overlap fix.
   Keep the original FIX5/FIX7 banner size and visual proportions.
   Only prevent the two content groups from shrinking into each other. */
@media (max-width: 768px) {
  .promo-banner-container .slide-banner {
    /* Preserve v16 size/aspect ratio; only make the vertical layout deterministic. */
    justify-content: center !important;
    gap: 4px !important;
  }

  .promo-banner-container .sb-left,
  .promo-banner-container .sb-right {
    /* The old column layout allowed both blocks to flex-shrink, which could make
       the game name and crossed-out price occupy the same vertical pixels. */
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .promo-banner-container .sb-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .promo-banner-container .sb-left .sb-tag {
    line-height: 1.15 !important;
    margin: 0 0 3px !important;
  }

  .promo-banner-container .sb-left h3 {
    line-height: 1.15 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  .promo-banner-container .sb-left p {
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .promo-banner-container .sb-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1px !important;
  }

  .promo-banner-container .sb-price-strike {
    line-height: 1.15 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  .promo-banner-container .sb-price-real {
    line-height: 1.05 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  .promo-banner-container .btn-sb {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* Very narrow phones: keep the same card size, but shave only internal spacing
   so every text row remains separated. */
@media (max-width: 390px) {
  .promo-banner-container .slide-banner { gap: 2px !important; }
  .promo-banner-container .sb-left .sb-tag { margin-bottom: 2px !important; }
  .promo-banner-container .sb-left h3 { margin-bottom: 1px !important; }
  .promo-banner-container .sb-price-strike { margin-bottom: 1px !important; }
  .promo-banner-container .sb-price-real { margin-bottom: 4px !important; }
}