/* Store reviews: CusRev's shop-review grid, in the shop's design tokens. The markup is CusRev's
   (templates/reviews-grid.php); only its look is ours. The floating badge is the shop's own
   (snippets/dpl-reviews-badge.php, component-dpl-reviews-badge.css). Used on the home page (sections/dpl-reviews-grid.php) and the reviews page. */

.dpl-reviews { padding: 40px 0 64px; }
.dpl-reviews--home { padding: 20px 0 40px; }
.dpl-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dpl-reviews__heading { margin: 0 0 16px; font-size: 22px; font-weight: 500; color: #0D0D0D; }
h1.dpl-reviews__heading { font-size: 28px; }
.dpl-reviews__all { font-size: 14px; color: #0D0D0D; text-underline-offset: 3px; }
.dpl-reviews__statement { margin: -4px 0 24px; max-width: 720px; font-size: 14px; line-height: 1.55; color: #6B6B6B; }
.dpl-reviews__notice { margin: 0 0 32px; padding: 16px 20px; border-radius: 20px; background: #F7F7F7; border: 1px solid #E5E5E5; color: #0D0D0D; }

/* Dawn hides every empty div (base.css, `div:empty`), and CusRev's masonry columns start empty: its
   script then finds no column to place a card in and the grid stays blank. Its own narrow-screen
   rules for the second and third column are repeated below with the same specificity. */
.cr-reviews-grid-inner .cr-reviews-grid-col:empty { display: block; }
@media only screen and (max-width: 800px) { .cr-reviews-grid-inner .cr-reviews-grid-col3:empty { display: none; } }
@media only screen and (max-width: 550px) { .cr-reviews-grid-inner .cr-reviews-grid-col2:empty { display: none; } }

/* The grid. */
.dpl-reviews .cr-reviews-grid { border: 0 !important; background: transparent; padding: 0; margin: 0; font-family: inherit; }
.dpl-reviews .cr-reviews-grid-inner { gap: 16px; margin: 0; }
.dpl-reviews .cr-reviews-grid-col { gap: 16px; display: flex; flex-direction: column; }

/* The summary: average, stars, count and the bars. */
.dpl-reviews .cr-summaryBox-wrap { background: #F7F7F7 !important; border: 1px solid #E5E5E5; border-radius: 20px; margin: 0 0 16px; padding: 24px; }
.dpl-reviews .cr-average-rating span { font-family: var(--font-heading-family, inherit); font-weight: 500; color: #0D0D0D; }
.dpl-reviews .cr-total-rating-count { color: #6B6B6B; font-size: 13px; }
.dpl-reviews .cr-histogram-rating-label, .dpl-reviews .cr-histogram-rating-value { color: #6B6B6B; font-size: 13px; }
.dpl-reviews .ivole-meter { border-radius: 20px; background: #FFFFFF; border: 1px solid #E5E5E5; box-shadow: none; }
.dpl-reviews .ivole-meter .ivole-meter-bar { border-radius: 20px; background: #FF9A01 !important; box-shadow: none; }
.dpl-reviews .cr-summary-separator { display: none; }

/* Stars: the accent colour, everywhere CusRev draws them. */
.dpl-reviews .crstar-rating-svg .cr-rating-icon-frnt,
.dpl-reviews .cr-histogram-rating-icon { color: #FF9A01 !important; }
.dpl-reviews .crstar-rating-svg .cr-rating-icon-base { color: #E5E5E5; }

/* A review card. */
.dpl-reviews .cr-review-card { border: 1px solid #E5E5E5 !important; background: #F7F7F7 !important; border-radius: 20px; margin: 0 !important; box-shadow: none; }
.dpl-reviews .cr-review-card-content { padding: 24px; }
.dpl-reviews .cr-review-card .top-row { border: 0 !important; padding: 0 0 12px; }
.dpl-reviews .cr-review-card .review-thumbnail img.cr-avatar { border-radius: 50%; }
.dpl-reviews .cr-review-card .reviewer-name { font-weight: 500; font-size: 15px; color: #0D0D0D; }
.dpl-reviews .cr-review-card .reviewer-verified { font-size: 12px; color: #6B6B6B; }
.dpl-reviews .cr-review-card .rating-row { padding: 0 0 8px; }
.dpl-reviews .cr-review-card .rating-label { color: #6B6B6B; font-size: 13px; }
.dpl-reviews .cr-review-card .review-content,
.dpl-reviews .cr-review-card .review-content p { font-size: 15px; line-height: 1.55; color: #0D0D0D; }
.dpl-reviews .cr-review-card .datetime { color: #6B6B6B; font-size: 12px; }
.dpl-reviews .cr-review-card .cr-grid-read-more a,
.dpl-reviews .cr-review-card .cr-grid-read-less a { color: #0D0D0D; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

/* Photos: a smaller, rounded crop with room under it before the reviewer's name (owner, 2026-09-25). */
.dpl-reviews .cr-review-card .image-row { margin: 0 0 24px; border-radius: 20px; overflow: hidden; }
.dpl-reviews .cr-review-card .image-row .image-row-img {
  width: 100%; height: 200px; object-fit: cover; border-radius: 20px;
}
.dpl-reviews .cr-review-card .image-row .media-row-count,
.dpl-reviews .cr-review-card .image-row .image-row-count {
  height: 40px; font-size: 13px; border-radius: 0 0 20px 20px; background: rgba(13, 13, 13, 0.55);
}
@media screen and (max-width: 767px) {
  .dpl-reviews .cr-review-card .image-row .image-row-img { height: 180px; }
}

/* The label on a rewarded review, and CusRev's own "show more reviews" button. */
.dpl-reviews .cr-incentivized-row,
.dpl-reviews .cr-incentivized-badge { color: #6B6B6B; font-size: 12px; }
.dpl-reviews .cr-show-more-button,
.dpl-reviews .cr-show-more-reviews-prd { min-height: 44px; border-radius: 20px; border: 1px solid #0D0D0D; background: transparent; color: #0D0D0D; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 24px; }

/* The review form. */
.dpl-reviews__panel { max-width: 720px; margin: 0 0 48px; padding: 32px; border: 1px solid #E5E5E5; border-radius: 20px; background: #F7F7F7; }
.dpl-review-form fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.dpl-review-form legend, .dpl-review-form label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: #0D0D0D; }
.dpl-review-form__row { margin: 0 0 20px; }
.dpl-review-form textarea, .dpl-review-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid #E5E5E5; border-radius: 20px; background: #FFFFFF; font: inherit; font-size: 15px; }
.dpl-review-form input[type="text"] { min-height: 44px; }
.dpl-review-form__error { margin: 6px 0 0; color: #B3261E; font-size: 13px; }
/* The stars: five radios, right to left, so "this one and every one before it" lights with CSS alone. */
.dpl-review-form__star-row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.dpl-review-form__star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dpl-review-form__star-row label { margin: 0; font-size: 34px; line-height: 1; color: #E5E5E5; cursor: pointer; }
.dpl-review-form__star-row input:checked ~ label,
.dpl-review-form__star-row label:hover,
.dpl-review-form__star-row label:hover ~ label { color: #FF9A01; }
.dpl-review-form__star-row input:focus-visible + label { outline: 2px solid #0D0D0D; outline-offset: 2px; border-radius: 4px; }

@media screen and (max-width: 767px) {
  .dpl-reviews { padding: 24px 0 40px; }
  h1.dpl-reviews__heading { font-size: 22px; }
  .dpl-reviews__panel { padding: 20px; }
}