:root {
  --brand-hvac-sky-color: #9ACDFF;
  --brand-hvac-mid-color: #669ACD;
  --brand-hvac-primary-color: #3366CD;   /* cobalt — primary CTA/accent */
  --brand-hvac-shadow-color: #254E9C;    /* darkest gradient stop / hover-active */
  --brand-hvac-cobalt-color: #4066B0;    /* distinct from --brand-hvac-primary-color — do not merge */
  --brand-hvac-gradient-light: #81D2E8;  /* distinct from --brand-hvac-sky-color — do not merge */
  --brand-hvac-cta-gradient: linear-gradient(135deg, var(--brand-hvac-gradient-light), var(--brand-hvac-cobalt-color));
  --brand-hvac-nav-text-color: #7C7C7C;  /* Products/Brands nav item text */
  --brand-hvac-surface-grey: #FBF8F8;    /* site-wide neutral surface */

  --brand-hvac-text-dark: #1B2B4B;       /* headings, "Featured Brands" label */
  --brand-hvac-text-body: #333333;
  --brand-hvac-hero-heading-color: #D2F5FF;  /* hero H1 */
  --white-hvac-color: #FFFFFF;
  --black-hvac-color: #000000;

  --body-hvac-font: "Poppins", sans-serif;
  --heading-hvac-font: "Poppins", sans-serif;

  /* Single source for the hero/Featured-Brands shared left inset — both .hero-content's padding
     and .hvac-featured-brands-inner's padding-left read this, so the two can't drift out of
     alignment by having their own copies of the same number edited independently. */
  --hvac-content-inset: 26px;
}

/* Base container */
.hvac-header#store-banner {
  font-family: var(--body-hvac-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--brand-hvac-text-body);
}

.hvac-header a {
  font-family: var(--body-hvac-font);
  font-weight: 400;
  color: var(--brand-hvac-text-dark);
  text-decoration: none;
}

.hvac-header a:hover,
.hvac-header a:focus {
  color: var(--brand-hvac-primary-color);
  outline: none;
}

/* Suppresses the browser's default focus outline on click/tap across every link in this SWS
   (desktop header + mobile header/nav — both trees, not just one), then restores a visible
   indicator only for keyboard focus via :focus-visible. Per the accessibility gap this Skill
   already flags (G-11): removing a focus outline without a replacement is not acceptable, even
   though the desktop rule above previously did exactly that. Color differs by background —
   cobalt reads on the header's white background, white is what's visible against the mobile
   nav's gradient. */
.hvac-header a:focus-visible {
  outline: 2px solid var(--brand-hvac-cobalt-color);
  outline-offset: 2px;
}

.hvac-header-nav a,
.hvac-header-nav .nav-home-icon {
  outline: none;
}

.hvac-header-nav a:focus-visible,
.hvac-header-nav .nav-home-icon:focus-visible {
  outline: 2px solid var(--white-hvac-color);
  outline-offset: 2px;
}

/**************************************     HEADER     ************************************************/
.hvac-header {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 50%;
  box-sizing: border-box;
  padding: 16px 0;
  background-color: var(--white-hvac-color);
  border-bottom: 6px solid var(--brand-hvac-cobalt-color);
  outline: none;
}

.hvac-header > .row-fluid {
  max-width: 1170px;  /* matches the platform's own Bootstrap .container width at ≥1200px */
  width: 100%;
  margin: 0 auto;
  padding: 0;   /* flush with the ITM platform logo's left edge */
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.hvac-header .span3.logo-hvac-sws {
  padding-left: 20px;   /* matches the ITM platform logo's own inset (.span2.logo { padding-left: 20px }), measured on staging */
}

.hvac-header .span3.logo-hvac-sws img.brandlogo {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0;   /* overrides platform default `img.brandlogo { margin: auto }`, which centers the logo in its column */
}

.hvac-header .span9.subheading-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: -7px;   /* recentres the nav on the "HVAC" wordmark itself, not on the logo image's
                          full box — that box's geometric centre sits lower, pulled down by the thin
                          "Tools & Instruments" band beneath it. Not `transform`: any transform value
                          other than none forces this element into its own stacking context, which
                          traps the Products/Brands dropdown menus (rendered inside it) behind any
                          later full-bleed section (e.g. the hero) that shares the page's root
                          stacking context — confirmed live, not theoretical. margin achieves the
                          same visual shift without creating that context. */
}

.hvac-header .row-fluid .navbar.navbar-inner-hvac-subsite {
  width: 100%;
}

.hvac-header .row-fluid .navbar .nav-collapse.sws.collapse {
  margin-top: 0 !important;
  width: 100%;
}

/**************************************     NAV     ************************************************/

.navbar .nav.navbar-hvac-subsite {
  margin-right: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}

.navbar .nav.navbar-hvac-subsite > li {
  flex: 0 0 auto;
}

/* Gradient-fill icon, not currentColor — hover uses opacity/scale, not a color swap. */
.navbar .nav.navbar-hvac-subsite .nav-home-icon-svg {
  width: 21px;
  height: 21px;
  display: block;
  --hvac-home-icon-grad-a: #81D2E8;
  --hvac-home-icon-grad-b: #4066B0;
  transition: transform 0.2s ease;
}

/* Same treatment as the search button: gradient reversed (swap which custom property feeds
   which end of the SVG's linearGradient stops) + a subtle scale — transform, not width/height,
   so it never nudges the neighbouring nav items. */
.navbar .nav.navbar-hvac-subsite .nav-home-icon-svg:hover,
.navbar .nav.navbar-hvac-subsite .nav-home-icon-svg:active {
  --hvac-home-icon-grad-a: #4066B0;
  --hvac-home-icon-grad-b: #81D2E8;
  transform: scale(1.08);
}

.navbar .nav.navbar-hvac-subsite a.nav-home-icon {
  padding: 0.75em 0.5em;
  display: block;
}

.navbar.navbar-inner-hvac-subsite .nav > li > a {
  display: block;
  white-space: nowrap;
  padding: 0.75em 0.5em;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;   /* overrides platform default `.navbar .nav>li>a { text-transform: uppercase }` */
  color: var(--brand-hvac-nav-text-color);
}

.navbar.navbar-inner-hvac-subsite .nav > li > a:hover {
  color: var(--brand-hvac-primary-color) !important;
}

.navbar .nav.navbar-hvac-subsite li.dropdown.open > .dropdown-toggle,
.navbar .nav.navbar-hvac-subsite li.dropdown.active > .dropdown-toggle {
  color: var(--brand-hvac-primary-color) !important;
  background-color: transparent;   /* overrides platform default `.navbar .nav li.dropdown.open>.dropdown-toggle { background-color:#e5e5e5 }` */
}

/**************************************     PRODUCTS MEGA-MENU     ************************************************/
/* Visibility owned entirely by this stylesheet (opacity/transform, not Bootstrap's display toggle) —
   required because the accordion behaviour needs full JS control. */

/* hide Bootstrap's default caret */
.navbar .nav > li > .hvac-whole-categories-list-menu.dropdown-menu::after {
  display: none;
}

/* points up at the open nav trigger — position measured on staging (trigger center minus menu's own left edge) */
.navbar .nav > li > .hvac-whole-categories-list-menu.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 287px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 8px solid var(--brand-hvac-cobalt-color);
}

.navbar .nav > li > .hvac-whole-categories-list-menu.dropdown-menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 635px;
  left: -259px;
  top: 100%;
  border-radius: 0;
  background-color: var(--brand-hvac-surface-grey);
  border: none;
  border-top: var(--brand-hvac-cobalt-color) solid 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 32px 40px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  text-align: left;
}

.navbar .nav > li.open > .hvac-whole-categories-list-menu.dropdown-menu {
  opacity: 1;
  pointer-events: auto;
}

/* The offsets above are measured from the trigger, and the nav is right-aligned — so the
   trigger's own x depends on the width of every item to its right. FR's nav labels are wider
   overall, which carries the trigger (and the menu with it) left of where the base offsets
   land it. These two restore the menu's right edge to the search button and keep the arrow on
   the trigger. Both classes sit on the same element, so this outranks the base rule regardless
   of source order. */
.navbar.navbar-inner-hvac-subsite-french .nav > li > .hvac-whole-categories-list-menu.dropdown-menu {
  left: -249.5px;
}

.navbar.navbar-inner-hvac-subsite-french .nav > li > .hvac-whole-categories-list-menu.dropdown-menu::before {
  left: 273.8px;
}

.hvac-whole-categories-list-menu .first-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 32px;
  box-sizing: border-box;
}

.hvac-whole-categories-list-menu .second-col {
  flex: 0 0 50%;
  max-width: 50%;
}

.hvac-whole-categories-list-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.hvac-whole-categories-list-menu .dropdown-main-header-title {
  margin-bottom: 12px;
}

.hvac-whole-categories-list-menu .dropdown-main-header-title > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--brand-hvac-cobalt-color);
  padding: 0.4em 0;
}

.hvac-whole-categories-list-menu .dropdown-main-header-title > a:hover,
.hvac-whole-categories-list-menu .dropdown-main-header-title > a:focus,
.hvac-whole-categories-list-menu .dropdown-main-header-title > a:active {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover, ... li>a:focus, li>a:active { background-color:#fafafa !important;
     color:#002663 !important }`. The platform rule covers all three pseudo-classes, so ours must too. */
  color: var(--brand-hvac-cobalt-color) !important;
  background-color: transparent !important;
}

.hvac-accordion-toggle > a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.hvac-accordion-toggle.hvac-accordion-open > a::after {
  transform: rotate(-135deg);
}

.hvac-accordion-panel {
  display: none;
}

.hvac-accordion-panel.hvac-accordion-open {
  display: block;
}

.hvac-accordion-panel ul {
  padding-left: 0;   /* left-aligns L2 with the L1 heading above it */
  margin-bottom: 20px;
}

.hvac-accordion-panel li {
  font-size: 1rem;
  padding: 6px 0;
}

/* Overrides platform default `.dropdown-menu li>a { padding:3px 20px; color:#333;
   white-space:nowrap }` — that rule matches any anchor nested under a `.dropdown-menu` li,
   including these. Its 20px left padding pushes L2 out of alignment with L1, and its nowrap
   makes a label wider than the column run past the panel edge instead of wrapping. */
.hvac-whole-categories-list-menu .hvac-accordion-panel li:not(.hvac-accordion-view-all) > a {
  display: block;
  padding: 0;
  color: var(--brand-hvac-nav-text-color);
  white-space: normal;
}

.hvac-whole-categories-list-menu .hvac-accordion-panel li:not(.hvac-accordion-view-all) > a:hover,
.hvac-whole-categories-list-menu .hvac-accordion-panel li:not(.hvac-accordion-view-all) > a:focus,
.hvac-whole-categories-list-menu .hvac-accordion-panel li:not(.hvac-accordion-view-all) > a:active {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover, ... li>a:focus, li>a:active { background-color:#fafafa !important;
     color:#002663 !important }`. The platform rule covers all three pseudo-classes, so ours must too. */
  background: transparent !important;
  color: var(--brand-hvac-cobalt-color) !important;
}

.hvac-accordion-view-all {
  margin-top: 8px;
}

.hvac-whole-categories-list-menu .hvac-accordion-view-all > a {
  display: block;
  padding: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  color: var(--brand-hvac-cobalt-color);
}

.hvac-whole-categories-list-menu .hvac-accordion-view-all > a:hover,
.hvac-whole-categories-list-menu .hvac-accordion-view-all > a:focus,
.hvac-whole-categories-list-menu .hvac-accordion-view-all > a:active {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover, ... li>a:focus, li>a:active { background-color:#fafafa !important;
     color:#002663 !important }`. The platform rule covers all three pseudo-classes, so ours must too. */
  color: var(--brand-hvac-cobalt-color) !important;
  background-color: transparent !important;
}

/**************************************     BRANDS PAGE     ************************************************/
/* Standalone CMS page (Pages/eng/hvac-brands.ctp). The brand grid used to live in a nav
   dropdown; at 56 brands it moved to its own page. .hvac-brand-logo is shared with the
   Featured Brands strip and is defined below, not here. */
.hvac-brands-page {
  max-width: 1170px;
  margin: 0 auto 60px;
  padding: 0 15px;
  box-sizing: border-box;
}

/* gradient fill on the heading — background-clip:text needs a transparent fill to show through */
.hvac-brands-page .hvac-brands-page-title {
  font-family: var(--heading-hvac-font);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 40px 0 32px;
  background-image: linear-gradient(90deg, var(--brand-hvac-cobalt-color) 0%, var(--brand-hvac-gradient-light) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hvac-brands-page .hvac-brands-page-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvac-brands-page .hvac-brands-page-tile {
  height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--brand-hvac-surface-grey);
}

.hvac-brands-page .hvac-brands-page-tile > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.hvac-brands-page .hvac-brands-page-tile > a:hover {
  background-color: var(--white-hvac-color);
}

.hvac-brands-page .hvac-brands-page-tile > a:hover .hvac-brand-logo {
  filter: none;
  opacity: 1;
}

/* shared with the Featured Brands strip — the strip has its own hover selector */
.hvac-brand-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/**************************************     SEARCH BAR     ************************************************/
.hvac-search.input-append {
  position: relative;
  width: 220px;
  margin-left: 16px;
  margin-right: 16px;   /* aligns the search button's right edge with the platform ENG/FR toggle — measured against Optris live (both ≈1796.6-1797px) */
}

.hvac-search form#ProductDisplayForm {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: var(--brand-hvac-surface-grey);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.hvac-search input#ProductSearch.appendInputButton {
  font-family: var(--body-hvac-font);
  color: var(--brand-hvac-text-body);
  border: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0 12px;
  width: 100%;
  height: 100%;
}

.hvac-search form#ProductDisplayForm button.btn.btn-default {
  background: var(--brand-hvac-cta-gradient);
  border: none;
  border-radius: 6px;
  width: 40px;
  height: 34px;         /* matches the inline height on the button in 6001-header.ctp */
  margin: 1px;           /* keeps the gradient button inset within the rounded field */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* transform, not width — a width change here would shrink the flex-sibling input via the
   form's flex layout, visually pushing its content left. scale() is paint-only, so the input
   never sees it. Gradient is the same two tokens as --brand-hvac-cta-gradient, order reversed. */
.hvac-search form#ProductDisplayForm button.btn.btn-default:hover {
  transform: scale(1.08);
  background: linear-gradient(135deg, var(--brand-hvac-cobalt-color), var(--brand-hvac-gradient-light));
}

.hvac-search .nav-search-icon-svg {
  width: 19.2px;   /* 16px × 1.2 */
  height: 19.2px;  /* 16px × 1.2 */
  color: var(--white-hvac-color);
  display: block;
}

/**************************************     HERO     ************************************************/

.hvac-sws-store #myCarousel .carousel-inner,
.hvac-sws-store #myCarousel .carousel-inner .item,
.hvac-sws-store #myCarousel .hero-section {
  height: 456px;   /* accommodates .hero-glass-box's vertical margin without clipping the CTA */
}

/* Full-bleed lives on .carousel-top only (matches Megger's MEG-style.css pattern) — everything
   inside, including .hero-section and .sws-carousel-drop-shadow, is then just a normal 100%-width
   block and inherits the full viewport span without needing its own breakout trick. */
.hvac-sws-store.carousel-top {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-bottom: 0;   /* overrides platform default `.carousel-top { margin-bottom: 10px }` (subsites.css) */
}

.hvac-sws-store #myCarousel .hero-section {
  position: relative;
  overflow-x: hidden;   /* still needed to clip the carousel's sliding items horizontally */
  background-image: linear-gradient(90deg, var(--brand-hvac-cobalt-color) 0%, var(--brand-hvac-gradient-light) 100%);
}

/* Same wave shape used in the HVAC logo mark — real asset, not an approximation. */
.hvac-sws-store #myCarousel .hero-section::after {
  content: '';
  position: absolute;
  left: -2%;    /* -(width - 100%)/2 — keeps the shape horizontally centred */
  bottom: -63px;
  width: 104%;
  height: 67.6%;  /* scales with the width above — changing one alone distorts the shape */
  background-image: url(/images/pages/hvac/hvac-wave-shape.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}



.hvac-sws-store #myCarousel .hero-content {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--hvac-content-inset);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Glass card wrapping the brand-logo strip and the copy block as a single rounded unit.
   overflow:hidden is what clips the logo strip to this card's radius. */
.hvac-sws-store #myCarousel .hero-glass-box {
  flex: 1 1 0;
  max-width: 500px;
  margin: 28px 0;
  border-radius: 16px;
  overflow: hidden;
  /* Desaturated grey at low opacity, and no saturate() on the blur — a saturated tint or a
     saturation boost makes this read as a tinted blue pane rather than frosted glass. */
  background: linear-gradient(180deg, rgba(150, 158, 168, 0.14) 0%, rgba(150, 158, 168, 0.05) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Off-white strip flush with the card's top edge — only the top corners round; the bottom
   edge sits square against the glass panel below. */
.hvac-sws-store #myCarousel .hero-brand-logo {
  display: flex;
  align-items: center;
  min-height: 56.2px;
  padding: 12.4px 28px;   /* balanced against the logo caps below — raising either grows the strip */
  background-color: #fbf8f8;
  border-radius: 12px 12px 0 0;
}

/* Base caps, sized for marks in roughly a 2.2–2.7:1 aspect ratio. */
.hvac-sws-store #myCarousel .hero-brand-logo img {
  max-height: 34.9px;
  max-width: 103px;   /* both caps apply — a height cap alone lets a wide mark dominate the strip */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Marks far wider than the base ratio, carrying no internal padding of their own, need their
   own caps — the shared caps above would render them either illegibly thin or visually dominant. */
.hvac-sws-store #myCarousel .carousel-01 .hero-brand-logo img {
  max-height: 31.7px;  /* 28.8px × 1.1 */
  max-width: 126.7px;  /* 115.2px × 1.1 */
}

.hvac-sws-store #myCarousel .carousel-02 .hero-brand-logo img {
  max-height: 22.8px;  /* 20.7px × 1.1 */
  max-width: 126.7px;  /* 115.2px × 1.1 */
}

.hvac-sws-store #myCarousel .text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;   /* align-items:flex-start shrink-fits children to their own content width otherwise — h1/h2 had nothing to wrap against and could overflow the card at narrow widths */
  box-sizing: border-box;
  gap: 16px;
  padding: 24px 28px 28px;
}

.hvac-sws-store #myCarousel .text-content h1 {
  font-family: var(--heading-hvac-font);
  font-weight: 700;
  font-size: clamp(0.875rem, 3vw, 2.25rem);   /* ceiling = 36px */
  line-height: 1.1;
  letter-spacing: 0.1em;
  color: var(--brand-hvac-hero-heading-color);
  margin: 0;
}

.hvac-sws-store #myCarousel .text-content h2 {
  font-family: var(--body-hvac-font);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.4vw, 1.125rem);   /* ceiling = 18px */
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: var(--brand-hvac-surface-grey);
  margin: 0;
}

.hvac-sws-store #myCarousel .carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.75em;
  border-radius: 999px;
  background-color: var(--white-hvac-color);
  transition: transform 0.2s ease;
  margin-top: 30px;
}

.hvac-sws-store #myCarousel .hero-content:hover .carousel-btn {
  transform: scale(1.04);
}

.hvac-sws-store #myCarousel .carousel-btn span {
  font-family: var(--body-hvac-font);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--brand-hvac-nav-text-color);
}

.hvac-sws-store #myCarousel .product-image {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

/* One uniform box for every slide — per-slide sizing here would make the product jump in
   scale between transitions. transform-origin is anchored to the corner the image already
   sits flush against (right via .product-image's justify-content:flex-end, bottom via the
   flex row's own alignment) — growing from there keeps the scale inside .product-image's
   overflow:hidden instead of clipping against it. */
.hvac-sws-store #myCarousel .product-image img.desk-img {
  height: 92%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform-origin: right bottom;
  transition: transform 0.2s ease;
}

.hvac-sws-store #myCarousel .hero-content:hover .product-image img.desk-img {
  transform: scale(1.04);
}

/* single overlay link per slide (not a duplicate CTA+image link pair) —
   sits above text/image, below the carousel chevrons */
.hvac-sws-store .hero-content .hvac-hero-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Matches Megger's MEG-style.css exactly: drop-shadow just clips overflow, no positioning of
   its own — it's already full-width as a normal child of the now-full-bleed .carousel-top. */
.hvac-sws-store .sws-carousel-drop-shadow {
  overflow: hidden;
  margin-top: -15px;
}

/* overrides platform default `.carousel { margin-bottom: 20px }` (bootstrap-all.min.css) —
   left the gap between the hero and the Featured Brands strip below it */
.hvac-sws-store #myCarousel {
  margin-bottom: 0;
}

/* Classic top:50%/margin-top centering — no transform/scale override (that's what caused the
   arrow to drift off the intended left/right value earlier). Matches Megger's own arrow CSS. */
.hvac-sws-store #myCarousel .carousel-control-new {
  top: 50%;
  margin-top: -24px;
  z-index: 6;
}

.hvac-sws-store #myCarousel .carousel-control-new.left {
  right: auto;
  margin-left: 5px;
}

.hvac-sws-store #myCarousel .carousel-control-new.right {
  left: auto;
  margin-right: 5px;
}

/**************************************     FEATURED BRANDS     ************************************************/

.hvac-featured-brands {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background-color: var(--brand-hvac-surface-grey);
  display: flex;
  align-items: stretch;
  overflow: hidden;   /* 100vw counts the scrollbar, the content area doesn't — without this the View All block paints past the page's right edge */
}

/* Explicit width, not content-driven: the logos-to-View-All boundary must be a fixed point
   inside the 1170px container (≈1020px in, level with the hero product image's centre above),
   so it never drifts with how wide the logos happen to render. The padding-left half is the
   centring gutter, floored at 20px so it can't grow against the row's own width. The logos
   fit inside whatever remains — the width does not adapt to them. */
.hvac-featured-brands-inner {
  flex: 0 1 auto;   /* the width below is the intended one and holds wherever it fits; shrink is the last-resort degradation for viewports too narrow for width + the View All block, which would otherwise overflow instead of reflow */
  box-sizing: border-box;
  width: calc(max(20px, (100vw - 1170px) / 2) + 1020px);
  padding: 24px 20px;
  padding-left: calc(max(20px, (100vw - 1170px) / 2) + var(--hvac-content-inset));   /* shares --hvac-content-inset with .hero-content's own padding, so this block's left edge lines up with the glass box above */
  display: flex;
  align-items: center;
  gap: 16px;   /* closes the gap to the label — the freed width doesn't shrink the row, it flows into the now-wider equal cells below, which centre the still-120px-capped logos with more room around them */
}

.hvac-featured-brands-label {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.hvac-featured-brands-eyebrow {
  font-family: var(--body-hvac-font);
  font-size: 0.85rem;
  color: var(--brand-hvac-nav-text-color);
}

.hvac-featured-brands-heading {
  font-family: var(--body-hvac-font);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-hvac-text-dark); /* fallback for browsers without background-clip:text support */
  background: linear-gradient(135deg, var(--brand-hvac-primary-color), var(--brand-hvac-gradient-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hvac-featured-brands-list {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Equal-width cells (flex:1 1 0), not content-width ones: the divider rides each cell's right
   edge, so cells of differing widths — or free space distributed between them — put the
   divider nearer the mark on its left than the one on its right. Equal cells with the logo
   centred keep every gap identical and fill the row's fixed width exactly. */
.hvac-featured-brands-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 72px;
  padding: 0 14px;
  border-right: 3px dashed rgba(0, 0, 0, 0.15);
}

.hvac-featured-brands-list li:last-child {
  border-right: none;
}

/* One identical box per mark (not each image's natural width) — inside equal-width cells this
   is what makes every logo sit the same distance from its dividers. object-fit keeps each mark
   undistorted inside that box. Any leftover unevenness is whitespace baked into the source
   PNGs themselves and can only be fixed in the assets. */
.hvac-featured-brands-list .hvac-brand-logo {
  width: 100%;
  max-width: 120px;
  height: 60px;
  object-fit: contain;
  object-position: center;
}

/* A near-square mark renders far narrower than the wordmark logos at a shared height, leaving
   dead slack inside an equal-width flex:1 1 0 cell regardless of which side it's pushed to.
   Sizing the cell to its own content (flex: 0 1 auto) removes the slack instead of relocating
   it, keeping the mark close to the label and centred against its own divider. The freed width
   flows into the other cells (still flex: 1 1 0), giving them more breathing room too. */
.hvac-featured-brands-list li.testo-brand {
  flex: 0 1 auto;
  justify-content: center;
}

/* .hvac-brand-logo carries the shared grayscale/opacity values — this section needs its own
   hover selector because its parent markup differs from the brands page's tile. */
.hvac-featured-brands-list a:hover .hvac-brand-logo {
  filter: none;
  opacity: 1;
}

.hvac-featured-brands-view-all {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 180px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--brand-hvac-cobalt-color), var(--brand-hvac-gradient-light));
  color: var(--white-hvac-color);
  font-family: var(--body-hvac-font);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* transform-origin:right — this block already reaches the true page edge (its parent
   .hvac-featured-brands clips overflow there), so growing from a centred origin would clip
   on the right. Anchoring right grows entirely leftward, into the strip's open background. */
.hvac-featured-brands-view-all:hover {
  color: var(--white-hvac-color);
  transform: scaleX(1.03);
  transform-origin: right center;
  background: linear-gradient(135deg, var(--brand-hvac-gradient-light), var(--brand-hvac-cobalt-color));
}

/**************************************     CATEGORY GRID + SIDE AD     ************************************************/

/* Full-bleed breakout, same as .hvac-featured-brands and .hvac-more-from-itm — without this,
   this section only centres within the platform's own container (different gutter than a true
   100vw), landing at a different left/right edge than every other section on the page. */
.hvac-category-section {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}

.hvac-category-section-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.hvac-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 170px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

/* Grid placement — 3 columns x 5 rows; side-ad spans column 3, rows 1-3 only
   (rows 4-5 col 3 are normal category buttons). */
.hvac-cat-air-flow-velocity        { grid-area: 1 / 1 / 2 / 2; }
.hvac-cat-electrical-diagnostics   { grid-area: 1 / 2 / 2 / 3; }
.hvac-cat-gas-combustion           { grid-area: 2 / 1 / 3 / 2; }
.hvac-cat-hvac-tools-accessories   { grid-area: 2 / 2 / 3 / 3; }
.hvac-cat-flaw-leak                { grid-area: 3 / 1 / 4 / 2; }
.hvac-cat-humidity-moisture        { grid-area: 3 / 2 / 4 / 3; }
.hvac-cat-indoor-air-quality       { grid-area: 4 / 1 / 5 / 2; }
.hvac-cat-pressure-manifolds       { grid-area: 4 / 2 / 5 / 3; }
.hvac-cat-refrigeration-ac         { grid-area: 4 / 3 / 5 / 4; }
.hvac-cat-temperature              { grid-area: 5 / 1 / 6 / 2; }
.hvac-cat-thermal-imaging          { grid-area: 5 / 2 / 6 / 3; }
.hvac-cat-vacuum-recovery-evacuation { grid-area: 5 / 3 / 6 / 4; }
.hvac-side-ad                      { grid-area: 1 / 3 / 4 / 4; }

/* Full-bleed background image + dark overlay + icon/label bar + invisible full-coverage link.
   Category buttons only — the side-ad uses its own layout below. */
.hvac-cat-item {
  position: relative;
  overflow: hidden;
}

.hvac-cat-item .hvac-cat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shifts the visible crop up ~17% of the box (not the box itself — `top`/`inset` moves the
     positioned box, object-position moves the image within it under object-fit:cover). Y axis
     is inverted from `top`: a higher Y% shows more of the image's bottom, shifting the visible
     content upward within the frame. */
  object-position: center 67%;
}

/* z:1 overlay — darkens the photo for label legibility, tinted to the brand palette rather
   than flat black so every button reads as part of the same page. */
/* Anchored left with an explicit width (not inset:0) so the width transition below has
   something to animate — the right edge recedes toward the left on hover, wiping the overlay
   away right-to-left instead of just fading it. */
.hvac-cat-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(64, 102, 176, 0.45);
  z-index: 1;
  transition: width 0.4s ease;
  background-blend-mode: multiply;
}

.hvac-cat-item:hover::before {
  width: 0;
}

.hvac-cat-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;   /* fixed so a taller icon (below) can't grow this bar past the other 9 buttons' */
  box-sizing: border-box;
  padding: 8px 12px;
  background-color: var(--brand-hvac-cobalt-color);
}

.hvac-cat-label .hvac-cat-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

/* These three render visually smaller than the rest at the shared 34px — 1.2x brings them back
   in line with the others' apparent weight. Box is 38px, not the literal 34*1.2=40.8, because
   the three source SVGs were re-cropped to a near-zero viewBox pad (~1.5%, vs ~6% on the other
   nine) — the art fills more of the box now, so a smaller box reads at the same visual size
   without pushing .hvac-cat-label as tall as a literal 40.8px box would. */
.hvac-cat-electrical-diagnostics .hvac-cat-icon,
.hvac-cat-flaw-leak .hvac-cat-icon,
.hvac-cat-vacuum-recovery-evacuation .hvac-cat-icon {
  width: 38px;
  height: 38px;
}

/* .hvac-cat-label is now a fixed 50px across every button — with the shared 8px vertical
   padding, a 38px icon (4px taller than the other nine's 34px) would overflow that box by 4px.
   Tightening padding-top/bottom to 6px on just these three keeps the taller icon inside the
   same 50px bar instead of pushing it. */
.hvac-cat-electrical-diagnostics .hvac-cat-label,
.hvac-cat-flaw-leak .hvac-cat-label,
.hvac-cat-vacuum-recovery-evacuation .hvac-cat-label {
  padding-top: 6px;
  padding-bottom: 6px;
}

.hvac-cat-divider {
  width: 2px;
  align-self: stretch;
  background-color: rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
}

.hvac-cat-label span {
  font-family: var(--body-hvac-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white-hvac-color);
  line-height: 1.2;
}

/* z:4 — sits above the label (z:2) and overlay (z:1), invisible, covers the whole tile.
   Single link per item, not a duplicate CTA+image pair — see hero C-8 for why that matters. */
.hvac-cat-item .hvac-cat-link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* Side ad — distinct card layout (light surface, stacked content), not the Style A photo tile. */
.hvac-side-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--brand-hvac-surface-grey);
  padding: 24px;
  box-sizing: border-box;
}

/* .hvac-cat-item::before is the Style A photo-tile overlay — the side-ad is a distinct light
   card, not a photo tile, so it never needs one. */
.hvac-side-ad::before {
  content: none;
}

/* Brand-logo strip — no background box of its own; the card is already the same off-white.
   Negative side margins cancel .hvac-side-ad's own 24px padding so the divider runs the full
   card width, same as the CTA bar below. */
.hvac-side-ad-logo {
  width: calc(100% + 48px);
  margin: -24px -24px 20px;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(64, 102, 176, 0.15);
  box-sizing: border-box;
}

.hvac-side-ad-logo img {
  max-height: 32px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hvac-side-ad-content h3 {
  font-family: var(--body-hvac-font);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
  color: var(--brand-hvac-text-dark);
  background: linear-gradient(90deg, var(--brand-hvac-primary-color), var(--brand-hvac-gradient-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hvac-side-ad-content p {
  font-family: var(--body-hvac-font);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--brand-hvac-cobalt-color);
  margin: 0;
}

.hvac-side-ad-img {
  width: auto;
  max-width: 100%;
  height: 189px;
  object-fit: contain;
  margin: 32px 0;
  transition: transform 0.2s ease;
}

.hvac-side-ad:hover .hvac-side-ad-img {
  transform: scale(1.04);
}

/* Full-bleed bar flush with the card's bottom edge. Negative margins cancel .hvac-side-ad's
   own padding on the three sides that touch the card edge; the card carries no border-radius,
   so the bar needs none either. */
.hvac-side-ad-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 48px);
  margin: auto -24px -24px;   /* auto top still pins it to the bottom of the flex column */
  padding: 1.6em 1.75em;
  background: linear-gradient(90deg, var(--brand-hvac-cobalt-color), var(--brand-hvac-gradient-light));
  color: var(--white-hvac-color);
  font-family: var(--body-hvac-font);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

/* Hover triggers off the whole card (single overlay link), not the bar itself — colour-swap
   only, no scale: a full-bleed bar scaling up would visibly detach from the card's edges. */
.hvac-side-ad:hover .hvac-side-ad-cta {
  background: linear-gradient(90deg, var(--brand-hvac-gradient-light), var(--brand-hvac-cobalt-color));
}

/* Single full-coverage link, same pattern as .hvac-cat-link — .hvac-side-ad already gets
   position:relative from the shared .hvac-cat-item rule. */
.hvac-side-ad-link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-from-itm {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background-color: var(--brand-hvac-surface-grey);
  margin-bottom: -15px;   /* compensates for spacing above the platform footer that comes from
                             itm.css (not available locally) — value confirmed against staging. */
  overflow: hidden;   /* same fix as .hvac-featured-brands — 100vw counts the scrollbar, the
                         content area doesn't, so without this the section can sit shifted
                         relative to the visible viewport instead of truly centered. */
}

.hvac-more-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 20px;
  box-sizing: border-box;
}

.hvac-more-heading {
  text-align: center;
  margin-bottom: 32px;
}

.hvac-more-eyebrow {
  display: block;
  font-family: var(--body-hvac-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--brand-hvac-nav-text-color);
  margin-bottom: 4px;
}

.hvac-more-heading h2 {
  font-family: var(--body-hvac-font);
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--brand-hvac-text-dark); /* fallback for browsers without background-clip:text support */
  background: linear-gradient(135deg, var(--brand-hvac-primary-color), var(--brand-hvac-gradient-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hvac-more-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hvac-more-card {
  background-color: var(--white-hvac-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Same overlay + right-to-left hover wipe as the category buttons (.hvac-cat-item::before) —
   scoped to the media wrapper, not the whole card, since the overlay must not cover the
   text content below the image. */
.hvac-more-card-media {
  position: relative;
  overflow: hidden;
}

.hvac-more-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(64, 102, 176, 0.25) 0%, rgba(37, 78, 156, 0.65) 100%);
  z-index: 1;
  background-blend-mode: multiply;
}

.hvac-more-card-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.hvac-more-card-content {
  padding: 24px;
}

.hvac-more-card-content h3 {
  font-family: var(--body-hvac-font);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-hvac-primary-color);
  margin: 0 0 12px;
}

.hvac-more-card-content p {
  font-family: var(--body-hvac-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--brand-hvac-nav-text-color);
  margin: 0 0 16px;
}

.hvac-more-card-cta {
  font-family: var(--body-hvac-font);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 300;
  color: var(--brand-hvac-cobalt-color);
  text-decoration: none;
  transition: font-size 0.2s ease;
}

.hvac-more-card-cta:hover {
  color: var(--brand-hvac-primary-color);
  font-size: 0.95rem;
}

.hvac-more-arrow {
  display: inline-block;
  vertical-align: -0.15em;
  transition: transform 0.2s ease;
}

.hvac-more-arrow svg {
  display: block;
  width: 1em;
  height: 1em;
}

.hvac-more-card-cta:hover .hvac-more-arrow {
  transform: translateX(4px);
}

/**************************************     BREAKPOINTS     ************************************************/

@media (max-width: 1199px) {
  /* matches the platform's own Bootstrap .container width at this tier — keeps the header's
     side margins consistent with the platform nav bar above it instead of going full-bleed */
  .hvac-header > .row-fluid {
    max-width: 940px;
  }

  /* matches the header container above — the page is inside the same fixed-width tier */
  .hvac-brands-page {
    max-width: 940px;
  }

  .hvac-brands-page .hvac-brands-page-tile {
    height: 70px;
  }

/* Hero — matches Optris's own <1200px pattern (OPT-style.css): the glass box just narrows a
   bit to give the product image more room. The arrows themselves don't need a breakpoint
   override — Megger's own arrow CSS (MEG-style.css) doesn't have one either, they stay at the
   same left:-10px/right:-10px at every width. */
.hvac-sws-store #myCarousel .hero-glass-box {
  max-width: 420px;
}

/* Fixed size rather than the desktop clamp's ceiling — at the narrower box width above, that
   ceiling wraps the heading to three lines. */
.hvac-sws-store #myCarousel .text-content h1 {
  font-size: 1.75rem;   /* 28px */
}

/* max-width:940px + margin:auto matches the header's own breakpoint container (.hvac-header
   > .row-fluid) so the hero text lines up with the logo above it, instead of just padding a
   still-1170px-wide, full-bleed box, which leaves the hero copy offset from the logo. */
.hvac-sws-store #myCarousel .hero-content {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--hvac-content-inset);
}

/* Featured Brands — same 940px container tier as the header/hero at this breakpoint. The
   boundary moves to ≈795px in, which is where the hero product image's centre sits once
   .text-content narrows to 420px here. */
.hvac-featured-brands-inner {
  width: calc(max(20px, (100vw - 940px) / 2) + 795px);
  padding-left: calc(max(20px, (100vw - 940px) / 2) + var(--hvac-content-inset));
}

:root {
  --hvac-content-inset: 25px;   /* redefined at this tier — .hero-content's own inset shrinks here, and Featured Brands shares the same variable so the two can't drift apart */
}

.hvac-featured-brands-heading {
  font-size: 2rem;
}

.hvac-featured-brands-list li {
  padding: 0 8px;
}

/* Category grid + side-ad, and More From ITM — same 940px container snap as every other
   section at this tier, instead of the max-width:1170px cap just shrinking fluidly with the
   viewport (no `margin:0 auto` override needed here since both were already centred). */
.hvac-category-section-inner,
.hvac-more-inner {
  max-width: 940px;
}
}

@media (max-width: 979px) {
/**************************************     MOBILE HEADER — LOGO + SEARCH     ************************************************/
/* Horizontal inset is intentionally NOT set here — Bootstrap's own `.navbar-inner{padding:0 20px}`
   supplies it, same as Optris. Overriding it (as an earlier draft of this rule did) replaced that
   symmetric 20px inset with a smaller, uneven-looking one; only the vertical padding is ours. */
/* Compound selector, not bare `.hvac-mobile` — this element also carries the platform's own
   `navbar-inner` class, and GTS's theme CSS (gts.css, this same breakpoint) sets its own
   `.navbar-inner { background: linear-gradient(...) }`. Same specificity as a bare `.hvac-mobile`
   rule, so which one wins came down to source order — and GTS's platform bundle was winning,
   painting the logo/search bar GTS blue instead of white. Scope is this wrapper only: the nav
   <ul> below sets its own gradient from an ID selector, well clear of this tie. */
.navbar-inner.hvac-mobile {
  /* Shorthand, not just background-color — GTS's competing .navbar-inner rule sets `background`
     (shorthand), which also clears background-image/-position/etc. Matching it with our own
     shorthand here means we fully reset those too, not just win on background-color alone. */
  background: var(--white-hvac-color);
  padding-top: 10px;
  padding-bottom: 10px;
  /* Bootstrap's own `.navbar-inner{border:1px solid #d4d4d4}` shows on all four sides unless
     explicitly cleared here. */
  border: none;
}

.hvac-mobile .logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hvac-mobile .span3 {
  flex: 0 0 150px;
  width: 150px;
  margin: 0;
}

/* Explicit width required — hvac-logo.svg declares only a viewBox, no intrinsic width/height,
   so `width:auto` resolves to zero here and the logo vanishes entirely.
   padding/margin reset overrides `.navbar .brand` (Bootstrap + default.css), whose 10px 20px
   padding and negative margins would push this 40px wider than its own column. */
.hvac-mobile .span3 img.mobile-logo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* flex-grow:0 — the box sizes to a fixed basis and stays there; `justify-content:space-between`
   on the wrapper still pins its right edge to the header's right edge, same mechanism as before,
   just with the leftover space now showing as a gap before the search box instead of the box
   stretching to fill it. 440px is double the original 220px basis — a deliberate size bump, not
   a stretch-to-fill-the-row (that grows all the way to the Products/Brands tabs' edge below,
   which is a different, larger effect than intended here). */
.hvac-mobile .span9 {
  flex: 0 1 440px;
  width: auto;
  min-width: 0;   /* lets the search bar actually shrink instead of overflowing — the flex default (min-width:auto) forbids shrinking below content size */
  margin: 0;
}

/* The form carries Bootstrap's `span10` class, so `[class*="span"]{float:left;margin-left:20px}`
   applies to it — that margin is what pushed the search bar past the header's right edge, and the
   float is why its wrapper collapsed to zero height. Both are reset here. */
.hvac-mobile .mobile-search form#ProductDisplayForm {
  width: 100%;
  height: 34px;
  border-radius: 6px;
  border: none;
  background: var(--brand-hvac-surface-grey);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  float: none;
  margin: 0;
}

.hvac-mobile .mobile-search input#ProductSearch.appendInputButton {
  font-family: var(--body-hvac-font);
  color: var(--brand-hvac-text-body);
  border: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0 10px;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
}

.hvac-mobile .mobile-search form#ProductDisplayForm button.btn.btn-default {
  background: var(--brand-hvac-cta-gradient);
  border: none;
  border-radius: 6px;
  width: 34px;
  height: 30px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.hvac-mobile .mobile-search .nav-search-icon-svg {
  width: 16px;
  height: 16px;
  color: var(--white-hvac-color);
  display: block;
}

/**************************************     MOBILE NAV BAR     ************************************************/
/* Flex, not percentage-width (Absolute Rule 7) — target classes, never a generic `> li`, and
   keep the collapse target `display:block` explicit. Both required by the Bootstrap 2 collapse
   plugin: it measures `scrollHeight` while the panel is `height:0`, and a flex row reports the
   wrong value in that state if the panel shares it. */
.hvac-mobile #SWS-mobile-nav-button-adjust {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border: none;
  border-radius: 6px;
  /* same gradient as .hero-section — dark cobalt to light sky-blue, left to right. Not
     --brand-hvac-cta-gradient: that token runs the opposite direction (135deg, light to dark). */
  background: linear-gradient(90deg, var(--brand-hvac-cobalt-color) 0%, var(--brand-hvac-gradient-light) 100%);
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li:not(.hvac-mobile-sub-nav) {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li.hvac-mobile-home {
  flex: 0 0 50px;
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li.hvac-mobile-products,
.hvac-mobile #SWS-mobile-nav-button-adjust > li.hvac-mobile-brands {
  flex: 1;
}

/* No background of its own — by design. The parent <ul>'s cobalt gradient is meant to span the
   expanded panel too, not just the tab row, so the panel must stay transparent to show it. */
.hvac-mobile #SWS-mobile-nav-button-adjust > li.hvac-mobile-sub-nav {
  flex: 0 0 100%;
  width: 100%;
  display: block;
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li:not(.hvac-mobile-sub-nav) + li:not(.hvac-mobile-sub-nav) {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li > a,
.hvac-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon {
  display: flex;
  width: 100%;
  height: 34px;   /* matches .mobile-search form#ProductDisplayForm's own 34px exactly — border-box below makes this the true outer height, not content height plus padding */
  box-sizing: border-box;
  padding: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  color: var(--white-hvac-color);
  font-weight: 500;
  font-size: 1rem;
}

.hvac-mobile #SWS-mobile-nav-button-adjust > li > a:hover,
.hvac-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon:hover {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover { background-color:#fafafa !important; color:#002663 !important }` */
  color: var(--brand-hvac-hero-heading-color) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.hvac-mobile .nav-home-icon-svg {
  width: 18px;
  height: 18px;
  color: var(--white-hvac-color);
}

/* the icon's own `color` (above) doesn't inherit the hover state from its parent <a> — currentColor
   on the svg resolves against ITS OWN color property, which is set explicitly, not inherited */
.hvac-mobile #SWS-mobile-nav-button-adjust > li > .nav-home-icon:hover .nav-home-icon-svg {
  color: var(--brand-hvac-hero-heading-color) !important;
}

/**************************************     MOBILE PRODUCTS ACCORDION     ************************************************/
.hvac-mobile .hvac-mobile-cat-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
}

.hvac-mobile .hvac-mobile-cat-toggle,
.hvac-mobile .hvac-mobile-cat-direct > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.6em 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white-hvac-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* chevron (::after below) inherits color from its host on :hover automatically — no separate
   ::after:hover rule needed, it isn't given its own explicit color anywhere. */
.hvac-mobile .hvac-mobile-cat-toggle:hover,
.hvac-mobile .hvac-mobile-cat-direct > a:hover {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover { background-color:#fafafa !important; color:#002663 !important }` */
  color: var(--brand-hvac-hero-heading-color) !important;
}

/* same border-rotate technique as the desktop accordion's ::after chevron, so both accordions
   read as the same visual language */
.hvac-mobile-cat-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.hvac-mobile-cat-has-sub.sub-open > .hvac-mobile-cat-toggle::after {
  transform: rotate(-135deg);
}

/* Vertical padding here is never zero — Bootstrap's `.collapse{height:0;overflow:hidden}` only
   zeroes the content box; padding-top/bottom still render and aren't clipped by the parent's own
   overflow, so every closed panel showed as a residual gap (measured: 12px = this rule's old
   4px + 8px, live via jQuery's real collapse toggle, not a guess). Horizontal padding is safe —
   it never contributes to height. Top/bottom spacing moves to the first/last child's own margin,
   which the same overflow:hidden correctly clips to 0 while collapsed. */
.hvac-mobile .hvac-mobile-sub-collapse {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
}

.hvac-mobile .hvac-mobile-sub-collapse > li {
  padding: 0.4em 0;
}

.hvac-mobile .hvac-mobile-sub-collapse > li:first-child {
  margin-top: 4px;
}

.hvac-mobile .hvac-mobile-sub-collapse > li:last-child {
  margin-bottom: 8px;
}

.hvac-mobile .hvac-mobile-sub-collapse > li > a {
  display: block;
  color: var(--white-hvac-color);
  font-size: 0.9rem;
}

.hvac-mobile .hvac-mobile-sub-collapse > li > a:hover {
  /* !important required — overrides platform default in itm.css:
     `.dropdown-menu li>a:hover { background-color:#fafafa !important; color:#002663 !important }` */
  color: var(--brand-hvac-hero-heading-color) !important;
}

.hvac-mobile .hvac-mobile-sub-collapse > li.hvac-mob-view-all > a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--white-hvac-color);
  font-size: 0.85rem;
}

/**************************************     MOBILE — MISC PLATFORM ADVERSARIES     ************************************************/
/* Bootstrap 2 defaults that show up specifically once the mobile header row uses display:flex —
   both absorbed differently in a block layout, which is why neither appears in the desktop CSS. */
.hvac-mobile .navbar-search {
  margin-top: 0;
}

.hvac-mobile .accordion {
  margin-bottom: 0;
}

/**************************************     MOBILE BRANDS PAGE     ************************************************/
.hvac-brands-page .hvac-brands-page-grid {
  grid-template-columns: repeat(3, 1fr);
}

.hvac-brands-page .hvac-brands-page-tile {
  height: 60px;
}

.hvac-featured-brands{
  padding-top: 0px;
}

/* Gap before the hero — .carousel-top's own margin-bottom is zeroed globally, including at
   this tier, so the header would otherwise touch the hero directly. */
.navbar.mshow.hvac-header-nav {
  margin-bottom: 16px;
}

/* Label and View All shrink at this tier so the logos keep their room instead of being
   squeezed by two blocks sized for the wider desktop/1199px container. */
.hvac-featured-brands-inner {
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.hvac-featured-brands-eyebrow {
  font-size: 0.7rem;
}

.hvac-featured-brands-heading {
  font-size: 1.4rem;
}

.hvac-featured-brands-list li {
  padding: 0 6px;
}

.hvac-featured-brands-list .hvac-brand-logo {
  max-width: 70px;
}

.hvac-featured-brands-view-all {
  min-width: 75px;
  padding: 0 9px;
  font-size: 0.75rem;
}

/**************************************     BUTTONS + SIDE AD     ************************************************/

.hvac-side-ad-content h3 {
  font-size: 1.5rem;
}

.hvac-category-section-french .hvac-side-ad-content h3 {
  font-size: 1.38rem;
}
}

@media (max-width: 767px) {
/* Platform's own `body{padding:0 20px}` (biscuit.pressed.css, this breakpoint only — confirmed
   live against staging's compiled stylesheet, not inferred) is what insets the ITM header at this
   tier; `.container{padding:0}` there contributes nothing. `.hvac-mobile` still carries Bootstrap's
   native `.navbar-inner{padding:0 20px}` (kept deliberately at the 979px tier — see the note where
   that padding was restored), so below 767px the two stack: 20px from body + 20px from our own
   component = 40px, visibly deeper than the 20px the platform header sits at. Zeroing our own
   horizontal padding here — not adding a matching 20px elsewhere — is what makes the two align:
   body's padding alone does the job, same as it does for the platform header above it. */
.hvac-mobile {
  padding-left: 0;
  padding-right: 0;
}

/* Overrides subsites.css's `.sws-carousel-drop-shadow img, .sws-carousel-drop-shadow
   .carousel-inner { box-shadow: 0px 3px 3px 0px rgba(115,108,115,1) }`, which applies at this
   breakpoint only. Out-scoped with .hvac-sws-store, so no !important is needed. */
.hvac-sws-store .sws-carousel-drop-shadow img,
.hvac-sws-store .sws-carousel-drop-shadow .carousel-inner {
  box-shadow: none;
}

.hvac-featured-brands {
  display: none;
}

.hvac-sws-store #myCarousel .text-content h1 {
  font-size: 1.4rem;
  line-height: 1.2;
}

/**************************************     BUTTONS + SIDE AD     ************************************************/

.hvac-side-ad {
  display: none;
}

/* Still 3 columns, DOM order — .hvac-side-ad is display:none above but was still occupying an
   explicit grid-area (col 3, rows 1-3); resetting every item to auto-placement is what actually
   closes that reserved space instead of just hiding the ad inside it. 12 remaining buttons fill
   exactly 4 full rows of 3, so auto-flow leaves no partial row. */
.hvac-category-grid {
  grid-template-rows: none;
}

.hvac-category-grid .hvac-cat-item {
  grid-area: auto;
}

.hvac-cat-item {
  height: 170px;
}

.hvac-cat-label span {
  font-size: 0.8rem;
}

.hvac-category-section-french .hvac-cat-label span {
  font-size: 0.7rem;
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-card-img {
  height: 160px;
}
}

@media (max-width: 600px) {
/* Same pattern as MEG-style.css's own 600px block: logo and search stack instead of sharing a
   row, search takes the full row width. `.logo-wrapper` needs flex-wrap here — the 979px rule
   above doesn't set it, since side-by-side is right down to 600px. */
.hvac-mobile .logo-wrapper {
  flex-wrap: wrap;
}

.hvac-mobile .span3 {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  /* No margin-bottom here — .logo-wrapper's own 10px gap (base rule, 979px tier) already applies
     between the wrapped rows. Adding margin on top of that gap doubled the space to 20px; the
     gap alone is the intended (halved) 10px. */
}

/* Image keeps its own fixed size — width:100% here would mean 100% of the now-full-row .span3,
   not the logo's actual intended size. Same decoupling MEG-style.css uses (its own logo carries
   a fixed 200px independent of the container's width). Explicit px, not width:auto — confirmed
   that hvac-logo.svg has no intrinsic width/height, so `auto` collapses it to near-zero. */
.hvac-mobile .span3 img.mobile-logo {
  width: 150px;
}

.hvac-mobile .span9 {
  flex: 0 0 100%;
  width: 100%;
}

/* !important: the same Bootstrap `[class*="span"]` adversary already documented above (the form
   carries Bootstrap's `span10` class) reasserts a fixed width at this specificity otherwise —
   confirmed necessary in MEG-style.css's equivalent rule, not added speculatively. */
.hvac-mobile .mobile-search,
.hvac-mobile .mobile-search form#ProductDisplayForm {
  width: 100% !important;
  max-width: 100%;
}

/* flex:1 (grow), not just width:100% — width:100% is only a flex-basis, and depends on
   flex-shrink correctly reducing it against the button's own space; flex:1 forces the input to
   consume exactly the remaining row after the button regardless, so the button stays flush
   against the form's right edge. Reported as offset left at this tier — this is the more
   deterministic of the two, kept alongside width:100% rather than replacing it. */
.hvac-mobile .mobile-search input#ProductSearch.appendInputButton {
  flex: 1 1 auto;
}

/* Stacks the product image above the glass box, both centred. column-reverse depends on DOM
   order: the glass box is first in markup, so reversing drops it below the image. */
.hvac-sws-store #myCarousel .carousel-inner,
.hvac-sws-store #myCarousel .carousel-inner .item,
.hvac-sws-store #myCarousel .hero-section {
  height: 616px;
}

.hvac-sws-store #myCarousel .hero-content {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  height: auto;
  max-height: 100%;
  padding-top: 40px;   /* breathing room above the product image */
}

.hvac-sws-store #myCarousel .product-image {
  flex: 0 0 auto;
  height: auto;
  width: 100%;
  justify-content: center;
}

.hvac-sws-store #myCarousel .product-image img.desk-img {
  height: auto;
  max-height: 220px;
  width: auto;
  max-width: 80%;
}

.hvac-sws-store #myCarousel .hero-glass-box {
  flex: 0 0 auto;   /* the base rule's flex:1 1 0 collapses to zero height once .hero-content is height:auto — there is no leftover space to grow into */
  width: 100%;
  max-width: 100%;
  margin: 16px 0 0;
}

/**************************************     BUTTONS + SIDE AD     ************************************************/

/* 2 columns — 12 remaining buttons (side-ad still hidden from the 767px tier) fill exactly 6 full rows. */
.hvac-category-grid {
  grid-template-columns: repeat(2, 1fr);
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-cards {
  grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
/**************************************     HERO     ************************************************/

.hvac-sws-store #myCarousel .hero-section-french .text-content {
  gap: 6px;
  padding: 24px;
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-eyebrow {
  font-size: 1rem;
}

.hvac-more-heading h2 {
  font-size: 2rem;
}

.hvac-more-card-content h3 {
  font-size: 1.2rem;
}

.hvac-more-card-content p {
  font-size: 0.8rem;
}

.hvac-more-card-cta {
  font-size: 0.8em;
}
}

@media (max-width: 399px) {
.hvac-sws-store #myCarousel .text-content h1 {
  font-size: 1.2rem;
}

.hvac-sws-store #myCarousel .carousel-btn span{
  font-size: 0.8rem;
}

.hvac-sws-store #myCarousel .carousel-btn {
  margin-top: 10px;
}

/**************************************     BUTTONS + SIDE AD     ************************************************/

.hvac-category-grid {
  grid-template-columns: 1fr;
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-heading h2 {
  font-size: 1.8rem;
}
}

@media (max-width: 329px){
.hvac-sws-store #myCarousel .text-content h2{
  font-size: clamp(0.8rem, 1.4vw, 1.125rem);
}

.hvac-sws-store #myCarousel .hero-section-french .text-content h1 {
  font-size: 1.1rem;
}

/**************************************     MORE FROM ITM     ************************************************/

.hvac-more-card-img {
  height: 130px;
}

.hvac-more-heading h2 {
  font-size: 1.7rem;
}
}