/* Responsive enhancements for the entire site (mobile-first) */

/* Fluid media */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Ensure navbar can position dropdown nav */
.navbar { position: relative; }

/* Breakpoints */
/* Tablets and below */
@media (max-width: 1024px) {
  .navbar { padding: 0.75rem 1rem; }
  .logo { font-size: 1.6rem; }
  .logo i { font-size: 1.4rem; }

  .search-container { gap: 1rem; max-width: 100%; }
  .location-bar { min-width: 0; flex: 1; }
  .search-bar { flex: 1; min-width: 0; }

  /* Collapse nav to hamburger */
  .mobile-menu { display: block; }
  .nav-links { display: none; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fff;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    z-index: 1100;
  }
  .nav-links .login-btn { width: 100%; text-align: center; }

  /* Hero */
  .hero { padding: 6rem 1.25rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1.05rem; }
  .cta-buttons { flex-wrap: wrap; }

  /* Section titles */
  .section-title, .deals .section-title { font-size: 3rem; margin-bottom: 2.5rem; }

  /* Categories grid */
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .category-img { height: 150px; }

  /* Deals slider cards */
  .deal-card { flex: 0 0 240px; }

  /* Featured cards container (force wrapping on smaller screens) */
  .featured .card-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .featured-card { width: 100%; }

  /* Footer layout tweaks */
  .footer .footer-content { padding: 0 1rem; }
  .footer-bottom-content { gap: 1rem; padding: 1.5rem 1rem 1rem; }

  /* Category pages */
  .category-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
  .category-search { order: 1; }
  .category-filters, .category-sort { order: 2; justify-self: end; }
  .products-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* Small tablets and large phones */
@media (max-width: 768px) {
  .navbar { padding: 0.6rem 0.9rem; }
  .logo { font-size: 1.4rem; }

  .search-container { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .location-bar, .search-bar { width: 100%; }

  /* Section titles */
  .section-title, .deals .section-title { font-size: 2.25rem; margin-bottom: 2rem; }

  /* Categories grid */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .category-img { height: 130px; }

  /* Deals */
  .deal-card { flex: 0 0 220px; }

  /* Featured */
  .featured .card-container { grid-template-columns: repeat(2, 1fr); }

  /* Footer stacks */
  .footer .footer-content { display: flex; flex-direction: column; gap: 1.25rem; }
  .footer-bottom-content { flex-direction: column; align-items: stretch; gap: 1rem; }
  .payment-methods { align-items: flex-start; }

  /* Category pages */
  .breadcrumb .breadcrumb-container { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .category-hero { padding: 2rem 1rem; text-align: center; }
  .category-hero h1 { font-size: 1.75rem; }
  .category-hero p { font-size: 0.95rem; }
  .category-controls { grid-template-columns: 1fr; }
  .category-filters, .category-sort { justify-self: stretch; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* Search suggestions shouldn't overflow */
  .search-suggestions { max-height: 60vh; overflow: auto; }

  /* Modals */
  .login-modal .modal-content, .otp-modal .modal-content { width: min(95vw, 520px); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
  .login-modal .Modal-left { display: none; }
  .login-modal .Modal-right { width: 100%; }
  .modal-overlay { opacity: 1; }
}

/* Phones */
@media (max-width: 480px) {
  .hero { padding: 4.5rem 1rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.95rem; }
  .cta-buttons { gap: 0.75rem; }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
  .category-img { height: 120px; }
  .category-card h3 { font-size: 1rem; }

  .deal-card { flex: 0 0 200px; }

  .featured .card-container { grid-template-columns: 1fr; }

  .footer-brand h3 { font-size: 2rem; }

  /* Header Nav dropdown spacing */
  .nav-links.active { padding: 0.75rem 1rem; }

  /* Forms and inputs */
  input, select, textarea, button { font-size: 16px; }
}