/*
 * Product page reviews (variant B1): the review carousel (catalog
 * ProductReviewCarousel) and the rating line under the product title (catalog
 * ProductRatingLine), which only ever render together.
 *
 * The carousel chrome is the homepage reviews carousel's (`.reviews-carousel*`
 * in main.css: the arrows on the cards' sides, the right-edge peek fade and
 * the dot pagination); this sheet adds the heading row, the compact card, the
 * full-review dialog, the admins' preview badge and the rating line. Every text is 16px at
 * every width (the site's type floor, pinned in px — mobile.css shrinks the
 * root on phones), with two exceptions: the admins' badge is a 14px chip,
 * and the review cards' author-and-date line takes the 14px of the colour
 * pill it replaced (the client's, 2026-10-02). The card title stays 16px on
 * phones too: that is the site's card-title size there.
 */

/* ── Rating line under the product title ─────────────────────────────────
   "4.8 ★★★★★ 68 reviews ⌄" — the figure, the block heading's stars at the
   same size, then the review count as the link down to the block (card #628,
   ADR-0099), with no divider and on one line at every width (client,
   2026-10-03). The client's spacing (#628, round 5): a tighter 6px between
   the figure and the stars, a wider 16px between the stars and the count, at
   every width — margins on the stars, so the row itself has no column gap.
   It sits in the heading (a 4px
   flex column under the title's -7px optical margin), so 10px seats its stars
   ~10px under the title's last line (desktop) or the SKU chip (phones), as in
   the B1 mockups; on phones it travels with the heading above the gallery,
   where its stars and gaps shrink to keep the one line (see Phones). */
.pdp-rating-line {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  color: #131313;
}

.pdp-rating-line__stars {
  margin: 0 16px 0 6px;
}

.pdp-rating-line__stars .star-rating__star,
.pdp-rating-line__stars .star-rating__star svg {
  width: 20px;
  height: 20px;
}

.pdp-rating-line__value {
  font-weight: 600;
}

.pdp-rating-line__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e106a4;
  text-decoration: none;
  border-radius: 4px;
}

.pdp-rating-line__link:hover,
.pdp-rating-line__link:focus {
  color: #e106a4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pdp-rating-line__link:focus {
  outline: none;
}

.pdp-rating-line__link:focus-visible {
  outline: 2px solid #e106a4;
  outline-offset: 2px;
}

.pdp-rating-line__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* ── The block ───────────────────────────────────────────────────────────── */
.pdp-reviews {
  margin-top: 40px;
  /* The review count link (and a plain #reviews jump) stops the block clear of the
     sticky header: once the 40px top row has scrolled away (main.css
     `.header`, top: -40px) the desktop bar shows 61px (measured); below
     1170px the mobile header's height is measured by mobile.js. 16px of air
     either way. */
  scroll-margin-top: calc(var(--mobile-header-h, 0px) + 16px);
}

@media (min-width: 1170px) {
  .pdp-reviews {
    scroll-margin-top: 77px;
  }
}

/* ── Heading row: "Customer Reviews  4.8 ★★★★★ 68 reviews" ─────────────── */
.pdp-reviews__head {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.pdp-reviews__title.info-block__title {
  margin: 0;
}

/* The heading takes the focus from the rating line's count (tabindex="-1"): a ring
   for keyboard readers only. */
.pdp-reviews__title:focus {
  outline: none;
}

.pdp-reviews__title:focus-visible {
  outline: 2px solid #e106a4;
  outline-offset: 4px;
  border-radius: 4px;
}

/* The rating beside the heading: plain text, no backdrop, no link — the
   figure (600), the exact stars and the count (400), spaced as the line under
   the title (6px, then 16px). On phones it may wrap under the heading. */
.pdp-reviews__rating {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 22px;
  color: #131313;
  white-space: nowrap;
}

.pdp-reviews__rating-value {
  font-weight: 600;
}

.pdp-reviews__rating-count {
  font-weight: 400;
}

.pdp-reviews__rating .pdp-reviews__stars {
  margin: 0 16px 0 6px;
}

.pdp-reviews__stars .star-rating__star,
.pdp-reviews__stars .star-rating__star svg {
  width: 20px;
  height: 20px;
}

/* The arrows are the homepage carousel's (main.css `.reviews-carousel
   .swiper-button-*`: 40px white buttons half over the cards' outer edges,
   desktop only — swipe and the dashes carry phones and tablets). Being real
   buttons here, they shed the browser's button chrome and show a keyboard
   ring. */
.pdp-reviews__arrow {
  padding: 0;
  border: 0;
  font: inherit;
}

.pdp-reviews__arrow:focus-visible {
  outline: 2px solid #e106a4;
  outline-offset: 2px;
}

/* Too few cards to loop (the carousel stops at its ends): a spent arrow fades. */
.pdp-reviews__arrow.swiper-button-disabled,
.pdp-reviews__arrow:disabled {
  color: #b8b8c2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  cursor: default;
}

/* Every card already fits: no arrows to offer. */
.pdp-reviews__arrow.swiper-button-lock {
  display: none;
}

/* ── Admins' preview badge (only while the reviews are switched off) ───── */
.pdp-reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #8a5200;
  background: #fff4de;
  border: 1px dashed #e0a43b;
  border-radius: 16px;
}

.pdp-reviews__badge svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* ── Carousel chrome, adjusted ───────────────────────────────────────────── */
.pdp-reviews .reviews-carousel .swiper-pagination {
  /* Flush under the slider as before: the round dots' 24px boxes (card #636,
     .carousel-dots in main.css, which also shares the 68 reviews' stops out
     among the row's ten dots — ADR-0139) reach 9px below the line the old dash sat on; the margin hands
     them back. */
  margin-bottom: -9px;
}

@media screen and (max-width: 1169px) {
  .pdp-reviews .reviews-carousel .swiper-pagination {
    margin-bottom: -10px;
  }
}


/* ── Compact card ────────────────────────────────────────────────────────── */
.pdp-review {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-radius: 16px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pdp-review:hover {
  border-color: #dcdce6;
  box-shadow: 0 4px 14px rgba(19, 19, 19, 0.08);
}

/* The stars stand a little further from the title than the title from the
   text (client, 2026-10-02): the card's gap plus 6px — 16px above the title
   and 10px below it, 14px and 8px on phones. */
.pdp-review__rate {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pdp-review__title {
  --fade-lines: 2;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #131313;
  text-align: left;
  overflow-wrap: anywhere;
}

/* The excerpt keeps the review's own line breaks (one per written line, see
   ReviewExcerpt): a first line written without a full stop ("Perfect dark
   brown") must not run into the next sentence. The three-line fade clamp is
   height-based, so a break only moves where the third line ends. */
.pdp-review__body {
  --fade-lines: 3;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #131313;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The author on the left, the date on the right — in the card and in the
   dialog alike. Client, 2026-10-02: "smaller font, no bold — like here",
   pointing at the colour pill's label (since removed: no colour, no product
   name at any width). So the line takes that label's type, 14px regular on a
   18px line, at every width: it joins the 14px pill/chip exception to the
   site's 16px floor; the excerpt and the dialog text stay 16px. When a card
   cannot hold both, the date wraps under the name instead of running into
   it (phone cards always stack them, see below), and a name wider than the
   card breaks inside its own line. */
.pdp-review__by {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: auto 0 0;
  padding-top: 2px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: #131313;
}

.pdp-review__author {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pdp-review__date {
  white-space: nowrap;
}

/* The whole card is the button that opens the full review: a transparent
   layer over it takes the click and the keyboard focus. */
.pdp-review__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}

.pdp-review__open:focus {
  outline: none;
}

.pdp-review__open:focus-visible {
  outline: 2px solid #e106a4;
  outline-offset: -2px;
}

/* ── Full-review dialog ──────────────────────────────────────────────────── */
html.pdp-review-dialog-open {
  overflow: hidden;
}

.pdp-review-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: #131313;
  box-shadow: 0 24px 64px rgba(19, 19, 19, 0.25);
  overflow: hidden;
}

.pdp-review-dialog::backdrop {
  background: rgba(19, 19, 19, 0.5);
}

.pdp-review-dialog__panel {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: 6px;
  max-height: calc(100vh - 48px);
  box-sizing: border-box;
  padding: 28px 28px 24px;
  overflow-y: auto;
}

.pdp-review-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f4f5f7;
  color: #131313;
  cursor: pointer;
}

.pdp-review-dialog__close:hover {
  background: #ebecf0;
}

.pdp-review-dialog__close:focus {
  outline: none;
}

.pdp-review-dialog__close:focus-visible {
  outline: 2px solid #e106a4;
  outline-offset: 2px;
}

.pdp-review-dialog__close svg {
  width: 22px;
  height: 22px;
}

/* In the dialog the title sits apart from the stars and close to its text
   (client, 2026-10-02): 20px above it, 6px below it — on the panel's 6px gap. */
.pdp-review-dialog__rate {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 48px;
}

.pdp-review-dialog__title {
  margin: 0;
  padding-right: 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #131313;
  overflow-wrap: anywhere;
}

/* The text as written: one paragraph per line break of the review. */
.pdp-review-dialog__body {
  font-size: 16px;
  line-height: 1.6;
  color: #131313;
  overflow-wrap: anywhere;
}

.pdp-review-dialog__body p {
  margin: 0 0 10px;
}

.pdp-review-dialog__body p:last-child {
  margin-bottom: 0;
}

.pdp-review-dialog__by {
  margin: 12px 0 0;
  padding-top: 0;
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 799px) {
  /* 18px stars on phones; the text keeps its 16px and the 6px / 16px gaps
     stay as on desktop. */
  .pdp-rating-line__stars .star-rating__star,
  .pdp-rating-line__stars .star-rating__star svg {
    width: 18px;
    height: 18px;
  }

  .pdp-reviews {
    margin-top: 32px;
  }

  .pdp-reviews__head {
    gap: 8px 12px;
    margin-bottom: 12px;
  }

  .pdp-review {
    gap: 8px;
    padding: 14px;
  }

  /* The name and the date stack on every card: at this width most names push
     the date under them anyway, and the few short ones that would keep it on
     their row would leave neighbouring cards mismatched. The dialog keeps
     them on one row. */
  .pdp-review .pdp-review__by {
    flex-direction: column;
    align-items: flex-start;
  }

  .pdp-review-dialog__panel {
    padding: 20px 18px 18px;
  }

  .pdp-review-dialog__title {
    font-size: 18px;
  }
}

/* The narrowest phones (320px: 288px for the line) keep 16px stars and leave
   the link's chevron out, as before. */
@media (max-width: 359px) {
  .pdp-rating-line__stars .star-rating__star,
  .pdp-rating-line__stars .star-rating__star svg {
    width: 16px;
    height: 16px;
  }

  .pdp-rating-line__chevron {
    display: none;
  }
}