/* ========================================
   ZANGA - Responsive
   ======================================== */

* { -webkit-tap-highlight-color: transparent; }

/* ===== LARGE DESKTOP ===== */
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== DESKTOP ===== */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-content { grid-template-columns: repeat(2, 1fr); }
}

/* ===== TABLET ===== */
@media (max-width: 768px) {
  .container { padding: 0 1rem; }

  /* Header */
  .header { position: sticky; }

  .header-top {
    flex-wrap: wrap;
    padding: 0.625rem 0;
    gap: 0.5rem;
  }

  .search-bar { order: 3; width: 100%; max-width: 100%; }

  .user-actions {
    display: flex;
    gap: 0.5rem;
  }

  .user-actions .btn {
    flex: 1;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  /* Nav */
  .categories { padding: 0 0.5rem; }
  .categories a { font-size: 0.8rem; padding: 0.35rem 0.75rem; }

  /* Hero */
  .hero { padding: 2.25rem 0; min-height: 280px; }
  .hero h1 { font-size: 1.75rem; margin-bottom: 0.75rem; }
  .hero p  { font-size: 0.95rem; margin-bottom: 1.5rem; }

  /* Filters */
  .filters { padding: 1rem; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Products */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .product-image-wrapper { height: 155px; }
  .product-info { padding: 0.75rem; }
  .product-title { font-size: 0.85rem; }
  .product-price { font-size: 1rem; }
  .product-meta  { font-size: 0.7rem; }

  /* Packs */
  .packs-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Modal */
  .modal { padding: 0.75rem; }
  .modal-content { max-width: 100%; }
  .modal-header, .modal-body { padding: 1rem; }

  /* Tabs */
  .tab { padding: 0.5rem 0.75rem; font-size: 0.82rem; }

  /* Stat card */
  .stat-card { padding: 1rem; }
  .stat-value { font-size: 1.5rem; }

  /* Detail page */
  .detail-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .detail-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Profile */
  .profile-layout { grid-template-columns: 1fr !important; }
  .profile-sidebar {
    position: static !important;
    margin-bottom: 1rem;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
  html { font-size: 14px; }
  .container { padding: 0 0.75rem; }

  /* Filters */
  .filter-grid { grid-template-columns: 1fr; }
  .filters { padding: 0.75rem; }

  /* Products: horizontal card layout */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }

  .product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .product-image-wrapper {
    width: 105px;
    height: 105px;
    flex-shrink: 0;
    border-radius: 0;
  }

  .product-info {
    flex: 1;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .product-category { font-size: 0.65rem; }
  .product-title    { font-size: 0.82rem; margin-bottom: 0.25rem; }
  .product-price    { font-size: 0.95rem; margin-bottom: 0; }
  .product-meta     { padding-top: 0.35rem; font-size: 0.68rem; }

  /* Hero */
  .hero { padding: 1.75rem 0; }
  .hero h1 { font-size: 1.4rem; }
  .hero p  { font-size: 0.875rem; }

  /* Buttons */
  .btn { padding: 0.55rem 1rem; font-size: 0.825rem; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Modal fullscreen */
  .modal { padding: 0; }
  .modal-content {
    max-height: 100vh; height: 100vh;
    border-radius: 0; max-width: 100%;
  }
  .modal-header {
    padding: 0.875rem 1rem;
    position: sticky; top: 0;
    background: white; z-index: 10;
    border-bottom: 1px solid var(--gray-100);
  }
  .modal-body {
    padding: 0.875rem 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 56px);
  }

  /* Packs */
  .pack-card { padding: 1.25rem; }
  .pack-price { font-size: 1.5rem; }

  /* Form */
  .form-group { margin-bottom: 0.875rem; }
  .form-control { font-size: 0.9rem; padding: 0.55rem 0.75rem; }

  /* Upload */
  .upload-area { padding: 1.25rem; min-height: 130px; }
  .preview-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .preview-item { height: 90px; }
}

/* ===== VERY SMALL ===== */
@media (max-width: 360px) {
  html { font-size: 13px; }

  .product-image-wrapper { width: 90px; height: 90px; }

  .hero h1 { font-size: 1.2rem; }
}

/* ===== UTILITIES ===== */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-mobile  { display: none !important; }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
  .btn:active { transform: scale(0.97); opacity: 0.9; }
  .product-card:active { transform: scale(0.99); }

  .btn, .tab, a { min-height: 44px; }

  * { -webkit-overflow-scrolling: touch; }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding: 1.5rem 0; min-height: 200px; }
  .hero h1 { font-size: 1.4rem; }
  .modal-content { max-height: 90vh; }
}

/* ===== PRINT ===== */
@media print {
  .header, .nav-categories, .filters, .footer, .btn, .modal {
    display: none !important;
  }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}