/* Product page reviews: summary, approved reviews, and the "Write a review" form
   (reuses .page-form fields from forms.css). Continues the product block's cream
   surface; a sand hairline separates it from the product above. Tokens only. */
@layer components {
  .product-reviews {
    background-color: var(--cream-100);
    border-top: 1px solid var(--sand-300);
    padding-block: var(--section-pad);
  }

  .product-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    text-align: center;
    color: var(--ca-body);
  }

  /* Read-only stars (summary + each review). On the light surface gold fails non-text
     contrast, so earned stars are cocoa (6.9:1) and unearned ones are muted outlines
     (owner decision after the QA loop). Dark surfaces keep their gold stars. */
  .review-stars {
    display: inline-flex;
    gap: var(--space-1);
    color: var(--text-on-light-muted);

    & > span {
      display: inline-flex;
    }

    & > span:not(.is-on) svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5px;
    }

    & .is-on {
      color: var(--cocoa-600);
    }
  }

  /* Centred rows of ~360px cards: one or two reviews sit in the middle like the
     rest of this centred section, more wrap onto further rows. */
  .product-reviews__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    max-width: var(--container);
    margin: var(--space-6) auto 0;
    padding: 0;
    list-style: none;
  }

  .review {
    flex: 0 1 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--sand-300);
    background-color: var(--cream-50);
  }

  .review__body {
    margin: 0;
    color: var(--text-on-light-body);
    overflow-wrap: anywhere;
  }

  .review__meta {
    margin: auto 0 0;
    color: var(--text-on-light-muted);
  }

  /* ---- Form ------------------------------------------------------------- */
  .review-form {
    padding-top: var(--space-6);
    border-top: 1px solid var(--sand-300);
  }

  .review-form__heading {
    margin: 0 0 var(--space-2);
    color: var(--text-on-light);
  }

  .review-form__rating {
    margin: 0;
    padding: 0;
    border: none;
  }

  .review-form__stars {
    display: flex;
    gap: var(--space-1);
  }

  /* Stars are labels for visually-hidden radios: clicking, arrow keys and screen
     readers all work natively; reviews.js only paints .is-on up to the choice. */
  .review-form__star {
    display: inline-flex;
    padding: var(--space-1);
    color: var(--text-on-light-muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease);

    &:not(.is-on) svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5px;
    }

    &.is-on {
      color: var(--cocoa-600);
    }
  }

  .review-form__stars input:focus-visible + .review-form__star {
    outline: 2px solid var(--ca-focus);
    outline-offset: 2px;
  }

  .review-form__hint {
    margin: var(--space-1) 0 0;
    color: var(--text-on-light-muted);
  }

  /* An error replaces the hint under its field, and reads as an error, not more help text. */
  .review-form .field:has([aria-invalid="true"]) .review-form__hint {
    display: none;
  }

  .review-form .field__error:not(:empty) {
    font-weight: 700;
  }

  .review-form .btn:disabled {
    opacity: 0.6;
    cursor: progress;
  }
}