/* ═══════════════════════════════════════════════════════════════
   Mixed Product Reviews — homepage social-proof carousel, one card
   per real customer quote, each tied to the specific product it's
   about (small product identity strip inside the card — see
   MixedProductReviewItem). Independent from TrustProofSection: no
   shared files, own class namespace, own config entry. The mobile
   swipe+peek+dots and desktop N-cards+peek mechanics reuse the same
   PROVEN native-scroll technique already shipped in TrustProofSection
   (no custom drag JS needed — overflow-x IS the touch/trackpad drag),
   reimplemented independently rather than imported.
   No autoplay anywhere in this file.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews {
  padding: 0;
}

/* No vertical padding at any breakpoint — external spacing above/below
   this section is intentionally left to the surrounding sections' own
   padding/margins. Kept as an explicit override (rather than relying
   solely on the base rule) so each breakpoint's padding stays
   independently adjustable without touching the others. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews {
    padding-bottom: 0;
  }
}

/* Mobile-only: explicit 0 override, same reasoning as the desktop
   override above. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Mobil son düzeltme: bölüm başlığı/açıklaması 375-380px'te hâlâ
     büyük görünüyordu — hedef 22px başlık / 13px açıklama. Masaüstü/
     tablet (>=768px) var(--text-section-heading) ve var(--text-body)
     ile değişmeden kalıyor. */
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__heading {
    font-size: 22px;
    line-height: 1.2;
  }

  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__description {
    font-size: 13px;
    line-height: 1.5;
  }
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__header {
  max-width: 640px;
  margin: 0 0 var(--space-xl);
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-section-display);
  font-size: var(--text-section-heading);
  line-height: 1.15;
  color: var(--mpr-heading-color, var(--color-text-primary));
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ─── Carousel (2+ reviews) — horizontal, scroll-snap, no autoplay ─
   Mobile: 1 card + ~24px peek of the next (40px reserved - 16px gap).
   Tablet: ~1.8 cards. Desktop: ~3 full cards + a small, deliberate
   peek of the 4th — same divisor TrustProofSection already validated
   for "3 cards + controlled peek". Swipe/drag on touch and trackpad is
   the native overflow-x scroll; no pointer-drag JS is needed. */

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__carousel {
  position: relative;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track {
  display: flex;
  /* stretch: every visible card fills the row's natural height (set by
     the tallest card in the row, including an off-screen one via the
     nowrap flex cross-size rule) instead of leaving blank track space
     below shorter cards. .mixed-product-review-item already has
     height:100% + flex-grow on its quote to absorb the extra height —
     this was the component's original behavior before an earlier,
     unrelated round changed it to flex-start. */
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track::-webkit-scrollbar {
  display: none;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track {
    scroll-behavior: auto;
    transition: none;
  }
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__item {
  scroll-snap-align: start;
  /* Reserves 40px so the next card's edge visibly peeks past the 16px
     gap above (40 - 16 = 24px of real peek, per spec). */
  flex: 0 0 calc(100% - 40px);
  /* A flex item's default min-width:auto lets long, unbreakable content
     pull it wider than this fixed basis; 0 removes that pull. */
  min-width: 0;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track {
    gap: var(--space-lg);
  }

  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__item {
    flex: 0 0 calc((100% - var(--space-lg)) / 1.8);
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__track {
    gap: var(--space-lg);
  }

  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__item {
    /* No peek reserve: exactly 3 full cards fill the track width, split
       evenly across the 2 gaps between them — the 4th card (if any)
       stays fully offscreen until the user scrolls/navigates. */
    flex: 0 0 calc((100% - var(--space-lg) * 2) / 3);
  }
}

/* ─── Nav arrows — tablet/desktop only, mobile relies on swipe ──── */

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow--prev {
  left: -20px;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow--next {
  right: -20px;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow {
    transition: background-color 200ms ease, border-color 200ms ease,
      color 200ms ease, opacity 200ms ease;
  }
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Pagination dots (mobile only) ──────────────────────────────
   Arrows take over the same role from 768px up, so dots are hidden
   there. Plain small filled circles — no card/shadow styling. */

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dots {
    display: none;
  }
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-border);
  cursor: pointer;
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dot.is-active {
  background-color: var(--color-accent);
  width: 8px;
  height: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dot {
    transition: background-color 200ms ease, width 200ms ease, height 200ms ease;
  }
}

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Single review — no carousel machinery needed ───────────────
   Kept at a contained, readable width instead of stretching the lone
   card across the full 1400px container. */

.cc_zRr7AL87AP_qyLkxC4zFa .mixed-product-reviews__single {
  max-width: 34rem;
  margin: 0 auto;
}