/* ============================================
   RESPONSIVE — Media queries (debe cargarse al final) — Tu Rincón Ferretero
   Extraído de style.css en Fase 2 (Solución 2.0).
   No modificar selectores ni valores: paridad 1:1 con el original.
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */

/* --- TABLET (hasta 980px) --- */
@media (max-width: 980px) {
  .quick-categories { grid-template-columns: repeat(3, 1fr); }
  .home-cta-grid { grid-template-columns: 1fr; }
  .categoria-layout { grid-template-columns: 1fr; }
  .producto-layout { grid-template-columns: 1fr; }
  .purchase-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .related-products { grid-template-columns: repeat(2, 1fr); }

  /* Blindar íconos del header en tablet (WooCommerce inyecta CSS conflictivo) */
  .icon-btn,
  .header-icons .icon-btn,
  .woocommerce .icon-btn,
  .woocommerce-page .icon-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .icon-btn img, .header-icons img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
  .custom-logo-link, .site-logo img, .custom-logo {
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
  }

  /* Mega-nav scrolleable horizontalmente en tablet */
  .mega-nav { padding: 8px 0; }
  .mega-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .mega-nav-inner::-webkit-scrollbar { display: none; }
  .category-pill { flex-shrink: 0; }

  /* Hero banner más compacto */
  .hero-banner { padding: 24px 20px; }
  .hero-banner h2 { font-size: 22px; }

  /* Sidebar filtros: drawer lateral en tablet/móvil */
  .filters-sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 340px;
    height: 100vh;
    margin: 0;
    border: none;
    border-right: 2px solid var(--line);
    border-radius: 0;
    box-shadow: 4px 0 0 var(--line);
    overflow-y: auto;
    z-index: 250;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    padding: 48px 16px 16px;
  }
  .filters-sidebar.sidebar-open { transform: translateX(0); }

  /* Botón cerrar drawer */
  .filters-sidebar-close { display: flex; align-items: center; justify-content: center; }

  /* Botón toggle filtros: visible en tablet/móvil */
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    justify-content: space-between;
  }
}

/* --- MÓVIL (hasta 640px) --- */
@media (max-width: 640px) {
  /* Header compacto: logo + iconos en fila 1, búsqueda en fila 2 */
  .header-inner {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    align-items: center;
  }

  /* Logo ocupa el espacio disponible */
  .site-logo {
    font-size: 15px;
    padding: 4px 10px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Logo personalizado de WordPress */
  .custom-logo-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .custom-logo-link img.custom-logo {
    max-height: 38px !important;
    width: auto !important;
    max-width: 140px !important;
  }

  /* Iconos al lado derecho del logo */
  .header-icons {
    order: 2;
    flex-shrink: 0;
    gap: 6px;
  }
  .icon-btn,
  .header-icons .icon-btn,
  .woocommerce .icon-btn,
  .woocommerce-page .icon-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .icon-btn img,
  .header-icons img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }
  .icon-btn .badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    top: -5px !important;
    right: -5px !important;
  }
  /* Logo personalizado de WordPress — contenerlo */
  .custom-logo-link,
  .site-logo img,
  .custom-logo {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    max-width: 140px !important;
  }

  /* Búsqueda ocupa toda la segunda fila */
  .header-search {
    order: 3;
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }

  /* Mega-nav más compacta en móvil */
  .mega-nav { padding: 6px 10px; }
  .category-pill { font-size: 11px; padding: 4px 10px; }

  /* Grillas */
  .quick-categories { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid--bestsellers { grid-template-columns: repeat(2, 1fr); }
  .ideal-para-grid { grid-template-columns: 1fr; }

  /* Category-card: íconos proporcionales al ancho del móvil */
  .category-card {
    font-size: clamp(14px, 5vw, 20px);
    padding: 10px 6px;
    gap: 4px;
  }
  .category-card div {
    font-size: 10px;
    line-height: 1.2;
  }

  /* Cart popup desde abajo */
  .cart-popup {
    top: auto; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 12px 12px 0 0;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  /* Tipografía */
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  /* Producto single — reordenar layout: imagen → compra → descripción */
  .producto-layout {
    display: flex;
    flex-direction: column;
  }
  .producto-left {
    display: contents; /* "desenvuelve" el div para reordenar sus hijos */
  }
  .product-gallery { order: 1; }
  .producto-right  { order: 2; }
  .product-info    { order: 3; }

  /* Imagen compacta en móvil */
  #main-product-image,
  div.main-image {
    max-height: 230px !important;
    aspect-ratio: auto !important;
  }

  .purchase-card { padding: 14px; }
  .price-section .big-price { font-size: 26px; }

  /* Hero slider más compacto */
  .hero-slider { height: 220px !important; }
  .slide { padding: 24px 20px !important; }
  .slide-content h2 { font-size: 22px !important; }
  .slide-content p { font-size: 12px !important; margin-bottom: 14px !important; }
  .slider-prev, .slider-next { width: 34px; height: 34px; font-size: 22px; }

  /* Hero banner home */
  .hero-banner { padding: 18px 14px; flex-direction: column; gap: 12px; }
  .hero-banner h2 { font-size: 18px; }

  /* Página categoría */
  .categoria-header { padding: 12px 14px; }
  .categoria-header h1 { font-size: 20px; }

  /* Cabecera lista de productos (resultado + ordenar) */
  .products-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Tabla specs scroll horizontal */
  .specs-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pasos checkout */
  .checkout-steps { flex-wrap: wrap; gap: 6px; }
  .checkout-step { padding: 6px 12px; font-size: 10px; }

  /* Thumbnails galería: 4 columnas → 3 en móvil (más usable) */
  .thumbnail-gallery { grid-template-columns: repeat(3, 1fr); }

  /* Productos relacionados: 1 columna en móvil */
  .related-products { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* CTA cards */
  .cta-card { padding: 14px 12px; }

  /* Botón toggle filtros */
  .sidebar-toggle-btn { font-size: 13px; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 980px) {
  body.logged-in.woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tr-account-nav {
    position: static;
  }
  .tr-account-nav ul {
    display: flex;
    flex-wrap: wrap;
  }
  .tr-account-nav__item {
    border-bottom: none;
    border-right: 1.5px solid var(--line);
    flex: 1 1 auto;
  }
  .tr-account-nav__item:last-child { border-right: none; }
  .tr-account-nav__link { padding: 10px 12px; }
  .tr-account-nav__label { display: none; }
  .tr-account-nav__icon { margin: 0; }

  .tr-account-split {
    grid-template-columns: 1fr;
  }
  .tr-dashboard__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .tr-rebuy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .woocommerce-account .woocommerce {
    margin: 16px 0 32px;
  }
  .tr-account-card {
    padding: 18px 16px;
  }
  .tr-account-card__title { font-size: 18px; }
  .tr-tab { font-size: 12px; padding: 9px 4px 11px; }

  .tr-dashboard__hero {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tr-dashboard__hello { font-size: 22px; }
  .tr-dashboard__cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .tr-dash-card { padding: 12px; gap: 10px; }
  .tr-dash-card__icon {
    width: 38px; height: 38px; font-size: 18px;
  }
  .tr-dash-card__count { font-size: 18px; }
  .tr-rebuy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 18px 16px;
  }
}