/* =====================================================================
   VAMOS A VER — "THE OPTICAL SUPPLIER"
   Identidad: Distribuidor institucional B2B/B2C de salud visual
   Estilo: Amazon Business / Grainger — claro, técnico, confiable
   v2.0 | Abril 2026
   ===================================================================== */

/* VV: Tipografía institucional — Public Sans (diseñada para interfaces gov/corp) */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   VV: TOKENS — paleta industrial/médica
   ===================================================================== */
:root {
  --vv-blue:        #1e3a8a;   /* Azul corporativo — confianza industrial */
  --vv-blue-dark:   #162d6e;   /* Hover azul */
  --vv-blue-light:  #dbeafe;   /* Fondo azul suave */
  --vv-slate:       #64748b;   /* Gris técnico — textos secundarios */
  --vv-slate-light: #f1f5f9;   /* Fondo gris muy claro */
  --vv-orange:      #f59e0b;   /* Naranja acción — CTAs principales */
  --vv-orange-dark: #d97706;   /* Hover naranja */
  --vv-dark:        #0f172a;   /* Casi negro — textos principales */
  --vv-white:       #ffffff;
  --vv-border:      #e2e8f0;
  --vv-success:     #16a34a;   /* Verde stock disponible */
  --vv-muted:       #94a3b8;

  --vv-shadow-sm:   0 1px 4px rgba(15,23,42,0.08);
  --vv-shadow-md:   0 4px 16px rgba(15,23,42,0.12);
  --vv-shadow-lg:   0 8px 32px rgba(15,23,42,0.16);
  --vv-radius:      8px;
  --vv-radius-sm:   5px;
  --vv-transition:  0.18s ease;
}

/* =====================================================================
   VV: NUCLEAR RESET — eliminar badge "Certificado" completamente
   ===================================================================== */
.item-product .item .item-image::after,
.item-product .item .item-image::before,
[class*="certificado"],
[class*="Certificado"] {
  display: none !important;
  content: none !important;
}

/* =====================================================================
   VV: TIPOGRAFÍA GLOBAL — Public Sans
   ===================================================================== */
*,
body,
p, span, div, li, a,
input, textarea, select, button {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.h1-huge, .h1-huge-md {
  font-family: 'Public Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--vv-dark) !important;
}

body {
  background-color: var(--vv-slate-light) !important;
  color: var(--vv-dark) !important;
  line-height: 1.6;
}

/* =====================================================================
   VV: HEADER — institucional, denso de información
   ===================================================================== */

/* VV: Header fondo azul oscuro corporativo pero con transparencia para efecto premium */
.head-main {
  background: rgba(43, 93, 143, 0.9) !important; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) saturate(180%) !important; 
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  overflow: visible !important; 
  z-index: 99999 !important;
}

/* VV: Logo — forzar blanco sobre fondo azul */
.js-logo-container img,
.logo-img,
.head-main .logo-img,
header img[class*="logo"] {
  filter: brightness(0) invert(1) !important;
}

/* VV: Texto del logo si es texto */
.js-logo-container,
.js-logo-container a,
.head-main .h3,
.head-main .logo-text {
  color: var(--vv-white) !important;
  fill: var(--vv-white) !important;
}

/* VV: Nav links en blanco — texto visible sobre azul */
.head-main .head-logo-row a,
.head-main nav a,
.head-main a {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* VV: Iconos de carrito, cuenta, búsqueda — blanco */
.col-utility svg,
.desktop-utility-col svg,
.head-main .svg-icon-text,
.head-main svg {
  color: var(--vv-white) !important;
  fill: var(--vv-white) !important;
}

/* VV: Badge del carrito — naranja sobre azul */
.js-cart-count,
.cart-count,
.header-badge {
  background-color: var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
}

/* VV: Barra de anuncio — azul más claro con texto informativo */
.js-advertising-bar,
.advertising-bar,
[data-store="ad-bar"] {
  background-color: rgba(22, 45, 110, 0.95) !important;
  color: rgba(255,255,255,0.95) !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  text-align: center;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* =====================================================================
   VV: NAV DE CATEGORÍAS — barra oscura bajo el logo
   ===================================================================== */
.head-nav,
.head-nav-desktop-colors {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: none !important;
}

.head-nav a,
.navigation-link,
.js-navigation-link {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  padding: 11px 16px !important;
  transition: all 0.3s ease !important;
  border-radius: 4px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.head-nav a:hover,
.navigation-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* VV: Link destacado en naranja ("Equipamiento Profesional") */
.head-nav a.featured-link,
.header-featured-link {
  color: var(--vv-orange) !important;
  font-weight: 700 !important;
}

/* =====================================================================
   VV: EMERGENCY GLASS MENU (v17) — Compatible con HTML antiguo
   Uso de clases originales del tema para forzar el efecto Glass
   ===================================================================== */

/* 1. Base del contenedor (usando selectores originales del tema) */
html body .head-main .nav-dropdown-content,
html body .head-main .desktop-dropdown,
html body .head-main .js-desktop-dropdown {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  
  /* Glassmorphism Spec 5.0: Sky Blue & Pure Glass (No Yellow, No Dark Blue) */
  background: linear-gradient(135deg, rgba(186, 230, 253, 0.85), rgba(255, 255, 255, 0.95)) !important;
  backdrop-filter: blur(50px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(220%) !important;
  
  border-radius: 0 0 24px 24px !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-top: 6px solid #60a5fa !important; /* Sky Blue vibrant (No Orange) */
  box-shadow: 0 50px 120px rgba(96, 165, 250, 0.25), inset 0 1px 1px rgba(255,255,255,0.8) !important;
  
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateX(-50%) translateY(20px) scale(0.97) !important;
  z-index: 999999 !important;
  overflow: visible !important;

  /* Constrain Width: Menos ancho, centrado con el contenedor */
  width: 100% !important;
  max-width: 1140px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(15px) !important; /* Centrado horizontal */
  padding: 40px 0 !important;
}

/* 2. TRIGGER HOVER UNIVERSAL: Forzar apertura ignorando JS */
html body .head-main .nav-item-desktop:hover .nav-dropdown-content,
html body .head-main .nav-item-desktop:hover .desktop-dropdown,
html body .head-main .js-nav-main-item:hover .nav-dropdown-content,
html body .head-main .js-nav-main-item:hover .desktop-dropdown,
html body .head-main .nav-dropdown:hover .nav-dropdown-content,
html body .head-main .nav-dropdown:hover .desktop-dropdown,
html body .head-main .js-item-subitems-desktop:hover .desktop-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: initial !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 2.1 PUENTE INVISIBLE (Invisible Bridge): Eliminar el "gap" de hover */
/* Aseguamos transparencia TOTAL y eliminamos cualquier sombra heredada para que no se vea el "rectángulo oscuro" */
html body .head-main .nav-item-desktop .nav-list-link:after,
html body .head-main .nav-dropdown .nav-list-link:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 48px; /* Cubre el espacio vacío */
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  z-index: 10;
  pointer-events: auto !important; /* Mantiene el hover */
}

/* 2.2 Estilo de la Flecha (Chevron) añadida en tpl */
html body .head-main .nav-list-arrow {
  display: inline-flex;
  transition: transform 0.3s ease;
  vertical-align: middle;
  margin-left: 2px !important;
}

html body .head-main .nav-item-desktop:hover .nav-list-arrow {
  transform: rotate(180deg);
  color: var(--vv-orange) !important;
}

/* 3. MEGA MENÚ MODERNO: Estructura en Grilla (Efecto Catálogo Premium) */
html body .head-main .desktop-list-subitems {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 columnas balanceadas */
  gap: 20px 30px !important;
  padding: 10px 40px !important;
  width: 100% !important;
  list-style: none !important;
}

/* Estilo para los títulos de columna (primer nivel de submenú) */
html body .head-main .desktop-list-subitems > .nav-item {
  border-bottom: 2px solid rgba(30, 86, 219, 0.1) !important;
  margin-bottom: 15px !important;
}

html body .head-main .desktop-list-subitems > .nav-item > a {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--vv-blue) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  padding: 0 0 8px 0 !important;
  border-bottom: none !important;
  pointer-events: none !important; /* Título no clicable para mejor UX en columnas */
}

/* Estilo para los items individuales (segundo nivel de submenú) */
html body .head-main .desktop-list-subitems .list-subitems {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .head-main .desktop-list-subitems .list-subitems .nav-item a {
  padding: 6px 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center;
}

/* Bullet moderno antes de cada sub-item */
html body .head-main .desktop-list-subitems .list-subitems .nav-item a:before {
  content: '→';
  margin-right: 8px;
  font-weight: 700;
  color: var(--vv-orange);
  opacity: 0;
  transition: all 0.2s ease;
  transform: translateX(-5px);
}

html body .head-main .desktop-list-subitems .list-subitems .nav-item a:hover {
  background: transparent !important;
  color: var(--vv-blue) !important;
  padding-left: 0 !important;
}

html body .head-main .desktop-list-subitems .list-subitems .nav-item a:hover:before {
  opacity: 1;
  transform: translateX(0);
}

html body .head-main .desktop-dropdown {
  border-top: 3px solid var(--vv-orange) !important;
}

/* NUCLEAR OVERRIDE: Forzar color oscuro en TODOS los enlaces del menú y submenús */
html body .nav-list-link,
html body .desktop-dropdown a,
html body .nav-dropdown-content a,
html body .navigation-dropdown a,
html body .desktop-list-subitems .nav-list-link,
html body .list-subitems .nav-list-link,
html body .modal-nav-hamburger .nav-list-link {
  color: #1e293b !important; /* Texto oscuro base */
  font-weight: 500 !important;
  text-shadow: none !important;
  transition: all var(--vv-transition) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Excepción: Los links del NIVEL SUPERIOR en la barra azul deben ser blancos */
html body .head-main .nav-desktop-list > .nav-item > .nav-list-link,
html body .head-main .js-nav-main-item > .nav-list-link,
html body .head-main .nav-item-desktop > .nav-list-link {
  color: #ffffff !important;
}

/* Hover state para todos los links de submenú */
html body .desktop-dropdown a:hover,
html body .list-subitems a:hover,
html body .nav-dropdown-content a:hover,
html body .modal-nav-hamburger .nav-list-link:hover {
  color: #1a56db !important;
  background-color: var(--vv-blue-light) !important;
  border-radius: 4px !important;
  padding-left: 20px !important; /* Efecto sutil de desplazamiento */
}



/* =====================================================================
   VV: HERO / SLIDER — segmentado B2B + B2C
   ===================================================================== */

/* VV: Overlay oscuro para legibilidad del texto - REMOVIDO para que banners reales no pierdan saturación */
.section-slider::after,
.js-home-slider-section .section-slider::after {
  display: none !important;
}

/* VV: Texto del slider — izquierda, institucional */
.swiper-text {
  position: relative;
  z-index: 2;
  text-align: left !important;
}

.swiper-text .h1-huge,
.swiper-text h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: var(--vv-white) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.75rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40);
}

.swiper-text p {
  font-size: clamp(0.88rem, 1.5vw, 1.05rem) !important;
  color: rgba(255,255,255,0.88) !important;
  margin-bottom: 1.5rem !important;
  max-width: 480px;
  line-height: 1.6;
}

/* VV: CTA del slider — naranja industrial */
.swiper-text .btn,
.swiper-text .btn-default {
  background-color: var(--vv-orange) !important;
  border-color: var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 13px 28px !important;
  border-radius: var(--vv-radius-sm) !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(245,158,11,0.40);
  transition: background var(--vv-transition), transform var(--vv-transition), box-shadow var(--vv-transition) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.swiper-text .btn:hover {
  background-color: var(--vv-orange-dark) !important;
  border-color: var(--vv-orange-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245,158,11,0.50) !important;
}

/* VV: Paginación del slider */
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.50) !important;
  opacity: 1 !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 2px !important;
  transition: background var(--vv-transition), width var(--vv-transition);
}

.swiper-pagination-bullet-active {
  background: var(--vv-orange) !important;
  width: 40px !important;
}

/* VV: Flechas del slider */
.swiper-button-prev,
.swiper-button-next {
  background: rgba(15,23,42,0.45) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: var(--vv-radius-sm) !important;
  transition: background var(--vv-transition) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(15,23,42,0.70) !important;
}

/* =====================================================================
   VV: BANNER DE SERVICIOS — franja de distribuidora
   ===================================================================== */
.section-informative-banners {
  background: var(--vv-white) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--vv-border) !important;
  padding: 0 !important;
}

.section-informative-banners .swiper-slide {
  padding: 16px 24px !important;
  border-right: 1px solid var(--vv-border);
  transition: background var(--vv-transition);
}

.section-informative-banners .swiper-slide:last-child {
  border-right: none;
}

.section-informative-banners .swiper-slide:hover {
  background: var(--vv-blue-light);
}

.section-informative-banners svg {
  color: var(--vv-blue) !important;
  fill: var(--vv-blue) !important;
  width: 28px !important;
  height: 28px !important;
}

.section-informative-banners h3 {
  color: var(--vv-dark) !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-informative-banners .service-text {
  color: var(--vv-slate) !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* =====================================================================
   VV: TARJETAS DE PRODUCTO — estilo catálogo industrial
   ===================================================================== */

/* VV: Card con fondo blanco limpio — SIN flex para no romper layout del tema */
.item-product .item {
  background: var(--vv-white) !important;
  border: 1px solid var(--vv-border) !important;
  border-radius: var(--vv-radius) !important;
  overflow: hidden;
  box-shadow: var(--vv-shadow-sm) !important;
  transition: box-shadow var(--vv-transition), border-color var(--vv-transition) !important;
}

.item-product .item:hover {
  box-shadow: var(--vv-shadow-md) !important;
  border-color: #bfdbfe !important;
}

/* VV: Imagen del producto — fondo neutro, sin animación que rompe cards */
.item-image {
  background-color: #f8fafc !important;
}

/* VV: Arreglo al hover de las imágenes del grid (Sin romper Swiper) */
.item-product .item .item-image-featured {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Permitimos que el secundario se oculte via opacity, NO con display:none para que Swiper no colapse */
.item-product .item:hover .item-image-secondary {
  opacity: 0 !important;
}

/* =====================================================================
   VV: GLASSMORPHISM UNIVERSAL (CATÁLOGO PRODUCTOS)
   ===================================================================== */
.item-product .item {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(241,245,249,0.5)) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06), inset 0 1px 1px rgba(255,255,255,1) !important;
  border: 1px solid rgba(219,234,254,0.5) !important;
  padding: 16px !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
}

.item-product .item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(30,58,138,0.18), inset 0 1px 1px rgba(255,255,255,1) !important;
  border-color: rgba(30,58,138,0.3) !important;
  z-index: 10;
}

/* VV: Nombre del producto */
.item-name,
.js-item-name {
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: var(--vv-dark) !important;
  opacity: 1 !important;
  line-height: 1.45 !important;
  margin-bottom: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* VV: Precio — prominente, azul */
.item-price,
.js-price-display {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  font-weight: 800 !important;
  color: var(--vv-blue) !important;
  font-family: 'Public Sans', sans-serif !important;
  line-height: 1;
}

/* VV: Precio tachado */
.price-compare {
  color: var(--vv-muted) !important;
  font-size: 0.78rem !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* VV: Badge de descuento — naranja sólido */
.item-label,
.js-item-label,
.product-label-sale,
.label-sale {
  background-color: var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.02em;
}

.label-new,
.product-label-new {
  background-color: var(--vv-blue) !important;
  color: var(--vv-white) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
}

/* =====================================================================
   VV: BOTÓN DE COMPRA — SIEMPRE VISIBLE, protagonista
   Los compradores B2B no buscan el botón, lo ven de frente
   ===================================================================== */

/* VV: Contenedor de acciones siempre visible */
.item-actions {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  width: 100% !important;
}

/* VV: Botón "Agregar al carrito" / "Comprar" en cards */
.btn-add-to-cart,
.js-addtocart:not(.js-addtocart-placeholder),
.item-actions .btn:not(.js-addtocart-placeholder),
.item-actions .btn-primary:not(.js-addtocart-placeholder),
.item-actions input[type="submit"] {
  background-color: var(--vv-orange) !important;
  border: 2px solid var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  border-radius: var(--vv-radius-sm) !important;
  padding: 10px 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center;
  cursor: pointer;
  transition: background var(--vv-transition), border-color var(--vv-transition) !important;
  /* SIN transform — estilo catálogo, no tienda de moda */
}

/* Ocultar forzadamente el placeholder hasta que sea ejecutado por JS */
.js-addtocart-placeholder[style*="display: none"],
.js-addtocart-placeholder {
  display: none !important;
}

.btn-add-to-cart:hover,
.js-addtocart:not(.js-addtocart-placeholder):hover,
.item-actions .btn:not(.js-addtocart-placeholder):hover,
.item-actions .btn-primary:not(.js-addtocart-placeholder):hover {
  background-color: var(--vv-orange-dark) !important;
  border-color: var(--vv-orange-dark) !important;
}

/* VV: Sin stock — gris con texto claro */
.btn-add-to-cart.nostock,
.js-addtocart[disabled],
.item-actions .btn[disabled] {
  background-color: var(--vv-slate-light) !important;
  border-color: var(--vv-border) !important;
  color: var(--vv-muted) !important;
  cursor: not-allowed !important;
  font-weight: 500 !important;
}

/* VV: Tag "Próximo Reabastecimiento" junto a productos agotados */
.item-product[data-product-type] .item .item-description::before {
  display: none; /* placeholder para futura implementación por JS */
}

/* =====================================================================
   VV: BOTONES GLOBALES — consistencia institucional
   ===================================================================== */

.btn-primary {
  background-color: var(--vv-blue) !important;
  border-color: var(--vv-blue) !important;
  color: var(--vv-white) !important;
  font-weight: 600 !important;
  border-radius: var(--vv-radius-sm) !important;
  transition: background var(--vv-transition), border-color var(--vv-transition) !important;
}

.btn-primary:hover {
  background-color: var(--vv-blue-dark) !important;
  border-color: var(--vv-blue-dark) !important;
}

.btn-secondary,
.btn-outline {
  border: 2px solid var(--vv-blue) !important;
  color: var(--vv-blue) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-radius: var(--vv-radius-sm) !important;
  transition: background var(--vv-transition), color var(--vv-transition) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--vv-blue) !important;
  color: var(--vv-white) !important;
}

/* =====================================================================
   VV: PÁGINA DE PRODUCTO — botón CTA grande naranja
   ===================================================================== */

/* VV: Precio en página de producto */
.product-price .js-price-display,
[data-store="product-price"] .js-price-display {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  color: var(--vv-blue) !important;
  font-weight: 800 !important;
}

/* VV: Botón de compra en página de producto — naranja grande */
.product-form-submit,
.js-buy-button,
input[name="add_to_cart"].btn-primary,
[data-store="buy-button"] input[type="submit"] {
  background-color: var(--vv-orange) !important;
  border: 2px solid var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border-radius: var(--vv-radius-sm) !important;
  width: 100%;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(245,158,11,0.30);
  transition: background var(--vv-transition), border-color var(--vv-transition) !important;
}

.product-form-submit:hover,
input[name="add_to_cart"].btn-primary:hover {
  background-color: var(--vv-orange-dark) !important;
  border-color: var(--vv-orange-dark) !important;
}

/* =====================================================================
   VV: SECCIONES HOME — headings institucionales
   ===================================================================== */

.section-featured-home .page-header,
.section-home .page-header,
[data-store*="home-products"] .page-header {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  color: var(--vv-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-left: 4px solid var(--vv-orange) !important;
  padding-left: 14px !important;
  margin-bottom: 20px !important;
}

/* VV: Sin línea decorativa bajo el heading (ya tiene borde izquierdo) */
.section-featured-home .page-header::after,
.section-home .page-header::after {
  display: none !important;
}

.section-featured-home,
.section-new-products-home,
.section-best-seller-products-home,
.section-home {
  background-color: var(--vv-slate-light) !important;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* =====================================================================
   VV: FRANJA DE MARCAS — "Distribuidor de Marcas Líderes"
   ===================================================================== */

/* VV: Sección de brands con fondo blanco destacado */
.section-brands,
.js-home-brands,
[data-store="brands"] {
  background-color: var(--vv-white) !important;
  border-top: 1px solid var(--vv-border) !important;
  border-bottom: 1px solid var(--vv-border) !important;
  padding: 28px 0 !important;
}

/* VV: Título de la sección de marcas */
.section-brands .section-title,
.section-brands h2,
.brands-section-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--vv-slate) !important;
  text-align: center;
  margin-bottom: 20px !important;
}

/* VV: Logos de marcas en escala de grises, color en hover */
.brand-item img,
.js-brand-item img {
  filter: grayscale(100%) !important;
  opacity: 0.60 !important;
  transition: filter var(--vv-transition), opacity var(--vv-transition) !important;
}

.brand-item:hover img,
.js-brand-item:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* =====================================================================
   VV: CATEGORIAS — Neo-Surgical Glassmorphism
   ===================================================================== */
.home-category-image {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(241,245,249,0.5)) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06), inset 0 1px 1px rgba(255,255,255,1) !important;
  border: 1px solid rgba(219,234,254,0.5) !important;
  padding: 24px !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
  position: relative;
  overflow: hidden;
}

.home-category:hover .home-category-image {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(30,58,138,0.18), inset 0 1px 1px rgba(255,255,255,1) !important;
  border-color: rgba(30,58,138,0.3) !important;
}

/* Efecto de destello interactivo */
.home-category-image::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(30deg) translateY(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.home-category:hover .home-category-image::after {
  transform: rotate(30deg) translateY(100%);
}

.home-category .category-name {
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
  font-size: 0.95rem !important;
  transition: color var(--vv-transition);
}

.home-category:hover .category-name {
  color: var(--vv-blue) !important;
}

/* =====================================================================
   VV: FORZAR IMAGENES NUEVAS B2C (Ignorar caché HTML o CMS)
   ===================================================================== */
.home-category-image img {
  opacity: 0 !important; 
  display: block; 
  width: 100%;
  height: auto;
}

.home-category-image {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Asignación manual de fondos según el orden de diapositivas */
.swiper-slide:nth-child(1) .home-category-image { background-image: url('../cat_1.png') !important; }
.swiper-slide:nth-child(2) .home-category-image { background-image: url('../cat_2.png') !important; }
.swiper-slide:nth-child(3) .home-category-image { background-image: url('../cat_3.png') !important; }
.swiper-slide:nth-child(4) .home-category-image { background-image: url('../cat_4.png') !important; }
.swiper-slide:nth-child(5) .home-category-image { background-image: url('../cat_5.png') !important; }
.swiper-slide:nth-child(6) .home-category-image { background-image: url('../cat_1.png') !important; }
.swiper-slide:nth-child(7) .home-category-image { background-image: url('../cat_2.png') !important; }
.swiper-slide:nth-child(8) .home-category-image { background-image: url('../cat_3.png') !important; }
.swiper-slide:nth-child(9) .home-category-image { background-image: url('../cat_4.png') !important; }
.swiper-slide:nth-child(10) .home-category-image { background-image: url('../cat_5.png') !important; }
.swiper-slide:nth-child(11) .home-category-image { background-image: url('../cat_1.png') !important; }
.swiper-slide:nth-child(12) .home-category-image { background-image: url('../cat_2.png') !important; }
.swiper-slide:nth-child(13) .home-category-image { background-image: url('../cat_3.png') !important; }
.swiper-slide:nth-child(14) .home-category-image { background-image: url('../cat_4.png') !important; }
.swiper-slide:nth-child(15) .home-category-image { background-image: url('../cat_5.png') !important; }

/* =====================================================================
   VV: BUSCADOR — grande y técnico
   ===================================================================== */

.js-search-input,
.search-input,
input[type="search"] {
  border: 2px solid var(--vv-border) !important;
  border-radius: var(--vv-radius-sm) !important;
  font-family: 'Public Sans', sans-serif !important;
  font-size: 0.88rem !important;
  transition: border-color var(--vv-transition), box-shadow var(--vv-transition) !important;
}

.js-search-input:focus,
.search-input:focus,
input[type="search"]:focus {
  border-color: var(--vv-orange) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.20) !important;
  outline: none !important;
}

/* =====================================================================
   VV: FOOTER — oscuro y corporativo
   ===================================================================== */

.js-footer,
footer,
[data-store="footer"] {
  background-color: #0f172a !important;
  color: rgba(255,255,255,0.78) !important;
  border-top: 3px solid var(--vv-orange) !important;
}

.js-footer a,
footer a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.85rem !important;
  transition: color var(--vv-transition) !important;
}

.js-footer a:hover,
footer a:hover {
  color: var(--vv-orange) !important;
}

.js-footer h1,.js-footer h2,.js-footer h3,
.js-footer h4,.js-footer h5,.js-footer h6,
footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
  color: var(--vv-white) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 14px !important;
}

/* VV: Franja inferior del footer con copyright */
.footer-legal,
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.40) !important;
}

/* =====================================================================
   VV: CARRITO — panel lateral institucional
   ===================================================================== */

.js-cart-panel,
.cart-panel {
  border-left: 3px solid var(--vv-blue) !important;
  box-shadow: -8px 0 40px rgba(15,23,42,0.20) !important;
}

/* VV: Botón checkout carrito — naranja grande */
.js-cart-checkout-btn,
.cart-checkout-btn,
.cart-summary .btn-primary {
  background-color: var(--vv-orange) !important;
  border-color: var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 15px !important;
  border-radius: var(--vv-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.30) !important;
}

.js-cart-checkout-btn:hover,
.cart-checkout-btn:hover {
  background-color: var(--vv-orange-dark) !important;
  border-color: var(--vv-orange-dark) !important;
}

/* =====================================================================
   VV: BREADCRUMBS — orientación técnica
   ===================================================================== */

.breadcrumbs,
.js-breadcrumbs {
  font-size: 0.78rem !important;
  color: var(--vv-slate) !important;
}

.breadcrumbs a {
  color: var(--vv-blue) !important;
  transition: color var(--vv-transition) !important;
}

.breadcrumbs a:hover {
  color: var(--vv-orange) !important;
}

/* =====================================================================
   VV: WHATSAPP — visible, no intrusivo
   ===================================================================== */

.js-whatsapp-btn,
.whatsapp-btn,
[data-store="whatsapp"] a {
  background-color: #25D366 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35) !important;
  transition: transform var(--vv-transition), box-shadow var(--vv-transition) !important;
  border-radius: 50% !important;
}

.js-whatsapp-btn:hover {
  transform: scale(1.06) !important;
}

/* =====================================================================
   VV: NEWSLETTER — franja azul institucional
   ===================================================================== */

.section-newsletter,
.js-home-newsletter,
[data-store="newsletter"] {
  background-color: var(--vv-blue) !important;
  padding: 44px 0 !important;
}

.newsletter-input,
.js-newsletter-input {
  border: none !important;
  border-radius: var(--vv-radius-sm) !important;
  padding: 13px 16px !important;
  font-family: 'Public Sans', sans-serif !important;
}

.newsletter-submit,
.js-newsletter-submit {
  background-color: var(--vv-orange) !important;
  border-color: var(--vv-orange) !important;
  color: var(--vv-dark) !important;
  font-weight: 700 !important;
  border-radius: var(--vv-radius-sm) !important;
}

.newsletter-submit:hover {
  background-color: var(--vv-orange-dark) !important;
  border-color: var(--vv-orange-dark) !important;
}

/* =====================================================================
   VV: LAZY LOAD — imágenes
   ===================================================================== */

img.lazyload,
img.lazyloading {
  opacity: 0;
  transition: opacity 0.35s ease;
}

img.lazyloaded {
  opacity: 1;
}

/* =====================================================================
   VV: ACCESIBILIDAD — foco visible
   ===================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--vv-orange) !important;
  outline-offset: 3px !important;
}

/* =====================================================================
   VV: RESPONSIVE — mobile-first
   ===================================================================== */

@media (max-width: 767px) {

  /* VV: Header azul en mobile — logo centrado */
  .head-main {
    padding: 6px 0 !important;
  }

  /* VV: Botones de compra en mobile — tamaño táctil */
  .btn-add-to-cart,
  .js-addtocart,
  .item-actions .btn {
    font-size: 0.80rem !important;
    padding: 11px 14px !important;
  }

  /* VV: Precio en mobile */
  .item-price {
    font-size: 1rem !important;
  }

  /* VV: Trust signals en mobile — apilados */
  .section-informative-banners .swiper-slide {
    border-right: none !important;
    border-bottom: 1px solid var(--vv-border);
  }

  /* VV: Hero texto en mobile */
  .swiper-text .h1-huge {
    font-size: 1.4rem !important;
  }

  .swiper-text p {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
  }
}

@media (min-width: 768px) {
  .item-product {
    padding: 6px !important;
  }
}

/* =====================================================================
   FIN — vamosaver-custom.css v2.0 "The Optical Supplier"
   ===================================================================== */

/* VV: Logo adjustment on mobile */
@media (max-width: 768px) {
  .logo-img, .js-logo-container img {
    max-height: 55px !important;
    width: auto;
  }
}

/* =====================================================================
   VV: FORZAR BANNERS PROMOCIONALES B2C (Estilo, respetando CMS)
   ===================================================================== */
.js-banner .textbanner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.js-banner .textbanner-image {
  /* Glassmorphism en Banners Nativos */
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(241,245,249,0.5)) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: var(--vv-radius) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06), inset 0 1px 1px rgba(255,255,255,1) !important;
  border: 1px solid rgba(219,234,254,0.5) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
  overflow: hidden;
}

.js-banner .textbanner-image img {
  border-radius: calc(var(--vv-radius) - 2px);
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.js-banner:hover .textbanner-image {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(30,58,138,0.18), inset 0 1px 1px rgba(255,255,255,1) !important;
  border-color: rgba(30,58,138,0.3) !important;
}

.js-banner:hover .textbanner-image img {
  transform: scale(1.05); /* Efecto zoom interior */
}

/* =====================================================================
   VV: HEADER DARK GLASSMORPHISM PARA LOGO BLANCO
   ===================================================================== */
/* Fondo oscuro translúcido para resaltar el logo blanco */
.head-main,
.header,
.js-head-main {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease;
}

/* Iconos de carrito, búsqueda y usuario en blanco */
.head-main svg,
.head-main .icon {
  fill: #f8fafc !important;
  color: #f8fafc !important;
}

/* Ajustes tipográficos del menú: Color claro */
@media (min-width: 768px) {
  .nav-list .nav-item .nav-link,
  .nav-desktop .nav-item > a {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.3s ease !important;
  }

  .nav-list .nav-item:hover .nav-link,
  .nav-desktop .nav-item:hover > a {
    color: #3b82f6 !important; /* Azul eléctrico en hover */
  }
}

/* =====================================================================
   VV: FIX Z-INDEX CONFLICTS — Modales y Buscador sobre el Header
   ===================================================================== */
html body .js-modal,
html body .modal,
html body .js-modal-overlay,
html body .modal-overlay,
html body .fancybox__container {
  z-index: 200000 !important; /* Mayor que el head-main (99999) */
}

/* Forzar que el buscador específico tenga prioridad de visualización */
html body .modal-nav-search,
html body .nav-search {
  z-index: 200001 !important;
}

/* Las sugerencias de búsqueda deben estar por encima del fondo del modal */
html body .search-suggestions {
  z-index: 210000 !important;
}

/* Asegurar que el botón de cerrar sea cliqueable */
html body .js-modal-close,
html body .modal-close {
  z-index: 200002 !important;
}