/* OZ Cotizador — Design pack «Luval»
 *
 * Card de producto de la tienda Luval:
 *   [ botón WhatsApp cuadrado, esquina superior derecha ]
 *   imagen del producto centrada sobre blanco
 *   marca dentro de una pastilla gris
 *   categoría en versalitas grises
 *   título negro en dos líneas
 *   botón «Cotizar» a todo el ancho, con borde rojo e icono de carrito
 *
 * Todo cuelga de .ozc-product-card--pack-luval para no afectar a otros packs.
 */

.ozc-product-card--pack-luval {
  --lv-red: #e30613;
  --lv-ink: #111111;
  --lv-muted: #3f3f3f;
  --lv-soft: #a3a3a3;
  --lv-line: #e8e8e8;
  --lv-chip: #f2f2f2;
  --lv-pad: 20px;

  position: relative;
  background: #fff;
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  padding-bottom: var(--lv-pad);
  overflow: visible;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ozc-product-card--pack-luval:hover {
  border-color: #dcdcdc;
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.08);
}

/* ---------------------------------------------------------------- Imagen */

.ozc-product-card--pack-luval .ozc-product-card__media {
  aspect-ratio: 1 / 1;
  max-height: 260px;
  margin: var(--lv-pad) var(--lv-pad) 0;
  background: #fff;
}

.ozc-product-card--pack-luval .ozc-product-card__media img {
  object-fit: contain !important;
}

/* La marca se muestra en su propia pastilla bajo la imagen, no encima. */
.ozc-product-card--pack-luval .ozc-product-card__badge {
  display: none;
}

/* ---------------------------------------------------------------- Textos */

.ozc-product-card--pack-luval .ozc-product-card__section {
  padding: 0 var(--lv-pad);
}

/* --- Marca: pastilla gris ajustada al texto --- */

.ozc-product-card--pack-luval .ozc-product-card__brand {
  display: block;
  text-align: left;
  margin-top: 18px;
  line-height: 1;
}

/* El template imprime «Marca:» en su propio span para que los packs puedan
   ocultarlo y dejar solo el nombre. */
.ozc-product-card--pack-luval .ozc-product-card__brand-label {
  display: none;
}

.ozc-product-card--pack-luval .ozc-product-card__brand-value {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--lv-chip);
  color: var(--lv-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* --- Categoría --- */

.ozc-product-card--pack-luval .ozc-product-card__category {
  text-align: left;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--lv-soft);
}

/* --- Título --- */

/* El tema usa una condensada en versalitas para los <h3>; en la card el
   título va en la tipografía base y con la capitalización original. */
/* El padding se repite aquí, y con !important, porque WooCommerce trae
   `.woocommerce ul.products li.product h3 { padding: .5em 0 }` — más
   específica que este pack. Dentro de un carrusel los slides son
   `li.product` de un `ul.products`, así que esa regla ganaba y dejaba el
   título pegado al borde, mientras la marca, la categoría y el botón (que
   son <div>) sí conservaban el padding de .ozc-product-card__section. */
.ozc-product-card--pack-luval .ozc-product-card__title {
  padding: 0 var(--lv-pad) !important;
  text-align: left;
  margin-top: 8px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--lv-ink);
  display: block;
  min-height: calc(1.3em * 2);
  min-height: 2lh;
  overflow: hidden;
}

/* El recorte a dos líneas se aplica al <a>, no al <h3>: el enlace viene
   rodeado de saltos de línea en la plantilla y esos nodos en blanco hacían
   que el -webkit-box del <h3> contase mal las líneas, dejando asomar el
   borde superior de la tercera por debajo del recorte. */
.ozc-product-card--pack-luval .ozc-product-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ozc-product-card--pack-luval .ozc-product-card__title a:hover {
  color: var(--lv-red);
}

/* ---------------------------------------------------------- Botón Cotizar */

.ozc-product-card--pack-luval .ozc-product-card__actions {
  margin-top: 20px;
  min-width: 0;
}

/* El botón viene con width:100% y el padding y el borde se le sumaban por
   fuera, así que se salía de la tarjeta por ambos lados. */
.ozc-product-card--pack-luval .ozc-product-card__btn,
.ozc-product-card--pack-luval .ozc-product-card__wa-btn {
  box-sizing: border-box;
  max-width: 100%;
}

.ozc-product-card--pack-luval .ozc-product-card__btn--primary {
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--lv-red);
  border-radius: 6px;
  background: #fff;
  color: var(--lv-red);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Carrito con «+» como máscara, para que herede el color en hover. */
.ozc-product-card--pack-luval .ozc-product-card__btn--primary::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.7h2.2l2.3 10.9a1.5 1.5 0 0 0 1.5 1.2h8.3a1.5 1.5 0 0 0 1.5-1.2l1.1-5H5.4'/%3E%3Ccircle cx='9' cy='19.4' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.6' cy='19.4' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M14.4 1.4v4.2M12.3 3.5h4.2'/%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' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.7h2.2l2.3 10.9a1.5 1.5 0 0 0 1.5 1.2h8.3a1.5 1.5 0 0 0 1.5-1.2l1.1-5H5.4'/%3E%3Ccircle cx='9' cy='19.4' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.6' cy='19.4' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M14.4 1.4v4.2M12.3 3.5h4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ozc-product-card--pack-luval .ozc-product-card__btn--primary:hover,
.ozc-product-card--pack-luval .ozc-product-card__btn--primary:focus-visible {
  background: var(--lv-red);
  color: #fff;
}

.ozc-product-card--pack-luval .ozc-product-card__btn--added {
  background: var(--lv-red);
  color: #fff;
}

/* El estado «Agregado» ya trae su propio ✓; el carrito sobra. */
.ozc-product-card--pack-luval .ozc-product-card__btn--added::before {
  display: none;
}

/* ------------------------------------------------------- WhatsApp flotante */

/* El template envuelve el bloque de WhatsApp en su propia __section. Al sacar
   el botón del flujo, esa sección se quedaría como un hueco vacío al final. */
.ozc-product-card--pack-luval .ozc-product-card__section:has(> .ozc-product-card__wa) {
  margin: 0;
  padding: 0;
}

.ozc-product-card--pack-luval .ozc-product-card__wa {
  position: absolute;
  top: var(--lv-pad);
  right: var(--lv-pad);
  width: auto;
  z-index: 3;
}

.ozc-product-card--pack-luval .ozc-product-card__wa-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--lv-chip);
  color: #4b5563;
  font-size: 0;
  line-height: 0;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.ozc-product-card--pack-luval .ozc-product-card__wa-btn::before {
  content: '';
  width: 22px;
  height: 22px;
  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='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2Zm5.8 14.1c-.25.7-1.45 1.32-2 1.36-.53.05-1.02.23-3.45-.72-2.9-1.14-4.73-4.1-4.87-4.29-.14-.19-1.16-1.55-1.16-2.95 0-1.4.73-2.1.99-2.38.26-.29.57-.36.76-.36h.55c.18 0 .42-.07.65.5.24.57.8 1.97.87 2.11.07.14.12.31.02.5-.1.19-.15.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.29-.12.57.17.28.74 1.22 1.59 1.98 1.09.97 2.01 1.27 2.3 1.41.28.14.45.12.61-.07.17-.19.71-.83.9-1.11.19-.29.38-.24.64-.14.26.09 1.66.78 1.94.93.29.14.48.21.55.33.07.12.07.69-.18 1.39Z'/%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='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2Zm5.8 14.1c-.25.7-1.45 1.32-2 1.36-.53.05-1.02.23-3.45-.72-2.9-1.14-4.73-4.1-4.87-4.29-.14-.19-1.16-1.55-1.16-2.95 0-1.4.73-2.1.99-2.38.26-.29.57-.36.76-.36h.55c.18 0 .42-.07.65.5.24.57.8 1.97.87 2.11.07.14.12.31.02.5-.1.19-.15.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.29-.12.57.17.28.74 1.22 1.59 1.98 1.09.97 2.01 1.27 2.3 1.41.28.14.45.12.61-.07.17-.19.71-.83.9-1.11.19-.29.38-.24.64-.14.26.09 1.66.78 1.94.93.29.14.48.21.55.33.07.12.07.69-.18 1.39Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ozc-product-card--pack-luval .ozc-product-card__wa-btn:hover,
.ozc-product-card--pack-luval .ozc-product-card__wa-btn:focus-visible {
  background: #25d366;
  color: #fff;
}

/* ------------------------------------------------------------- Responsive

   La card vive tanto en la cuadrícula de la tienda (ancha) como dentro de un
   carrusel a 5 por vista (estrecha) con la misma anchura de ventana, así que
   las escalas se miden contra el ancho de la PROPIA card, no del viewport. */

.ozc-product-card--pack-luval {
  container-type: inline-size;
  container-name: ozclv;
}

@container ozclv (max-width: 320px) {
  .ozc-product-card--pack-luval {
    --lv-pad: 16px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__media {
    max-height: 220px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__brand-value {
    padding: 8px 14px;
    font-size: 13px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__category {
    font-size: 12px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__title {
    font-size: 16px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__btn--primary {
    padding: 12px 14px;
    font-size: 15px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__wa-btn {
    width: 38px;
    height: 38px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__wa-btn::before {
    width: 19px;
    height: 19px;
  }
}

@container ozclv (max-width: 240px) {
  .ozc-product-card--pack-luval {
    --lv-pad: 13px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__media {
    max-height: 180px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__brand-value {
    padding: 7px 12px;
    font-size: 12px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__category {
    font-size: 11px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__title {
    font-size: 14px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__btn--primary {
    gap: 8px;
    padding: 11px 12px;
    font-size: 13px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__btn--primary::before {
    width: 17px;
    height: 17px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__wa-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .ozc-product-card--pack-luval .ozc-product-card__wa-btn::before {
    width: 17px;
    height: 17px;
  }
}