/*
 * «Lo que dicen»: el resumen de reseñas de la columna de compra.
 *
 * Toni lo pide el 10/09/2026 con `histrips.com` delante, que debajo de su
 * bloque de packs mete una tarjeta pequeña con dos reseñas que se deslizan en
 * horizontal y una barra de avance debajo. Aquí va en el mismo sitio: **detrás
 * de «Completa el conjunto», al final de la columna de compra**.
 *
 * **Es un adelanto, no un bloque nuevo.** Lo pinta
 * `assets/js/opiniones-resumen.js` con exactamente los mismos datos que el
 * carrusel «Reseñas.» del final de la ficha, así que no hay dos listas que
 * puedan acabar diciendo cosas distintas.
 *
 * **En pequeño de verdad.** El título baja a 1,05 rem —el de «Completa el
 * conjunto» es 1,3— y la cita a 0,78: este bloque va al final de la columna y
 * no puede competir con el precio ni con el botón de comprar, que es lo que
 * manda ahí. La paleta es la fría de los otros dos bloques de la columna para
 * que se lea como la misma familia y no como un pegote de otro sitio.
 */
.gp-preview-product-page .gp-mini-reviews {
  /* Misma paleta que los plazos y el conjunto: los tres son la misma pieza. */
  --gp-mini-ink: #0f1115;
  --gp-mini-muted: #6b7280;
  --gp-mini-line: #e5e7eb;
  --gp-mini-soft: #f7f8fa;
  --gp-mini-card: #ffffff;
  /*
   * El verde de las estrellas es el mismo del bloque grande, y ese sale de
   * Trustpilot, que es el que usa la referencia. Se repite aquí en vez de
   * heredarse porque los dos bloques son ficheros distintos y no comparten
   * envoltorio; si algún día cambia, se cambia en los dos.
   */
  --gp-mini-star: #00b67a;
  --gp-mini-star-off: #cdeade;
  /*
   * Se mide a sí mismo, como los otros dos bloques de esta columna: vale 537 px
   * a 1280 y 425 px a 1024, con la ficha todavía a dos columnas, así que un
   * corte por ancho de ventana no sirve de nada aquí.
   */
  container: gp-opiniones / inline-size;
  display: block;
  margin-top: 1.5rem;
}

.gp-preview-product-page .gp-mini-reviews__head {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.gp-preview-product-page .gp-mini-reviews__title {
  color: var(--gp-mini-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/*
 * Baja al carrusel completo del final de la ficha. Se pinta como un enlace de
 * texto y no como un botón sólido: al lado del «Añadir al carrito» que hay
 * arriba, un segundo botón con relleno competiría con el único que importa.
 */
.gp-preview-product-page .gp-mini-reviews__more {
  background: none;
  border: 0;
  color: var(--gp-mini-muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.78rem;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.gp-preview-product-page .gp-mini-reviews__more:hover,
.gp-preview-product-page .gp-mini-reviews__more:focus-visible {
  color: var(--gp-mini-ink);
}

/*
 * La pista.
 *
 * Las tarjetas miden el 46 % del bloque, no la mitad exacta: con la mitad
 * entrarían dos justas y el bloque parecería una rejilla de dos, sin nada que
 * dijera que hay más detrás. Al 46 % se ven dos enteras y asoma la tercera, que
 * es lo que invita a arrastrar. El `clamp` es para los extremos: por debajo de
 * 10,5 rem la cita se queda en una columna de tres palabras, y por encima de
 * 14 no hace falta más.
 *
 * La barra del navegador se esconde porque debajo hay una propia, que se lee
 * mejor y no depende del sistema; el desplazamiento sigue siendo el nativo, con
 * el dedo, la rueda o el teclado.
 */
.gp-preview-product-page .gp-mini-reviews__track {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gp-preview-product-page .gp-mini-reviews__track::-webkit-scrollbar {
  display: none;
}

.gp-preview-product-page .gp-mini-reviews__track:focus-visible {
  border-radius: 0.7rem;
  outline: 2px solid var(--gp-mini-ink);
  outline-offset: 3px;
}

.gp-preview-product-page .gp-mini-review {
  background: var(--gp-mini-soft);
  border: 1px solid var(--gp-mini-line);
  border-radius: 0.7rem;
  display: flex;
  flex: 0 0 clamp(10.5rem, 46%, 14rem);
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.gp-preview-product-page .gp-mini-review:hover {
  border-color: var(--gp-mini-ink);
  transform: translateY(-2px);
}

.gp-preview-product-page .gp-mini-review__head {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
}

/* Las cinco casillas verdes, las mismas del bloque grande a menor tamaño. */
.gp-preview-product-page .gp-mini-review__stars {
  display: inline-flex;
  gap: 0.13rem;
  line-height: 1;
}

.gp-preview-product-page .gp-mini-review__star {
  align-items: center;
  background: var(--gp-mini-star);
  border-radius: 0.14rem;
  color: #fff;
  display: inline-flex;
  height: 0.85rem;
  justify-content: center;
  width: 0.85rem;
}

.gp-preview-product-page .gp-mini-review__star.is-empty {
  background: var(--gp-mini-star-off);
}

.gp-preview-product-page .gp-mini-review__star svg {
  fill: currentColor;
  height: 0.58rem;
  width: 0.58rem;
}

/*
 * El sello solo lo pinta la JS cuando la compra está verificada de verdad.
 * Doce de las treinta y cuatro reseñas son de Amazon Vine y no lo están.
 */
.gp-preview-product-page .gp-mini-review__verified {
  align-items: center;
  color: var(--gp-mini-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.63rem;
  font-weight: 600;
  gap: 0.22rem;
  letter-spacing: -0.01em;
}

.gp-preview-product-page .gp-mini-review__verified svg {
  fill: currentColor;
  height: 0.8rem;
  width: 0.8rem;
}

.gp-preview-product-page .gp-mini-review__verified svg path {
  fill: none;
  stroke: var(--gp-mini-card);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

/*
 * La cita, recortada a tres renglones.
 *
 * **El texto entra entero en el HTML y solo lo tapa el CSS.** Se puede
 * seleccionar y copiar, un lector de pantalla lo lee de principio a fin, y el
 * carrusel del final de la ficha lo enseña sin recortar. Cortarlo en la JS
 * dejaría fuera la reserva que escribió quien puso 4 estrellas, que en una
 * selección de 4 y 5 es justo lo que no se puede perder.
 */
.gp-preview-product-page .gp-mini-review__quote {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #1d1d1f;
  display: -webkit-box;
  flex: 1 1 auto;
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
}

.gp-preview-product-page .gp-mini-review__quote::before { content: '«'; }
.gp-preview-product-page .gp-mini-review__quote::after { content: '»'; }

/*
 * El nombre, en versalitas. Es lo que hace la referencia y aquí sirve además
 * para separarlo de la cita sin meter otro filete: son dos cosas distintas
 * dentro de una tarjeta que mide cuatro centímetros.
 */
.gp-preview-product-page .gp-mini-review__name {
  color: var(--gp-mini-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

/*
 * La barra de avance.
 *
 * La JS la esconde sola cuando las tarjetas caben enteras: una barra que no se
 * mueve solo estorba. El pulgar mide lo que se ve sobre lo que hay, así que su
 * ancho ya dice cuántas reseñas quedan detrás.
 */
.gp-preview-product-page .gp-mini-reviews__rail {
  background: var(--gp-mini-line);
  border-radius: 999px;
  height: 3px;
  margin-top: 0.7rem;
  position: relative;
}

.gp-preview-product-page .gp-mini-reviews__thumb {
  background: var(--gp-mini-ink);
  border-radius: 999px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 30%;
}

/*
 * En el bloque estrecho las tarjetas ensanchan y se ve una y media: con 46 %
 * de 380 px quedan 175 px por tarjeta, y ahí «Suelo sudar bastante y con esto»
 * se parte en columnas de dos palabras.
 */
@container gp-opiniones (max-width: 420px) {
  .gp-preview-product-page .gp-mini-review {
    flex-basis: 68%;
  }
}

/*
 * ── La nota media, encima del nombre del producto ────────────────────────
 *
 * Toni la pide el 10/09/2026 con `histrips.com` delante, que pone «★★★★☆ (14)
 * Verified Reviews» justo encima del título. Aquí va en el mismo sitio y con el
 * mismo peso: una línea pequeña que no compite con el nombre del producto ni
 * con el precio, y que al pulsarla baja al carrusel del final de la ficha.
 *
 * **La nota es la real de la ficha de Amazon**, no la de las citas que se
 * enseñan. Eso lo decide la JS; aquí solo se dibuja.
 */
.gp-preview-product-page .gp-rating {
  --gp-rating-star: #00b67a;
  --gp-rating-star-off: #cdeade;
  align-items: center;
  background: none;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.78rem;
  gap: 0.4rem;
  /*
   * Sin `margin-top`: la nota es lo primero de la columna. El hueco de debajo
   * es el que la separa del título, y es corto a propósito, para que las dos
   * cosas se lean como una sola cabecera y no como dos bloques.
   */
  margin: 0 0 0.45rem;
  padding: 0;
  text-align: left;
}

.gp-preview-product-page .gp-rating__label {
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.gp-preview-product-page .gp-rating:hover .gp-rating__label,
.gp-preview-product-page .gp-rating:focus-visible .gp-rating__label {
  color: #0f1115;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * Las estrellas: dos filas idénticas superpuestas, la de abajo pálida y la de
 * arriba recortada al porcentaje de la nota. Un 4,3 se ve como cuatro y un
 * tercio, sin dibujar medias estrellas ni redondear la nota a lo que no es.
 */
.gp-preview-product-page .gp-rating__stars {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
  position: relative;
}

.gp-preview-product-page .gp-rating__row {
  display: inline-flex;
  gap: 0.13rem;
  line-height: 0;
}

.gp-preview-product-page .gp-rating__row.is-on {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.gp-preview-product-page .gp-rating__star {
  align-items: center;
  border-radius: 0.14rem;
  display: inline-flex;
  flex: 0 0 auto;
  height: 0.95rem;
  justify-content: center;
  width: 0.95rem;
}

.gp-preview-product-page .gp-rating__row.is-off .gp-rating__star {
  background: var(--gp-rating-star-off);
  color: #fff;
}

.gp-preview-product-page .gp-rating__row.is-on .gp-rating__star {
  background: var(--gp-rating-star);
  color: #fff;
}

.gp-preview-product-page .gp-rating__star svg {
  fill: currentColor;
  height: 0.64rem;
  width: 0.64rem;
}

/* En lienzo oscuro solo cambia la tinta del texto; el verde se sostiene igual. */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-rating,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-rating {
  color: rgba(245, 245, 247, 0.68);
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-rating:hover .gp-rating__label,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-rating:hover .gp-rating__label {
  color: #f5f5f7;
}

/* En las fichas de lienzo oscuro el bloque se lee en claro. */
.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-mini-reviews,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-mini-reviews {
  --gp-mini-ink: #f5f5f7;
  --gp-mini-muted: rgba(245, 245, 247, 0.68);
  --gp-mini-line: rgba(245, 245, 247, 0.22);
  --gp-mini-soft: rgba(245, 245, 247, 0.06);
  --gp-mini-card: #141416;
}

.gp-preview-product-page[data-gp-product-slug="gladiator-attack"] .gp-mini-review__quote,
.gp-preview-product-page[data-gp-product-slug="pack-gladiator-attack"] .gp-mini-review__quote {
  color: var(--gp-mini-ink);
}