/* Estilos del header encapsulados para no afectar otros módulos */

/* Altura unificada de la barra y compensación para body */
#siteHeader { --topbar-h: 60px; min-height: var(--topbar-h) !important; }
#siteHeader .navbar { min-height: var(--topbar-h) !important; }
body.has-fixed-header { padding-top: var(--topbar-h); }

/* Header fijo con auto-ocultación */
#siteHeader.smart-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .2s ease;
  will-change: transform;
}
#siteHeader.smart-header.header-hidden { transform: translateY(-100%); }

/* Branding */
#siteHeader .navbar-brand .brand-logo{
  height:36px; max-height:36px; width:auto; display:inline-block; vertical-align:middle;
}
.brand-text{ font-size:2.2rem; }

/* Dropdown y caret dentro del header */
#siteHeader .navbar .nav-item.dropdown > a { position:relative; }
#siteHeader .navbar .nav-item.dropdown > a::after { display:none !important; }

/* Look & feel del dropdown del header */
#siteHeader .navbar .dropdown-menu { border-radius:0 0 .5rem .5rem; border-top:2px solid #e9ecef; }
#siteHeader .navbar .dropdown-item:hover,
#siteHeader .navbar .dropdown-item:focus {
  background: #f1f3f5; /* fondo claro */
  color: #6c757d !important; /* texto gris en hover */
}

/* Mostrar dropdown al hover en desktop solo para el header */
@media (min-width: 992px){
  #siteHeader .navbar .nav-item.dropdown:hover > .dropdown-menu { display:block; margin-top:0; }
}

/* Toggler limpio y centrado verticalmente en header */
#siteHeader .navbar-toggler{
  border:0 !important; outline:none !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--topbar-h); padding-top:20px; padding-bottom:0;
}
#siteHeader .navbar-toggler svg{ display:block; width:48px; height:48px; }
/* Estado inicial: ocultar buns hasta que JS los dibuje */
#theBurger .buns { stroke-dasharray: 999; stroke-dashoffset: 999; }
#theBurger .patty { opacity: 1; }
/* Grosor del trazo adaptado al tamaño del icono */
#theBurger #burger { stroke-width: 6; }
/* Asegurar estado inicial limpio: ocultar buns hasta que JS los dibuje */
#theBurger .buns { stroke-dasharray: 999; stroke-dashoffset: 999; }
#theBurger .patty { opacity: 1; }

/* Ajustes móviles: centrar brand en la franja superior */
@media (max-width: 767.98px){
  #siteHeader .navbar { position: relative; }
  #siteHeader .navbar .navbar-brand { position: absolute; left: 50%; top: calc(var(--topbar-h)/1.5); transform: translate(-50%, -50%); margin: 0 !important; z-index: 2; }
  #siteHeader .brand-text{ font-size:1.4rem !important; letter-spacing:1px; }
  #siteHeader .navbar-brand .brand-logo{ height:26px; max-height:26px; }
  /* Asegurar clics sobre toggler e iconos por encima del brand centrado */
  #siteHeader .navbar .navbar-toggler{ position: relative; z-index: 3; }
  #siteHeader .navbar .navbar-nav.d-flex.flex-row{ position: relative; z-index: 3; }
}

/* Separación lateral en menú móvil (navbar colapsada bajo lg) dentro del header */
@media (max-width: 991.98px){
  #siteHeader #navbarNav { padding-left: 12px; }
  #siteHeader #navbarNav .navbar-nav > .nav-item > .nav-link { padding-left: 8px; }
  #siteHeader #navbarNav .dropdown-menu .dropdown-item { padding-left: 16px; }
}

/* Home: header transparente en top, con textos/iconos blancos */
#siteHeader.home-transparent{ background:transparent !important; border:none !important; box-shadow:none !important; }
#siteHeader.home-transparent .navbar .nav-link{ color:#fff !important; }
#siteHeader.home-transparent .navbar .nav-link i{ color:#fff !important; }
#siteHeader.home-transparent .navbar-brand .brand-text{ color:#fff !important; }
#siteHeader.home-transparent #miniCartIcon{ color:#fff !important; }

/* Ajuste fino del badge del carrito para que no quede demasiado arriba */
#siteHeader #miniCartWrapper #miniCartToggle{ position: relative; }
#siteHeader #miniCartWrapper #cart-count{
  position: absolute; /* ya lo es, reforzamos */
  left: auto !important;
  right: -4px; /* ligeramente al exterior del borde derecho del icono/enlace */
  top: -5px;  /* ~5px por encima del icono */
  transform: none !important; /* neutralizar translate-middle */
}

/* Hover gris en los enlaces del navbar (tanto light como dark) */
#siteHeader .navbar .nav-link:hover,
#siteHeader .navbar .nav-link:focus {
  color: #6c757d !important; /* gris Bootstrap secondary */
}
#siteHeader .navbar .nav-link:hover i,
#siteHeader .navbar .nav-link:focus i {
  color: #6c757d !important;
}

/* Centrado vertical para iconos (carrito/usuario) en la barra derecha */
#siteHeader .navbar .navbar-nav.d-flex.flex-row > .nav-item > .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--topbar-h); padding-top:0; padding-bottom:0;
}
#siteHeader .navbar .navbar-nav.d-flex.flex-row{ height: var(--topbar-h); align-items:center; }
#siteHeader .navbar .navbar-nav.d-flex.flex-row > .nav-item > .nav-link i{ line-height:1; display:block; }

/* Alinear también la marca en desktop con la altura unificada */
#siteHeader .navbar .navbar-brand{ display:inline-flex; align-items:center; height: var(--topbar-h); }

/* Espacio de seguridad a la derecha para iconos en móviles/tablet (navbar colapsada) */
@media (max-width: 991.98px){
  /* Grupo de iconos (bolsa, usuario) pegado al borde derecho */
  #siteHeader .navbar .navbar-nav.d-flex.flex-row{ padding-right: 12px; padding-bottom: 0px;}
  /* Asegurar un poco más de área clickeable en el último icono */
  #siteHeader .navbar .navbar-nav.d-flex.flex-row .nav-item:last-child .nav-link{ padding-right: 6px; }
}

  /* --- Fix de capas del toggler --- */

  /* En móvil, asegurar que el toggler e iconos estén por encima del brand centrado */
  @media (max-width: 767.98px){
    #siteHeader .navbar .navbar-brand { z-index: 2; }
    #siteHeader .navbar .navbar-toggler { position: relative; z-index: 3; }
    #siteHeader .navbar .navbar-nav.d-flex.flex-row { position: relative; z-index: 3; }
  }

  /* Feedback sutil de interacción en el toggler */
  #siteHeader .navbar-toggler{ -webkit-tap-highlight-color: transparent; }
  #siteHeader .navbar-toggler:hover svg{ transform: scale(1.06); transition: transform .15s ease; }