/* =========================================================
   MOBILE ENHANCEMENT — shenghechemical.com (2026-10-22)
   Overrides the minified theme CSS for phone layouts:
   swipeable nav strip, single-column grids, thumb targets.
   ========================================================= */
html{overflow-x:clip}
body{overflow-x:clip}
img,svg,video{max-width:100%;height:auto}
:root{scroll-padding-top:72px}
a,button,input,select,textarea{font-family:inherit}
/* ---- NAV: brand+search on top row, links become a swipeable strip ---- */
@media (max-width:768px){
  .sh-nav{flex-wrap:wrap!important;padding:10px 14px;border-radius:0}
  .sh-nav .brand{flex:1;font-size:16px}
  .sh-nav .nav-right{order:2}
  .sh-nav .links{order:3;flex-basis:100%;display:flex!important;gap:20px;flex-wrap:nowrap!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:8px -14px 0;padding:9px 14px;border-top:1px solid rgba(255,255,255,.18)}
  .sh-nav .links::-webkit-scrollbar{display:none}
  .sh-nav .links a{font-size:14px;white-space:nowrap}
  .nav-search input{width:130px}
}
/* ---- Single column on phones ---- */
@media (max-width:640px){
  .sh-prod-grid{grid-template-columns:1fr!important;gap:14px}
  .wp-block-columns{flex-direction:column!important;gap:22px!important}
  .wp-block-columns>.wp-block-column{flex-basis:100%!important;width:100%!important}
  .wp-block-group-is-layout-constrained,.wp-block-group-is-layout-flow{
    padding-left:16px!important;padding-right:16px!important}
  .sh-home .hero{padding:34px 16px!important}
  .sh-prod-card{font-size:15px}
  .sh-prod-card,.wp-block-button__link{min-height:44px}
}
/* ---- Heading scale on small phones ---- */
@media (max-width:560px){
  .sh-home .hero h1{font-size:30px!important;line-height:1.15}
  .sh-home .hero .sub{font-size:15px!important;line-height:1.6}
  h1,h2{word-break:break-word}
}