/* Smart Shopper Malta - homepage hero must be banners only. */
body.home .ssm-home-banner-hero,
body.home main .ssm-home-banner-hero,
html body.home .entry-content .ssm-home-banner-hero {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  width: min(1440px, calc(100% - 48px)) !important;
  margin: 34px auto 52px !important;
  padding: 0 !important;
  aspect-ratio: 1920 / 760 !important;
  min-height: 360px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(212, 175, 55, 0.34) !important;
  background: #05070b !important;
  box-shadow: 0 26px 70px rgba(4, 8, 16, 0.28) !important;
}

body.home .ssm-home-banner-hero > img,
body.home main .ssm-home-banner-hero > img,
html body.home .entry-content .ssm-home-banner-hero > img {
  display: none !important;
  visibility: hidden !important;
}

body.home .ssm-home-banner-hero::before,
body.home main .ssm-home-banner-hero::before,
html body.home .entry-content .ssm-home-banner-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
  background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/smartshopper-home-hero-1920x760.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  animation: ssmHomeBannerLayerCycleV3 48s infinite step-end !important;
  transform: translateZ(0) scale(1.001) !important;
}

body.home .ssm-home-banner-hero::after,
body.home main .ssm-home-banner-hero::after,
html body.home .entry-content .ssm-home-banner-hero::after {
  content: "" !important;
  position: absolute !important;
  right: 46px !important;
  bottom: 28px !important;
  z-index: 2 !important;
  width: 174px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #d4af37 0 18%, rgba(255,255,255,.55) 18% 100%) !important;
  box-shadow: 0 0 20px rgba(212,175,55,.2) !important;
}

@keyframes ssmHomeBannerLayerCycleV3 {
  0%, 16.65% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/smartshopper-home-hero-1920x760.png'); }
  16.66%, 33.32% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/lian-li.webp'); }
  33.33%, 49.99% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/thermalright-psu.webp'); }
  50%, 66.65% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/gigabyte.webp'); }
  66.66%, 83.32% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/jonsbo-z20.webp'); }
  83.33%, 100% { background-image: url('https://smartshoppermalta.com/wp-content/uploads/2026/07/corsair.webp'); }
}

@media (max-width: 767px) {
  body.home .ssm-home-banner-hero,
  body.home main .ssm-home-banner-hero,
  html body.home .entry-content .ssm-home-banner-hero {
    width: calc(100% - 24px) !important;
    margin: 18px auto 24px !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 190px !important;
    max-height: 240px !important;
    border-radius: 18px !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
  }

  body.home .ssm-home-banner-hero::before,
  body.home main .ssm-home-banner-hero::before,
  html body.home .entry-content .ssm-home-banner-hero::before {
    background-size: cover !important;
    background-position: center center !important;
  }

  body.home .ssm-home-banner-hero::after,
  body.home main .ssm-home-banner-hero::after,
  html body.home .entry-content .ssm-home-banner-hero::after {
    right: 18px !important;
    bottom: 14px !important;
    width: 86px !important;
    height: 4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .ssm-home-banner-hero::before,
  body.home main .ssm-home-banner-hero::before,
  html body.home .entry-content .ssm-home-banner-hero::before {
    animation: none !important;
  }
}
