/* ═══════════════════════════════════════════════════════════════════════
   Highsupply · Reseñas (2026-07-28)

   Rediseño completo de productcomments con el sistema de marca. Se carga
   DESPUÉS de highsupply.css y del CSS del módulo (ver head.tpl) para ganar
   la cascada sin pelear con !important más de lo imprescindible.

   Piezas:
     1. Estrellas (sustituyen al sprite PNG del módulo)
     2. Resumen en la cabecera de la ficha
     3. Bloque de opiniones (sección + resumen + barras)
     4. Tarjeta de reseña
     5. Estado vacío y paginación
     6. Modal de escritura
     7. Estrellas en las cards de listado
     8. Responsive
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hs-star-on: #EC1A8F;
  --hs-star-off: #ded5c4;
}
.theme-dark {
  --hs-star-off: #3a3a3a;
}

/* ─────────────────────────────────────────── 1. ESTRELLAS
   El plugin jQuery del módulo (jquery.rating.plugin.js) monta dos capas:
   .star-empty con divs .star y .star-full con divs .star-on, y recorta la
   última con `width` para las medias estrellas. Aquí sólo se cambia el
   dibujo: sprite PNG → SVG en background, manteniendo el mecanismo. */

.hs-reviews .grade-stars,
.hs-card-rating .grade-stars,
.hs-review .grade-stars,
.hs-review-modal .grade-stars {
  position: relative;
  display: inline-block;
  height: 20px;
  min-width: 110px; /* 5 × (20 + 2): el .star-content va absolute y no mide */
  line-height: 0;
  flex: none;
}

/* El plugin del tema (warehouse) mete además iconos Font Awesome en cada
   estrella (.fa.fa-star / .fa-star-o), que se pintaban encima del SVG. Se
   apaga el glifo y se deja sólo el dibujo de la marca. */
.hs-reviews .star-content div::before,
.hs-card-rating .star-content div::before,
.hs-review .star-content div::before,
.hs-review-modal .star-content div::before {
  content: "" !important;
  display: none !important;
}

.hs-reviews .grade-stars .star-content,
.hs-card-rating .grade-stars .star-content,
.hs-review .grade-stars .star-content,
.hs-review-modal .grade-stars .star-content {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.hs-reviews .star-content div.star,
.hs-reviews .star-content div.star-on,
.hs-reviews .star-content div.star-hover,
.hs-card-rating .star-content div.star,
.hs-card-rating .star-content div.star-on,
.hs-card-rating .star-content div.star-hover,
.hs-review .star-content div.star,
.hs-review .star-content div.star-on,
.hs-review .star-content div.star-hover,
.hs-review-modal .star-content div.star,
.hs-review-modal .star-content div.star-on,
.hs-review-modal .star-content div.star-hover {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0 2px 0 0;
  overflow: hidden; /* las medias estrellas se recortan por ancho */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ded5c4' d='M10 1.4l2.7 5.4 6 .9-4.35 4.2 1.03 5.95L10 15.05 4.62 17.85l1.03-5.95L1.3 7.7l6-.9z'/%3E%3C/svg%3E");
}

.theme-dark .hs-reviews .star-content div.star,
.theme-dark .hs-card-rating .star-content div.star,
.theme-dark .hs-review .star-content div.star,
.theme-dark .hs-review-modal .star-content div.star {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%233a3a3a' d='M10 1.4l2.7 5.4 6 .9-4.35 4.2 1.03 5.95L10 15.05 4.62 17.85l1.03-5.95L1.3 7.7l6-.9z'/%3E%3C/svg%3E");
}

.hs-reviews .star-content div.star-on,
.hs-reviews .star-content div.star-hover,
.hs-card-rating .star-content div.star-on,
.hs-card-rating .star-content div.star-hover,
.hs-review .star-content div.star-on,
.hs-review .star-content div.star-hover,
.hs-review-modal .star-content div.star-on,
.hs-review-modal .star-content div.star-hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23EC1A8F' d='M10 1.4l2.7 5.4 6 .9-4.35 4.2 1.03 5.95L10 15.05 4.62 17.85l1.03-5.95L1.3 7.7l6-.9z'/%3E%3C/svg%3E");
}

/* Tamaños. Ojo: el ancho tiene que coincidir con el `starWidth` que usa el JS
   al pintar (20 por defecto, 16 en las cards de listado), o las medias
   estrellas se recortan por donde no toca. */
.hs-review .grade-stars.hs-stars-sm { height: 16px; min-width: 85px; }
.hs-review .hs-stars-sm .star-content div.star,
.hs-review .hs-stars-sm .star-content div.star-on,
.hs-review .hs-stars-sm .star-content div.star-hover {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  margin-right: 1px;
}

.hs-review-modal .grade-stars.hs-stars-xl { height: 36px; min-width: 210px; }
.hs-review-modal .hs-stars-xl .star-content div.star,
.hs-review-modal .hs-stars-xl .star-content div.star-on,
.hs-review-modal .hs-stars-xl .star-content div.star-hover {
  width: 36px;
  height: 36px;
  background-size: 36px 36px;
  margin-right: 6px;
  cursor: pointer;
}

/* ─────────────────────────────────────────── 2. CABECERA DE LA FICHA */

body#product .hs-pdp-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0 0;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text-mute);
}

body#product .hs-pdp-rating-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
}
body#product .hs-pdp-star { color: var(--hs-star-off); }
body#product .hs-pdp-star.is-on { color: var(--hs-star-on); }

body#product .hs-pdp-rating-score {
  font-weight: 700;
  color: var(--hs-text);
}
body#product .hs-pdp-rating-count { color: var(--hs-text-mute); }

body#product .hs-pdp-rating-link {
  color: var(--hs-accent-text) !important; /* el tema pinta los <a> en gris */
  font-weight: 600;
  text-decoration: none !important;
  margin-left: 6px;
  transition: opacity var(--hs-transition);
}
body#product .hs-pdp-rating-link:hover { opacity: .7; }
body#product .hs-pdp-rating--empty { font-size: 13px; }

/* ─────────────────────────────────────────── 3. BLOQUE DE OPINIONES */

body#product .hs-reviews {
  margin: 80px 0 0 0;
  padding: 64px 0;
  border-top: 1px solid var(--hs-border-soft);
  scroll-margin-top: 100px; /* el header es sticky */
}

.hs-reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hs-reviews-title {
  font-family: var(--hs-font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 14px 0 0 0;
}

/* Botón principal: pastilla rosa del sistema */
.hs-reviews-write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border: 1.5px solid var(--hs-accent);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-fill);
  color: var(--hs-accent-ink) !important;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--hs-transition), border-color var(--hs-transition), color var(--hs-transition);
}
.hs-reviews-write:hover {
  background: var(--hs-accent-hover);
  border-color: var(--hs-accent-hover);
  color: var(--hs-accent-ink) !important;
}
.hs-reviews-write--ghost {
  background: transparent;
  border-color: var(--hs-border);
  color: var(--hs-text) !important;
}
.hs-reviews-write--ghost:hover {
  background: transparent;
  border-color: var(--hs-accent);
  color: var(--hs-accent-text) !important;
}

/* Panel de resumen: nota · barras · titular */
.hs-reviews-summary {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(160px, 220px);
  gap: 48px;
  align-items: center;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius-lg);
  padding: 36px 40px;
  margin-bottom: 40px;
}

.hs-reviews-score { text-align: center; }
.hs-reviews-score-value {
  font-family: var(--hs-font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hs-text);
}
.hs-reviews-score .grade-stars { margin: 12px 0 8px; }
.hs-reviews-score-count {
  font-family: var(--hs-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--hs-text-mute);
  white-space: nowrap;
}

.hs-reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-reviews-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
}
.hs-reviews-bar-label {
  font-family: var(--hs-font-mono);
  font-size: 12px;
  color: var(--hs-text-mute);
  white-space: nowrap;
}
.hs-reviews-bar-star { color: var(--hs-star-off); margin-left: 2px; }
.hs-reviews-bar-track {
  display: block;
  height: 8px;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-surface-alt);
  overflow: hidden;
}
.hs-reviews-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-fill);
  min-width: 0;
  transition: width .4s ease;
}
.hs-reviews-bar.is-empty .hs-reviews-bar-fill { background: transparent; }
.hs-reviews-bar-count {
  font-family: var(--hs-font-mono);
  font-size: 12px;
  color: var(--hs-text-faint);
  text-align: right;
}

.hs-reviews-recommend {
  text-align: center;
  padding-left: 40px;
  border-left: 1px solid var(--hs-border-soft);
}
.hs-reviews-recommend-num {
  font-family: var(--hs-font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-accent-text);
}
.hs-reviews-recommend-label {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--hs-text-mute);
}

/* ─────────────────────────────────────────── 4. TARJETA DE RESEÑA */

.hs-reviews-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hs-review {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  padding: 24px 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hs-review-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hs-surface-alt);
  color: var(--hs-text);
  font-family: var(--hs-font-display);
  font-size: 15px;
  line-height: 38px;
  text-align: center;
  text-transform: uppercase;
}
.hs-review-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.hs-review-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--hs-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-review-date {
  font-family: var(--hs-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hs-text-faint);
}

.hs-review-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hs-text);
  margin: 0;
}
.hs-review-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--hs-text-mute);
  margin: 0;
  overflow-wrap: anywhere;
}

.hs-review-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hs-border-soft);
}
.hs-review-useful-label {
  font-size: 12px;
  color: var(--hs-text-faint);
  margin-right: 2px;
}
.hs-review-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  background: transparent;
  color: var(--hs-text-mute);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--hs-transition), color var(--hs-transition);
}
.hs-review-vote:hover {
  border-color: var(--hs-accent);
  color: var(--hs-accent-text);
}
.hs-review-report {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
  cursor: pointer;
  transition: color var(--hs-transition);
}
.hs-review-report:hover { color: var(--hs-text-mute); }

/* ─────────────────────────────────────────── 5. VACÍO Y PAGINACIÓN */

.hs-reviews-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--hs-surface-soft);
  border: 1px dashed var(--hs-border);
  border-radius: var(--hs-radius-lg);
}
.hs-reviews-empty-stars {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--hs-star-off);
}
.hs-reviews-empty-title {
  font-family: var(--hs-font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 14px 0 6px;
}
.hs-reviews-empty-text {
  font-size: 14px;
  color: var(--hs-text-mute);
  margin: 0 0 22px;
}

/* El CSS del módulo posiciona el pie con ids (paginación en absolute a la
   derecha, botón centrado con margin auto), así que aquí hay que usar los
   mismos ids para ganar: paginación a la izquierda, botón a la derecha. */
#product-comments-list-footer.hs-reviews-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  position: static;
  min-height: 0;
}
#product-comments-list-footer.hs-reviews-foot .post-product-comment {
  margin: 0;
  display: inline-flex;
}
.hs-reviews-foot:empty { display: none; }

#product-comments-list-pagination.hs-reviews-pagination {
  position: static;
  height: auto;
}
#product-comments-list-pagination.hs-reviews-pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#product-comments-list-pagination.hs-reviews-pagination li { line-height: 0; }
#product-comments-list-pagination.hs-reviews-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius-pill);
  background: transparent;
  color: var(--hs-text-mute);
  font-family: var(--hs-font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--hs-transition), color var(--hs-transition), background var(--hs-transition);
}
#product-comments-list-pagination.hs-reviews-pagination li span:hover {
  border-color: var(--hs-accent);
  color: var(--hs-accent-text);
}
#product-comments-list-pagination.hs-reviews-pagination li span.current,
#product-comments-list-pagination.hs-reviews-pagination li.active span {
  background: var(--hs-text);
  border-color: var(--hs-text);
  color: var(--hs-bg);
  cursor: default;
}
#product-comments-list-pagination.hs-reviews-pagination li.hidden { display: none; }
#product-comments-list-pagination.hs-reviews-pagination li.disabled span {
  opacity: .35;
  cursor: default;
  border-color: var(--hs-border-soft);
  color: var(--hs-text-faint);
}

/* ─────────────────────────────────────────── 6. MODAL DE ESCRITURA */

.hs-review-modal .modal-dialog { max-width: 560px; }
.hs-review-modal .modal-content {
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 8px;
}
.hs-review-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 0;
  padding: 22px 24px 8px;
}
.hs-review-modal-title {
  font-family: var(--hs-font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 10px 0 0;
}
.hs-review-modal-close {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--hs-text-mute);
  opacity: 1;
  cursor: pointer;
}
.hs-review-modal-close:hover { color: var(--hs-text); }
.hs-review-modal .modal-body { padding: 8px 24px 24px; }

.hs-review-modal-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  margin-bottom: 22px;
}
.hs-review-modal-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface-soft);
  overflow: hidden;
}
.hs-review-modal-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hs-review-modal-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hs-text);
  line-height: 1.3;
}

.hs-review-criterions {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
/* Con id: el CSS del módulo alinea el criterio a la derecha con
   `#post-product-comment-modal .criterion-rating` y ganaría a una clase. */
#post-product-comment-modal .criterion-rating,
.hs-review-criterions .criterion-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
#post-product-comment-modal .criterion-rating label,
.hs-review-criterions .criterion-rating label {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin: 0;
}
#ratingNotChosen {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hs-accent-text);
}

.hs-review-field { margin-bottom: 18px; }
.hs-review-label {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 8px;
}
.hs-review-modal input[type="text"],
.hs-review-modal textarea {
  width: 100%;
  background: var(--hs-surface);
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 12px 14px;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  transition: border-color var(--hs-transition);
}
.hs-review-modal input[type="text"]:focus,
.hs-review-modal textarea:focus {
  border-color: var(--hs-accent);
  outline: none;
}
.hs-review-modal input.error,
.hs-review-modal textarea.error { border-color: var(--hs-accent); }
.hs-review-modal ::placeholder { color: var(--hs-text-faint); }

.hs-review-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hs-review-modal-actions { display: flex; gap: 10px; }
.hs-review-required,
.hs-review-moderation {
  font-size: 12px;
  color: var(--hs-text-faint);
  margin: 0;
}
.hs-review-moderation { margin-top: 14px; }
.hs-review-required .required,
.hs-review-label .required { color: var(--hs-accent-text); }

/* Modales de aviso del módulo (enviado / error / confirmación).
   Los pinta el propio módulo con .modal-dialog sin ancho, un <h2> genérico y
   los botones btn-comment; aquí se les da la voz de la marca. */
.product-comment-modal:not(.hs-review-modal) .modal-dialog { max-width: 460px; }
.product-comment-modal .modal-content {
  border-radius: var(--hs-radius-lg);
  border: 1px solid var(--hs-border);
  background: var(--hs-bg);
  padding: 8px;
}
.product-comment-modal .modal-header { border: 0; padding-bottom: 4px; }
.product-comment-modal .modal-header h2 {
  font-family: var(--hs-font-display);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 0;
}
.product-comment-modal .modal-header h2 .material-icons { display: none; }
.product-comment-modal .modal-body {
  color: var(--hs-text-mute);
  font-size: 14px;
  line-height: 1.6;
}
.product-comment-modal .post-comment-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.product-comment-modal .btn-comment,
.product-comment-modal .btn-comment-big,
.product-comment-modal .btn-comment-huge,
.product-comment-modal .confirm-button,
.product-comment-modal .refuse-button {
  border-radius: var(--hs-radius-pill) !important;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-comment-modal .confirm-button,
.product-comment-modal .btn-comment {
  background: var(--hs-accent-fill) !important;
  border-color: var(--hs-accent) !important;
  color: #fff !important;
}
.product-comment-modal .refuse-button,
.product-comment-modal .btn-comment-inverse {
  background: transparent !important;
  border: 1.5px solid var(--hs-border) !important;
  color: var(--hs-text) !important;
}

/* ─────────────────────────────────────────── 7. CARDS DE LISTADO
   El contenedor sólo aparece cuando el JS confirma que el producto tiene
   reseñas (añade .has-reviews a la miniatura); si no, no reserva espacio. */

.hs-card-rating {
  display: none;
  align-items: center;
  justify-content: flex-start; /* la card está alineada a la izquierda */
  gap: 6px;
  margin: 2px 0 8px;
  text-align: left;
}
.js-product-miniature.has-reviews .hs-card-rating { display: flex; }

/* Rails de la home: el hueco lo rellena hs-reviews.js y sólo entonces se ve
   (así las cards sin reseñas no dejan un espacio en blanco). */
.hs-rail-card-rating.is-loaded {
  display: flex;
  margin: 4px 0 0;
}
.hs-rail-card-rating .hs-pdp-rating-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 12px;
  line-height: 1;
}
.hs-rail-card-rating .hs-pdp-star { color: var(--hs-star-off); }
.hs-rail-card-rating .hs-pdp-star.is-on { color: var(--hs-star-on); }
.hs-card-rating .grade-stars { height: 16px; min-width: 85px; }
.hs-card-rating .star-content div.star,
.hs-card-rating .star-content div.star-on,
.hs-card-rating .star-content div.star-hover {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  margin-right: 1px;
}
.hs-card-rating .comments-nb {
  font-family: var(--hs-font-mono);
  font-size: 11px;
  color: var(--hs-text-faint);
}

/* ─────────────────────────────────────────── 7b. PÁGINA DE BAJA
   /resenas/baja — enlace "No quiero estos correos" del email de la campaña. */

.hs-optout {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 96px var(--hs-gutter) 120px;
}
.hs-optout-inner { max-width: 560px; }
.hs-optout-title {
  font-family: var(--hs-font-display);
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 14px 0 18px;
}
.hs-optout-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--hs-text-mute);
  margin: 0 0 28px;
}

@media (max-width: 767px) {
  .hs-optout { padding: 56px var(--hs-gutter-mobile) 72px; }
  .hs-optout-title { font-size: 40px; }
}

/* ─────────────────────────────────────────── 8. RESPONSIVE */

@media (max-width: 991px) {
  .hs-reviews-summary {
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 32px;
    padding: 28px;
  }
  .hs-reviews-recommend {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hs-border-soft);
    padding-top: 20px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
  }
  .hs-reviews-recommend-label { margin-top: 0; }
  .hs-reviews-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body#product .hs-reviews {
    margin-top: 48px;
    padding: 40px 0;
  }
  .hs-reviews-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }
  .hs-reviews-title { font-size: 36px; }
  .hs-reviews-write { width: 100%; }

  .hs-reviews-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 20px;
    text-align: left;
  }
  .hs-reviews-score {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .hs-reviews-score-value { font-size: 48px; }
  .hs-reviews-score .grade-stars { margin: 0; }
  .hs-reviews-score-count { margin-left: auto; }

  .hs-review { padding: 20px; }
  .hs-review-foot { flex-wrap: wrap; }

  /* En móvil el módulo pone el pie en row-reverse / columna con sus ids: aquí
     se fuerza el orden de siempre (paginación arriba, botón ancho abajo). */
  #product-comments-list-footer.hs-reviews-foot {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
  }
  #product-comments-list-pagination.hs-reviews-pagination ul { justify-content: center; }
  #product-comments-list-footer.hs-reviews-foot .hs-reviews-write { width: 100%; }

  .hs-review-modal .modal-dialog { max-width: none; width: 100%; margin: 0; }
  .hs-review-modal .modal-content { border-radius: 0; min-height: 100vh; }
  .hs-review-modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .hs-review-modal-actions { flex-direction: column-reverse; }
  .hs-review-modal-actions .hs-reviews-write { width: 100%; }
}