/* =========================================================
   SOURISH AGARBATI — RESPONSIVE STYLES
   Breakpoints: 1180 / 980 / 720 / 480
   ========================================================= */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1180px){
  .container{ padding: 0 24px; }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col.hide-lap{ display:none; }
  .quality-list{ grid-template-columns: 1fr 1fr; }
  .process-steps{ grid-template-columns: repeat(2, 1fr); }
  .contact-cards{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px){
  section{ padding: 72px 0; }

  .nav-menu{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--cream-soft);
    flex-direction: column;
    justify-content:center;
    align-items:flex-start;
    gap: 30px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    box-shadow: -12px 0 40px -14px rgba(42,24,16,0.35);
    z-index: 1000;
  }
  .nav-menu.is-open{ transform: translateX(0); }
  .nav-menu a{ font-size: 15px; color: var(--brown-deep); }
  .nav-menu a.active{ color: var(--gold); }
  .hamburger{ display:flex; }

  .about-short .grid{ grid-template-columns: 1fr; }
  .about-visual{ aspect-ratio: 16/10; max-width: 460px; margin: 0 auto; }

  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .testi-grid{ grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand{ grid-column: 1 / -1; }

  .story-section .grid,
  .mission-section .grid,
  .contact-form-section .grid{ grid-template-columns: 1fr; }
  .story-section .grid > *:first-child,
  .mission-section .grid > *:first-child{ order: 2; }

  .process-steps{ grid-template-columns: repeat(2, 1fr); }
  .quality-list{ grid-template-columns: 1fr; }
  .contact-cards{ grid-template-columns: repeat(2, 1fr); }
  .mv-cards{ grid-template-columns: 1fr; }

  .slider-nav{ width: 40px; height: 40px; font-size: 15px; }
  .slider-nav.prev{ left: 14px; }
  .slider-nav.next{ right: 14px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .container{ padding: 0 20px; }
  section{ padding: 60px 0; }
  .section-head{ margin-bottom: 34px; }

  .hero-slider{ min-height: 560px; }
  .hero-content h1{ font-size: clamp(30px, 9vw, 42px); }
  .hero-btns{ flex-direction: column; width: 100%; }
  .hero-btns .btn{ width: 100%; }

  .page-hero{ padding: 150px 0 70px; }

  .why-grid{ grid-template-columns: 1fr; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .contact-cards{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr; }

  .footer-grid{ grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  .footer-bottom{ flex-direction: column; text-align:center; padding-bottom: 30px;margin-top: 15px; }

  .float-whatsapp{ width: 50px; height: 50px; bottom: 18px; right: 18px; }

  .catalog-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .tab-btn{ flex: 0 0 auto; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px){
  .cat-grid{ grid-template-columns: 1fr; }
  .about-visual .frame-badge{ left: 12px; bottom: 12px; padding: 10px 14px; }
  .contact-cta, .catalog-cta, .contact-cta{ padding: 70px 0; }
  .why-card, .mv-card, .process-step{ padding: 26px 20px; }
}
@media (max-width: 767px) {
  .btn.btn-outline {
    display: none;
  }
}

/* ---------- FAQ Responsive Adjustments ---------- */
@media (max-width: 720px) {
  .faq-section { padding: 50px 0 70px; }
  .faq-search-bar { margin-bottom: 24px; }
  .faq-search-bar input { padding: 14px 16px 14px 44px; font-size: 14px; }
  .faq-search-icon { left: 14px; width: 18px; height: 18px; }
  .faq-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .faq-tab-btn { flex: 0 0 auto; padding: 8px 16px; font-size: 12.5px; }
  .faq-question { padding: 16px 18px; }
  .faq-question h3 { font-size: 15px; }
  .faq-answer-inner { padding: 0 18px 18px; font-size: 13.5px; }
  .faq-help-card { padding: 28px 18px; margin-top: 36px; }
  .faq-help-actions .btn { width: 100%; }
}