/* OZ Cotizador — Design pack "jcesar" (admin: JCesar)
 * Cards de catálogo: .ozc-product-card__* bajo .ozc-product-card--pack-jcesar
 *
 * Diseño de referencia:
 * - Tarjeta blanca, borde gris suave, esquinas redondeadas, contenido alineado a la izquierda.
 * - Badge de marca (gris) arriba a la derecha sobre la imagen.
 * - Imagen de producto contenida sobre fondo blanco (no recortada).
 * - Categoría en gris, título en negrita mayúsculas.
 * - Fila inferior: selector de cantidad (− 1 +) + botón "Añadir al carrito" con borde coral.
 * - Sin precio (se controla en OZ Cotizador → Loops → mostrar precio = off).
 */

.ozc-product-card--pack-jcesar {
  --ozc-pack-accent: #e8553a;
  --ozc-pack-accent-hover: #d6431f;
  --ozc-pack-surface: #ffffff;
  --ozc-pack-media-bg: #ffffff;
  --ozc-pack-border: #e6e8eb;
  --ozc-pack-border-hover: #d6d9dd;
  --ozc-pack-text: #1f2937;
  --ozc-pack-muted: #9aa1ab;
  --ozc-pack-badge-bg: #f2f3f5;
  --ozc-pack-badge-text: #6b7280;
  --ozc-pack-radius: 12px;
  --ozc-pack-btn-radius: 10px;

  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: none;
  padding: 1.1rem 1.1rem 1.15rem;
  text-align: left;
  color: var(--ozc-pack-text);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.ozc-product-card--pack-jcesar:hover,
.ozc-product-card--pack-jcesar:focus-within {
  border-color: var(--ozc-pack-border-hover);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}

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

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

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

.ozc-product-card--pack-jcesar .ozc-product-card__media img,
.ozc-product-card--pack-jcesar .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-jcesar:hover .ozc-product-card__media img,
.ozc-product-card--pack-jcesar:focus-within .ozc-product-card__media img {
  transform: scale(1.03);
}

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

/* Badge de marca: gris, arriba a la derecha */
.ozc-product-card--pack-jcesar .ozc-product-card__media .ozc-product-card__badge {
  top: 12px;
  right: 12px;
  left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ozc-pack-badge-bg);
  color: var(--ozc-pack-badge-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
}

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

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

/* ---- Título ---- */
.ozc-product-card--pack-jcesar .ozc-product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ozc-pack-text);
  /* Altura fija = exactamente 2 líneas (2 × 1.3em). min+max+overflow:hidden
     recortan la 3ª línea aunque el navegador no aplique -webkit-line-clamp
     (Montserrat hace los títulos más anchos). !important para ganar a cualquier
     override (maquetador, otros packs). Vale para inicio, tienda y donde sea. */
  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;
  /* Altura = exactamente 2 líneas. Restamos 1px al max-height para que el
     overflow:hidden corte limpio y NO asome el borde superior de la 3ª línea
     (el line-clamp por sí solo deja asomar unos px del descender). */
  min-height: calc(2 * 1.3em) !important;
  max-height: calc(2 * 1.3em - 1px) !important;
  padding-bottom: 0 !important;
}

.ozc-product-card--pack-jcesar .ozc-product-card__title a {
  color: inherit;
  text-decoration: none;
  /* El enlace debe fluir como texto dentro del -webkit-box del <h3>; si el tema
     lo pone en block/inline-block, el clamp de 2 líneas no recorta. display:inline
     + el clamp duplicado garantizan el corte y los «...» en la 2ª línea. */
  display: inline !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
}

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

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

/* Empuja la fila de acciones al fondo para igualar alturas en el grid/slider */
.ozc-product-card--pack-jcesar .ozc-product-card__actions {
  margin-top: auto;
  padding-top: 0.95rem;
}

/* ---- Fila: cantidad + añadir al carrito ---- */
.ozc-product-card--pack-jcesar .ozc-product-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}

/* Selector de cantidad (borde coral) */
.ozc-product-card--pack-jcesar .ozc-product-card__qty {
  order: 1;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  margin: 0;
  height: auto;
  min-height: 2.9rem;
  border: 1px solid var(--ozc-pack-accent);
  border-radius: var(--ozc-pack-btn-radius);
  background: var(--ozc-pack-surface);
  color: var(--ozc-pack-text);
  overflow: hidden;
}

.ozc-product-card--pack-jcesar .ozc-product-card__qty-btn {
  width: 2.1rem;
  height: auto;
  min-height: 100%;
  color: var(--ozc-pack-text);
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ozc-product-card--pack-jcesar .ozc-product-card__qty-btn:hover,
.ozc-product-card--pack-jcesar .ozc-product-card__qty-btn:focus-visible {
  background: rgba(232, 85, 58, 0.08);
  color: var(--ozc-pack-accent);
}

.ozc-product-card--pack-jcesar .ozc-product-card__qty-input {
  flex: 0 0 auto;
  width: 2.2rem;
  min-width: 2rem;
  height: auto;
  min-height: 100%;
  padding: 0 0.2rem;
  color: var(--ozc-pack-text);
  font-size: 0.95rem;
  font-weight: 700;
  background: transparent;
}

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

/* Botón "Añadir al carrito" (borde coral, ícono carrito) */
.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ozc-pack-accent);
  border-radius: var(--ozc-pack-btn-radius);
  background: var(--ozc-pack-surface);
  color: var(--ozc-pack-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

/* Ícono carrito a la izquierda del texto */
.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary::before {
  content: '';
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Anula el ícono ::after que añade el botón base */
.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary::after {
  display: none;
  content: none;
}

.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary:hover {
  background: var(--ozc-pack-accent);
  border-color: var(--ozc-pack-accent);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(232, 85, 58, 0.22);
  transform: translateY(-1px);
}

.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 85, 58, 0.2);
}

.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary:focus:not(:focus-visible) {
  background: var(--ozc-pack-surface);
  color: var(--ozc-pack-text);
}

/* ====================================================================
   La fila CANTIDAD + BOTÓN siempre DENTRO de la card, sin desbordar ni
   tocar el borde. Botón compacto para que "AÑADIR AL CARRITO" entre
   aunque la card sea angosta (laptop 4 col, tablet horizontal 3 col).
   ==================================================================== */
.ozc-product-card--pack-jcesar .ozc-product-card__actions {
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0; /* nunca se comprime: el botón no se corta por abajo */
}

.ozc-product-card--pack-jcesar .ozc-product-card__qty,
.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Botón más compacto: tipografía e ícono menores y menos padding lateral. */
.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary {
  font-size: 0.72rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.4rem 0.5rem !important;
  gap: 0.32rem !important;
}

.ozc-product-card--pack-jcesar .ozc-product-card__btn--primary::before {
  width: 1rem !important;
  height: 1rem !important;
}

/* ============================================================
 * INICIO — Carruseles/grids de productos OZ ([oz_wc_products]).
 * Solo PC (≥1200px, donde el slider muestra 4 columnas): la card
 * mide 452 × 455. El ancho ≈452 lo da el slider a 4 columnas; aquí
 * fijamos el alto a 455 y la imagen ocupa el espacio sobrante.
 *
 * En laptop/tablet/móvil (slider a 3/2/1 col) y en la TIENDA
 * (.oz-shop-layout__main, sin el contexto .ozs--wc-products) la card
 * NO recibe estas reglas: mantiene alto automático e imagen cuadrada,
 * adaptándose al ancho disponible. Por eso se restringe a
 * `.ozs--wc-products` + `min-width: 1200px`.
 * ============================================================ */
@media (min-width: 1200px) {
  .ozs--wc-products .ozc-product-card--pack-jcesar {
    height: 455px;
    padding-bottom: 1.4rem; /* aire bajo el botón: que no quede pegado/cortado */
  }

  /* Anula la imagen cuadrada (1/1): la imagen rellena el alto restante
     tras categoría, título y la fila de acciones, manteniendo 455 totales. */
  .ozs--wc-products .ozc-product-card--pack-jcesar .ozc-product-card__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* INICIO — en cards angostas (móvil/tablet: 2-3 columnas) la fila cantidad+botón
   no cabe lado a lado y el botón se parte letra por letra. Cada card se vuelve su
   propio "container" y, cuando es estrecha, se apilan a lo ancho.
   Scoped a .ozs--wc-products: NO afecta tienda ni otras vistas. */
.ozs--wc-products .ozc-product-card--pack-jcesar {
  container-type: inline-size;
}

@container (max-width: 270px) {
  .ozs--wc-products .ozc-product-card--pack-jcesar .ozc-product-card__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ozs--wc-products .ozc-product-card--pack-jcesar .ozc-product-card__qty,
  .ozs--wc-products .ozc-product-card--pack-jcesar .ozc-product-card__btn--primary {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Centrar el grupo − 1 + dentro del selector a todo el ancho. */
  .ozs--wc-products .ozc-product-card--pack-jcesar .ozc-product-card__qty {
    justify-content: center !important;
  }
}

/* ---- Móvil estrecho: mantener cantidad + botón en una fila, compactos ---- */
@media (max-width: 480px) {
  .ozc-product-card--pack-jcesar {
    padding: 0.85rem 0.85rem 0.9rem;
  }

  .ozc-product-card--pack-jcesar .ozc-product-card__btn--primary {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.55rem;
  }

  .ozc-product-card--pack-jcesar .ozc-product-card__qty-btn {
    width: 1.8rem;
  }
}