/* ════════════════════════════════════════════════════════
   MercaFácil · responsive.css
   Breakpoints: 480 | 640 | 768 | 1024 | 1280
   ════════════════════════════════════════════════════════ */

/* ── 1024px (tablet landscape) ─────────────────────── */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
  .cart-layout { grid-template-columns: 1fr 280px; }
}

/* ── 768px (tablet portrait) ───────────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 96px; }

  /* Header */
  .header-inner { padding: 10px 14px; gap: 10px; }
  .logo-text { font-size: 18px; }
  .search-bar { max-width: none; flex: 1; }
  .search-input { font-size: 14px; padding: 9px 12px; }
  .search-btn { padding: 0 14px; }

  /* Hide text labels in header actions on tablet */
  .user-name { display: none; }
  .btn-logout { font-size: 12px; padding: 6px 10px; }

  /* Show hamburger, hide some header actions */
  .hamburger { display: flex; }
  .btn-login, .btn-register { display: none; }
  .btn-cart-header { display: none; }

  /* hero */
  .hero { padding: 32px 28px; }
  .hero-title { font-size: 28px; }
  .hero-emoji { font-size: 70px; }

  /* stats */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-val  { font-size: 17px; }

  /* product grid */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .card-img { height: 130px; font-size: 56px; }

  /* product detail */
  .product-layout { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .product-img-box { min-height: 200px; font-size: 90px; }
  .product-title  { font-size: 20px; }
  .product-price  { font-size: 28px; }

  /* cart */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }

  /* auth */
  .auth-card { padding: 28px 22px; margin: 16px; border-radius: 18px; }

  /* dashboard */
  .form-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .dash-tabs { width: 100%; }
  .dash-tab  { flex: 1; text-align: center; }

  /* app main */
  .app-main { padding: 14px 14px 28px; }
}

/* ── 640px (large mobile) ───────────────────────────── */
@media (max-width: 640px) {
  /* Hero - stack vertically */
  .hero { flex-direction: column; text-align: center; padding: 28px 20px; gap: 18px; }
  .hero-emoji { order: -1; font-size: 64px; }
  .hero-btns  { justify-content: center; }
  .hero-title { font-size: 26px; }
  .hero-sub   { font-size: 14px; }
  .btn-primary, .btn-secondary { font-size: 14px; padding: 11px 20px; }

  /* Grid - 2 columns on large mobile */
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-img { height: 120px; font-size: 50px; }
  .card-body { padding: 10px 10px 12px; gap: 4px; }
  .card-price { font-size: 18px; }
  .card-title { font-size: 12px; }

  /* Product detail */
  .product-layout { padding: 16px; }
  .buy-box .btn-buy-now, .buy-box .btn-add-to-cart-lg { font-size: 14px; padding: 12px; }

  /* Cart items - compact */
  .cart-item { padding: 12px; gap: 10px; }
  .cart-item-img { font-size: 36px; }
  .cart-item-title { font-size: 13px; }

  /* Filters */
  .filters-bar { gap: 8px; }
  .filter-select { font-size: 12px; padding: 7px 10px; }

  /* Auth */
  .role-select { grid-template-columns: 1fr 1fr; }

  /* Section title */
  .section-title { font-size: 19px; }
  .page-title    { font-size: 22px; }

  /* Stats */
  .stat-icon { font-size: 22px; }
  .stat-val  { font-size: 16px; }
  .stat-label { font-size: 11px; }

  /* Product row */
  .product-row-title { font-size: 13px; }
  .product-row { padding: 12px 14px; gap: 10px; }
}

/* ── 480px (small mobile) ───────────────────────────── */
@media (max-width: 480px) {
  :root { --header-h: 88px; }

  .header-inner { padding: 8px 12px; gap: 8px; }
  .logo-text { display: none; }   /* Just icon on tiny screens */
  .logo-icon { font-size: 28px; }

  .search-input { font-size: 13px; padding: 9px 10px; }

  /* hero */
  .hero { border-radius: 14px; padding: 22px 16px; }
  .hero-title { font-size: 22px; }
  .hero-btns  { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }

  /* Grid - still 2 columns but smaller */
  .product-grid { gap: 8px; }
  .card-img { height: 105px; font-size: 44px; }

  /* Auth card */
  .auth-card { padding: 22px 16px; margin: 12px; }
  .auth-logo { font-size: 18px; }

  /* dashboard */
  .dash-name { font-size: 20px; }
  .dash-avatar { width: 48px; height: 48px; font-size: 16px; border-radius: 14px; }
  .form-card { padding: 18px 14px; }

  /* Bottom bar text */
  .bb-label { display: none; }
  .bottom-btn { min-height: 50px; }
  .bb-icon { font-size: 22px; }

  /* order card */
  .order-card { padding: 14px; }
  .order-item-title { font-size: 13px; }
}

/* ── Touch / hover optimization ─────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover { transform: none; }
  .product-card:active { transform: scale(.98); }
  .btn-add-cart:hover, .btn-primary:hover,
  .btn-secondary:hover, .btn-checkout:hover { opacity: 1; }
  .btn-add-cart:active, .btn-primary:active { opacity: .85; }
}

/* ── Landscape mobile ───────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { flex-direction: row; text-align: left; }
  .hero-emoji { font-size: 56px; }
  .hero-btns  { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Print ──────────────────────────────────────────── */
@media print {
  .header, .bottom-bar, .btn-add-cart, .btn-publish,
  .hamburger, .cat-nav { display: none !important; }
  .app-main { padding: 0; max-width: 100%; }
  .product-card { break-inside: avoid; }
}