/* =========================
   RESPONSIVE - TABLET
   ========================= */
@media (max-width: 1024px) {

    .search-box{
    width: 80vw;
    max-width: 240px;  /* CORREGIDO: Valor funcional */
  }
  /* Contenido */
  .productos {
    flex-direction: column;
    align-items: center;
  }

  .producto {
    width: 80%;
    margin-bottom: 20px;
  }

  /* Cabecera más compacta */
  .top-bar {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .top-bar h1 {
    font-size: 20px;
    margin: 0;
  }

  /* ✅ SOLO MENÚ: ocultar barra normal y mostrar hamburguesa */
  nav ul {
    display: none !important;
  }

  .hamburger {
    display: inline-flex;
    margin-right: 0
  }

  nav {
    top: 0;
    box-shadow: none;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* =========================
   RESPONSIVE - CELULAR
   ========================= */
@media (max-width: 600px) {

   .top-bar h1 {
    font-size: 18px;
    display: none !important; /* OCULTAR TÍTULO EN MÓVIL PEQUEÑO */
  }

  /* ✅ Buscador más angosto en celular */
  .search-box{
    width: 65vw;
    max-width: 240px;  /* CORREGIDO: Valor funcional */
  }

  .search-box input
    #header-search{
    width: 100%;       /* llena su contenedor reducido */
  }

  /* Si alguna vista usa el buscador viejo */
  .search-login input[type="text"]{
    width: 65vw;
    max-width: 200px;
  }

  .producto {
    width: 90%;
  }

  footer {
    font-size: 12px;
  }

  .whatsapp img {
    width: 20px;
    height: 20px;
  }

  .mobile-drawer {
    width: 86vw;
  }

  .drawer-menu li a {
    font-size: 1.05rem;
    padding: 14px 18px;
  }
}

/* =========================
   900px - Contacto
   ========================= */
@media (max-width: 900px) {
  .contacto-contenedor {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-mapa {
    margin-top: 25px;
    min-width: auto;
  }
}

/* 900px - Detalle producto layout */
@media (max-width: 900px) {
  .product-detail-layout {
    flex-direction: column;
  }
  .product-sidebar {
    width: 100%;
  }
}

/* 768px - Detalle producto card */
@media (max-width: 768px) {
  .product-detail-card {
    flex-direction: column;
    align-items: center;
  }
  .product-detail-img-wrapper {
    width: 80%;
  }
  .product-detail-info {
    width: 100%;
  }
}

/* 768px - Nosotros */
@media (max-width: 768px) {
  .nosotros {
    flex-direction: column;
  }
  .nosotros img {
    max-width: 100%;
  }
}

/* 768px - Registro */
@media (max-width: 768px) {
  .register-card {
    padding: 18px 15px 22px;
  }
  .register-form .form-grid {
    flex-direction: column;
  }
}

/* 600px - Grids */
@media (max-width: 600px) {
  #destacados,
  #nuevos,
  #similares-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   MENÚ RESPONSIVE: ocultar nav desktop y usar drawer
   ========================== */
@media (max-width: 1024px) {
  nav ul { display: none !important; }
  .hamburger { display: inline-flex;}
  #user-greeting{
    display: none !important;
  }
    #btn-login{
    display: none !important;
  }

    .top-bar{
    align-items: flex-start !important; /* en vez de center */
    justify-content: flex-start;
    text-align: left;
  }
}


/* =========================
   CELULAR: carrito al lado del buscador
   ========================= */
@media (max-width: 1024px){

 header{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
  }


  /* Pasamos top-bar a grid */
  .top-bar{
    display: grid !important;
    grid-template-columns: auto 1fr auto; /* hamburguesa | buscar | carrito */
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
  }

  /* hacemos que los hijos de top-left/top-right participen directo en el grid */
  .top-left,
  .top-right{
    display: contents;
  }

  /* 1ª fila */
  .hamburger{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .search-box{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;

    width: 65vw;
    max-width: 160px;
  }

  .btn-cart-header{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* 2ª fila: lo demás (mi cuenta / salir / ingresar) abajo a la izquierda */
  #user-greeting,
  #btn-login,
  #btn-logout{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
}

/* =========================
   RESPONSIVE PREVIO PEDIDO (Móvil < 900px)
   ========================= */
@media (max-width: 900px) {
  .checkout-layout {
    flex-direction: column; /* Apilar verticalmente */
    gap: 20px;
  }

  .checkout-summary, 
  .checkout-sidebar {
    width: 100%; /* Ocupar todo el ancho */
    position: static; /* Quitar sticky en móvil */
  }

  /* Mover el sidebar (botón confirmar) al final visualmente si se desea,
     o dejarlo abajo del resumen por orden del HTML */
  .checkout-sidebar {
    order: 2; /* Asegurar que vaya después del resumen */
  }
  
  .cart-summary-box {
    overflow-x: auto; /* Scroll horizontal si la tabla es muy ancha */
  }
}