/* ===============================================================
   BREWOIL Mobile Enhancement Layer
   Loaded site-wide. Activates only on screens < 900px.
   Fixes: touch targets, tap-area conflicts, font sizes,
          horizontal-overflow safeguards, sticky WhatsApp CTA.
   =============================================================== */

/* Universal safeguards (apply on all screens) */
html,body{max-width:100vw;overflow-x:hidden;-webkit-text-size-adjust:100%}
img,video,iframe{max-width:100%;height:auto}
input,textarea,select{font-size:16px !important;} /* prevents iOS auto-zoom */

/* Mobile-only refinements */
@media (max-width: 900px){

 /* Touch target enforcement on every clickable */
 a, button, [onclick], input[type=button], input[type=submit], .btn, .nav-link, nav a, .header a{
   min-height:44px;
   display:inline-flex;
   align-items:center;
   padding-top:8px;
   padding-bottom:8px;
 }

 /* Body font baseline */
 body{font-size:16px;line-height:1.55}
 p, li{font-size:15px;line-height:1.6}

 /* Headings scale */
 h1{font-size:clamp(28px,7vw,40px) !important;line-height:1.15}
 h2{font-size:clamp(24px,5.5vw,32px) !important;line-height:1.2}
 h3{font-size:clamp(18px,4.5vw,22px) !important}

 /* Header / Nav patterns */
 header, .header, .top-bar, .topbar, .site-header{
   padding-left:14px !important;
   padding-right:14px !important;
   flex-wrap:wrap;
 }

 /* Container padding */
 .container, .wrap, .wrapper, main, section{
   padding-left:14px;
   padding-right:14px;
 }
 .container .container, .wrap .wrap{padding-left:0;padding-right:0}

 /* Grids collapse to 1-2 cols on mobile */
 .grid, .product-grid, .card-grid, .row{
   grid-template-columns:1fr !important;
   gap:14px !important;
 }
 .grid-2{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}

 /* Hide oversized desktop hero text overflows */
 .hero h1, .hero-title{word-wrap:break-word;hyphens:auto}

 /* Tap-friendly form inputs */
 input, textarea, select{
   min-height:44px;
   padding:12px 14px;
   border-radius:10px;
 }

 /* Card image sizing */
 .product-card img, .card img, .pdp-image{width:100%;height:auto}

 /* Tables become horizontally scrollable */
 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

 /* Whitespace cleanup */
 section{padding-top:32px;padding-bottom:32px}

 /* Reduce sticky CTA bar conflict */
 body{padding-bottom:72px}

 /* Hide hover-only elements (no hover on mobile) */
 .desktop-only, .show-desktop{display:none !important}
}

/* Global sticky WhatsApp button (every page, mobile + desktop) */
.bx-whatsapp-fab{
  position:fixed;
  bottom:18px;
  right:18px;
  z-index:9990;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
  text-decoration:none;
  transition:transform .15s ease;
}
.bx-whatsapp-fab:hover, .bx-whatsapp-fab:focus{transform:scale(1.08)}
.bx-whatsapp-fab svg{width:30px;height:30px;fill:#fff}

/* Smaller on tablet+ where right margin space matters */
@media (min-width: 900px){
  .bx-whatsapp-fab{bottom:24px;right:24px}
}