/* =========================================================
   BONIX CHOPS — RESPONSIVE RULES
   Mobile-first breakpoints layered on top of style.css
   ========================================================= */

/* ---------- Large desktops (tune down container a touch) ---------- */
@media (max-width: 1200px){
  .category-grid{ grid-template-columns: repeat(4, 1fr); gap:18px; }
  .products-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tablets (≤ 991px) ---------- */
@media (max-width: 991px){
  :root{ --nav-h: 76px; }

  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed; top: var(--nav-h); left:0; right:0; bottom:0; height: calc(100vh - var(--nav-h));
    background: var(--c-bg); flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding: 28px 24px; gap:18px; transform: translateX(100%); transition: transform 360ms cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .nav-menu.open{ transform: translateX(0); }
  .nav-links{ flex-direction:column; align-items:stretch; gap:6px; }
  .nav-link{ padding:16px 18px; font-size:1.05rem; border-radius: var(--r-sm); }
  .nav-link.active::after{ display:none; }
  .nav-cart{ margin: 10px 0 0; justify-content:center; }

  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-visual{ order:-1; max-width:440px; margin-inline:auto; width:100%; }
  .hero-stats{ justify-content:center; text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-copy{ text-align:center; }
  .hero-copy p.lead{ margin-inline:auto; }

  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-track{ grid-template-columns: repeat(2, 1fr); }
  .products-grid{ grid-template-columns: repeat(3, 1fr); }

  .about-split, .founder-split{ grid-template-columns:1fr; gap:36px; }
  .founder-split{ text-align:center; }
  .founder-split .img-wrap{ max-width:360px; margin-inline:auto; }
  .founder-quote{ text-align:left; }

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

  .contact-grid{ grid-template-columns:1fr; }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap:36px; }

  .newsletter-panel{ grid-template-columns:1fr; text-align:center; }
  .newsletter-panel form{ justify-content:center; flex-wrap:wrap; }
}

/* ---------- Small tablets / large phones (≤ 767px) ---------- */
@media (max-width: 767px){
  .section{ padding: clamp(44px, 10vw, 64px) 0; }
  .category-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .products-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .why-grid{ grid-template-columns: 1fr; }
  .testimonial-track{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }

  .cta-band{ flex-direction:column; text-align:center; }
  .cta-actions{ justify-content:center; }

  .footer-grid{ grid-template-columns: 1fr; gap:32px; text-align:left; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  .filter-bar{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .filter-bar::-webkit-scrollbar{ display:none; }

  .cart-item{ flex-wrap:wrap; }
  .cart-item img{ width:72px; height:72px; }

  .floating-whatsapp{ width:52px; height:52px; font-size:1.4rem; right:16px; bottom:16px; }
  .back-to-top{ right:16px; bottom:80px; width:42px; height:42px; }
}

/* ---------- Phones (≤ 480px) ---------- */
@media (max-width: 480px){
  .container{ padding-inline: 18px; }
  .category-grid{ grid-template-columns: 1fr 1fr; }
  .products-grid{ grid-template-columns: 1fr 1fr; gap:12px; }
  .product-body{ padding:14px 14px 16px; }
  .product-name{ font-size:1rem; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .hero-visual .float-card{ padding:10px 14px; }
  .hero-visual .float-card b{ font-size:.82rem; }
  .hero-visual .float-card span{ font-size:.7rem; }
  .newsletter-form{ flex-direction:column; }
  .newsletter-form button{ width:100%; border-radius: var(--r-pill); height:44px; }
  .cta-band{ padding:32px 22px; }
  .cart-actions-row{ flex-direction:column; }
}

/* ---------- Ensure no horizontal scroll anywhere ---------- */
html, body{ max-width:100%; }
.container, .row, .hero, .section{ max-width:100%; }