/* ============================================================
   NovaCare — responsive.css
   Mobile-first breakpoints: 1200px, 992px, 768px, 576px, 400px
   ============================================================ */

/* ─── 1400px: Extra wide ──────────────────────────────────── */
@media (max-width: 1400px) {
  :root { --container-max: 1200px; }
  .footer-grid { grid-template-columns: 1.75fr 1fr 1fr 1fr 1.5fr; gap: 1.5rem; }
}

/* ─── 1200px: Large tablet / small desktop ────────────────── */
@media (max-width: 1200px) {
  :root { --container-max: 100%; }
  .container { padding: 0 1.25rem; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; display: flex; gap: 2rem; align-items: flex-start; }
  .footer-desc { max-width: none; flex: 1; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .listing-layout { grid-template-columns: 260px 1fr; }
}

/* ─── 992px: Tablet ───────────────────────────────────────── */
@media (max-width: 992px) {
  :root { --header-height: 64px; }

  /* Top bar */
  .top-bar-center { display: none; }

  /* Header */
  .header-search { max-width: 360px; }
  .header-action-btn span { display: none; }
  .mobile-menu-toggle { display: flex; }
  .navbar { display: none; }

  /* Hero */
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 3rem 1.5rem 2.5rem; }
  .hero-left h1 { font-size: 2.25rem; white-space: normal; }
  .hero-left p { max-width: 100%; }
  .hero-right { padding: 1.5rem; min-height: 340px; }
  .hero-mosaic { max-width: 360px; }
  .trust-badges { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

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

  /* Deal */
  .deal-product { grid-template-columns: 1fr; }
  .deal-product-img-wrap img { height: 260px; }
  .deal-product-info { padding: 1.5rem; }

  /* Listing */
  .listing-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: fixed;
    top: 0; left: -100%;
    width: min(320px, 88vw);
    height: 100vh;
    z-index: 960;
    border-radius: 0;
    border: none;
    transition: left 0.35s ease;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .filter-sidebar.open { left: 0; }
  .btn-filter-toggle { display: flex; }

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

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

  /* Product detail */
  .product-detail-layout { grid-template-columns: 1fr; gap: 2rem; }
  .product-gallery { position: static; }
  .gallery-main-img { height: 380px; }
  .tab-content-grid { grid-template-columns: 1fr; }
  .tab-content-side { position: static; }
  .specs-grid { grid-template-columns: 1fr; }
  .variants-table-footer { flex-direction: column; align-items: stretch; text-align: center; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }

  /* Auth */
  .auth-card { grid-template-columns: 1fr; }
  .auth-panel-left { display: none; }

  /* About */
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-img img { height: 300px; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }

  /* Doctors */
  .doctors-grid { grid-template-columns: repeat(2, 1fr); }

  /* Steps */
  .steps-grid::before { display: none; }
  .steps-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .step-card { padding: 1rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ─── 768px: Large phone / small tablet ──────────────────── */
@media (max-width: 768px) {
  /* Top Bar */
  .top-bar { padding: 0.5rem 1rem; }
  .top-bar-left { gap: 0.75rem; }
  .top-bar-item:not(:first-child) { display: none; }

  /* Header */
  .header-search { display: none; }
  .header-inner { gap: 0.75rem; }

  /* Hero */
  .hero-left { padding: 2.5rem 1.25rem 2rem; }
  .hero-left h1 { font-size: 1.875rem; }
  .hero-left p { font-size: 0.9375rem; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hero-right { padding: 1.25rem; }
  .hero-mosaic { max-width: 300px; gap: 0.625rem; }
  .hero-deal-badge { font-size: 0.7rem; top: 0.75rem; right: 0.75rem; }

  /* Conditions */
  .conditions-label { display: none; }

  /* Quick Order */
  .quick-order-label { display: none; }
  .quick-order-inner { gap: 0.75rem; }

  /* Deal */
  .deal-section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .countdown-timer { 
    flex-direction: row !important;
    justify-content: flex-start;
  }
  .countdown-wrap { width: 100%; }
  .countdown-label { text-align: left; }
  .countdown-block { width: 52px; height: 52px; }
  .countdown-block .val { font-size: 1.125rem; }

  /* Products grid */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
  .products-grid.list-view .product-card-body { flex-direction: column; align-items: flex-start; }
  
  /* Category filter tabs */
  .category-filter-tabs { gap: 0.5rem; }
  .category-filter-tab { font-size: 0.8125rem; padding: 0.5rem 1rem; }
  
  /* Section header */
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* About */
  .about-stats { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .values-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }

  /* Checkout steps */
  .checkout-step span { display: none; }
  .step-connector { width: 24px; }

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

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
  .footer-badges { justify-content: flex-start; }

  /* Contact */
  .contact-info-card, .contact-form-card { padding: 1.5rem; }

  /* Section headers */
  .section-title { font-size: 1.625rem; }

  /* Auth */
  .auth-container { padding: 0 1rem; }
  .auth-panel-right { padding: 1.5rem; }

  /* Listing toolbar */
  .listing-toolbar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .toolbar-right { width: 100%; justify-content: space-between; }

  /* Compare bar */
  .compare-bar { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.75rem; }
  .compare-bar-label { font-size: 0.8rem; }

  /* Gallery */
  .gallery-main-img { height: 300px; }
  .gallery-thumbnails { flex-wrap: nowrap; overflow-x: auto; }

  /* Variants */
  .variants-table-wrap { overflow-x: auto; }
  .variants-table { min-width: 520px; }

  /* Cart table */
  .cart-table-wrap { overflow-x: auto; }
  .cart-table { min-width: 560px; }
  .cart-product { flex-direction: column; align-items: flex-start; }
  .cart-product-img { width: 100%; height: auto; max-width: 120px; }
  .cart-actions-row { flex-direction: column; align-items: stretch; }
  .cart-action-right { width: 100%; justify-content: space-between; }

  /* Doctors */
  .doctors-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }
}

/* ─── 576px: Small phone ─────────────────────────────────── */
@media (max-width: 576px) {
  .container { padding: 0 1rem; }
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* Hero */
  .hero-left { padding: 2rem 1rem 1.75rem; }
  .hero-left h1 { font-size: 1.625rem; }
  .hero-mosaic { grid-template-columns: 1fr 1fr; gap: 0.5rem; max-width: 100%; }
  .hero-mosaic-img:nth-child(2) { margin-top: 0.75rem; }
  .hero-mosaic-img:nth-child(4) { margin-top: -0.75rem; }

  /* Products grid: single column on very small */
  .products-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }

  /* Brands strip */
  .brands-strip-inner { gap: 0.75rem; }
  .brand-logo-box { min-width: 90px; padding: 0.625rem 1rem; }
  .brand-name { font-size: 0.875rem; }

  /* Section */
  .section { padding: 2rem 0; }

  /* Deal */
  .deal-title { font-size: 1.375rem; }
  .deal-prices { flex-wrap: wrap; gap: 0.5rem; }
  .deal-price-main { font-size: 1.625rem; }
  .countdown-block { width: 46px; height: 46px; }
  .countdown-block .val { font-size: 1rem; }
  .countdown-block .unit { font-size: 0.55rem; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-title { font-size: 1.625rem; }

  /* Page header */
  .page-header h1 { font-size: 1.75rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .footer-brand { flex-direction: column; gap: 1rem; }
  .footer-badges { flex-direction: column; width: 100%; }
  .footer-badge { width: 100%; justify-content: center; }

  /* Product detail */
  .product-title { font-size: 1.375rem; }
  .product-price-main { font-size: 1.875rem; }
  .product-add-section { flex-direction: column; }
  .btn-add-to-cart { width: 100%; }
  .btn-add-to-list-lg { width: 100%; }
  .uom-selector { gap: 0.375rem; }

  /* Auth */
  .auth-page { padding: 1.5rem 0; }

  /* Checkout */
  .checkout-card { padding: 1.25rem; }
  .checkout-steps { gap: 0; }
  .checkout-step { padding: 0.5rem 0.5rem; }

  /* Cart */
  .cart-summary-card { padding: 1.25rem; }

  /* Top bar */
  .top-bar { font-size: 0.75rem; }
  .top-bar-right { display: none; }

  /* About stats */
  .about-stats { grid-template-columns: 1fr; max-width: 280px; margin: 2rem auto 0; }

  /* Listing toolbar */
  .sort-select, .items-per-page-select { font-size: 0.75rem; }

  /* Contact */
  .contact-layout { gap: 1.25rem; }

  /* Filter sidebar */
  .filter-sidebar { width: 100vw; }
}

/* ─── 400px: Extra small ─────────────────────────────────── */
@media (max-width: 400px) {
  .hero-left h1 { font-size: 1.5rem; }
  .btn-lg { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
  .product-card-img-wrap { height: 200px; }
  .countdown-sep { font-size: 1.125rem; }
  .page-header { padding: 1.5rem 0; }
  .page-header h1 { font-size: 1.5rem; }
}

/* ─── Print Styles ───────────────────────────────────────── */
@media print {
  .top-bar, .header, .navbar, .mobile-menu-drawer, .mobile-menu-overlay,
  .compare-bar, .newsletter-section, .footer { display: none !important; }
  body { font-size: 12pt; }
  .product-card { break-inside: avoid; }
}