/* Payslashes hero slider — ultra-minimal + strong fail-safe */

/* Tighten hero spacing (top/bottom) */
.ps-hero-section{
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}
@media (max-width: 576px){
  .ps-hero-section{ margin-top: 6px !important; margin-bottom: 12px !important; }
}
/* Reduce gap between hero and next section */
.ps-after-hero{ margin-top: 0 !important; }

/* Compact responsive height */
.promo-slider.ps-home-slider{ 
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

/* Container height: compact but readable */
.promo-slider.ps-home-slider .promo-slide,
.promo-slider.ps-home-slider .ps-banner-wrap,
.promo-slider.ps-home-slider .ps-banner-media{
  display:block;
  width:100%;
  height: clamp(180px, 22vw, 360px);
}

/* Image fits perfectly */
.promo-slider.ps-home-slider .ps-banner-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Dots inside banner */
.promo-slider.ps-home-slider .u-slick__pagination{
  bottom: 10px !important;
  display:flex !important;
  justify-content:center;
  gap: 8px;
}
.promo-slider.ps-home-slider .u-slick__pagination li{
  width:8px; height:8px;
}
.promo-slider.ps-home-slider .u-slick__pagination li span{
  width:8px; height:8px;
  border-radius:999px;
}

/* Subtle arrows (desktop only) */
@media (max-width: 767px){
  .promo-slider.ps-home-slider .u-slick__arrow{ display:none !important; }
}

/* ===== Skeleton shimmer (safe) =====
   By default (no JS), images are visible and skeleton hidden.
   When JS is running, it adds html.banner-js and then we can show skeleton until loaded. */
.ps-banner-skeleton{ display:none; }

html.banner-js .ps-banner-skeleton{ 
  display:block;
  position:absolute;
  inset:0;
  background: #f2f3f5;
  overflow:hidden;
}
html.banner-js .ps-banner-skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  animation: psShimmer 1.2s infinite;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
}
@keyframes psShimmer{
  100%{ transform: translateX(100%); }
}

/* While loading (only when JS is active) */
html.banner-js .promo-slide{ position:relative; }
html.banner-js .promo-slide.is-loading .ps-banner-img{ opacity: 0; }
html.banner-js .promo-slide.is-loaded .ps-banner-img{ opacity: 1; transition: opacity .25s ease; }
html.banner-js .promo-slide.is-loaded .ps-banner-skeleton{ display:none; }