/*
 * Home page (#25) module CSS, moved out of the Divi Builder "Custom CSS" fields.
 *
 * Kept in a page-scoped file because part of it targets global selectors
 * (html, body, #page-container, .et_pb_section, .et_pb_tabs*) that must not
 * leak onto the other templates, exactly as before the move.
 * Blocks appear in their original emission order so the cascade is unchanged.
 */

/* ==========================================================================
   Global width fix — from the hero section
   ========================================================================== */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* main wrappers: НЕ ставим overflow hidden, чтобы slab не обрезался */
#page-container,
#et-main-area,
#main-content,
.et-l,
.et_builder_inner_content {
  width: 100% !important;
  max-width: 100% !important;
}

#page-container {
  overflow-x: hidden !important;
}

/* normal sections */
.et_pb_section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Header overflow — the Home copy of the .bm-header rule was dropped as a
   duplicate: the header layout (#34) declares the same properties later in the
   cascade and already won, so removing it changes nothing (verified: computed
   z-index stayed 100 and overflow stayed visible on every page). */
.bm-header,
.bm-header .et_pb_row,
.bm-header .et_pb_column,
.bm-header .et_pb_menu,
.bm-header .et_pb_menu_inner_container,
.bm-header .et_pb_menu__wrap {
  overflow: visible !important;
}

/* ===========================================================================
   Home Page Settings CSS migrated from page 25
   =========================================================================== */

body {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body p,
body li,
.et_pb_text,
.et_pb_text_inner,
.et_pb_text_inner p {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

body h1,
.et_pb_module h1,
.et_pb_text_inner h1 {
  font-size: 82px !important;
  line-height: .98 !important;
}

body h2,
.et_pb_module h2,
.et_pb_text_inner h2 {
  font-size: 58px !important;
  line-height: 1.05 !important;
}

body h3,
.et_pb_module h3,
.et_pb_text_inner h3 {
  font-size: 42px !important;
  line-height: 1.12 !important;
}

body h4,
.et_pb_module h4,
.et_pb_text_inner h4,
.subtitle,
.subheading {
  font-size: 28px !important;
  line-height: 1.25 !important;
}

body h5,
.et_pb_module h5,
.et_pb_text_inner h5 {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

body h6,
.et_pb_module h6,
.et_pb_text_inner h6 {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

@media (max-width: 980px) {
  body h1,
  .et_pb_module h1,
  .et_pb_text_inner h1 {
    font-size: 64px !important;
    line-height: 1 !important;
  }

  body h2,
  .et_pb_module h2,
  .et_pb_text_inner h2 {
    font-size: 48px !important;
    line-height: 1.06 !important;
  }

  body h3,
  .et_pb_module h3,
  .et_pb_text_inner h3 {
    font-size: 34px !important;
  }

  body h4,
  .et_pb_module h4,
  .et_pb_text_inner h4,
  .subtitle,
  .subheading {
    font-size: 24px !important;
  }
}

@media (max-width: 767px) {
  body,
  body p,
  body li,
  .et_pb_text,
  .et_pb_text_inner,
  .et_pb_text_inner p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  body h1,
  .et_pb_module h1,
  .et_pb_text_inner h1 {
    font-size: 44px !important;
    line-height: 1.02 !important;
  }

  body h2,
  .et_pb_module h2,
  .et_pb_text_inner h2 {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }

  body h3,
  .et_pb_module h3,
  .et_pb_text_inner h3 {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  body h4,
  .et_pb_module h4,
  .et_pb_text_inner h4,
  .subtitle,
  .subheading {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  body h5,
  .et_pb_module h5,
  .et_pb_text_inner h5 {
    font-size: 17px !important;
  }

  body h6,
  .et_pb_module h6,
  .et_pb_text_inner h6 {
    font-size: 14px !important;
  }
}

/* Home rows with phone mainElement CSS migrated from Divi. */
@media (max-width: 767px) {
  body.page-id-25 .et_pb_row_72,
body.page-id-25 .et_pb_row_73 {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}

/* Home hero responsive rules migrated from page 25 settings. */
@media (max-width: 980px) {
  .bm-hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .bm-hero-section .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    transform: none !important;
  }
}

/* ===== HERO / SLAB ===== */

/* Divi's saved `transformAnim` on the hero section scales the whole hero to
 * 50% during the first load and then returns it to full size. That produces a
 * visible jump in the heading and slab before the final layout settles. The
 * child theme owns the stable final state; slab hover/touch motion remains in
 * the existing module script below. */
body.home .bm-hero-section.et_animated.transformAnim,
body.home .bm-hero-section {
  animation: none !important;
  transform: none !important;
}

.bm-hero-section {
  position: relative !important;
  z-index: 9000 !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow: visible !important;
}

.bm-hero-section .et_pb_row,
.bm-hero-section .et_pb_column,
.bm-hero,
.bm-hero-inner,
.bm-hero-model {
  overflow: visible !important;
}

.bm-hero-model {
  z-index: 10000 !important;
}

.bm-slab-label {
  z-index: 1000000 !important;
}

/* ===========================================================================
   Migrated from Divi Library layout 496: Corusel - Marble.
   Stable .bm-carousel selectors are already part of the rendered markup.
   =========================================================================== */
.bm-carousel {
  --bm-gap: 24px;
  --bm-visible: 4;
  --bm-arrow-size: 44px;
  --bm-dot: 7px;
  --bm-dot-gap: 10px;
  position: relative;
}

.bm-carousel .bm-carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.bm-carousel .et_pb_posts {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--bm-gap) !important;
  will-change: transform;
}

.bm-carousel .et_pb_post {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 calc((100% - (var(--bm-gap) * (var(--bm-visible) - 1))) / var(--bm-visible)) !important;
  max-width: calc((100% - (var(--bm-gap) * (var(--bm-visible) - 1))) / var(--bm-visible)) !important;
}

/* On desktop/tablet, preserve the centered static layout for genuinely short
   groups. These rules must not reach mobile: mobile uses one card per view and
   turns every tab with at least two cards into a real carousel. */
@media (min-width: 1367px) {
  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(4))) .bm-carousel-track {
    justify-content: center !important;
    transform: none !important;
  }

  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(4))) .bm-carousel-arrow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1366px) and (min-height: 601px) {
  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(3))) .bm-carousel-track {
    justify-content: center !important;
    transform: none !important;
  }

  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(3))) .bm-carousel-arrow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  .bm-carousel {
    --bm-visible: 1;
    --bm-gap: 16px;
  }

  /* Only a genuinely single-card tab is static on mobile. */
  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(2))) .bm-carousel-track {
    justify-content: center !important;
    transform: none !important;
  }

  .bm-carousel:not(:has(.bm-carousel-track > .et_pb_post:nth-child(2))) .bm-carousel-arrow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Keep Divi's below-the-fold animated sections from becoming a permanent
   blank area if the browser misses the first intersection pass. The sections
   still keep their original layout; only the visibility fallback is removed. */
.bm-carousel-section ~ .et_pb_section.et_animated {
  opacity: 1 !important;
  transform: none !important;
}

/* Divi's scroll-animation observer can miss the first pass on a fresh Home
 * load, leaving the hero and above-fold sections transparent for seconds.
 * Fail open for opacity only; transforms and the site's own motion remain
 * available, while content is never hidden behind a missed observer event. */
body.home .et_animated {
  opacity: 1 !important;
}

.bm-carousel .bm-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: var(--bm-arrow-size);
  height: var(--bm-arrow-size);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.bm-carousel .bm-carousel-arrow:hover {
  background: rgba(255, 255, 255, .92);
}

.bm-carousel .bm-carousel-prev {
  left: 10px;
}

.bm-carousel .bm-carousel-next {
  right: 10px;
}

.bm-carousel .bm-carousel-arrow span {
  font-size: 18px;
  line-height: 1;
  color: rgba(60, 50, 46, .9);
}

/* The inline Divi carousel uses a conservative overflow threshold. The
   child script adds these classes from the actual track/viewport geometry so
   a small but real overflow cannot leave the final pixels unreachable. */
.bm-carousel.bm-carousel-has-overflow .bm-carousel-arrow {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.bm-carousel.bm-carousel-no-overflow .bm-carousel-arrow {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.bm-carousel .more-link {
  font-size: 0;
}

.bm-carousel .more-link::after {
  content: "View Details";
  font-size: 14px;
}

/* ==========================================================================
   Carousel section height fix
   ========================================================================== */

.bm-carousel {
  overflow: visible !important;
  padding-bottom: 40px !important;
}

.bm-carousel .bm-carousel-viewport {
  overflow: hidden !important;
  min-height: 0 !important;
}

.bm-carousel .et_pb_ajax_pagination_container {
  overflow: hidden !important;
}

.bm-carousel .et_pb_posts {
  align-items: flex-start !important;
}

.bm-carousel .et_pb_post {
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
}

/* In Stock card surface and typography.
   The Blog module markup has no separate content wrapper: the article itself
   is the card, followed by the image, title, meta and CTA. Keep this contract
   in the child theme so Divi's generic Blog rules cannot make the body
   transparent or apply the global 58px H2 scale. */
.bm-carousel .bm-carousel-track > .et_pb_post {
  background: #f7f5f2 !important;
  color: #5a4b45 !important;
  overflow: hidden !important;
}

.bm-carousel .et_pb_image_container,
.bm-carousel .et_pb_post .entry-featured-image-url {
  margin-bottom: 0 !important;
}

.bm-carousel .et_pb_post .entry-title,
.bm-carousel .et_pb_post .entry-title a {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 42px 20px 8px !important;
  margin: 0 !important;
  color: #5a4b45 !important;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: 42px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
  text-align: center !important;
}

.bm-carousel .et_pb_post .entry-title {
  min-height: 136px !important;
}

.bm-carousel .et_pb_post .entry-title a {
  display: block !important;
  padding: 0 !important;
}

.bm-carousel .et_pb_post .post-meta {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 20px 6px !important;
  color: #5a4b45 !important;
  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

.bm-carousel .et_pb_post .post-meta a {
  color: inherit !important;
  text-decoration: none !important;
}

.bm-carousel .et_pb_post .post-content {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 0 20px 26px !important;
  text-align: center !important;
}

.bm-carousel .et_pb_post .more-link {
  display: inline-block !important;
  margin: 0 !important;
  color: #5a4b45 !important;
  font-family: Montserrat, Helvetica, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.bm-carousel .et_pb_post .more-link::after {
  content: "↗";
  display: inline-block !important;
  margin-left: 4px !important;
  font-size: 14px !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

.bm-carousel .et_pb_post .more-link::before {
  content: "View Details";
  font-size: 14px !important;
}

.bm-carousel .et_pb_post .more-link:hover::after,
.bm-carousel .et_pb_post .more-link:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@media (max-width: 767px) {
  .bm-carousel .et_pb_post .entry-title,
  .bm-carousel .et_pb_post .entry-title a {
    padding-top: 36px !important;
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  .bm-carousel .et_pb_post .entry-title {
    min-height: 116px !important;
  }

  .bm-carousel .et_pb_post .post-meta {
    font-size: 17px !important;
  }
}

/* Divi's inline carousel equalises every card to the tallest measured pane.
   Keep the horizontal track, but let its height follow the actual card content. */
.bm-carousel .bm-carousel-track {
  height: auto !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

.bm-carousel .bm-carousel-track > .et_pb_post {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The carousel script moves the posts into a generated .bm-carousel-track.
   These rules used to live in the Divi inline block; keep the DOM contract in
   the child theme so AJAX tabs and mobile sliders do not fall back to a
   vertical list when the database style is removed. */
.bm-carousel {
  --bm-card-width: calc((100% - (var(--bm-gap) * (var(--bm-visible) - 1))) / var(--bm-visible));
  display: block !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
}

.bm-carousel,
.bm-carousel * {
  box-sizing: border-box !important;
}

.bm-carousel .bm-carousel-old-wrapper {
  display: none !important;
}

.bm-carousel .bm-carousel-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--bm-gap) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  overflow: visible !important;
  will-change: transform;
  transform-origin: left center !important;
}

.bm-carousel .bm-carousel-track > .et_pb_post {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 var(--bm-card-width) !important;
  width: var(--bm-card-width) !important;
  max-width: var(--bm-card-width) !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

@media (max-width: 1366px) {
  .bm-carousel {
    --bm-card-width: calc((100% - (var(--bm-gap) * (var(--bm-visible) - 1))) / var(--bm-visible));
  }
}

@media (max-width: 767px) {
  .bm-carousel {
    --bm-visible: 1;
    --bm-card-width: calc((100% - (var(--bm-gap) * (var(--bm-visible) - 1))) / var(--bm-visible));
  }
}

/* запас снизу для секции, чтобы карточки не налазили на следующий блок */
.bm-carousel-section {
  padding-bottom: 80px !important;
  overflow: visible !important;
}

/* ==========================================================================
   Deferred tab panes ("In Stock Materials")
   Panes that ship empty and are fetched when the tab is opened.
   ========================================================================== */

.bm-tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 499px;
}

/* Reserve the final card-pane height before a deferred tab is fetched. This
   keeps the beige section and the following block in place while the AJAX
   response and carousel initialization complete. */
.bm-carousel-section .et_pb_tab[data-bm-deferred-tab],
.bm-carousel-section .et_pb_tab.bm-tab-priming {
  min-height: 499px !important;
}

/*
 * A freshly fetched pane arrives as plain Divi blog markup: a stacked list of
 * posts inside .et_pb_ajax_pagination_container. The carousel script only turns
 * it into a carousel on its debounced resize handler, ~150-300ms later, and
 * until then that raw list is on screen — which reads as the styles landing in
 * jumps. So the pane stays hidden from the moment it is filled until the
 * carousel reports itself ready.
 *
 * visibility, not display: the carousel measures card widths during init, and
 * display:none would give it zeroes.
 */
.et_pb_tab.bm-tab-priming .bm-carousel {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

/* Timeout fallback: keep the raw response inside the reserved pane instead
   of allowing its unmeasured post list to stretch the whole section. The
   mutation observer in instock-lazy.js removes both classes once Divi finishes
   the normal carousel initialization. */
.et_pb_tab.bm-tab-priming.bm-tab-forced .bm-carousel {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  visibility: visible !important;
}

.et_pb_tab.bm-tab-priming.bm-tab-forced .bm-carousel .bm-carousel-viewport {
  height: 100% !important;
  opacity: 1 !important;
}

/* The spinner keeps running underneath so the tab never looks frozen. */
.et_pb_tab.bm-tab-priming .bm-tab-placeholder {
  visibility: visible;
  position: absolute;
  inset: 0;
}

.et_pb_tab.bm-tab-priming {
  position: relative;
  overflow: hidden;
}

/* Deferred tabs start at the reserved spinner height and settle to the real
   card height after AJAX/carousel measurement. Animate that one transition;
   the inline height is removed by instock-lazy.js afterwards so every tab
   remains naturally responsive. */
.et_pb_tab.bm-tab-height-animating {
  overflow: hidden !important;
}

/*
 * Last resort. The carousel keeps its viewport fully transparent until it adds
 * bm-carousel-ready, so if it never gets there — it cannot finish while its
 * pane is closed, and it flags the module as initialised on the way — simply
 * dropping the guard above would leave an empty section with arrows floating
 * in it. This makes the cards visible anyway.
 */
.et_pb_tab.bm-tab-forced .bm-carousel-viewport {
  opacity: 1 !important;
  /* No fade on this path: it is a recovery, and a transition here would be one
     more thing that has to run correctly for the cards to become visible. */
  transition: none !important;
}

/*
 * Fail open for the server-rendered first tab if Divi's inline carousel
 * initializer is late. The track/arrows are already in the DOM by this point;
 * keeping only the viewport transparent makes the whole tab look empty.
 * bm-carousel-ready still wins and removes this recovery class when the normal
 * measurement completes.
 */
.et_pb_tab .bm-carousel.bm-carousel-fallback-visible .bm-carousel-viewport {
  opacity: 1 !important;
  transition: none !important;
}

/* The first tab is server-rendered. Do not let its inline Divi style keep the
   cards transparent while the carousel measures itself; only a deferred pane
   is intentionally hidden during its priming phase. */
.bm-carousel .bm-carousel-viewport {
  opacity: 1 !important;
}

.et_pb_tab.bm-tab-priming .bm-carousel .bm-carousel-viewport {
  opacity: 0 !important;
}

.bm-tab-placeholder__spinner {
  position: relative;
  display: block;
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 999px;
  background: url("../../../../uploads/2025/12/cropped-Transparent-Logo-270x270.png") center / 64px 64px no-repeat;
  filter: drop-shadow(0 8px 14px rgba(92, 75, 61, 0.14));
  animation: bm-tab-compass-settle 2.35s ease-in-out infinite;
}

.bm-tab-placeholder__spinner::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(231, 214, 131, 0.46);
  border-radius: 50%;
  transform: scale(0.78);
  opacity: 0;
  animation: bm-tab-compass-pulse 1.9s ease-out infinite;
}

.bm-tab-placeholder__spinner::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(231, 214, 131, 0) 36deg,
    rgba(231, 214, 131, 0.62) 50deg,
    rgba(255, 255, 255, 0.72) 58deg,
    rgba(231, 214, 131, 0) 72deg,
    transparent 360deg
  );
  filter: blur(0.25px);
  opacity: 0.78;
  animation: bm-tab-compass-sweep 2.4s linear infinite;
}

@keyframes bm-tab-compass-settle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.018); }
}

@keyframes bm-tab-compass-pulse {
  0% { transform: scale(0.78); opacity: 0; }
  24% { opacity: 0.62; }
  100% { transform: scale(1.22); opacity: 0; }
}

@keyframes bm-tab-compass-sweep {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-tab-placeholder__spinner {
    animation: none;
  }

  .bm-tab-placeholder__spinner::before,
  .bm-tab-placeholder__spinner::after {
    animation: none;
  }
}

@media (max-width: 767px) {
  .bm-tab-placeholder,
  .bm-carousel-section .et_pb_tab[data-bm-deferred-tab],
  .bm-carousel-section .et_pb_tab.bm-tab-priming {
    /* Match the one-card mobile carousel pane before AJAX content arrives.
       Without this, syncHeight() expands the pane after the loader is shown. */
    min-height: clamp(540px, 89vw, 681px) !important;
  }

  /* Keep the complete tab row in a scrollable strip. Centering a row wider
     than the phone viewport clips the first and last controls before the user
     can reach them. The active-tab script scrolls the selected control into
     view after a tap. */
  .bm-carousel-section .et_pb_tabs_controls {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .bm-carousel-section .et_pb_tabs_controls::-webkit-scrollbar {
    display: none !important;
  }

  .bm-carousel-section .et_pb_tabs_controls li {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  /* Keep the complete category set discoverable on a normal phone width.
     The previous 26px gaps plus 18px link padding placed Quartz entirely
     outside the initial viewport, so visitors had no visual hint that a
     fourth category existed. */
  .bm-carousel-section .et_pb_tabs_controls {
    gap: 12px !important;
  }

  .bm-carousel-section .et_pb_tabs_controls li a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* A phone rotated to landscape is wider than 767px, but it is still a phone:
   treating it as a four-column desktop carousel makes 42px headings collapse
   into one letter per line. Keep two readable cards in the viewport instead of
   stretching one card across the whole landscape track. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  .bm-carousel {
    --bm-visible: 2;
    --bm-gap: 16px;
    --bm-card-width: calc((100% - var(--bm-gap)) / 2);
  }

  /* Override Divi's tablet centering rule for short groups. A 100%-width
     mobile track must start at the viewport edge; centering an overflowing
     track shifts the first card left and breaks the measured arrow range. */
  .bm-carousel-section .bm-carousel .bm-carousel-track {
    justify-content: flex-start !important;
  }

  /* Divi's tablet rule hides arrows for groups with fewer than three cards;
     that rule must not override the mobile-slider contract above. */
  .bm-carousel-section .bm-carousel.bm-carousel-has-overflow:not(:has(.bm-carousel-track > .et_pb_post:nth-child(3))) .bm-carousel-arrow,
  .bm-carousel-section .bm-carousel.bm-carousel-has-overflow .bm-carousel-arrow {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .bm-carousel .et_pb_post .entry-title,
  .bm-carousel .et_pb_post .entry-title a {
    padding-top: 36px !important;
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  .bm-carousel .et_pb_post .entry-title {
    min-height: 116px !important;
  }

  .bm-carousel .et_pb_post .post-meta {
    font-size: 17px !important;
  }

  /* Divi keeps a 400px image width from the desktop module. On a landscape
     phone that leaves large empty card margins; let the image follow the
     responsive card width while preserving its intrinsic aspect ratio. */
  .bm-carousel .et_pb_post .entry-featured-image-url,
  .bm-carousel .et_pb_post .entry-featured-image-url img,
  .bm-carousel .et_pb_image_container,
  .bm-carousel .et_pb_image_container img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bm-carousel .et_pb_post .entry-featured-image-url img,
  .bm-carousel .et_pb_image_container img {
    height: auto !important;
    object-fit: cover !important;
  }

  .bm-carousel-section .et_pb_tabs_controls {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .bm-carousel-section .et_pb_tabs_controls::-webkit-scrollbar {
    display: none !important;
  }

  .bm-carousel-section .et_pb_tabs_controls li {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  .bm-carousel-section .et_pb_tabs_controls li a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ==========================================================================
   Disabled category links
   ========================================================================== */

/* Disable category archive links only inside selected modules */
.bm-no-category-links .post-meta a,
.bm-no-category-links .et_pb_portfolio_item a[rel="tag"],
.bm-no-category-links .et_pb_post a[rel="category tag"],
.bm-no-category-links .et_pb_post a[rel="tag"],
.bm-no-category-links .project_category a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ==========================================================================
   Tabs: clean luxury style — from the .bm-tabs module
   ========================================================================== */

/* убираем фон/рамки контейнера табов */
.et_pb_tabs,
.et_pb_tabs_controls {
  background: transparent !important;
  border: none !important;
}

/* убираем нижнюю линию/разделители если есть */
.et_pb_tabs_controls {
  box-shadow: none !important;
}

.et_pb_tabs_controls:after {
  display: none !important;
}

/* список табов */
.et_pb_tabs_controls {
  display: flex !important;
  justify-content: center !important;
  gap: 26px !important;
  padding: 0 !important;
  margin: 0 0 26px 0 !important; /* отступ вниз как на макете */
}

/* сами вкладки */
.et_pb_tabs_controls li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* текст табов */
.et_pb_tabs_controls li a {
  display: inline-block !important;
  padding: 10px 18px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: rgba(60, 50, 46, 0.7) !important;

  transition: background 0.25s ease, color 0.25s ease !important;
}

/* активная вкладка (плашка как на фото) */
.et_pb_tabs_controls li.et_pb_tab_active a {
  background: #f3eee8 !important;
  color: rgba(60, 50, 46, 0.9) !important;
}

/* hover */
.et_pb_tabs_controls li a:hover {
  color: rgba(60, 50, 46, 0.9) !important;
}

/* убрать фон внутри вкладок */
.et_pb_all_tabs,
.et_pb_tab {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* если остался внутренний отступ/рамка */
.et_pb_tab {
  padding: 0 !important;
}

/* ==========================================================================
   Portfolio hover cards
   Deduplicated: the block existed twice — once on the row and once on the
   portfolio module inside it. The module copy was emitted last and therefore
   won every conflicting declaration (image aspect-ratio 2/2 over 16/10, the
   -webkit-text-fill-color rules, the uppercase CTA). The merged block below is
   the module copy plus the one rule that only the row copy declared
   (a:hover::after background), so the computed result is identical.
   ========================================================================== */

/* Apply the bm-portfolio-hover class to a Divi Portfolio module. */
.bm-portfolio-hover .et_pb_portfolio_item {
  position: relative;
  overflow: hidden;
  margin-bottom: 36px !important;
}

.bm-portfolio-hover .et_portfolio_image {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* Remove Divi's default hover overlay and plus icon. */
.bm-portfolio-hover .et_portfolio_image .et_overlay {
  display: none !important;
}

.bm-portfolio-hover .et_portfolio_image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.4s ease;
}

.bm-portfolio-hover .et_portfolio_image img {
  display: block;
  width: 100% !important;
  aspect-ratio: 2 / 2 !important;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.bm-portfolio-hover .post-meta {
  display: none;
}

.bm-portfolio-hover h2.et_pb_module_header {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  z-index: 2;
  margin: 0 !important;
  line-height: 1.1;
  transform: translateY(0);
  transition: transform 0.35s ease;
}

/* The title is always white, including when the shared link is hovered. */
.bm-portfolio-hover h2.et_pb_module_header a,
.bm-portfolio-hover h2.et_pb_module_header a:hover,
.bm-portfolio-hover h2.et_pb_module_header a:focus {
  display: inline-block;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
}

/* One visual CTA. It has no independent hover color. */
.bm-portfolio-hover h2.et_pb_module_header a::after {
  content: "View Project";
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: block;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.bm-portfolio-hover h2.et_pb_module_header a:hover::after {
  background: rgba(255, 255, 255, 0.16);
}

.bm-portfolio-hover .et_pb_portfolio_item:hover .et_portfolio_image::after {
  background: rgba(0, 0, 0, 0.36);
}

.bm-portfolio-hover .et_pb_portfolio_item:hover .et_portfolio_image img {
  transform: scale(1.035);
}

.bm-portfolio-hover .et_pb_portfolio_item:hover h2.et_pb_module_header {
  transform: translateY(-42px);
}

.bm-portfolio-hover .et_pb_portfolio_item:hover h2.et_pb_module_header a::after {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices do not have a reliable hover state. */
@media (hover: none), (max-width: 980px) {
  .bm-portfolio-hover .et_portfolio_image::after {
    background: rgba(0, 0, 0, 0.3);
  }

  .bm-portfolio-hover h2.et_pb_module_header {
    transform: translateY(-42px);
  }

  .bm-portfolio-hover h2.et_pb_module_header a::after {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Showroom cards
   ========================================================================== */

/* Apply showroom-card to the card row and showroom-info to its text module. */
.showroom-card {
  position: relative !important;
  overflow: hidden !important;
}

.showroom-card .et_pb_image {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.showroom-card .et_pb_image img {
  display: block !important;
  width: 100% !important;
}

.showroom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.3s ease;
}

.showroom-card:hover::before {
  background: rgba(0, 0, 0, 0.38);
}

.showroom-info {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 22px !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  overflow: visible !important;
}

.showroom-info .et_pb_text_inner {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.showroom-title,
.showroom-info h4 {
  margin: 0 !important;
  color: #fff !important;
  line-height: 0.5 !important;
  font-size: 40px !important;
  transform: translateY(0);
  transition: transform 0.25s ease !important;
}

.showroom-details {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.22s ease, max-height 0.22s ease;
}

.showroom-address {
  margin-top: 10px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* Match the Portfolio CTA. No individual button hover is used. */
.showroom-btn,
.showroom-info a,
.showroom-info a:link,
.showroom-info a:visited,
.showroom-info a:hover,
.showroom-info a:focus {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.showroom-info a::before,
.showroom-info a::after {
  content: none !important;
  display: none !important;
}

.showroom-card:hover .showroom-title,
.showroom-card:hover .showroom-info h4 {
  transform: translateY(-24px);
}

.showroom-card:hover .showroom-details {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

/* Phone breakpoint of the showroom row. This was the module's "phone"
   free-form field, which Divi emitted inside its max-width:767px group. */
@media only screen and (max-width: 767px) {
  .showroom-title,
  .showroom-info h4 {
    margin: 0 !important;
    color: #fff !important;
    line-height: 0.5 !important;

    transform: translateY(0);
    transition: transform 0.25s ease !important;
    font-size: 30px !important;
  }
}

/* ========================================================================== 
   Homepage hero/process spacing at medium and narrow widths
   ========================================================================== */

/* Divi emits a -102px top margin on the first section after the hero. That
   pulls Process into the hero at tablet, phone and smaller desktop widths,
   where the slab label and the hero subtitle are still occupying space. */
body.home .bm-hero-section ~ .et_pb_section.et_pb_flex_section:not(.bm-carousel-section) {
  margin-top: 0 !important;
}

/* Keep the two-column hero readable between the phone breakpoint and the
   wide-desktop layout. At these widths 82px makes each H1 wrap prematurely. */
@media (min-width: 981px) and (max-width: 1200px) {
  body.home .bm-hero-section .hero-title h1,
  body.home .bm-hero-section .hero-title .et_pb_text_inner h1 {
    font-size: clamp(56px, 5.8vw, 64px) !important;
    line-height: 0.98 !important;
  }
}
/* Explicit homepage Process section guard. Divi inserts the Process section
   as et_pb_section_38 after the hidden/visible hero variants; its generated
   -102px margin must not pull it over the hero content. */
body.home .bm-hero-section ~ .et_pb_section_38 {
  margin-top: 0 !important;
}
/* Responsive homepage Process structural guard. The class emitted by Divi is
   et_flex_section (not et_pb_flex_section); target the Process section after
   the desktop and mobile hero variants without relying on section numbers. */
body.home .bm-hero-section + .et_pb_section + .et_flex_section {
  margin-top: 0 !important;
}
/* Responsive slab label clearance. On narrow viewports the 3D model's
   transparent canvas is taller than the visible slab, so the label must sit
   lower to remain visibly below the slab instead of over its bottom edge. */
@media (max-width: 980px) {
  .bm-hero .bm-slab-label {
    bottom: 18% !important;
  }
}