/* =============================================
   Life2Pharma — Responsive Stylesheet
   ============================================= */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-image-wrap { display: none; }
  .hero h1 { font-size: 2.4rem; }

  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .products-layout { grid-template-columns: 220px 1fr; }
  .product-detail-grid { gap: 32px; }

  .cart-layout { grid-template-columns: 1fr 300px; }
  .checkout-layout { grid-template-columns: 1fr 320px; }
  .about-grid { gap: 40px; }
  .contact-grid { gap: 32px; }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
  /* Navbar */
  .nav-menu {
    position: fixed; top: 70px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 16px; gap: 4px; border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md); transform: translateY(-120%);
    transition: transform 0.3s ease; opacity: 0;
    pointer-events: none;
  }
  .nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link { padding: 12px 16px; border-radius: 8px; }
  .hamburger { display: flex; }
  .nav-logo .brand-sub { display: none; }
  .cart-btn .cart-text { display: none; }

  /* Hero */
  .hero { padding: 60px 0 50px; }
  .hero h1 { font-size: 1.9rem; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Sections */
  .section { padding: 50px 0; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Products page */
  .products-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    transform: translateY(100%); transition: transform 0.3s ease;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh; overflow-y: auto; z-index: 1200;
  }
  .filter-sidebar.open { transform: translateY(0); }
  .filter-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1100;
  }
  .filter-overlay.active { display: block; }
  .mobile-filter-btn { display: flex; }
  .products-topbar { flex-wrap: wrap; }
  .search-filter { max-width: 100%; order: -1; width: 100%; }

  /* Product Detail */
  .product-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .add-to-cart-wrap { flex-direction: column; align-items: flex-start; }
  .add-to-cart-wrap .btn { width: 100%; justify-content: center; }
  .tab-content { padding: 20px 16px; }
  .tab-btn { padding: 11px 16px; font-size: 0.82rem; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-table-header { display: none; }
  .cart-item { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px; }
  .cart-item-info { grid-column: 1; }
  .cart-remove { grid-column: 2; grid-row: 1; }
  .cart-qty { grid-row: 2; }
  .cart-item-price { grid-row: 2; font-size: 0.85rem; }
  .cart-subtotal { display: none; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary-card { position: static; order: -1; }
  .form-row { grid-template-columns: 1fr; }

  /* About & Contact */
  .about-grid { grid-template-columns: 1fr; }
  .about-image-grid { display: none; }
  .contact-grid { grid-template-columns: 1fr; }

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

  /* Legal */
  .legal-content { padding: 40px 0; }
}

/* Small Mobile: <= 480px */
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.6rem; }
  .about-highlights { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 12px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 300px; }
  .tab-buttons { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; }
}

/* Print styles */
@media print {
  #navbar, .whatsapp-float, .toast-container, footer { display: none; }
  .page-content { padding-top: 0; }
}