/* ═══════════════════════════════════════════════════════════════
   Mixed Product Review Item — a single customer quote tied to a
   product. Deliberately NOT a marketplace review "box": separation
   between cards in the parent carousel comes mostly from whitespace
   and typography; the only border is a single hairline, no shadow,
   no filled background. Hierarchy top to bottom: rating (small) →
   quote (full text, never truncated) → customer name (+ verified
   badge, only when true) → a small, quiet product identity strip.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Mobile-only: card width already shrinks a lot at small viewports —
   the desktop-scale 40px padding on all 4 sides ate too much of the
   content area. Tablet/desktop keep var(--space-lg) untouched. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item {
    padding: var(--space-md);
  }
}

/* ─── Rating — small, quiet stars, never the focal point ────────── */

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__rating {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__star {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1px;
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__star.is-filled {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

/* ─── Quote — full length on tablet/desktop. Mobile: clamped to 4
   lines by default (--quote--clamped, only while collapsed — see
   index.tsx), with a "Daha fazla oku" toggle shown only when the text
   actually overflows that clamp. ──── */

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__quote {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  flex-grow: 1;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__quote--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Tighter gap before the toggle button — mobile only; the button's
     own margin-bottom below carries the remaining space before the
     customer block, so this never stacks into a large empty gap under
     the (possibly clamped) text. Desktop/tablet keep the original
     --space-md untouched, since the toggle never renders there. */
  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__quote {
    margin-bottom: var(--space-xs);
  }
}

/* Mobil son düzeltme: yorum metni/müşteri adı/doğrulama etiketi 375-
   380px'te hâlâ büyük görünüyordu. 4 satırlık "Daha fazla oku" clamp'i
   (-webkit-line-clamp:4, yukarıda) ve taşma ölçümü (index.tsx) bu yeni
   boyutlarla otomatik çalışır — kod değişikliği gerekmedi. Masaüstü/
   tablet (>=768px) var(--text-body)/var(--text-small)/var(--text-label)
   ile değişmeden kalıyor. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__quote {
    font-size: 14px;
    line-height: 21px;
  }

  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__customer-name {
    font-size: 12px;
  }

  .cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__verified {
    font-size: 11px;
  }
}

/* Sits directly under the (possibly clamped) quote, mobile-only in
   practice — isOverflowing (index.tsx) is only ever true once the
   clamped box above actually overflows, which only happens under the
   <768px clamp CSS. */
.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__toggle {
  display: inline-block;
  margin: 0 0 var(--space-sm);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-accent-dark, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__toggle:hover {
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Customer + verified purchase ───────────────────────────────
   verifiedPurchaseLabel/icon render ONLY when verifiedPurchase is
   true — no verified-purchase UI at all otherwise. */

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__customer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0 0 var(--space-md);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__customer-name {
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-label);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__verified-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ─── Product identity — small, quiet, never competes with the
   quote/customer above it. A hairline top rule + top margin instead
   of a boxed sub-card keeps it feeling like a caption, not a second
   card inside the card. */

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
}

.cc_zRr7AL87AP_jkwPiAXUA9 a.mixed-product-review-item__product-link:hover .mixed-product-review-item__product-name {
  color: var(--color-accent-dark);
}

/* Fixed, small thumbnail box — object-fit:contain preserves the
   product's own aspect ratio (no crop, no stretch, never a circular
   "avatar" treatment). ~44px per spec. */
.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product-media {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.cc_zRr7AL87AP_jkwPiAXUA9 .mixed-product-review-item__product-name {
  font-family: var(--font-label);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  transition: color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_jkwPiAXUA9 a.mixed-product-review-item__product-link .mixed-product-review-item__product-name {
    transition: none;
  }
}