/* OZ Cotizador — Design pack "malviseg" (admin: Malviseg)
 * Cards de catálogo: .ozc-product-card__* bajo .ozc-product-card--pack-malviseg
 *
 * Diseño de referencia (simple):
 * - Tarjeta blanca, borde gris muy suave, esquinas redondeadas.
 * - Imagen de producto contenida sobre fondo blanco (no recortada).
 * - Título centrado, 2 líneas máximo, gris oscuro.
 * - Botón "Cotizar" amarillo (#FBDD12), texto negro, a todo el ancho, abajo.
 * - Sin categoría, marca, precio, selector de cantidad ni botón de WhatsApp.
 */

.ozc-product-card--pack-malviseg {
  --ozc-mv-accent: #FBDD12;        /* amarillo Malviseg */
  --ozc-mv-accent-hover: #eccf06;
  --ozc-mv-surface: #ffffff;
  --ozc-mv-border: #ececec;
  --ozc-mv-border-hover: #e0e0e0;
  --ozc-mv-text: #2b2b2b;
  --ozc-mv-radius: 0;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ozc-mv-surface);
  border: 1px solid var(--ozc-mv-border);
  border-radius: var(--ozc-mv-radius);
  box-shadow: none;
  padding: 14px 14px 16px;
  text-align: center;
  color: var(--ozc-mv-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ozc-product-card--pack-malviseg:hover,
.ozc-product-card--pack-malviseg:focus-within {
  border-color: var(--ozc-mv-border-hover);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

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

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

/* ---- Imagen ---- */
.ozc-product-card--pack-malviseg .ozc-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: #ffffff;
  padding: 0.5rem;
  text-decoration: none;
}

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

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

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

/* ---- Título (centrado, 2 líneas) ---- */
.ozc-product-card--pack-malviseg .ozc-product-card__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ozc-mv-text);
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: break-word;
  min-height: 2.7em !important;   /* exactamente 2 líneas (2 × 1.35em) */
  max-height: 2.7em !important;
}

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

.ozc-product-card--pack-malviseg .ozc-product-card__title a:hover,
.ozc-product-card--pack-malviseg .ozc-product-card__title a:focus-visible {
  color: #000;
}

/* ---- Ocultar lo que no va en el diseño simple ---- */
.ozc-product-card--pack-malviseg .ozc-product-card__category,
.ozc-product-card--pack-malviseg .ozc-product-card__brand,
.ozc-product-card--pack-malviseg .ozc-product-card__price,
.ozc-product-card--pack-malviseg .ozc-product-card__excerpt,
.ozc-product-card--pack-malviseg .ozc-product-card__badge,
.ozc-product-card--pack-malviseg .ozc-product-card__qty,
.ozc-product-card--pack-malviseg .ozc-product-card__wa {
  display: none !important;
}

/* ---- Acciones: botón "Cotizar" a todo el ancho, abajo ---- */
.ozc-product-card--pack-malviseg .ozc-product-card__actions {
  display: flex;
  margin-top: auto;        /* empuja el botón al fondo: iguala alturas en el grid */
  padding-top: 0.95rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ozc-product-card--pack-malviseg .ozc-product-card__btn--primary {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;   /* el padding va DENTRO del ancho: no se desborda a la derecha */
  min-height: 2.9rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--ozc-mv-accent);
  color: #000000;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* El botón base puede añadir un ícono ::before/::after — lo anulamos (botón limpio). */
.ozc-product-card--pack-malviseg .ozc-product-card__btn--primary::before,
.ozc-product-card--pack-malviseg .ozc-product-card__btn--primary::after {
  content: none !important;
  display: none !important;
}

.ozc-product-card--pack-malviseg .ozc-product-card__btn--primary:hover {
  background: var(--ozc-mv-accent-hover);
  color: #000;
  box-shadow: 0 10px 20px rgba(251, 221, 18, 0.28);
  transform: translateY(-1px);
}

.ozc-product-card--pack-malviseg .ozc-product-card__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 221, 18, 0.45);
}

/* ---- Móvil ---- */
@media (max-width: 480px) {
  .ozc-product-card--pack-malviseg {
    padding: 10px 10px 12px;
  }
  .ozc-product-card--pack-malviseg .ozc-product-card__title {
    font-size: 0.9rem;
  }
  .ozc-product-card--pack-malviseg .ozc-product-card__btn--primary {
    min-height: 2.7rem;
    font-size: 0.9rem;
  }
}

/* =========================================================================
   BOTÓN FLOTANTE DEL CARRITO (FAB) — estilo Malviseg (amarillo).
   Este CSS solo se carga cuando el pack "malviseg" está activo; sin él, el FAB
   conserva el diseño default (círculo oscuro con badge rojo).
   ========================================================================= */
.ozc-sidecart-fab {
  background: #d32f2f !important;        /* amarillo de marca */
  color: #ffffff !important;            /* el icono usa currentColor → oscuro */
  border-radius: 16px !important;       /* cuadrado redondeado (no círculo) */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}
.ozc-sidecart-fab:hover {
  background: #b71c1c  !important;       /* amarillo un poco más oscuro */
}
/* Sin el anillo de pulso, para un look limpio como la captura. */
.ozc-sidecart-fab::after {
  content: none !important;
}
/* Badge (contador): círculo oscuro con número claro, arriba a la izquierda. */
.ozc-sidecart-fab .ozc-sidecart-count {
  background: #1c1c1c !important;
  color: #ffffff !important;
  border: 2px solid #FBDD12 !important;
  left: -5px;
  right: auto !important;
}

/* =========================================================================
   CAJÓN DEL CARRITO (sidecart) — paleta Malviseg: negro + amarillo,
   igual que la página del carrito (antes traía naranja #f15a22).
   NOTA: sidecart.css se encola DESPUÉS de este pack y define los tokens en
   `.ozc-sidecart` (misma especificidad), así que el override perdía la
   cascada. Duplicamos la clase (`.ozc-sidecart.ozc-sidecart`) para ganar.
   Con --ozc-sc-accent en negro: cabecera negra (texto blanco por defecto),
   pasos +/- negros e inputs oscuros. --ozc-sc-yellow deja "Ver carrito"
   amarillo. WhatsApp conserva su verde de marca.
   ========================================================================= */
.ozc-sidecart.ozc-sidecart {
  --ozc-sc-accent:      #000000;   /* antes naranja #f15a22 */
  --ozc-sc-accent-dark: #1a1a1a;
  --ozc-sc-yellow:      #FBDD12;   /* botón "Ver carrito" */
  --ozc-sc-yellow-dark: #e3c50f;
}

/* "Ver carrito": fondo amarillo → texto negro legible (el default es blanco). */
.ozc-sidecart .ozc-sidecart__btn--cart,
.ozc-sidecart .ozc-sidecart__btn--cart:hover {
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* "Seguir cotizando": hover neutro (sin el tinte naranja del default). */
.ozc-sidecart .ozc-sidecart__btn--continue:hover {
  background: #f5f5f5 !important;
}

/* =========================================================================
   PÁGINA DEL CARRITO (cotizador) — paleta Malviseg (negro + amarillo).
   El carrito del plugin (.ozc-quote-cart) trae azul #004674 por defecto.
   IMPORTANTE: quote-cart.css se encola DESPUÉS de este pack, por eso usamos
   una especificidad mayor (body.woocommerce-cart …) para ganar la cascada.
   Al reescribir los tokens se recolorea todo: cabecera, botones y totales.
   ========================================================================= */
body.woocommerce-cart .ozc-quote-cart {
  --ozc-accent:       #000000;   /* antes azul #004674 */
  --ozc-accent-dark:  #1a1a1a;   /* hover (ligeramente más claro) */
  --ozc-accent-line:  #000000;
  --ozc-yellow:       #FBDD12;   /* amarillo de marca */
  --ozc-yellow-dark:  #e3c50f;
  --ozc-border:       rgba(0, 0, 0, 0.14);
  --ozc-border-soft:  rgba(0, 0, 0, 0.07);
  --ozc-bg:           #f5f5f5;   /* fondo neutro (antes azulado) */
  --ozc-shadow:       0 1px 4px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* Estado de carrito vacío (markup estándar de WooCommerce, fuera de
   .ozc-quote-cart). El pack se carga también con el carrito vacío. */
body.woocommerce-cart .cart-empty.woocommerce-info {
  background: #f5f5f5;
  border-top: 3px solid #FBDD12;
  color: #1c1c1c;
  border-radius: 6px;
}
body.woocommerce-cart .cart-empty.woocommerce-info::before {
  color: #000000;
}
body.woocommerce-cart .return-to-shop .button {
  background: #FBDD12;
  color: #000000;
  border: 1px solid #FBDD12;
  border-radius: 6px;
  font-weight: 700;
}
body.woocommerce-cart .return-to-shop .button:hover {
  background: #e3c50f;
  border-color: #e3c50f;
  color: #000000;
}

/* =========================================================================
   ENCABEZADO DE LA TIENDA — estilo Malviseg (captura 1).
   La ESTRUCTURA (franja de migas, toolbar, filtros) la generan el tema y el
   plugin de filtros; aquí van SOLO los estilos. Como este pack.css solo carga
   con malviseg activo, sin el pack la tienda queda con el diseño default.
   Se usa "html body" + !important para ganarle a las reglas oscuras del tema.
   ========================================================================= */

/* —— Franja gris con las migas de pan —— */
html body .oz-shop-breadcrumb-bar {
  background: #f4f4f5;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
}
html body .oz-shop-breadcrumb-bar__inner {
  max-width: min(100%, var(--OZ-Container-PC, 1440px));
  margin-inline: auto;
  padding: 14px 1rem;
  box-sizing: border-box;
}
html body .oz-shop-breadcrumb-bar .oz-shop-page-banner__wc-breadcrumb {
  justify-content: flex-start;
  color: #4b5563 !important;         /* página actual ("Productos") */
  font-weight: 500;
  font-size: 0.9rem;
}
html body .oz-shop-breadcrumb-bar .oz-shop-page-banner__wc-breadcrumb a {
  color: #14527d !important;         /* enlace ("Inicio") */
}
html body .oz-shop-breadcrumb-bar .oz-shop-page-banner__wc-breadcrumb a:hover {
  color: #c79a1a !important;
  text-decoration: none;
}
html body .oz-shop-breadcrumb-bar .oz-shop-page-banner__crumb-sep {
  color: #9aa0a6 !important;
}

/* —— Banner del título: blanco + título oscuro sin mayúsculas —— */
html body .oz-shop-page-banner {
  background: #ffffff !important;
  color: #1c1c1c;
}
html body .oz-shop-page-banner__inner {
  padding-top: 1.75rem;
  padding-bottom: 0.25rem;
}
html body .oz-shop-page-banner__title {
  color: #1c1c1c !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important;
}

/* —— Descripción de la categoría: AHORA SE MUESTRA (2026-07-18).
   Antes estaba en display:none porque el bloque solo repetía el nombre de la
   categoría que ya aparece en el banner (el caso "BOTAS DE SEGURIDAD" duplicado).
   Eso cambió: ahora el bloque contiene un texto descriptivo propio, con la palabra
   clave y enlaces internos a categorías relacionadas, así que debe ser visible.
   Si un término no tiene descripción, WooCommerce no imprime nada y el bloque
   queda vacío sin ocupar espacio. NO volver a ocultarlo. —— */
/* ── Compactar el bloque título + descripción ──────────────────────────────
   ⚠️ El padding NO está en .oz-shop-page-banner (ese ya viene en 0) sino en
   .oz-shop-page-banner__inner, que trae 3rem (48px) arriba y abajo.
   ⚠️ Tampoco usar margin negativo en el intro: la primera línea del texto
   queda tapada detrás del banner. */
html body .oz-shop-page-banner__inner {
  padding-top: 1.1rem !important;     /* era 3rem → menos aire sobre el título */
  padding-bottom: 0.35rem !important; /* era 3rem → acerca la descripción al título */
}
html body .oz-shop-archive__header { gap: 0.25rem !important; }  /* era 1rem */
html body .oz-shop-archive__main   { gap: 0.6rem !important; }   /* era 1.5rem */
html body .oz-shop-toolbar         { margin-bottom: 1rem !important; } /* era 1.5rem */

html body .oz-shop-archive__intro {
  display: block !important;
  /* Mismo ancho que el resto del sitio (--OZ-Container-PC = 1440px), para que el
     texto quede alineado con la grilla de productos y no encajonado al centro. */
  max-width: var(--OZ-Container-PC, 1440px);
  margin: 0 auto;
  padding: 0 1rem;
}
html body .oz-shop-archive__intro .term-description {
  color: #2b2b2b;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 100%;      /* usa todo el ancho del contenedor */
  margin: 0 auto 6px;   /* poco aire hacia la barra de filtros */
  text-align: center;
}
html body .oz-shop-archive__intro .term-description p { margin: 0; }
html body .oz-shop-archive__intro .term-description strong { color: #000; font-weight: 800; }
html body .oz-shop-archive__intro .term-description a {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #FBDD12;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
html body .oz-shop-archive__intro .term-description a:hover { background: #FBDD12; }

/* —— Toolbar de resultados/orden: clara (antes oscura) —— */
html body .oz-shop-toolbar {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
html body .oz-shop-toolbar__grid {
  background: #f3f4f6 !important;
}
html body .oz-shop-grid-btn {
  color: #6b7280 !important;
}
html body .oz-shop-grid-btn:hover {
  background: #e5e7eb !important;
  color: #1c1c1c !important;
}
html body .oz-shop-grid-btn.is-active,
html body .oz-shop-grid-btn[aria-pressed="true"] {
  background: #FBDD12 !important;
  border-color: #FBDD12 !important;
  color: #1c1c1c !important;
}
html body .oz-shop-toolbar .woocommerce-result-count {
  color: #6b7280 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html body .oz-shop-toolbar .woocommerce-ordering select {
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #1c1c1c !important;
}

/* —— Barra de filtros (plugin "Woo WP Filtros"): "Filtrar por" + "Borrar Filtros" —— */
html body #woo-wp-filtros-atributos .widget-title,
html body .woo-wp-filtros-atributos .widget-title {
  color: #1c1c1c !important;
  font-weight: 600 !important;
}
html body #woo-wp-filtros-atributos .woo-wp-icon-filter,
html body #woo-wp-filtros-atributos .widget-title svg {
  color: #1c1c1c !important;
}
html body #woo-wp-clear-filters,
html body .woo-wp-clear-filters {
  background: #FBDD12 !important;
  color: #1c1c1c !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
html body #woo-wp-clear-filters:hover,
html body .woo-wp-clear-filters:hover {
  background: #e3c50f !important;
}

/* —— Paginación: página activa AMARILLA (captura 3) —— */
html body .woocommerce-pagination ul.page-numbers li .page-numbers {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #1c1c1c !important;
}
html body .woocommerce-pagination ul.page-numbers li .page-numbers:hover,
html body .woocommerce-pagination ul.page-numbers li .page-numbers:focus {
  background: #f3f4f6 !important;
  color: #1c1c1c !important;
  border-color: #d1d5db !important;
}
html body .woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: #FBDD12 !important;
  border-color: #FBDD12 !important;
  color: #1c1c1c !important;
}
html body .woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border-color: transparent !important;
  background: transparent !important;
}

/* —— Filtros DENTRO de la toolbar de resultados (no como fila aparte) —— */
html body .oz-shop-toolbar {
  flex-wrap: wrap;
  gap: 12px 18px;
  overflow: visible !important;    /* el panel desplegable no se recorta */
}
html body .oz-shop-toolbar .woocommerce-ordering {
  margin-left: auto;               /* empuja "Orden" a la derecha */
}

/* —— Filtro de MARCAS: dropdown de checkboxes (multi-selección) con <details>.
   Robusto: toggle nativo (sin JS ni clase dinámica → inmune a WP Rocket),
   panel overlay que NO empuja, ~6 marcas + scroll, botón "Aplicar". —— */
html body .oz-marcas-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
html body .oz-marcas-bar__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%231c1c1c' stroke-linecap='round' stroke-width='1.4' d='M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4'/%3E%3C/svg%3E");
}
html body .oz-marcas-bar__form {
  margin: 0;
}
html body .oz-marcas-dd {
  position: relative;
}
/* Toggle "Filtrar por marcas ▾" */
html body .oz-marcas-dd__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  padding: 9px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1c1c1c;
  user-select: none;
  white-space: nowrap;
}
html body .oz-marcas-dd__toggle::-webkit-details-marker {
  display: none;
}
html body .oz-marcas-dd__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(45deg);
  margin-top: -3px;
  margin-left: 4px;
}
html body .oz-marcas-dd[open] .oz-marcas-dd__toggle::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}
/* Panel overlay con checkboxes: ~6 visibles + scroll */
html body .oz-marcas-dd__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 260px;
  max-height: 282px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 8px;
}
html body .oz-marcas-dd__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #1c1c1c;
  cursor: pointer;
}
html body .oz-marcas-dd__opt:hover {
  background: #f3f4f6;
}
html body .oz-marcas-dd__opt input {
  width: 16px;
  height: 16px;
  accent-color: #1c1c1c;
  flex: 0 0 auto;
}
html body .oz-marcas-dd__opt em {
  color: #9aa0a6;
  font-style: normal;
}
/* Botón "Aplicar" (abajo del panel, fijo al hacer scroll) */
html body .oz-marcas-dd__apply {
  position: sticky;
  bottom: -8px;
  display: block;
  width: 100%;
  margin-top: 8px;
  background: #FBDD12;
  color: #1c1c1c;
  border: 0;
  border-radius: 6px;
  padding: 9px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
html body .oz-marcas-dd__apply:hover {
  background: #e3c50f;
}
/* Botón "Borrar filtros" amarillo */
html body .oz-marcas-bar__clear {
  display: inline-flex;
  align-items: center;
  background: #FBDD12;
  color: #1c1c1c;
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
html body .oz-marcas-bar__clear:hover {
  background: #e3c50f;
  color: #1c1c1c;
}