/*
 * HEELER RV CUSTOMER EXPERIENCE ENGINE — Stage 3
 * Authoritative VSDS + PPE shared-system implementation.
 *
 * This file intentionally sits above older visual generations by using a
 * bounded storefront scope plus explicit importance where older page sheets
 * already use !important. It changes presentation only. Product facts,
 * compatibility, regional commerce, calculator logic, SEO meaning and
 * analytics semantics remain untouched.
 */

:root{
  --cx-space-1:4px;
  --cx-space-2:8px;
  --cx-space-3:12px;
  --cx-space-4:16px;
  --cx-space-5:24px;
  --cx-space-6:32px;
  --cx-space-7:48px;
  --cx-space-8:64px;

  --cx-reading-width:760px;
  --cx-content-width:1200px;
  --cx-commerce-width:1360px;

  --cx-gutter-compact:16px;
  --cx-gutter-mobile:20px;
  --cx-gutter-desktop:32px;
  --cx-gutter-wide:40px;

  --cx-body-size:16px;
  --cx-body-line:1.55;
  --cx-support-size:14px;
  --cx-support-line:1.5;
  --cx-meta-size:12px;
  --cx-meta-line:1.35;
  --cx-nav-size:14px;
  --cx-nav-line:1.2;
  --cx-action-size:14px;
  --cx-action-line:1.2;
  --cx-card-title:clamp(16px,1.25vw,18px);
  --cx-price:clamp(18px,1.55vw,22px);
  --cx-spec-label:12px;
  --cx-spec-value:clamp(14px,1.2vw,16px);

  --cx-h1:clamp(34px,3.4vw,48px);
  --cx-hero-h1:clamp(42px,4.6vw,64px);
  --cx-h2:clamp(26px,2.6vw,34px);
  --cx-h3:clamp(18px,2vw,24px);

  --cx-header-row:52px;
  --cx-nav-row:48px;
  --cx-control-min:44px;
  --cx-card-pad:16px;
  --cx-card-gap:16px;
  --cx-focus:3px solid #66dfd1;
}

/* Shared reading and control floor. */
html body.storefront,
html body.catalog-body{
  font-size:var(--cx-body-size);
  line-height:var(--cx-body-line);
}

html body.storefront :where(button,input,select,textarea),
html body.catalog-body :where(button,input,select,textarea){
  font-family:inherit;
}

html body.storefront :where(button,a,input,select,textarea):focus-visible,
html body.catalog-body :where(button,a,input,select,textarea):focus-visible{
  outline:var(--cx-focus)!important;
  outline-offset:3px!important;
}

html body.storefront :where(.primary-action,.secondary-action,.catalog-action,.buy,.hero-primary,.hero-secondary),
html body.catalog-body :where(.catalog-action,.catalog-filters button){
  min-height:var(--cx-control-min)!important;
  font-size:var(--cx-action-size)!important;
  line-height:var(--cx-action-line)!important;
}

/* Shared commerce header. One compact row, readable navigation, 44 px targets. */
html body.storefront .storefront-header .storefront-nav-row,
html body.catalog-body .storefront-header .storefront-nav-row{
  box-sizing:border-box!important;
  width:min(var(--cx-commerce-width),calc(100% - 64px))!important;
  min-height:var(--cx-header-row)!important;
  gap:12px!important;
}

html body.storefront .storefront-header .storefront-brand img,
html body.catalog-body .storefront-header .storefront-brand img{
  width:150px!important;
  height:40px!important;
  object-fit:contain!important;
}

html body.storefront .storefront-header .catalog-navigation,
html body.catalog-body .storefront-header .catalog-navigation{
  gap:4px!important;
}

html body.storefront .storefront-header .catalog-navigation>.catalog-menu>summary.catalog-primary-control,
html body.storefront .storefront-header .catalog-navigation>a.catalog-primary-control,
html body.catalog-body .storefront-header .catalog-navigation>.catalog-menu>summary.catalog-primary-control,
html body.catalog-body .storefront-header .catalog-navigation>a.catalog-primary-control{
  box-sizing:border-box!important;
  min-height:var(--cx-nav-row)!important;
  height:var(--cx-nav-row)!important;
  padding:0 14px!important;
  font-size:var(--cx-nav-size)!important;
  line-height:var(--cx-nav-line)!important;
  font-weight:760!important;
}

html body.storefront .storefront-search-link,
html body.catalog-body .storefront-search-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:var(--cx-control-min)!important;
  padding:0 10px!important;
  font-size:var(--cx-nav-size)!important;
  line-height:var(--cx-nav-line)!important;
}

html body.storefront .storefront-market select,
html body.catalog-body .storefront-market select{
  min-height:var(--cx-control-min)!important;
  font-size:14px!important;
}

/* Mega-menu remains rich but no longer becomes a second full page. */
@media(min-width:900px){
  html body.storefront .storefront-header .catalog-menu.catalog-mega-menu .catalog-mega-panel,
  html body.catalog-body .storefront-header .catalog-menu.catalog-mega-menu .catalog-mega-panel{
    width:min(var(--cx-commerce-width),calc(100vw - 32px))!important;
    min-height:0!important;
    max-height:min(72dvh,680px)!important;
  }

  html body.storefront .storefront-header .mega-category-rail,
  html body.catalog-body .storefront-header .mega-category-rail{
    min-height:60px!important;
    gap:28px!important;
    padding:10px 72px 0 28px!important;
  }

  html body.storefront .storefront-header .mega-category-trigger,
  html body.catalog-body .storefront-header .mega-category-trigger{
    min-height:48px!important;
    padding-bottom:10px!important;
  }

  html body.storefront .storefront-header .mega-category-trigger span,
  html body.catalog-body .storefront-header .mega-category-trigger span{
    font-size:14px!important;
  }

  html body.storefront .storefront-header .mega-content,
  html body.catalog-body .storefront-header .mega-content{
    min-height:0!important;
    padding:24px 28px!important;
  }

  html body.storefront .storefront-header .mega-product-card,
  html body.catalog-body .storefront-header .mega-product-card{
    min-height:0!important;
  }

  html body.storefront .storefront-header .mega-product-photo,
  html body.catalog-body .storefront-header .mega-product-photo{
    height:170px!important;
    min-height:170px!important;
    padding:14px!important;
  }

  html body.storefront .storefront-header .mega-product-photo img,
  html body.catalog-body .storefront-header .mega-product-photo img{
    height:140px!important;
  }

  html body.storefront .storefront-header .mega-product-copy h4,
  html body.storefront .storefront-header .mega-product-copy h4>a,
  html body.catalog-body .storefront-header .mega-product-copy h4,
  html body.catalog-body .storefront-header .mega-product-copy h4>a{
    font-size:16px!important;
    line-height:1.22!important;
  }

  html body.storefront .storefront-header .mega-product-copy p,
  html body.catalog-body .storefront-header .mega-product-copy p{
    min-height:0!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  html body.storefront .storefront-header .mega-product-price,
  html body.catalog-body .storefront-header .mega-product-price{
    font-size:14px!important;
  }
}

/* Catalogue and reusable product-card hierarchy. */
html body.catalog-body .catalog-content,
html body.storefront .catalog-content{
  width:min(var(--cx-content-width),calc(100% - 64px))!important;
  max-width:var(--cx-content-width)!important;
  padding:32px 0 48px!important;
}

html body.catalog-body .catalog-content>h1,
html body.storefront .catalog-content>h1{
  margin:12px 0 16px!important;
  font-size:var(--cx-h1)!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
}

html body.catalog-body .catalog-content h2,
html body.storefront .catalog-content h2{
  font-size:var(--cx-h2)!important;
  line-height:1.15!important;
}

html body.catalog-body .catalog-intro,
html body.storefront .catalog-intro{
  max-width:72ch!important;
  font-size:var(--cx-body-size)!important;
  line-height:var(--cx-body-line)!important;
}

html body.catalog-body .catalog-products,
html body.storefront .catalog-products{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;
  gap:var(--cx-card-gap)!important;
}

html body.catalog-body .catalog-product,
html body.catalog-body .catalog-tile,
html body.catalog-body .oem-equipment-card,
html body.storefront .catalog-product,
html body.storefront .catalog-tile,
html body.storefront .oem-equipment-card{
  padding:var(--cx-card-pad)!important;
}

html body.catalog-body .catalog-product h2,
html body.catalog-body .catalog-product h3,
html body.storefront .catalog-product h2,
html body.storefront .catalog-product h3{
  font-size:var(--cx-card-title)!important;
  line-height:1.22!important;
}

html body.catalog-body .portable-card-facts dt,
html body.storefront .portable-card-facts dt{
  font-size:var(--cx-spec-label)!important;
  line-height:1.3!important;
}

html body.catalog-body .portable-card-facts dd,
html body.storefront .portable-card-facts dd{
  font-size:var(--cx-spec-value)!important;
  line-height:1.3!important;
}

html body.catalog-body .catalog-product-price,
html body.catalog-body .product-price-state,
html body.storefront .catalog-product-price,
html body.storefront .product-price-state,
html body.storefront .search-product-price{
  font-size:18px!important;
  line-height:1.2!important;
}

html body.catalog-body .catalog-product .product-photo,
html body.catalog-body .catalog-product img,
html body.storefront .catalog-product .product-photo,
html body.storefront .catalog-product img{
  height:170px!important;
  object-fit:contain!important;
}

html body.catalog-body .catalog-filters,
html body.storefront .catalog-filters{
  gap:12px!important;
  padding:16px!important;
}

html body.catalog-body .catalog-filters select,
html body.catalog-body .catalog-filters input,
html body.catalog-body .catalog-filters button,
html body.storefront .catalog-filters select,
html body.storefront .catalog-filters input,
html body.storefront .catalog-filters button{
  min-height:var(--cx-control-min)!important;
  font-size:14px!important;
}

/* Search answer and result cards. Search's inline CSS precedes this sheet. */
html body.storefront main.wrap{
  width:min(var(--cx-content-width),calc(100% - 64px))!important;
}

html body.storefront main.wrap .answer{
  padding:32px 0 20px!important;
}

html body.storefront main.wrap .answer h1{
  max-width:900px!important;
  margin:8px 0 12px!important;
  font-size:var(--cx-h1)!important;
  line-height:1.04!important;
  letter-spacing:-.025em!important;
}

html body.storefront main.wrap .answer .summary{
  max-width:72ch!important;
  font-size:16px!important;
  line-height:1.55!important;
}

html body.storefront main.wrap .searchbox{
  margin-top:16px!important;
  padding:12px!important;
}

html body.storefront main.wrap .searchbox input{
  min-height:44px!important;
  padding:11px 13px!important;
  font-size:16px!important;
}

html body.storefront main.wrap .searchbox button{
  min-height:44px!important;
  font-size:14px!important;
}

html body.storefront main.wrap .section{
  margin:32px 0!important;
}

html body.storefront main.wrap .section h2,
html body.storefront main.wrap .guided h2{
  font-size:var(--cx-h2)!important;
  line-height:1.16!important;
}

html body.storefront main.wrap .product-grid{
  gap:16px!important;
}

html body.storefront main.wrap .product-card{
  grid-template-columns:minmax(160px,34%) minmax(0,1fr)!important;
}

html body.storefront main.wrap .product-card.best{
  grid-template-columns:minmax(180px,32%) minmax(0,1fr)!important;
}

html body.storefront main.wrap .result-image{
  min-height:180px!important;
  padding:16px!important;
}

html body.storefront main.wrap .result-image img{
  max-height:220px!important;
}

html body.storefront main.wrap .result-body{
  padding:16px!important;
}

html body.storefront main.wrap .result-body h3,
html body.storefront main.wrap .result-body h3 a{
  font-size:clamp(18px,2vw,22px)!important;
  line-height:1.2!important;
}

html body.storefront main.wrap .result-body p{
  font-size:14px!important;
  line-height:1.5!important;
}

html body.storefront main.wrap .quick-specs dt{
  font-size:12px!important;
  line-height:1.3!important;
}

html body.storefront main.wrap .quick-specs dd{
  font-size:14px!important;
  line-height:1.3!important;
}

html body.storefront main.wrap .primary-action,
html body.storefront main.wrap .secondary-action{
  min-height:44px!important;
  font-size:14px!important;
}

html body.storefront main.wrap .product-region-state,
html body.storefront main.wrap .offer-state{
  font-size:13px!important;
  line-height:1.4!important;
}

/* Homepage: photographic hero stays premium, but no fixed oversized mobile block. */
html body.home-modern-page.home-storefront{
  --home-content:min(var(--cx-commerce-width),calc(100% - 64px));
  --home-section-space:40px;
}

html body.home-modern-page.home-storefront .home-modern .home-shell{
  width:var(--home-content)!important;
  max-width:none!important;
}

html body.home-modern-page.home-storefront .home-modern .home-section{
  padding:40px 0!important;
}

html body.home-modern-page.home-storefront .home-modern .home-section-heading,
html body.home-modern-page.home-storefront .home-modern .home-system-head{
  gap:20px!important;
  margin-bottom:16px!important;
}

html body.home-modern-page.home-storefront .home-modern :where(.home-section-heading h2,.home-system-head h2,.home-decision-grid h2,.home-why h2){
  font-size:var(--cx-h2)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}

html body.home-modern-page.home-storefront .home-modern :where(.home-section-heading p:not(.home-kicker),.home-system-head p:not(.home-kicker)){
  max-width:72ch!important;
  font-size:14px!important;
  line-height:1.5!important;
}

html body.home-modern-page.home-storefront .home-modern .home-modern-hero,
html body.home-modern-page.home-storefront .home-modern .home-hero-content{
  min-height:clamp(360px,40vh,420px)!important;
}

html body.home-modern-page.home-storefront .home-modern .home-modern-hero h1{
  max-width:650px!important;
  font-size:var(--cx-hero-h1)!important;
  line-height:.97!important;
  letter-spacing:-.045em!important;
}

html body.home-modern-page.home-storefront .home-modern .home-hero-lead{
  max-width:58ch!important;
  font-size:16px!important;
  line-height:1.45!important;
}

html body.home-modern-page.home-storefront .home-modern .home-modern-hero .home-path{
  min-height:48px!important;
  padding:9px 14px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-modern-hero .home-path b{
  font-size:14px!important;
  line-height:1.2!important;
}

html body.home-modern-page.home-storefront .home-modern .home-featured{
  padding:32px 0 36px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-grid{
  gap:16px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-card{
  min-height:0!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-media{
  height:180px!important;
  min-height:180px!important;
  padding:14px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-media img{
  height:150px!important;
  max-height:150px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-body{
  padding:16px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-body h3,
html body.home-modern-page.home-storefront .home-modern .home-product-body h3 a{
  font-size:var(--cx-card-title)!important;
  line-height:1.22!important;
}

html body.home-modern-page.home-storefront .home-modern .portable-card-facts dt{
  font-size:12px!important;
}

html body.home-modern-page.home-storefront .home-modern .portable-card-facts dd{
  font-size:14px!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-price{
  margin:10px 0 12px!important;
  font-size:18px!important;
  line-height:1.2!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-body>a{
  min-height:44px!important;
  font-size:14px!important;
  line-height:1.2!important;
}

html body.home-modern-page.home-storefront .home-modern .home-product-fit{
  display:block!important;
  font-size:13px!important;
  line-height:1.45!important;
}

html body.home-modern-page.home-storefront .home-modern .home-system,
html body.home-modern-page.home-storefront .home-modern .home-decision-bands{
  padding:40px 0!important;
}

html body.home-modern-page.home-storefront .home-modern .home-brands{
  padding:32px 0!important;
}

html body.home-modern-page.home-storefront .home-modern .home-guides{
  padding:40px 0!important;
}

/* Product detail: first screen carries identity, facts, fit, price/region and action. */
html body.portable-product main.portable-page{
  max-width:var(--cx-commerce-width)!important;
  padding-inline:32px!important;
}

html body.portable-product main.portable-page .portable-hero{
  gap:28px!important;
  padding-top:8px!important;
  padding-bottom:24px!important;
}

html body.portable-product main.portable-page .portable-hero h1{
  margin:10px 0 12px!important;
  font-size:var(--cx-h1)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
}

html body.portable-product main.portable-page .portable-intro{
  max-width:72ch!important;
  font-size:16px!important;
  line-height:1.55!important;
}

html body.portable-product main.portable-page .portable-gallery-main{
  min-height:320px!important;
  height:clamp(320px,38vw,520px)!important;
  max-height:520px!important;
}

html body.portable-product main.portable-page .portable-hero-facts{
  gap:8px!important;
  margin:12px 0!important;
}

html body.portable-product main.portable-page .portable-hero-facts>div{
  padding:10px!important;
}

html body.portable-product main.portable-page .portable-hero-facts dt{
  font-size:12px!important;
  line-height:1.3!important;
}

html body.portable-product main.portable-page .portable-hero-facts dd{
  font-size:16px!important;
  line-height:1.3!important;
}

html body.portable-product main.portable-page .portable-hero-price{
  margin:12px 0 8px!important;
  padding:4px 0 0!important;
  font-size:22px!important;
  line-height:1.2!important;
}

html body.portable-product main.portable-page .portable-actions{
  gap:8px!important;
  margin:14px 0 8px!important;
}

html body.portable-product main.portable-page .portable-actions>*{
  min-height:48px!important;
  padding:8px 12px!important;
  font-size:14px!important;
  line-height:1.2!important;
}

html body.portable-product main.portable-page .portable-section{
  margin-top:48px!important;
}

html body.portable-product main.portable-page .portable-section h2{
  font-size:var(--cx-h2)!important;
  line-height:1.15!important;
}

html body.portable-product main.portable-page .portable-related-card{
  flex-basis:clamp(240px,26vw,300px)!important;
}

html body.portable-product main.portable-page .portable-related-photo{
  height:180px!important;
}

html body.portable-product main.portable-page .portable-related-photo img{
  height:155px!important;
}

html body.portable-product main.portable-page .portable-spec dt{
  font-size:12px!important;
  line-height:1.3!important;
}

html body.portable-product main.portable-page .portable-spec dd{
  font-size:14px!important;
  line-height:1.45!important;
}

/* Stage 5B: preserve the 44px interaction floor at the tablet boundary. */
@media(max-width:768px) and (min-width:640px){
  html body.storefront .storefront-header .storefront-search-link,
  html body.catalog-body .storefront-header .storefront-search-link{
    min-width:44px!important;
    min-height:44px!important;
  }
}

/* Stage 5B: keep mobile Search and Region as independent, non-overlapping targets. */
@media(max-width:639px){
  html body.storefront .storefront-header .storefront-nav-row,
  html body.catalog-body .storefront-header .storefront-nav-row{
    grid-template-columns:118px minmax(0,1fr) 44px 108px!important;
  }

  html body.storefront .storefront-header .storefront-search-link,
  html body.catalog-body .storefront-header .storefront-search-link{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    position:relative!important;
    z-index:1!important;
  }

  html body.storefront .storefront-header .storefront-search-label,
  html body.catalog-body .storefront-header .storefront-search-label{
    display:none!important;
  }

  html body.storefront .storefront-header .storefront-market,
  html body.catalog-body .storefront-header .storefront-market{
    grid-column:4!important;
    grid-row:1!important;
    justify-self:end!important;
    width:108px!important;
    max-width:108px!important;
    min-width:108px!important;
    margin:0!important;
    position:relative!important;
    z-index:1!important;
  }

  html body.storefront .storefront-header .storefront-market label,
  html body.catalog-body .storefront-header .storefront-market label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  html body.storefront .storefront-header .storefront-market select,
  html body.catalog-body .storefront-header .storefront-market select{
    box-sizing:border-box!important;
    width:108px!important;
    max-width:108px!important;
    min-width:108px!important;
    min-height:44px!important;
  }
}

/* Canonical compact breakpoint: 0–639 px. */
@media(max-width:639px){
  :root{
    --cx-h1:clamp(30px,8vw,40px);
    --cx-hero-h1:clamp(36px,10vw,48px);
    --cx-h2:clamp(24px,7vw,30px);
    --cx-h3:clamp(18px,5.5vw,22px);
  }

  html body.storefront .storefront-header .storefront-nav-row,
  html body.catalog-body .storefront-header .storefront-nav-row{
    width:calc(100% - 32px)!important;
    min-height:auto!important;
    gap:4px!important;
  }

  html body.storefront .storefront-header .storefront-brand img,
  html body.catalog-body .storefront-header .storefront-brand img{
    width:118px!important;
    height:34px!important;
  }

  html body.storefront .storefront-header .catalog-navigation,
  html body.catalog-body .storefront-header .catalog-navigation{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
  }

  html body.storefront .storefront-header .catalog-navigation>.catalog-menu>summary.catalog-primary-control,
  html body.storefront .storefront-header .catalog-navigation>a.catalog-primary-control,
  html body.catalog-body .storefront-header .catalog-navigation>.catalog-menu>summary.catalog-primary-control,
  html body.catalog-body .storefront-header .catalog-navigation>a.catalog-primary-control{
    min-height:44px!important;
    height:auto!important;
    padding:7px 6px!important;
    font-size:13px!important;
    line-height:1.15!important;
  }

  html body.storefront .storefront-header .storefront-market select,
  html body.catalog-body .storefront-header .storefront-market select{
    font-size:13px!important;
  }

  html body.catalog-body .catalog-content,
  html body.storefront .catalog-content,
  html body.storefront main.wrap{
    width:calc(100% - 32px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  html body.catalog-body .catalog-filters select,
  html body.catalog-body .catalog-filters input,
  html body.storefront .catalog-filters select,
  html body.storefront .catalog-filters input,
  html body.storefront main.wrap .searchbox input{
    font-size:16px!important;
  }

  html body.storefront main.wrap .product-card,
  html body.storefront main.wrap .product-card.best{
    grid-template-columns:1fr!important;
  }

  html body.storefront main.wrap .result-image{
    min-height:160px!important;
    max-height:200px!important;
  }

  html body.storefront main.wrap .result-body{
    padding:14px!important;
  }

  html body.storefront main.wrap .guided{
    padding:16px!important;
  }

  html body.home-modern-page.home-storefront{
    --home-content:calc(100% - 32px);
    --home-section-space:32px;
  }

  html body.home-modern-page.home-storefront .home-modern .home-section{
    padding:32px 0!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-modern-hero,
  html body.home-modern-page.home-storefront .home-modern .home-hero-content{
    min-height:auto!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-hero-content{
    padding-top:28px!important;
    padding-bottom:32px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-modern-hero h1{
    max-width:520px!important;
    font-size:var(--cx-hero-h1)!important;
    letter-spacing:-.035em!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-modern-hero .home-path-list{
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:8px!important;
    margin-top:14px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-modern-hero .home-path{
    min-height:48px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-featured{
    padding:28px 0 32px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-product-grid{
    grid-auto-columns:min(84vw,calc(100vw - 32px))!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-product-card{
    min-height:0!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-product-media{
    height:180px!important;
    min-height:180px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-product-media img{
    height:150px!important;
    max-height:150px!important;
  }

  html body.home-modern-page.home-storefront .home-modern .home-system,
  html body.home-modern-page.home-storefront .home-modern .home-decision-bands,
  html body.home-modern-page.home-storefront .home-modern .home-guides{
    padding:32px 0!important;
  }

  html body.portable-product main.portable-page{
    padding-inline:16px!important;
  }

  html body.portable-product main.portable-page .portable-hero{
    gap:20px!important;
  }

  html body.portable-product main.portable-page .portable-hero h1{
    font-size:var(--cx-h1)!important;
  }

  html body.portable-product main.portable-page .portable-gallery-main{
    min-height:260px!important;
    height:clamp(260px,76vw,360px)!important;
    max-height:360px!important;
  }

  html body.portable-product main.portable-page .portable-actions{
    grid-template-columns:1fr!important;
  }

  html body.portable-product main.portable-page .portable-actions>*{
    min-height:48px!important;
  }

  html body.portable-product main.portable-page .portable-section{
    margin-top:32px!important;
  }

  html body.portable-product main.portable-page .portable-related-photo{
    height:170px!important;
  }

  html body.portable-product main.portable-page .portable-related-photo img{
    height:145px!important;
  }
}

/* Canonical intermediate breakpoint: 640–899 px. */
@media(min-width:640px) and (max-width:899px){
  html body.storefront .storefront-header .storefront-nav-row,
  html body.catalog-body .storefront-header .storefront-nav-row,
  html body.catalog-body .catalog-content,
  html body.storefront .catalog-content,
  html body.storefront main.wrap{
    width:calc(100% - 48px)!important;
  }

  html body.home-modern-page.home-storefront{
    --home-content:calc(100% - 48px);
  }

  html body.home-modern-page.home-storefront .home-modern .home-modern-hero,
  html body.home-modern-page.home-storefront .home-modern .home-hero-content{
    min-height:380px!important;
  }
}

/* Zoom and motion resilience. */
@media(prefers-reduced-motion:reduce){
  html body.storefront *,
  html body.catalog-body *{
    scroll-behavior:auto!important;
  }
}


/* Stage 4 — verified responsive QA corrections.
 * These are bounded corrections for defects observed in the Stage 4 viewport matrix.
 * They do not alter catalogue facts, compatibility, commerce routing, calculator math,
 * SEO meaning, analytics semantics or production state.
 */

/* Stage-2 content-heading scale was still bypassed on five customer journeys. */
html body.storefront main.wrap>.hero h1,
html body.storefront.guided-power-finder .guided-hero h1,
html body.storefront .battery-finder>h1,
html body.storefront.product-compare-page-shell .product-compare-intro h1,
html body.storefront.calculator-storefront .calc-workspace-heading h1{
  font-size:var(--cx-h1)!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
}

/* Decision-support disclosures must not fall into microtype. */
html body.storefront .shop-card .body>small{
  font-size:12px!important;
  line-height:1.45!important;
}
html body.storefront .shop-card .kicker,
html body.storefront main.wrap .eyebrow{
  font-size:11px!important;
  line-height:1.4!important;
}
html body.portable-product main.portable-page .portable-related-card small,
html body.portable-product main.portable-page .portable-related-card .portable-evidence{
  font-size:12px!important;
  line-height:1.4!important;
}

/* Compact/mobile interaction floor. The original Stage 3 visual correction left
 * several native controls at 27–42 px and the region selector truncated its
 * selected market. */
@media(max-width:639px){
  html body.storefront .storefront-header .storefront-market,
  html body.catalog-body .storefront-header .storefront-market{
    min-width:108px!important;
    max-width:108px!important;
  }

  html body.storefront .storefront-header .storefront-market select,
  html body.catalog-body .storefront-header .storefront-market select{
    box-sizing:border-box!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    min-height:44px!important;
    padding-left:8px!important;
    padding-right:26px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  html body.storefront main :where(
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    summary
  ),
  html body.catalog-body main :where(
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    summary
  ){
    box-sizing:border-box!important;
    min-height:44px!important;
  }

  html body.storefront main :where(select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])),
  html body.catalog-body main :where(select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])){
    font-size:16px!important;
  }

  html body.storefront main.wrap>.hero :where(select,button){
    min-height:44px!important;
    font-size:16px!important;
  }
}


/* Intermediate touch/reflow correction found at 768 px: preserve full market
 * identity and 44 px controls without applying compact-phone typography. */
@media(min-width:640px) and (max-width:899px){
  html body.storefront .storefront-header .storefront-market,
  html body.catalog-body .storefront-header .storefront-market{
    min-width:108px!important;
    max-width:108px!important;
  }
  html body.storefront .storefront-header .storefront-market select,
  html body.catalog-body .storefront-header .storefront-market select{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    min-height:44px!important;
    padding-left:8px!important;
    padding-right:26px!important;
    font-size:14px!important;
  }
  html body.storefront main :where(
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    summary
  ),
  html body.catalog-body main :where(
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    summary
  ){
    box-sizing:border-box!important;
    min-height:44px!important;
  }
  html body.storefront main :where(
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])
  ),
  html body.catalog-body main :where(
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])
  ){
    font-size:14px!important;
  }
}

html body.storefront main.wrap>.hero form.disclosure :where(select,button){
  min-height:44px!important;
  font-size:14px!important;
}
@media(max-width:639px){
  html body.storefront main.wrap>.hero form.disclosure :where(select,button){
    font-size:16px!important;
  }
}


/* Stage 4 tablet visual QA: the non-featured guide cards at the 768-class
 * breakpoint retained a legacy 320 px floor while their verified text needed
 * ~359 px. Preserve the card treatment; give the content enough vertical room. */
@media(min-width:640px) and (max-width:899px){
  html body.home-modern-page .home-guide-card:not(:first-child){
    min-height:360px!important;
  }
}