/* Reserve hero carousel space before Woodmart/Swiper initialization to prevent CLS. */
.home .elementor-element-hero_carousel_widget {
  --kaphone-hero-carousel-height: clamp(280px, 44.3vw, 620px);
}

.home .elementor-element-hero_carousel_top,
.home .elementor-element-hero_carousel_widget,
.home .elementor-element-hero_carousel_widget .wd-carousel-inner,
.home .elementor-element-hero_carousel_widget .wd-carousel,
.home .elementor-element-hero_carousel_widget .wd-carousel-wrap,
.home .elementor-element-hero_carousel_widget .wd-carousel-item,
.home .elementor-element-hero_carousel_widget .promo-banner-wrapper,
.home .elementor-element-hero_carousel_widget .promo-banner,
.home .elementor-element-hero_carousel_widget .main-wrapp-img,
.home .elementor-element-hero_carousel_widget .banner-image {
  min-height: var(--kaphone-hero-carousel-height);
}

.home .elementor-element-hero_carousel_widget .wd-carousel-wrap {
  align-items: stretch;
}

.home .elementor-element-hero_carousel_widget .promo-banner-wrapper,
.home .elementor-element-hero_carousel_widget .promo-banner {
  height: 100%;
  aspect-ratio: 1920 / 850;
}

.home .elementor-element-hero_carousel_widget .promo-banner-wrapper {
  display: block !important;
}

.home .elementor-element-hero_carousel_widget .main-wrapp-img,
.home .elementor-element-hero_carousel_widget .banner-image,
.home .elementor-element-hero_carousel_widget .banner-image picture,
.home .elementor-element-hero_carousel_widget .banner-image img {
  width: 100%;
  height: 100%;
}

.home .elementor-element-hero_carousel_widget .banner-image img {
  display: block;
  object-fit: cover;
}

.home .elementor-element-hero_carousel_widget .wd-carousel:not(.wd-initialized) > .wd-carousel-wrap > .wd-carousel-item:not(:first-child) {
  display: none !important;
}

@media (max-width: 768px) {
  .home .elementor-element-hero_carousel_widget {
    --kaphone-hero-carousel-height: clamp(240px, 62vw, 420px);
  }
}

/* Make the main header use full width with explicit side padding instead of the theme container width. */
.whb-main-header .whb-row > .container,
.whb-sticky-header .whb-row > .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(20px, 3vw, 40px);
}

@media (max-width: 1024px) {
  .whb-main-header .whb-row > .container,
  .whb-sticky-header .whb-row > .container {
    padding-inline: 16px;
  }
}