/**
 * gommereviews — widget home «Opinioni dei clienti» e pagina /recensioni.
 * Usa le variabili del tema figlio gommego: niente palette propria.
 */

/* Versione A 23/09/2026: colonna del voto ferma a sinistra, recensioni che scorrono a destra.
 * Sezione su bianco come il montaggio sopra: nessuna fascia di colore in piu'. */
.gg-reviews {
  padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.5rem);
}

.gg-reviews__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.gg-reviews__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.gg-reviews__intro h2 {
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--gg-blue-deep);
  text-wrap: balance;
}

/* Cinque stelle riempite fino al voto medio: con 4,7 le prime quattro sono piene e la quinta e'
 * piena al 70% della sua larghezza (quota calcolata da `Gommereviews::starsFill()`). Oro brillante
 * a bordi netti (Tiziano, 23/09/2026: «gialle e luminose», poi «non si vedono bene»: l'alone
 * sfocava i contorni e mangiava la parte vuota). La parte vuota e' un grigio deciso, perche' la
 * frazione si legga a colpo d'occhio. */
.gg-reviews__meter {
  --gg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
  display: block;
  width: 12rem;
  height: 2.4rem;
  background:
    linear-gradient(90deg, transparent var(--gg-rating-fill), #c3cfdb 0),
    linear-gradient(180deg, #ffe45c 0%, #ffc61a 50%, #ffae00 100%);
  -webkit-mask: var(--gg-star) 0 0 / 20% 100% repeat-x;
  mask: var(--gg-star) 0 0 / 20% 100% repeat-x;
}

.gg-reviews__source {
  max-width: 34ch;
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--gg-muted);
}

.gg-reviews__all {
  font-weight: 700;
  color: var(--gg-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
  text-decoration-color: var(--gg-orange);
}

.gg-reviews__all:hover {
  color: var(--gg-blue-deep);
}

.gg-reviews__all:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

.gg-reviews__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gg-blue);
  text-decoration: none;
}

.gg-reviews__card-stars {
  color: #ffb300;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.gg-reviews__card-stars-empty {
  color: #c3cfdb;
}

/* Icona generica di collegamento esterno: SVG locale in maschera, quindi
   prende il colore del testo. Nessuna grafica di terze parti. */
.gg-reviews__ext {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gg-reviews__carousel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gg-reviews__viewport {
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 18px;
  /* `overflow-x: auto` ritaglia anche in verticale: questo respiro lascia
     vedere l'anello di focus delle card senza toccare la larghezza. */
  padding-block: 6px;
  margin-block: -6px;
}

.gg-reviews__viewport::-webkit-scrollbar {
  display: none;
}

.gg-reviews__track {
  display: flex;
  gap: 1rem;
  min-height: 100%;
}

/* La card e' un foglio tenue su bianco: la citazione e' il contenuto, stelle e firma la
   incorniciano. */
.gg-reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 0 0 calc((100% - 1rem) / 2);
  min-height: 15rem;
  scroll-snap-align: start;
  margin: 0;
  padding: 1.6rem 1.6rem 1.35rem;
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: 18px;
  transition: border-color .15s ease, background-color .15s ease;
}

.gg-reviews__card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--gg-ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.gg-reviews__card footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  row-gap: .15rem;
  align-items: center;
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--gg-muted);
}

.gg-reviews__card-initial {
  display: grid;
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: var(--gg-blue);
  border-radius: 50%;
  place-items: center;
}

.gg-reviews__card-meta strong {
  margin-right: .35rem;
  font-weight: 700;
  color: var(--gg-ink);
}

/* Un solo link per pannello, steso su tutta la sua superficie: l'area
   cliccabile e' ampia, citazione e numeri restano testo normale e non nascono
   controlli annidati. */
.gg-reviews__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

@media (hover: hover) {
  .gg-reviews__card:hover {
    background: #fff;
    border-color: rgb(2 72 132 / 35%);
  }

  .gg-reviews__card:hover .gg-reviews__card-link {
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }
}

/* Focus: l'anello si vede sull'intero pannello dove `:has` e' supportato,
   altrimenti resta sul link. */
.gg-reviews__card-link:focus-visible {
  border-radius: var(--gg-radius-sm);
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

@supports selector(:has(*)) {
  .gg-reviews__card-link:focus-visible {
    outline: none;
  }

  .gg-reviews__card:has(.gg-reviews__card-link:focus-visible) {
    outline: 3px solid var(--gg-orange);
    outline-offset: 2px;
  }
}

/* I controlli sono progressive enhancement: senza JavaScript il viewport
   resta scorribile con touch, trackpad e tastiera e non mostra pulsanti morti. */
.gg-reviews__nav {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.gg-reviews__layout.is-carousel-ready .gg-reviews__nav {
  display: flex;
}

.gg-reviews__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--gg-border);
  border-radius: 50%;
  background: #fff;
  color: var(--gg-blue);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gg-reviews__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-reviews__arrow:hover {
  background: var(--gg-blue);
  border-color: var(--gg-blue);
  color: #fff;
}

.gg-reviews__arrow:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

.gg-reviews__dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.gg-reviews__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--gg-border);
  transition: width .2s ease, background-color .2s ease;
}

.gg-reviews__dot.is-active {
  width: 1.25rem;
  background: var(--gg-orange);
}

@media (prefers-reduced-motion: reduce) {
  .gg-reviews__arrow,
  .gg-reviews__card,
  .gg-reviews__dot {
    transition: none;
  }
}

/* Tablet e mobile: il voto sopra, le recensioni sotto a tutta larghezza. */
@media (max-width: 991px) {
  .gg-reviews__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .gg-reviews__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    row-gap: .75rem;
    align-items: end;
  }

  .gg-reviews__intro > * {
    grid-column: 1;
  }

  .gg-reviews__nav {
    grid-row: 1 / span 4;
    grid-column: 2;
    align-self: end;
    margin-top: 0;
  }
}

@media (max-width: 599px) {
  .gg-reviews {
    padding-block: 2.5rem;
  }

  .gg-reviews__intro {
    display: flex;
    align-items: flex-start;
  }

  .gg-reviews__card {
    flex-basis: 88%;
    padding: 1.35rem 1.25rem 1.2rem;
  }

  .gg-reviews__nav {
    order: 5;
  }
}

/* ---------------------------------------------------------------------------
 * Pagina /recensioni — versione 23/09/2026
 * Il voto e la sua distribuzione aprono la pagina su fondo blu: e' l'unico elemento
 * forte. Sotto, un registro quieto a due colonne; le stelle sono gialle come in home.
 * ------------------------------------------------------------------------ */

.gr-page {
  --gr-star: #ffb400;
  --gr-star-grad: linear-gradient(180deg, #ffe45c 0%, #ffc61a 50%, #ffae00 100%);
  --gr-star-off: #c3cfdb;
  --gr-on-blue: #c9d7e4;
  --gr-on-blue-muted: #9fb6cf;
  padding: 1.25rem 0 3.5rem;
}

.gr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
  color: #fff;
  background: var(--gg-blue-glow), var(--gg-blue-deep);
  border-radius: var(--gg-radius-lg);
}

.gr-hero__title {
  margin: 0 0 .5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gr-on-blue);
}

.gr-hero__value {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-variant-numeric: tabular-nums;
}

.gr-hero__number {
  font-size: clamp(3.5rem, 6vw, 4.75rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.04em;
  color: #fff;
}

.gr-hero__scale {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gr-on-blue-muted);
}

/* Stessa stella della home: maschera SVG ripetuta, riempita al voto medio. */
.gr-meter {
  --gr-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
  display: block;
  width: 10rem;
  max-width: 100%;
  height: 2rem;
  margin-top: .75rem;
  background:
    linear-gradient(90deg, transparent var(--gr-fill), rgb(255 255 255 / 22%) 0),
    var(--gr-star-grad);
  -webkit-mask: var(--gr-star-shape) 0 0 / 20% 100% repeat-x;
  mask: var(--gr-star-shape) 0 0 / 20% 100% repeat-x;
}

.gr-hero__count {
  max-width: 34ch;
  margin: .6rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--gr-on-blue);
}

.gr-hero__dist-title {
  margin: 0 0 .35rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.gr-dist {
  display: grid;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-bar {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 4.25rem;
  gap: 1rem;
  align-items: center;
  padding: .3rem .75rem;
  color: #fff;
  text-decoration: none;
  border-radius: var(--gg-radius-sm);
}

a.gr-bar:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

a.gr-bar:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 2px;
}

.gr-bar.is-active {
  background: rgb(255 255 255 / 12%);
  box-shadow: inset 0 0 0 1.5px #ffc61a;
}

.gr-bar--empty {
  opacity: .45;
}

.gr-bar__label {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.gr-bar__star {
  color: #ffc61a;
}

.gr-bar__track {
  height: .625rem;
  overflow: hidden;
  background: rgb(255 255 255 / 12%);
  border-radius: 99px;
}

.gr-bar__fill {
  display: block;
  height: 100%;
  min-width: .75rem;
  background: var(--gr-star-grad);
  border-radius: inherit;
  transform-origin: left center;
  animation: gr-grow .9s cubic-bezier(.2, .8, .2, 1) both;
}

.gr-dist li:nth-child(2) .gr-bar__fill { animation-delay: .06s; }
.gr-dist li:nth-child(3) .gr-bar__fill { animation-delay: .12s; }
.gr-dist li:nth-child(4) .gr-bar__fill { animation-delay: .18s; }
.gr-dist li:nth-child(5) .gr-bar__fill { animation-delay: .24s; }

@keyframes gr-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.gr-bar__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--gr-on-blue);
}

.gr-hero__hint {
  margin: .4rem 0 0 .75rem;
  font-size: .8125rem;
  color: var(--gr-on-blue-muted);
}

.gr-attribution {
  max-width: 80ch;
  margin: 1.25rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--gg-muted);
}

.gr-attribution strong {
  color: var(--gg-ink);
}

.gr-attribution a {
  font-weight: 700;
  color: var(--gg-blue);
  text-decoration: underline;
  text-decoration-color: var(--gg-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

.gr-listhead {
  margin: 2.5rem 0 0;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--gg-blue-deep);
}

.gr-listhead__what {
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--gg-ink);
}

.gr-listhead__what strong {
  font-weight: 700;
}

/* Filtro fermo a sinistra come nei listini del catalogo, elenco a destra. */
.gr-body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.gr-filter {
  position: sticky;
  top: 8.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--gg-soft);
  border-radius: var(--gg-radius);
}

.gr-filter__title {
  margin: 0 0 .5rem .5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gg-ink);
}

.gr-filter__list {
  display: grid;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-filter__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .6rem;
  color: var(--gg-ink);
  text-decoration: none;
  border-radius: var(--gg-radius-sm);
}

a.gr-filter__item:hover {
  color: var(--gg-blue-deep);
  background: #fff;
}

.gr-filter__item:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 1px;
}

.gr-filter__item.is-active {
  color: #fff;
  background: var(--gg-blue-deep);
}

.gr-filter__label {
  font-weight: 600;
}

.gr-filter__stars {
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--gr-star);
}

.gr-filter__count {
  font-size: var(--gg-type-meta);
  font-variant-numeric: tabular-nums;
  color: var(--gg-muted);
}

.gr-filter__item.is-active .gr-filter__count {
  color: var(--gr-on-blue);
}

.gr-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-review {
  padding: 1.35rem 0 1.25rem;
  border-bottom: 1px solid var(--gg-border);
}

.gr-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
}

.gr-stars {
  display: inline-block;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

.gr-stars__full {
  color: var(--gr-star);
}

.gr-stars__empty {
  color: var(--gr-star-off);
}

.gr-review__title {
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gg-ink);
}

.gr-review__body {
  max-width: 68ch;
  margin: .5rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gg-ink);
  overflow-wrap: anywhere;
}

/* Un giudizio di una riga pesa quanto un titolo: si legge come una citazione. */
.gr-review--quote .gr-review__body {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.gr-reply {
  max-width: 68ch;
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--gg-soft);
  border-left: 3px solid var(--gg-blue);
  border-radius: 0 var(--gg-radius-sm) var(--gg-radius-sm) 0;
}

.gr-reply__who {
  margin: 0 0 .2rem;
  font-size: var(--gg-type-meta);
  font-weight: 700;
  color: var(--gg-blue);
}

.gr-reply__body {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--gg-ink);
}

.gr-review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  margin-top: .8rem;
  font-size: var(--gg-type-meta);
  color: var(--gg-muted);
}

.gr-review__initial {
  display: inline-grid;
  flex: 0 0 1.6rem;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: -.3rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--gg-blue-deep);
  background: #e6eef6;
  border-radius: 50%;
}

.gr-review__author {
  font-weight: 600;
  color: var(--gg-ink);
}

.gr-review__source {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--gg-type-label);
}

.gr-review__source svg {
  width: .9rem;
  height: .9rem;
  fill: none;
  stroke: #2f8f5b;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gr-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
}

.gr-pager__pages {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-pager__page,
.gr-pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .9rem;
  font-weight: 600;
  color: var(--gg-blue-deep);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
}

.gr-pager__page {
  padding: 0 .5rem;
  font-variant-numeric: tabular-nums;
}

a.gr-pager__page:hover,
a.gr-pager__step:hover {
  color: var(--gg-blue);
  border-color: var(--gg-blue);
}

.gr-pager__page:focus-visible,
.gr-pager__step:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 2px;
}

.gr-pager__page.is-current {
  color: #fff;
  background: var(--gg-blue-deep);
  border-color: var(--gg-blue-deep);
}

.gr-pager__step {
  font-weight: 700;
}

.gr-pager__step.is-disabled {
  opacity: .4;
}

.gr-pager__gap {
  padding: 0 .25rem;
  color: var(--gg-muted);
}

.gr-empty {
  margin-top: 2rem;
  color: var(--gg-muted);
}

@media (max-width: 767px) {
  .gr-hero {
    grid-template-columns: 1fr;
  }
}

/* Sotto i 992px il filtro sale sopra l'elenco come fila di pulsanti che scorre. */
@media (max-width: 991px) {
  .gr-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .gr-filter {
    position: static;
    margin: 1rem 0 .25rem;
    padding: 0;
    background: none;
  }

  .gr-filter__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .gr-filter__list {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gr-filter__list::-webkit-scrollbar {
    display: none;
  }

  .gr-filter__item {
    flex: 0 0 auto;
    gap: .5rem;
    padding: .5rem .8rem;
    background: var(--gg-soft);
    border-radius: 99px;
  }
}

@media (max-width: 575px) {
  .gr-page {
    padding-top: .5rem;
  }

  .gr-hero {
    gap: 1rem;
    margin-inline: -.25rem;
    padding: 1.1rem 1rem;
    border-radius: var(--gg-radius);
  }

  /* Sul telefono voto e stelle stanno su una riga: numero a sinistra, stelle e conteggio a destra. */
  .gr-hero__score {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
  }

  .gr-hero__title {
    grid-column: 1 / -1;
  }

  .gr-hero__value {
    grid-row: 2 / span 2;
  }

  .gr-hero__number {
    font-size: 3.5rem;
  }

  .gr-hero__scale {
    font-size: 1rem;
  }

  .gr-meter {
    width: 8rem;
    height: 1.6rem;
    margin-top: 0;
  }

  .gr-hero__count {
    margin-top: .3rem;
    font-size: .8125rem;
  }

  .gr-bar {
    grid-template-columns: 2.25rem minmax(0, 1fr) 3.25rem;
    gap: .75rem;
    padding: .25rem .5rem;
  }

  .gr-hero__hint {
    margin-left: .5rem;
  }

  .gr-listhead__what {
    font-size: 1.1875rem;
  }

  .gr-review--quote .gr-review__body {
    font-size: 1.1875rem;
  }

  /* La fonte va a capo sotto autore e data. */
  .gr-review__source {
    flex-basis: 100%;
  }

  .gr-pager {
    flex-wrap: wrap;
  }

  .gr-pager__pages {
    order: -1;
    justify-content: center;
    gap: .25rem;
    width: 100%;
  }

  /* Sul telefono restano prima, ultima e un vicino per lato: la riga sta in 320px. */
  .gr-pager__far {
    display: none;
  }

  .gr-pager__step {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-bar__fill {
    animation: none;
  }
}