/* OZ Cotizador — Design pack "elevarte"
 *
 * Tarjeta de loop segun el diseño de Elevarte:
 *   - Card blanca, esquinas 26px.
 *   - Foto a ras de la card (sin marco): las esquinas superiores las recorta
 *     el `overflow: hidden` de la card, y el borde inferior de la foto toca
 *     directamente el bloque blanco del título.
 *   - Título a la izquierda, dos líneas máximo.
 *   - Una sola píldora con borde naranja que contiene «Cotizar» (izquierda)
 *     y el precio (derecha).
 *
 * IMPORTANTE — por qué la card es `display: grid`:
 * `loop-product-card.php` emite precio y acciones como HERMANOS sueltos
 * (no hay un envoltorio común). Para meterlos en una misma píldora se coloca
 * a los dos en la MISMA fila del grid y el borde de la píldora lo pinta un
 * `::after` situado en esa fila, por detrás de ambos.
 *
 * `!important` en varias reglas: `assets/css/loops.css` se encola al renderizar
 * el shortcode/loop, así que se imprime DESPUÉS del CSS del pack y gana por
 * orden de cascada si no se fuerza.
 */

/* =========================================================
   VARIABLES
   Toma la paleta del sitio si está disponible (:root de la
   portada) y si no cae en los valores de marca.
   ========================================================= */
.ozc-product-card--pack-elevarte {
  --evp-cream: var(--ev-cream, #f4e9e1);
  --evp-ink: var(--ev-ink, #111111);
  --evp-orange: var(--ev-orange, #f2561b);
  --evp-surface: #ffffff;

  /* 26px = el mismo radio que usa el resto de la portada (`--ev-r`). */
  --evp-radius: 26px;

  /* Padding propio de la card: la foto deja de ir a ras y queda enmarcada por
     el blanco de la tarjeta. OJO — los offsets de abajo (`--evp-edge`) se
     miden desde el BORDE de la card, así que se les resta este padding para
     que el título y la píldora NO se muevan al cambiarlo. */
  --evp-card-pad: 10px;

  /* La foto ya no va a ras, así que necesita esquinas propias: el radio
     interior de una caja con padding es el de fuera menos el padding. */
  --evp-media-inset: 0px;
  --evp-media-radius: calc(var(--evp-radius) - var(--evp-card-pad));

  /* Geometría de la píldora: `--evp-edge` es la distancia absoluta desde el
     borde de la card; `--evp-pill-inset` es lo que queda por recorrer una vez
     descontado el padding. Después, padding interno hasta el texto y grosor
     del borde. El borde va a 2px: a 1.5px el naranja se lee gris apagado. */
  --evp-edge: 16px;
  --evp-pill-inset: calc(var(--evp-edge) - var(--evp-card-pad));
  --evp-pill-pad: 22px;
  --evp-pill-h: 48px;
  --evp-pill-border: 2px;

  /* El título arranca en la misma vertical que el texto «Cotizar» de la
     píldora, para que las dos líneas de texto de la card compartan eje. */
  --evp-text-pad: calc(var(--evp-pill-inset) + var(--evp-pill-pad));
}

/* =========================================================
   CARD
   ========================================================= */
.ozc-product-card--pack-elevarte {
  box-sizing: border-box;
  /* La card se declara contenedor para poder apretar la píldora según SU ancho
     y no según el de la ventana: en la rejilla de la tienda mide ~270px y en el
     carrusel de la portada ~400px, con el mismo viewport. Ver «CONTEXTOS». */
  container-type: inline-size;
  container-name: evcard;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  /* 1 media · 2 título · 3 relleno (empuja la píldora abajo) · 4 píldora */
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
  min-width: 0;
  padding: var(--evp-card-pad) !important;
  background: var(--evp-surface);
  border-radius: var(--evp-radius);
  overflow: hidden;
  color: var(--evp-ink);
  text-align: left;
}

.ozc-product-card--pack-elevarte *,
.ozc-product-card--pack-elevarte *::before,
.ozc-product-card--pack-elevarte *::after {
  box-sizing: border-box;
}

/* Cualquier sección que no se coloque explícitamente ocupa el ancho completo,
   para que nunca caiga en la columna del precio. */
.ozc-product-card--pack-elevarte .ozc-product-card__section {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
}

/* Partes que este diseño no usa. */
.ozc-product-card--pack-elevarte .ozc-product-card__category,
.ozc-product-card--pack-elevarte .ozc-product-card__excerpt,
.ozc-product-card--pack-elevarte .ozc-product-card__brand,
.ozc-product-card--pack-elevarte .ozc-product-card__badge,
.ozc-product-card--pack-elevarte .ozc-product-card__qty {
  display: none !important;
}

/* =========================================================
   MEDIA — foto a ras de la card
   El crema queda de fondo por si la foto no cubre toda la caja
   (imagen más estrecha que 1:1); con `cover` no llega a verse.
   ========================================================= */
.ozc-product-card--pack-elevarte .ozc-product-card__media {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: none;
  padding: var(--evp-media-inset);
  background: var(--evp-cream);
  /* El radio va también aquí, no solo en la img: si no, el crema del fondo
     asoma como un halo cuadrado por detrás de las esquinas redondeadas. */
  border-radius: var(--evp-media-radius);
  overflow: hidden;
  text-decoration: none;
}

.ozc-product-card--pack-elevarte .ozc-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover` para que la foto llene la caja como en el diseño; loops.css
     fuerza `contain !important`, de ahí el !important. */
  object-fit: cover !important;
  object-position: center;
  border-radius: var(--evp-media-radius);
  transition: transform 0.35s ease;
}

.ozc-product-card--pack-elevarte:hover .ozc-product-card__media img {
  transform: scale(1.03);
}

.ozc-product-card--pack-elevarte .ozc-product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--evp-media-radius);
  background: rgba(17, 17, 17, 0.06);
}

/* =========================================================
   TÍTULO
   ========================================================= */
.ozc-product-card--pack-elevarte .ozc-product-card__title {
  grid-column: 1 / -1;
  grid-row: 2;
  /* El aire de arriba va en `margin`, NO en `padding`: con `box-sizing:
     border-box` el padding entra dentro del `min-height` y un título de una
     línea reservaría menos alto total que uno de dos, dejando las cards
     desiguales. Con margin, el `min-height` mide solo el texto. */
  margin: 18px 0 0;
  padding: 0 var(--evp-text-pad);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--evp-ink);
  /* 2 líneas + ellipsis (el clamp lo pone loops.css). Reservar siempre el alto
     de dos líneas es lo que iguala la altura de todas las cards del loop. */
  min-height: calc(1.35em * 2);
}

.ozc-product-card--pack-elevarte .ozc-product-card__title a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   PÍLDORA (fila 4): borde pintado por ::after, «Cotizar» y precio encima
   ========================================================= */
.ozc-product-card--pack-elevarte::after {
  content: "";
  box-sizing: border-box;
  grid-column: 1 / -1;
  grid-row: 4;
  z-index: 0;
  min-height: var(--evp-pill-h);
  margin: 16px var(--evp-pill-inset) var(--evp-pill-inset);
  border: var(--evp-pill-border) solid var(--evp-orange);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ozc-product-card--pack-elevarte:hover::after,
.ozc-product-card--pack-elevarte:focus-within::after {
  background: var(--evp-orange);
}

/* --- «Cotizar» --- */
.ozc-product-card--pack-elevarte .ozc-product-card__actions {
  grid-column: 1;
  grid-row: 4;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-width: 0;
  margin: 16px 0 var(--evp-pill-inset) !important;
  padding: 0 0 0 calc(var(--evp-pill-inset) + var(--evp-pill-pad)) !important;
  background: transparent;
  border: 0;
}

.ozc-product-card--pack-elevarte .ozc-product-card__btn,
.ozc-product-card--pack-elevarte .ozc-product-card__btn--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto !important;
  min-width: 0;
  width: auto !important;
  height: 100%;
  min-height: var(--evp-pill-h);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--evp-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ozc-product-card--pack-elevarte:hover .ozc-product-card__btn,
.ozc-product-card--pack-elevarte:focus-within .ozc-product-card__btn {
  color: #ffffff !important;
}

.ozc-product-card--pack-elevarte .ozc-product-card__btn:focus-visible {
  outline: 2px solid var(--evp-orange);
  outline-offset: 3px;
}

/* --- Confirmación de «añadido» ---
   `assets/js/loops.js` cambia el texto del botón a «Agregado» durante ~1,6 s y
   le pone la clase `--added`. La píldora se rellena igual que en hover para que
   el cambio se lea de un vistazo aunque el puntero ya no esté encima; se usa
   `:has()` porque el borde lo pinta el `::after` de la CARD, no el botón. */
.ozc-product-card--pack-elevarte:has(.ozc-product-card__btn--added)::after {
  background: var(--evp-orange);
  border-color: var(--evp-orange);
}

.ozc-product-card--pack-elevarte:has(.ozc-product-card__btn--added) .ozc-product-card__btn,
.ozc-product-card--pack-elevarte:has(.ozc-product-card__btn--added) .ozc-product-card__price {
  color: #ffffff !important;
}

.ozc-product-card--pack-elevarte .ozc-product-card__btn--added {
  animation: ozc-evp-added .45s cubic-bezier(.22, .9, .3, 1.2);
}

/* Mientras viaja la petición al servidor, el texto se atenúa un poco. */
.ozc-product-card--pack-elevarte .ozc-product-card__btn--loading {
  opacity: .6;
}

@keyframes ozc-evp-added {
  0%   { transform: scale(.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ozc-product-card--pack-elevarte .ozc-product-card__btn--added { animation: none; }
}

/* --- Precio --- */
.ozc-product-card--pack-elevarte .ozc-product-card__price {
  grid-column: 2;
  grid-row: 4;
  z-index: 1;
  /* loops.css oculta el precio en TODAS las cards de loop; en este pack sí se
     muestra porque forma parte de la píldora del diseño. */
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: var(--evp-pill-h);
  margin: 16px 0 var(--evp-pill-inset) !important;
  padding: 0 calc(var(--evp-pill-inset) + var(--evp-pill-pad)) 0 10px !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--evp-ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.ozc-product-card--pack-elevarte:hover .ozc-product-card__price,
.ozc-product-card--pack-elevarte:focus-within .ozc-product-card__price {
  color: #ffffff;
}

/* Producto en oferta: el precio tachado va pequeño delante del vigente. */
.ozc-product-card--pack-elevarte .ozc-product-card__price del {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.55;
}

.ozc-product-card--pack-elevarte .ozc-product-card__price ins {
  text-decoration: none;
  color: inherit;
}

.ozc-product-card--pack-elevarte .ozc-product-card__price .screen-reader-text {
  display: none;
}

/* =========================================================
   WHATSAPP (si se activa en Ajustes → Loops)
   ========================================================= */
.ozc-product-card--pack-elevarte .ozc-product-card__wa-btn,
.ozc-product-card--pack-elevarte .ozc-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* =========================================================
   CONTEXTOS
   ========================================================= */

/* Cards estrechas (la rejilla de la tienda, ~270px): «Añadir al carrito» y el
   precio comparten píldora y con el padding de 22px se quedaban pegados el uno
   al otro (y con un precio de cuatro cifras el botón acabaría en «…»). Se aprieta
   el padding y se baja un punto la tipografía; las cards anchas del carrusel se
   quedan como estaban. Las variables no se pueden redefinir aquí (la consulta
   afecta a los descendientes, no al propio contenedor), así que se reescriben
   los paddings ya calculados. */
@container evcard (max-width: 340px) {
  .ozc-product-card--pack-elevarte .ozc-product-card__actions {
    padding-left: calc(var(--evp-pill-inset) + 14px) !important;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__price {
    padding-right: calc(var(--evp-pill-inset) + 14px) !important;
    padding-left: 8px !important;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__btn,
  .ozc-product-card--pack-elevarte .ozc-product-card__price {
    font-size: 14px !important;
  }

  /* Producto en oferta: en la píldora entran DOS precios (el tachado y el
     vigente), y la columna del precio es `auto`, así que todo lo que crece se
     lo come el botón hasta dejarlo en «Añadir al carrit…». Sólo en ese caso se
     aprieta un punto más. Las cards sin oferta se quedan como arriba. */
  .ozc-product-card--pack-elevarte:has(.ozc-product-card__price del) .ozc-product-card__actions {
    padding-left: calc(var(--evp-pill-inset) + 12px) !important;
  }

  .ozc-product-card--pack-elevarte:has(.ozc-product-card__price del) .ozc-product-card__price {
    gap: 4px;
    padding-right: calc(var(--evp-pill-inset) + 12px) !important;
    padding-left: 6px !important;
  }

  .ozc-product-card--pack-elevarte:has(.ozc-product-card__price del) .ozc-product-card__btn,
  .ozc-product-card--pack-elevarte:has(.ozc-product-card__price del) .ozc-product-card__price {
    font-size: 13px !important;
  }

  .ozc-product-card--pack-elevarte:has(.ozc-product-card__price del) .ozc-product-card__price del {
    font-size: 11px;
  }
}

/* Carrusel de OZ Sliders: las cards son anchas (~400px), el título respira más. */
.ozs.ozs--wc-products .ozc-product-card--pack-elevarte .ozc-product-card__title {
  font-size: 18px;
}

/* Relacionados en ficha: loops.css añade padding-bottom propio, así que se
   reimpone el de la card en vez de dejarlo a 0. */
.ozc-product-card--pack-elevarte.ozc-product-card--related {
  padding: var(--evp-card-pad) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .ozc-product-card--pack-elevarte {
    --evp-pill-pad: 14px;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__title,
  .ozs.ozs--wc-products .ozc-product-card--pack-elevarte .ozc-product-card__title {
    font-size: 15px;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__btn,
  .ozc-product-card--pack-elevarte .ozc-product-card__price {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .ozc-product-card--pack-elevarte {
    --evp-radius: 18px;
    /* Distancia al borde, no al padding: `--evp-pill-inset` sale del calc. */
    --evp-edge: 11px;
    --evp-card-pad: 6px;
    --evp-pill-pad: 12px;
    --evp-pill-h: 40px;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__title,
  .ozs.ozs--wc-products .ozc-product-card--pack-elevarte .ozc-product-card__title {
    font-size: 14px;
    /* margin, no padding: ver la nota de altura en la regla base del título. */
    margin-top: 12px;
  }

  .ozc-product-card--pack-elevarte .ozc-product-card__btn,
  .ozc-product-card--pack-elevarte .ozc-product-card__price {
    font-size: 13px !important;
  }
}