/* =======================
    HEADER GASEx - ESTILOS
   ======================= */

.site-header { background: #ffffff; }

/* Cabecera Sección Superior */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem 1rem; /* + top para mejor sticky */
  flex-wrap: wrap;
}

/* Logotipo */
.header-logo img { max-height: 53px; }

/* Imagen a pantalla completa */
.full-width-image { width: 100%; max-width: 100vw; box-sizing: border-box; }

/* ================================
   BUSCADOR
================================== */
.header-search input { padding: 8px; border-radius: 4px; border: none; width: 200px; }

.search-box {
  display: flex; align-items: center; background: white; border-radius: 999px;
  border: 1px solid #e0e0e0; width: 100%; min-width: 700px; height: 42px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); position: relative;
}

/* AUTOCOMPLETADO */
.autocomplete-results {
  position: absolute; top: 110%; left: 0; width: 500px; max-width: 90vw; background: #fff;
  border: 1px solid #e0e0e0; box-shadow: 0 12px 24px rgba(0,0,0,0.13); z-index: 9999;
  max-height: 350px; overflow-y: auto; border-radius: 12px; padding: 1rem; display: none; transition: all .15s;
}
.autocomplete-results.show { display: block; }
.autocomplete-inner { display: flex; flex-direction: column; gap: 1rem; }
.autocomplete-item { display: flex; gap: 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #eee; cursor: pointer; transition: background .15s; }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-thumb, .autocomplete-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 7px; background: #f7f7f7; flex-shrink: 0; }
.autocomplete-info { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.autocomplete-title { font-size: 1rem; font-weight: 700; color: #003966; margin-bottom: .1rem; text-decoration: none; }
.autocomplete-excerpt { font-size: .97rem; color: #555; margin-top: .1rem; }
.ver-todos { color: #046BD2; font-weight: bold; text-decoration: underline; display: block; margin-top: .8rem; text-align: right; }
.autocomplete-item:hover { background: #f0f4ff; }

.search-box input { flex: 1; border: none; padding: 10px 15px; outline: none; font-size: 14px; }
.search-box select { border: none; border-left: 1px solid #eee; padding: 10px; font-size: 14px; color: #444; background: #fff; cursor: pointer; outline: none; }
.search-box button { background: none; border: none; padding: 0 15px; cursor: pointer; display: flex; align-items: center; }

/* ================================
   CARRITO
================================== */
.header-cart img { height: 24px; }
.cart-container { display: flex; align-items: center; gap: 8px; position: relative; }
.mini-cart-dropdown { display: none; position: absolute; right: 0; top: 100%; width: 300px; background: #fff; border: 1px solid #ccc; box-shadow: 0 10px 20px rgba(0,0,0,0.15); padding: 1rem; z-index: 1000; }
.cart-container:hover .mini-cart-dropdown { display: block; }
.mini-cart-dropdown ul { list-style: none; margin: 0; padding: 0; }
.mini-cart-dropdown li { margin-bottom: .5rem; font-size: .875rem; border-bottom: 1px solid #eee; padding-bottom: .5rem; }
.mini-cart-dropdown .woocommerce-mini-cart__total { margin-top: .5rem; font-weight: bold; }
.mini-cart-dropdown .woocommerce-mini-cart__buttons { display: flex; justify-content: space-between; margin-top: .5rem; }
.mini-cart-dropdown .button { padding: .4rem .8rem; font-size: .8rem; background-color: #046BD2; color: #fff; text-decoration: none; border-radius: 4px; }
.cart-icon i, .cart-icon-mobile i { position: relative; width: 24px; height: 24px; color: #000; }
.cart-count { position: absolute; top: -10px; right: 77px; background: #ff4d4f; color: #fff; font-size: 12px; font-weight: bold; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 14px; line-height: 1.1; }
.cart-label { font-weight: 600; }
.cart-total { font-weight: bold; }

/* ================================
   MENÚ PRINCIPAL Y BOTONES
================================== */

.header-bottom { 
  display: flex; 
  /* justify-content: space-between;  */
  padding: .75rem 2rem; 
  background: #ffffff; 
}

/* Contenedor del menú */
.menu-container {
  width: 250px; 
  min-width: 225px; 
  background-color: #1a1a1a; 
  color: #fff;
  position: relative; 
  overflow: visible; 
  z-index: 999; 
  margin-right: 10px;
}

/* Botón activar menú */
.menu-toggle { 
  background-color: #1a1a1a; 
  color: #fff; 
  width: 100%; 
  padding: 10px 15px;
  border: none; 
  font-size: 0.8571em;
  text-align: left; 
  font-weight: 700; 
  cursor: pointer; 
}

/* Menús base */
.main-menu, .submenu, .sub-submenu {
  list-style: none; margin: 0; padding: 0; display: none; background-color: #fff; color: #000;
  border-left: 3px solid #ddd; position: absolute; top: 0; white-space: nowrap; z-index: 999;
}

/* columna fija por menú */
.menu-container .main-menu,
.menu-container .submenu { width: 250px; }

.main-menu {
  position: absolute; top: 100%; left: 0; width: 100%; background: #fff;
  z-index: 9999; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.main-menu.show { display: block; }

.main-menu li a,
.menu-container .submenu li > a { display: block; padding: 12px; text-decoration: none; color: #0088cc; }
.menu-container .submenu li > a:hover,
.main-menu li a:hover { background-color: #f0f0f0; }

/* Cada ítem contiene su posicionamiento */
.menu-container .main-menu > li,
.menu-container .submenu > li { position: relative; }

/* Subniveles abren a la derecha (anclados al LI) */
.menu-container .main-menu > li > .submenu,
.menu-container .submenu > li > .submenu {
  position: absolute; top: 0; left: 100%; display: none;
  background: #fff; border-left: 3px solid #ddd; z-index: 999;
}
.menu-container .main-menu > li:hover > .submenu,
.menu-container .submenu   > li:hover > .submenu { display: block; }

/* Flecha fija para items con hijos */
.menu-container li.has-submenu > a { position: relative; padding-right: 28px; }
.menu-container li.has-submenu > a::after {
  content: "\203A"; /* › */ position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-weight: 600; opacity: .6; pointer-events: none;
}

/* === Panel de imagen (OPCIÓN A: fuera del UL) === */
.menu-container .submenu.has-image { position: relative; --submenu-img-w: 190px; }
.menu-container .submenu.has-image::after {
  content: "";
  position: absolute;
  left: 100%;               /* fuera del UL, pegado a su borde derecho */
  top: 0; bottom: 0;
  width: var(--submenu-img-w);
  background-image: var(--submenu-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* llena y recorta sin deformar */
  pointer-events: none;
}

/* Al entrar a un hijo: ocultar imagen del padre */
.menu-container ul.submenu.has-image.child-open::after { display: none !important; }
/* (si el navegador soporta :has) */
.menu-container ul.submenu.has-image:has(> li.has-submenu:hover)::after { display: none; }

/* -------------------------------------------------
   BOTONES DE NAVEGACIÓN SECUNDARIOS (.header-buttons)
   Efecto morph: pill → esquinas casi cuadradas
-------------------------------------------------- */
.header-buttons { 
  display: flex; 
  gap: 10px; 
  align-items: center; 
  height: 100%; 
  flex-shrink: 0; 
  margin-top: 10px; 
  /* width: 100%;  */
  justify-content: flex-start; 
}

/* contenedores de lista */
.header-buttons > ul,
.header-buttons > div > ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header-buttons > ul > li,
.header-buttons > div > ul > li { list-style: none !important; }

/* limitar a 6 items visibles */
.header-buttons > ul > li:nth-child(n+7),
.header-buttons > div > ul > li:nth-child(n+7) { display: none !important; }

/* ===== Enlaces con animación de radio ===== */
.header-buttons > ul > li > a,
.header-buttons > div > ul > li > a {
  /* Variables faciles de ajustar */
  --hb-bg: #ffffff;
  --hb-color: #0088cc;
  --hb-border: #0088cc;

  --hb-bg-hover: #0088cc;
  --hb-color-hover: #ffffff;

  --hb-radius: 999px;      /* pastilla */
  --hb-radius-hover: 0px;  /* cuadrado */

  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;

  color: var(--hb-color);
  background-color: var(--hb-bg);
  /* border: 1.5px solid var(--hb-border); */
  border-radius: var(--hb-radius);

  transition:
    border-radius .25s ease,
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
  will-change: border-radius, background-color, color, box-shadow, transform;
}

/* Hover / focus: morph + inversión de colores */
.header-buttons > ul > li > a:hover,
.header-buttons > div > ul > li > a:hover,
.header-buttons > ul > li > a:focus-visible,
.header-buttons > div > ul > li > a:focus-visible {
  background-color: var(--hb-bg-hover);
  color: var(--hb-color-hover);
  border-radius: var(--hb-radius-hover);
  box-shadow: 0 6px 16px rgba(0,136,204,0.18);
  outline: none;
}

/* Active: pequeña compresión para feedback */
.header-buttons > ul > li > a:active,
.header-buttons > div > ul > li > a:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 10px rgba(0,136,204,0.18);
}

/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .header-buttons > ul > li > a,
  .header-buttons > div > ul > li > a {
    transition: none;
  }
}

/* ===========================
   HEADER MOBILE
=========================== */
.header-mobile { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 999; display: flex; justify-content: center; align-items: center; padding: 0 1rem; }
.header-mobile, .mobile-icons { display: flex; }
.mobile-logo img { height: 35px; }
.mobile-menu-toggle, .mobile-user { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; background: none; border: none; color: #000; cursor: pointer; }
.mobile-menu-toggle { left: 1rem; } .mobile-user { right: 3rem; }

/* ===========================
   CARRITO MOBILE
=========================== */
.cart-icon-mobile { position: relative; margin-left: 1rem; font-size: 1.2rem; }
.cart-icon-mobile .cart-count { position: absolute; top: -10px; right: -20px; background: #ff4d4f; color: #fff; border-radius: 50%; font-size: .7rem; padding: .2rem .2rem; font-weight: bold; }

/* ===========================
   MENÚ LATERAL MOBILE
=========================== */
.menu-lateral { display: none; flex-direction: column; position: fixed; top: 0; left: 0; height: 90vh; width: 80%; max-width: 300px; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.2); padding: 1rem; z-index: 1000; overflow-y: auto; }
.menu-lateral.visible { display: flex; }
.menu-lateral input.menu-search-mobile { padding: 8px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 4px; }
.menu-lateral ul { list-style: none; padding: 0; margin: 0; }
.menu-lateral li { margin-bottom: 10px; }
.menu-lateral a { text-decoration: none; color: #333; font-weight: 600; }
.menu-social { margin-top: auto; display: flex; gap: 10px; justify-content: center; }
.menu-social a { font-size: 30px; color: #333; }
.menu-close { align-self: flex-end; background: none; border: none; font-size: 24px; cursor: pointer; color: #333; margin-bottom: 10px; }

/* ===========================
   MEDIA QUERIES
=========================== */
@media (max-width: 768px) {
  .header-mobile { display: flex; }
  .site-header .header-top, .site-header .header-bottom, .header-buttons, .header-search, .cart-container { display: none !important; }
  .site-header { margin-top: 60px; }
  .site-header.sticky .cart-container { display: none !important; }
}
@media (min-width: 769px) {
  .header-mobile, .menu-lateral { display: none !important; }
}

/* ===== Sticky: solo borde inferior, sin sombras laterales ===== */
.site-header { position: sticky; top: 0; z-index: 1000; background:#fff; }
.site-header.is-scrolled { box-shadow: none !important; border-bottom: 1px solid rgba(0,0,0,.12); padding-top: 6px; }
body.admin-bar .site-header { top: -65px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) { .site-header, .main-menu, .submenu { transition: none !important; } }

@media (min-width: 769px) {
  body.has-fixed-header .site-header { position: fixed; left: 0; right: 0; top: 0; }
  body.has-fixed-header { padding-top: var(--gx-header-h, 120px); }
}

/* 1) Variable con el alto del admin bar */
:root { --adminbar: 0px; }
body.admin-bar { --adminbar: 32px; }           /* desktop WP admin bar */
@media (max-width: 782px) {
  body.admin-bar { --adminbar: 46px; }         /* móvil WP admin bar */
}

/* 2) Header (sticky por defecto) */
.site-header{
  position: sticky;
  /* Si quieres que se “oculte” 65px: adminbar - 65px  */
  top: calc(var(--adminbar) - 90px);
  z-index: 1000;
  background:#fff;
}
.site-header.is-scrolled{
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding-top: 6px;
}

/* 3) Cuando pasas a fixed en desktop, conserva el mismo offset */
@media (min-width: 769px){
  body.has-fixed-header .site-header{
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--adminbar) - 65px);
  }
  body.has-fixed-header{
    /* empuja el body para que no tape contenido */
    padding-top: var(--gx-header-h, 120px);
  }
}

/* 4) Si quieres quitar transiciones cuando el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .site-header, .main-menu, .submenu { transition: none !important; }
}