/* V25 PaySlashes banner integrity: image-first, no crop, no stretch.
   The banners are staff/DB-controlled and may have varying aspect ratios.
   V24 animation, uploads, banner redirects and slider autoplay are untouched. */

/* Desktop/tablet: display the entire creative with a consistent polished frame.
   A narrower centred hero stops wide displays magnifying 585x290 artwork to 1600px. */
@media (min-width: 768px) {
  html body.page-home main#content > .ps-hero-section,
  html body main#content > .ps-hero-section {
    display: block;
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    margin: 14px auto 24px !important;
    padding: 0 !important;
  }
  html body.page-home .ps-hero-section .ps-hero-slider,
  html body .ps-hero-section .ps-hero-slider {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2.12 / 1 !important;
    border: 1px solid rgba(0,123,82,.19) !important;
    border-radius: 24px !important;
    background: linear-gradient(112deg,#e3f5ec 0%,#f3faf6 49%,#d9eee8 100%) !important;
    box-shadow: 0 17px 44px rgba(16,42,67,.12) !important;
  }
}

/* Keep source aspect ratio intact. Never crop text/CTA baked into banner photos.
   Slides and links stay full-height so click tracking and autoplay still work. */
html body .ps-hero-section .ps-hero-track,
html body .ps-hero-section .ps-hero-slide,
html body .ps-hero-section .ps-hero-slide > a {
  height:100% !important;
  min-height:0 !important;
}
html body .ps-hero-section .ps-hero-slide img {
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:0 !important;
  transform:none !important;
}

/* Smaller desktop / tablets get a calmer ratio without interfering with the
   dedicated mobile storefront (which has its own product banner). */
@media (min-width:768px) and (max-width:991.98px) {
  html body .ps-hero-section .ps-hero-slider {
    border-radius:18px !important;
    aspect-ratio:2.12 / 1 !important;
  }
}

/* Mobile V17 database-managed hero: preserve the original 585x290 frame,
   but fit the full uploaded artwork rather than trimming its edges. */
@media (max-width:767.98px) {
  html body.page-home .ps-exact-mobile-home .ps17-hero,
  html body .ps-exact-mobile-home .ps17-hero {
    background:linear-gradient(120deg,#e5f4ed,#f8fcfa 50%,#d9efe4) !important;
    border-radius:15px !important;
    overflow:hidden !important;
  }
  html body.page-home .ps-exact-mobile-home .ps17-hero .ps17-hero-slide img,
  html body .ps-exact-mobile-home .ps17-hero .ps17-hero-slide img {
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:0 !important;
    transform:none !important;
  }
}