/* Import Google Font (Fredoka One) */
 
/* Aplicar la fuente a todo el site */
/*
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
textarea,
select {
  font-family: 'Fredoka One', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
*/ 
/* Si prefieres la clase pero sólo al primero encontrado dentro de #ajax-content-wrap */
#ajax-content-wrap .CuadroGris:first-of-type {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  min-height: 100vh !important;
  padding: 0 !important;
}
/* Y las mismas reglas internas (ajusta el selector si tu HTML cambia) */
#ajax-content-wrap .CuadroGris:first-of-type .column-bg-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  background-color: #707070 !important;
}
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper {
  position: relative !important;
  z-index: 2 !important;
  padding: 40px !important;
}
/* 1) quitar padding/margin de las cajas de WPBakery dentro del primer .CuadroGris */
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper .wpb_text_column {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* 2) forzar márgenes cero para encabezados y párrafos dentro */
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper h1,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper h2,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper h3,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper h4,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper h5,
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
/* 3) si quieres un pequeño espacio entre bloques (opcional) - cambia 12px por lo que prefieras */
/* coméntala si quieres TODO pegado */
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper .wpb_text_column + .wpb_text_column {
  margin-top: 12px !important;
}
/* 4) si hay separación generada por line-height o por <p> con display:block grande, controla su altura */
#ajax-content-wrap .CuadroGris:first-of-type .wpb_wrapper p {
  line-height: 1.4 !important; /* ajusta si el texto queda muy compacto */
}
/* 5) Por si alguna regla externa añade padding a los hijos directos */
#ajax-content-wrap .CuadroGris:first-of-type > .row_col_wrap_12,
#ajax-content-wrap .CuadroGris:first-of-type .vc_column-inner {
  padding: 0 !important;
  margin: 0 !important;
}
/* Make the marketing label text align nicely */
.contact-grid label.marketing {
  font-size: 13px;
  color: #000; /* <- ahora en negro */
  display: flex;
  align-items: center;
}
/* =================================================================== */
/* 0. ESTILOS PARA ENCABEZADO FIJO Y "TRANSPARENTE" (SUPERPUESTO)
/* =================================================================== */
/* Contenedor global del header */
#header-outer {
    position: fixed !important; /* Fija el header en la ventana */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté por encima de otro contenido */
    /* El fondo de las barras internas ya está definido, así que este contenedor no necesita color. */
}
/* IMPORTANTE: Empuja el contenido principal de la página hacia abajo */
/* El selector puede variar según tu tema, busca el contenedor principal del contenido. */
/* Comúnmente son #main-content, #page-header-bg, #ajax-content-wrap, etc. */
#page-header-bg {
    padding-top: 105px !important; /* Ajusta este valor a la altura exacta de tu header */
}

/* CSS contacto
/* =========================
   Variables
========================= */
:root{
  --primary-red: #e61f4d;
  --input-border: #2f2f2f;
  --muted: #666;
  --gap: 24px;
  --radius: 8px;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Box sizing global */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* =========================
   Consent area: texto siempre negro
   (regla única y prioritaria)
========================= */
.contact-grid .consent-area,
.contact-grid .consent-area * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* mejora para WebKit */
  font-family: 'Fredoka One', var(--font-family) !important;
  font-size: 13px !important;
}

/* enlaces dentro del área de consentimientos */
.contact-grid .consent-area a {
  color: #000 !important;
  text-decoration: underline;
}

/* Target específico para CF7 acceptance/labels */
.wpcf7-acceptance label,
.wpcf7-list-item label,
.contact-grid label.privacy,
.contact-grid label.marketing {
  /* Estas reglas se aplican por defecto, pero se sobreescriben por .consent-area si están dentro */
  color: var(--muted);
  font-size: 13px;
}

/* pseudo-elementos por si aparecen */
.contact-grid .consent-area label::before,
.contact-grid .consent-area label::after {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* =========================
   Grid layout
========================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columnas base */
  gap: var(--gap);
  align-items: start;
  font-family: var(--font-family);
  margin: 0 auto;
}

/* Campos */
.contact-grid .field { grid-column: span 2; }
.contact-grid .textarea-field { grid-column: span 4; }

/* Área derecha: checkbox + submit */
.contact-grid .consent-area {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Labels (generales) */
.contact-grid label {
  display: block;
  font-size: 14px;
  color: #222;
  margin-bottom: 8px;
}

/* Inputs, selects, textarea */
.contact-grid input[type="text"],
.contact-grid input[type="email"],
.contact-grid input[type="tel"],
.contact-grid select,
.contact-grid textarea {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--input-border);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: box-shadow .12s, border-color .12s;
  -webkit-appearance: none;
  appearance: none;
}

/* Selects */
.contact-grid select { height: 40px; }

/* Textarea */
.contact-grid textarea {
  min-height: 140px;
  height: auto;
  resize: vertical;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Focus states (incluye focus-visible para accesibilidad) */
.contact-grid input:focus,
.contact-grid select:focus,
.contact-grid textarea:focus,
.contact-grid input:focus-visible,
.contact-grid select:focus-visible,
.contact-grid textarea:focus-visible {
  border-color: var(--primary-red);
  box-shadow: 0 4px 16px rgba(230,31,77,0.06);
}

/* Placeholder (con prefijos) */
.contact-grid input::placeholder,
.contact-grid textarea::placeholder { color: #999; }
.contact-grid input::-webkit-input-placeholder,
.contact-grid textarea::-webkit-input-placeholder { color: #999; }
.contact-grid input::-ms-input-placeholder,
.contact-grid textarea::-ms-input-placeholder { color: #999; }

/* =========================
   Checkbox estilado accesible
========================= */
.contact-grid input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary-red);
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  background: #fff;
}

/* estado checked */
.contact-grid input[type="checkbox"]:checked {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

/* marca de verificación */
.contact-grid input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* foco visible para teclado */
.contact-grid input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(230,31,77,0.14);
  border-color: var(--primary-red);
}

/* Alineación y estilos de labels específicos */
.contact-grid label.marketing {
  font-size: 13px;
  display: flex;
  align-items: center;
}
.contact-grid label.privacy {
  font-size: 13px;
}

/* Submit button */
.contact-grid .wpcf7-submit {
  background: var(--primary-red);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(230,31,77,0.12);
  transition: transform .08s ease, box-shadow .12s ease;
}
.contact-grid .wpcf7-submit:hover { transform: translateY(-1px); }
.contact-grid .wpcf7-submit:disabled,
.contact-grid .wpcf7-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Submit wrap */
.contact-grid .submit-wrap {
  margin-top: 8px;
}

/* pequeños ajustes */
.contact-grid .field label,
.contact-grid .textarea-field label { margin-bottom: 6px; }

/* Responsive: en pantallas pequeñas apila todo */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .field,
  .contact-grid .textarea-field,
  .contact-grid .consent-area { grid-column: auto; }
  .contact-grid .consent-area { flex-direction: column; align-items: flex-start; }
  .contact-grid .wpcf7-submit { width: 160px; align-self: flex-start; }
}

/* Extra visual polish (opcionales) */
.contact-grid a { color: var(--primary-red); text-decoration: underline; }

.vc_custom_heading[style*="text-align: left"]{
  padding-left: 40px;
  margin: 0;
  box-sizing: border-box;
}

.vc_custom_heading[style*="text-align: right"]{
  padding-right: 40px;
  margin: 0;
  box-sizing: border-box;
}

/* misma regla responsiva */
@media (max-width: 768px){
  .vc_custom_heading[style*="text-align: left"],
  .vc_custom_heading[style*="text-align: right"]{
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
  }
}

/* nv-favs.css */
.nv-fav-btn{
  background:transparent;
  border:1px solid rgba(0,0,0,0.08);
  padding:6px 8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:6px;
  cursor:pointer;
  transition:transform .08s ease;
}
.nv-fav-btn:active{ transform:scale(.98) }
.nv-fav-btn .nv-heart-svg{ fill:transparent; stroke:currentColor; stroke-width:0.5; }
.nv-fav-btn.active{ color: #e22; background: rgba(226,34,34,0.06); border-color: rgba(226,34,34,0.18) }
.nv-favs-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:10px }
.nv-fav-card{ text-decoration:none; color:inherit; border:1px solid #eee; padding:8px; border-radius:8px; display:block }
.nv-fav-card .nv-thumb img{ width:100%; height:110px; object-fit:cover; display:block; border-radius:6px; }
.nv-no-favs, .nv-guest-note{ color:#666 }
.nv-loading{ opacity:.6; pointer-events:none }

/* ===== NV Favoritos: boton en esquina superior derecha ===== */

/* Asegurar que el product card sea relativo para posicion absolute interno */
.woocommerce ul.products li.product,
.products .product,
.product {
  position: relative; /* IMPORTANT: permite posicionar el boton sobre el card */
}

/* Si tu carrusel usa otro selector (slick, owl...), añadir también */
.slick-slide .product,
.owl-carousel .product,
.glide__slide .product {
  position: relative;
}

/* Boton: pequeño, circular, esquina superior derecha */
.nv-fav-btn {
  background: transparent !important; /* Quita el fondo blanco */
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  backdrop-filter: blur(4px);
}

/* Si el theme tiene overlay en la imagen, elevar un poco más */
.nv-fav-btn { transform: translateZ(0); }

/* Hover y active */
.nv-fav-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }

/* SVG heart dentro del boton: centrado y pequeño */
.nv-fav-btn .nv-heart-svg { width: 18px; height: 18px; display:block; }

/* Por defecto corazon no rellenado */
.nv-fav-btn .nv-heart-svg path { fill: transparent; stroke: currentColor; stroke-width: 0.8; }

/* Estado activo (favorito): fondo rojo ligero + corazon rojo relleno */
.nv-fav-btn.active {
  color: #e22; /* color del icono (stroke y fill cuando activo) */
  background: rgba(226,34,34,0.07);
  border-color: rgba(226,34,34,0.18);
  box-shadow: 0 8px 24px rgba(226,34,34,0.06);
}
.nv-fav-btn.active .nv-heart-svg path { fill: #e22; stroke: #e22; }

/* Small screen (ajusta el tamaño en móvil) */
@media (max-width: 600px) {
  .nv-fav-btn { width: 32px; height: 32px; top: 6px; right: 6px; }
  .nv-fav-btn .nv-heart-svg { width: 16px; height: 16px; }
}

/* Evitar que el boton afecte a clicks en sliders (pointer fine-tune) */
.nv-fav-btn { pointer-events: auto; }

/* Si quieres ocultarlo en páginas concretas puedes añadir reglas extra */
.nv-fav-btn.active { animation: nv-pop .28s cubic-bezier(.2,.9,.3,1); }
@keyframes nv-pop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Fuerza botón fuera del flujo y sin espacios */
.woocommerce ul.products li.product,
.products .product,
.product {
  position: relative !important; /* asegura el contenedor relativo */
}

/* Botón: fuera del flujo, sin márgenes ni padding extras */
.nv-fav-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  pointer-events: auto !important;
  line-height: 0 !important;
}

/* Asegura que el SVG no genere altura extra */
.nv-fav-btn .nv-heart-svg { display:block; width:18px; height:18px; margin:0; }

/* Si por algún motivo el botón fue impreso fuera del thumbnail, intenta esto */
.slick-slide .product .nv-fav-btn,
.owl-item .product .nv-fav-btn,
.glide__slide .product .nv-fav-btn {
  position: absolute !important;
}

/* Ocultar texto de forma accesible (ya no debe ocupar espacio) */
.nv-fav-btn .nv-fav-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Forzar que cualquier .nv-fav-btn sea absolute y no ocupe flujo */
.nv-fav-btn { position: absolute !important; top: 8px !important; right: 8px !important; margin: 0 !important; }

/* Si por casualidad existe un botón duplicado 'inline', ocultarlo (solo visual) */
.product .nv-fav-btn:not([style]){ position: absolute !important; }

/* Forzar que el contenedor que antes tenía espacio colapse si queda vacío */
.woocommerce ul.products li.product .nv-fav-placeholder,
.woocommerce ul.products li.product .nv-fav-space {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


.nv-favs-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.nv-fav-card { border:1px solid #eee; border-radius:8px; padding:12px; position:relative; transition: box-shadow .15s ease; }
.nv-fav-card:hover { box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.nv-fav-card .nv-thumb img { width:100%; height:150px; object-fit:cover; border-radius:6px; }
.nv-fav-card .nv-title { font-weight:600; margin:8px 0; }
.nv-fav-card .nv-price { color:#e22; font-weight:700; margin-bottom:8px; }
.nv-fav-card .nv-actions { display:flex; gap:8px; }
.nv-add-cart-btn, .nv-remove-fav-btn { flex:1; padding:6px 8px; border:none; border-radius:6px; cursor:pointer; }
.nv-add-cart-btn { background:#e22; color:#fff; }
.nv-remove-fav-btn { background:#eee; color:#333; }

/* ======= Arreglar corazón invisible - SOLO para nv-fav-btn ======= */
/* Forzar fondo blanco (si ya lo tienes, no hace daño) y
   asegurar que el color del botón sea gris por defecto (no blanco). */
#productos-grid li.product button.nv-fav-btn[data-product-id],
#productos-grid li.product button.nv-fav-btn[data-product-id]:hover,
#productos-grid li.product button.nv-fav-btn[data-product-id]:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  /* IMPORTANTE: este color es el que usa currentColor para stroke/fill.
     Lo dejamos gris para que el corazón se vea cuando NO esté activo. */
  color: #777 !important;
  /* no tocamos box-shadow, border ni nada más */
}

/* Asegurar que el SVG use stroke visible (y que no haya fill por defecto) */
#productos-grid li.product button.nv-fav-btn[data-product-id] .nv-heart-svg,
#productos-grid li.product button.nv-fav-btn[data-product-id] .nv-heart-svg path {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* No forzamos color aquí: usamos stroke: currentColor para respetar `color` del botón */
  fill: none !important;               /* sin relleno por defecto */
  stroke: currentColor !important;
  stroke-width: 1.2 !important;        /* un trazo más visible */
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

/* Estado activo: dejar exactamente como ya tenías (corazón rojo relleno) */
#productos-grid li.product button.nv-fav-btn.active[data-product-id] {
  /* color de icono en estado activo (mantener tu valor) */
  color: #e22 !important;
  /* si quieres que el fondo activo siga su estilo, no tocamos */
}
#productos-grid li.product button.nv-fav-btn.active[data-product-id] .nv-heart-svg path {
  fill: currentColor !important;   /* relleno usando el color del botón (ya es #e22) */
  stroke: currentColor !important;
  stroke-width: 1 !important;
}
/* ===== Quitar borde de TODOS los botones de favoritos ===== */
#productos-grid li.product button.nv-fav-btn {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important; /* opcional: elimina cualquier sombreado */
}

/* mantener fondo blanco */
#productos-grid li.product button.nv-fav-btn,
#productos-grid li.product button.nv-fav-btn:hover,
#productos-grid li.product button.nv-fav-btn:focus,
#productos-grid li.product button.nv-fav-btn:active {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* ===== Aumentar tamaño del botón y del corazón ===== */
#productos-grid li.product button.nv-fav-btn {
  width: 48px !important;     /* antes 36px */
  height: 48px !important;
}

#productos-grid li.product button.nv-fav-btn .nv-heart-svg {
  width: 24px !important;     /* antes 18px */
  height: 24px !important;
}

/* ===========================
   NV Favoritos - Mejora visual
   - Evita que un único elemento se estire a todo el ancho
   - Cards centradas, responsivas y con estilo moderno
   - Estilos para botón corazón, actions y accesibilidad
   =========================== */

/* Contenedor general de favoritos: usar flex para centrar, permitir wrap */
#nv-favorites-wrap .nv-favs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;  /* centra los items cuando hay pocos */
  align-items: flex-start;
  padding: 12px;
  box-sizing: border-box;
}

/* Cada tarjeta: tamaño máximo para evitar estirado.
   flex: 0 1 auto -> no crecer para llenar todo el ancho,
   pero poder reducirse si hay varias */
#nv-favorites-wrap .nv-fav-card {
  box-sizing: border-box;
  flex: 0 1 320px;        /* ancho base preferido */
  max-width: 360px;       /* evita que la card sea enorme en pantallas grandes */
  min-width: 240px;       /* evita que sea demasiado angosta */
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none; /* por si es <a> */
  color: inherit;
}

/* Hover sutil */
#nv-favorites-wrap .nv-fav-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}

/* Miniatura */
#nv-favorites-wrap .nv-fav-card .nv-thumb {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  display: block;
  background: #fafafa;
}
#nv-favorites-wrap .nv-fav-card .nv-thumb img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}

/* Título + precio */
#nv-favorites-wrap .nv-fav-card .nv-title {
  font-family: 'Fredoka One', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 15px;
  margin: 0;
  line-height: 1.1;
  color: #111;
}
#nv-favorites-wrap .nv-fav-card .nv-price {
  font-weight: 800;
  font-size: 15px;
  color: var(--nv-accent, #DE0A2F);
  margin-top: 6px;
}

/* Acciones: agrupar Add to cart + remove (corazón grande) */
#nv-favorites-wrap .nv-fav-card .nv-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

/* Botones */
#nv-favorites-wrap .nv-add-cart-btn,
#nv-favorites-wrap .nv-remove-fav-btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(222,10,47,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Add to cart: rojo */
#nv-favorites-wrap .nv-add-cart-btn {
  background: var(--nv-accent, #DE0A2F);
  color: #fff;
  font-weight: 700;
  flex: 1 1 auto;
  text-align: center;
}
#nv-favorites-wrap .nv-add-cart-btn:hover { transform: translateY(-2px); }

/* Remove (simple, icon-like) - lo situamos más pequeño */
#nv-favorites-wrap .nv-remove-fav-btn {
  background: transparent;
  color: var(--nv-accent, #DE0A2F);
  border: 1px solid rgba(222,10,47,0.12);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
}
#nv-favorites-wrap .nv-remove-fav-btn:hover {
  background: rgba(222,10,47,0.06);
  transform: scale(1.04);
}

/* Si usas el botón corazón dentro del loop (nv-fav-btn), hacemos que no empuje layout */
.nv-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  padding: 6px;
}
.nv-fav-btn .nv-heart-svg { width:18px; height:18px; fill: currentColor; color: var(--nv-accent, #DE0A2F); }
.nv-fav-btn:hover { transform: translateY(-2px); background: rgba(222,10,47,0.06); }

/* Estado activo del corazón (cuando es favorito) */
.nv-fav-btn.is-active,
.nv-fav-btn[aria-pressed="true"] {
  background: var(--nv-accent, #DE0A2F);
  color: #fff;
  border-color: var(--nv-accent, #DE0A2F);
}

/* Mensaje cuando no hay favoritos */
#nv-favorites-wrap .nv-no-favs,
#nv-favorites-wrap .nv-guest-note {
  text-align: center;
  color: #666;
  padding: 18px 12px;
  font-size: 15px;
}

/* Específico: si por alguna razón el HTML envuelve cada tarjeta en <a> que debe comportarse como card */
#nv-favorites-wrap .nv-favs-grid a.nv-fav-card {
  text-decoration: none;
  color: inherit;
}

/* MOBILE: adaptar tamaños (cards apiladas) */
@media (max-width: 880px) {
  #nv-favorites-wrap .nv-fav-card { flex: 1 1 48%; max-width: 48%; }
}
@media (max-width: 520px) {
  #nv-favorites-wrap .nv-fav-card { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  #nv-favorites-wrap .nv-fav-card .nv-thumb img { height: 160px; }
  #nv-favorites-wrap .nv-actions { flex-direction: column; gap: 8px; align-items: stretch; }
  #nv-favorites-wrap .nv-remove-fav-btn { width: 100%; height: 44px; border-radius: 8px; }
}

/* ACCESIBILIDAD: focus visible */
#nv-favorites-wrap .nv-fav-card :focus {
  outline: 3px solid rgba(222,10,47,0.18);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Pequeño helper: si quieres forzar que *exactamente* 1 hijo tenga tamaño distinto:
   (solo funciona si la card es el único hijo directo) */
#nv-favorites-wrap .nv-favs-grid > *:only-child {
  margin: 0 auto;       /* centrar el único elemento */
  flex: 0 1 420px;      /* hacerlo un poco más ancho que el resto, pero no full-width */
  max-width: 520px;
}

/* Compatibilidad: asegurar que las reglas del tema no rompan esto
   (usar selectores específicos y !important donde temas agresivos lo requieran) */
#nv-favorites-wrap .nv-favs-grid,
#nv-favorites-wrap .nv-fav-card,
#nv-favorites-wrap .nv-fav-card .nv-thumb img {
  -webkit-transform: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ===========================
   Variables por si quieres cambiarlas desde JS o root
   =========================== */
:root {
  --nv-accent: #DE0A2F;
}

/* 1) Forzar que el contenedor de botones sea un flex container */
ul.buttons.sf-menu.product_added {
  display: flex !important;
  align-items: center;
  gap: 8px; /* espacio entre iconos, ajusta si quieres */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2) Hacer que el carrito aparezca primero */
ul.buttons.sf-menu.product_added .nectar-woo-cart {
  order: -1 !important; /* aparece antes que los otros items */
}

/* 3) Asegurar que la lupa quede después (si quieres forzarlo explícitamente) */
ul.buttons.sf-menu.product_added #search-btn {
  order: 0 !important;
}

/* 4) Ajustes visuales rápidos por si hay desbordes */
ul.buttons.sf-menu.product_added .cart-outer,
ul.buttons.sf-menu.product_added #search-btn > div {
  display: inline-flex;
  align-items: center;
}

/* 5) En móviles probablemente el menú cambia a columna; mantenemos el orden natural ahí */
@media (max-width: 800px) {
  ul.buttons.sf-menu.product_added {
    flex-direction: column !important;
    gap: 6px;
  }
  /* quitar orders en móvil para que quede como HTML (si prefieres) */
  ul.buttons.sf-menu.product_added .nectar-woo-cart,
  ul.buttons.sf-menu.product_added #search-btn {
    order: 0 !important;
  }
}
/* ============================================================
   [PARTE 1] CABECERA PRINCIPAL (#top) - FONDO, TEXTOS, ICONOS
   ============================================================ */

/* 1. Fondo Blanco y orden Z ajustado para no tapar submenús */
body header#top {                
    background-color: #ffffff !important;
    z-index: 1000 !important; 
    position: relative !important;
}

/* 2. ICONOS Y TEXTOS: Mi cuenta, Favoritos (#707070) */

/* Estilos base para los enlaces de texto */
body header#top nav ul li.Second-Cuenta a,
body header#top nav ul li.Second-Fav a {
    color: #707070 !important;
    display: flex !important;
    align-items: center !important;
}

/* --- Icono Usuario (Mi cuenta) --- */
body header#top nav ul li.Second-Cuenta a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    /* SVG Usuario en #707070 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23707070" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Icono Corazón (Favoritos) --- */
body header#top nav ul li.Second-Fav a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    /* SVG Corazón en #707070 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23707070" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 3. ICONO LUPA (#707070) */
body header#top ul.buttons li#search-btn a *,
body header#top .mobile-search a * {
    color: #707070 !important;
}

/* 4. CAMBIO DE ICONO DE CARRITO */
/* --- 1) Ocultar icono Salient original (forzado) --- */
body header#top nav ul.buttons li.nectar-woo-cart a.cart-contents i.icon-salient-cart,
body header#top nav ul.buttons li.nectar-woo-cart i.icon-salient-cart,
body header#top i.icon-salient-cart {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* --- 2) Asegurar que el contenedor tenga espacio para el nuevo icono --- */
/*
 * 1. Mover el elemento completo (li) del carrito a la izquierda si es posible.
 * Esto depende de cómo esté configurado el contenedor ul.buttons.
 */
body header#top nav ul.buttons {
    /* Si ul.buttons usa display: flex, esta propiedad lo empujará a la izquierda */
    justify-content: flex-start !important; 
    /* Opcional: Si quieres que el ul ocupe todo el espacio disponible */
    /* width: 100%; */
}

/* 2. Ajuste del carrito con Flexbox (lo que te gustó, mejorado para alinear) */
body header#top nav ul.buttons li.nectar-woo-cart {
    /* Asegura que el contenedor del carrito no tenga márgenes que lo separen */
    margin-left: 0 !important; 
    /* Si tienes más elementos y quieres que el carrito sea el primero: */
    /* order: -1; */
}

/* 3. Estilo del enlace interno (a.cart-contents) */
body header#top nav ul.buttons li.nectar-woo-cart a.cart-contents {
    display: flex !important;
    align-items: center !important;
    gap: 5px; /* Espacio entre el ícono y el texto/número */
    padding-left: 0 !important; 
    padding-right: 30px !important; /* Añadir un poco de espacio a la derecha, si quieres separarlo del borde o del menú */
}

/* 4. Asegurar que el ícono (::before) sea manejado por Flexbox */
body header#top nav ul.buttons li.nectar-woo-cart a.cart-contents::before {
    position: static !important; 
    left: auto !important; 
}

/* --- 3) Insertar SVG (URI-encoded) como background en ::before --- */
/* Nota: el SVG está URI-encoded para evitar problemas con caracteres especiales */
body header#top nav ul.buttons li.nectar-woo-cart a.cart-contents::before {
    content: "" !important;
    display: inline-block !important;
    position: absolute !important;
    left: 6px !important;           /* ajusta posición horizontal */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 25px !important;
    height: 25px !important;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='%23707070'%3E%3Cpath%20d='M0%201.5A.5.5%200%200%201%20.5%201h1a.5.5%200%200%201%20.485.379L2.89%206H14.5a.5.5%200%200%201%20.49.598l-1.5%207A.5.5%200%200%201%2013%2014H4a.5.5%200%200%201-.49-.402L2.01%203H.5a.5.5%200%200%201-.5-.5M5%2016a1%201%200%201%200%200-2%201%201%200%200%200%200%202m7%200a1%201%200%201%200%200-2%201%201%200%200%200%200%202'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    pointer-events: none !important;
}


/* 5. CONTADOR CARRITO */
body header#top .cart-wrap span {
    background-color: #707070 !important;
    color: #ffffff !important;
}

/* HOVERS CABECERA (Negro) */
body header#top nav ul li a:hover,                
body header#top nav ul li a:hover *,
body header#top ul.buttons li#search-btn a:hover * {
    color: #000000 !important;
}


/* ============================================================
   [PARTE 2] MENU SECUNDARIO ANTERIOR (Sin cambios funcionales)
   ============================================================ */

#header-secondary-outer {
    background-color: transparent !important;                
    padding: 0 !important;
    z-index: 999 !important; 
    position: relative !important;
}

#header-secondary-outer .container {                
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

#header-secondary-outer ul.sf-menu {                
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    height: 100% !important;                
    align-items: stretch !important;                
}

#header-secondary-outer ul.sf-menu li {                
    flex: 1 1 0% !important;                
    margin: 0 !important;
    padding: 0 !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;                
    transition: background-color 0.3s ease;
}

#header-secondary-outer ul.sf-menu li:last-child {                
    border-right: none !important;
}

/* Colores Específicos del menú secundario */
#header-secondary-outer ul.sf-menu li.First-Producto {
    background-color: rgba(238, 234, 234, 0.77) !important;
}
#header-secondary-outer ul.sf-menu li.First-Stock {
    background-color: rgba(217, 217, 217, 0.70) !important;
}
#header-secondary-outer ul.sf-menu li.First-Especiales {
    background-color: rgba(213, 208, 208, 0.87) !important;
}
#header-secondary-outer ul.sf-menu li.menu-item-31649 {
    background-color: rgba(188, 183, 183, 0.87) !important;
}
#header-secondary-outer ul.sf-menu li.First-Catalogo {
    background-color: rgba(213, 208, 208, 0.87) !important;
}

#header-secondary-outer ul.sf-menu li:hover {                
    filter: brightness(0.9) !important;
}

#header-secondary-outer ul.sf-menu li a {                
    display: flex !important;
    align-items: center !important;                
    justify-content: center !important;                
    height: 100% !important;
    width: 100% !important;
    padding: 20px 5px !important;                
    color: #444 !important;                
    text-decoration: none !important;                
    font-size: 15px !important;                
    text-align: center !important;                
    font-weight: 500 !important;                
    box-sizing: border-box !important;
}

/* Ocultar el precio dentro del mini-cart o del menú */
span.woocommerce-Price-amount.amount {
    display: none !important;
}

p.woocommerce-mini-cart__total.total {
    display: none !important;
}

/*

xd
*/
html:root {
  --nv-accent: #DE0A2F !important;
}

#header-outer {
    z-index: 9999 !important;
    pointer-events: auto !important;
}


/* --- TRANSPARENCIA TOTAL (ACTIVO E INACTIVO) --- */

/* 1. Quitamos el fondo blanco de TODOS los estados posibles */
#productos-grid li.product button.nv-fav-btn,
#productos-grid li.product button.nv-fav-btn[data-product-id],
#productos-grid li.product button.nv-fav-btn:hover,
#productos-grid li.product button.nv-fav-btn.active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 2. Color del contorno cuando NO hay corazón (Inactivo) */
#productos-grid li.product button.nv-fav-btn:not(.active) .nv-heart-svg path {
    stroke: #e61f4d !important; /* Rojo para que se vea el borde */
    fill: transparent !important;
    stroke-width: 1.5px !important;
}

/* 3. Color cuando SÍ hay corazón (Activo) */
#productos-grid li.product button.nv-fav-btn.active .nv-heart-svg path {
    fill: #e61f4d !important;
    stroke: #e61f4d !important;
}

/* 4. Sombra suave al SVG para que no se pierda en fotos blancas */
#productos-grid li.product button.nv-fav-btn .nv-heart-svg {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
}

/* --- RELLENO BLANCO INTERIOR (SOLO CORAZÓN) --- */

/* 1. Limpiamos el botón para que sea 100% transparente */
#productos-grid li.product button.nv-fav-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 2. Corazón NO ACTIVO: Fondo blanco adentro y borde rojo */
#productos-grid li.product button.nv-fav-btn:not(.active) .nv-heart-svg path {
    fill: #ffffff !important;  /* Esto rellena solo el dibujo del corazón */
    stroke: #e61f4d !important; /* El borde rojo */
    stroke-width: 1.5px !important;
}

/* 3. Corazón ACTIVO: Se vuelve todo rojo */
#productos-grid li.product button.nv-fav-btn.active .nv-heart-svg path {
    fill: #e61f4d !important;
    stroke: #e61f4d !important;
}

/* 4. Sombra suave para que el blanco no se confunda con fotos claras */
#productos-grid li.product button.nv-fav-btn .nv-heart-svg {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15)) !important;
}