/*
 * Los bloques de conversión.
 *
 * Todo se apoya en variables con valor por defecto: una tienda que no configure
 * nada se ve bien, y una que ponga sus colores en el kit de Elementor los hereda
 * sin tocar esto. Nada de `!important` ni de selectores de tres niveles — esto
 * convive con el tema del cliente, y ganar a la fuerza es la forma de que su
 * tema deje de poder cambiar nada.
 */

.mcp-packs,
.mcp-price,
.mcp-benefits,
.mcp-guarantees,
.mcp-shipbar,
.mcp-payment,
.mcp-rating {
  --mcp-radius: 12px;
  --mcp-border: #e3e6ee;
  --mcp-accent: var(--e-global-color-accent, #e0286b);
  --mcp-ink: var(--e-global-color-text, #1b2440);
  --mcp-muted: #6b7392;
  --mcp-ok-bg: #e8f6ec;
  --mcp-ok-ink: #1c7a3e;
}

/* ============================================================ valoraciones */

.mcp-rating { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.mcp-rating__stars { letter-spacing: 1px; color: #d8dce8; }
.mcp-rating__star.is-on { color: #f6b21b; }
.mcp-rating__score { font-weight: 700; color: var(--mcp-ink); }
.mcp-rating__count { color: var(--mcp-muted); text-decoration: underline; }

/* ================================================================ etiqueta */

.mcp-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--e-global-color-accent, #e0286b) 12%, transparent);
  color: var(--e-global-color-accent, #e0286b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ============================================================== beneficios */

.mcp-benefits { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.mcp-benefits__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
}

.mcp-benefits__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mcp-ok-bg);
  color: var(--mcp-ok-ink);
  font-size: 13px;
  font-weight: 700;
}

.mcp-benefits__icon svg { width: 12px; height: 12px; fill: currentColor; }

/* ================================================================== packs */

.mcp-packs { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

.mcp-packs__heading {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mcp-muted);
}

.mcp-packs__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }

.mcp-pack {
  position: relative;
  display: block;
  padding: 14px 16px;
  border: 1.5px solid var(--mcp-border);
  border-radius: var(--mcp-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcp-pack:hover { border-color: color-mix(in srgb, var(--mcp-accent) 40%, var(--mcp-border)); }

/* El destacado se marca con el borde, no con relleno: un bloque de color sólido
   compite con el botón de comprar, que es lo que tiene que ganar. */
.mcp-pack--destacado { border-color: var(--mcp-accent); }

.mcp-pack:has(input[type="radio"]:checked),
.mcp-pack.is-selected {
  border-color: var(--mcp-accent);
  box-shadow: 0 0 0 1px var(--mcp-accent);
}

.mcp-pack__ribbon {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mcp-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mcp-pack__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.mcp-pack__head input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mcp-accent); margin: 0; }

.mcp-pack__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mcp-pack__qty { font-size: 16px; font-weight: 700; color: var(--mcp-ink); }

.mcp-pack__save {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mcp-ok-bg);
  color: var(--mcp-ok-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mcp-pack__note { grid-column: 2; font-size: 13px; color: var(--mcp-muted); }
.mcp-pack__prices { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.mcp-pack__total { font-size: 18px; font-weight: 800; color: var(--mcp-ink); }
.mcp-pack__unit { font-size: 12px; color: var(--mcp-muted); }

/* --------------------------------------------- las variaciones por unidad */

/*
 * Sólo se ven las del pack elegido.
 *
 * Enseñar las nueve filas de los tres packs a la vez convierte la ficha en un
 * formulario, y un formulario no vende. Va con CSS y no con JavaScript para que
 * siga funcionando aunque el script no llegue a cargar; la clase `is-selected`
 * es el respaldo para navegadores sin `:has()`.
 */
.mcp-pack__variations {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mcp-border);
  flex-direction: column;
  gap: 8px;
}

.mcp-pack:has(input[name="mcp_pack"]:checked) .mcp-pack__variations,
.mcp-pack.is-selected .mcp-pack__variations { display: flex; }

.mcp-pack__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-pack__row-label { min-width: 68px; font-size: 13px; font-weight: 600; color: var(--mcp-accent); }

.mcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--mcp-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--mcp-ink);
  cursor: pointer;
}

.mcp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mcp-chip:has(input:checked) { border-color: var(--mcp-accent); box-shadow: 0 0 0 1px var(--mcp-accent); }
.mcp-chip__dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }

.mcp-pack__perk {
  display: block;
  margin: 12px -16px -14px;
  padding: 9px 16px;
  border-radius: 0 0 calc(var(--mcp-radius) - 2px) calc(var(--mcp-radius) - 2px);
  background: color-mix(in srgb, var(--mcp-accent) 7%, transparent);
  font-size: 13px;
  color: var(--mcp-ink);
}

/* ================================================================= precio */

.mcp-price { margin: 18px 0 10px; }
.mcp-price__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mcp-price__now { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--mcp-ink); }

/* Tachado y gris: con color competiría con el precio bueno. */
.mcp-price__was { font-size: 19px; color: #9aa1bb; text-decoration: line-through; }

.mcp-price__save {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mcp-ok-bg);
  color: var(--mcp-ok-ink);
  font-size: 13px;
  font-weight: 700;
}

.mcp-price__meta { margin: 6px 0 0; font-size: 13px; color: var(--mcp-muted); }
.mcp-price__free { color: var(--mcp-ok-ink); font-weight: 600; }

/* ======================================================== botón de comprar */

.mcp-cart__button {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--e-global-color-accent, #e0286b);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.mcp-cart__button:hover { filter: brightness(1.06); }
.mcp-cart__button:active { transform: translateY(1px); }
.mcp-cart__out { color: #9aa1bb; font-weight: 600; }

/* ===================================================== barra de envío gratis */

.mcp-shipbar { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: #f4f7fb; }

/* Oculta hasta que el navegador sabe el estado del carrito: aparecer con «te
   faltan 50 €» y corregirlo medio segundo después es peor que tardar. */
.mcp-shipbar:not(.is-ready) { display: none; }

.mcp-shipbar__text { margin: 0 0 8px; font-size: 13.5px; color: var(--mcp-ink); }
.mcp-shipbar.is-reached .mcp-shipbar__text { color: var(--mcp-ok-ink); font-weight: 600; }
.mcp-shipbar__track { height: 6px; border-radius: 999px; background: #dde3ee; overflow: hidden; }
.mcp-shipbar__fill { height: 100%; width: 0; border-radius: 999px; background: #1fae52; transition: width 0.35s ease; }

/* ============================================================== garantías */

.mcp-guarantees {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--mcp-border);
  border-radius: 12px;
}

.mcp-guarantees__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}

.mcp-guarantees__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef2fb;
}

.mcp-guarantees__icon svg { width: 15px; height: 15px; fill: #4a5478; }

/* ============================================================ pago seguro */

.mcp-payment { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; font-size: 12.5px; }
.mcp-payment__label { color: var(--mcp-muted); }

.mcp-payment__badge {
  padding: 5px 10px;
  border: 1px solid var(--mcp-border);
  border-radius: 6px;
  color: #4a5478;
  font-weight: 600;
}

/* ======================================================== sólo en el editor */

.mcp-block-notice {
  padding: 10px 12px;
  border: 1px dashed #b6bdd4;
  border-radius: 8px;
  background: #f7f8fc;
  font-size: 13px;
  color: #5a6280;
}

@media (max-width: 480px) {
  .mcp-pack__head { grid-template-columns: auto 1fr; }
  .mcp-pack__prices { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; }
  .mcp-price__now { font-size: 28px; }
}

/* ========================================================== prueba social */

.mcp-proof { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; font-size: 13px; }
.mcp-proof__views { margin: 0; color: #6b7392; }
.mcp-proof__views::before { content: "👀"; margin-right: 5px; }
.mcp-proof__stock { margin: 0; color: #b4531a; font-weight: 600; }
.mcp-proof__stock::before { content: "🔥"; margin-right: 5px; }

/* -------------------------------------------------- popup de compras */

.mcp-pop {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 330px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 28, 60, 0.16);
  /* Fuera de pantalla hasta que hay algo que decir: un hueco reservado
     desplaza la maquetación y penaliza el CLS de la página. */
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

.mcp-pop.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.mcp-pop__link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mcp-pop__img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.mcp-pop__text { font-size: 13px; line-height: 1.35; color: #1b2440; }
.mcp-pop__text span { display: block; margin-top: 2px; font-size: 11px; color: #9aa1bb; }

.mcp-pop__close {
  border: 0;
  background: none;
  color: #9aa1bb;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

/* En un móvil ocuparía media pantalla justo encima del botón de comprar. */
@media (max-width: 560px) {
  .mcp-pop { left: 10px; right: 10px; max-width: none; bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   La tabla de la comparativa de la descripción generada.

   Hereda el color en vez de fijarlo. Una tabla con grises propios se ve gris
   sobre gris en la mitad de los temas, y en uno oscuro no se lee: `currentColor`
   con transparencia funciona igual de bien en los dos.
   --------------------------------------------------------------------------- */

.mcp-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.mcp-compare th,
.mcp-compare td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.mcp-compare thead th {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  border-bottom-width: 2px;
}

.mcp-compare tbody th {
  font-weight: 600;
  width: 34%;
}

/* La columna del producto: resaltada por peso y por un fondo mínimo, no por un
   color de marca. Rellenarla con el color primario del cliente convierte la
   tabla en un cartel y deja de leerse como una comparación honesta. */
.mcp-compare__ours {
  font-weight: 600;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.mcp-compare tbody tr:last-child th,
.mcp-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* En un móvil una tabla de tres columnas se sale de la pantalla; se deja
   desplazable en su propia caja para que no arrastre la página entera. */
@media (max-width: 640px) {
  .mcp-compare { font-size: 14px; }
  .mcp-compare th,
  .mcp-compare td { padding: 10px; }
}