/* EBC Frenos — LISTADO DE PRODUCTOS (tarjeta tipo ProductCard del design-system).
 *
 * Una sola tarjeta para dos contenedores:
 *   · listado de categoría nativo  →  #js-product-list .products
 *   · resultados de find4ufilter   →  .find4u-results .products
 * La maqueta de cada tarjeta la define el override de la miniatura
 * (templates/catalog/_partials/miniatures/product.tpl). El sticker de gama lo
 * inyecta ebc-listing.js (color por gama, sin hardcodear productos). */

/* ============================================================= *
 *  1) Layout de página: sin columna izquierda vacía en categoría
 * ============================================================= */
body#category #left-column { display: none !important; }

/* Alineación EXACTA con el resto del sitio.
 * El diseño EBC de categoría es full-width (sin facetas). PrestaShop/hummingbird
 * mete breadcrumb y contenido en `.container` de Bootstrap (cap + box-model y
 * gutters propios) que los descuadraban. En vez de pelear con ese contenedor,
 * los forzamos a ANCHO COMPLETO con el MISMO token `--page-pad-x` que usan
 * header, logo, sticker de vehículo y footer sobre filas full-bleed. Así el
 * borde de contenido cae en idéntica vertical en toda la página. */
body#category .breadcrumb__wrapper > .container,
body#category .columns-container {
  display: block !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--page-pad-x) !important;
}
body#category #center-column {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Página de resultados del filtro: MISMO ancho full-width que el resto del sitio.
 * Su body es #module-find4ufilter-results (no #category), así que la liberación
 * de arriba no le aplicaba y el `.container` de Bootstrap la dejaba a ~1320 —
 * más estrecha que las demás páginas. La liberamos con el MISMO token
 * `--page-pad-x` (bordes alineados con header/footer/categoría) y la rejilla
 * sigue el ancho del proyecto (`--page-max`): si algún día se sube a 1800 en un
 * único sitio (ebc.css), esta página lo hereda sola. */
body#module-find4ufilter-results .breadcrumb__wrapper > .container,
body#module-find4ufilter-results .columns-container {
  display: block !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--page-pad-x) !important;
}
body#module-find4ufilter-results #content {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.find4u-results { max-width: var(--page-max, 1600px); margin-inline: auto; }

/* ============================================================= *
 *  2) Rejilla de tarjetas (4 columnas, mockup Category.jsx)
 * ============================================================= */
#js-product-list .products,
.find4u-results .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1200px) { #js-product-list .products, .find4u-results .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { #js-product-list .products, .find4u-results .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { #js-product-list .products, .find4u-results .products { grid-template-columns: 1fr; } }

/* ============================================================= *
 *  3) Tarjeta
 * ============================================================= */
.ebc-card {
  position: relative;
  display: flex;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-soft, #e7e9ee);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,22,26,.06));
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ebc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 16px 36px rgba(20,22,26,.14));
  border-color: var(--blue-300, #9cc0f0);
}
.ebc-card__inner { display: flex; flex-direction: column; width: 100%; height: 100%; }

/* ---- imagen: cuadrada y rellenando el encuadre ---- */
.ebc-card__media {
  position: relative;
  display: block;
  padding: 12px 12px 0;
}
.ebc-card__media .product-miniature__image-container,
.ebc-card__media .thumbnail-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: var(--gray-100, #f1f3f7);
}
.ebc-card__media .product-miniature__image-link,
.ebc-card__media picture { display: block; width: 100%; height: 100%; }
.ebc-card__media img,
.ebc-card__media .product-miniature__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 320ms var(--ease-out, ease);
}
.ebc-card:hover .ebc-card__media img { transform: scale(1.04); }

/* ---- sticker de gama (lo pinta el JS; sensible al color de la gama) ---- */
.ebc-range-badge {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  font-family: var(--font-heading, sans-serif); font-weight: 700;
  font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 9px; border-radius: var(--radius-xs, 5px);
  background: var(--gray-500, #6b7280); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.ebc-range-badge[hidden] { display: none; }

/* ---- bandera de oferta (product-flags nativo) ---- */
.ebc-card__media .product-flags {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  margin: 0; padding: 0; list-style: none;
}
.ebc-card__media .product-flags li {
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 8px; border-radius: var(--radius-xs, 5px);
  background: var(--action, #e4322b); color: #fff; line-height: 1;
}

/* ---- cuerpo ---- */
.ebc-card__body { display: flex; flex-direction: column; gap: 8px; padding: 13px 15px 15px; flex: 1; }
/* En PC (dispositivos con hover) la imagen hace zoom al pasar el ratón. Como el
   partial de imagen viene del tema padre y no recorta el desbordamiento, la imagen
   ampliada se PINTA un poco por debajo de su marco (un transform no desplaza el
   layout, solo pinta encima) y llegaba a tapar el chip de eje. Le damos algo más de
   aire arriba del cuerpo para que el zoom no lo pise. Va DESPUÉS de la regla base
   (mismo peso, gana por orden) para que el shorthand `padding` no lo resetee. En
   táctil (sin hover) no aplica, para no añadir hueco muerto. */
@media (hover: hover) and (pointer: fine) {
  .ebc-card__body { padding-top: 22px; }
}
.ebc-card__infos { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.ebc-card__meta { display: flex; align-items: center; gap: 8px; }

/* chip de eje */
.ebc-axle-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading, sans-serif); font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #5b6270);
  background: var(--surface-sunken, #f1f3f7);
  border: 1px solid var(--border-soft, #e7e9ee);
  padding: 3px 9px 3px 7px; border-radius: var(--radius-pill, 999px); line-height: 1;
}
.ebc-axle-chip__glyph { position: relative; display: inline-flex; align-items: center; width: 26px; height: 11px; }
.ebc-axle-chip__bar { flex: 1; height: 2px; background: currentColor; opacity: .35; border-radius: 2px; }
.ebc-axle-chip__wheel { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; opacity: .3; box-sizing: border-box; flex: none; }
.ebc-axle-chip--front .ebc-axle-chip__wheel--front,
.ebc-axle-chip--rear  .ebc-axle-chip__wheel--rear,
.ebc-axle-chip--both  .ebc-axle-chip__wheel { background: var(--action, #e4322b); border-color: var(--action, #e4322b); opacity: 1; }

/* Sistema de freno (Ø disco · marca de pinza) — dato CLAVE para identificar la
   pastilla cuando el coche monta varias por eje (find4ufilter Fase 9). En su
   propia línea bajo el eje, resaltado en ROJO corporativo con texto blanco. */
.ebc-card__brake {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  margin-top: 9px;
  font-family: var(--font-heading, sans-serif); font-weight: 800;
  font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  color: #fff;
  background: var(--action, #e4322b);
  padding: 7px 15px; border-radius: var(--radius-pill, 999px); line-height: 1.15;
  box-shadow: 0 2px 8px rgba(228, 50, 43, .28);
}
/* Icono SVG de diámetro (círculo con la línea cruzándolo) — sustituye a la «Ø»
   de la fuente, que salía con el trazo sin cruzar el círculo. Escala con el
   texto (1em) y se alinea con la línea base. */
.ebc-card__brake-ico {
  display: inline-block; width: 1.08em; height: 1.08em;
  vertical-align: -0.19em; margin-right: 3px;
}

/* Nota de montaje del catálogo de marca (HEL: «Con ABS», «Con tambores
   traseros»…). Distingue referencias del mismo vehículo: visible pero
   secundaria respecto al chip de freno (contorno, sin relleno). */
.ebc-card__note {
  align-self: flex-start;
  margin-top: 9px;
  font-family: var(--font-heading, sans-serif); font-weight: 700;
  font-size: 13px; line-height: 1.25;
  color: var(--action, #e4322b);
  border: 1.5px solid var(--action, #e4322b);
  padding: 5px 12px; border-radius: var(--radius-pill, 999px);
}

.ebc-card__title {
  font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 15px;
  line-height: 1.28; color: var(--text-strong, #14161a); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.56em;
}
.ebc-card__title:hover { color: var(--blue-700, #00378d); }

.ebc-card__ref {
  font-family: var(--font-data, monospace); font-size: 12px; letter-spacing: .01em;
  color: var(--text-muted, #5b6270); font-variant-numeric: tabular-nums slashed-zero;
}
.ebc-card__ref:empty { display: none; }

.ebc-card__fit {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body, sans-serif); font-weight: 600; font-size: 12.5px;
}
.ebc-card__fit--yes { color: var(--fit-yes-fg, #1f9b4e); }
.ebc-card__fit--no { color: var(--fit-no-fg, #c81e1e); }
.ebc-card__fit svg { flex: none; }
.ebc-card__fit[hidden] { display: none; }

/* ---- pie: precio + botón ---- */
.ebc-card__footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 10px;
}
.ebc-card__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ebc-card__price {
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 21px; line-height: 1;
  color: var(--text-price, var(--action, #e4322b)); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums slashed-zero;
}
.ebc-card__was {
  font-family: var(--font-data, monospace); font-size: 13px;
  color: var(--text-faint, #9aa0ab); text-decoration: line-through;
}

/* botón de carrito cuadrado rojo (mockup) */
.ebc-card__actions { flex: none; }
.ebc-card__form { margin: 0; }
.ebc-card__add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0;
  border: none; border-radius: var(--radius, 10px);
  background: var(--action, #e4322b); color: #fff; cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 120ms;
}
.ebc-card__add:hover { background: var(--action-hover, #c81e1e); box-shadow: var(--shadow-action, 0 6px 16px rgba(228,50,43,.32)); }
.ebc-card__add:active { transform: translateY(1px); }
.ebc-card__add[disabled] { background: var(--gray-300, #cbd0d9); cursor: not-allowed; box-shadow: none; }
.ebc-card__add--view { background: var(--blue-700, #00378d); }
.ebc-card__add--view:hover { background: var(--blue-800, #002a6b); }

/* ============================================================= *
 *  4) Desactivar vista rápida (quickview) en toda la web
 * ============================================================= */
.product-miniature__quickview-button,
.product-miniature__quickview,
.quick-view,
.js-quickview { display: none !important; }

/* ============================================================= *
 *  5) Cabecera de resultados find4ufilter
 * ============================================================= */
.find4u-results { padding: 22px 24px var(--section-y, 64px); }
.find4u-results__header { margin-bottom: 18px; }
.find4u-results__count {
  font-family: var(--font-body, sans-serif); font-size: 15px; color: var(--text-muted, #5b6270); margin: 0;
}
.find4u-results__count strong { color: var(--text-strong, #14161a); }
.find4u-results__empty { margin-top: 16px; }

/* ============================================================= *
 *  6) Categoría-mundo (Coche) con vehículo activo: gamas compatibles
 *     de los 3 tipos (Pastillas/Discos/Kits) agrupadas por sección.
 * ============================================================= */
.ebc-worldcompat { display: flex; flex-direction: column; gap: clamp(26px, 3.5vw, 42px); }
.ebc-worldcompat__title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-strong, #14161a);
  margin: 0 0 14px;
}
/* La caja de cards del hook (.find4u-compat) ya trae su propio borde/espaciado. */
.ebc-worldcompat__sec .find4u-compat { margin: 0; }