.navbar-wrapper {
    margin: 0 auto;             /* centra en pantalla */
    padding: 8px 32px;          /* según Figma        */
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
  }
  
  /* Mantiene el logo alineado verticalmente dentro de los 88 px */
  .navbar-brand img { height: 100px; }
  
  /* Gap de 16 px solo en navegadores que no soportan flex-gap */
  @supports not (gap: 1rem) {
    .navbar-nav .nav-item { margin: 0 8px; }
  }
  
  /* Mobile ≤ 991 px : ancho completo y sin bordes redondeados   */
  @media (max-width: 991.98px) {
    .navbar-wrapper {
      max-width: 100%;
      border-radius: 0;
      padding: 8px 16px;
    }
  }

  /* Extra mobile adjustments */
  @media (max-width: 768px) {
    .navbar-wrapper {
      padding: 6px 12px;
    }
    
    .navbar-brand img {
      height: 40px;
    }
  }

  /* User dropdown styles */
  .user-dropdown {
    position: relative;
    display: inline-block;
  }

  .user-icon {
    transition: color 0.3s ease;
    cursor: pointer;
  }

  .user-icon:hover {
    color: #F92E2E !important;
  }

  .user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .user-dropdown:hover .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-item-custom {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .dropdown-item-custom:hover {
    background-color: #f8f9fa;
    color: #F92E2E;
    text-decoration: none;
  }

  .dropdown-item-custom i {
    width: 16px;
    font-size: 0.85rem;
  }

     /* Arrow indicator */
   .user-dropdown-menu::before {
     content: '';
     position: absolute;
     top: -6px;
     right: 16px;
     width: 12px;
     height: 12px;
     background-color: white;
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-bottom: none;
     border-right: none;
     transform: rotate(45deg);
   }

   /* Cart styles */
   .cart-icon {
     transition: color 0.3s ease;
     cursor: pointer;
   }

   .cart-icon:hover {
     color: #F92E2E !important;
   }

   .cart-disabled {
     position: relative;
     display: inline-block;
   }

   .cart-icon-disabled {
     cursor: not-allowed;
     opacity: 0.6;
   }

   .cart-tooltip {
     position: absolute;
     top: 100%;
     right: 0;
     background-color: #333;
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 0.8rem;
     white-space: nowrap;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     margin-top: 8px;
   }

   .cart-disabled:hover .cart-tooltip {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }

   /* Arrow for cart tooltip */
   .cart-tooltip::before {
     content: '';
     position: absolute;
     top: -6px;
     right: 16px;
     width: 12px;
     height: 12px;
     background-color: #333;
     transform: rotate(45deg);
   }

   /* Search functionality styles */
   .search-container {
     position: relative;
     display: inline-block;
     margin: 0 8px;
   }

   .search-icon {
     transition: color 0.3s ease;
   }

   .search-icon:hover {
     color: #F92E2E !important;
   }

   .search-input-container {
     position: absolute;
     top: 100%;
     right: 0;
     background-color: white;
     padding: 12px;
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     border: 1px solid rgba(0, 0, 0, 0.08);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     margin-top: 8px;
     min-width: 300px;
   }

   .search-input-container.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }

   .search-input {
     border: 1px solid #ddd;
     border-radius: 6px;
     padding: 8px 12px;
     margin-bottom: 8px;
   }

   .search-btn {
     width: 100%;
     padding: 8px 16px;
     font-size: 0.9rem;
   }

   /* Arrow for search dropdown */
   .search-input-container::before {
     content: '';
     position: absolute;
     top: -6px;
     right: 16px;
     width: 12px;
     height: 12px;
     background-color: white;
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-bottom: none;
     border-right: none;
     transform: rotate(45deg);
   }