/* ============================================================================
   Common Core — Reviews component
   Merged from eden-core's inline-styled carousel and forgebury-core's
   class-based reviews.css (Phase 2, matrix row 7). Structural CSS only —
   colours/fonts resolve through the Crayon Box (--cc-*), never hardcoded.
   The quote-mark tint is derived from --cc-accent via color-mix() rather
   than requiring a dedicated new brand variable.
   ============================================================================ */

.cc-rev {
  font-family: var(--cc-font-body, inherit);
  margin: 2rem 0;
}

/* Track — horizontal scroll-snap row */
.cc-rev__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 16px;
}
.cc-rev__track::-webkit-scrollbar { display: none; }

/* Card */
.cc-rev__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.cc-rev__card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); }

/* Head — avatar + name + stars + source badge */
.cc-rev__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cc-rev__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cc-bg-subtle, #f5ecd8);
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-font-body, sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--cc-accent, #d4a24c);
  letter-spacing: 0.04em;
}
.cc-rev__id { flex: 1; min-width: 0; }
.cc-rev__name {
  display: block;
  font-family: var(--cc-font-body, inherit);
  font-weight: 600;
  font-size: 14px;
  color: var(--cc-text, #1a1a1a);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.cc-rev__name:hover { color: var(--cc-accent-hover, var(--cc-accent, #d4a24c)); }

/* Stars */
.cc-rev__stars {
  display: flex;
  gap: 2px;
  margin-top: 3px;
}
.cc-rev__star { fill: var(--cc-border-subtle, #ddd); }
.cc-rev__star.is-on { fill: var(--cc-accent, #d4a24c); }

/* Source badge — placement only; SVG colours handled per-source inside the SVG */
.cc-rev__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cc-rev__badge--google { color: var(--cc-text, #1a1a1a); }
.cc-rev__badge--amazon { color: #232F3E; } /* word "amazon" needs its brand colour */
.cc-rev__badge--onsite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #34A853; /* verified-green */
}

/* Quote body */
.cc-rev__text {
  font-family: var(--cc-font-body, inherit);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cc-text, #2a2a2a);
  margin: 0;
}
.cc-rev__quote-mark {
  color: color-mix(in srgb, var(--cc-accent, #d4a24c) 55%, transparent);
  font-size: 15px;
}

/* Photos */
.cc-rev__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cc-rev__photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}

/* Dot indicators */
.cc-rev__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}
.cc-rev__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cc-border-subtle, #ddd);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}
.cc-rev__dot.is-active {
  background: var(--cc-accent, #d4a24c);
  width: 18px;
  border-radius: 4px;
}

/* Mobile — wider cards so one fits per snap stop */
@media (max-width: 600px) {
  .cc-rev__card { flex: 0 0 85vw; }
}

/* ── PDP mini rating widget — standard part of the module, no sub-toggle ── */
.cc-rev-mini {
  margin: 8px 0 16px;
  font-family: var(--cc-font-body, inherit);
  cursor: pointer;
}
.cc-rev-mini__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cc-rev-mini__stars { display: flex; gap: 2px; }
.cc-rev-mini__stars svg { fill: var(--cc-border-subtle, #ddd); }
.cc-rev-mini__stars svg.is-on { fill: var(--cc-accent, #d4a24c); }
.cc-rev-mini__avg { font-size: 13px; font-weight: 600; color: var(--cc-text, #1a1a1a); }
.cc-rev-mini__count { font-size: 12px; color: var(--cc-text-muted, #6e6e73); }
.cc-rev-mini__excerpt {
  font-size: 13px;
  color: var(--cc-text, #444);
  line-height: 1.5;
  margin-bottom: 5px;
}
.cc-rev-mini__quote { color: var(--cc-accent, #d4a24c); font-size: 15px; }
.cc-rev-mini__byline { color: var(--cc-text-muted, #888); font-size: 12px; margin-left: 4px; }