/* ===========================
   HTML-автобанери слайдера головної (Розпродаж / Новинки / Хіти)
   Розміри в cqw — банер масштабується разом зі слайдером.
   =========================== */
.auto-banner {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: 3cqw;
  padding: 0 5cqw;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
}

.auto-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .09;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, #fff 0 2px, transparent 3px);
  background-size: 48px 48px, 64px 64px;
}

.auto-banner--new { background: linear-gradient(120deg, #4f7cf0 0%, #667eea 55%, #7a5fd0 100%); }
.auto-banner--top { background: linear-gradient(120deg, #5b45b5 0%, #764ba2 70%, #8a3f9a 100%); }

/* ---- текст ---- */
.ab-text {
  position: relative;
  display: grid;
  gap: 1.6cqw;
  min-width: 0;
}

.ab-chip {
  justify-self: start;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: .5cqw 1.4cqw;
  font-size: 1.15cqw;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ab-title {
  font-size: 3.6cqw;
  line-height: 1.08;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
  color: #fff;
}

.ab-accent { color: #ffe066; }

.ab-sub {
  font-size: 1.45cqw;
  opacity: .9;
  margin: 0;
}

.ab-cta {
  justify-self: start;
  background: #fff;
  color: #764ba2;
  font-weight: 700;
  font-size: 1.35cqw;
  padding: 1.1cqw 2.2cqw;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ab-cta:hover { color: #764ba2; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.ab-cta:focus-visible { outline: 3px solid #ffe066; outline-offset: 3px; }

/* ---- картки товарів ---- */
.ab-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
  min-width: 0;
}

.ab-card {
  position: relative;
  display: grid;
  gap: .7cqw;
  background: #fff;
  color: #1f2133;
  border-radius: 1.3cqw;
  padding: 1.1cqw;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 10, 60, .22);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width: 0;
}

.ab-card:hover { color: #1f2133; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 10, 60, .32); }
.ab-card:focus-visible { outline: 3px solid #ffe066; outline-offset: 2px; }

.ab-photo {
  display: block;
  aspect-ratio: 1;
  border-radius: .9cqw;
  background: #fff;
  overflow: hidden;
}

.ab-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* фото товару не розтягуємо і не обрізаємо */
}

.ab-badge {
  position: absolute;
  top: 1.6cqw;
  left: 1.6cqw;
  z-index: 1;
  background: #e5484d;
  color: #fff;
  font-weight: 800;
  font-size: 1.15cqw;
  padding: .3cqw .8cqw;
  border-radius: .6cqw;
}

.ab-badge--new { background: #2fb58c; }
.ab-badge--rank { background: #ffb020; color: #3a2a00; }

.ab-name {
  font-size: 1.05cqw;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ab-prices {
  display: flex;
  align-items: baseline;
  gap: .8cqw;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.ab-old { color: #8a8ea6; text-decoration: line-through; font-size: 1.05cqw; }
.ab-price { color: #4f5bd5; font-weight: 800; font-size: 1.7cqw; }

/* ---- телефон: текст зверху, картки рядком знизу (слайдер 16:10, див. home.css) ---- */
@media (max-width: 575px) {
  .auto-banner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 2.5cqw;
    padding: 3.5cqw 3.5cqw 6cqw;
  }

  .ab-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2cqw;
  }

  .ab-chip { font-size: 2.6cqw; padding: .8cqw 2.4cqw; }
  .ab-title { font-size: 5.6cqw; }
  .ab-title-after,
  .ab-sub,
  .ab-cta { display: none; }

  .ab-cards { gap: 2.2cqw; align-self: stretch; }
  .ab-card { border-radius: 2.6cqw; padding: 1.6cqw; gap: 1cqw; align-content: start; }
  .ab-photo { border-radius: 1.8cqw; }
  .ab-badge { top: 2.6cqw; left: 2.6cqw; font-size: 2.6cqw; padding: .4cqw 1.4cqw; border-radius: 1.2cqw; }
  .ab-name { font-size: 2.6cqw; height: 1.3em; -webkit-line-clamp: 1; }
  .ab-old { font-size: 2.5cqw; }
  .ab-price { font-size: 3.4cqw; }

  /* точки слайдера опускаємо, щоб не налазили на ціни карток */
  .hero-slider .slider-dots { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-card, .ab-cta { transition: none; }
  .ab-card:hover, .ab-cta:hover { transform: none; }
}