/**
 * ecomlabs_related_product_blocks — tabla comparativa.
 * Scroll horizontal + columnas fijas (etiquetas + primer producto) con
 * position:sticky. Usa las variables del tema.
 */
.epc-compare {
  font-family: var(--font_primary, sans-serif);
  color: var(--color_font, #344054);
  margin: 2rem 0;
}

.epc-section {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.5rem;
}

.epc-section-head { margin-bottom: 1rem; }

.epc-h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary_color, #074D43);
  margin: 0;
}

/* Bloque de relacionados sin slider: rejilla de miniaturas del tema. */
.erpb-related-grid {
  display: grid;
  grid-template-columns: repeat(var(--erpb-per-row, 5), 1fr);
  gap: 16px;
}
@media (max-width: 1200px) { .erpb-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .erpb-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .erpb-related-grid { grid-template-columns: repeat(2, 1fr); } }

.epc-compare-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size; /* base para dimensionar columnas con cqw */
}

/* Tabla: layout fijo → todas las columnas de producto con el mismo ancho. */
.epc-compare-table {
  border-collapse: separate; /* obligatorio para columnas sticky */
  border-spacing: 0;
  table-layout: fixed;
  width: max-content; /* suma de columnas; si sobran, hay scroll horizontal */
}

/* Ancho de columna de producto: N visibles a la vez (--epc-per-row), etiqueta 200px. */
.epc-compare-table .epc-col-product,
.epc-compare-table .epc-cmp-cell {
  width: calc((100cqw - 200px) / var(--epc-per-row, 5));
}

.epc-compare-table th,
.epc-compare-table td {
  padding: 0.75rem;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #e4e7ec;
  border-left: 1px solid #e4e7ec;
  background: #fff;
  font-size: 0.85rem;
  word-break: break-word; /* el contenido no ensancha la columna en layout fijo */
}

.epc-col-product img { max-width: 100%; height: auto; }

/* Valores: mismo estilo que .data-sheet .value, alineados a la izquierda. */
.epc-compare-table .epc-cmp-cell {
  text-align: left;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--primary_color);
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
}

/* Título de producto con la misma altura que en las miniaturas del tema. */
.epc-compare .product-title {
  height: 59px;
  line-height: 1.5;
  font-size: 14px;
}

/* Columna 1: etiquetas (fija). Ancho fijo para que la columna 2 case exacto. */
.epc-compare-table .epc-col-label {
  position: sticky;
  left: 0;
  z-index: 2;
  will-change: transform; /* evita el parpadeo/repintado al hacer scroll con columnas sticky */
  text-align: left;
  font-weight: 600;
  color: var(--primary_color, #074D43);
  background: var(--background, #F9FAFB);
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

/* Columna 2: primer producto (fija, pegada a la columna 1 en left: 200px). */
.epc-compare-table .is-this {
  position: sticky;
  left: 200px;
  z-index: 1;
  will-change: transform;
  background: var(--button_s_bk_hover, #EAFCF4);
  font-weight: 600;
}

/* Etiquetas del grupo de características (columna izq. en desktop y banda en
   móvil): mismo formato que .product-information .product-features .data-sheet .name */
.epc-compare-table .epc-cmp-rowlabel,
.epc-compare-table .epc-cmp-groupcell {
  text-align: left;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #788190;
}

/* La cabecera debe quedar por encima de las celdas al desplazar */
.epc-compare-table thead .epc-col-label { z-index: 4; }
.epc-compare-table thead .is-this { z-index: 3; }

/* Cabecera de producto (miniatura del tema): alineada arriba para que las imágenes casen. */
.epc-col-product { min-width: 160px; vertical-align: top; }
.epc-cmp-thumb { position: relative; display: block; }

.epc-cmp-tag {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--button_p_color, #fff);
  background: var(--button_p_bk, #268458);
  border-radius: 8px;
  padding: 2px 10px;
}

.epc-cmp-switch {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 8px;
  color: var(--button_s_color, #074D43);
  background: var(--button_s_bk, #fff);
  border: 1px solid var(--button_s_border, #268458);
  text-decoration: none;
  text-transform: uppercase;
}
.epc-cmp-switch:hover {
  background: var(--button_s_bk_hover, #EAFCF4);
  color: var(--button_s_color, #074D43);
}

/* Banda de grupo (etiqueta a todo el ancho): solo se usa en móvil. */
.epc-cmp-grouplabel { display: none; }

/* Fila de precio */
.epc-price { font-weight: 700; color: var(--primary_color, #074D43); }
.epc-price-old { color: #98a2b3; font-weight: 400; margin-left: 0.3em; text-decoration: line-through; }

/* Fila de valoraciones (estrellas) */
.epc-rating { display: inline-flex; align-items: center; gap: 0.3em; }
.epc-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; color: #d9d9d9; }
.epc-stars::before { content: "\2605\2605\2605\2605\2605"; }
.epc-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }
.epc-stars-on::before { content: "\2605\2605\2605\2605\2605"; }
.epc-rating-count { font-size: 0.8em; color: #667085; }

/* Degradado inferior: insinúa que hay más filas ocultas bajo el botón. */
.epc-cmp-tablewrap { position: relative; }
.epc-cmp-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5em;
  pointer-events: none;
  z-index: 5; /* por encima de las columnas fijas (sticky con z-index) */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* Estilo del botón lo aporta .btn.btn-secondary del tema; solo lo centramos. */
.epc-cmp-showall { display: block; margin: 2rem auto 0; }

/* Móvil: columna de etiquetas fuera; el producto actual queda fijo a la
   izquierda y cada característica se muestra como banda a todo el ancho. */
@media (max-width: 575px) {
  .epc-h2 { font-size: 1.1rem; }

  /* La columna de etiquetas laterales se sustituye por las bandas de grupo. */
  .epc-compare-table .epc-col-label { display: none; }

  /* Producto actual fijo a la izquierda (ya no hay columna de etiquetas). */
  .epc-compare-table .is-this { left: 0; }

  /* 2 productos visibles a la vez (primero y segundo). */
  .epc-compare-table .epc-col-product,
  .epc-compare-table .epc-cmp-cell {
    width: 50cqw;
    min-width: 50cqw;
  }

  /* Banda de grupo: separa cada característica ocupando todo el ancho.
     El formato del texto (.name) viene de la regla base compartida. */
  .epc-cmp-grouplabel { display: table-row; }
  .epc-compare-table .epc-cmp-groupcell { background: var(--background, #F9FAFB); }
  /* Texto fijo al hacer scroll; left = padding de la celda para que no salte. */
  .epc-cmp-grouplabel-txt { position: sticky; left: 0.75rem; display: inline-block; }
}