/* =========================================================
   Fulwala — Responsive Rules
   ========================================================= */

@media (max-width: 1180px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .occ-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 1024px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-media img{ height:340px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .custom-cta{ grid-template-columns:1fr; padding:48px 32px; text-align:center; }
  .custom-cta p{ margin-left:auto; margin-right:auto; }
  .custom-cta-visual{ order:-1; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:0 16px; }
  .trust-item{ border-right:none; border-bottom:1px solid rgba(251,247,239,.1); padding:22px 4px; }
}

@media (max-width: 860px){
  .hero{ aspect-ratio:16/10; max-height:520px; }
  .pd-grid{ grid-template-columns:1fr; }
  .pd-media img{ min-height:260px; }
  .form-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  :root{ --nav-h:70px; }
  .section{ padding:64px 0; }
  .container{ padding:0 18px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .occ-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .occ-card{ padding:22px 12px; }
  .why-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .brand-name{ font-size:17px; }
  .brand img{ height:38px; width:38px; }

  /* Hero: a taller ratio on phones so the photo reads clearly —
     still a plain full-bleed object-fit:cover, no letterboxing. */
  .hero{ aspect-ratio:4/3; max-height:460px; }

  .trust-grid{ grid-template-columns:1fr 1fr; gap:0 14px; }
  .float-whatsapp{ width:52px; height:52px; bottom:18px; right:18px; }
  .float-whatsapp svg{ width:26px; height:26px; }
  .contact-btns .btn{ flex:1; }
  .product-actions{ flex-direction:column; }
  .nav-actions .icon-btn:nth-child(1){ display:none; }
}

@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .occ-grid{ grid-template-columns:repeat(2,1fr); }
  .hero{ aspect-ratio:1/1; max-height:420px; }
  .section-title{ font-size:26px; }
  .pd-body{ padding:26px 22px; }
  .modal-box{ max-height:92vh; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 420px){
  .product-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .product-body{ padding:14px 14px 16px; }
  .product-name{ font-size:15.5px; }
  .product-price{ font-size:16px; }
  .login-modal-box{ padding:36px 24px; }
}