/**
 * Third-party review panels — the "Real talk" band.
 *
 * Its own file rather than part of home.css because the band now renders in
 * two places: the homepage and the foot of every product-listing page.
 * home.css is a large, template-specific bundle deliberately kept off the rest
 * of the shop, and pulling it onto the archives to get this band would have
 * been a real regression on pages whose mobile PSI is already the worst on the
 * site. Same reasoning that gave reels.css its own file.
 *
 * Everything here is therefore self-contained: the band, its heading and its
 * panels depend on nothing from home.css, only on the design tokens in
 * style.css. Relies on design tokens and base rules from style.css.
 */

/* ================================================================
        The band
        ================================================================ */

.fragnatium-reviews-band {
  /* The alternating tint that gives the homepage its section rhythm; on an
     archive it does the same job of separating this from the grid above. */
  background: #faf7f3;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.fragnatium-reviews-band__wrap {
  max-width: var(--sg-container-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--sg-gutter, 1rem);
}

/* Heading — ported from the homepage section title so the band reads
   identically in both places without depending on home.css. */
.fragnatium-reviews-band__title {
  text-align: center;
  max-width: 639px;
  margin: 0 auto 1.25rem;
}

.fragnatium-reviews-band__eyebrow {
  display: block;
  text-align: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  color: var(--sg-muted);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.fragnatium-reviews-band__title h2 {
  font-family: var(--sg-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.fragnatium-reviews-band__title p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sg-slate);
  margin: 0;
}

.fragnatium-reviews-band__panels {
  display: grid;
  gap: 1.5rem;
}

/* ================================================================
        Google reviews — deliberately in Google's own visual language
        ================================================================

   This block breaks three of the site's design rules on purpose:
   Roboto instead of Inter/Playfair, an 8px radius where everything
   else is square, and a second chromatic palette on a page that
   otherwise allows one saffron accent.

   That is the point of the section. These reviews are the only claims
   on the homepage a shopper can independently verify, and the thing
   that tells them so is recognising Google at a glance — a Google
   review card restyled into house colours reads as our copy about
   ourselves, which is exactly what the band above it already is. The
   panel is bounded and clearly foreign so the borrowed credibility
   stops at its edges.

   Values are Google's published UI tokens: #202124 / #5f6368 text,
   #dadce0 borders, #1a73e8 blue, #fbbc04 stars, Material elevation-1. */

/*
 * Declared on the panel itself, not on the band around it. They lived on
 * `.fragnatium-home__google-reviews` — a section class that stopped existing
 * when the band wrapper moved into page-home.php, which left every one of
 * these undefined: the panel fell back to Inter, its card borders went to ink,
 * and its stars to the site's saffron. It still looked plausible, because
 * every fallback happens to be close to the real value. Keep them on the
 * element that carries `.fragnatium-google-reviews`.
 */
.fragnatium-google-reviews {
  /* Scoped, never global — nothing outside this panel gets Google's palette. */
  --fn-g-text: #202124;
  --fn-g-muted: #5f6368;
  --fn-g-border: #dadce0;
  --fn-g-blue: #1a73e8;
  --fn-g-star: #fbbc04;
  --fn-g-font: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.fragnatium-reviews-panel {
  font-family: var(--fn-g-font);
  color: var(--fn-g-text);
  background: #ffffff;
  border: 1px solid var(--fn-g-border);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Panel header --- */

.fragnatium-google-reviews__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--fn-g-border);
}

.fragnatium-google-reviews__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fragnatium-google-reviews__mark {
  display: inline-flex;
  line-height: 0;
}

.fragnatium-google-reviews__brand-name {
  font-family: var(--fn-g-font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-g-text);
}

.fragnatium-google-reviews__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fragnatium-google-reviews__score {
  font-family: var(--fn-g-font);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  color: #e37400; /* Google prints the numeral in amber, not in body ink. */
}

/* --- Review cards --- */

.fragnatium-google-reviews__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fragnatium-google-reviews__card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #ffffff;
  border: 1px solid var(--fn-g-border);
  border-radius: 8px;
  padding: 1rem;
  transition: box-shadow 0.2s ease;
}

.fragnatium-google-reviews__card:hover {
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.fragnatium-google-reviews__card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.fragnatium-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

/* The letter circle Google falls back to when an account has no photo. */
.fragnatium-review-avatar--letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--fn-g-font);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
}

.fragnatium-google-reviews__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.fragnatium-google-reviews__author {
  font-family: var(--fn-g-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-g-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragnatium-google-reviews__author a {
  color: inherit;
  text-decoration: none;
}

.fragnatium-google-reviews__author a:hover,
.fragnatium-google-reviews__author a:focus-visible {
  text-decoration: underline;
}

.fragnatium-google-reviews__when {
  font-family: var(--fn-g-font);
  font-size: 0.75rem;
  color: var(--fn-g-muted);
}

/* No separator dot here: the name is on its own line above it, Google-style. */
.fragnatium-google-reviews__when::before {
  content: none;
}

.fragnatium-google-reviews__card-mark {
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  line-height: 0;
  opacity: 0.9;
}

/*
 * Clamped, never trimmed. Google's terms forbid altering review text, so a
 * long review is shortened by the box rather than by rewriting what somebody
 * wrote — "Read on Google" below is where the rest of it lives.
 */
.fragnatium-google-reviews__quote {
  margin: 0;
  font-family: var(--fn-g-font);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fn-g-text);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fragnatium-google-reviews__translated {
  font-family: var(--fn-g-font);
  font-size: 0.75rem;
  color: var(--fn-g-muted);
}

.fragnatium-google-reviews__source,
.fragnatium-google-reviews__all a {
  font-family: var(--fn-g-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-g-blue);
  text-decoration: none;
}

.fragnatium-google-reviews__source {
  margin-top: auto;
}

.fragnatium-google-reviews__source:hover,
.fragnatium-google-reviews__source:focus-visible,
.fragnatium-google-reviews__all a:hover,
.fragnatium-google-reviews__all a:focus-visible {
  color: #1b66c9;
  text-decoration: underline;
}

.fragnatium-google-reviews__all {
  margin: 1.25rem 0 0;
  text-align: center;
}

@media (max-width: 600px) {
  /* The button earns its own row rather than squeezing the rating. */
  
}

/* ----------------------------------------------------------------
        Star rating
        ----------------------------------------------------------------

   Two identical rows of five stars, the gold one laid over the grey one
   and clipped to a width, so 4.5 renders as four and a half rather than
   being rounded up into a claim nobody made. Both layers carry the same
   markup, so the percentage lines up whatever the star size.

   Written generically though the Google panel is currently its only
   caller — it was shared with the homepage testimonial cards until those
   were replaced by this section. */

/*
 * width/align-self are load-bearing, not tidying. The fill is a percentage of
 * this element, and a column flex parent — which the review card is — stretches
 * its items across the cross axis, i.e. to the full width of the card. That
 * made the track 400px wide while the five stars still drew at 80px, so 4 out
 * of 5 resolved to 320px and every rating painted all five stars gold. Shrink
 * to the stars in every context and the percentage means what it says.
 */
.fragnatium-stars {
  position: relative;
  display: inline-block;
  width: max-content;
  align-self: flex-start;
  line-height: 0;
  white-space: nowrap;
}

.fragnatium-stars__track {
  display: block;
  color: #d8d2c7;
}

.fragnatium-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  color: var(--sg-accent);
}

/*
 * Google's star gold, and only inside Google's panel — the generic widget
 * above keeps the site's saffron accent for any future caller.
 */
.fragnatium-google-reviews .fragnatium-stars__fill {
  color: var(--fn-g-star);
}

.fragnatium-google-reviews .fragnatium-stars__track {
  color: var(--fn-g-border);
}

/* ================================================================
        Trustpilot — the second panel in the "Real talk" band
        ================================================================

   Same shape as the Google panel and the same reasoning behind it:
   in the platform's own visual language, because recognising the
   platform is the whole trust signal. Trustpilot's is a white star on
   a filled green square (#00b67a), which is why its stars use a
   different glyph rather than a recoloured outline star.

   No aggregate figure is printed here — see the class docblock. The
   headline number on a Trustpilot profile is a TrustScore, not an
   average, and a young profile whose reviews are all five stars still
   reports well under five. */

.fragnatium-reviews-band__panels {
  display: grid;
  gap: 1.5rem;
}

.fragnatium-trustpilot-reviews {
  --fn-tp-green: #00b67a;
  --fn-tp-empty: #dcdce6;
  --fn-tp-ink: #191919;
  --fn-tp-muted: #6b6b6b;
}

.fragnatium-trustpilot-reviews .fragnatium-reviews-panel__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--fn-tp-empty);
}

.fragnatium-reviews-panel__mark {
  display: inline-flex;
  line-height: 0;
}

.fragnatium-reviews-panel__brand {
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-tp-ink);
}

.fragnatium-reviews-panel__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fragnatium-reviews-panel__card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #ffffff;
  border: 1px solid var(--fn-tp-empty);
  border-radius: 8px;
  padding: 1rem;
}

.fragnatium-reviews-panel__title {
  margin: 0;
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-tp-ink);
}

.fragnatium-reviews-panel__title a {
  color: inherit;
  text-decoration: none;
}

.fragnatium-reviews-panel__title a:hover,
.fragnatium-reviews-panel__title a:focus-visible {
  text-decoration: underline;
}

/* "TrustScore 4.3" — Trustpilot's own label, never a bare number that would
   read as an average. */
.fragnatium-reviews-panel__score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-left: 0.5rem;
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  color: var(--fn-tp-ink);
}

.fragnatium-reviews-panel__score-label {
  font-size: 0.8rem;
  color: var(--fn-tp-muted);
}

.fragnatium-reviews-panel__score-value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.fragnatium-reviews-panel__head > .fragnatium-stars {
  align-self: center;
}

/* One attributed store quote below the PDP's primary purchase button. */
.fragnatium-pdp-store-review {
  margin: 0.75rem 0 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--fn-tp-empty);
  border-left: 3px solid var(--fn-tp-green);
  border-radius: 4px;
  background: #fafbf9;
  color: var(--fn-tp-ink);
}

.fragnatium-pdp-store-review__head,
.fragnatium-pdp-store-review__source,
.fragnatium-pdp-store-review__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.fragnatium-pdp-store-review__head {
  justify-content: space-between;
}

.fragnatium-pdp-store-review__source {
  font-size: 0.75rem;
  font-weight: 600;
}

.fragnatium-pdp-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.25rem 0 0.625rem;
  padding: 0.125rem 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sg-slate);
  text-decoration: none;
}

.fragnatium-pdp-rating:hover {
  color: var(--sg-ink);
}

.fragnatium-pdp-rating__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--sg-ink);
}

.fragnatium-pdp-rating__brand svg {
  display: block;
  width: 14px;
  height: 14px;
}

.fragnatium-pdp-rating .fragnatium-stars {
  align-self: center;
}

.fragnatium-pdp-rating .fragnatium-stars svg {
  width: 14px;
  height: 14px;
}

.fragnatium-pdp-rating__score strong {
  font-weight: 700;
  color: var(--sg-ink);
}

.fragnatium-pdp-store-review .fragnatium-stars {
  align-self: center;
}

.fragnatium-pdp-store-review .fragnatium-stars svg {
  width: 14px;
  height: 14px;
}

.fragnatium-pdp-store-review__nav {
  display: flex;
  gap: 0.25rem;
}

.fragnatium-pdp-store-review__nav[hidden] {
  display: none;
}

.fragnatium-pdp-store-review__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 0 2px;
  border: 1px solid var(--fn-tp-empty);
  border-radius: 50%;
  background: #fff;
  color: var(--fn-tp-ink);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.fragnatium-pdp-store-review__arrow:hover,
.fragnatium-pdp-store-review__arrow:focus-visible {
  border-color: var(--fn-tp-green);
  color: #006b48;
}

/* One slide per view. A scroll-snap rail, so it swipes before the arrows'
   script arrives and if it never does. */
.fragnatium-pdp-store-review__track {
  display: flex;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.fragnatium-pdp-store-review__track::-webkit-scrollbar {
  display: none;
}

.fragnatium-pdp-store-review__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.fragnatium-pdp-store-review__slide .fragnatium-stars {
  align-self: flex-start;
}

.fragnatium-pdp-store-review__slide .fragnatium-pdp-store-review__meta {
  margin-top: auto;
}

.fragnatium-pdp-store-review .fragnatium-pdp-store-review__quote {
  margin: 0.4rem 0 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.fragnatium-pdp-store-review__meta {
  font-size: 0.7rem;
  color: var(--fn-tp-muted);
}

.fragnatium-pdp-store-review__meta a {
  margin-left: auto;
  color: #006b48;
  text-underline-offset: 3px;
}

/* Clamped, not trimmed — shortening the box is ours to do, shortening
   somebody's words is not. */
.fragnatium-reviews-panel__quote {
  margin: 0;
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fn-tp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fragnatium-reviews-panel__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
}

.fragnatium-reviews-panel__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.fragnatium-reviews-panel__author {
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fn-tp-ink);
}

.fragnatium-reviews-panel__when {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.75rem;
  color: var(--fn-tp-muted);
}

/* Trustpilot's own signal that the reviewer was invited after a real
   order — worth carrying over rather than flattening into plain text. */
.fragnatium-reviews-panel__verified {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(0, 182, 122, 0.12);
  color: #00845a;
  font-size: 0.68rem;
  font-weight: 500;
}

.fragnatium-reviews-panel__all {
  margin: 1.25rem 0 0;
  text-align: center;
}

.fragnatium-reviews-panel__all a {
  font-family: var(--fn-g-font, Roboto, 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #00845a;
  text-decoration: none;
}

.fragnatium-reviews-panel__all a:hover,
.fragnatium-reviews-panel__all a:focus-visible {
  text-decoration: underline;
}

/* Trustpilot's squares, through the shared clipped-overlay widget. */
.fragnatium-trustpilot-reviews .fragnatium-stars__track {
  color: var(--fn-tp-empty);
}

.fragnatium-trustpilot-reviews .fragnatium-stars__fill {
  color: var(--fn-tp-green);
}

/* ================================================================
        "Real talk" — condensed
        ================================================================

   The band measured 1116px, 1.39 screens, on a 1440x900 desktop: two
   full-width panels stacked, each in its own bordered box, each with a
   header and a footer link, above a six-line clamp. The cards were
   never the problem — the chrome around them was.

   So the outer boxes go. The cards already carry their own borders, so
   a second box around them was one border too many and cost 4rem of
   padding per panel. The two panels then sit side by side from 1100px,
   which turns two stacked rows into one, and the clamp drops to four
   lines. Everything that carries meaning — every review, both platform
   marks, the ratings, the verified badge, both links out — is still
   here; only the packaging shrank. */

.fragnatium-reviews-panel {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;

  /*
   * Load-bearing. A grid item defaults to min-width: auto, i.e. it refuses to
   * shrink below its content — so the mobile rail below, which is meant to
   * scroll inside this panel, instead pushed the panel wider than the screen
   * and put a horizontal scrollbar on the whole page. min-width: 0 is what
   * lets the overflow happen where it was asked for.
   */
  min-width: 0;
}

/*
 * Side by side once there is width for it. 1100px is where two panels
 * still leave the narrower one enough room for two cards at their
 * minimum; below it they stack, which is also the mobile behaviour.
 */
@media (min-width: 1100px) {
  .fragnatium-reviews-band__panels {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
}

/* Cards get narrower when the panels share the row, so their floor drops
   with them — 200px still fits a line of five stars and a name. */
.fragnatium-google-reviews__grid,
.fragnatium-reviews-panel__grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.fragnatium-google-reviews__card,
.fragnatium-reviews-panel__card {
  padding: 0.875rem;
  gap: 0.5rem;
}

/* Four lines, not six. The longest review still reads; the two short
   ones stop setting a row height they never needed. */
.fragnatium-google-reviews__quote,
.fragnatium-reviews-panel__quote {
  -webkit-line-clamp: 4;
}

.fragnatium-google-reviews__head,
.fragnatium-trustpilot-reviews .fragnatium-reviews-panel__head {
  padding-bottom: 0.75rem;
}

.fragnatium-google-reviews__all,
.fragnatium-reviews-panel__all {
  margin-top: 0.875rem;
  text-align: left;
}

.fragnatium-review-avatar {
  width: 32px;
  height: 32px;
}

.fragnatium-review-avatar--letter {
  font-size: 0.95rem;
}

/* The heading is the band's other big block; it does not need 2rem under
   it once the panels below are this much tighter. */

/*
 * Mobile: a snap rail, not a stack.
 *
 * Five cards in one column made the band 1463px on a 844px screen — nearly
 * two full swipes of review cards between the shop and everything under it.
 * The reels band solves the same problem the same way one section down, so
 * this is the page's existing idiom rather than a new one.
 *
 * scroll-padding-inline has to match the rail's own inline padding, or
 * mandatory snapping opens the rail already scrolled past the first card —
 * the exact trap the reels rail hit.
 */
@media (max-width: 767px) {
  .fragnatium-google-reviews__grid,
  .fragnatium-reviews-panel__grid {
    min-width: 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fragnatium-google-reviews__grid::-webkit-scrollbar,
  .fragnatium-reviews-panel__grid::-webkit-scrollbar {
    display: none;
  }

  .fragnatium-google-reviews__card,
  .fragnatium-reviews-panel__card {
    scroll-snap-align: start;
    /* The clamp can relax once the cards are not stacked — height is no
       longer the constraint, and a swiped card should read in full. */
    scroll-snap-stop: always;
  }

  .fragnatium-google-reviews__quote,
  .fragnatium-reviews-panel__quote {
    -webkit-line-clamp: 6;
  }
}