/* ============================================================
   RJ HAIR OIL — Responsive Rules (mobile-first overrides)
   ============================================================ */

/* Safety net: never allow the page itself to scroll sideways, no matter what
   causes an element to overflow its container. */
html, body{overflow-x:hidden;max-width:100%;}

@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .showcase-inner{grid-template-columns:1fr;}
  .showcase-img{order:-1;}
  .pd-inner{grid-template-columns:1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 900px){
  .nav-links{display:none;}
  .hamburger{display:block;}
  .search-box input.open{width:120px;}
  /* The top bar gets crowded on mobile (logo + search + cart + WhatsApp button +
     hamburger all competing for a narrow row) — drop the WhatsApp text button from
     here; it's still reachable from the hamburger menu and from the WhatsApp CTAs
     already present throughout each page. */
  .navbar .nav-actions > .btn-whatsapp{display:none;}
  .brand{font-size:19px;}
}

@media (max-width: 768px){
  h1{font-size:32px;}
  h2{font-size:26px;}
  .section{padding:48px 0;}
  .grid-3, .grid-2, .steps-grid{grid-template-columns:1fr;}
  .bundle-card.featured{transform:none;}
  .cart-row{grid-template-columns:60px 1fr;grid-template-areas:"img name" "img controls";row-gap:8px;}
  .summary-box{position:static;}
  .sticky-buybar{display:flex;}
  body{padding-bottom:70px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .journey-flow{flex-direction:column;}
  .journey-arrow{transform:rotate(90deg);}
}

@media (max-width: 480px){
  .container{padding:0 16px;}
  .grid-4{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .hero-cta, .final-cta-actions, .showcase-actions{flex-direction:column;}
  .hero-cta .btn, .final-cta-actions .btn, .showcase-actions .btn, .pd-actions .btn{width:100%;}
  .form-row-2{grid-template-columns:1fr;}
  .ingredient-section, .final-cta{margin:0 12px;padding:44px 18px;}
  .price{font-size:26px;}
  .navbar-inner{padding:12px 14px;gap:8px;}
  .brand{font-size:16px;gap:8px;}
  .brand img{height:34px;}
  .nav-actions{gap:10px;}
}

/* Touch target sizing */
@media (max-width: 768px){
  .btn, .nav-icon-btn, .qty-selector button, .faq-q{min-height:44px;}
}