/* Final production hardening: small-screen ergonomics and resilient content wrapping. */
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
button,a,input,select,textarea{touch-action:manipulation}
.site-nav a,.button,.filter,.quantity-control button,.remove-item,.clear-cart{min-height:44px}
.site-nav>a:not(.button){display:inline-flex;align-items:center}
.product-card,.usage-card,.benefit-card{content-visibility:auto;contain-intrinsic-size:1px 440px}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{font-size:16px}
.footer-contact-link{overflow-wrap:anywhere}
@media(max-width:760px){
  .product-card,.usage-card,.benefit-card{content-visibility:visible}
  .site-nav{max-height:calc(100svh - 76px);overflow-y:auto}
  .contact-hero-layout{width:100%}
  .contact-pills{gap:7px}
  .contact-pills span{font-size:.64rem}
  .form-layout{min-width:0}
  .enquiry-form{width:100%;min-width:0}
  .field,.field input,.field select,.field textarea{min-width:0}
  .cart-line{grid-template-columns:minmax(0,1fr) auto auto}
  .cart-line strong{overflow-wrap:anywhere}
}
@media(max-width:390px){
  .shell,.nav-shell{width:calc(100% - 24px)}
  .hero-content{padding-top:84px}
  .hero-content>p:not(.eyebrow),.contact-hero p{font-size:1rem}
  h1{font-size:clamp(3.15rem,17vw,3.8rem)}
  h2{font-size:clamp(2.25rem,13vw,3rem)}
  .section{padding:64px 0}
  .product-body{padding:20px}
  .enquiry-form{padding:20px 14px}
  .basket-panel{padding:18px 14px}
  .cart-line{gap:7px}
  .quantity-control button{width:32px}
  .contact-pills span:last-child{display:none}
}