/* Menú móvil — oculto por defecto en escritorio */
.mobile-nav { display: none; }
.mobile-nav__overlay { display: none; }

/* ============================================================
   DAMPI — Responsive
============================================================ */

@media (max-width: 1200px) {
  .categories__grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card--wide { grid-column: span 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .promo-banner { padding: 3.5rem 3rem; }
}

@media (max-width: 960px) {
  .hero { flex-direction: column; min-height: auto; padding: 3rem 2rem; gap: 2.5rem; }
  .hero__content { max-width: 100%; }
  .hero__visual {
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .hero__card { flex: 1; min-width: 150px; margin-left: 0 !important; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3) { border-top: 1px solid var(--border); }
  .stat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card--wide { grid-column: span 2; }
  .promo-banner { padding: 3rem 2rem; flex-direction: column; text-align: center; }
  .promo-banner__content p { margin: 0 auto 1.75rem; }
  .promo-banner__visual { justify-content: center; }
}

@media (max-width: 640px) {
  .header__top {
    font-size: 10px;
    gap: 1.5rem;
    padding: 5px 10px;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }
  .navbar { padding: 0.75rem 1rem; gap: 0.5rem; }
  .search-bar { max-width: none; }
  .nav-actions { display: none; }
  .hamburger { display: block; }
  .section { padding: 3rem 1.25rem; }
  .categories__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card { padding: 18px 16px; }
  .cat-card--wide { grid-column: span 2; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__brand p { max-width: 100%; }
  .section__header { flex-direction: column; align-items: flex-start; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .promo-banner { padding: 2.5rem 1.5rem; }
  .promo-banner__content h2 { font-size: 1.7rem; }
  .promo-banner__visual { display: none; }
  .hero__title { font-size: 2.5rem; }
  .brands__row { gap: 8px; }
  .brand { padding: 11px 18px; font-size: 13px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-card__img { height: 150px; }
  .product-card__img-icon { font-size: 2.8rem; }
  .product-card__body { padding: 12px; }
  .product-card__name { font-size: 13px; }
}

@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr; }
  .hero__card { min-width: 100%; }
}

/* ============================================================
   MÓVIL — Correcciones navbar, carrito y categorías
============================================================ */

/* Carrito siempre visible en móvil */
@media (max-width: 640px) {
  .nav-actions { display: flex !important; align-items: center; gap: 6px; }
  .nav-btn--ghost { display: none; }
  .nav-btn--cart {
    display: flex !important;
    padding: 7px 12px;
    font-size: 13px;
    gap: 5px;
  }
  .cart-count {
    min-width: 18px; height: 18px;
    font-size: 10px;
  }

  /* Menú móvil overlay */
  .mobile-nav {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--surface);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .mobile-nav.open { transform: translateX(0); }
  .mobile-nav__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-nav__close {
    background: none; border: none; cursor: pointer;
    color: var(--text2); font-size: 24px; padding: 4px;
    line-height: 1;
  }
  .mobile-nav__body { padding: 12px 0; }
  .mobile-nav__section {
    padding: 4px 20px 12px;
  }
  .mobile-nav__label {
    font-size: 10px; font-weight: 700; color: var(--text3);
    text-transform: uppercase; letter-spacing: .1em;
    padding: 8px 0 6px;
  }
  .mobile-nav__link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0;
    font-size: 15px; font-weight: 500; color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav__link:last-child { border-bottom: none; }
  .mobile-nav__link:active { color: var(--cyan); }
  .mobile-nav__overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.45);
    display: none;
  }
  .mobile-nav__overlay.open { display: block; }

  /* Categorías en móvil */
  .cat-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .cat-sidebar {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }
  .cat-sidebar-inner {
    display: none;
  }
  .cat-sidebar-inner.open {
    display: block;
  }
  .cat-filter-toggle {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
  }
  .cat-main { width: 100% !important; }
  .cat-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cat-toolbar__sort { width: 100%; }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .prod-card__img { height: 130px !important; }
  .prod-card__name { font-size: 12px !important; -webkit-line-clamp: 2 !important; }
  .prod-card__price { font-size: 16px !important; }
  .prod-card__add { padding: 7px 10px !important; font-size: 12px !important; }
}

@media (max-width: 360px) {
  .products-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BÚSQUEDA — Responsive
============================================================ */
@media (max-width: 768px) {
  #searchLayout {
    grid-template-columns: 1fr !important;
  }
  #sidebar {
    position: static !important;
    top: auto !important;
    height: auto !important;
  }
}

/* ============================================================
   NAVBAR — Hamburger visible en móvil (global)
============================================================ */
@media (max-width: 640px) {
  .hamburger { display: flex !important; }
  .nav-trust { display: none !important; }
}

/* ============================================================
   CATEGORÍAS — Cat-page grid responsive
============================================================ */
@media (max-width: 860px) {
  .cat-page {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    display: none;
    position: static !important;
    height: auto !important;
  }
  .sidebar.mobile-open { display: block; }
  .cat-content { padding: 16px 0 !important; }
}

/* ============================================================
   PROD-CARD — Correcciones móvil
============================================================ */
@media (max-width: 640px) {
  .prod-card__footer {
    flex-wrap: wrap;
    gap: 6px;
  }
  .prod-card__prices { min-width: 0; flex: 1; }
  .prod-card__btn { width: 100%; justify-content: center; }
  .subcat-chips { gap: 6px; }
  .subcat-chip { padding: 5px 10px; font-size: 11px; }
  .cat-toolbar { flex-wrap: wrap; }
  .toolbar__left { flex-wrap: wrap; }
}

/* ============================================================
   OCASION — Responsive
============================================================ */
@media (max-width: 860px) {
  .oc-layout {
    grid-template-columns: 1fr !important;
  }
  .oc-sidebar { display: none; }
  .oc-sidebar.mobile-open { display: block; }
}
@media (max-width: 640px) {
  .oc-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .oc-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .oc-tab { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
}

/* ============================================================
   PRODUCTO DETALLE — Responsive
============================================================ */
@media (max-width: 768px) {
  .detalle-grid {
    grid-template-columns: 1fr !important;
  }
  .detalle-imgs { max-width: 100%; }
  .detalle-precio { font-size: 1.6rem !important; }
}
@media (max-width: 640px) {
  .rel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ============================================================
   FILTROS — Responsive
============================================================ */
@media (max-width: 640px) {
  .filter-block__header { padding: 10px 12px; font-size: 11px; }
  .filter-body { padding: 10px 12px 14px; }
  .filter-item { padding: 6px 0; }
  .filter-label { font-size: 12px; }
  .filter-count { font-size: 10px; padding: 1px 5px; }
}

/* ============================================================
   CATBAR — Ocultar en móvil (global)
============================================================ */
@media (max-width: 640px) {
  .catbar { display: none !important; }
}

/* ============================================================
   NAVBAR MÓVIL — cuenta, carrito, ocultar buscador
============================================================ */
.navbar-account-mobile { display: none; }
.navbar-cart-mobile { display: none !important; }
.nav-cart-desktop { }

@media (max-width: 640px) {
  /* Ocultar buscador y nav-actions en navbar */
  .search-bar, .navbar .search-bar, nav .search-bar { display: none !important; }
  .navbar .nav-actions { display: none !important; }
  .navbar { padding: 0 12px !important; gap: 10px !important; justify-content: space-between !important; }
  .navbar .logo { flex: 1 !important; }
  /* Carrito desktop oculto */
  .nav-cart-desktop { display: none !important; }
  /* Cuenta móvil */
  .navbar-account-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text2);
    text-decoration: none;
    padding: 4px;
  }
  /* Carrito móvil */
  .navbar-cart-mobile { display: flex !important; align-items: center; gap: 6px; }
  /* Header top oculto */
  .nav-trust { display: none !important; }
}

/* ============================================================
   SIDEBAR FILTROS — móvil
============================================================ */
@media (max-width: 860px) {
  .cat-page { grid-template-columns: 1fr !important; }
  .sidebar {
    display: none;
    position: fixed !important;
    top: 0; left: 0;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    overflow-y: auto;
    z-index: 300;
    background: var(--surface);
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
    padding: 16px !important;
  }
  .sidebar.mobile-open { display: block; }
  .sidebar-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 299;
  }
  .sidebar-filter-overlay.active { display: block; }
  .btn-filter-mobile { display: flex !important; }
  .cat-content { width: 100%; }
}

/* ============================================================
   MÁRGENES GLOBALES MÓVIL
============================================================ */
@media (max-width: 640px) {
  .breadcrumb, .cat-breadcrumb { padding-left: 12px !important; padding-right: 12px !important; }
  .products-grid, .prod-grid, .subcat-chips, .cat-toolbar, .toolbar { padding-left: 4px !important; padding-right: 4px !important; }
  .oc-layout, .oc-content { padding-left: 4px !important; padding-right: 4px !important; }
  .footer { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ============================================================
   PROD-CARD responsive
============================================================ */
@media (max-width: 640px) {
  .prod-card__footer { flex-wrap: wrap; gap: 6px; }
  .prod-card__prices { min-width: 0; flex: 1; }
}