/* ===== Banner style add-on (separate file) =====
   Applies ONLY to the image banner slider (.hero-slider) on the home and products pages.
   The gradient placeholder banner and every other section are untouched.
   - Phones: full width edge-to-edge (same as before), shorter frame
     (5:2, recommended picture 1600x640), rounded bottom corners + soft shadow.
   - The picture is resized to the frame (object-fit: fill): nothing is cropped.
   - Gentle light sweep every few seconds (disabled for "reduce motion" users).
   Remove the <link> line in index.html to undo. */

/* --- Card look: rounded, shadow, thin white rim --- */
.home-hero-banner .hero-slider {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  box-shadow:
    0 14px 30px -12px rgba(124, 58, 237, 0.55),
    0 6px 14px -6px rgba(236, 72, 153, 0.35);
}
.home-hero-banner .hero-track { border-radius: inherit; }

/* --- Shorter frame on phones (5:2); picture resized to fit it --- */
.home-hero-banner .hero-slide { aspect-ratio: 5 / 2; }
.home-hero-banner .hero-slide .home-hero-banner-img {
  width: 100%; height: 100%;
  object-fit: fill;
  border-radius: 0;
}

/* --- Light sweep to draw the eye --- */
.home-hero-banner .hero-slider::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: bsa-sweep 5.5s ease-in-out 1.2s infinite;
}
@keyframes bsa-sweep {
  0% { transform: translateX(-120%); }
  22%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-banner .hero-slider::after { display: none; }
}

/* --- Clearer slide dots --- */
.home-hero-banner .hero-dots { bottom: 6px; z-index: 3; }
.home-hero-banner .hero-dot { width: 7px; height: 7px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.home-hero-banner .hero-dot.active { width: 20px; background: #EC4899; box-shadow: 0 0 0 1.5px #fff; }

/* --- Desktop: keep its existing proportions, just the card look --- */
@media (min-width: 960px) {
  .home-hero-banner .hero-slide { aspect-ratio: 2 / 1; }
  .home-hero-banner .hero-slider { border-radius: var(--radius-lg, 20px); }
}