/* ========================================================================= 
   1. CONFIGURACIÓN BASE DEL HEADER (Escritorio y general)
   ========================================================================= */ 

#siteHeader.site-header-qb { 
   position: fixed !important; 
   top: 0 !important; 
   left: 0 !important; 
   right: 0 !important; 
   width: 100% !important; 
   max-width: 100% !important; 
   
   height: clamp(70px, 5.2vw, 99.25px) !important; 
   min-height: 70px !important; 
   padding: clamp(12px, 1.3vw, 19.85px) clamp(15px, 1.8vw, 29.775px) !important; 
   
   z-index: 30 !important; 
   display: flex !important; 
   justify-content: space-between !important; 
   align-items: stretch !important; 
   
   box-sizing: border-box !important; 
   -webkit-box-sizing: border-box !important; 

   background-color: transparent !important; 
   border: none !important; 
   box-shadow: none !important; 
   margin: 0 !important; 
   outline: none !important; 

   /* Transición perfectamente simétrica y suave tanto para subir como para bajar */
   transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease, backdrop-filter 0.4s ease !important; 
} 

/* Estado del header cuando se oculta automáticamente al bajar la página */
#siteHeader.site-header-qb.header-hidden { 
   transform: translateY(-100%) !important; 
   opacity: 0 !important; 
   pointer-events: none !important; 
} 

/* ========================================================================= 
   3. DISTRIBUCIÓN DE LAS 3 COLUMNAS (ESCRITORIO) 
   ========================================================================= */ 

.header-col { 
   display: flex !important; 
   align-items: center !important; 
} 

.header-col-left, 
.header-col-right { 
   flex: 1 !important; 
   display: flex !important; 
   align-items: center !important; 
} 

.header-col-right { 
   justify-content: flex-end !important; 
} 

.header-col-center { 
   flex: 0 0 auto !important; 
   justify-content: center !important; 
} 

/* ========================================================================= 
   CONTENEDOR IZQUIERDO TRANSPARENTE (LOGO / TEXTO ESCRITORIO) 
   ========================================================================= */ 

.qb-left-nav { 
   background: transparent !important; 
   border: none !important; 
   box-shadow: none !important; 
   backdrop-filter: none !important; 
   -webkit-backdrop-filter: none !important; 
   padding: 0 !important; 
   display: flex !important; 
   align-items: center !important; 
   height: 100% !important; 
   box-sizing: border-box !important; 
} 

.qb-logo-text { 
   text-decoration: none !important; 
   font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important; 
   font-weight: 700 !important; 
   letter-spacing: clamp(1px, 0.12vw, 1.4px) !important; 
   text-transform: uppercase !important; 
   color: #000000 !important; 
   white-space: nowrap !important; 
} 

/* ========================================================================= 
   4. MENÚ CENTRAL GLASSMORPHISM (ESCRITORIO) 
   ========================================================================= */ 

.qb-center-nav { 
   background: rgba(255, 255, 255, 0.12) !important; 
   border: none !important; 
   border-radius: clamp(2px, 0.3vw, 4px) !important; 
   padding: clamp(10px, 1.2vw, 15px) clamp(22px, 2.2vw, 32px) !important; 
   width: auto !important; 
   max-width: 90vw !important; 
   backdrop-filter: blur(10px) !important; 
   -webkit-backdrop-filter: blur(10px) !important; 
   box-shadow: none !important; 
   display: flex !important; 
   justify-content: center !important; 
   align-items: center !important; 
   box-sizing: border-box !important; 
} 

.qb-nav-list { 
   display: flex !important; 
   list-style: none !important; 
   margin: 0 !important; 
   padding: 0 !important; 
   gap: 28px !important; 
   align-items: center !important; 
   justify-content: center !important; 
   width: 100% !important; 
} 

.qb-center-nav a { 
   text-decoration: none !important; 
   font-size: clamp(0.7rem, 0.85vw, 0.82rem) !important; 
   font-weight: 700 !important; 
   letter-spacing: clamp(0.6px, 0.08vw, 1px) !important; 
   text-transform: uppercase !important; 
   color: #000000 !important; 
   opacity: 1 !important; 
   position: relative !important; 
   display: inline-block !important; 
   padding-bottom: 0 !important; 
   transition: color 0.2s ease !important; 
   white-space: nowrap !important; 
} 

.qb-center-nav a:hover { 
   color: #b29370 !important; 
} 

.qb-nav-list li.current-menu-item a::after, 
.qb-nav-list li.current_page_item a::after, 
.qb-nav-list li.current-menu-ancestor a::after, 
.qb-nav-list .current-menu-item a::after, 
.qb-nav-list .current_page_item a::after { 
   content: '' !important; 
   position: absolute !important; 
   bottom: -16px !important; 
   left: 0 !important; 
   width: 100% !important; 
   height: 1px !important; 
   background-color: #ffffff !important; 
   box-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(255, 255, 255, 0.6) !important; 
} 

/* ========================================================================= 
   5. CONTENEDOR DERECHO DE ACCIONES (ESCRITORIO) 
   ========================================================================= */ 

.qb-right-actions { 
   display: flex !important; 
   align-items: center !important; 
   justify-content: flex-end !important; 
   gap: 18px !important; 
   height: 100% !important; 
   box-sizing: border-box !important; 
} 

.qb-right-actions a { 
   display: flex !important; 
   align-items: center !important; 
   justify-content: center !important; 
   width: 32px !important; 
   height: 32px !important; 
   padding: 0 !important; 
   margin: 0 !important; 
   color: #000000 !important; 
   text-decoration: none !important; 
   transition: color 0.2s ease !important; 
   box-sizing: border-box !important; 
} 

.qb-right-actions a:hover { 
   color: #b29370 !important; 
} 

.qb-right-actions a svg { 
   width: 20px !important; 
   height: 20px !important; 
   min-width: 20px !important; 
   min-height: 20px !important; 
   display: block !important; 
   margin: auto !important; 
   box-sizing: border-box !important; 
} 

/* ========================================================================= 
   6. ESTRUCTURA DEL HEADER MÓVIL (< 768px) Y COMPORTAMIENTO GLASSMORPHISM
   ========================================================================= */ 

.qb-header-mobile { 
   display: none !important; 
} 

@media screen and (max-width: 768px) { 
   .header-col-left, 
   .header-col-center, 
   .header-col-right { 
      display: none !important; 
   } 

   #siteHeader.site-header-qb {
      background-color: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      border-bottom: none !important;
   }

   #siteHeader.site-header-qb.header-scrolled {
      background-color: rgba(255, 255, 255, 0.8) !important; 
      backdrop-filter: blur(12px) !important; 
      -webkit-backdrop-filter: blur(12px) !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
   }

   .qb-header-mobile { 
      display: flex !important; 
      justify-content: space-between !important; 
      align-items: center !important; 
      width: 100% !important; 
      height: 100% !important; 
      box-sizing: border-box !important; 
      padding: 0 10px !important; 
   } 

   .qb-mobile-col {
      display: flex !important;
      align-items: center !important;
      box-sizing: border-box !important;
   }

   .qb-mobile-left,
   .qb-mobile-right {
      flex: 0 0 45px !important; 
      width: 45px !important;
      min-width: 45px !important;
   }

   .qb-mobile-left {
      justify-content: flex-start !important;
   }

   .qb-mobile-right {
      justify-content: flex-end !important;
   }

   .qb-mobile-center {
      flex: 1 !important; 
      justify-content: center !important; 
      text-align: center !important; 
      overflow: hidden !important; 
   }

   .qb-mobile-center img {
      height: auto !important; 
      max-height: none !important; 
      width: auto !important; 
      max-width: 180px !important; 
      object-fit: contain !important; 
      display: block !important; 
      margin: 0 auto !important; 
   }

   .qb-mobile-center .qb-logo-text {
      font-size: 1.25rem !important; 
   }

   .qb-header-mobile .qb-mob-btn { 
      background: none !important; 
      border: none !important; 
      cursor: pointer !important; 
      padding: 0 !important; 
      margin: 0 !important; 
      display: inline-flex !important; 
      align-items: center !important; 
      justify-content: center !important; 
      width: 32px !important; 
      height: 32px !important; 
      color: #000000 !important; 
      text-decoration: none !important; 
      box-sizing: border-box !important; 
   } 

   .qb-header-mobile .qb-mob-btn:hover { 
      color: #b29370 !important; 
   } 

   .qb-header-mobile svg { 
      width: 22px !important; 
      height: 22px !important; 
      min-width: 22px !important; 
      min-height: 22px !important; 
      display: block !important; 
      margin: auto !important; 
      box-sizing: border-box !important; 
      fill: none !important; 
      stroke: currentColor !important; 
      stroke-width: 2 !important; 
   } 
} 

/* ========================================================================= 
   7. MENÚ DESPLEGABLE MÓVIL (DESPLAZAMIENTO DE IZQUIERDA A DERECHA) 
   ========================================================================= */ 

.qb-mobile-menu-drawer { 
   position: fixed !important; 
   top: 0 !important; 
   left: 0 !important; 
   right: 0 !important; 
   width: 100vw !important; 
   max-width: 100% !important; 
   height: 100vh !important; 
   background-color: #ffffff !important; 
   z-index: 9999 !important; 
   display: flex !important; 
   flex-direction: column !important; 
   box-sizing: border-box !important; 
   box-shadow: none !important; 
   
   opacity: 0 !important; 
   visibility: hidden !important; 
   transform: translateX(-100%) !important; 
   transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; 
} 

.qb-mobile-menu-drawer.is-active { 
   opacity: 1 !important; 
   visibility: visible !important; 
   transform: translateX(0) !important; 
} 

.qb-drawer-header { 
   display: flex !important; 
   justify-content: space-between !important; 
   align-items: center !important; 
   padding: 20px 24px !important; 
   border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; 
   box-sizing: border-box !important; 
   width: 100% !important; 
} 

.qb-drawer-title { 
   font-size: 1rem !important; 
   font-weight: 700 !important; 
   letter-spacing: 1px !important; 
   text-transform: uppercase !important; 
   color: #000000 !important; 
} 

.qb-close-btn { 
   background: none !important; 
   border: none !important; 
   cursor: pointer !important; 
   padding: 0 !important; 
   display: flex !important; 
   align-items: center !important; 
   justify-content: center !important; 
   color: #000000 !important; 
   width: 32px !important; 
   height: 32px !important; 
} 

.qb-close-btn:hover { 
   color: #b29370 !important; 
} 

.qb-close-btn svg { 
   width: 24px !important; 
   height: 24px !important; 
   stroke: currentColor !important; 
   fill: none !important; 
   stroke-width: 2 !important; 
} 

.qb-drawer-content { 
   flex: 1 !important; 
   display: flex !important; 
   flex-direction: column !important; 
   justify-content: center !important; 
   align-items: center !important; 
   padding: 40px 24px !important; 
   box-sizing: border-box !important; 
   overflow-y: auto !important; 
   width: 100% !important; 
} 

.qb-mobile-nav-list { 
   list-style: none !important; 
   margin: 0 !important; 
   padding: 0 !important; 
   display: flex !important; 
   flex-direction: column !important; 
   align-items: center !important; 
   gap: 24px !important; 
   width: 100% !important; 
} 

.qb-mobile-nav-list a { 
   text-decoration: none !important; 
   font-size: 1.25rem !important; 
   font-weight: 700 !important; 
   letter-spacing: 1.5px !important; 
   text-transform: uppercase !important; 
   color: #000000 !important; 
   transition: color 0.2s ease !important; 
} 

.qb-mobile-nav-list a:hover { 
   color: #b29370 !important; 
}

/* ========================================================================= 
   8. AJUSTE DE VISIBILIDAD Y DISEÑO DEL BOTÓN DE CIERRE DEL MINI CARRITO (WC)
   ========================================================================= */

.wc-block-components-drawer__close.contained {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 10px !important;
    color: #000000 !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 999999 !important;
}

.wc-block-components-drawer__close.contained:hover {
    color: #b29370 !important;
}

.wc-block-components-drawer__close.contained::after {
    content: "×" !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

/* ========================================================================= 
   9. ADAPTACIÓN A MODO OSCURO (HEADER Y MÓVIL)
   ========================================================================= */

body.dark-mode #siteHeader.site-header-qb {
    color: #ffffff !important;
}

body.dark-mode .qb-center-nav a,
body.dark-mode .qb-logo-text,
body.dark-mode .qb-right-actions a,
body.dark-mode .qb-desk-btn {
    color: #ffffff !important;
}

body.dark-mode .qb-header-mobile .qb-mob-btn {
    color: #ffffff !important;
}

body.dark-mode .qb-header-mobile svg {
    stroke: #ffffff !important;
}

body.dark-mode .qb-mobile-center svg,
body.dark-mode .qb-left-nav svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

body.dark-mode .qb-mobile-center img.site-logo-img,
body.dark-mode .qb-left-nav img.site-logo-img {
    filter: brightness(0) invert(1) !important;
}

body.dark-mode .qb-mobile-menu-drawer {
    background-color: #121212 !important;
}

body.dark-mode .qb-drawer-title,
body.dark-mode .qb-close-btn,
body.dark-mode .qb-mobile-nav-list a {
    color: #ffffff !important;
}

body.dark-mode .qb-close-btn svg {
    stroke: #ffffff !important;
}