/* ============================================================
   RESPONSIVE UNIFICADO — Opción C (UX Premium Minimalista)
   Compatible 100% con tu HTML y JS actuales
   Sin conflictos de estilos previos
   ============================================================ */

/* ===========================
   MOBILE FIRST (≤768px)
   =========================== */
@media (max-width: 768px) {

  /* ==== NAVBAR minimalista ==== */
  .navbar {
    height: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .navbar-content {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Logo */
  .logo img {
    height: 42px;
  }

  /* Ocultar categorías del dropdown original */
  .left-nav .custom-select {
    display: none !important;
  }

  /* Ocultar barra de búsqueda original */
  .nav-center {
    display: none !important;
  }

  /* Botón Contáctanos movido abajo del navbar */
  .nav-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nav-button {
    width: 100%;
    padding: 10px 0 !important;
    font-size: 15px !important;
  }

  /* ===========================
     BOTÓN DE BÚSQUEDA (FAB)
     =========================== */
  .search-fab {
    position: fixed;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #00050F;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
  }

  .search-fab img {
    width: 22px;
    filter: invert(1);
  }

  /* ===========================
     OVERLAY DE BÚSQUEDA
     =========================== */
  #searchOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
    display: none;
    z-index: 3000;
    padding: 40px 20px;
    flex-direction: column;
    gap: 20px;
  }

  #searchOverlay.active {
    display: flex;
    animation: fadeIn .2s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  #searchOverlay .search-input {
    padding: 14px 16px;
    font-size: 17px;
    border-radius: 12px;
    border: none;
    width: 100%;
    background: #fff;
  }

  #closeSearch {
    align-self: flex-end;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    margin-top: -10px;
  }

  /* ===========================
     CATEGORÍAS — Scroll horizontal
     =========================== */
  .categorias-scroll {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 4px;
  }
  .categorias-scroll::-webkit-scrollbar {
    display: none;
  }

  .categorias {
    display: inline-flex;
    gap: 8px;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .chip {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
  }

  .chip.active {
    background: #222021;
    color: #fff;
    border-color: #222021;
  }

  /* ===========================
     GRID MÓVIL
     =========================== */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    padding: 10px;
    width: 100%;
  }

  .card {
    width: 100%;
    min-height: 330px;
    border-radius: 12px;
  }
  .card-img {
    height: 150px;
  }

  /* ===========================
     SIDEBAR → oculto en móvil
     =========================== */
  .sidebar {
    display: none !important;
  }

  /* ===========================
     CARRITO MÓVIL
     =========================== */
  .mobile-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    transition: bottom .3s ease;
    max-height: 82vh;
    z-index: 2500;
    padding: 14px;
    display: flex;
    flex-direction: column;
  }

  .mobile-cart.show {
    bottom: 0;
  }
}

/* ============================================================
   DESKTOP (≥1025px)
   Mantiene diseño actual
   ============================================================ */
@media (min-width: 1025px) {
  .search-fab,
  #searchOverlay,
  .mobile-cart {
    display: none !important;
  }
}
/* ❌ Ocultar burbuja del carrito en escritorio */
@media (min-width: 1025px) {
  #cartBtn,
  .cart-fab {
    display: none !important;
  }

}