/* ============================================================
   945 CLUB — REVIEWS (shared)
   Everything a review looks like, wherever it shows: the product page's
   review cards and photos, the photo lightbox, the navbar's all-reviews
   feed, the home page's reviews section and the Verified buyer mark. Loaded
   by index.html (after components.css, where these rules used to live) and
   by newhome.html, so both pages show reviews exactly the same way.
   ============================================================ */

.pv-review-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.pv-review-card:last-child { border-bottom: none; }
.pv-review-top {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.pv-review-date { font-size: 11px; color: var(--ink2); font-weight: 400; }
.pv-review-comment { color: var(--ink2); line-height: 1.4; }
.pv-review-photos {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pv-review-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--surface-secondary, #F3E6CC); /* a loading photo is paper, not a black box */
}
img.pv-review-photo[data-lightbox-src] { cursor: zoom-in; }

/* Review media lightbox (js/modules/mediaLightbox.js). Show/hide, centring
   and the backdrop's blur all come from the shared .modal-overlay/.open
   rules in css/modals.css -- only the darker background is overridden here,
   and by id rather than class so it wins regardless of stylesheet order. */
#mediaLightboxOverlay { background: rgba(0, 0, 0, 0.92); }
.media-lightbox-content {
  max-width: min(92vw, 900px);
  max-height: 88vh;
}
.media-lightbox-media {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 8px;
  display: block;
}
.media-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
}
.media-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* All-Reviews Navbar Modal (js/modules/allReviews.js) */
.all-review-card { padding-top: 14px; }
.all-review-product-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.all-review-product-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--grey);
  flex-shrink: 0;
}
.all-review-product-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.all-review-product-link:hover .all-review-product-name { color: var(--accent, var(--blue)); }

/* A review from someone who received the product (v49: anyone may review). */
.review-verified {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--burgundy, #761B2C);
}

/* ============================================================
   HOME — REVIEWS
   Two groups (proximity): the verdict on the left -- eyebrow, title, the
   average, its stars, the count, one way in -- and the evidence on the
   right, a rail of reviews. Every review card is the same cream sheet as a
   Featured Brands card (similarity), with its stars in burgundy like every
   other rating on the site.
   ============================================================ */
.home-reviews-sec {
  padding: 60px 0 64px;
  position: relative;
  overflow: hidden;
}
:root:not([data-theme="dark"]) .home-reviews-sec { background: var(--cream, #F2E0BE); }
/* A large indigo quotation mark behind the verdict, the section's one ornament. */
.home-reviews-sec::before {
  content: '\201C';
  position: absolute;
  top: -40px;
  left: max(12px, calc(50% - 700px));
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 320px;
  line-height: 1;
  color: var(--indigo, #383C8C);
  opacity: 0.07;
  pointer-events: none;
}

.home-reviews-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  position: relative;
}

.home-reviews-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy, #761B2C);
  margin: 0 0 10px;
}
.home-reviews-title {
  font-family: 'Playfair Display', 'Bodoni MT', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--indigo, #383C8C);
  margin: 0 0 24px;
}
.home-reviews-title em { font-style: italic; color: var(--burgundy, #761B2C); }

.home-reviews-score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.home-reviews-avg {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 58px;
  font-weight: 500;
  line-height: 1;
  color: var(--indigo, #383C8C);
}
.home-reviews-stars {
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--burgundy, #761B2C);
}
.home-reviews-count {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink2, #5E5870);
}
.home-reviews-all {
  border: 1px solid var(--indigo, #383C8C);
  background: transparent;
  color: var(--indigo, #383C8C);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.home-reviews-all:hover { background: var(--indigo, #383C8C); color: #F8EEDB; }

/* Asymmetric on purpose: each card keeps its own height (flex-start) and every second one
   sits lower, the way the home's drops and apparel grids stagger. */
.home-reviews-rail {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 14px 4px 26px;
  -webkit-overflow-scrolling: touch;
}
.home-reviews-rail::-webkit-scrollbar { display: none; }

.home-review-card {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFF9EE 0%, #F8EEDB 100%);
  border: 1px solid rgba(56, 60, 140, 0.1);
  box-shadow: 0 18px 34px -22px rgba(28, 29, 61, 0.45);
  color: #1C1D3D;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-review-card:nth-child(even) { margin-top: 44px; }
@media (hover: hover) {
  .home-review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 44px -22px rgba(28, 29, 61, 0.55);
  }
}
.home-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-review-stars { color: #761B2C; letter-spacing: 2px; font-size: 14px; }
.home-review-date { font-size: 11.5px; color: #5E5870; }
.home-review-body {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
  color: #1C1D3D;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-review-body::before { content: '\201C'; color: #761B2C; }
.home-review-body::after { content: '\201D'; color: #761B2C; }
.home-review-by { margin: 0; font-size: 13px; }
.home-review-name { font-weight: 700; color: #1C1D3D; }
.home-review-product {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(56, 60, 140, 0.12);
  text-decoration: none;
  color: #383C8C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.home-review-product img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: #FFF6E3;
  mix-blend-mode: multiply;
}
.home-review-product span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-review-go { transition: transform 0.3s ease; }
.home-review-product:hover .home-review-go { transform: translateX(4px); }

@media (max-width: 900px) {
  .home-reviews-sec { padding: 60px 0 64px; }
  .home-reviews-wrap { grid-template-columns: 1fr; gap: 22px; }
  .home-reviews-title { margin-bottom: 16px; }
  .home-reviews-score { margin-bottom: 16px; }
  .home-reviews-avg { font-size: 46px; }
  .home-reviews-rail { margin: 0 -16px; padding: 10px 16px 22px; scroll-padding: 0 16px; }
}