/**
 * abarco-hvac — concatenated theme (no local @import; cache-bust safe)
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Source+Sans+3:wght@400;500;600;700&family=Syne:wght@600;700&display=swap");

/* ==== _tokens.css ==== */
/**
 * abarco-hvac — design tokens (design-system.md)
 * Premium technical HVAC palette — not Electro skin.
 */
:root {
  /* Core palette */
  --color-ink: #0b1220;
  --color-ink-muted: #3d4a5c;
  --color-ink-subtle: #6b7a8f;
  --color-paper: #f3f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #e8eef4;
  --color-line: #c9d4e0;
  --color-brand: #0e4d5c;
  --color-brand-hover: #0a3a45;
  --color-accent: #1fa8a0;
  --color-accent-soft: #d5f3f0;

  /* Semantic */
  --color-success: #1b7f5a;
  --color-warning: #b86e00;
  --color-danger: #b42318;
  --color-info: #1a5f8a;
  --color-energy-a: #1b7f5a;
  --color-promo: #c2410c;

  /* Typography */
  --font-display: Syne, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-spec: "IBM Plex Mono", ui-monospace, monospace;

  --text-display: 2.75rem;
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-spec: 0.8125rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius / elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgb(11 18 32 / 6%);
  --shadow-2: 0 8px 24px rgb(11 18 32 / 8%);

  /* Layout */
  --layout-max: 1360px;
  --header-height: 72px;
  --header-height-compact: 56px;

  /* Map Classic / Bootstrap-ish vars where helpful */
  --primary: var(--color-brand);
  --secondary: var(--color-ink-muted);
  --success: var(--color-success);
  --info: var(--color-info);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
}

/* ==== _layout.css ==== */
/**
 * abarco-hvac — base layout shell
 */

html {
  font-size: 16px;
}

body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(135deg, var(--color-paper) 0%, var(--color-surface-2) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgb(11 18 32 / 4%) 31px,
      rgb(11 18 32 / 4%) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      rgb(11 18 32 / 4%) 31px,
      rgb(11 18 32 / 4%) 32px
    );
  background-attachment: fixed;
}

body#index {
  /* Home: quieter grid so hero can dominate */
  background-image: linear-gradient(160deg, var(--color-paper) 0%, var(--color-surface-2) 55%, var(--color-paper) 100%);
}

#header,
.aba-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 94%);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(8px);
  transition: min-height 220ms ease, box-shadow 220ms ease;
}

#header.is-compact,
.aba-header.is-compact {
  box-shadow: var(--shadow-1);
}

.aba-shell {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .aba-shell {
    padding-inline: var(--space-5);
  }
}

#wrapper {
  padding-block: var(--space-5);
}

#wrapper > .container,
#content-wrapper,
.page-content {
  max-width: var(--layout-max);
}


/* Home: ignore Classic .container / .row / .col squeeze so hero is full-bleed.
   NEVER reserve a left column for #aba-mega-panel — mega is absolute overlay. */
body#index #wrapper {
  padding-inline: 0 !important;
  display: block !important;
  margin-left: 0 !important;
}

body#index #wrapper > .container,
body#index #wrapper > .container > .row,
body#index #content-wrapper,
body#index #main,
body#index .page-home,
body#index #content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  float: none !important;
  grid-template-columns: none !important;
}

body#index #wrapper > .container > .row {
  display: block !important;
}

body#index #content-wrapper.col-xs-12,
body#index #content-wrapper.col-sm-4,
body#index #content-wrapper.col-md-12,
body#index #left-column,
body#index #right-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
}

body#index #left-column,
body#index #right-column {
  display: none !important;
}

/* Full-bleed hero band on home */
.aba-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: min(68vh, 560px);
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(105deg, rgb(11 18 32 / 78%) 0%, rgb(14 77 92 / 55%) 55%, rgb(11 18 32 / 35%) 100%),
    linear-gradient(180deg, var(--color-brand) 0%, var(--color-ink) 100%);
  color: var(--color-surface);
  overflow: hidden;
}

.aba-hero__inner {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-6);
}

@media (min-width: 768px) {
  .aba-hero__inner {
    padding: var(--space-8) var(--space-5) var(--space-7);
  }
}

.aba-hero__brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--text-display));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.aba-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  max-width: 32rem;
}

.aba-hero__support {
  font-size: var(--text-body);
  color: rgb(243 246 249 / 88%);
  margin: 0 0 var(--space-5);
  max-width: 36rem;
}

.aba-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.aba-section {
  padding-block: var(--space-6);
}

.aba-section__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.aba-section__desc {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
  max-width: 40rem;
}

.aba-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .aba-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .aba-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .aba-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Electro-style footer: white 4-col + legal */
#footer,
.aba-footer {
  background: var(--color-surface);
  color: var(--color-ink-muted);
  margin-top: 0;
  padding-block: var(--space-7) var(--space-5);
  border-top: 1px solid var(--color-line);
}

#footer a,
.aba-footer a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

#footer a:hover,
.aba-footer a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.aba-footer__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2rem;
  padding-bottom: 2rem;
}

/* Suppress Classic footer modules if still hooked elsewhere */
#footer .block_newsletter,
#footer .block-social,
#footer #block_myaccount_infos,
#footer .block-contact,
#footer .links.wrapper,
#footer .footer-container .col-md-3,
#footer .footer-container .col-lg-8,
#footer .footer-container .col-lg-4 {
  display: none !important;
}

#footer .aba-footer__grid .aba-footer__col {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.aba-footer__heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.aba-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aba-footer__links li {
  margin-bottom: 0.45rem;
}

.aba-footer__links a {
  font-size: 0.9rem;
}

.aba-footer__hours {
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.aba-footer__phone a {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand) !important;
}

.aba-footer__mail {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.aba-footer__legal {
  border-top: 1px solid var(--color-line);
  padding-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-ink-subtle);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .aba-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .aba-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* Motion: section enter */
.aba-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.aba-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .aba-reveal,
  #header,
  .aba-header,
  .btn,
  .aba-btn {
    transition: none !important;
  }

  .aba-reveal {
    opacity: 1;
    transform: none;
  }
}

/* bust 1792627465 */

/* ==== _components.css ==== */
/**
 * abarco-hvac — global buttons, forms, badges
 */

/* ——— Typography roles ——— */
h1, .h1,
.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
}

.aba-spec,
.product-flags .aba-spec {
  font-family: var(--font-spec);
  font-size: var(--text-spec);
  font-weight: 500;
  line-height: 1.35;
}

/* ——— Buttons ——— */
.btn,
.aba-btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:focus-visible,
.aba-btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary,
.aba-btn--primary,
.btn.btn-primary {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.btn-primary:hover,
.aba-btn--primary:hover,
.btn.btn-primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: #fff;
}

.btn-secondary,
.aba-btn--secondary,
.btn.btn-secondary {
  background-color: var(--color-surface);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.btn-secondary:hover,
.aba-btn--secondary:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-brand-hover);
}

.aba-btn--install,
.btn.aba-btn--install {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-brand);
}

.aba-btn--install:hover {
  background-color: var(--color-accent-soft);
}

.btn-tertiary,
.btn.btn-tertiary {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-ink-muted);
}

/* Classic add-to-cart / checkout */
.add-to-cart,
.product-add-to-cart .add-to-cart,
#checkout .continue,
.cart-detailed-actions .btn-primary {
  background-color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: #fff !important;
  border-radius: var(--radius-md);
  min-height: 44px;
}

/* ——— Forms ——— */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select.form-control,
textarea.form-control {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(31 168 160 / 22%);
}

/* Search primacy (Stage 3 will enlarge further) */
#search_widget,
.search-widget {
  flex: 1 1 auto;
}

#search_widget form input[type="text"],
.search-widget input[type="text"] {
  min-height: 48px;
  border-color: var(--color-line);
  font-size: 1.05rem;
}

#search_widget form button,
.search-widget button[type="submit"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  min-height: 48px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ——— Badges ——— */
.aba-badge,
.product-flag,
span.discount-percentage,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  border: none;
  box-shadow: none;
}

.aba-badge--promo,
.product-flag.discount,
span.discount-percentage {
  background: var(--color-promo);
  color: #fff;
}

.aba-badge--new,
.product-flag.new {
  background: var(--color-info);
  color: #fff;
}

.aba-badge--install {
  background: var(--color-accent-soft);
  color: var(--color-brand);
}

.aba-badge--energy,
.aba-badge--success {
  background: rgb(27 127 90 / 12%);
  color: var(--color-energy-a);
}

.aba-badge--muted {
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
}

/* Param chips */
.aba-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.aba-chip__label {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aba-chip__value {
  font-family: var(--font-spec);
  font-size: var(--text-spec);
  font-weight: 500;
  color: var(--color-ink);
}

/* Header brand wordmark */
.aba-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--color-brand);
  text-decoration: none;
  line-height: 1;
}

.aba-wordmark:hover {
  color: var(--color-brand-hover);
  text-decoration: none;
}

.aba-wordmark span {
  color: var(--color-accent);
}

/* Soft surface for interactive product tiles only */
.product-miniature,
.product {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.product-miniature:hover {
  border-color: var(--color-brand);
}

.product-price,
.current-price {
  color: var(--color-brand);
  font-weight: 700;
}

/* Override Classic primary blue/green drift */
a {
  color: var(--color-brand);
}

a:hover {
  color: var(--color-brand-hover);
}

.pagination .current a,
.pagination .current span {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

/* ==== _header.css ==== */
/**
 * Electro-density header — own HVAC brand
 * Proportions: Kategorie ~15% | Search ~55% | Utils ~30%
 * Mega menu: FIXED overlay — never pushes hero / page flow
 */

/* Fallback visibility when Classic helpers missing */
@media (min-width: 992px) {
  .hidden-md-up,
  .aba-mobile-only {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

/* SVG icons — never depend on Material ligatures */
.aba-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  vertical-align: middle;
  fill: currentColor;
}

.aba-icon path {
  fill: currentColor;
}

/* Kill leftover Material ligature text if any module still emits it */
#header i.material-icons {
  font-family: inherit !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

/* —— Top trust bar (white) —— */
.aba-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding: 0.55rem 0;
}

.aba-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.aba-topbar__logo {
  flex: 0 0 auto;
  font-size: 1.35rem;
}

.aba-topbar__usps {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aba-topbar__usps li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.aba-topbar__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-ink-subtle);
  border-radius: 2px;
  flex-shrink: 0;
}

/* —— Main commerce bar (positioning context for absolute mega only) —— */
#header .header-nav.hidden-md-up,
.aba-header-main,
#header .header-top.aba-header-main {
  background: var(--color-brand);
  border: 0;
  padding: 0.65rem 0;
  position: relative; /* mega anchors here — NOT body/main/hero */
  z-index: 40;
  overflow: visible;
}

.aba-header-shell {
  position: relative;
  overflow: visible;
}

.aba-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
}

/* Kategorie ~15% */
.aba-cats-btn {
  flex: 0 0 15%;
  max-width: 200px;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.aba-cats-btn:hover,
.aba-cats-btn[aria-expanded="true"] {
  background: var(--color-brand-hover);
  filter: brightness(1.08);
}

/* Search ~55% — dominant */
.aba-header-row__search {
  flex: 1 1 55%;
  min-width: 0;
  max-width: none;
}

#header #search_widget,
#header .search-widget,
.aba-header-row__search #search_widget {
  width: 100%;
  max-width: none;
  position: relative;
}

#search_widget form {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}

#search_widget form input[type="text"] {
  flex: 1;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 48px;
  padding: 0 1rem;
  font-size: 1.05rem;
  color: var(--color-ink);
  background: transparent;
}

#search_widget form button {
  background: transparent;
  color: var(--color-ink-muted);
  border: 0;
  min-width: 52px;
  min-height: 48px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#search_widget form button:hover {
  color: var(--color-brand);
}

/* Utils ~30% */
.aba-header-utils {
  flex: 0 0 28%;
  max-width: 340px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-left: 0;
}

.aba-header-utils a,
.aba-header-utils .header-utils-link,
.aba-header-utils .header-utils-cart a,
.aba-header-utils .cart-preview,
.aba-header-utils .cart-preview .header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.65rem;
  color: #fff !important;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.aba-header-utils a:hover {
  background: rgb(255 255 255 / 12%);
}

.aba-header-utils .cart-products-count,
.aba-header-utils .cart-preview .body {
  color: #fff;
}

/* Hide language/currency selectors in header utils (Electro: Kontakt/Konto/Koszyk) */
.aba-header-utils .language-selector,
.aba-header-utils .currency-selector,
.aba-header-utils #_desktop_language_selector,
.aba-header-utils #_desktop_currency_selector,
.aba-signin-slot[hidden] {
  display: none !important;
}

/* Wordmark */
.aba-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-brand);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.aba-wordmark span {
  color: var(--color-accent);
}

.aba-wordmark--light {
  color: #fff;
  font-size: 1.15rem;
}

.aba-wordmark--light span {
  color: var(--color-accent-soft);
}

.aba-logo-heading {
  margin: 0;
  font-size: inherit;
}

/* —— Absolute overlay mega (covers hero; NEVER a sibling column) —— */
.aba-mega {
  position: absolute !important;
  top: 100%;
  left: var(--aba-mega-left, 0px);
  right: auto;
  z-index: 200 !important;
  width: min(280px, 90vw);
  min-width: 240px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transform: none;
}

.aba-mega:not([hidden]) {
  pointer-events: auto;
}

.aba-mega[hidden] {
  display: none !important;
}

.aba-mega > .aba-shell {
  padding: 0;
  max-width: none;
  width: 100%;
}

.aba-mega__panel,
.aba-mega .menu,
.aba-mega #_desktop_top_menu {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-2);
  width: 100%;
}

/* blockreassurance must never appear inside mega */
.aba-mega .blockreassurance,
.aba-mega #_desktop_top_menu_slot > *:not(.menu):not(.aba-mainmenu):not(#_desktop_top_menu) {
  display: none !important;
}

/* Vertical list mega — Electro style */
.aba-mega #top-menu,
.aba-mega .top-menu[data-depth="0"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aba-mega #top-menu > li {
  border-bottom: 1px solid var(--color-line);
  position: relative;
}

.aba-mega #top-menu > li:last-child {
  border-bottom: 0;
}

.aba-mega #top-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
}

.aba-mega #top-menu > li > a::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.aba-mega #top-menu > li > a:hover,
.aba-mega #top-menu > li.current > a,
.aba-mega #top-menu > li:hover > a {
  color: var(--color-brand);
  background: var(--color-paper);
}

/* Hide Classic mobile expand chevrons in desktop mega */
.aba-mega .navbar-toggler,
.aba-mega .collapse-icons,
.aba-mega .float-xs-right {
  display: none !important;
}

/* Flyout subcategories to the right of overlay */
.aba-mega #top-menu > li .popover.sub-menu,
.aba-mega #top-menu > li .js-sub-menu {
  position: absolute;
  left: 100%;
  top: 0;
  margin: 0;
  min-width: 260px;
  max-width: 420px;
  border: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: var(--shadow-2);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  display: none;
}

.aba-mega #top-menu > li:hover > .popover.sub-menu,
.aba-mega #top-menu > li:hover > .js-sub-menu,
.aba-mega #top-menu > li:focus-within > .popover.sub-menu {
  display: block;
}

.aba-mega #top-menu .top-menu[data-depth="1"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aba-mega #top-menu .top-menu[data-depth="1"] a {
  color: var(--color-ink-muted);
  font-weight: 500;
  padding: 0.4rem 0;
  display: block;
}

.aba-mega #top-menu .top-menu[data-depth="1"] a:hover {
  color: var(--color-brand);
}

/* Mobile */
.aba-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  background: var(--color-brand);
  padding-block: 0.35rem;
}

.aba-mobile-bar__menu {
  background: transparent;
  border: 0;
  color: #fff;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.aba-mobile-bar__utils {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #fff;
}

#mobile_top_menu_wrapper {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  padding: var(--space-4);
  position: relative;
  z-index: 50;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 991px) {
  .aba-cats-btn {
    flex: 0 0 auto;
    max-width: none;
  }

  .aba-header-utils .header-utils-link span {
    display: none;
  }

  .aba-header-utils {
    flex: 0 0 auto;
    max-width: none;
  }

  .aba-mega {
    width: min(100vw - 1rem, 320px);
    left: 0.5rem;
  }
}

@media (max-width: 767px) {
  .aba-header-row {
    flex-wrap: wrap;
  }

  .aba-cats-btn {
    display: none; /* use hamburger */
  }

  .aba-header-row__search {
    flex: 1 1 100%;
    order: 3;
  }

  .aba-header-utils {
    margin-left: auto;
  }
}

/* bust 1792654500 */

/* ==== _listing.css ==== */
/**
 * Dense Electro-style product cards + listing
 */
.aba-product-card {
  background: var(--color-surface);
  border: 1px solid transparent;
  transition: border-color 160ms ease;
}

.aba-product-card:hover {
  border-color: var(--color-line);
}

.aba-product-card .thumbnail-container {
  padding: 0.75rem 0.75rem 1rem;
  text-align: center;
  position: relative;
  height: auto !important;
  box-shadow: none !important;
  border: 0 !important;
}

.aba-product-card .product-thumbnail {
  display: block;
  margin: 0 auto 0.75rem;
}

.aba-product-card .product-thumbnail img {
  max-height: 160px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

.aba-product-card .product-description {
  text-align: center;
  position: static !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.aba-product-card .product-title {
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.8em;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  color: var(--color-ink-muted);
}

.aba-product-card .product-title a {
  color: inherit;
  text-decoration: none;
}

.aba-product-card .product-title a:hover {
  color: var(--color-brand);
}

.aba-product-card .product-price-and-shipping {
  margin: 0.25rem 0 0.5rem;
}

.aba-product-card .price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-danger, #b42318);
}

.aba-product-card .regular-price {
  display: block;
  font-size: 0.8rem;
  color: var(--color-ink-subtle);
  text-decoration: line-through;
  margin-bottom: 0.15rem;
}

.aba-product-card .product-flags {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aba-product-card .product-flag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  background: var(--color-brand);
  color: #fff;
}

.aba-product-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
}

.aba-chip {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-spec);
  font-size: 0.65rem;
  background: var(--color-paper);
  color: var(--color-ink-muted);
  border-radius: 2px;
}

.aba-badge--install {
  background: var(--color-accent) !important;
}

.aba-badge--energy {
  background: var(--color-energy-a) !important;
}

/* Listing grids — 4-col desktop */
#products .products,
.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

#products .product-miniature,
.products .product-miniature {
  margin: 0;
  width: 100%;
}

@media (max-width: 1199px) {
  #products .products,
  .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #products .products,
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

/* Facets */
#search_filters,
.facet {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

#search_filters .facet-label,
.facet .facet-label {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

#search_filters .h6,
#search_filters p.h6 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-brand);
}

/* PDP */
.product-container .product-prices .current-price {
  font-size: 1.75rem;
  color: var(--color-brand);
}

.product-actions .add-to-cart {
  min-height: 48px;
  font-weight: 600;
}

#product .tabs .nav-tabs .nav-link.active {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/**
 * PDP gallery — cover + ALL thumbs in first viewport (no page scroll).
 * Desktop: 2×2 thumb grid LEFT of cover (p21 gallery viewport layout).
 * Cover capped to min(22rem, 100dvh − 14rem).
 * Neutralizes Classic min-height:21.88rem, .mask.scroll width, and scrollbox clip.
 * Mobile: horizontal thumb strip under cover.
 * Keeps Classic .js-thumb / .js-qv-product-cover / #product-modal hooks intact.
 * Lightbox viewport fix lives in #product-modal rules below — do not regress.
 */
.page-product {
  --aba-pdp-gallery-chrome: 14rem;
  --aba-pdp-thumb-gap: 0.375rem;
  --aba-pdp-thumb-size: 3.5rem;
  --aba-pdp-cover-max: min(22rem, calc(100vh - var(--aba-pdp-gallery-chrome)));
  --aba-pdp-cover-max: min(22rem, calc(100dvh - var(--aba-pdp-gallery-chrome)));
  --aba-pdp-thumbs-width: calc(
    (2 * var(--aba-pdp-thumb-size)) + var(--aba-pdp-thumb-gap)
  );
}

@media (min-width: 768px) {
  #product #main .images-container.js-images-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 0 !important; /* kill Classic .images-container{min-height:21.88rem} */
    max-height: var(--aba-pdp-cover-max);
    z-index: 1;
  }

  /* Thumbs LEFT of cover (order:-1); DOM is cover then mask */
  #product #main .images-container .js-qv-mask.mask,
  #product #main .images-container .js-qv-mask.mask.scroll {
    order: -1;
    position: relative;
    flex: 0 0 var(--aba-pdp-thumbs-width);
    width: var(--aba-pdp-thumbs-width) !important;
    max-width: var(--aba-pdp-thumbs-width) !important;
    max-height: var(--aba-pdp-cover-max);
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important; /* every thumb visible — no Classic scrollbox clip */
    white-space: normal !important;
  }

  #product #main .images-container .product-images.js-qv-product-images {
    display: grid !important;
    grid-template-columns: repeat(2, var(--aba-pdp-thumb-size));
    grid-auto-rows: var(--aba-pdp-thumb-size);
    gap: var(--aba-pdp-thumb-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    width: var(--aba-pdp-thumbs-width);
    height: auto !important;
    transform: none !important;
  }

  #product #main .images-container .product-images > li.thumb-container {
    display: block !important;
    width: var(--aba-pdp-thumb-size);
    height: var(--aba-pdp-thumb-size);
    margin: 0 !important;
  }

  #product #main .images-container .product-images > li.thumb-container .thumb {
    display: block !important;
    width: var(--aba-pdp-thumb-size);
    max-width: 100%;
    height: var(--aba-pdp-thumb-size);
    margin: 0 !important;
    object-fit: contain;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
  }

  #product #main .images-container .product-images > li.thumb-container .thumb.selected,
  #product #main .images-container .product-images > li.thumb-container .thumb:hover {
    border-color: var(--color-brand);
    border-width: 2px;
  }

  #product #main .images-container .product-cover {
    position: relative;
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    height: auto;
    margin-bottom: 0 !important;
    max-height: var(--aba-pdp-cover-max);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
  }

  #product #main .images-container .product-cover picture {
    display: flex;
    max-width: 100%;
    max-height: var(--aba-pdp-cover-max);
    height: auto;
    align-items: center;
    justify-content: center;
  }

  #product #main .images-container .product-cover img,
  #product #main .images-container .product-cover .js-qv-product-cover {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--aba-pdp-cover-max);
    object-fit: contain;
  }

  /* Under-cover horizontal arrows — not used with side thumbs */
  #product #content .scroll-box-arrows,
  #product #main .scroll-box-arrows {
    display: none !important;
  }

  /* Flags on cover (thumbs are on the left) */
  #product #main #content .product-flags {
    left: calc(var(--aba-pdp-thumbs-width) + 1.25rem);
    width: auto;
  }
}

@media (max-width: 767px) {
  #product #main .images-container.js-images-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
  }

  #product #main .images-container .product-cover {
    margin-bottom: 0;
    max-height: min(70vh, 24rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #product #main .images-container .product-cover picture {
    display: flex;
    max-width: 100%;
    max-height: min(70vh, 24rem);
  }

  #product #main .images-container .product-cover img,
  #product #main .images-container .product-cover .js-qv-product-cover {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 24rem);
    object-fit: contain;
  }

  #product #main .images-container .js-qv-mask.mask {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  #product #main .images-container .product-images.js-qv-product-images {
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  #product #main .images-container .product-images > li.thumb-container {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
  }

  #product #main .images-container .product-images > li.thumb-container .thumb {
    width: var(--aba-pdp-thumb-size);
    height: var(--aba-pdp-thumb-size);
    max-width: none;
    margin: 0;
    object-fit: contain;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
  }
}

/**
 * PDP lightbox (#product-modal) — white box + large image fully inside viewport.
 * No modal/page scroll. Does NOT change on-page cover / thumb strip.
 *
 * XX = 96px: close-hit area + body padding + side thumbs chrome.
 * Bootstrap 3 uses .in (this shop); BS4 uses .show — cover both.
 */
#product-modal.modal {
  overflow: hidden !important; /* kill Bootstrap .modal { overflow-y: auto } */
  padding: 0 !important;
}

#product-modal.modal.in,
#product-modal.modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#product-modal .modal-dialog {
  width: calc(100% - 3rem);
  max-width: min(90vw, 56rem);
  max-height: 100vh;
  max-height: 100dvh;
  margin: auto !important; /* vertical + horizontal center via flex parent */
  overflow: hidden;
  display: flex;
  align-items: center;
  transform: none !important; /* kill BS fade translate(0,-25%) if .in/.show lag */
}

#product-modal .modal-content {
  width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0 !important; /* kill Classic min-height: 28.13rem */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 !important;
}

#product-modal .modal-content .modal-body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-left: 0 !important; /* kill Classic margin-left: -35% */
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0.75rem !important;
  background: #fff; /* white chrome inset from viewport edges */
  min-height: 0 !important; /* kill Classic min-height: 23.75rem */
}

#product-modal .modal-content .modal-body > figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
}

#product-modal .modal-content .modal-body > figure > picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
}

#product-modal .modal-content .modal-body .product-cover-modal,
#product-modal .modal-content .modal-body .js-modal-product-cover {
  width: auto !important;
  height: auto !important;
  max-width: min(100%, calc(100vw - 14rem));
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  object-fit: contain;
  background: #fff;
}

/* Caption duplicates PDP copy and pushes the dialog past the viewport */
#product-modal .modal-content .modal-body .image-caption {
  display: none !important;
}

#product-modal .modal-content .modal-body .thumbnails {
  position: relative;
  flex: 0 0 6.5rem;
  width: 6.5rem;
  max-width: 6.5rem;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  align-self: center;
  overflow: hidden;
}

#product-modal .modal-content .modal-body .mask {
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  margin-top: 0 !important;
  overflow: hidden;
}

/* Classic .product-images>li{display:inline} would make a horizontal strip and
 * steal width from the large cover — keep a vertical column in the modal. */
#product-modal .modal-content .modal-body .product-images {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 !important; /* kill Classic margin-left: 2.5rem */
  padding: 0;
  list-style: none;
}

#product-modal .modal-content .modal-body .product-images > li {
  display: block;
  margin: 0;
}

#product-modal .modal-content .modal-body .product-images img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: #fff;
}

/* Page must not scroll while lightbox is open (Bootstrap 3 .in / BS4 .show) */
body.modal-open {
  overflow: hidden !important;
}

@media (max-width: 575px) {
  #product-modal .modal-dialog {
    width: calc(100% - 1.5rem);
  }

  #product-modal .modal-content .modal-body {
    flex-direction: column !important;
  }

  #product-modal .modal-content .modal-body > figure,
  #product-modal .modal-content .modal-body > figure > picture,
  #product-modal .modal-content .modal-body .product-cover-modal,
  #product-modal .modal-content .modal-body .js-modal-product-cover {
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
  }

  #product-modal .modal-content .modal-body .thumbnails {
    max-height: 7rem;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  #product-modal .modal-content .modal-body .mask {
    max-height: 7rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #product-modal .modal-content .modal-body .product-images {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
  }

  #product-modal .modal-content .modal-body .product-images img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
  }
}

/* Compare */
#products-comparison .table,
.page-product-comparison table {
  border: 1px solid var(--color-line);
}

#products-comparison td,
.page-product-comparison td {
  font-family: var(--font-spec);
  font-size: var(--text-spec);
}

/* Cart */
.cart-grid .cart-summary {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1rem;
}

/* ==== _a11y.css ==== */
/**
 * Stage 16 — accessibility polish
 */
:focus-visible {
  outline: 2px solid var(--color-accent, #1fa8a0);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-brand);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}
#top-menu > li > a:focus-visible {
  background: var(--color-accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.theme-abarco-hvac, body { --aba-theme: "abarco-hvac"; }
/* bust 1792672800 — PDP lightbox v2: centered white box + image inside viewport */