/* ==================================================================
   NIVORA — Responsive
   Breakpoints target: 1920 / 1366 / 1024 / 768 / 414 / 390 / 375 / 320
   ================================================================== */

/* ---- Large desktop refinement ---------------------------------------- */
@media (min-width: 1600px){
  .container{ max-width: 1400px; }
}

/* ---- Laptop / small desktop (1024–1365) ------------------------------- */
@media (max-width: 1180px){
  .product-slider .product-card{ flex: 0 0 calc((100% - 20px*3)/4); }
  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-col:nth-child(4){ grid-column: span 3; margin-top: 10px; }
}

/* ---- Tablet (768–1023) ------------------------------------------------ */
@media (max-width: 1023px){
  .header-main{ grid-template-columns: auto 1fr auto; }
  .categories-btn{ display: none; }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-slider .product-card{ flex: 0 0 calc((100% - 20px*2)/3); }
  .shop-layout{ grid-template-columns: 1fr; }
  .filters{ display: none; }
  .filters.mobile-open{
    display: block;
    position: fixed; inset: 0; z-index: 400;
    border-radius: 0; overflow-y: auto; top: 0; position: fixed;
  }
  .mobile-filter-btn{ display: inline-flex; }
  .trust-strip ul{ grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile (max 767) --------------------------------------------------- */
@media (max-width: 767px){
  section{ padding: 48px 0; }
  .topbar-links a:nth-child(3),
  .topbar-links a:nth-child(2){ display: none; }

  .header-main{
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    padding: 14px 0;
  }
  .logo{ font-size: 22px; }
  .header-search{ display: none; }
  .header-search.mobile-search-open{
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); padding: 12px 16px; border-bottom: 1px solid var(--line);
    max-width: none; z-index: 100;
  }
  .header-icons .icon-btn span{ display: none; }
  .desktop-only{ display: none !important; }
  .mobile-only{ display: flex !important; }
  .main-nav{ display: none; }

  .hero-content{ max-width: 100%; padding: 0 20px; }
  .hero-track{ height: 78vh; min-height: 480px; }
  .hero-content h1{ font-size: 30px; }
  .hero-content p{ font-size: 14.5px; margin-bottom: 22px; }
  .hero-arrow{ width: 38px; height: 38px; }
  .hero-arrow.prev{ left: 10px; } .hero-arrow.next{ right: 10px; }

  .trust-strip ul{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .trust-strip li{ font-size: 12px; }

  .section-head{ flex-direction: column; align-items: flex-start; gap: 10px; }

  .category-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card-body h3{ font-size: 15.5px; }

  .promo-banner{ min-height: 260px; }
  .promo-banner-content{ padding: 26px; }

  .product-slider .product-card{ flex: 0 0 62%; min-width: 0; }

  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-info{ padding: 10px 10px 12px; gap: 4px; }
  .product-name{ font-size: 13.5px; }
  .price-current{ font-size: 14.5px; }
  .product-actions{ flex-wrap: wrap; }
  .product-actions .btn{ font-size: 11.5px; padding: 9px 8px; }

  .newsletter .container{ flex-direction: column; align-items: flex-start; }
  .newsletter-form{ flex: 1 1 100%; width: 100%; }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-grid .footer-col:first-child{ grid-column: span 2; }
  .footer-bottom{ flex-direction: column; text-align: center; }

  .floating-actions{ right: 14px; bottom: 14px; }
  .floating-btn{ width: 48px; height: 48px; font-size: 21px; }

  .form-row{ grid-template-columns: 1fr; gap: 0; }
  .delivery-options{ grid-template-columns: 1fr; }

  .lightbox-stage{ padding: 70px 16px 10px; }
  .lightbox-arrow{ width: 40px; height: 40px; }

  .side-drawer{ width: 100vw; }

  .tabs-head{ gap: 18px; overflow-x: auto; white-space: nowrap; }

  .toast-wrap{ left: 14px; right: 14px; top: 14px; }
  .toast{ min-width: 0; width: 100%; }
}

/* ---- Small phones (max 380) --------------------------------------------- */
@media (max-width: 380px){
  .container{ padding: 0 16px; }
  .logo{ font-size: 20px; }
  .hero-content h1{ font-size: 26px; }
  .product-grid, .category-grid{ gap: 10px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}