/* OZ Cotizador — Design pack "cygimport" (admin: Cygimport)
 *
 * Cards de loop (tienda / categorías / relacionados / sliders) bajo
 * `.ozc-product-card--pack-cygimport`.
 *
 * Referencia de diseño (imagen del cliente):
 * - Card blanca, esquinas redondeadas (16px) y sombra suave.
 * - Etiqueta VERDE (logo / marca) arriba a la DERECHA, sobre la imagen.
 * - Imagen del producto centrada (contain) sobre fondo blanco.
 * - Título negro, alineado a la IZQUIERDA, en negrita, MÁX. 2 líneas + «…».
 * - Categoría gris debajo del título, a la izquierda.
 * - Fila de acciones: selector de cantidad «‹ 1 ›» (chevrons azules) a la
 *   izquierda + botón azul «Cotizar» con ícono de carrito a la derecha.
 *
 * Solo estilo visual: la estructura/orden la define loop-product-card.php
 * y las secciones visibles se controlan en OZ Cotizador → Loops.
 * (La etiqueta verde muestra la MARCA del producto: asegúrate de tener
 *  "Mostrar marca" activo y una marca/taxonomía asignada al producto.)
 */

/* =========================================================
   VARIABLES DEL PACK + CONTENEDOR CARD
   ========================================================= */
.ozc-product-card--pack-cygimport {
  --cyg-blue: #1d4ed8;
  --cyg-blue-hover: #1a43be;
  --cyg-green: #aecf3d;
  --cyg-green-text: #33410a;
  --cyg-text: #1f2937;
  --cyg-muted: #6b7280;
  --cyg-border: #e9ebef;
  --cyg-surface: #ffffff;
  --cyg-radius: 16px;
  --cyg-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  --cyg-shadow-hover: 0 14px 30px rgba(15, 23, 42, 0.12);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cyg-surface);
  border: 1px solid var(--cyg-border);
  border-radius: var(--cyg-radius);
  box-shadow: var(--cyg-shadow);
  padding: 14px 14px 16px;
  text-align: left;
  color: var(--cyg-text);
  font-family: var(--OZ-Font-Base, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

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

.ozc-product-card--pack-cygimport:hover,
.ozc-product-card--pack-cygimport:focus-within {
  border-color: #dfe2e7;
  box-shadow: var(--cyg-shadow-hover);
  transform: translateY(-2px);
}

/* =========================================================
   IMAGEN (centrada, contain) + etiqueta verde arriba-derecha
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: none;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 14px 0;
  text-decoration: none;
}

.ozc-product-card--pack-cygimport .ozc-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  transition: transform 0.35s ease;
}

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

.ozc-product-card--pack-cygimport .ozc-product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  border-radius: 10px;
}

/* Etiqueta verde (logo / marca) — chip arriba a la DERECHA */
.ozc-product-card--pack-cygimport .ozc-product-card__media .ozc-product-card__badge {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  max-width: calc(100% - 20px);
  padding: 6px 14px;
  background: var(--cyg-green);
  border-radius: 999px;
  color: var(--cyg-green-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* =========================================================
   SECCIONES (resetea padding/márgenes del base)
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__section {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border: 0;
}

.ozc-product-card--pack-cygimport .ozc-product-card__media + .ozc-product-card__section {
  margin-top: 0;
}

/* Marca como texto y excerpt ocultos (la marca ya se ve como etiqueta verde) */
.ozc-product-card--pack-cygimport .ozc-product-card__brand,
.ozc-product-card--pack-cygimport .ozc-product-card__excerpt {
  display: none;
}

/* =========================================================
   TÍTULO (negro, negrita, IZQUIERDA, máx. 2 líneas + «…»)
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__title {
  margin: 0 0 6px 0;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cyg-text);
  text-align: left;

  /* Homogeneiza altura en el grid: máx. 2 líneas con puntos suspensivos */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: calc(1.3em * 2);
}

.ozc-product-card--pack-cygimport .ozc-product-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.ozc-product-card--pack-cygimport .ozc-product-card__title a:hover {
  color: #000;
}

/* =========================================================
   CATEGORÍA (texto gris, izquierda, debajo del título)
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__category {
  margin: 0 0 14px 0;
  color: var(--cyg-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;

  /* 1 línea con «…» para mantener alturas parejas */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   ACCIONES (fila: qty a la izquierda + botón Cotizar a la derecha)
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  margin-top: auto;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0 !important;
}

/* =========================================================
   QTY STEPPER (caja redondeada con borde; chevrons ‹ › azules)
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__qty {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  height: 44px;
  padding: 0 2px;
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 42px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  /* Oculta los glifos "−" / "+" del template; usamos chevrons ‹ › vía ::before */
  color: transparent;
  font-size: 0 !important;
  line-height: 0;
  cursor: pointer;
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn::before {
  content: "";
  display: block;
  width: 9px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.15s ease, transform 0.12s ease;
}

/* Chevron izquierdo ‹ (disminuir) */
.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn[data-ozc-qty-dec]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

/* Chevron derecho › (aumentar) */
.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn[data-ozc-qty-inc]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn:hover::before {
  opacity: 0.65;
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-btn:active::before {
  transform: scale(0.85);
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-input {
  width: 30px !important;
  min-width: 0 !important;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  border: 0;
  outline: 0;
  text-align: center;
  color: var(--cyg-text);
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1;
  -moz-appearance: textfield;
}

.ozc-product-card--pack-cygimport .ozc-product-card__qty-input::-webkit-outer-spin-button,
.ozc-product-card--pack-cygimport .ozc-product-card__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================================
   BOTÓN "Cotizar" (azul, con ícono de carrito)
   Nota: loops.css fuerza width:100% y border:1px en .__btn; lo revertimos.
   ========================================================= */
.ozc-product-card--pack-cygimport .ozc-product-card__btn,
.ozc-product-card--pack-cygimport .ozc-product-card__btn--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 0 18px !important;
  background: var(--cyg-blue) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Ícono de carrito antes del texto */
.ozc-product-card--pack-cygimport .ozc-product-card__btn--primary::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ozc-product-card--pack-cygimport .ozc-product-card__btn:hover,
.ozc-product-card--pack-cygimport .ozc-product-card__btn--primary:hover {
  background: var(--cyg-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(29, 78, 216, 0.28);
}

.ozc-product-card--pack-cygimport .ozc-product-card__btn:active,
.ozc-product-card--pack-cygimport .ozc-product-card__btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.ozc-product-card--pack-cygimport .ozc-product-card__btn:focus-visible,
.ozc-product-card--pack-cygimport .ozc-product-card__btn--primary:focus-visible {
  outline: 2px solid var(--cyg-blue);
  outline-offset: 2px;
}

/* Estado "Agregado" (WooCommerce ajax_add_to_cart) */
.ozc-product-card--pack-cygimport .ozc-product-card__btn--added::before {
  content: '✓';
  width: auto;
  height: auto;
  background: none;
  font-weight: 900;
}

.ozc-product-card--pack-cygimport .ozc-product-card__btn--loading {
  opacity: 0.75;
  pointer-events: none;
}

/* WhatsApp: oculto en el loop de este pack */
.ozc-product-card--pack-cygimport .ozc-product-card__wa {
  display: none !important;
}

/* =========================================================
   OZ-SLIDERS (carruseles [oz_wc_products])
   Dos correcciones sobre el módulo OZ-Sliders:
   1) Todas las cards al MISMO ALTO: el módulo fuerza
      `align-items:flex-start` en el track, así que los slides quedan a
      su altura de contenido (desiguales). Lo devolvemos a `stretch`:
      cada slide se estira al más alto y, como `.ozs__slide > *` ya es
      `height:100%`, la card llena el slide; el botón "Cotizar" queda
      abajo gracias a `margin-top:auto` en .__actions.
   2) La SOMBRA del hover no se recorta: `.ozs__viewport` y `.ozs__track`
      usan `overflow:hidden`. No podemos poner overflow:visible (rompe el
      carrusel), así que reservamos espacio con padding en el track; la
      sombra cae dentro del padding y el viewport crece con él, sin recorte.
   ========================================================= */
html body .ozs.ozs--wc-products ul.products.ozs__track {
  align-items: stretch !important;
  padding-top: 8px;
  padding-bottom: 34px;
}

/* El slide y la card ocupan todo el alto del track ya estirado. */
html body .ozs.ozs--wc-products ul.products.ozs__track > li.product.ozs__slide {
  align-items: stretch;
  height: auto;
}

html body .ozs.ozs--wc-products ul.products.ozs__track > li.product.ozs__slide > .ozc-product-card--pack-cygimport {
  height: 100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .ozc-product-card--pack-cygimport {
    padding: 12px 12px 14px;
  }

  .ozc-product-card--pack-cygimport .ozc-product-card__title {
    font-size: 15px;
  }

  .ozc-product-card--pack-cygimport .ozc-product-card__qty,
  .ozc-product-card--pack-cygimport .ozc-product-card__btn,
  .ozc-product-card--pack-cygimport .ozc-product-card__btn--primary {
    height: 42px;
  }
}

@media (max-width: 420px) {
  .ozc-product-card--pack-cygimport .ozc-product-card__actions {
    gap: 8px;
  }

  .ozc-product-card--pack-cygimport .ozc-product-card__btn,
  .ozc-product-card--pack-cygimport .ozc-product-card__btn--primary {
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}