/* KHUZAMA INTL — Responsive Styles */

@media (max-width: 1200px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .fabric-grid { grid-template-columns: repeat(3, 1fr); }
  .custom-grid { grid-template-columns: repeat(3, 1fr); }
  .pl-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1024px) {
  .nav-desktop, .header-actions .btn { display: none; }
  .menu-toggle { display: flex; }
  .mega-menu { display: none; }

  .hero-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-text { max-width: 100%; margin: 0 auto; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-badges, .btn-group { justify-content: center; }
  .hero-image-wrap { max-width: 500px; margin: 0 auto; aspect-ratio: 4/3; }
  .hero-float-badge { left: 16px; bottom: 16px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .manufacturing-split, .content-block, .contact-grid, .product-detail { grid-template-columns: 1fr; gap: 40px; }
  .content-block.reverse { direction: ltr; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .technique-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }

  .timeline-horizontal { flex-wrap: wrap; gap: 24px; }
  .timeline-step { flex: 0 0 calc(33.33% - 16px); }
  .timeline-line { display: none; }

  .products-toolbar { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 100%; }
}

@media (max-width: 768px) {
  :root { --header-height: 70px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { aspect-ratio: 16/10; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .features-grid, .testimonials-grid, .technique-grid { grid-template-columns: 1fr; }
  .fabric-grid, .custom-grid { grid-template-columns: repeat(2, 1fr); }
  .pl-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .features-list { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  .hero-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .cta-section { margin: 0 16px; padding: 40px 24px; border-radius: var(--radius-lg); }

  .timeline-step { flex: 0 0 calc(50% - 12px); }
  .quality-grid { grid-template-columns: 1fr; }

  .product-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .quote-form { padding: 24px; }

  .filter-buttons { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .filter-btn { flex-shrink: 0; }

  .page-banner { min-height: 280px; padding-bottom: 32px; }
  .page-banner .heading-lg { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .page-banner p { font-size: 0.9375rem; }

  .section { padding: 56px 0; }
  .section-tight { padding: 28px 0; }

  .product-card-body { padding: 14px; }
  .product-card-title { font-size: 0.9375rem; }
  .product-card-code { margin-bottom: 12px; font-size: 0.75rem; }
  .product-card .btn { padding: 10px 16px; font-size: 0.75rem; }
}

@media (max-width: 430px) {
  .container, .container-wide { padding: 0 16px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { aspect-ratio: 3/4; border-radius: var(--radius-sm); }
  .category-card-content { padding: 14px; }
  .category-card-title { font-size: 0.875rem; }
  .category-card-arrow { width: 32px; height: 32px; font-size: 0.75rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .fabric-grid, .custom-grid { grid-template-columns: 1fr; }
  .hero-image-wrap { aspect-ratio: 1/1; }
  .whatsapp-float { bottom: 16px; right: 16px; }
  .whatsapp-btn { width: 50px; height: 50px; font-size: 1.25rem; }
}