/* ═══════════════════════════════════════════════════════════════
   Trust Proof — real, merchant-entered customer quotes. Deliberately
   no cards, no borders/shadows: quiet editorial typography, matching
   the BrandBenefits section's language. Container/heading mirror
   CareRoutes/BrandBenefits for consistency. 2+ quotes render as a
   horizontal, scroll-snap carousel (no autoplay); a single quote
   renders as a plain centered block — see below.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section {
  padding: var(--space-2xl) 0;
}

/* Root cause of the oversized gap above this section on the product
   page: unlike BrandBenefits (the section directly above this one on
   SCALPUS), which drops to var(--space-lg)/40px padding below 1024px
   and only uses var(--space-2xl)/96px at >=1024px, .trust-proof-section
   above had NO mobile/tablet override at all — it used the 96px
   desktop figure unconditionally, including on phones. Combined with
   BrandBenefits' own 40px bottom padding at the same widths, that was
   40+96=136px of unbroken vertical whitespace between the two
   sections. Overriding padding-top here brings the visible gap down to
   BrandBenefits' 40px + this 8px = ~48px, matching BrandBenefits' own
   <1024px/>=1024px split so the fix holds across the same mobile+
   tablet range, not just one hand-picked width.

   Same root cause on the BOTTOM side, for whatever follows this
   section (e.g. CompleteYourRoutine — "Bakım Rutinini Tamamla"):
   padding-bottom was left at the full 96px desktop figure on mobile/
   tablet too, and CompleteYourRoutine's own top padding ALSO drops to
   var(--space-lg)/40px below 1024px — so the two sides were never
   symmetric and the combined gap (96 + 40 = 136px, plus the mobile-
   only dots' own 24px margin-top above it) read as an oversized dead
   zone on a narrow screen. padding-bottom now gets the identical 8px
   reduction, by the same reasoning as padding-top above.

   >=1024px (desktop) is completely unaffected — this query never
   applies there, so the base 96px top/bottom padding above still
   stands (matching BrandBenefits' and CompleteYourRoutine's own
   >=1024px figures, an already-shipped, accepted desktop convention
   between these quiet editorial sections). */
@media (max-width: 1023px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* display:flex + gap (not the heading's own margin-bottom) now owns the
   space between the heading and everything below it. Two margin-based
   passes (64px, then a reduced-then-restored 64px again) were reported
   as still reading nearly touching on mobile despite the CSS computing
   a plain, uncollapsed 64px margin-bottom by every check available
   here (no other rule touches .trust-proof-section__heading or
   .trust-proof-section__carousel/__single/__body, see styles below;
   no intervening element; no global h2 reset) — so rather than trust a
   margin value this environment cannot visually confirm a second time,
   the gap is now owned by this flex container's own `gap`, which
   cannot collapse with a child's margin the way two block margins can.
   .trust-proof-section__heading's margin is reset to 0 below so gap is
   the ONLY source of the space, not an addition on top of it. */
.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 64px desktop — same figure as the previous margin-based fix, so >=768px keeps the same visual spacing */
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__container {
    gap: 32px; /* requested mobile figure, explicitly smaller than desktop's 64px */
  }
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__heading {
  font-family: var(--font-display);
  font-weight: 400;
  /* Site-wide typography pass: "marka bölümü başlığı" hedefi mobil
     24px / masaüstü 28px — was var(--text-h2) (28px floor / 44px cap). */
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__heading {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* Wraps the carousel (+ its mobile dots) OR the single-quote block —
   see index.tsx for why this exists: it keeps .trust-proof-section__
   container's gap above to exactly ONE gap (heading -> this group),
   instead of also inserting a second one between the carousel and the
   dots below it, which already has its own deliberate margin-top. No
   layout properties of its own needed: as a column-flex child it
   simply stretches to full width, same as the carousel/single elements
   did as plain block children before this change. */
.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__body {
  min-width: 0;
}

/* ─── Carousel (2+ items) — horizontal, scroll-snap, no autoplay ──
   Mobile: 1 card + a peek of the next. Tablet: ~1.8 cards. Desktop:
   ~3 cards + a peek of the 4th. Swipe/drag is the native overflow-x
   touch scroll — no custom pointer-drag JS needed. Nav arrows appear
   from tablet width up (mirrors ProductSliderTrack's convention);
   on mobile, swipe is the only — and sufficient — input. */

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__carousel {
  position: relative;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track {
  display: flex;
  /* stretch, not flex-start — every card in a row now matches the
     tallest sibling's height, so TrustProofItem's own height:100% +
     margin-top:auto on its author block can align ratings/authors at
     a common bottom edge across a row, instead of each card sitting
     at its own natural (quote-length-dependent) height. */
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--space-md); /* 24px on mobile — see .trust-proof-section__item
    below for why: this must stay SMALLER than the 3rem reserved there, or
    the peek disappears again. Restored to var(--space-lg) at >=768px. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track::-webkit-scrollbar {
  display: none;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track {
    scroll-behavior: auto;
  }
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__item {
  scroll-snap-align: start;
  /* Reserves 3rem (48px) so the next card's edge visibly peeks past the
     24px gap above (48 - 24 = 24px of real peek). Previously reserved
     only 2rem (32px) while the gap was 40px (var(--space-lg)) — the gap
     alone consumed the whole reserved margin, leaving 0px of the next
     card visible (verified: item 2's left edge landed past the track's
     own right edge). That made the carousel look like a single static
     block even though native overflow-x scrolling worked underneath —
     no visual cue meant no one tried to swipe. */
  flex: 0 0 calc(100% - 3rem);
  /* A flex item's default min-width:auto lets long, unbreakable content
     pull it wider than this fixed basis; 0 removes that pull so the
     basis is always what actually renders (same class of fix already
     needed for BrandBenefits' grid columns and the SingleHero intro). */
  min-width: 0;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track {
    gap: var(--space-lg); /* 40px — restored from the mobile-only 24px above */
  }

  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__item {
    flex: 0 0 calc((100% - var(--space-md)) / 1.8);
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__track {
    gap: var(--space-xl);
  }

  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__item {
    flex: 0 0 calc((100% - var(--space-xl) * 2) / 3.15);
  }
}

/* ─── Nav arrows ──────────────────────────────────────────────── */

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__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_qCH2669e0b .trust-proof-section__arrow[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow--prev {
  left: -20px;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow--next {
  right: -20px;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow {
    transition: background-color 200ms ease, border-color 200ms ease,
      color 200ms ease, opacity 200ms ease;
  }
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Pagination dots (mobile only) ──────────────────────────────
   Arrows take over the same "which card / jump to card" role from
   768px up (see .trust-proof-section__arrow above), so dots are
   hidden there — no new visible element on tablet/desktop, no
   regression risk. Deliberately plain: small filled circles, no
   card/shadow/border styling, matching the section's quiet editorial
   language. */

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dots {
    display: none;
  }
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-border);
  cursor: pointer;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dot.is-active {
  background-color: var(--color-accent);
  width: 8px;
  height: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dot {
    transition: background-color 200ms ease, width 200ms ease, height 200ms ease;
  }
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Single item — no carousel machinery needed ─────────────── */

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__single {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.cc_zRr7AL87AP_qCH2669e0b .trust-proof-section__single .trust-proof-item {
  margin: 0 auto;
  text-align: left;
}