/*!
 * BAARI by Kanishk — static export fixes
 * Font Awesome's inline-SVG icons (svg-inline--fa) get their size from the
 * fontawesome-svg-core stylesheet, which is injected by JS on WordPress and
 * therefore absent from a static export. Without it these SVGs fall back to
 * their intrinsic size and blow the layout apart (e.g. the YouTube follow
 * icon under the video feed). These are the standard Font Awesome base rules.
 */
.svg-inline--fa {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  font-size: inherit;
}

.svg-inline--fa.fa-lg  { vertical-align: -0.225em; }
.svg-inline--fa.fa-w-1  { width: 0.0625em; }
.svg-inline--fa.fa-w-2  { width: 0.125em; }
.svg-inline--fa.fa-w-3  { width: 0.1875em; }
.svg-inline--fa.fa-w-4  { width: 0.25em; }
.svg-inline--fa.fa-w-5  { width: 0.3125em; }
.svg-inline--fa.fa-w-6  { width: 0.375em; }
.svg-inline--fa.fa-w-7  { width: 0.4375em; }
.svg-inline--fa.fa-w-8  { width: 0.5em; }
.svg-inline--fa.fa-w-9  { width: 0.5625em; }
.svg-inline--fa.fa-w-10 { width: 0.625em; }
.svg-inline--fa.fa-w-11 { width: 0.6875em; }
.svg-inline--fa.fa-w-12 { width: 0.75em; }
.svg-inline--fa.fa-w-13 { width: 0.8125em; }
.svg-inline--fa.fa-w-14 { width: 0.875em; }
.svg-inline--fa.fa-w-15 { width: 0.9375em; }
.svg-inline--fa.fa-w-16 { width: 1em; }
.svg-inline--fa.fa-w-17 { width: 1.0625em; }
.svg-inline--fa.fa-w-18 { width: 1.125em; }
.svg-inline--fa.fa-w-19 { width: 1.1875em; }
.svg-inline--fa.fa-w-20 { width: 1.25em; }
.svg-inline--fa.fa-fw   { width: 1.25em; }

/* The YouTube feed's follow button reads better at a legible size. */
.sby_footer .sby_follow_btn .svg-inline--fa { height: 1.6em; width: auto; }

/* ------------------------------------------------------------------
   Blog / category listing alignment

   WordPress served every post thumbnail at one cropped size. The export
   captured mixed sizes (767x538 and 767x400), so cards came out at
   different heights and the masonry packer staggered the rows.
   Locking the thumbnail ratio and reserving two lines for the title makes
   every card the same height, so the rows line up evenly.
   ------------------------------------------------------------------ */
.pxl-post-grid .pxl-post--featured,
.pxl-news-grid .pxl-post--featured {
  position: relative;
  width: 100%;
  aspect-ratio: 767 / 538;
  overflow: hidden;
}

.pxl-post-grid .pxl-post--featured img,
.pxl-news-grid .pxl-post--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Give the headline exactly two lines, so one- and two-line titles occupy
   the same space and every card ends up the same height. */
.pxl-post-grid .pxl-post--title,
.pxl-news-grid .pxl-post--title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2lh;
}

@supports not (height: 1lh) {
  .pxl-post-grid .pxl-post--title,
  .pxl-news-grid .pxl-post--title { height: auto; min-height: 3em; }
}

/* Keep the category/date row to a single line — a post filed under two
   categories would otherwise make its card taller than the rest. */
.pxl-post-grid .pxl-post--metas,
.pxl-news-grid .pxl-post--metas,
.pxl-post-grid .pxl-post--category,
.pxl-news-grid .pxl-post--category {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  height: 38px;
}

/* Keep the excerpt from varying the card height by more than a line. */
.pxl-post-grid .pxl-post--excerpt,
.pxl-news-grid .pxl-post--excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .pxl-post-grid .pxl-post--featured,
  .pxl-news-grid .pxl-post--featured { height: 0; padding-bottom: 70.14%; }
  .pxl-post-grid .pxl-post--featured img,
  .pxl-news-grid .pxl-post--featured img { position: absolute; inset: 0; }
}

/* ------------------------------------------------------------------
   Single, always-visible header

   The theme ships two full headers: the normal one, plus a duplicate
   (.pxl-header-elementor-sticky) that slides down once you scroll past the
   first screen. That means the menu disappears and then reappears in a
   slightly different bar.

   Here the duplicate is switched off and the real header is pinned to the top
   of the window, so there is one menu bar and it stays put at all times.
   The wrapper gets matching top padding so no content hides underneath.
   ------------------------------------------------------------------ */
/* Desktop: drop the scroll-away copy and keep the pinned one on screen
   from the very top, so there is exactly one menu bar and it never moves. */
@media (min-width: 1201px) {
  .pxl-header-elementor-main {
    display: none !important;
  }

  .pxl-header-elementor-sticky {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1001;
    box-shadow: 0 2px 14px rgba(7, 32, 50, 0.08);
  }

  /* 89px = the pinned bar's measured height with the logo at a uniform 74px.
     Keep these in step with that or content either slides under the bar or
     leaves a white strip below it. */
  .pxl-wapper { padding-top: 89px; }
  html { scroll-padding-top: 101px; }

  /* The individual product pages use Elementor's header template instead of the
     theme header: its first section is the nav row, so pin that one. (Left
     unpinned on smaller screens, where that template stacks to full height.) */
  header > .elementor > .elementor-top-section:first-child {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1001;
    background-color: #fff;
    box-shadow: 0 2px 14px rgba(7, 32, 50, 0.08);
  }

  header > .elementor { padding-top: 89px; }
}

/* Tablet / mobile: the bar is the header element itself — pin that. */
@media (max-width: 1200px) {
  header.is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1001;
    background-color: #fff;
    box-shadow: 0 2px 14px rgba(7, 32, 50, 0.08);
  }

  .pxl-wapper { padding-top: 80px; }
  html { scroll-padding-top: 92px; }
}

/* Menu items with no submenu still carry an empty caret placeholder. One of
   the stylesheets the export dropped used to leave it `display:inline`, so it
   measured zero; on its own it falls back to `inline-block` and takes 14px.
   Six of those add 84px to the nav, which pushes the Brochure button onto a
   second row and doubles the header height at 1220-1280 and 1420-1520.
   All 783 of these spans across the site are empty, so hiding them is safe;
   carets on items that do have a submenu keep their own class and are
   untouched. */
.pxl-item-menu-icon.pxl-hide {
  display: none !important;
}

/* Menu labels are single words plus a space; letting them break mid-item is
   never wanted in a nav bar. */
header .pxl-menu-item-text,
.pxl-header-elementor-sticky .pxl-menu-item-text {
  white-space: nowrap;
}

/* The theme hides the "Call support 24/7 / 1800 570 2727" text below 1400px
   and shows it above, but the row does not actually have room for it until
   about 1436px: between those the label reappears and pushes the Brochure
   button onto a second line. The threshold is simply 40px too low, so the
   theme's own class keeps its meaning and just holds a little longer. */
@media (max-width: 1439px) {
  .pxl-hidden-s1400 {
    display: none !important;
  }
}

/* The slide-in mobile panel must cover the whole screen, not just the bar. */
.pxl-header-menu-scroll {
  z-index: 1002;
}

/* ------------------------------------------------------------------
   Hero slider — always show something behind the headline

   The slide's background is a YouTube video. Until it starts (and if it never
   does) the area behind the headline is empty, so the poster frame is painted
   underneath as a backdrop. The video simply covers it once it plays.
   ------------------------------------------------------------------ */
#SR7_1_1,
sr7-module[id^="SR7_"] {
  background-image: url(../images/hero-video-poster-1280x720.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0d1b26;
  /* sr7-module is a custom element, which browsers lay out as inline by
     default — min-height is ignored until it's a block. */
  display: block;
  position: relative;
  /* The slider computes its own height in JS. If that hasn't happened yet the
     module collapses to zero and the slide text spills onto a blank page, so a
     floor is set here — a taller computed height still wins. */
  min-height: 460px;
}

@media (min-width: 768px)  { #SR7_1_1, sr7-module[id^="SR7_"] { min-height: 560px; } }
@media (min-width: 1025px) { #SR7_1_1, sr7-module[id^="SR7_"] { min-height: 640px; } }

/* The wrapper the slider sits in collapses to zero on small screens, which
   drops the poster and leaves the slide text on a blank strip. Give the whole
   chain the same floor. */
.wp-block-themepunch-revslider {
  display: block;
  min-height: 460px;
  position: relative;
  background-image: url(../images/hero-video-poster-1280x720.webp);
  background-size: cover;
  background-position: center center;
  background-color: #0d1b26;
}

@media (min-width: 768px)  { .wp-block-themepunch-revslider { min-height: 560px; } }
@media (min-width: 1025px) { .wp-block-themepunch-revslider { min-height: 640px; } }

#SR7_1_1 > sr7-content,
sr7-module[id^="SR7_"] > sr7-content {
  min-height: inherit;
}

/* On phones the slide text sits directly on the poster, so keep it readable */
@media (max-width: 767px) {
  .wp-block-themepunch-revslider::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(7, 32, 50, 0.45);
    pointer-events: none;
  }
  .wp-block-themepunch-revslider sr7-module { position: relative; z-index: 1; }
}

/* Keep the headline readable over the poster */
#SR7_1_1.baari-hero-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(7, 32, 50, 0.35);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------------
   Thank-you page (shown after a contact form submission)
   ------------------------------------------------------------------ */
.baari-thanks {
  padding: 70px 20px 90px;
}

.baari-thanks__card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(7, 32, 50, 0.10);
  padding: 48px 40px 44px;
  text-align: center;
}

.baari-thanks__tick { margin-bottom: 18px; }

.baari-thanks__title {
  color: #072032;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 16px;
}

.baari-thanks__text {
  color: #5b6b78;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.baari-thanks__text--small { font-size: 15px; }
.baari-thanks__text a { color: #072032; }

.baari-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.baari-thanks__btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 100px;
  border: 2px solid #86bb46;
  color: #072032;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.baari-thanks__btn:hover { background: #86bb46; color: #fff; }

.baari-thanks__btn--primary { background: #86bb46; color: #fff; }
.baari-thanks__btn--primary:hover { background: #072032; border-color: #072032; }

@media (max-width: 600px) {
  .baari-thanks { padding: 44px 16px 60px; }
  .baari-thanks__card { padding: 34px 22px 30px; }
  .baari-thanks__title { font-size: 25px; }
  .baari-thanks__text { font-size: 16px; }
  .baari-thanks__actions { flex-direction: column; }
  .baari-thanks__btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Cross-browser safety net

   Older Safari and Firefox releases need a couple of extras that Chrome
   doesn't: the standard line-clamp property alongside the -webkit- one, and
   explicit edge offsets next to the `inset` shorthand.
   ------------------------------------------------------------------ */
.pxl-post-grid .pxl-post--title,
.pxl-news-grid .pxl-post--title,
.pxl-post-grid .pxl-post--excerpt,
.pxl-news-grid .pxl-post--excerpt,
.sby_video_title {
  line-clamp: 2;
}

.pxl-post-grid .pxl-post--excerpt,
.pxl-news-grid .pxl-post--excerpt,
.sby_video_title {
  line-clamp: 3;
}

.sby_thumbnail_hover,
.sby_video_thumbnail_wrap .sby_play_btn,
.baari-lightbox {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Safari needs the prefix for smooth momentum scrolling in the mobile panel */
.pxl-header-menu-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Consistent form control rendering across engines */
input,
select,
textarea,
button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}

/* iOS Safari zooms the whole page in when you focus a field smaller than 16px,
   and doesn't zoom back out. 16px keeps the layout steady on iPhone. */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------------
   Logos always keep their proportions

   The theme sizes logos by height and lets the width follow. A safety net so
   no stray width/height attribute or generic img rule can ever stretch or
   crop them again.
   ------------------------------------------------------------------ */
.pxl-header-branding img,
.pxl-logo img,
.pxl-logo-mobile img,
.pxl-footer-logo img,
.pxl-item--logo img {
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------------
   YouTube feed

   The plugin normally builds this feed's grid and positions the caption and
   play button over each thumbnail from JS. Without WordPress that never runs,
   so the videos were crammed into a single flex row with their captions
   spilling across the images. This lays the feed out as a card grid and puts
   the caption/play button back where they belong.
   ------------------------------------------------------------------ */
.baari-yt-grid {
  /* The rail below does the laying out now; this is just the block that holds
     the channel panel, the rail and the arrows. */
  display: block !important;
  position: relative;
}

.baari-yt-grid > .elementor-column {
  grid-column: 1 / -1;      /* the "Visit our channel" panel gets its own row */
  width: 100% !important;
}

.baari-yt-grid > .sby_item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sby_item .sby_inner_item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(7, 32, 50, 0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.sby_item:hover .sby_inner_item {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(7, 32, 50, 0.18);
}

/* thumbnail keeps a clean 16:9 frame */
.sby_video_thumbnail_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1b26;
}

.sby_video_thumbnail_wrap a.sby_video_thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}

.sby_video_thumbnail_wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* caption: an overlay along the bottom, not loose text under the image */
.sby_thumbnail_hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: linear-gradient(to top, rgba(4, 16, 26, 0.92) 0%, rgba(4, 16, 26, 0.55) 45%, rgba(4, 16, 26, 0) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.sby_item:hover .sby_thumbnail_hover,
.sby_video_thumbnail:focus-visible .sby_thumbnail_hover {
  opacity: 1;
}

.sby_video_title {
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* play button centred over the thumbnail (scoped — the promo panel above the
   feed contains a stray one that must stay in the text flow) */
.sby_video_thumbnail_wrap .sby_play_btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sby_video_thumbnail_wrap .sby_play_btn .sby_play_btn_bg { display: none; }

.sby_video_thumbnail_wrap .sby_play_btn svg {
  width: 46px !important;
  height: 46px !important;
  color: #ff0000;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  transition: transform .25s ease;
}

.sby_item:hover .sby_video_thumbnail_wrap .sby_play_btn svg { transform: scale(1.12); }

/* the loose play icon sitting in the promo panel serves no purpose here */
.elementor-widget-text-editor > .sby_play_btn { display: none; }

/* feed footer buttons */
.sby_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.sby_footer .sby_load_btn {
  background: #86bb46;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sby_footer .sby_load_btn:hover { background: #072032; }

@media (max-width: 520px)  { .baari-yt-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------
   Stray carousel progress bars

   Some theme carousels use a Swiper "progressbar" for their pagination. Swiper
   sizes and positions that bar when it initialises; these particular carousels
   never initialise on a static build, so the bar was left at full width — a
   stray green line stretching across the page (product and about pages).

   Hidden unless its carousel really did initialise, in which case it still
   works as intended.
   ------------------------------------------------------------------ */
.swiper-pagination-progressbar,
.swiper-pagination-progressbar-fill,
.pxl-swiper-pagination-progressbar {
  display: none !important;
}

.swiper-initialized .swiper-pagination-progressbar,
.swiper-initialized .swiper-pagination-progressbar-fill,
.swiper-container-initialized .swiper-pagination-progressbar,
.swiper-container-initialized .swiper-pagination-progressbar-fill {
  display: block !important;
}

/* the empty 1px track those bars sat on */
.pxl-swiper-dots-wrap:empty,
.pxl-swiper-dots:empty {
  display: none;
}

/* ------------------------------------------------------------------
   Gallery "load more" leftovers

   The gallery grid uses Royal Addons' ajax pagination. Its loading spinner and
   its "End of Content." notice are meant to be hidden until the script decides
   to show them — that script needs WordPress, so on a static build both were
   left visible under the grid. The Load More button is a normal link to the
   next gallery page, so it keeps working.
   ------------------------------------------------------------------ */
.wpr-pagination-finish,
.wpr-pagination-loading,
.wpr-double-bounce {
  display: none !important;
}

/* The button's purple comes from the site's own Elementor settings, so it is
   left exactly as it appears on the live site. */

/* ------------------------------------------------------------------
   "Why choose us" counter cards — responsive alignment

   The three cards (Baari Fabricator / Happy Customer / Years Warranty) are
   absolutely positioned with hard-coded left offsets meant for desktop. Below
   1200px two of them are given the SAME offset, so they land exactly on top of
   each other — which is why only one or two cards were visible on tablet and
   phone. Below the desktop breakpoint they are returned to normal flow and laid
   out as an even row that wraps.
   ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .elementor-element-be9246a,
  .elementor-element-01fd322,
  .elementor-element-2f57693 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(33.333% - 12px) !important;
    margin: 0 6px 18px !important;
  }

  /* keep them in the intended reading order: Fabricator, Customer, Warranty */
  .elementor-element-be9246a { order: 1; }
  .elementor-element-2f57693 { order: 2; }
  .elementor-element-01fd322 { order: 3; }

  .elementor-element-be9246a .pxl-item--inner,
  .elementor-element-01fd322 .pxl-item--inner,
  .elementor-element-2f57693 .pxl-item--inner {
    height: 100%;
  }
}

/* The same duplicated-offset mistake exists on wide screens, where the first
   and third cards are both pushed to the same position. Restore the three
   distinct offsets used at normal desktop width. */
@media (min-width: 1601px) {
  .elementor-element-be9246a { left: 75px !important; }
  .elementor-element-2f57693 { left: 330px !important; }
  .elementor-element-01fd322 { left: 580px !important; }
}

/* On phones a third of the width is too narrow for the labels — stack them. */
@media (max-width: 767px) {
  .elementor-element-be9246a,
  .elementor-element-01fd322,
  .elementor-element-2f57693 {
    width: 100% !important;
    margin: 0 0 16px !important;
  }

  /* The "Happy Customer" card carries elementor-hidden-mobile, so phones only
     ever saw two of the three figures. Now that the row stacks, show it. */
  .elementor-element-2f57693.elementor-hidden-mobile {
    display: block !important;
  }

  /* The coloured card is capped at 240px, which left a ragged gap down the
     right-hand side once stacked. Let it fill the column. */
  .elementor-element-be9246a .pxl-item--inner,
  .elementor-element-01fd322 .pxl-item--inner,
  .elementor-element-2f57693 .pxl-item--inner {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ------------------------------------------------------------------
   Store locator icons

   The locator's templates ask for `.icon-mail`, but the fontello icon set
   shipped with the export only defines `.icon-mail-1` / `.icon-mail-alt`.
   Without this the email row rendered as an empty box.
   ------------------------------------------------------------------ */
.icon-mail:before {
  font-family: 'asl-icons';
  content: '\e816';
}

/* Category / archive listing (single-column layout) — same treatment so every
   post image is the same shape down the page. */
.pxl-item--archive .pxl-item--featured {
  position: relative;
  width: 100%;
  aspect-ratio: 860 / 511;
  overflow: hidden;
}

.pxl-item--archive .pxl-item--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ------------------------------------------------------------------
   WP Rocket "lazy render"

   The export carries WP Rocket's rule

       [data-wpr-lazyrender] { content-visibility: auto; }

   which tells the browser to skip laying out those blocks until they
   are near the viewport. On the live site WP Rocket's own script pairs
   each one with a contain-intrinsic-size so the page still reserves the
   right amount of room. That script isn't part of a static export, so
   the blocks reported zero height instead — the footer (the last one on
   the page) collapsed to nothing, which also shortened the document so
   it could never scroll into view and un-collapse itself.

   Turning the optimisation off costs nothing here: every page is a flat
   file served from cache, and the layout must be correct first.
   ------------------------------------------------------------------ */
[data-wpr-lazyrender] {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* ------------------------------------------------------------------
   Footer — keep the four columns balanced at every width

   The footer is one row of four .elementor-col-25 columns: About,
   Contact, and the two Experience Centre maps. Elementor exports a
   per-breakpoint width for each of them, and between 768px and 1199px
   those add up to 230%:

       @media (max-width:1199px) and (min-width:576px)
           column 1 -> 35%    column 3 -> 65%
           column 2 -> 65%    column 4 -> 65%

   The row is display:flex; flex-wrap:wrap, so the overflow wraps: the
   first two columns share a line (35/65), then each map drops onto a
   line of its own at 65% width. That is the lopsided footer — a narrow
   Jodhpur map above a much wider Delhi one, with the right third of the
   row left empty.

   Below 768px a second rule resets all four to 100%, so only the
   768–1199px band is affected. Two columns per line is the sensible
   shape for that width, so the four are pinned to 50% and wrap 2x2.
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
  footer#pxl-footer-elementor .elementor-column.elementor-col-25 {
    width: 50% !important;
  }
}

/* ------------------------------------------------------------------
   Footer maps — same size on every page

   The two Experience Centre maps were sized per page in Elementor
   rather than from a shared style, and each had its own defect:

     - Home shipped 150px-tall maps; every other page used 300px.
     - The Jodhpur widget carried elementor-widget-laptop__width-initial,
       which pins it to max-width:342px, so it stayed narrow while its
       column grew — the lopsided pair in the 768–1199px band.
     - The Delhi column's widget wrap had a stray margin-left:6px, so
       that map sat 6px narrower than its neighbour at every width.

   One height for all 52 pages, no width cap, and no stray gutter, so
   the pair reads as a matched set wherever it appears. The margin reset
   is safe to apply to all four columns — only the Delhi one was ever
   non-zero, so this aligns the row rather than changing it.
   ------------------------------------------------------------------ */
footer#pxl-footer-elementor .elementor-widget-google_maps,
footer#pxl-footer-elementor .elementor-widget-google_maps .elementor-widget-container,
footer#pxl-footer-elementor .elementor-custom-embed {
  width: 100% !important;
  max-width: none !important;
}

footer#pxl-footer-elementor .elementor-column > .elementor-widget-wrap {
  margin: 0 !important;
}

footer#pxl-footer-elementor .elementor-custom-embed,
footer#pxl-footer-elementor .elementor-custom-embed iframe {
  height: 300px !important;
}

footer#pxl-footer-elementor .elementor-custom-embed iframe {
  width: 100% !important;
  display: block;
  border: 0;
}

/* ------------------------------------------------------------------
   Header logo — one file, one size, on every page

   Two problems shipped in the export:

   1. Two different logo files were in use. Pages served Picture1.png
      below 1280px — the older mark without the "Gateway of Fortune &
      Future" line — and Baari-Logo.png above it, so the brand changed
      as the window was resized. All 210 header references were swapped
      to Baari-Logo.png; the Picture1-1-*.png favicons are a separate
      asset and were left alone.

   2. The size was set per page on the image itself, via each page's own
      elementor-element-<hash> rule, so it drifted:

          index / about / product pages   144x74
          contact / gallery / blog /
          services / thank-you / category 103x53
          product pages on mobile         144x74 in an 80px-tall bar

   Sizing by height with width:auto pins it to the header bar rather
   than to a per-page pixel width, so the mark stays put no matter which
   template a page uses. 74px matches the home page desktop header;
   47px matches the compact bar used below 1280px.

   Matching on the filename covers both header templates
   (#pxl-header-elementor and the product pages' #masthead) and every
   logo holder in them. The footer's Barri-White-logo is a different
   file and is deliberately not affected.

   max-height has to be cleared as well. The smaller pages cap the mark
   with a per-page rule like

       .elementor-47 .elementor-element-5979274 .pxl-logo img
           { max-height: 53px; }

   and a max-height caps the used height whatever the height property
   says — !important on height alone does not beat it.
   ------------------------------------------------------------------ */
/* The 2026 logo is a 3.85:1 horizontal lockup where the old one was 1.94:1.
   The branding cell is only ~220px wide, so pinning the height to 74px made
   the width overflow and get clamped by max-width — which squashed the logo
   to 2.96:1. Driving it from the available width instead keeps the aspect
   correct and lets the height fall where it may, up to the old 74px. */
header#pxl-header-elementor img[src*="baari-logo-dark"],
header#masthead img[src*="baari-logo-dark"] {
  /* The logo carries no width/height attributes, so with height:auto the
     header has no logo height until the file arrives — then it grows and
     shoves the menu down. That single reflow was measuring as 0.5 CLS.
     Declaring the ratio reserves the box from the first layout pass. */
  aspect-ratio: 766 / 215;
  height: auto !important;
  max-height: 74px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

@media (max-width: 1279px) {
  header#pxl-header-elementor img[src*="baari-logo-dark"],
  header#masthead img[src*="baari-logo-dark"] {
    height: auto !important;
    max-height: 47px !important;
  }
}

/* ------------------------------------------------------------------
   Header logo — sit on the same line as the menu

   Once the mark was a single size, two leftovers still knocked it out
   of alignment with the nav:

   1. The logo column's widget wrap carries a per-page vertical padding
      (6px on the home page, 15px on contact/gallery/blog/services/
      thank-you/category). That padding offsets the logo and changes the
      header's height, so the bar was 93px on one page and 104px on the
      next.

   2. The image is display:inline on some templates and block on others.
      An inline image sits on the text baseline, which adds a few pixels
      of descender space underneath and shifts it up relative to the nav.

   Pinning the padding and forcing block display puts the logo's centre
   on the menu's centre on every template.
   ------------------------------------------------------------------ */
header#pxl-header-elementor img[src*="baari-logo-dark"],
header#masthead img[src*="baari-logo-dark"] {
  display: block;
}

header#pxl-header-elementor .elementor-widget-wrap:has(img[src*="baari-logo-dark"]),
header#masthead .elementor-widget-wrap:has(img[src*="baari-logo-dark"]) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  align-items: center;
}

/* ------------------------------------------------------------------
   Stat blocks (counters) — three equal cards, evenly spaced

   Both the home page ("Why Choose Us") and About Us carry a row of
   three counters, and each was laid out by hand rather than as a grid,
   so no two cards matched.

   Home page. The three cards are elementor-absolute with
   elementor-widget__width-auto, i.e. hand-placed boxes whose width is
   whatever their number happens to measure — "35+", "100+" and "15"
   gave 215.6px, 223.3px and 209.7px. Their left offsets were typed per
   breakpoint and drifted:

       1280px   Baari Fabricator left:79px   Years Warrenty left:79px
       1440px   Baari Fabricator left:75px   Years Warrenty left:580px

   At 1280 two cards share the same left and sit exactly on top of one
   another, which is why the row appears to hold two blocks instead of
   three. Their tops were also 1px apart.

   Below 1280 Elementor drops them back into flow, where they already
   come out equal (3-up with a 12px gap down to 600px, then stacked), so
   only the absolute band needs correcting. The cards stay absolute —
   they are meant to overlap the photo above them — but are given equal
   widths, equal gaps and a shared baseline. The offsets keep the group's
   existing inset (roughly 8.7% to 92% of the row) so the composition
   with the photo is unchanged.

   The three are addressed with sibling combinators rather than element
   ids, so a re-export that renumbers the widgets still lands correctly.
   The order below keeps the current visual sequence — Fabricator,
   Happy Customer, Years Warrenty — because the markup order is
   Fabricator, Years Warrenty, Happy Customer.
   ------------------------------------------------------------------ */
@media (min-width: 1280px) {
  .elementor-widget-pxl_counter.elementor-absolute {
    width: 26% !important;
    max-width: none !important;
    right: auto !important;
    top: auto !important;
    bottom: 7px !important;
    left: 8.7% !important;
    /* "Happy Customer" is the longest label and wraps to two lines between
       1280px and ~1900px, which made that card 285px tall against the
       others' 261px. They are anchored by their bottom edge, so the taller
       one stood up out of the row. A shared floor at the two-line height
       keeps all three the same box whether the label wraps or not. */
    min-height: 285px;
  }

  /* second in markup = Years Warrenty -> right slot */
  .elementor-widget-pxl_counter.elementor-absolute
  ~ .elementor-widget-pxl_counter.elementor-absolute {
    left: 66% !important;
  }

  /* third in markup = Happy Customer -> middle slot */
  .elementor-widget-pxl_counter.elementor-absolute
  ~ .elementor-widget-pxl_counter.elementor-absolute
  ~ .elementor-widget-pxl_counter.elementor-absolute {
    left: 37.35% !important;
  }
}

/* ------------------------------------------------------------------
   About Us counters — the in-flow variant of the same row

   These three are not absolute; they sit in a flex-wrap container with
   a per-page width each (elementor-widget__width-initial), which
   produced 512 / 445 / 512 at 1440 and 512 / 512 / 1024 at 1024 — at
   that width the third card is pushed onto a second row on its own.

   Equal flex thirds put them on one row at matched widths, and they
   drop to one per row on phones.

   :not(.elementor-absolute) is what separates these from the home
   page's cards. That class sits in the markup at every breakpoint —
   only the computed position changes — so the two rules never overlap.
   ------------------------------------------------------------------ */
.elementor-widget-wrap:has(> .elementor-widget-pxl_counter:not(.elementor-absolute)) {
  gap: 24px;
  align-items: stretch;
}

.elementor-widget-pxl_counter:not(.elementor-absolute) {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

/* These cards put the figure and its sentence side by side, so a third of
   the row is not enough space until about 420px per card — at 768px they
   squeeze to 240px each and the last one's text runs out of the section.
   Below 1280px they take a row each instead, which reads better than the
   2-then-1 wrap the export produced. */
@media (max-width: 1279px) {
  .elementor-widget-pxl_counter:not(.elementor-absolute) {
    flex: 1 1 100% !important;
  }
}

/* ------------------------------------------------------------------
   Product pages — don't print the product name twice

   Nine product pages open with the name in the banner <h1> and then
   repeat it verbatim as the underlined section heading immediately
   below, so the same words appear twice in one screenful:

       <h1 class="pxl-item--title h1">Baari Sleek Casement Windows</h1>
       ...
       <div class="pxl-item--title pxl-h-underlined1 div">Baari Sleek
            Casement Windows</div>

   (product-baari-sleek-casement-doors.html repeats it twice, so the
   name shows three times there.)

   This happens at every width — it just becomes obvious below ~1200px,
   where the banner is short enough that both land on the same screen.

   The repeated section heading is hidden and the banner <h1> kept: the
   h1 is the page's real title and its SEO heading. Dropping the section
   heading also lets the copy column and the image carousel start on the
   same line, which they could not while one column carried an extra
   heading.

   The duplicates were tagged in the markup rather than matched here,
   because CSS cannot compare a heading against the page title. To
   restore one, delete its baari-duplicate-title class.
   ------------------------------------------------------------------ */
/* Plain class selector first: this one is load-bearing, and it works in
   every engine. Without it, a browser lacking :has() support would show
   the product name twice again. */
.baari-duplicate-title {
  display: none !important;
}

/* Where :has() is available (Chrome 105+, Safari 15.4+, Firefox 121+),
   collapse the whole heading widget as well, so its wrapper padding goes
   too and the columns close up cleanly. */
.elementor-widget:has(.baari-duplicate-title) {
  display: none !important;
}

/* ------------------------------------------------------------------
   Product page header — keep the bar on one line at 1024–1199px

   The product pages use Elementor's header template, whose nav column
   is a flex-wrap row holding three widgets. Their widths are content
   based, so between 1024px and 1199px they no longer fit:

       1154px   menu 762 + contact 108 + brochure 253 = 1123 in 966
       1280px   menu 710 + contact 108 + brochure 253 = 1071 in 1071

   Over budget, the brochure button wraps onto a second line and the
   header becomes two rows tall — the menu stays aligned, it is the
   button that drops.

   The button is the slack in the row: 252px of it is 8 characters
   inside 68px of padding either side. Trimming that to 24px, plus 8px
   off each menu item, frees ~184px against the 157px shortfall, so the
   row fits without shrinking any text. Only this band is touched; from
   1200px up the original roomier spacing is untouched.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* The menu widget is the other half of the overspend: its
     elementor-widget-tablet_extra__width-initial rule pins it to 762px
     with a matching max-width, while the six items only need 474px. Let
     it size to its content and the row has room to spare. */
  header#masthead .elementor-widget-pxl_menu {
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  header#masthead .pxl-menu-primary > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  header#masthead .elementor-widget-pxl_button a {
    padding-left: 24px !important;
    padding-right: 24px !important;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
   Footer maps — put a gutter back between the pair

   Equalising the two embeds stretched each to the full width of its
   column, so the Jodhpur and Delhi maps ended up edge to edge with no
   separation at all (measured gap: 0px at 768, 1024, 1280 and 1440).

   The gutter is taken from the inner edge of each map only — the left
   map pulls in from its right, the right map from its left — so the
   pair keeps its outer edges flush with the text columns above while
   gaining a 24px channel down the middle. Both stay the same width.

   Side-by-side only. Below 768px the four footer columns stack and the
   maps already sit 84px apart vertically, where a horizontal inset
   would just make one map narrower than the rest of the footer.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  footer#pxl-footer-elementor .elementor-column:has(.elementor-custom-embed) .elementor-custom-embed {
    width: calc(100% - 12px) !important;
    margin-right: 12px;
    margin-left: 0;
  }

  footer#pxl-footer-elementor .elementor-column:has(.elementor-custom-embed)
  ~ .elementor-column:has(.elementor-custom-embed) .elementor-custom-embed {
    margin-right: 0;
    margin-left: 12px;
  }
}

/* ------------------------------------------------------------------
   Product page header — make the menu usable below 1200px

   The 17 individual product pages use Elementor's header template
   (header#masthead) instead of the theme header, and that template has
   no mobile navigation at all: no burger, no drawer, no #pxl-header-mobile
   markup. The theme's own switch only ever hides/shows
   #pxl-header-elementor's two bars, so on a product page the desktop
   menu is what a phone gets.

   Measured on a 375px viewport before this rule:

       header height   1001px
       menu width      545px  (in a 375px viewport)
       items           scattered over 2 rows, "About Us" broken
                       across two lines
       Gallery / Contact Us  laid out at x=371 and x=464 — off-screen,
                       so neither page was reachable from any product
                       page on a phone

   The list is laid out as an even 3-up grid instead: six items on two
   rows, each a full grid cell with a 44px tap target, nothing past the
   right edge. Two columns below 400px, where three would be too narrow
   for "Contact Us".

   This is a repair, not the intended design — the proper fix is a
   mobile menu widget on that header template in Elementor (or pointing
   the product pages at the theme header, which already has a working
   burger and drawer). Worth doing there, since a re-export drops this.
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  header#masthead .pxl-menu-primary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  header#masthead .pxl-menu-primary > li {
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
  }

  header#masthead .pxl-menu-primary > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* The theme's line-height/padding on these anchors makes them 90px
       tall, which turned three stacked rows into a 1100px header. Fixed
       at 46px: still a comfortable tap target, a third of the height. */
    height: 46px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    padding: 0 6px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 399px) {
  header#masthead .pxl-menu-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------
   YouTube feed — one scrolling row instead of a wrapped grid

   Nine tiles in a four-across grid wrapped 4 + 4 + 1, leaving a single
   orphan on a third row with three empty cells beside it. They now sit
   in a rail (built in static-youtube.js, since a scroller has to be the
   tiles' own parent and CSS cannot reparent) and read as one row that
   scrolls sideways.

   Plain overflow scrolling rather than a carousel library: it works in
   every engine, is a native swipe on touch, and keeps keyboard and
   scrollbar access. Arrows are added for pointer users and hide
   themselves when there is nothing left to scroll.
   ------------------------------------------------------------------ */
.baari-yt-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;                 /* GAP in static-youtube.js must match */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 10px;      /* room for the scrollbar, so it clears the tiles */
  scrollbar-width: thin;
}

.baari-yt-rail > .sby_item {
  /* Fluid but bounded: about four tiles on a desktop row, down to one and
     a bit on a phone, so the next tile always peeks in and the row reads
     as scrollable. */
  flex: 0 0 clamp(240px, 24%, 320px);
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .baari-yt-rail { gap: 16px; }
  .baari-yt-rail > .sby_item { flex-basis: clamp(220px, 62%, 280px); }
}

@media (max-width: 520px) {
  .baari-yt-rail > .sby_item { flex-basis: 78%; }
}

/* --- arrows --- */
.baari-yt-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.baari-yt-nav[hidden] { display: none; }

.baari-yt-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(7, 32, 50, 0.15);
  border-radius: 100px;
  background: #fff;
  color: #072032;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.baari-yt-arrow:hover:not(:disabled) { background: #86bb46; border-color: #86bb46; color: #fff; }
.baari-yt-arrow:disabled { opacity: 0.35; cursor: default; }
.baari-yt-arrow:focus-visible { outline: 2px solid #86bb46; outline-offset: 2px; }
.baari-yt-rail:focus-visible { outline: 2px solid #86bb46; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .baari-yt-rail { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   Contact section — keep a gutter at laptop widths

   Between 1100px and 1366px the section's Elementor container is laid
   out full-bleed with no horizontal padding, so the form column ends
   exactly on the window edge:

       vw 1024  container  15..1009   (15px gutter — fine)
       vw 1280  container   0..1280   (flush)
       vw 1366  container   0..1366   (flush)
       vw 1440  container  75..1322   (fine again)

   The e-mail field is the right-most element, so its box and its text
   run straight into the edge of the window — which reads as the details
   being cut off. Restoring a gutter across that band fixes both columns,
   since the address column on the left is flush too.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) and (max-width: 1399px) {
  .elementor-top-section:has(#baariOnlyContactForm) > .elementor-container {
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
   Hero video — hide YouTube's own title bar

   The background video is a YouTube embed, and YouTube paints the video
   title and channel name across the top-left of the player while it
   initialises (and again whenever the player is scrolled back into
   view). On this hero that lands directly under the logo, reading as
   stray text on the page:

       "1923597 Real Estate Open Plan 1280x720 / ajith kumar"

   It cannot be turned off by parameter: showinfo=0 was deprecated in
   2018 and modestbranding=1 was removed in 2023 — both are already on
   the embed and both are ignored. The overlay shapes above the video do
   not hide it either, since they are semi-transparent.

   Scaling the iframe pushes its top edge (and the title with it) out of
   the module's clip box, so the strip is simply never on screen. 1.2
   moves it ~100px up on a 1028px-tall hero, comfortably clear of the
   title bar, and the extra height covers the bottom edge at the same
   time. It is a background video, so the mild crop costs nothing.
   ------------------------------------------------------------------ */
#SR7_1_1,
sr7-module[id^="SR7_"] {
  overflow: hidden;
}

/* Slider Revolution sets the iframe's transform inline to centre the video
   horizontally (translateX(-193.78px) at 1440px, and it recomputes on
   resize), so a `transform` rule here would either lose to the inline style
   or clobber that centring. The standalone `scale` property composes with
   `transform` rather than replacing it, so the centring survives. */
sr7-module iframe[src*="youtube"],
sr7-module iframe.sr7-media {
  scale: 1.2;
  transform-origin: center center;
}

/* ---------------------------------------------------------------------------
   In-content internal links — bold blue, the same on every page.

   Two problems this fixes. The export lost the link colour on six product
   pages, so those links rendered in the body's dark navy and were
   indistinguishable from surrounding text. And Elementor had set a slightly
   different blue per page — nine variants across the site (#3E94DB, #24A5CF,
   #2C9FE5, #1CBBD6, #1F48D3, #0069FF, #481FDE and others).

   Scoped to #pxl-content-main, which every page has and which contains
   neither the header nor the footer, so those keep their own styling.
   Limited to relative hrefs: that leaves the red "Watch on YouTube" button
   and the tel:/mailto: dealer lists alone.

   :is() is deliberately not used — if a browser did not support it the whole
   rule would be dropped, so the two selectors are written out in full.
--------------------------------------------------------------------------- */
#pxl-content-main .pxl-text-editor a[href]:not([href^="http"]):not([href^="tel:"]):not([href^="mailto:"]):not([href^="#"]):not([class*="btn"]):not([class*="button"]),
#pxl-content-main .elementor-widget-text-editor a[href]:not([href^="http"]):not([href^="tel:"]):not([href^="mailto:"]):not([href^="#"]):not([class*="btn"]):not([class*="button"]) {
  color: #3e94db !important;
  font-weight: 700 !important;
}
#pxl-content-main .pxl-text-editor a[href]:not([href^="http"]):not([href^="tel:"]):not([href^="mailto:"]):not([href^="#"]):not([class*="btn"]):not([class*="button"]):hover,
#pxl-content-main .elementor-widget-text-editor a[href]:not([href^="http"]):not([href^="tel:"]):not([href^="mailto:"]):not([href^="#"]):not([class*="btn"]):not([class*="button"]):hover {
  color: #2f7ab8 !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Product cards in the service carousels (Home, Doors, Windows)

   Each slide sized itself to its own content, so cards sitting in the same row
   differed in height by 32-64px and the "View More" buttons landed at
   different heights — measured across 360px to 1920px, the gap never closed.

   The carousel itself was fine: Swiper correctly shows 1 slide on phones,
   2 from 768px and 3 from 1024px, with no page overflow. Only the cards
   needed to be equalised.
--------------------------------------------------------------------------- */
.pxl-service-carousel .pxl-swiper-wrapper {
  align-items: stretch;
}
.pxl-service-carousel .pxl-swiper-slide {
  height: auto;
  display: flex;
}
.pxl-service-carousel .pxl-post--container {
  display: flex;
  width: 100%;
}
.pxl-service-carousel .pxl-post--inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
/* The Doors page nests one level deeper than the Windows page
   (.pxl-post--inner > .pxl-post--content > .pxl-btn--wrap), so this level has
   to carry the column too — otherwise margin-top:auto below has no flexible
   parent to push against and the buttons stay unaligned. */
.pxl-service-carousel .pxl-post--content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* the button leaves the text flow and sits on the card's baseline */
.pxl-service-carousel .pxl-btn--wrap {
  margin-top: auto;
}

/* Product names run to one or two lines ("SKY Casement Windows" against
   "Baari Sleek Casement Windows"), which pushed the body copy out of step
   across a row. Reserving two lines keeps every excerpt starting level.
   The em value is the fallback for browsers without the lh unit. */
.pxl-service-carousel .pxl-post--title {
  min-height: 2.9em;
  min-height: 2lh;
}

/* Excerpts are pre-truncated by the theme but still ran to three or four
   lines. Fixing them at three keeps the card faces uniform. */
.pxl-service-carousel .pxl-post--excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* This list is empty on every card that has it — it rendered as a stray
   chevron under the excerpt with no label beside it. */
.pxl-service-carousel .pxl-feature--list {
  display: none;
}


/* ---------------------------------------------------------------------------
   Footer logo — the 2026 light lockup

   This one is stacked (1.27:1) where the previous footer logo was a wide
   3.85:1 strip, so at the same width it renders roughly three times taller
   and would push the footer columns apart. Capping the height keeps the
   footer proportions while letting the mark stay legible, and the aspect
   ratio reserves its box so nothing shifts while the file loads.
--------------------------------------------------------------------------- */
#pxl-footer-elementor img[src*="baari-logo-light"],
footer img[src*="baari-logo-light"] {
  aspect-ratio: 768 / 605;
  width: auto !important;
  height: auto !important;
  max-height: 150px !important;
  max-width: 100% !important;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  #pxl-footer-elementor img[src*="baari-logo-light"],
  footer img[src*="baari-logo-light"] {
    max-height: 120px !important;
  }
}

/* ------------------------------------------------------------------
   Counter cards — equal height at every width

   The three cards are absolutely positioned and independently sized, so each
   one is only as tall as its own text. Their labels are different lengths, and
   around 1440px the card is 216px wide — just narrow enough that "Happy
   Customer" wraps to two lines while "Baari Fabricator" and "Years Warranty"
   stay on one. That made the middle card 24px taller than its neighbours.

   Reserving two lines for the label keeps all three the same height whatever
   the wrapping does, at any width, rather than chasing it with a breakpoint.
   Applied only while the cards sit in a row; below 768px they stack full
   width and every label already fits on one line.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .elementor-element-be9246a .pxl-item--title,
  .elementor-element-2f57693 .pxl-item--title,
  .elementor-element-01fd322 .pxl-item--title {
    min-height: 3em;      /* 2 lines at 16px/24px, for browsers without lh */
    min-height: 2lh;
  }
}

/* ------------------------------------------------------------------
   About Us collage — keep the two photos in proportion

   Both images carry width/height attributes from the original upload
   (338x498 and 264x293). Their column narrows below 1440px but the height
   attribute keeps applying, so the photos were being squeezed horizontally —
   at 768px the left one rendered 145x498, an aspect of 0.29 against its true
   0.68. Letting the height follow the width restores the shape.

   Scoped to these two widgets. The same squeeze affects ~129 images
   elsewhere on the site, which is a separate change.
   ------------------------------------------------------------------ */
.elementor-element-0ebd90c .pxl-item--image img,
.elementor-element-eb0b0b4 .pxl-item--image img {
  height: auto !important;
  max-width: 100%;
}

/* With the third photo gone the right-hand column held a single image pinned
   to the top, leaving a tall gap beneath it. Centring it against the taller
   left photo balances the pair. */
@media (min-width: 768px) {
  .elementor-element-0902d71 > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Testimonial cards — equal height across the row

   Each slide sized itself to its own quote, so cards in the same row differed
   by up to 53px and their bottom edges stepped down the row. Measured on both
   Home and About Us at 390-1920px: only 768px happened to line up, because
   every quote wrapped to the same number of lines there by chance.

   Stretching the slides and letting the card fill its slide makes the row
   agree at any width, whatever the quote lengths are.
   ------------------------------------------------------------------ */
.pxl-testimonial-carousel .pxl-swiper-wrapper {
  align-items: stretch;
}
.pxl-testimonial-carousel .pxl-swiper-slide {
  height: auto;
  display: flex;
}
.pxl-testimonial-carousel .pxl-slide-container {
  display: flex;
  width: 100%;
}
.pxl-testimonial-carousel .pxl-slide-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}