/* 10.20.17 — consistent, wider hero banners with balanced height */
.hero-section.container-xl{
  width:100%!important;
  max-width:1600px!important;
  padding-inline:32px!important;
}
.hero-section .hero-banner{
  width:100%!important;
  height:300px!important;
  min-height:300px!important;
}
.hero-section .ss-live-hero-slide{
  width:100%!important;
  height:100%!important;
}
.hero-section .ss-live-hero-slide .hero-grid{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:38px clamp(58px,6vw,100px)!important;
  align-items:center!important;
  gap:40px!important;
}
.hero-section .ss-live-hero-slide:not(.is-loyalty-banner) .hero-grid{
  grid-template-columns:minmax(0,1fr)!important;
}
.hero-section .ss-live-hero-slide .hero-text{
  width:min(100%,720px)!important;
  padding:0!important;
  position:relative;
  z-index:2;
}
.hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)!important;
}
.hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid:after{
  position:relative!important;
  inset:auto!important;
  grid-column:1;
  grid-row:1;
  justify-self:center;
  width:min(100%,430px)!important;
  height:190px!important;
  transform:rotate(-4deg)!important;
}
html[dir="rtl"] .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-text{grid-column:2;grid-row:1}
html[dir="ltr"] .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-text{grid-column:1;grid-row:1}
html[dir="ltr"] .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid:after{grid-column:2}

@media(max-width:1100px){
  .hero-section.container-xl{padding-inline:20px!important}
  .hero-section .hero-banner{height:285px!important;min-height:285px!important}
  .hero-section .ss-live-hero-slide .hero-grid{padding:32px 58px!important;gap:24px!important}
  .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.65fr)!important}
  .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid:after{height:170px!important;font-size:27px!important}
}

@media(max-width:760px){
  .hero-section.container-xl{padding-inline:10px!important}
  .hero-section .hero-banner{height:235px!important;min-height:235px!important;padding:0!important}
  .hero-section .ss-live-hero-slide .hero-grid,
  .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    padding:22px 42px 34px!important;
    gap:10px!important;
  }
  .hero-section .ss-live-hero-slide .hero-text,
  html[dir="rtl"] .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-text,
  html[dir="ltr"] .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-text{
    grid-column:1!important;
    width:100%!important;
    text-align:center!important;
  }
  .hero-section .ss-live-hero-slide.is-loyalty-banner .hero-grid:after{display:none!important}
  .hero-section .hero-title{font-size:clamp(22px,7vw,30px)!important}
  .hero-section .hero-subtitle{font-size:13px!important}
}