/* OZ Cotizador — Design pack "spilltek" (admin: Spilltek)
 * Cards de catálogo: .ozc-product-card__* bajo .ozc-product-card--pack-spilltek
 * + carrito flotante (.ozc-sidecart-fab).
 *
 * Diseño de referencia (spilltek.pe):
 * - Tarjeta blanca, borde gris muy suave, esquinas redondeadas, contenido CENTRADO.
 * - Imagen de producto contenida sobre fondo blanco (no recortada).
 * - Título en AZUL, en negrita; precio en VERDE; ambos centrados.
 * - Fila inferior: botón "Cotizar" + selector de cantidad (− 1 +).
 * - Hover de los botones: VERDE #0e7a2e.
 * - Carrito flotante: botón circular AZUL MARINO, ícono blanco y badge VERDE.
 */

.ozc-product-card--pack-spilltek {
  --ozc-pack-accent: #0e7a2e;          /* verde de marca (hover de botones) */
  --ozc-pack-accent-hover: #128a34;
  --ozc-pack-accent-soft: rgba(22, 161, 61, 0.10);
  --ozc-pack-title: #1d386f;           /* azul marino de marca */
  --ozc-pack-price: #0e7a2e;           /* verde del precio */
  --ozc-pack-surface: #ffffff;
  --ozc-pack-media-bg: #ffffff;
  --ozc-pack-border: #e7e7e7;
  --ozc-pack-border-hover: #d7d7d7;
  --ozc-pack-text: #333333;
  --ozc-pack-muted: #9aa1ab;
  --ozc-pack-radius: 14px;
  --ozc-pack-btn-radius: 8px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ozc-pack-surface);
  border: 1px solid var(--ozc-pack-border);
  border-radius: var(--ozc-pack-radius);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  padding: 1.15rem 1.15rem 1.25rem;
  text-align: center;
  color: var(--ozc-pack-text);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.ozc-product-card--pack-spilltek:hover,
.ozc-product-card--pack-spilltek:focus-within {
  border-color: var(--ozc-pack-border-hover);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  transform: translateY(-3px);
}

.ozc-product-card--pack-spilltek .ozc-product-card__section {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0.6rem;
}

.ozc-product-card--pack-spilltek .ozc-product-card__section:first-child {
  margin-top: 0;
}

/* ---- Imagen ---- */
.ozc-product-card--pack-spilltek .ozc-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--ozc-pack-media-bg);
  padding: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.ozc-product-card--pack-spilltek .ozc-product-card__media img,
.ozc-product-card--pack-spilltek .ozc-product-card__placeholder {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.ozc-product-card--pack-spilltek:hover .ozc-product-card__media img,
.ozc-product-card--pack-spilltek:focus-within .ozc-product-card__media img {
  transform: scale(1.04);
}

.ozc-product-card--pack-spilltek .ozc-product-card__placeholder {
  background: linear-gradient(145deg, #f6f6f6 0%, #ececec 100%);
}

/* Badge de marca (si se muestra): pastilla gris, arriba a la derecha */
.ozc-product-card--pack-spilltek .ozc-product-card__media .ozc-product-card__badge {
  top: 12px;
  right: 12px;
  left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f2f3f5;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.ozc-product-card--pack-spilltek .ozc-product-card__media + .ozc-product-card__section {
  margin-top: 1rem;
}

/* ---- Categoría ---- */
.ozc-product-card--pack-spilltek .ozc-product-card__category {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ozc-pack-muted);
}

/* ---- Título (azul, centrado, 2 líneas) ---- */
.ozc-product-card--pack-spilltek .ozc-product-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ozc-pack-title);
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  word-break: break-word;
  min-height: 2.6em !important;
  max-height: 2.6em !important;
}

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

.ozc-product-card--pack-spilltek .ozc-product-card__title a:hover,
.ozc-product-card--pack-spilltek .ozc-product-card__title a:focus-visible {
  color: var(--ozc-pack-accent);
}

/* Marca como texto: oculta (se usa el badge sobre la imagen) */
.ozc-product-card--pack-spilltek .ozc-product-card__brand {
  display: none;
}

/* ---- Precio (verde, grande, centrado) ---- */
.ozc-product-card--pack-spilltek .ozc-product-card__price {
  color: var(--ozc-pack-price);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.ozc-product-card--pack-spilltek .ozc-product-card__price del {
  color: var(--ozc-pack-muted);
  font-weight: 500;
  font-size: 0.95rem;
  margin-right: 0.4rem;
}

/* ---- Fila de acciones: "Cotizar" + cantidad ---- */
.ozc-product-card--pack-spilltek .ozc-product-card__actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Botón "Cotizar" (a la izquierda) */
.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--ozc-pack-border);
  border-radius: var(--ozc-pack-btn-radius);
  background: var(--ozc-pack-surface);
  color: var(--ozc-pack-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* El pack base añade un ícono de carrito con ::before/::after: aquí no se usa. */
.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary::before,
.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary::after {
  content: none;
  display: none;
}

/* Hover: VERDE #0e7a2e */
.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary:hover {
  background: var(--ozc-pack-accent);
  border-color: var(--ozc-pack-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(22, 161, 61, 0.22);
  transform: translateY(-1px);
}

.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary:active {
  background: var(--ozc-pack-accent-hover);
  border-color: var(--ozc-pack-accent-hover);
}

.ozc-product-card--pack-spilltek .ozc-product-card__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 161, 61, 0.25);
}

/* Selector de cantidad (a la derecha) */
.ozc-product-card--pack-spilltek .ozc-product-card__qty {
  order: 2;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  margin: 0;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ozc-pack-border);
  border-radius: var(--ozc-pack-btn-radius);
  background: var(--ozc-pack-surface);
  color: var(--ozc-pack-text);
  overflow: hidden;
  box-sizing: border-box;
}

.ozc-product-card--pack-spilltek .ozc-product-card__qty-btn {
  width: 2.2rem;
  min-height: 100%;
  border: 0;
  color: var(--ozc-pack-text);
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover de los botones de cantidad: VERDE #0e7a2e */
.ozc-product-card--pack-spilltek .ozc-product-card__qty-btn:hover,
.ozc-product-card--pack-spilltek .ozc-product-card__qty-btn:focus-visible {
  background: var(--ozc-pack-accent-soft);
  color: var(--ozc-pack-accent);
  outline: none;
}

.ozc-product-card--pack-spilltek .ozc-product-card__qty-input {
  flex: 0 0 auto;
  width: 2.3rem;
  min-width: 2rem;
  min-height: 100%;
  padding: 0 0.2rem;
  border: 0;
  text-align: center;
  color: var(--ozc-pack-text);
  font-size: 0.95rem;
  font-weight: 700;
  background: transparent;
  -moz-appearance: textfield;
}

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

.ozc-product-card--pack-spilltek .ozc-product-card__qty-input:focus {
  outline: none;
}

/* ---- Cards angostas (móvil/tablet): apilar "Cotizar" sobre cantidad ---- */
.ozs--wc-products .ozc-product-card--pack-spilltek {
  container-type: inline-size;
}

@container (max-width: 260px) {
  .ozs--wc-products .ozc-product-card--pack-spilltek .ozc-product-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ozs--wc-products .ozc-product-card--pack-spilltek .ozc-product-card__qty,
  .ozs--wc-products .ozc-product-card--pack-spilltek .ozc-product-card__btn--primary {
    width: 100%;
    max-width: 100%;
  }
  .ozs--wc-products .ozc-product-card--pack-spilltek .ozc-product-card__qty {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ozc-product-card--pack-spilltek {
    padding: 0.9rem 0.9rem 1rem;
  }
  .ozc-product-card--pack-spilltek .ozc-product-card__price {
    font-size: 1.3rem;
  }
}

/* ====================================================================
 * Carrito flotante (FAB) — variante de marca Spilltek:
 * botón circular AZUL MARINO (#1d386f), ícono del carrito BLANCO, y
 * badge de conteo VERDE (#0e7a2e) con número BLANCO arriba a la izquierda.
 * Se usa !important en el fondo para imponer el azul por encima del
 * estilo inline que el plugin pone desde sus ajustes.
 * ==================================================================== */
.ozc-sidecart-fab {
  background: var(--ozc-pack-title, #1d386f) !important; /* azul marino de marca */
  color: #ffffff;                 /* ícono blanco (svg con fill=currentColor) */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(29, 56, 111, 0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ozc-sidecart-fab:hover,
.ozc-sidecart-fab:focus-visible {
  background: #16294f !important;  /* azul marino más oscuro en hover */
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(29, 56, 111, 0.40);
  outline: none;
}

.ozc-sidecart-fab__icon {
  color: #ffffff;                 /* ícono carrito en blanco */
}

/* Badge de conteo: círculo VERDE de marca con número BLANCO, arriba a la izquierda */
.ozc-sidecart-fab .ozc-sidecart-count {
  position: absolute;
  top: -4px;
  left: -4px;
  right: auto;
  width: 22px;
  min-width: 0;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: var(--ozc-pack-accent, #0e7a2e);  /* verde de marca */
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ====================================================================
   CAJÓN DEL CARRITO (sidecart) — paleta Spilltek: AZUL MARINO + VERDE.
   El base (sidecart.css) trae naranja #f15a22 y se encola DESPUÉS de
   este pack; por eso duplicamos la clase (.ozc-sidecart.ozc-sidecart,
   especificidad 0,2,0) para ganar la cascada sin tocar el plugin base.
   Con accent navy: cabecera navy con texto blanco (default), pasos +/-
   navy. "Ver carrito" en verde de marca. WhatsApp conserva su verde.
   ==================================================================== */
.ozc-sidecart.ozc-sidecart {
  --ozc-sc-accent:      #1d386f;   /* azul marino (antes naranja #f15a22) */
  --ozc-sc-accent-dark: #14294f;   /* navy más oscuro (degradado/hover) */
  --ozc-sc-yellow:      #0e7a2e;   /* verde: botón "Ver carrito" */
  --ozc-sc-yellow-dark: #128a34;
}

/* "Seguir cotizando": hover en tinte azulado neutro (antes naranja). */
.ozc-sidecart .ozc-sidecart__btn--continue:hover {
  background: #f3f6fb !important;
}

/* ====================================================================
   Carrito cotizador (.ozc-quote-cart) de /carrito/ — colores de marca.
   Los tokens viven en quote-cart.css con scope .ozc-quote-cart; aquí los
   sobrescribimos (clase duplicada = especificidad 0,2,0) para ganar la
   cascada sin tocar el plugin base:
     · accent → azul marino #1d386f: banda intro, "Cotizar por correo",
       círculos de paso ①②③, totales.
     · "yellow" → verde de marca #0e7a2e: acentos laterales de bloque y
       botón "Cotizar por WhatsApp" (antes amarillo).
   ==================================================================== */
.ozc-quote-cart.ozc-quote-cart {
  --ozc-accent:      #1d386f;   /* azul marino de marca (antes #004674) */
  --ozc-accent-dark: #14294f;
  --ozc-accent-line: #1d386f;
  --ozc-yellow:      #0e7a2e;   /* verde de marca (antes amarillo #f7d022) */
  --ozc-yellow-dark: #128a34;
}

/* Botón "Finalizar y crear cotización" (reemplaza el "Finalizar compra"
   morado / proceder-al-pago de WooCommerce). Crea la cotización con
   oz-cotizador en vez de ir a /checkout. Verde de acción, ancho completo. */
.ozc-quote-cart .ozc-quote-cart__btn--finalize {
  width: 100%;
  background: #0e7a2e;
  border-color: #0e7a2e;
  color: #fff;
}
.ozc-quote-cart .ozc-quote-cart__btn--finalize:hover,
.ozc-quote-cart .ozc-quote-cart__btn--finalize:focus-visible {
  background: #128a34;
  border-color: #128a34;
  color: #fff;
}

/* ====================================================================
 * Carrusel de productos [oz_wc_products] (OZ-Sliders) — disposición
 * de marca Spilltek para la sección "Productos Destacados":
 *
 *  · Cabecera: título a la IZQUIERDA y botón "Ver tienda" a la DERECHA
 *    (ocupa el lugar donde antes salían las flechas).
 *  · Flechas ‹ ›: una a CADA LADO de los productos, centradas en
 *    vertical sobre la fila (no juntas arriba a la derecha).
 *
 * Nota técnica: el JS de OZ-Sliders mete `.ozs__nav` dentro de
 * `.ozs__header`. Aquí sacamos las flechas del flujo y las colocamos en
 * posición absoluta respecto al carrusel, usando la variable
 * `--ozs-nav-top` (centro vertical del viewport) que calcula ese mismo JS.
 * Reglas con alta especificidad (`html body …`) + !important para ganarle
 * al CSS base del plugin OZ-Sliders.
 * ==================================================================== */
html body .ozs--wc-products.ozs--has-header {
  position: relative;
}

/* Cabecera: título ↔ "Ver tienda" en extremos opuestos */
html body .ozs--wc-products.ozs--has-header .ozs__header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 24px;
}

/* "Ver tienda" pegado a la derecha */
html body .ozs--wc-products.ozs--has-header .ozs__cta {
  margin-left: auto;
}

/* Contenedor de flechas: fuera del flujo de la cabecera (sin ocupar espacio) */
html body .ozs--wc-products.ozs--has-header .ozs__nav,
html body .ozs--wc-products.ozs--has-header .ozs__header .ozs__nav {
  position: static;
  display: block;
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Flechas a los lados, centradas en vertical y POR ENCIMA de los productos
   (un poco hacia adentro para que ningún overflow del tema las recorte). */
html body .ozs--wc-products.ozs--has-header .ozs__nav-btn {
  position: absolute !important;
  top: var(--ozs-nav-top, 60%);
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 20;
  background: #ffffff;          /* fondo sólido: se ve completa sobre la card */
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

html body .ozs--wc-products.ozs--has-header .ozs__nav-btn--prev {
  left: 8px !important;
  right: auto !important;
}

html body .ozs--wc-products.ozs--has-header .ozs__nav-btn--next {
  right: 8px !important;
  left: auto !important;
}

html body .ozs--wc-products.ozs--has-header .ozs__nav-btn:hover,
html body .ozs--wc-products.ozs--has-header .ozs__nav-btn:focus-visible {
  transform: translateY(-50%) scale(1.06) !important;
}

/* Móvil: si la cabecera se apila (título sobre botón), las flechas
   siguen a los lados, centradas sobre la fila de productos. */
@media (max-width: 414px) {
  html body .ozs--wc-products.ozs--has-header .ozs__header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  html body .ozs--wc-products.ozs--has-header .ozs__cta {
    margin-left: 0;
  }
}