.hero-slider {
  position: relative;
  min-width: 0;
  height: 390px;
  border-radius: 18px;
  overflow: hidden;
  background: #ffdc00;
}

.hero-track {position: relative;width: 100%;height: 100%}
.hero-slider .hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  padding: 38px 42px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition: opacity .48s ease, transform .48s ease, visibility .48s;
}
.hero-slider .hero-slide.active {opacity: 1;visibility: visible;transform: translateX(0);z-index: 2}
.hero-slide.grocery {background: radial-gradient(circle at 65% 50%,#fff372 0 18%,transparent 46%),linear-gradient(115deg,#ffe300,#ffd000)}
.hero-slide.drinks {background: radial-gradient(circle at 72% 45%,#cbfbff 0 12%,transparent 42%),linear-gradient(120deg,#90edf4,#d9fbff)}
.hero-slide.care {background: radial-gradient(circle at 72% 42%,#fff 0 10%,transparent 40%),linear-gradient(120deg,#ffd8e0,#fff0dc)}
.hero-slide .hero-copy {position: relative;z-index: 3}
.hero-slide .hero-art {height: 100%;min-width: 0}
.hero-slide .hero-basket {width: min(440px,90%);height: 290px;object-fit: contain;filter: drop-shadow(0 18px 18px rgba(0,0,0,.18))}
.hero-slide.drinks .hero-basket,.hero-slide.care .hero-basket {border-radius: 24px;object-fit: cover;max-width: 420px;height: 285px}
.hero-slide .eyebrow {display: inline-flex;background: rgba(255,255,255,.55);border-radius: 30px;padding: 7px 11px;margin-bottom: 13px;font-size: 11px;font-weight: 850}
.hero-slide h1 {font-size: 45px;line-height: 1.06;margin: 0 0 14px;letter-spacing: -1.2px}
.hero-slide p {font-size: 15px;margin: 0 0 23px}
.hero-control {position: absolute;top: 50%;z-index: 7;transform: translateY(-50%);width: 39px;height: 39px;border: 1px solid rgba(0,0,0,.1);border-radius: 50%;background: rgba(255,255,255,.88);box-shadow: 0 5px 16px #0002;font-size: 24px;cursor: pointer}
.hero-control.prev {left: 12px}.hero-control.next {right: 12px}
.hero-dots {position: absolute;z-index: 7;left: 50%;bottom: 15px;transform: translateX(-50%);display: flex;gap: 7px}
.hero-dot {width: 9px;height: 9px;border: 0;border-radius: 50%;background: rgba(0,0,0,.28);padding: 0;cursor: pointer;transition: width .2s,background .2s}
.hero-dot.active {width: 25px;border-radius: 10px;background: #111}

@media (max-width: 900px) {
  .hero-slider {height: 480px}
  .hero-slider .hero-slide {grid-template-columns: 1fr;padding: 34px 28px;align-items: start}
  .hero-slide .hero-art {position: absolute;right: 0;bottom: 0;width: 62%;height: 52%;opacity: .94}
  .hero-slide .hero-basket,.hero-slide.drinks .hero-basket,.hero-slide.care .hero-basket {width: 100%;height: 100%;border-radius: 20px 0 0 0}
  .hero-slide h1 {font-size: 42px}
}

@media (max-width: 600px) {
  .hero-slider {height: 460px;border-radius: 16px}
  .hero-slider .hero-slide {padding: 28px 20px}
  .hero-slide h1 {font-size: 35px}
  .hero-slide p {font-size: 14px;max-width: 80%}
  .hero-slide .hero-art {width: 82%;height: 44%}
  .hero-control {width: 34px;height: 34px;font-size: 20px}
}