:root {
  --indi-primary: #222d53;
  --indi-accent: #222d53;
  --indi-grey: #484848;
  --indi-bg-grey: #efefef;
  --indi-shadow: #949494;
  --indi-radius: 8px;

  /* === Variables del bloque premium === */
  --card-bg:#fff;
  --card-bg-2:#fafafa;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#0ea5e9;
  --accent-2:#6366f1;
  --success:#10b981;
  --shadow:0 12px 30px rgba(2,6,23,.08);
  --shadow-sm:0 6px 14px rgba(2,6,23,.06);
  --radius:16px;
  --radius-sm:12px;
  --ring:0 0 0 3px rgba(14,165,233,.25);
}


/* ======== CONTENEDOR PRINCIPAL ======== */
.indi-container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 20px;
}

/* ======== FILAS Y COLUMNAS ======== */
.indi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.indi-col-6 {
  flex: 1;
  min-width: 300px;
}

/* ======== IMÁGENES ======== */
.indi-product-image {
  display: flex;
  flex-direction: row-reverse;
  gap: 15px;
}
.indi-product-image-main {
  flex: 1;
  position: relative;
  background: var(--indi-bg-grey);
  padding: 10px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.indi-product-image-main:hover {
  transform: scale(1.02);
}
.indi-product-image-main img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.indi-product-image-slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.indi-product-image-slider img,
.indi-product-image-slider .indi-thumb-video {
  width: 70px;
  height: 70px;
  background: var(--indi-bg-grey);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
  position: relative;
  object-fit: cover;
}
.indi-product-image-slider img:hover,
.indi-product-image-slider .indi-thumb-video:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px var(--indi-shadow);
}
.indi-thumb-video::after {
  content: "\25B6";
  position: absolute;
  color: white;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ======== BREADCRUMB ======== */
.indi-breadcrumb {
  background: #eee;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 15px;
}
.indi-breadcrumb a {
  color: var(--indi-primary);
  text-decoration: none;
}
.indi-breadcrumb span:not(:last-child)::after {
  content: "/";
  margin: 0 6px;
  color: #999;
}

/* ======== TÍTULO Y MARCA ======== */
.indi-product-title h2 {
  font-size: 30px;
  margin-bottom: 5px;
  font-weight: 700;
}
.indi-product-title h4 {
  display: inline-block;
  background: var(--indi-accent);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}
.indi-brand-logo {
  margin: 10px 0;
}
.indi-brand-logo img {
     max-height: 44px;
    margin: -10px 0px -10px 0px;
}

/* ======== ESTRELLAS ======== */
.indi-product-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 12px;
}
.indi-product-rating i {
  color: #ffc600;
  font-size: 18px;
}
.indi-product-rating .indi-review {
  font-size: 13px;
  color: #777;
  margin-left: 6px;
}

/* ======== PRECIO ======== */
.indi-product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}
.indi-offer-price {
  font-size: 36px;
  font-weight: 700;
  color: var(--indi-accent);
}
.indi-sale-price {
  text-decoration: line-through;
  color: #888;
  font-size: 18px;
}

/* ======== DESCRIPCIÓN ======== */
.indi-product-details {
  margin: 20px 0;
}
.indi-product-details h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.indi-product-details p {
  font-size: 15px;
  color: #444;
  line-height: 1.4;
}

.indi-divider {
  height: 1px;
  background: #ddd;
  margin: 20px 0;
}

/* ======== BOTONES ======== */
.indi-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.indi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.indi-buy-now {
  background: var(--indi-accent);
  color: #fff;
}
.indi-buy-now:hover {
  background: #1b2342;
  box-shadow: 0 3px 6px var(--indi-shadow);
}

.indi-add-cart {
  background: #e0e0e0;
  color: #333;
}
.indi-add-cart:hover {
  background: #333;
  color: #fff;
}

.indi-heart {
  background: #f5f5f5;
  color: #555;
}
.indi-heart:hover {
  background: #ddd;
  color: var(--indi-accent);
}

.indi-add-cart-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.indi-add-cart-wrapper input[type="number"] {
  width: 60px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* ======== FICHA TÉCNICA ======== */
.indi-specs-section {
  margin-top: 50px;
  background: linear-gradient(135deg, #ffffff, #f3f3f3);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}
.indi-specs-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--indi-accent);
}
.indi-specs-section h3 {
  font-size: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.indi-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}
.indi-specs-table th,
.indi-specs-table td {
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  font-size: 15px;
}
.indi-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--indi-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, background 0.3s ease;
}
.indi-btn-pdf:hover {
  background: #1b2342;
  transform: translateY(-2px);
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .indi-row {
    flex-direction: column;
  }
  .indi-product-image {
    flex-direction: column;
    align-items: center;
  }
  .indi-product-image-slider {
    flex-direction: row;
  }
  .indi-btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}


/* === CONTENEDOR GENERAL === */
.productos-relacionados {
  background: #f9f9f9;
  padding: 3rem 2rem;
  border-top: 4px solid #003366;
  margin-top: 3rem;
}

.productos-relacionados > h2 {
  font-size: 2rem;
  text-align: center;
  color: #003366;
  margin-bottom: 2rem;
  font-weight: 700;
}

/* === GRID DE PRODUCTOS === */
.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
}

/* === TARJETA PREMIUM === */
.related.products ul.products li.product {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  height: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.5s forwards;
}

.related.products ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* === IMAGEN === */
.related.products ul.products li.product img {
  max-height: 160px;
  object-fit: contain;
  margin: 0 auto 1rem;
  transition: transform 0.3s ease;
}

.related.products ul.products li.product:hover img {
  transform: scale(1.05);
}

/* === TÍTULO === */
.related.products ul.products li.product h2.woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0.5rem 0 0.3rem;
  min-height: 40px;
}

/* === PRECIO === */
.related.products ul.products li.product .price {
  font-size: 1.1rem;
  color: #007bff;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

/* === BOTÓN AÑADIR AL CARRITO === */
.related.products ul.products li.product .add_to_cart_button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 8px;
  background: #0074cc;
  color: #fff;
  border: none;
  transition: background 0.3s ease;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin: 0 auto;
}

.related.products ul.products li.product .add_to_cart_button:hover {
  background: #005fa3;
}

/* === ANIMACIÓN DE ENTRADA === */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .productos-relacionados {
    padding: 2rem 1rem;
  }

  .related.products ul.products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* CONTENEDOR DE LOS PRODUCTOS RELACIONADOS */
.woocommerce .related.products ul.products,
.woocommerce-page .related.products ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  max-width: 1200px;
}

/* CADA TARJETA DE PRODUCTO */
.woocommerce .related.products ul.products li.product,
.woocommerce-page .related.products ul.products li.product {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
  padding: 1.5rem 1rem;
  transition: transform 0.3s ease;
  width: calc(33.333% - 2rem);
  min-width: 250px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* HOVER EFECTO */
.woocommerce .related.products ul.products li.product:hover {
  transform: translateY(-5px);
}

/* TÍTULO DEL PRODUCTO */
.woocommerce .related.products ul.products li.product h2,
.woocommerce-page .related.products ul.products li.product h2 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
  color: #333;
  font-weight: 500;
}

/* PRECIO */
.woocommerce .related.products ul.products li.product .price,
.woocommerce-page .related.products ul.products li.product .price {
  color: #0071ce;
  font-weight: 700;
  margin: 0.5rem 0;
}

/* BOTÓN */
.woocommerce .related.products ul.products li.product .button {
  background-color: #0071ce;
  color: white;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

.woocommerce .related.products ul.products li.product .button:hover {
  background-color: #005fa3;
}

/* IMAGEN */
.woocommerce .related.products ul.products li.product img {
  max-height: 180px;
  object-fit: contain;
  margin: 0 auto;
}

/* RESPONSIVE */
@media screen and (max-width: 1024px) {
  .woocommerce .related.products ul.products li.product {
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 600px) {
  .woocommerce .related.products ul.products li.product {
    width: 100%;
  }
}

/* === Icono carrito en Productos Relacionados (definitivo) === */

/* Normaliza el botón: siempre texto + espacio para icono */
.related.products ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product a.button.add_to_cart_button,
.related.products ul.products li.product a.button.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-indent: 0 !important;   /* evita “icon-only” por estilos del tema */
  font-size: .95rem !important; /* evita font-size:0 heredado */
  overflow: visible;
}

/* Pseudo del icono: por defecto sin fondo (si la máscara falla, no hay cuadrado) */
.related.products ul.products li.product a.add_to_cart_button::before,
.related.products ul.products li.product a.button.add_to_cart_button::before,
.related.products ul.products li.product a.button.ajax_add_to_cart::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  background: none;
}

/* Aplica la máscara SOLO si hay soporte (Base64 para evitar roturas de minificado) */
@supports (-webkit-mask-image: url("")) or (mask-image: url("")) {
  .related.products ul.products li.product a.add_to_cart_button::before,
  .related.products ul.products li.product a.button.add_to_cart_button::before,
  .related.products ul.products li.product a.button.ajax_add_to_cart::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgNGgtMmExIDEgMCAwIDAgMCAyaDEuM2wxLjYgOC4yQTIgMiAwIDAgMCAxMC44IDE2aDYuOWEyIDIgMCAwIDAgMi0xLjZMMjEgOEg3LjZsLS4zLTJIMjBhMSAxIDAgMSAwIDAtMkg3em0zIDE1YTEuNSAxLjUgMCAxIDEtMy4wMDEuMDAxQTEuNSAxLjUgMCAwIDEgMTAgMTl6bTkgMGExLjUgMS41IDAgMSAxLTMuMDAxLjAwMUExLjUgMS41IDAgMCAxIDE5IDE5eiIvPjwvc3ZnPg==");
            mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgNGgtMmExIDEgMCAwIDAgMCAyaDEuM2wxLjYgOC4yQTIgMiAwIDAgMCAxMC44IDE2aDYuOWEyIDIgMCAwIDAgMi0xLjZMMjEgOEg3LjZsLS4zLTJIMjBhMSAxIDAgMSAwIDAtMkg3em0zIDE1YTEuNSAxLjUgMCAxIDEtMy4wMDEuMDAxQTEuNSAxLjUgMCAwIDEgMTAgMTl6bTkgMGExLjUgMS41IDAgMSAxLTMuMDAxLjAwMUExLjUgMS41IDAgMCAxIDE5IDE5eiIvPjwvc3ZnPg==");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
  }
}

/* Fallback sin máscara: emoji (sin bloques sólidos) */
@supports not (-webkit-mask-image: url("")) and not (mask-image: url("")) {
  .related.products ul.products li.product a.add_to_cart_button::before,
  .related.products ul.products li.product a.button.add_to_cart_button::before,
  .related.products ul.products li.product a.button.ajax_add_to_cart::before {
    content: "🛒";
  }
}

/* === BOTÓN + ÍCONO EN RELACIONADOS (estable) === */

/* 1) Normaliza el botón (evita que el tema lo haga cuadrado) */
.related.products ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product a.button.add_to_cart_button,
.related.products ul.products li.product a.button.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-indent: 0 !important;
  font-size: .95rem !important;

  /* resets clave */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* 2) Pseudo del icono: Fallback por defecto con background-image (blanco) */
.related.products ul.products li.product a.add_to_cart_button::before,
.related.products ul.products li.product a.button.add_to_cart_button::before,
.related.products ul.products li.product a.button.ajax_add_to_cart::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;

  /* Fallback: SVG blanco como background (funciona en todos lados) */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'>\
    <path d='M7 4h-2a1 1 0 0 0 0 2h1.3l1.6 8.2A2 2 0 0 0 10.8 16h6.9a2 2 0 0 0 2-1.6L21 8H7.6l-.3-2H20a1 1 0 1 0 0-2H7zm3 15a1.5 1.5 0 1 1-3.001.001A1.5 1.5 0 0 1 10 19zm9 0a1.5 1.5 0 1 1-3.001.001A1.5 1.5 0 0 1 19 19z'/>\
  </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 3) Si el navegador soporta mask, usamos mask para heredar el color del texto */
@supports (-webkit-mask-image: url("")) or (mask-image: url("")) {
  .related.products ul.products li.product a.add_to_cart_button::before,
  .related.products ul.products li.product a.button.add_to_cart_button::before,
  .related.products ul.products li.product a.button.ajax_add_to_cart::before {
    /* desactiva el fallback */
    background-image: none;

    /* icono vía máscara (hereda currentColor) */
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgNGgtMmExIDEgMCAwIDAgMCAyaDEuM2wxLjYgOC4yQTIgMiAwIDAgMCAxMC44IDE2aDYuOWEyIDIgMCAwIDAgMi0xLjZMMjEgOEg3LjZsLS4zLTJIMjBhMSAxIDAgMSAwIDAtMkg3em0zIDE1YTEuNSAxLjUgMCAxIDEtMy4wMDEuMDAxQTEuNSAxLjUgMCAwIDEgMTAgMTl6bTkgMGExLjUgMS41IDAgMSAxLTMuMDAxLjAwMUExLjUgMS41IDAgMCAxIDE5IDE5eiIvPjwvc3ZnPg==");
            mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgNGgtMmExIDEgMCAwIDAgMCAyaDEuM2wxLjYgOC4yQTIgMiAwIDAgMCAxMC44IDE2aDYuOWEyIDIgMCAwIDAgMi0xLjZMMjEgOEg3LjZsLS4zLTJIMjBhMSAxIDAgMSAwIDAtMkg3em0zIDE1YTEuNSAxLjUgMCAxIDEtMy4wMDEuMDAxQTEuNSAxLjUgMCAwIDEgMTAgMTl6bTkgMGExLjUgMS41IDAgMSAxLTMuMDAxLjAwMUExLjUgMS41IDAgMCAxIDE5IDE5eiIvPjwvc3ZnPg==");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
  }
}

/* === Estados del CTA "Añadir al carrito" (loading + added) === */

/* Normaliza el botón (por si el tema lo hace cuadrado) */
.related.products ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product a.button.add_to_cart_button,
.related.products ul.products li.product a.button.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-indent: 0 !important;
  font-size: .95rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* SPINNER mientras WooCommerce aplica .loading */
.related.products ul.products li.product a.add_to_cart_button.loading,
.related.products ul.products li.product a.button.add_to_cart_button.loading,
.related.products ul.products li.product a.button.ajax_add_to_cart.loading {
  opacity: .9;
  pointer-events: none;
}

.related.products ul.products li.product a.add_to_cart_button.loading::before,
.related.products ul.products li.product a.button.add_to_cart_button.loading::before,
.related.products ul.products li.product a.button.ajax_add_to_cart.loading::before {
  /* cambiamos el icono por un spinner */
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: none !important;       /* anula máscara/fallback */
  border: .18em solid currentColor;
  border-right-color: transparent;    /* efecto spinner */
  border-radius: 50%;
  animation: coagro-spin .8s linear infinite;
}

/* CHECK de éxito cuando WooCommerce aplica .added */
.related.products ul.products li.product a.add_to_cart_button.added,
.related.products ul.products li.product a.button.add_to_cart_button.added,
.related.products ul.products li.product a.button.ajax_add_to_cart.added {
  background: #2e7d32 !important;    /* verde éxito */
  color: #fff !important;
}
.related.products ul.products li.product a.add_to_cart_button.added:hover,
.related.products ul.products li.product a.button.add_to_cart_button.added:hover,
.related.products ul.products li.product a.button.ajax_add_to_cart.added:hover {
  background: #256b28 !important;
}
.related.products ul.products li.product a.add_to_cart_button.added::before,
.related.products ul.products li.product a.button.add_to_cart_button.added::before,
.related.products ul.products li.product a.button.ajax_add_to_cart.added::before {
  content: "✔";
  background: none !important;        /* quita máscara/fallback */
  font-weight: 700;
  width: auto; height: auto;
}

/* Botón "Ver carrito" que Woo agrega (added_to_cart) */
.related.products ul.products li.product a.added_to_cart {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .5rem .9rem;
  border-radius: .5rem;
  background: transparent;
  color: #0071ce;
  border: 1px solid currentColor;
}
.related.products ul.products li.product a.added_to_cart:hover {
  background: rgba(0,113,206,.08);
}

/* Animación del spinner */
@keyframes coagro-spin { to { transform: rotate(360deg); } }




/* ======================================================================
   REPUESTOS COMPATIBLES — COAGRO PREMIUM (VERSIÓN FINAL)
   Scope total bajo .indi-compatibles-pro
   ====================================================================== */

/* ---------- Cabecera ---------- */
.indi-compatibles-pro{margin:3rem 0;color:var(--text)}
.indi-compatibles-pro__head{margin-block-end:1rem}
.indi-compatibles-pro__head h3{
  font-size:clamp(1.1rem,1.8vw,1.28rem);line-height:1.2;margin:0 0 .35rem;
  display:flex;align-items:center;gap:.5rem
}
.indi-compatibles-pro__head p{color:var(--muted);margin:.25rem 0 1rem}
.indi-compatibles-pro__head .indi-trust{margin-inline-start:.5rem;white-space:nowrap;color:var(--accent)}

/* ---------- Grid responsive ---------- */
.indi-compatibles-pro__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:stretch}
.indi-compatibles-pro__grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){.indi-compatibles-pro__grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.indi-compatibles-pro__grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .indi-compatibles-pro__grid.cols-4{grid-template-columns:1fr}
  .indi-compatibles-pro__grid{grid-auto-flow:column;grid-auto-columns:92%;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .indi-compatibles-pro__card{scroll-snap-align:start}
}
/* Centrado si solo hay un ítem */
.indi-compatibles-pro__grid.is-single{max-width:420px;margin-inline:auto}

/* ---------- Tarjeta ---------- */
.indi-compatibles-pro__card{
  position:relative;background:linear-gradient(180deg,var(--card-bg),var(--card-bg-2));
  border:1px solid var(--border);border-radius:var(--radius);padding:1rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;will-change:transform;
  max-width:320px;margin-inline:auto
}
.indi-compatibles-pro__card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#dbe3ee}
.indi-compatibles-pro__card:focus-within{box-shadow:var(--shadow),var(--ring)}

/* ---------- Badges ---------- */
.indi-compatibles-pro__badges{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;display:flex;gap:.35rem;z-index:2}
.indi-compatibles-pro .badge{all:unset;display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;padding:.28rem .5rem;border-radius:999px;font-weight:700;letter-spacing:.01em;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.indi-compatibles-pro .badge-compat{color:#263091;background:linear-gradient(180deg,#eef2ff,#e7e9ff)}
.indi-compatibles-pro .badge-original{color:#075985;background:linear-gradient(180deg,#ecfeff,#d9fbff)}
.indi-compatibles-pro .badge-top{color:#9a3412;background:linear-gradient(180deg,#fff7ed,#ffedd5)}

/* ---------- Media (imagen del repuesto) ---------- */
.indi-compatibles-pro__thumb{
  border-radius:var(--radius-sm);overflow:hidden;position:relative;aspect-ratio:1/1;
  height:220px;background:#f8fafc;display:flex;align-items:center;justify-content:center
}
.indi-compatibles-pro__thumb img{
  width:90%;height:90%;object-fit:contain;object-position:center;display:block;transform:scale(1.08);transition:transform .35s ease
}
.indi-compatibles-pro__card:hover .indi-compatibles-pro__thumb img{transform:scale(1.12)}
@media (max-width:640px){.indi-compatibles-pro__thumb{height:180px}}

/* ---------- Título + meta ---------- */
.indi-compatibles-pro__title{font-size:.98rem;margin:.2rem 0 .1rem;line-height:1.25}
.indi-compatibles-pro__title a{color:inherit;text-decoration:none}
.indi-compatibles-pro__title a:hover{color:var(--accent)}
.indi-compatibles-pro__meta{display:flex;gap:.75rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
.indi-compatibles-pro__meta .meta-item{display:inline-flex;gap:.35rem;align-items:center}

/* ---------- Precio ---------- */
.indi-compatibles-pro__price{font-weight:800;margin-top:.15rem;font-size:1rem}
.indi-compatibles-pro__price del{opacity:.55;margin-inline-end:.35rem;font-weight:500}
.indi-compatibles-pro__price ins{text-decoration:none;color:var(--accent)}

/* ---------- CTA base (normalización) ---------- */
.indi-compatibles-pro .indi-compatibles-pro__actions .button,
.indi-compatibles-pro .indi-compatibles-pro__actions .add_to_cart_button,
.indi-compatibles-pro .indi-compatibles-pro__actions .ajax_add_to_cart{
  display:inline-flex !important;align-items:center;justify-content:center;gap:.55rem;
  width:100% !important;min-width:0 !important;height:auto !important;
  padding:.85rem 1rem !important;border-radius:12px !important;
  background:var(--indi-accent) !important;color:#fff !important;border:0 !important;
  line-height:1.2 !important;font-size:.95rem !important;font-weight:700 !important;text-indent:0 !important;overflow:visible !important
}
/* Íconos FA */
.indi-compatibles-pro .indi-compatibles-pro__actions .add_to_cart_button::before,
.indi-compatibles-pro .indi-compatibles-pro__actions .ajax_add_to_cart::before{
  content:"\f07a";font-family:"Font Awesome 6 Free";font-weight:900;display:inline-block;line-height:1;color:#fff;opacity:.95;font-size:.95em;transform:translateY(.5px)
}
.indi-compatibles-pro .indi-compatibles-pro__actions .button.view-details::before{
  content:"\f06e";font-family:"Font Awesome 6 Free";font-weight:900;display:inline-block;line-height:1;color:#fff;opacity:.95;font-size:.95em;transform:translateY(.5px)
}
/* Hover + estados Woo */
.indi-compatibles-pro .indi-compatibles-pro__actions .button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(2,6,23,.08)}
.indi-compatibles-pro .indi-compatibles-pro__actions .button.loading{opacity:.9;pointer-events:none}
.indi-compatibles-pro .indi-compatibles-pro__actions .button.loading::before{content:"\f110";font-family:"Font Awesome 6 Free";font-weight:900;animation:fa-spin .8s linear infinite}
.indi-compatibles-pro .indi-compatibles-pro__actions .button.added{background:#2e7d32 !important}
.indi-compatibles-pro .indi-compatibles-pro__actions .button.added::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900}
/* Ver carrito tras añadir */
.indi-compatibles-pro .indi-compatibles-pro__actions .added_to_cart{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.45rem;padding:.55rem .9rem;border-radius:10px;
  color:var(--indi-accent);border:1px solid currentColor;background:transparent;font-weight:600
}
.indi-compatibles-pro .indi-compatibles-pro__actions .added_to_cart:hover{background:rgba(34,45,83,.06)}
/* Evita cuadrados vacíos */
.indi-compatibles-pro .indi-compatibles-pro__actions .button:empty{display:none !important}

/* ---------- CTA híbrido: texto desktop / SOLO icono móvil ---------- */
/* Móvil (≤640px): oculta texto y centra icono */
@media (max-width:640px){
  .indi-compatibles-pro .indi-compatibles-pro__actions .add_to_cart_button,
  .indi-compatibles-pro .indi-compatibles-pro__actions .ajax_add_to_cart,
  .indi-compatibles-pro .indi-compatibles-pro__actions .button.view-details{
    justify-content:center;text-indent:-9999px;white-space:nowrap;position:relative;min-height:44px
  }
  .indi-compatibles-pro .indi-compatibles-pro__actions .add_to_cart_button::before,
  .indi-compatibles-pro .indi-compatibles-pro__actions .ajax_add_to_cart::before,
  .indi-compatibles-pro .indi-compatibles-pro__actions .button.view-details::before{
    position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;font-size:1.25em;opacity:1;transform:none
  }
  .indi-compatibles-pro .indi-compatibles-pro__actions .button.loading::before{content:"\f110";animation:fa-spin .8s linear infinite}
  .indi-compatibles-pro .indi-compatibles-pro__actions .button.added::before{content:"\f00c"}
}
/* Desktop (>640px): texto + icono sutil */
@media (min-width:641px){
  .indi-compatibles-pro .indi-compatibles-pro__actions .button::before{opacity:.9}
  .indi-compatibles-pro .indi-compatibles-pro__actions .button:hover::before{opacity:1}
}

/* ---------- Footnote confianza + CTA “ver todos” ---------- */
.indi-compatibles-pro__foot{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:.35rem}
.indi-compatibles-pro__cta{text-align:center;margin-top:1rem}
.indi-compatibles-pro__cta .button{border-radius:12px;padding:.7rem 1rem}

/* ---------- Accesibilidad & performance ---------- */
.indi-compatibles-pro__card a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){
  .indi-compatibles-pro__card,.indi-compatibles-pro__thumb img,.indi-compatibles-pro__actions .button{transition:none}
}

/* ---------- Modo oscuro opcional ---------- */
@media (prefers-color-scheme:dark){
  .indi-compatibles-pro__card{border-color:#1f2937}
  .indi-compatibles-pro .badge-compat{color:#c7d2fe;background:linear-gradient(180deg,#1e293b,#0f172a)}
  .indi-compatibles-pro .badge-original{color:#a5f3fc;background:linear-gradient(180deg,#0b2b33,#061b20)}
}

/* Prioriza clic en miniaturas del slider */
.indi-product-image { position: relative; }
.indi-product-image-main { position: relative; z-index: 1; }
.indi-product-image-slider { position: relative; z-index: 3; }

/* Asegura clickeabilidad */
.indi-product-image-slider img { cursor: pointer; pointer-events: auto; }

/* Evita que el contenedor crezca y pise el slider: anima SOLO la imagen, no el contenedor */
.indi-product-image-main:hover { transform: none; }
.indi-product-image-main img { transition: transform .3s ease; }
.indi-product-image-main:hover img { transform: scale(1.02); }

/* 1) NO a transform en el contenedor (rompe el posicionamiento de elevateZoom) */
.indi-product-image-main:hover { transform: none !important; }
/* si quieres el efecto, aplícalo SOLO a la imagen: */
.indi-product-image-main img { transition: transform .3s ease; }
.indi-product-image-main:hover img { transform: scale(1.02); }

/* 2) Orden de capas correcto */
.indi-product-image { position: relative; }
.indi-product-image-main { position: relative; z-index: 1; }
.indi-product-image-slider { position: relative; z-index: 3; }

/* 3) El overlay de elevateZoom NO debe interceptar clicks */
.zoomContainer{ z-index: 2 !important; pointer-events: none !important; }

/* 4) Asegura clickeabilidad del slider */
.indi-product-image-slider img{ cursor:pointer; pointer-events:auto; }