/* =====================================================
   TU@SL Fashion — responsive.css
   ===================================================== */

/* ---- 1280px ---- */
@media (max-width: 1280px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .footer-main .footer-col:last-child { grid-column: 1 / -1; }
  .trending-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 1024px ---- */
@media (max-width: 1024px) {
  :root { --nav-height: 48px; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 2rem; }
  .category-layout { grid-template-columns: 220px 1fr; gap: 1.5rem; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .dept-grid { grid-template-columns: repeat(3, 1fr); }
  .campaign-grid { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu { width: 700px; }
}

/* ---- 768px (Tablet) ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
    --nav-height: 0px;
  }

  /* Header */
  .site-nav { display: none; }
  .header-main { grid-template-columns: auto 1fr auto; }
  .header-search { display: none; }
  .mobile-menu-btn { display: flex; align-items: center; }
  .header-action-btn .label { display: none; }
  .header-action-btn .count-badge { top: 0; right: 0; }

  /* Hero */
  .hero { height: min(60vh, 480px); }
  .hero-content { padding: 2rem 1.25rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; max-width: 240px; }

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

  /* Dept grid */
  .dept-grid { grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
  .dept-card { aspect-ratio: 2/3; }
  .dept-card-label { font-size: 1.125rem; }

  /* Category layout */
  .category-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .mobile-filter-btn { display: flex; }

  /* Campaign */
  .campaign-grid { gap: 0.625rem; }

  /* Trending */
  .trending-grid { grid-template-columns: repeat(4, 1fr); }

  /* Social */
  .social-grid { grid-template-columns: repeat(3, 1fr); }

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

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; padding: 2.5rem 0 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-input, .newsletter-btn {
    border-radius: 50px;
    text-align: center;
  }

  /* About */
  .about-grid { grid-template-columns: 1fr; }

  /* Cart */
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item-actions { grid-column: 1 / -1; }

  /* Checkout */
  .form-grid { grid-template-columns: 1fr; }

  /* Section */
  .section { padding: 2.5rem 0; }
  .section-header { flex-direction: column; align-items: flex-start; }

  /* WhatsApp */
  .whatsapp-fab { bottom: 1rem; left: 1rem; width: 46px; height: 46px; }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  :root { --announcement-height: 36px; }

  .container { padding: 0 1rem; }

  /* Products */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
  .product-card__info { padding: 0.625rem; }
  .product-card__name { font-size: 0.8125rem; }
  .product-card__price-now { font-size: 0.9375rem; }

  /* Dept */
  .dept-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .dept-card-label { font-size: 0.875rem; }
  .dept-card-link { display: none; }

  /* Trending */
  .trending-grid { grid-template-columns: repeat(3, 1fr); }

  /* Social */
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .social-item:nth-child(n+5) { display: none; }

  /* Campaign */
  .campaign-grid { grid-template-columns: 1fr; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero { height: min(50vh, 380px); }
  .hero-title { font-size: 1.75rem; }

  /* Header */
  .header-logo { font-size: 1.125rem; }

  /* Product detail */
  .product-cta { flex-direction: column; }

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

  /* Section */
  .section { padding: 2rem 0; }
  .section-title { font-size: 1.25rem; }
}

/* ---- 375px ---- */
@media (max-width: 375px) {
  .products-grid { gap: 0.5rem; }
  .product-card__actions { gap: 0.25rem; padding: 0.5rem; }
  .product-card__actions .btn { font-size: 0.7rem; padding: 0.4rem 0.625rem; }
  .header-action-btn { padding: 0.375rem 0.375rem; }
}

/* ---- 320px ---- */
@media (max-width: 320px) {
  :root { --announcement-height: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.375rem; }
  .container { padding: 0 0.75rem; }
}

/* ---- Large displays (1920px+) ---- */
@media (min-width: 1440px) {
  .products-grid { grid-template-columns: repeat(5, 1fr); }
  .trending-grid { grid-template-columns: repeat(6, 1fr); }
}