/* Shared responsive refinements. Keep the approved A1 design and native scrolling. */
:root{--responsive-version:20260929}
html:has(.a1){scrollbar-gutter:stable}
body.a1 .hero-image{width:100%;min-width:0}
body.a1 .container{min-width:0}
body.a1 :is(.about-layout,.product-grid,.case-grid,.news-grid,.footer-main)>*{min-width:0}
body.a1 .hero-slide img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:1921px){
  html:has(link[href*="/assets/css/common.css"]){font-size:clamp(100px,5.20833333vw,200px)!important}
  html:has(body.a1) body.a1 .hero-image{width:100%;height:auto;aspect-ratio:12/5;max-height:none;min-height:0}
  html:has(link[href*="/assets/css/common.css"]) :is(.common_page_center,.common_crumb_center,.header_center){max-width:calc(100% - 1.2rem)}
}
@media(min-width:768px) and (max-width:1920px){
  body.a1 .hero-image{width:100%;height:auto;aspect-ratio:12/5;min-height:0;max-height:none}
}
@media(max-width:1024px){
  html:has(link[href*="/assets/css/aboutus.css"]) .company4 .his2_swiper{width:calc(100% - 40px)}
  html:has(link[href*="/assets/css/common.css"]) .common_crumb{height:auto;min-height:.8rem}
  html:has(link[href*="/assets/css/common.css"]) .common_crumb_center{max-width:100%;padding-inline:16px}
  html:has(link[href*="/assets/css/common.css"]) .crumb_nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
  html:has(link[href*="/assets/css/common.css"]) .crumb_nav .nav{white-space:normal;margin-inline:0;line-height:1.7;padding-block:12px}
  html:has(link[href*="/assets/css/common.css"]) :is(.common-right,.common-left){min-width:0}
  html:has(link[href*="/assets/css/common.css"]) .detail_n .content{overflow-wrap:anywhere;font-size:15px;line-height:1.9;overflow-x:auto}
  html:has(link[href*="/assets/css/common.css"]) .detail_n .content :is(p,span){font-size:inherit;line-height:inherit}
  html:has(link[href*="/assets/css/common.css"]) .detail_n .content img{max-width:100%;height:auto}
  html:has(link[href*="/assets/css/common.css"]) .side-nav-list .nav-item a{font-size:15px;line-height:1.7;min-height:40px}
  html:has(link[href*="/assets/css/common.css"]) .footer .infos .txt{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:600px){
  html body :is(#water-product,#pe-product) .legacy-section-title{max-width:100%}
  html body :is(#water-product,#pe-product) .legacy-section-title>span{font-size:clamp(23px,7.8vw,40px);white-space:normal}
  body.a1 .hero-image{height:clamp(290px,98vw,490px);min-height:0;max-height:none;aspect-ratio:auto}
  body.a1 .hero-caption{align-items:center;gap:12px;min-height:54px}
  body.a1 .hero-caption>span{min-width:0;line-height:1.6}
  body.a1 .hero-caption>div{flex-shrink:0}
  body.a1 .hero-caption>span i{display:none}
  body.a1 :is(.product-info p,.case-copy p,.section-desc,.footer-contact p){font-size:12px}
  body.a1 .hero-arrow{min-width:36px;min-height:44px}
  body.a1 .hero-pause{min-height:44px}
  html:has(link[href*="/assets/css/news.css"]) .news2{gap:22px;padding:0 20px}
  html:has(link[href*="/assets/css/news.css"]) .news2 .item{width:100%;margin:0}
  html:has(link[href*="/assets/css/news.css"]) .news2 .item .pic{height:auto;aspect-ratio:16/10;object-fit:cover}
  html:has(link[href*="/assets/css/news.css"]) .news2 .item .txt{font-size:15px;line-height:1.8;padding:16px}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .texts,html:has(link[href*="/assets/css/aboutus.css"]) .company1 .texts p{font-size:15px;line-height:1.9}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .pictures{display:grid;grid-template-columns:1fr;gap:14px}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .pictures .pic{width:100%;height:auto;aspect-ratio:3/2}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .data .item{width:100%}
  html:has(link[href*="/assets/css/aboutus.css"]) .company1 .data .num{justify-content:center}
  html:has(link[href*="/assets/css/aboutus.css"]) :is(.company2 .ideas .txt,.company3 .history .texts,.company3 .history .texts p){font-size:14px;line-height:1.8}
  html:has(link[href*="/assets/css/aboutus.css"]) .company3 .history .swiper-slide{flex-direction:column;align-items:stretch;gap:20px}
  html:has(link[href*="/assets/css/aboutus.css"]) .company3 .history :is(.his_l,.his_r){width:100%;max-width:none;margin:0}
  html:has(link[href*="/assets/css/aboutus.css"]) .company3 .history .his_r{height:auto;aspect-ratio:2}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}