/* ChargeUp mobile display refinements, Oct 2026. Desktop styling is unchanged. */
.mobile-hero{display:none}
/* Keep desktop product/gallery image layout identical when using mobile art direction. */
.card-image picture,.gallery-photo picture{display:block;width:100%;height:100%}
@media (max-width: 820px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:clip}
  .wrap,.hero-grid,.hero-grid>*,.cards,.card,.product-showcase-grid,.product-showcase-card{min-width:0}
  img{max-width:100%;image-orientation:from-image}
  .hero-photo{width:100%;max-width:660px;margin-inline:auto}
  .hero-photo img{display:block;width:100%;height:auto!important;max-height:470px;object-fit:contain!important;object-position:center;background:#fff}
  .product-detail-hero img{width:100%;height:auto!important;aspect-ratio:1/1;max-height:430px;padding:12px!important;object-fit:contain!important}
  .product-showcase-grid{grid-template-columns:1fr;gap:16px}
  .product-showcase-card{overflow:hidden}
  .product-showcase-card img{display:block;width:100%;height:auto;max-height:390px;aspect-ratio:1/1;object-fit:contain!important;object-position:center;padding:12px}
  .product-showcase-card.photo img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain!important;padding:0}
  .product-showcase-body{padding:16px}
  .section{padding:44px 0}
  .hero-grid{gap:24px}
  .hero{padding:43px 0 36px}
  .lead{font-size:clamp(16px,4vw,19px);line-height:1.5}
  .actions{gap:10px}
  .actions .btn{max-width:100%;min-height:44px;text-align:center}
  .card img{max-width:100%;height:280px;object-fit:contain!important}
  .cards{gap:14px}
  .nav{gap:10px;align-items:center}
  .brand{min-width:0}
  .brand img{width:clamp(130px,38vw,185px);height:auto;max-height:56px}
  .navlinks{margin-left:0}
  .footerlinks{row-gap:12px}
  .media-grid{grid-template-columns:minmax(0,1fr)!important}
  .media-grid .media-card{min-width:0}
  .media-grid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
}
@media (max-width: 920px){
  /* The desktop rasterized hero is intentionally left intact for desktop only. */
  .hero.hero-exact{display:block;height:auto;background:linear-gradient(145deg,#fff 0%,#f7faf5 100%)}
  .hero-exact .hero-mockup{display:none!important}
  .hero-exact>.sr-only{display:none!important}
  .hero-exact .mobile-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:31px 18px 28px;max-width:670px;margin-inline:auto}
  .mobile-hero .eyebrow{font-size:11px;letter-spacing:2.4px;margin-bottom:9px}
  .mobile-hero h1{font-size:clamp(32px,8.6vw,44px);line-height:1.06;letter-spacing:-1.5px;margin:0 0 12px;max-width:550px}
  .mobile-hero p{font-size:15px;line-height:1.5;color:#4f5f52;margin:0 0 14px;max-width:540px}
  .mobile-hero .mobile-hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
  .mobile-hero .btn{font-size:13px;min-height:45px;height:auto;padding:10px 17px;text-align:center}
  .mobile-hero .mobile-hero-badges{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:750;color:#4e5f49;margin-top:15px}
  .mobile-hero .mobile-hero-badges span::before{content:'✓';color:#377d04;font-weight:900;margin-right:5px}
  .mobile-hero .mobile-hero-photo{background:linear-gradient(135deg,#f1f6ec,#e3ecda);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:100%;max-height:350px}
  .mobile-hero .mobile-hero-photo img{width:auto;height:100%;max-height:320px;max-width:100%;display:block;object-fit:contain}
  .card-image{height:clamp(245px,76vw,355px)!important;padding:10px!important}
  .card-image picture,.gallery-photo picture{display:block;width:100%;height:100%}
  .card-image img{max-width:100%;width:100%;height:100%!important;object-fit:contain!important;object-position:center!important}
  .gallery-photo{height:auto!important;min-height:215px;aspect-ratio:4/3;padding:8px}
  .gallery-photo img{width:100%;height:100%!important;object-fit:contain!important;object-position:center}
  .gallery-grid{gap:14px}
  .gallery-card{padding:12px}
  .gallery-head h2{font-size:clamp(26px,7vw,34px)!important}
  .quote-shell{grid-template-columns:minmax(0,1fr)}
  .form-card{min-width:0}
  .form-card input,.form-card select,.form-card textarea{max-width:100%;font-size:16px}
  .hero-photo img{max-height:410px}
  h1{overflow-wrap:break-word}
}
@media (min-width:600px) and (max-width:920px){
 .hero-exact .mobile-hero{grid-template-columns:1.12fr .88fr;gap:20px;max-width:920px;align-items:center}
 .mobile-hero .mobile-hero-photo{max-height:390px}
}
@media (max-width:540px){
  .header .nav-phone{display:none}
  .header .nav{align-items:center;gap:6px;flex-wrap:wrap}
  .header .quote-pill{margin-left:auto;font-size:12px;padding:0 12px;min-height:42px}
  .hero-exact .mobile-hero{padding:27px 15px 24px}
  .nav .brand img{width:clamp(138px,39vw,170px)}
  .hero-photo img{max-height:370px}
  .product-detail-hero img{max-height:360px}
  .product-showcase-card img{max-height:345px}
  .section{padding:36px 0}
  .card img{height:260px}
  .gallery-photo{min-height:195px}
  .actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .product-showcase-card img{transition:none}
}