/* ==========================================================================
   Product reviews - hosts the SHOPLINE Product Review app block plus a set
   of starter reviews rendered by theme.js from a JSON setting.
   ========================================================================== */

.pdp-reviews__inner { display: grid; gap: 10px; }
.pdp-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pdp-reviews__score { display: inline-flex; align-items: baseline; gap: 6px; }

.pdp-reviews__apps > * { max-width: 100%; }
.pdp-reviews__apps iframe { width: 100% !important; }

/* once a review app is mounted, the starter cards are redundant */
.pdp-reviews__apps:not(:empty) ~ .pdp-reviews__demo { display: none; }

/* review widgets often ship their own card chrome - soften it to match */
.pdp-reviews__apps img { border-radius: var(--radius); }

/* ---- starter review cards (photo + quote), tidy 1-col stack ---- */
.pdp-reviews__demo { display: grid; gap: 8px; }
.pdp-reviews__demo-grid { display: grid; gap: 10px; }
.pdp-reviews__demo-note {
  font-size: 0.59375rem; color: var(--c-ink-soft); margin: 4px 0 0; font-weight: 300; line-height: 1.6;
}
.pdp-rv {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 12px; background: rgba(255,255,255,.5); margin: 0;
}
.pdp-rv__ph {
  width: 64px; height: 80px; border-radius: calc(var(--radius) + 1px); overflow: hidden; background: var(--c-surface);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; font-weight: 600;
}
.pdp-rv__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.pdp-rv__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-rv__badge {
  font-size: 0.53125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-brass);
  border: 1px solid var(--c-brass); border-radius: 999px; padding: 2px 8px; opacity: .9;
}
.pdp-rv__quote { font-size: 0.71875rem; line-height: 1.7; color: var(--c-ink-soft); margin: 8px 0 6px; font-weight: 300; }
.pdp-rv__by { font-size: 0.5625rem; color: var(--c-ink-soft); letter-spacing: 0.12em; text-transform: uppercase; }

@media (min-width: 750px) {
  .pdp-reviews__demo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pdp-rv { grid-template-columns: 84px 1fr; padding: 16px; }
  .pdp-rv__ph { width: 84px; height: 104px; }
}