/* ============================================
   MENÚ PREMIUM - ESTILOS UNIFICADOS
   Bootstrap 5 + Font Inter + Bootstrap Icons
   ============================================
   NOTA: Inter se carga vía <link> con preconnect
   en pf/menu_index.php (evita @import bloqueante).
   ============================================ */

/* Variables CSS */
:root {
  --menu-primary: #198754;
  --menu-primary-dark: #146c43;
  --menu-primary-light: #20c997;
  --menu-gradient: linear-gradient(135deg, rgba(13,92,54,0.92) 0%, rgba(25,135,84,0.92) 50%, rgba(32,201,151,0.92) 100%);
  --menu-bg-dark: #0d5c36;
  --menu-white: #ffffff;
  --menu-text: rgba(255,255,255,0.95);
  --menu-shadow: 0 4px 30px rgba(0,0,0,0.25);
  --menu-radius: 12px;
  --menu-radius-lg: 16px;
  --menu-radius-pill: 50px;
  --menu-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --menu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Altura real del menú fijo. js/menu-index-2026.js la sincroniza en
     runtime (carga, resize y apertura/cierre del buscador).
     Los valores iniciales son solo un fallback por si el JS no corre. */
  --menu-height: 64px;
}

@media (max-width: 991.98px) {
  :root { --menu-height: 118px; }
}

/* ============================================
   CONTENEDOR PRINCIPAL DEL MENÚ
   ============================================ */
.premium-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--menu-gradient) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: var(--menu-shadow) !important;
  border: none !important;
  font-family: var(--menu-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.premium-navbar .container {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 6px 15px !important;
}

/* Desktop (≥992px): layout, container, nav-link sizes */
@media (min-width: 992px) {
  .premium-navbar .container { max-width: 1160px !important; padding: 6px 15px !important; }
  .premium-navbar .navbar-collapse {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    align-items: center !important;
  }
  .premium-navbar .navbar-nav {
    flex-wrap: nowrap !important;
  }
  .premium-navbar .main-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    order: 0 !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .premium-navbar .main-nav .nav-item {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .premium-navbar .main-nav .nav-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 126px !important;
    font-size: 0.79rem !important;
    padding: 6px 8px !important;
  }
  .premium-navbar .navbar-nav.ms-auto {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    align-self: center !important;
    align-items: center !important;
    order: 1 !important;
  }
  .premium-navbar .navbar-nav.ms-auto .nav-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
  }
  .premium-navbar .nav-link.nav-cart-link {
    padding-right: 74px !important;
    padding-left: 8px !important;
  }
  .premium-navbar .nav-link.nav-cart-link .cart-text-label {
    display: none;
  }
  .premium-navbar .nav-link.nav-cart-link .badge {
    max-width: 62px;
    font-size: 0.62rem;
  }
}

/* Desktop compact (992-1199px): more compact layout */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Hide text for items marked hide-label-lg */
  .hide-label-lg {
    display: none !important;
  }
  /* Inicio: compact icon-only */
  .premium-navbar .main-nav .nav-link .bi-house {
    font-size: 1.2rem !important;
  }
  /* Category links: keep text but smaller */
  .premium-navbar .main-nav .nav-link {
    max-width: 85px !important;
    font-size: 0.72rem !important;
    padding: 6px 6px !important;
  }
  .premium-navbar .main-nav .nav-link i {
    font-size: 1.1rem !important;
  }
  .premium-navbar .navbar-nav.ms-auto .nav-link {
    padding: 6px 6px !important;
    font-size: 0.72rem !important;
  }
  .premium-navbar .nav-link.nav-cart-link {
    padding-right: 58px !important;
    padding-left: 6px !important;
  }
  .premium-navbar .nav-link.nav-cart-link .badge {
    max-width: 50px !important;
    font-size: 0.55rem !important;
  }
  /* Mi Panel: icon only */
  .premium-navbar .mi-panel-trigger .nav-label {
    display: none !important;
  }
  .premium-navbar .mi-panel-trigger {
    padding: 8px 8px !important;
    gap: 0 !important;
  }
  .premium-navbar .mi-panel-trigger i {
    font-size: 1.2rem !important;
  }
  .premium-navbar .mi-panel-trigger .bi-chevron-down {
    display: none !important;
  }
  /* Login/Register: keep text but compact */
  .premium-navbar .navbar-nav.ms-auto .nav-link.px-3 {
    padding: 8px 8px !important;
    font-size: 0.72rem !important;
  }
  /* Reduce ms-auto gap at compact */
  .premium-navbar .navbar-nav.ms-auto {
    gap: 2px !important;
  }
}

/* Desktop full (≥1200px): show all text labels */
@media (min-width: 1200px) {
  .premium-navbar .nav-link .nav-label {
    display: inline !important;
  }
  .premium-navbar .mi-panel-trigger .nav-label {
    display: inline !important;
  }
  .premium-navbar .mi-panel-trigger {
    padding: 8px 18px !important;
    gap: 8px !important;
  }
  .premium-navbar .mi-panel-trigger .bi-chevron-down {
    display: inline-block !important;
  }
  /* Las medidas de tipografía/padding de categorías y acciones se definen
     en el bloque base de desktop (≥992px) para que el menú encaje en una
     sola fila centrada. Aquí solo ajustamos alineación interna. */
  .premium-navbar .main-nav .nav-link {
    justify-content: flex-start !important;
  }
  .premium-navbar .main-nav .nav-link i {
    margin-right: 4px !important;
  }
}

/* ============================================
   TOGGLER (BOTÓN HAMBURGESA)
   ============================================ */
.premium-navbar .navbar-toggler {
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--menu-radius);
  background: rgba(255,255,255,0.1);
  transition: var(--menu-transition);
}

.premium-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
}

.premium-navbar .navbar-toggler:not(.collapsed) {
  background: rgba(255,255,255,0.2);
}

.premium-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================
   NAV LINKS (ENLACES PRINCIPALES)
   ============================================ */
.premium-navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.premium-navbar .navbar-nav.ms-auto {
  gap: 8px;
  flex-wrap: nowrap !important;
}

.premium-navbar .nav-link {
  color: var(--menu-text) !important;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: var(--menu-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  position: relative;
}

.premium-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.premium-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
}

.premium-navbar .nav-link:hover::after {
  width: 60%;
}

.premium-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.25);
  font-weight: 600;
}

.premium-navbar .nav-link.active::after {
  width: 70%;
}

/* Iconos en nav-link */
.premium-navbar .nav-link i {
  font-size: 1.1rem;
}

/* ============================================
   DROPDOWN MENU (MENÚ DESPLEGABLE)
   ============================================ */
.premium-navbar .dropdown-menu {
  background: var(--menu-white);
  border-radius: var(--menu-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border: none;
  padding: 10px;
  animation: dropdownFadeIn 0.2s ease;
  display: none !important;
}

.premium-navbar .dropdown-menu.show,
.premium-navbar .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.premium-navbar .dropdown-item {
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.premium-navbar .dropdown-item:hover {
  background: linear-gradient(135deg, var(--menu-primary), var(--menu-primary-light));
  color: #fff;
  transform: translateX(4px);
}

.premium-navbar .dropdown-item i {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  color: var(--menu-primary);
}

.premium-navbar .dropdown-item:hover i {
  color: #fff;
}

.premium-navbar .dropdown-divider {
  margin: 8px 0;
  border-color: #eee;
}

/* ============================================
   DROPDOWN DE CATEGORÍAS (ESTILO HORIZONTAL)
   ============================================ */
.category-dropdown {
  position: relative;
}

.category-dropdown > .nav-link:first-child::after {
  display: none;
}

.premium-navbar .category-dropdown:hover .dropdown-menu {
  display: block !important;
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

/* Abrir el desplegable también al hacer clic o al enfocar con el teclado
   (el botón "Más" recibe foco al pulsarlo, así el menú se abre con clic). */
.premium-navbar .category-dropdown:focus-within .dropdown-menu {
  display: block !important;
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Botón "Más": mismo aspecto que un enlace del menú */
.premium-navbar button.nav-link.mas-toggle {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
}

/* Ítems dentro de paneles blancos (ej. "Más"): texto legible sobre blanco.
   Sin esto heredaban el color blanco del .nav-link y quedaban invisibles
   sobre el fondo blanco del desplegable. */
.premium-navbar .navbar-nav .dropdown-menu .nav-link:not(.dropdown-toggle) {
  color: #333 !important;
  background: #f8f9fa !important;
  display: block !important;
  padding: 9px 12px !important;
  margin: 3px !important;
  max-width: none !important;
  font-size: 0.85rem !important;
  border-radius: 10px !important;
  transform: none !important;
  white-space: nowrap !important;
}
.premium-navbar .navbar-nav .dropdown-menu .nav-link:not(.dropdown-toggle)::after {
  display: none !important;
}
.premium-navbar .navbar-nav .dropdown-menu .nav-link:not(.dropdown-toggle):hover {
  background: var(--menu-primary) !important;
  color: #fff !important;
  transform: none !important;
}

/* Grid adjustments for subcategories inside category dropdown */
.dropdown-menu.centered-dropdown.category-dropdown-menu {
  width: min(90vw, 800px);
  max-width: 800px;
  min-width: 320px;
  overflow: visible;
  white-space: normal;
  padding: 12px;
}
.dropdown-menu.centered-dropdown.category-dropdown-menu { min-width: 320px; padding: 12px; overflow: visible; }
.dropdown-grid-subcats.grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; grid-auto-rows: auto; }
.dropdown-grid-subcats.grid-wrap a.dropdown-item { white-space: normal; height: auto; padding: 8px 12px; text-align: center; }
.dropdown-grid-subcats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  overflow: hidden;
  white-space: nowrap;
}
.dropdown-grid-subcats a.dropdown-item {
  display: inline-flex;
  flex: 1 1 0; /* share width among items to fit in single line */
  min-width: 90px;
  max-width: 200px;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Increase left padding to avoid clipping the start of subcategory names */
.dropdown-grid-subcats a.dropdown-item { padding-left: 20px; }

.category-dropdown .dropdown-menu li {
  display: block;
  white-space: nowrap;
}
/* Ensure every submenu list item is relatively positioned for proper anchoring */
.category-dropdown .dropdown-menu li { position: relative; }

.category-dropdown .dropdown-menu .dropdown-item {
  display: block;
  padding: 10px 12px;
  background: #f8f9fa;
  margin: 3px;
  border-radius: var(--menu-radius-pill);
  font-size: 0.85rem;
}

/* Force subcategory items inside horizontal grid to render inline horizontally */
.dropdown-menu.centered-dropdown.category-dropdown-menu .dropdown-grid-subcats a.dropdown-item {
  display: inline-flex !important;
  white-space: nowrap;
}

.category-dropdown .dropdown-menu .dropdown-item:hover {
  background: var(--menu-primary);
  color: #fff;
  transform: scale(1.02);
}

.category-dropdown .dropdown-menu .dropdown-item.fw-bold {
  font-weight: 600;
  color: var(--menu-primary);
  background: transparent;
}

.category-dropdown .dropdown-menu .dropdown-item.fw-bold:hover {
  background: var(--menu-primary);
  color: #fff;
}

/* Single-line horizontal distribution toggle for submenus (optional) */
.dropdown-grid-subcats.singleline { display: inline-flex; overflow: hidden; white-space: nowrap; }
.dropdown-grid-subcats.singleline a.dropdown-item { display: inline-flex; min-width: 120px; max-width: 180px; padding: 8px 12px; text-overflow: ellipsis; overflow: hidden; }

/* ============================================
   DROPDOWN "MI CUENTA" / USER MENU
   ============================================ */
.premium-navbar .nav-item.dropdown:not(.category-dropdown) {
  position: relative;
}

.premium-navbar .nav-item.dropdown:not(.category-dropdown) > a.nav-link {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--menu-radius-pill) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  transition: var(--menu-transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.premium-navbar .navbar-nav > li {
  position: relative;
}

/* Ensure contenedor padre for all submenus */
.navbar li { position: relative; }

.premium-navbar .navbar-nav > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #fff;
  min-width: 220px;
  z-index: 9999;
}

.premium-navbar .navbar-nav > li:hover > ul,
.premium-navbar .nav-item.dropdown:hover > .dropdown-menu {
  display: block !important;
}

.premium-navbar .nav-item.dropdown:not(.category-dropdown) > a.nav-link:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.02);
}

.premium-navbar .nav-item.dropdown:not(.category-dropdown) .dropdown-menu {
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  background: var(--menu-white);
  border-radius: var(--menu-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  padding: 12px;
  margin-top: 0 !important;
  min-width: 200px;
  display: none !important;
  z-index: 1000;
}

.premium-navbar .nav-item.dropdown:not(.category-dropdown):hover .dropdown-menu {
  display: block !important;
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Nueva visualización en grid para categorías con subcategorías */
.dropdown-menu.centered-dropdown.category-dropdown-menu {
  width: max-content;
  max-width: 520px;
  padding: 12px;
}
.dropdown-menu.centered-dropdown.category-dropdown-menu .dropdown-grid-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.dropdown-menu.centered-dropdown.category-dropdown-menu .dropdown-item {
  white-space: normal;
  padding: 6px 8px;
}

/* ============================================
   CARRITO EN EL MENÚ
   ============================================ */
/* El importe va EN LÍNEA (no posicionado en absoluto) para que nunca quede
   oculto detrás del buscador ni se recorte con puntos suspensivos cuando el
   carrito tiene muchos productos. Antes la píldora era "position:absolute;
   right:8px; max-width:95px" y, al crecer el importe, se desbordaba hacia la
   izquierda por debajo del botón "Buscar productos" y se truncaba.
   Estos selectores tienen especificidad suficiente para ganar a la utilidad
   .navbar-nav.ms-auto .nav-link { padding: 6px 8px !important } que anulaba
   el espacio reservado por el carrito. */
.premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  max-width: none !important;
  overflow: visible !important;
}
.premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link .cart-text-label {
  display: none !important;
}
.premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link .badge {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  background-color: #fff !important;
  color: #dc3545 !important;
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}
.premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link:hover .badge {
  transform: none !important;
}
/* Prevent vertical wrapping when logged in (wishlist, notif, Mi Panel) */
.premium-navbar .navbar-nav.ms-auto {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.premium-navbar .navbar-nav.ms-auto .nav-item {
  flex-shrink: 0 !important;
}
.cart-item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #dc3545;
  color: #fff;
  border-radius: 50px;
  line-height: 1;
}
.cart-nav-item {
  display: flex;
  align-items: center;
}
.cart-nav-item .cart-item-count {
  position: static;
  margin-left: 2px;
  min-width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px #fff;
}
/* Notification bell */
.notif-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  font-size: 0.6rem;
  border: 2px solid #fff;
}
.notif-dropdown .notif-item {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.notif-dropdown .notif-item:hover {
  background: #f5f5f5;
}

.premium-navbar .nav-link[href*="carrito"] .cart-total-label {
  font-size: 0.7rem;
  opacity: 0.9;
  margin: 0 4px;
}

/* ============================================
   RESPONSIVE: MENÚ MÓVIL
   ============================================ */
@media (max-width: 991px) {
  .premium-navbar .navbar {
    padding: 10px 0;
  }

  .premium-navbar .navbar-nav .nav-link {
    width: auto;
  }

  /* Botones acceder/registrarse móvil (legacy) */
  .premium-navbar .cl-bot-inicse {
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)) !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    color: #fff !important;
    border-radius: var(--menu-radius-pill) !important;
    padding: 12px 24px !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: var(--menu-transition);
    margin: 5px 10px;
    display: inline-block;
  }

  .premium-navbar .cl-bot-inicse i {
    color: #fff !important;
  }

  .premium-navbar .cl-bot-inicse:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2)) !important;
    transform: scale(1.02);
  }
}

/* Subcategory product grid on staging/pages (override for subcategory pages) */
.subcat-page #idlosproCuerpo .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.subcat-page #idlosproCuerpo .row > .col {
  padding: 0;
}
@media (max-width: 1199px) {
  .subcat-page #idlosproCuerpo .row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 992px) {
  .subcat-page #idlosproCuerpo .row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
    .premium-navbar .navbar-brand {
        font-size: 1rem;
    }
    .premium-navbar .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .dropdown-grid-subcats {
        flex-wrap: wrap !important;
    }
    .dropdown-grid-subcats a.dropdown-item {
        min-width: 80px;
        font-size: 0.8rem;
    }
}

@media (min-width: 992px) {
  .premium-navbar .mobile-menu {
    display: none !important;
  }
  
  .premium-navbar .d-flex.d-lg-none {
    display: none !important;
  }
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */
.navbar-nav.ms-auto {
  margin-left: auto !important;
}

/* Scrollbar personalizado menú móvil */
.premium-navbar .navbar-collapse::-webkit-scrollbar {
  width: 6px;
}

.premium-navbar .navbar-collapse::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}

.premium-navbar .navbar-collapse::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.premium-navbar .navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* Estilos para usuario logueado - desktop */
.premium-navbar .user-menu-desktop .nav-link {
  padding: 8px 16px;
  border-radius: var(--menu-radius-pill);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
}

.premium-navbar .user-menu-desktop .nav-link:hover {
  background: rgba(255,255,255,0.25);
}

/* Danger text */
.premium-navbar .dropdown-item.text-danger {
  color: #dc3545;
}

.premium-navbar .dropdown-item.text-danger i {
  color: #dc3545;
}

/* ============================================
   HAMBURGER ANIMATION
   ============================================ */
.hamburger-lines {
  width: 26px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.hamburger-lines .line {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 3px;
  background: rgba(255,255,255,0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.navbar-toggler[aria-expanded="true"] .hamburger-lines,
.hamburger-lines.active {
  transform: rotate(180deg);
}
.navbar-toggler[aria-expanded="true"] .line1,
.hamburger-lines.active .line1 {
  transform: translateY(8.75px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .line2,
.hamburger-lines.active .line2 {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggler[aria-expanded="true"] .line3,
.hamburger-lines.active .line3 {
  transform: translateY(-8.75px) rotate(-45deg);
}

/* ============================================
   MOBILE NAV LAYOUT
   ============================================ */
.mobile-nav-row { gap: 0 !important; }
.mobile-nav-row .flex-fill.text-start,
.mobile-nav-row .flex-fill.text-end {
  flex: 1 1 0 !important;
  min-width: 0;
}
.mobile-nav-row .flex-fill.text-start {
  display: flex;
  align-items: center;
}
/* Carrito móvil — Definición autoritativa (icono + importe en fila).
   Las reglas Historicales duplicadas más abajo se eliminaron; esta es
   la única fuente de verdad para .mobile-cart-* */
.mobile-cart-link {
  color: #fff !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  overflow: visible !important;
  width: auto;
  min-width: 132px;
  max-width: 44vw;
  position: relative;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.mobile-cart-link:active {
  background: rgba(255,255,255,0.16);
  transform: scale(0.95);
}
.mobile-cart-link:hover {
  background: rgba(255,255,255,0.14);
}
.mobile-cart-icon {
  font-size: 1.45rem !important;
  line-height: 1;
  flex: 0 0 auto;
}
.mobile-cart-badge {
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 9px !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  background: rgba(255,255,255,0.92) !important;
  color: #212529 !important;
  border-radius: 8px;
  letter-spacing: -0.2px;
}
.premium-navbar .mobile-hamburger-btn {
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
}
.premium-navbar .mobile-hamburger-btn .hamburger-lines { width: 28px !important; height: 22px !important; }
.premium-navbar .mobile-hamburger-btn .hamburger-lines .line { height: 3px !important; background: #fff !important; border-radius: 4px !important; }

/* Offcanvas shadow & polish */
.offcanvas-cat {
  box-shadow: 4px 0 30px rgba(0,0,0,0.3) !important;
  border-right: none !important;
  top: 0 !important;
}
.offcanvas-cat .offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.offcanvas-cat .offcanvas-body::-webkit-scrollbar { width: 4px; }
.offcanvas-cat .offcanvas-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Smooth dropdown divider with gradient */
.premium-navbar .dropdown-divider {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent) !important;
  height: 1px !important;
  border: none !important;
  margin: 8px 0 !important;
}

/* Category dropdown: subtle hover scale on subcat items */
.dropdown-grid-subcats a.dropdown-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dropdown-grid-subcats a.dropdown-item:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

/* Desktop: link gap refinement */
@media (min-width: 992px) {
  .premium-navbar .navbar-nav.ms-auto { gap: 6px; }
}

/* Small mobile: tighter spacing */
@media (max-width: 380px) {
  .mobile-nav-row .navbar-brand span {
    max-width: 80px !important;
  }
  .mobile-cart-link {
    min-width: 112px;
    max-width: 42vw;
    padding: 4px 10px !important;
    border-radius: 18px;
    gap: 6px;
  }
  .mobile-cart-icon { font-size: 1.3rem !important; }
  .mobile-cart-badge {
    font-size: 0.85rem !important;
    padding: 2px 7px !important;
  }
  .premium-navbar .mobile-hamburger-btn { padding: 6px 8px !important; }
}

/* ============================================
   INLINE STYLES MIGRATED FROM pf/menu_index.php
   ============================================ */

/* ── Dropdown positioning overrides ── */
.mi-panel-dropdown,
.category-dropdown {
  position: relative !important;
}

.mi-panel-dropdown .dropdown-menu,
.category-dropdown .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
}

.premium-navbar .dropdown-menu {
  pointer-events: auto !important;
}

.navbar-toggler {
  padding: 10px 12px !important;
  border: none !important;
}
.navbar-toggler:focus { box-shadow: none !important; }



/* Mi Panel button - desktop logged in */
.mi-panel-trigger {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}
.mi-panel-trigger:hover {
  background: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.5) !important;
  transform: scale(1.02);
}
.mi-panel-dropdown .dropdown-menu {
  min-width: 220px !important;
  margin-top: 8px !important;
  right: 0 !important;
  left: auto !important;
}

/* Offcanvas mobile menu */
.offcanvas-header-custom {
  background: var(--menu-gradient);
  padding: 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}
.offcanvas-header-custom .btn-close { filter: brightness(0) invert(1); }
.offcanvas-cat .accordion-button {
  background: transparent !important;
  color: #333 !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 20px;
  box-shadow: none !important;
  border-bottom: 1px solid #f0f0f0;
}
.offcanvas-cat .accordion-button::after {
  background-size: 16px;
  transition: transform 0.3s ease;
}
.offcanvas-cat .accordion-button:not(.collapsed)::after {
  transform: rotate(90deg);
}
.offcanvas-cat .accordion-body { padding: 0; }
.offcanvas-cat .accordion-body a {
  display: block;
  padding: 12px 20px 12px 36px;
  color: #555;
  font-size: 0.9rem;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
  transition: all 0.2s ease;
}
.offcanvas-cat .accordion-body a:hover {
  background: #e8f5e9;
  color: #198754;
  padding-left: 44px;
}
.offcanvas-cat .accordion-body .cat-all-link {
  font-weight: 600;
  color: #198754;
  background: #f0fdf4;
  padding-left: 36px;
}
.offcanvas-useractions a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}
.offcanvas-useractions a:hover {
  background: #e8f5e9;
  color: #198754;
  padding-left: 28px;
}
.offcanvas-useractions a i { font-size: 1.2rem; width: 24px; text-align: center; }
.offcanvas-cat .simple-cat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}
.offcanvas-cat .simple-cat-link:hover {
  background: #e8f5e9;
  color: #198754;
  padding-left: 28px;
}
.offcanvas-cat .simple-cat-link i { font-size: 1.2rem; width: 24px; text-align: center; }

/* Mobile nav row — el carrito se define arriba (definición autoritativa) */
.mobile-nav-row { gap: 0 !important; }
.premium-navbar .mobile-hamburger-btn {
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
}
.premium-navbar .mobile-hamburger-btn .hamburger-lines { width: 28px !important; height: 22px !important; }
.premium-navbar .mobile-hamburger-btn .hamburger-lines .line { height: 3px !important; background: #fff !important; border-radius: 4px !important; }

/* Mobile nav: prevent cart price overflow */
@media (max-width: 991.98px) {
  .mobile-nav-row {
    overflow: hidden;
    display: flex !important;
    align-items: center;
    width: 100%;
  }
  .mobile-nav-row .flex-fill.text-start,
  .mobile-nav-row .text-end {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .mobile-nav-row .text-center {
    /* Sin tope de 50%: el carrito define su ancho con min/max propios. */
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}

/* ── Header inline search ── */
/* Oculto por defecto: se despliega al pulsar el ícono de búsqueda del menú. */
.header-search-row {
  display: none;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}
.header-search-row.search-row-abierto {
  display: block;
  animation: searchRowIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes searchRowIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.header-search-row .header-search {
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .header-search-row { padding: 8px 0; }
}

/* ── Botón / ícono de búsqueda en el menú ── */
.search-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--menu-text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.search-toggle-btn:hover,
.search-toggle-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  outline: none;
}
.search-toggle-btn:active { transform: scale(0.92); }
.search-toggle-btn.search-toggle-active {
  background: #fff;
  color: var(--menu-primary);
}
.premium-navbar .nav-link .search-toggle-btn {
  width: auto;
  height: auto;
  font-size: 1.1rem;
  color: inherit;
}
.search-toggle-btn .search-kbd-hint {
  display: none;
}
@media (min-width: 992px) {
  .search-toggle-btn .search-kbd-hint {
    display: inline;
    margin-left: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0.65;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1.3;
  }
}
.mobile-nav-row .search-toggle-btn {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  transition: all 0.25s ease;
  width: 100%;
}
.header-search:focus-within {
  background: #fff;
  border-color: #198754;
  box-shadow: 0 0 0 3px rgba(25,135,84,0.12);
}
.header-search-icon {
  width: 16px;
  height: 16px;
  color: #999;
  flex-shrink: 0;
  margin-left: 14px;
  transition: color 0.2s ease;
  pointer-events: none;
}
.header-search:focus-within .header-search-icon { color: #198754; }
.header-search-input {
  background: transparent !important;
  border: none !important;
  color: #333 !important;
  padding: 8px 10px;
  font-size: 0.85rem;
  outline: none !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  width: 100%;
}
.header-search-input::placeholder { color: #aaa; }
.header-search-clear {
  background: transparent !important;
  border: none !important;
  color: #bbb !important;
  padding: 4px 10px;
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  border-radius: 50%;
  transition: all 0.15s ease;
}
.header-search-clear.show { display: flex; align-items: center; justify-content: center; }
.header-search-clear:hover { color: #666 !important; background: rgba(0,0,0,0.05) !important; }

/* ── Dropdown ── */
.header-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  z-index: 10000;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.header-search-dropdown.open { display: block; }
.header-search-dropdown::-webkit-scrollbar { width: 4px; }
.header-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.header-search-dropdown::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* ── Hints ── */
.header-search-hints {
  padding: 14px 16px 6px;
}
.header-search-hints:empty { display: none; }
.header-search-hints-title {
  color: #999;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 600;
}
.header-search-hints-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.header-search-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 50px;
  color: #555;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.header-search-hint-chip:hover {
  background: #e8f5e9;
  border-color: #198754;
  color: #198754;
}
.header-search-hint-chip svg { width: 12px; height: 12px; opacity: 0.4; }

/* ── Results list ── */
.header-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-search-results .resultado-item {
  list-style: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.12s ease;
}
.header-search-results .resultado-item:last-child { border-bottom: none; }
.header-search-results .resultado-item:hover,
.header-search-results .resultado-item.keyboard-hover { background: #f8fbf9; }
.header-search-results .resultado-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.header-search-results .resultado-img-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search-results .resultado-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-search-results .resultado-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.header-search-results .resultado-nombre {
  font-weight: 500;
  color: #222;
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-search-results .resultado-nombre mark {
  background: #d4edda;
  color: #155724;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.header-search-results .resultado-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
}
.header-search-results .resultado-categoria {
  color: #888;
  background: #f5f5f5;
  padding: 1px 8px;
  border-radius: 20px;
}
.header-search-results .resultado-stock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 400;
  font-size: 0.65rem;
}
.header-search-results .resultado-stock::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.header-search-results .resultado-stock.stock-alta { color: #1cc88a; }
.header-search-results .resultado-stock.stock-alta::before { background: #1cc88a; }
.header-search-results .resultado-stock.stock-media { color: #f6c23e; }
.header-search-results .resultado-stock.stock-media::before { background: #f6c23e; }
.header-search-results .resultado-stock.stock-baja { color: #e74c3c; }
.header-search-results .resultado-stock.stock-baja::before { background: #e74c3c; }
.header-search-results .resultado-precio {
  flex-shrink: 0;
  color: #198754;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 8px;
}

/* ── Empty / loading / footer ── */
.header-search-results .sin-resultados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  text-align: center;
  color: #999;
  font-size: 0.8rem;
}
.header-search-results .sin-resultados svg { width: 28px; height: 28px; opacity: 0.2; }
.header-search-results .buscando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  color: #888;
  font-size: 0.78rem;
}
.header-search-results .spinner-border {
  width: 1rem; height: 1rem;
  color: #ccc;
  border-width: 2px;
}
.header-search-footer {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid #f0f0f0;
}
.header-search-footer.show { display: flex; }
.header-search-count { color: #999; font-size: 0.72rem; }
.header-search-nav-hint { color: #bbb; font-size: 0.68rem; }
@media (max-width: 767.98px) {
  .header-search-nav-hint { display: none; }
}

/* ============================================================
   FIX (2026-10): desborde horizontal del menú superior en PC
   ------------------------------------------------------------
   El contenedor del menú tiene ancho fijo (1160px). Al iniciar
   sesión se suman Favoritos + Notificaciones + "Mi Panel" y el
   carrito muestra su importe; con productos ese importe crece y
   el bloque (categorías + acciones) terminaba saliéndose por la
   derecha de la pantalla ("Mi Panel" fuera del viewport).

   Este bloque (ubicado al final del archivo, por lo que gana en
   el orden de cascada) aplica:
     1) min-width:0 en el collapse  -> red de seguridad: el bloque
        NUNCA puede exceder el contenedor.
     2) Compactado del menú en pantallas anchas (>=1200px) y tope
        del importe del carrito (con "…" si es enorme) para que
        todo entre con aire, incluso con productos en el carrito.
     3) Contadores de Favoritos/Notificaciones como burbuja
        absoluta: no suman ancho y no se recortan.
   El importe completo del carrito se expone en el atributo
   title="..." del badge (ver pf/menu_index.php).
   ============================================================ */

/* --- Red de seguridad + límites del carrito (todo desktop) --- */
@media (min-width: 992px) {
  /* El bloque de navegación no puede empujar el menú fuera de pantalla. */
  .premium-navbar .navbar-collapse { min-width: 0 !important; }

  /* El importe del carrito ya no crece sin límite (anula el
     "max-width:none / overflow:visible" del bloque base). Valor
     equivalente al del diseño compacto 992-1199px. */
  .premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link .badge {
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Burbujas de contador (posición absoluta): que no se recorten. */
  .premium-navbar .navbar-nav.ms-auto .nav-link#notifBellLinkDesk,
  .premium-navbar .navbar-nav.ms-auto a.nav-link[href*="wishlist"] { overflow: visible !important; }
  .premium-navbar #wishlist-count-desk {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    margin: 0 !important;
  }
}

/* --- Compactado del menú en pantallas anchas (>=1200px) --- */
@media (min-width: 1200px) {
  /* Categorías: un poco más angostas para dejar lugar a las acciones. */
  .premium-navbar .main-nav .nav-link {
    max-width: 104px !important;
    font-size: 0.73rem !important;
    padding: 6px 6px !important;
  }
  .premium-navbar .main-nav .nav-link .nav-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .premium-navbar .main-nav .nav-link i { margin-right: 2px !important; }

  /* Acciones (buscador, favoritos, notificaciones, carrito, panel). */
  .premium-navbar .navbar-nav.ms-auto { gap: 2px !important; }
  .premium-navbar .navbar-nav.ms-auto .nav-link {
    padding: 6px 5px !important;
    font-size: 0.73rem !important;
  }

  /* "Mi Panel": sólo ícono (su texto era lo que terminaba fuera de
     pantalla). Se conserva la flecha de desplegable; el nombre se
     mantiene en el title="Mi Panel". */
  .premium-navbar .mi-panel-trigger { padding: 8px 10px !important; gap: 6px !important; }
  .premium-navbar .mi-panel-trigger .nav-label { display: none !important; }

  /* Importe del carrito: tope algo mayor en pantallas anchas. */
  .premium-navbar .navbar-nav.ms-auto .nav-link.nav-cart-link .badge {
    max-width: 88px !important;
    padding: 3px 7px !important;
    font-size: 0.62rem !important;
  }
  /* Contador de ítems del carrito: acotado (con "…" sólo si es enorme). */
  .premium-navbar .cart-nav-item .cart-item-count {
    max-width: 34px !important;
    overflow: hidden !important;
    padding: 0 5px !important;
    font-size: 0.66rem !important;
  }
}