/* Woo Photo Reviews v4 — 6 per row desktop / 2 per row mobile */

:root {
  --wpr-star:   #f5a623;
  --wpr-off:    #e0e0e0;
  --wpr-text:   #1a1a1a;
  --wpr-muted:  #999;
  --wpr-border: #ebebeb;
  --wpr-bg:     #f8f8f8;
  --wpr-green:  #27ae60;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.wpr-reviews-wrap {
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 48px 0 0 !important;
  padding: 0 0 60px !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.wpr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wpr-border);
}
.wpr-section-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wpr-text) !important;
  border: none !important;
}
.wpr-header-stats { display: flex; align-items: center; gap: 7px; }
.wpr-big-score { font-size: 1.5rem; font-weight: 800; color: var(--wpr-star); line-height: 1; }
.wpr-stats-count { color: var(--wpr-muted); font-size: .82rem; }

/* ── Stars (generic) ─────────────────────────────────────────── */
.wpr-stars { display: inline-flex !important; gap: 1px !important; line-height: 1 !important; }
.wpr-star        { font-size: 13px !important; color: var(--wpr-off) !important; }
.wpr-star.full   { color: var(--wpr-star) !important; }
.wpr-star.half   { position: relative !important; color: var(--wpr-off) !important; }
.wpr-star.half::before {
  content: '★'; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; color: var(--wpr-star);
}

/* ── Summary stars (product page, above price) ───────────────── */
.wpr-summary-stars {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}
.wpr-summary-stars .wpr-star { font-size: 17px !important; }
.wpr-avg-num    { font-weight: 700; color: var(--wpr-text); font-size: .9rem; }
.wpr-review-count { color: var(--wpr-muted); font-size: .83rem; }

/* ════════════════════════════════════════════════════════════
   THE GRID  —  6 columns on desktop, 2 on mobile
   ════════════════════════════════════════════════════════════ */
.wpr-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;  /* 6 per ROW */
  gap: 12px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .wpr-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 700px) {
  .wpr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ── Card ────────────────────────────────────────────────────── */
.wpr-card {
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--wpr-border) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .2s, transform .2s !important;
  box-sizing: border-box !important;
  width: 100% !important;       /* fills its grid cell */
  float: none !important;
}
.wpr-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09) !important;
  transform: translateY(-2px) !important;
}

/* Square image, fills card width */
.wpr-card-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: var(--wpr-bg) !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.wpr-card-img img.wpr-prod-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
  float: none !important;
  cursor: zoom-in !important;
  transition: transform .3s !important;
}
.wpr-card:hover .wpr-card-img img.wpr-prod-img { transform: scale(1.06) !important; }
.wpr-card-img-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  opacity: .2 !important;
}

/* Card text area */
.wpr-card-body {
  padding: 9px 10px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}
.wpr-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}
.wpr-avatar {
  width: 26px !important; height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--wpr-border) !important;
  float: none !important; margin: 0 !important;
}
.wpr-avatar-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e8e8e8 !important;
  color: #888 !important;
}
.wpr-avatar-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}
.wpr-avatar-letter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
}
.wpr-card-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.wpr-author-name {
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--wpr-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.wpr-verified {
  font-size: .62rem !important;
  color: #888 !important;
  font-weight: 600 !important;
}
.wpr-card-stars .wpr-star { font-size: 11px !important; }
.wpr-date  { font-size: .66rem !important; color: var(--wpr-muted) !important; }
.wpr-card-text {
  font-size: .75rem !important;
  color: #444 !important;
  line-height: 1.5 !important;
  margin: 2px 0 0 !important;
  word-break: break-word !important;
}

/* Empty placeholder */
.wpr-empty {
  grid-column: 1 / -1 !important;
  color: var(--wpr-muted) !important;
  text-align: center !important;
  padding: 32px 0 !important;
}

/* ── Lightbox ────────────────────────────────────────────────── */
.wpr-lightbox {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.88) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  cursor: zoom-out !important;
}
.wpr-lightbox img {
  max-width: 92vw !important; max-height: 92vh !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  display: block !important;
}

/* ── Form ────────────────────────────────────────────────────── */
.wpr-form-wrap {
  background: var(--wpr-bg) !important;
  border: 1px solid var(--wpr-border) !important;
  border-radius: 10px !important;
  padding: 22px !important;
  max-width: 600px !important;
  box-sizing: border-box !important;
}
.wpr-form-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  color: var(--wpr-text) !important;
}
.wpr-verified-badge {
  display: inline-block !important;
  background: #eafaf1 !important;
  color: var(--wpr-green) !important;
  font-size: .73rem !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
}
.wpr-form-row { margin-bottom: 11px !important; }
.wpr-form-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 11px !important;
}
@media (max-width: 540px) {
  .wpr-form-two-col { grid-template-columns: 1fr !important; }
}
.wpr-field > label:first-child {
  display: block !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--wpr-text) !important;
  margin-bottom: 4px !important;
}
.wpr-field .req { color: #e74c3c !important; }
.wpr-opt { font-weight: 400 !important; color: var(--wpr-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
.wpr-field input[type="text"],
.wpr-field input[type="email"],
.wpr-field textarea {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1.5px solid var(--wpr-border) !important;
  border-radius: 7px !important;
  font-size: .86rem !important;
  color: var(--wpr-text) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  outline: none !important;
}
.wpr-field input:focus,
.wpr-field textarea:focus { border-color: #1a1a1a !important; }
.wpr-star-picker { display: flex !important; gap: 3px !important; }
.wpr-pick-star {
  font-size: 26px !important;
  color: var(--wpr-off) !important;
  cursor: pointer !important;
  transition: color .1s, transform .1s !important;
  line-height: 1 !important;
  user-select: none !important;
}
.wpr-pick-star.active,
.wpr-pick-star:hover { color: var(--wpr-star) !important; transform: scale(1.2) !important; }
.wpr-upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fff !important;
  border: 1.5px dashed #ccc !important;
  border-radius: 7px !important;
  padding: 7px 12px !important;
  font-size: .82rem !important;
  color: var(--wpr-muted) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
}
.wpr-upload-btn:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.wpr-preview img {
  max-width: 68px !important; max-height: 68px !important;
  object-fit: cover !important;
  border-radius: 5px !important;
  border: 1px solid var(--wpr-border) !important;
  margin-top: 6px !important;
  display: block !important;
}
.wpr-submit-btn {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 10px 26px !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: .03em !important;
  transition: background .15s !important;
}
.wpr-submit-btn:hover    { background: #333 !important; }
.wpr-submit-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.wpr-message { margin-top: 9px !important; font-size: .86rem !important; font-weight: 600 !important; }
.wpr-message.success { color: var(--wpr-green) !important; }
.wpr-message.error   { color: #e74c3c !important; }

/* ── Form toggle button ─────────────────────────────────────── */
.wpr-form-toggle-wrap {
  margin: 20px 0 0;
  display: flex;
  justify-content: center;
}
button.wpr-toggle-btn {
  background: #efefef !important;
  background-color: #efefef !important;
  color: #111111 !important;
  border: none !important;
  outline: none !important;
  padding: 12px 28px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  -webkit-border-radius: 2px !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .15s !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
button.wpr-toggle-btn:hover {
  background: #e2e2e2 !important;
  background-color: #e2e2e2 !important;
  color: #111111 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.13) !important;
  transform: translateY(-1px) !important;
}
button.wpr-toggle-btn:active {
  background: #d8d8d8 !important;
  background-color: #d8d8d8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
  transform: translateY(0) !important;
}

/* ── Collapsible form ───────────────────────────────────────── */
.wpr-form-wrap {
  overflow: hidden;
  transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease;
}
.wpr-form-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  pointer-events: none;
}
.wpr-form-open {
  max-height: 1200px !important;
  opacity: 1 !important;
  margin-top: 24px !important;
  pointer-events: auto;
}

/* ── Date field ─────────────────────────────────────────────── */
#wpr-review-date {
  padding: 8px 10px;
  border: 1px solid var(--wpr-border);
  border-radius: 6px;
  font-size: .9rem;
  color: var(--wpr-text);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* ── Loop / category stars ──────────────────────────────────── */
.wpr-loop-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
  line-height: 1;
}
.wpr-loop-stars .wpr-star {
  font-size: 13px !important;
}
.wpr-loop-count {
  color: var(--wpr-muted);
  font-size: .78rem;
}

/* ── Remove any pencil icon injected by theme on toggle button ── */
button.wpr-toggle-btn::before,
button.wpr-toggle-btn::after {
  display: none !important;
  content: none !important;
}
button.wpr-toggle-btn img,
button.wpr-toggle-btn svg:not(.wpr-icon),
button.wpr-toggle-btn i {
  display: none !important;
}