:root {
  --default-size: 16px;
  --default-mobile-size: 14px;
  --dot: 16px;
  --pill-w: 4rem;
  --pill-h: calc(var(--default-size) / 0.45);
  --track: rgba(127, 127, 127, 0.5);
  --ease: cubic-bezier(0.22, 0.9, 0.32, 1);
  --pill-radius: 999px;
  --pill-bg: #ffffff;
  --pill-bg-hover: #ff516a;
  --pill-gap: var(--default-size);
  --pill-padding-x: calc(var(--default-size) * 1.5);
  --pill-padding-y: calc(var(--default-size) / 2);
  --text-color-gray: #7f7f7f;
  --text-color-black: #000000;
  --text-color-light: #ffffff;
  --sb: 0px;
}

.black_color {
  color: var(--text-color-black);
}

.gray_color {
  color: var(--text-color-dark);
}

.light_color {
  color: var(--text-color-light);
}

.greenbg {
  background-color: #2bcb4e;
}

.whitebg {
  background-color: var(--pill-bg);
}

.roundedCorner {
  border-radius: 1.5rem;
}

.blockPadding {
  padding: 1.5rem 2rem;
}

.blockSpacer {
  margin-top: 4rem;
}
.middle_bg.blockSpacer {
  margin-top: 5rem;
}

.blockSpacerMobile {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .blockSpacer {
    margin-top: 1.5rem;
  }

  .blockSpacerMobile {
    margin-top: 1.5rem;
  }
}

.blockSpacerDouble {
  margin-top: 5rem;
}

@media screen and (max-width: 767px) {
  .blockSpacerDouble {
    margin-top: 2.5rem;
  }
}

html,
body {
  font-size: var(--default-size);
}

@media screen and (min-width: 1400px) and (max-width: 1599px) {

  html,
  body {
    font-size: 15px;
  }
}

@media screen and (max-width: 1399px) {

  html,
  body {
    font-size: 13px;
  }
}


@media screen and (max-width: 1200px) {

  html,
  body {
    font-size: 10px;
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: var(--default-size);
  }

  body,
  p {
    font-size: var(--default-mobile-size);
  }
}

.mainInside {
  padding: 0 50px;
  display: block;
  max-width: 1600px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .mainInside {
    padding: 0 20px;
  }
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4.notText {
  font-family: "DelaGothicOne", sans-serif;
  text-transform: uppercase;
  margin: 0;
}

h1 {
  color: var(--text-color-light);
  font-size: 7.5rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.greenbg h2 {
  margin: 0 0 0.25rem;
}

@media screen and (max-width: 767px) {
  h2 {
    font-size: 2rem;

  }

  .greenbg h2 {
    margin: 0;
  }
}

.colored {
  background-image: linear-gradient(to right, #e63743, #ee7839);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-flex;
}
.colored.rusles {
  background-image: linear-gradient(to right, #FF8421, #FFBD02);
}
.colored.rustales {
  background-image: linear-gradient(to right, #6EB235, #211F20);
}
.colored.lace {
  background-image: linear-gradient(to right, #D7B56D, #C89936);
}
.colored.khokhloma {
  background-image: linear-gradient(to right, #DB3822, #ECAA04);
}
.colored.gzhel {
  background-image: linear-gradient(to right, #3A57A2, #09B2E9);
}


h2.colored {
  font-size: 4rem;
}

@media screen and (max-width: 767px) {
  h2.colored {
    font-size: 2rem;
    line-height: 1;
  }
}

h3 {
  font-size: 2rem;
  margin: 2rem 0 1.5rem;
}

@media screen and (max-width: 767px) {
  h3 {
    font-size: 1.5rem;
  }
}

h3.colored {
  font-size: 4rem;
}

@media screen and (max-width: 767px) {
  h3.colored {
    font-size: 2rem;
  }
}

h4 {
  margin: 1.5rem 0 1rem;
  font-weight: bold;
}

.greenbg h4 {
  font-weight: normal;
}


@media screen and (max-width: 767px) {
  h4 {
    font-size: 1.25rem;
    font-weight: bold;
  }

  .greenbg h4 {
    font-size: 1rem;
    font-weight: 500;
  }
}

h5 {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--text-color-light);
  margin-top: 1rem;
}

@media screen and (max-width: 767px) {
  h5 {
    font-size: 1rem;
  }
}

h6 {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: normal;
  color: var(--text-color-light);
}

@media screen and (max-width: 767px) {
  h6 {
    font-size: 1.25rem;
  }
}

p.big {
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  p.big {
    font-size: 1rem;
  }
}

p.biggest {
  font-size: 1.5rem;
  color: #444444;
}

.flowerTitle {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.strong {
  font-weight: bold;
}

.medium {
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  p.biggest {
    font-size: 1.25rem;
  }
}

.marquee {
  padding-left: 1.5rem;
  border-left: 4px solid #2bcb4e;
  font-style: italic;
  color: #7F7F7F;
}

.flex {
  display: flex;
}

.flexRow {

  flex-direction: row;
}

@media screen and (max-width: 767px) {
  .flexRow {
    flex-direction: column;
  }
}

.main-text h6 {
  margin-top: 60px;
}

/* Важно: делаем .carousel позиционированным, чтобы absolute-позиционированные индикаторы
     находились внутри него, а не смещались относительно body */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-inner,
.carousel-inner .carousel-item {
  border-radius: 1.5rem;
  overflow: hidden;
}

.main-video {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0 1rem 1rem;
  border-bottom-left-radius: 2.5rem;
  background: var(--pill-bg);
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .main-video {
    position: relative;
  }
}
.main-video img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  .main-video img {
    width: clamp(200px, 30vw, 486px);
  }
}
.main-video::before,
.main-video::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: 
    radial-gradient(circle at bottom left,
    transparent 69%,
    rgba(255, 255, 255, 0.6) 70%,
    rgba(255, 255, 255, 0.9) 71%,
    white 72%) no-repeat
  ;
  background-size: 100% 100%;
  pointer-events: none;
  transform: translateZ(0);
  z-index: 16;
}
.main-video::after {
  top: 0;
  left: -16px;
}
.main-video::before {
  right: 0;
  bottom: -16px;
}

.carousel-indicators.custom-text {
  position: absolute;
  left: 4rem;
  bottom: 2rem;
  display: flex;
  justify-content: flex-start;
  gap: var(--pill-gap);
  padding: 0;
  margin: 0;
  pointer-events: auto;
  z-index: 25;
  /* чуть шире, чтобы кнопки никогда не вылезали за край */
  max-width: calc(100% - 8rem);

}


.carousel-indicators.custom-text button {
  height: var(--pill-h);
  padding: 0 var(--pill-padding-x);
  border: 0;
  border-radius: var(--pill-radius);
  background: var(--pill-bg);
  color: var(--text-color-dark);
  display: inline-flex;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    transform 0.18s ease;
  box-shadow: none;
  opacity: 1;
}



@media screen and (max-width: 767px) {
  .carousel-indicators.custom-text {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: 100%;
    border-radius: 0;
    margin-top: 1rem;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* скрыть скроллбар Firefox */

  }

  .carousel-indicators.custom-text::-webkit-scrollbar {
    display: none;
    /* скрыть скроллбар Chrome/Safari */
  }

  .carousel-indicators.custom-text button {
    flex: 0 0 60%;
    /* ширина кнопки ≈ 70% экрана → видно 1.5 кнопки */
    white-space: nowrap;
    text-align: center;
    background: #F2F2F2;
    outline: none;
    cursor: default !important;
  }
}

.carousel-indicators.custom-text button.active {
  background: var(--pill-bg-hover);
  border: 0;
  color: var(--text-color-light);
}

.main-text {
  position: absolute;
  z-index: 10;
  top: 2.5rem;
  left: 4rem;
}

@media screen and (max-width: 767px) {
  .main-text {
    top: auto;
    left: auto;
    bottom: 73px;
    text-align: center;
    width: 100%;
  }
}

/* Local video */
.video-wrapper {
  position: relative;
  overflow: hidden;
}
.video-wrapper.ar-16-9 {
  aspect-ratio: 16/9;
}
.video-wrapper .video-local {
  display: block;
  width: 100%; 
  height: 100%; 
  max-width: 100%;
  padding: 0;
  margin: 0;
  object-fit: cover;
}
.ar-16-9  .video-local,
.ar-16-9  .video-poster {
  aspect-ratio: 16/9;
}
.video-poster {
  position: absolute; 
  inset: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.button-play-video-over {
  --button-play-video-over-size: 64px;
  --button-play-video-over-size-hover: 74px;
  --button-play-video-over-transition-duration: 300ms;

  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 15;
  cursor: pointer;
}
.button-play-video-over img,
.button-play-video-over svg {
  display: block;
  width: var(--button-play-video-over-size);
  height: var(--button-play-video-over-size);
  transition: all var(--button-play-video-over-transition-duration) var(--ease);
}
.button-play-video-over:hover img,
.button-play-video-over:hover svg {
  width: var(--button-play-video-over-size-hover);
  height: var(--button-play-video-over-size-hover);
}
/* fix for iphone */
@media screen and (max-width: 767px) {
  .backstage-item .video-wrapper:not(.ar-16-9),
  .backstage-item .carousel {
    width: 100%;
    height: clamp(400px, 60vh, 520px);
  }
}
/* end fix for iphone */
/* END: Local video */

#textPillCarousel {
  position: relative;
}

@media screen and (max-width: 767px) {
  #textPillCarousel {
    margin-left: -20px;
    margin-right: -20px;
  }
  #textPillCarousel .carousel-inner,
  #textPillCarousel .main-text {
    padding-inline: 20px;
  }
  #textPillCarousel .carousel-item {
    border-radius: 1.5rem;
    overflow: hidden;
  }
  #textPillCarousel .carousel-indicators [data-bs-target] {
    margin-inline: 0;
  }
  #textPillCarousel .carousel-indicators [data-bs-target]:first-child {
    margin-left: 20px;
  }
  #textPillCarousel .carousel-indicators [data-bs-target]:last-child {
    margin-right: 20px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --pill-padding-x: 10px;
  }
}

.carousel-indicators [data-bs-target] {
  text-indent: 0;
  width: auto;
}


.carousel-indicators.custom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  margin: 0;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: auto;
  width: 100%;
}



.carousel-indicators.custom [data-bs-target] {
  width: var(--dot);
  height: var(--dot);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff !important;
  opacity: 1 !important;
  position: relative;
  transition: width 0.28s var(--ease), border-radius 0.28s var(--ease),
    background 0.2s linear;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  min-width: 16px;
}

.carousel-indicators.custom [data-bs-target] .track {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--dot) / 2);
  background: var(--track);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.carousel-indicators.custom [data-bs-target] .fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: inherit;
  will-change: width;
}

.carousel-indicators.custom [data-bs-target] .ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  background: #fff;
  border-radius: 50%;
  transform: translate(0, -50%);
  will-change: transform;
}

.carousel-indicators.custom .active {
  width: var(--pill-w);
  border-radius: calc(var(--dot) / 2);
  background: transparent !important;
}

.carousel-indicators.custom .active .track {
  opacity: 1;
}

.carousel.slide {
  overflow: hidden;
}

.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}
.carousel-full-height .carousel-item img {
  height: 100%;
  object-fit: cover;
}

.logos {
  --logo-width: 100px;
  --logo-img-width: 84px;
  --logo-border-width: 2px;

  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  list-style-type: none;
}
.logos > li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--logo-width);
  width: var(--logo-width);
  height: var(--logo-width);
  border: var(--logo-border-width) solid #e2e2e2;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
}
.logos img {
  display: block;
  width: var(--logo-img-width);
  height: var(--logo-img-width);
  border-radius: 50%;
  object-fit: contain;
  border: none;
}
@media screen and (max-width: 767px) {
  .logos {
    justify-content: space-between;
  }
}

.partners {
  --partners-logo-width: 80px;
  --partners-logo-img-width: 68px;
  --partners-logo-border-width: 2px;

  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.partners > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.partners > li * {
  margin: 0;
}
.partners > li > *:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--partners-logo-width);
  width: var(--partners-logo-width);
  height: var(--partners-logo-width);
  border: var(--partners-logo-border-width) solid #e2e2e2;
  border-radius: 50%;
  overflow: hidden;
}
.partners > li > *:last-child {
  flex: 1;
  font-weight: 500;
  text-align: left;
}
.partners > li img {
  display: block;
  width: var(--partners-logo-img-width);
  height: var(--partners-logo-img-width);
  margin: 0;
  border: none;
  object-fit: contain;
}

.flowerSlideText {
  display: flex;
  margin-left: 2.5rem;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) and (max-width: 1800px) {
  .flowerSlideText {
    padding-right: 2.5rem;
  }
}

.flowerSlideText .orderButton {
  margin-top: auto;
}

@media only screen and (max-width: 767px) {
  .flowerSlideText {
    margin-left: 0;
  }
}

.flowersLine {
  display: flex;
  gap: 1rem;
}

@media only screen and (max-width: 767px) {
  .flowersLine {
    flex-wrap: wrap;
  }
}

.flowersLine-item {
  position: relative;
  max-width: 236px;
  flex: 1;
}

.flowersLine-item-cover {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  z-index: 1;
}

@media only screen and (max-width: 767px) {
  .flowersLine-item {
    max-width: 47%;
    width: 47%;
    min-width: 47%;
  }
}

.flowersLine-item p {
  margin-bottom: 0;
  font-weight: 500;
  color: #7F7F7F;
}

.flowersLine-item img {
  border-radius: 24px;
}
@media screen and (min-width: 768px) {
  .flowersLine-item img {
    border-radius: 16px;
  }
}

.flowerLine_title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0.6rem;
}
.flowerLine_title > * {
  font-family: "DelaGothicOne", sans-serif;
  text-transform: uppercase;
}

.flowerLine_title .icons {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex: 0 0 1rem;
  background: linear-gradient(90deg, #D7B56D 0%, #C89936 100%);
  mix-blend-mode: luminosity;
}

.flowerLine_title .icon1 {
  background: linear-gradient(90deg, #e63743 0%, #ee7839 100%);
  mix-blend-mode: normal;
}

.flowerLine_title .icon2 {
  background: linear-gradient(90deg, #FF8421 0%, #FFBD02 100%);
  mix-blend-mode: normal;
}

.flowerLine_title .icon3 {
  background: linear-gradient(90deg, #6eb235 0%, #211f20 100%);
  mix-blend-mode: normal;
}

.flowerLine_title .icon4 {
  background: linear-gradient(90deg, #D7B56D 0%, #C89936 100%);
  mix-blend-mode: normal;
}

.flowerLine_title .icon5 {
  background: linear-gradient(90deg, #DB3822 0%, #ECAA04 100%);
  mix-blend-mode: normal;
}

.flowerLine_title .icon6 {
  background: linear-gradient(90deg, #3A57A2 0%, #09B2E9 100%);
  mix-blend-mode: normal;
}

.middle_bg {
  --width: min(calc(100vw - var(--sb, 12px)), 2400px);

  position: relative;
  left: 50%;
  width: var(--width);
  margin-left: calc(var(--width) / -2);
  box-sizing: border-box;
}

.middle_bg::before {
  content: "";
  position: absolute;
  bottom: calc(2.5rem - 1px);
  left: calc(53% - 1px);
  width: 2.5rem;
  height: 2.5rem;
  background: radial-gradient(circle at top right, transparent 69%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.9) 71%, white 72%) no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform: translateZ(0);
  z-index: 16;
}

.middle_bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(2.5rem + 1px);
  height: calc(2.5rem + 1px);
  background: radial-gradient(circle at bottom left, white 71%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0.6) 69%, transparent 68%) no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform: translateZ(0);
  z-index: 16;
}

.middle_bg_white {
  position: absolute;
  right: 2.5rem;
  bottom: 0;
  left: 2.5rem;
  display: grid;
  height: 2.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  z-index: 16;
}
.middle_bg_white::before,
.middle_bg_white::after {
  content: "";
  display: block;
  align-self: stretch;
}
.middle_bg_white::after {
  background: #FFF;
}

@media only screen and (max-width: 767px) {
  .middle_bg {
    width: 100vw;
    left: -50vw;
    margin-left: calc(50vw - 1.25rem);
    border-radius: 1.25rem;
  }

  .middle_bg_white {
    display: none;
  }

  .pe-4 {
    padding-right: calc(var(--default-size) * 0.5) !important;
  }

  .ps-4 {
    padding-left: calc(var(--default-size) * 0.5) !important;
  }
}

.middle_bg img {
  width: 100%;
  display: block;
  border-radius: 2.5rem 2.5rem 0;
}

@media only screen and (max-width: 767px) {
  .middle_bg img {
    border-radius: 2.5rem 2.5rem 0 0;
  }
}

.middle_bg_after {
  position: relative;
  left: 50%;
  width: calc(100vw - var(--sb));
  margin-left: calc(-50vw + (var(--sb) / 2));
  box-sizing: border-box;
  margin-top: -147px;
  z-index: 5;
  background: transparent;
  overflow: visible;
}

@media only screen and (max-width: 1400px) {
  .middle_bg_after {
    margin-top: -123px;
  }
}

@media only screen and (max-width: 1200px) {
  .middle_bg_after {
    margin-top: -95px;
  }
}

@media only screen and (max-width: 767px) {
  .middle_bg_after {
    width: 100vw;
    left: -50vw;
    margin-left: calc(50vw - 1.25rem);
    margin-top: -4rem;
    padding-top: 1.5rem;
  }


}

.middle_bg_after::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 53%;
  /* половина блока */
  height: 100%;
  background: #ffffff;
  /* скругляем правую верхнюю (и при необходимости — правую нижнюю) часть */
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  /* важное — именно у этой части скругление */
  /* если нужен ещё и нижний угол справа, добавь border-bottom-right-radius */
  z-index: 0;
}



@media only screen and (max-width: 767px) {
  .middle_bg_after::before {
    width: 100%;
  }
}

/* чтобы содержимое блока (текст, кнопки) было поверх белого псевдоэлемента */
.middle_bg_after>* {
  position: relative;
  z-index: 1;
}

.middle_bg_after .overTitle {
  margin-top: 1.5rem;
  margin-bottom: 0;
  line-height: 1;
  font-weight: 500;
}

.middle_bg_after h2.colored {
  margin-top: 0;
  line-height: 1;
  margin-bottom: 0rem;
  display: inline-flex;
}

@media only screen and (max-width: 767px) {
  .middle_bg_after h2.colored {
    margin-bottom: 0;
  }
}

.flower_popup {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 60%;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 1rem 0 rgba(0,0,0,0.15);
  background: #FFF;
  transition: opacity 0.4s ease;
  visibility: hidden;
  opacity: 0;
  z-index: 15;
}
.flower_popup.active {
  visibility: visible;
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .flower_popup {
    width: calc(100% - 2rem);
  }
}
.flowers_structure {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style-type: none;
}
.flowers_structure > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 5vw, 80px);
  height: clamp(48px, 5vw, 80px);
  border: 2px solid #e2e2e2;
  border-radius: 50%;
}
.flowers_structure > li:hover {
  cursor: pointer;
}
.flowers_structure img {
  display: block;
  width: 85%;
  height: 85%;
  margin: 0;
  border-radius: 50%;
  object-fit: contain;
}
.flowers_structure > li .flower_popup {
  top: calc(100% + 1rem);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.flowers_structure > li:first-child .flower_popup {
  left: -1.5rem;
  transform: none;
}
.flowers_structure > li:last-child .flower_popup {
  right: -1.5rem;
  left: auto;
  transform: none;
}
.flowers_structure > li:hover .flower_popup {
  opacity: 1;
  visibility: visible;
  z-index: 10000010;
}
@media only screen and (max-width: 460px) {
  .flowers_structure {
    position: relative;
  }
  .flowers_structure > li {
    position: static;
  }
  .flowers_structure > li .flower_popup,
  .flowers_structure > li:first-child .flower_popup,
  .flowers_structure > li:last-child .flower_popup {
    right: 0;
    left: 0;
    width: auto;
    transform: none;
  }
}
@media only screen and (min-width: 768px) {
  .flowers_structure .flower_popup {
    display: none !important;
  }
}

.outer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 1rem;
  overflow-x: auto;
  /* остаётся прокрутка, но скроллбар скрыт */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  /* если хочется чуть места для скрытого скролла */
  cursor: grab;
}
/* Скрыть скроллбар в разных браузерах */
.outer-nav {
  -ms-overflow-style: none;
  /* IE и Edge */
  scrollbar-width: none;
  /* Firefox */
}
.outer-nav::-webkit-scrollbar {
  display: none;
}
/* WebKit */
/* Состояние при перетаскивании */
.outer-nav.dragging {
  cursor: grabbing;
}

.outer-nav a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
  font-family: "DelaGothicOne", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: #D9D9D9;
}

.outer-nav a br {
  display: none;
}

@media screen and (max-width: 767px) {
  .outer-nav a br {
    display: block;
  }
}


/* прячем скроллбар (как у вас было) */
.outer-nav {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.outer-nav::-webkit-scrollbar {
  display: none;
}

.outer-nav.dragging {
  cursor: grabbing;
}

.outer-nav a.active {
  background-image: linear-gradient(to right, #E63743, #ee7839);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  border-color: #222;
}

.inner-wrap {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

@media screen and (max-width: 767px) {
  .inner-wrap {
    gap: .5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .inner-wrap {
    flex-direction: column;
  }
}

.inner-main {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  max-width: 100%;
}

.thumbs-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 112px;
  flex: 0 0 112px;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .thumbs-vertical {
    gap: 0.5rem;
    width: 72px;
    flex: 0 0 72px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .thumbs-vertical {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    flex: 1;
  }
}

.thumbs-vertical img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 1.25rem;
  cursor: pointer;
  opacity: .3;
}

.thumbs-vertical img.active-thumb {
  opacity: 1;
}

@media screen and (max-width: 767px) {


  .thumbs-vertical {
    width: 60px;
    flex: 0 0 60px;
    justify-content: center;
  }

  .thumbs-vertical img {
    width: 64px;
    height: 48px;
  }
}

/* Скрываем все слайды по умолчанию */
.outer-slide-title {
  margin: 0 0 clamp(24px, 4vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  transition: opacity 300ms ease-out;
  opacity: 0;
}
.swiper-slide-active .outer-slide-title {
  opacity: 1;
} 

.outer-slide .inner-main img {
  display: block;
  border-radius: 1.5rem;
  max-width: 742px;
  width: 742px;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1599px) {
  .outer-slide .inner-main img {
    width: calc((100vw - 100px - 1rem) / 2);
  }
}

@media screen and (max-width: 767px) {
  .outer-slide .inner-main img {
    width: 100%;
    height: 335px;
    object-fit: cover;
  }

  .outer-slide .inner-main {
    padding-bottom: 84px; /* 40px button size + 2 * 24px vertical gap*/
  }
}

.outer-slide.active {
  display: block;
}

.outer-slide .thumbs-vertical img {
  width: 7rem;
  height: 7rem;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .outer-slide .thumbs-vertical img {
    width: 3.75rem;
    height: 3.75rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .outer-slide .thumbs-vertical img {
    height: auto;
    max-width: 50px;
    object-fit: cover;
    aspect-ratio: 1;
  }
}


.inner-slide {
  display: none;
  position: relative;
  width: 100%;
  flex: 1;
}
.inner-slide.active {
  display: block;
}
.inner-slide picture {
  display: block;
  width: 100%;
}

.hide-on-mobile {
  display: block !important;
  max-height: none !important;

}

.double.hide-on-mobile {
  display: flex !important;
}

.show-on-mobile {
  display: none !important;
  max-height: 0 !important;
}

.relative {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
    max-height: 0 !important;
    max-width: 0 !important;
  }

  .double.hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
    max-height: none !important;
  }
}

.fullWidth {
  width: 100%;
}

.textAlignCenter {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .textAlignCenterMobile {
    text-align: center;
  }
}

.marginZero {
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .marginZeroMobile {
    margin: 0;
  }
}

#heroCarousel {
  border-radius: 1.5rem;
}

.card {
  border: 0;
  color: #000;
}

.orderButton {
  text-align: center;
  display: flex;
  justify-content: flex-start;

  margin-top: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .orderButton {
    justify-content: center;
  }
}

.orderButton a {
  border: 1px solid #2BCB4E;
  background-color: #2BCB4E;
  border-radius: 2rem;
  font-size: 1.125rem;
  color: var(--text-color-light);
  text-decoration: none;
  padding: 1rem;
  width: 100%;
}

@media screen and (min-width: 500px) {
  .orderButton a {
    max-width: 295px;
  }  
}

.aboutProject {
  position: relative;
  margin-bottom: 1.5rem;
}



.snap-item-textBlock p,
.snap-item-textBlock ul {
  font-size: .9rem;
}
.snap-item-textBlock p.biggest {
  font-size: 1.5rem;
  font-weight: 700;
}

.icon-location {
  width: 36px;
  height: 36px;
  margin: 0;
  object-fit: contain;
  fill: #2BCB4E;
}

@media only screen and (max-width: 767px) {
  .snap-item-textBlock p.biggest {
    font-size: 1.3rem;
  }
}



/* === Контейнеры === */
/* .snap-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scroll-behavior: auto;
  padding: 0;
  cursor: grab;
  scrollbar-width: none;
} */

/* .snap-carousel.smooth {
  scroll-behavior: smooth;
} */

/* flex row: все айтемы в одной линии; ВАЖНО: stretch чтобы айтемы выровнялись по высоте самого высокого */
/* .snap-track {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  white-space: nowrap;
} */

/* === Слайды === */
/* Каждый слайд — колонка, занимает высоту родителя (в т.ч. будет равен высоте самого высокого слайда) */
.snap-item {
  flex: 0 0 auto;
  width: auto;
  min-width: 335px;
  max-width: 486px;
  scroll-snap-align: start;

  display: flex;
  /* <- делаем слайд флекс-контейнером */
  flex-direction: column;
  /* <- вертикальная колонка (верх->низ) */
  height: auto;
  /* <- чтоб stretch сработал и занял высоту track */
  box-sizing: border-box;
  min-height: 700px;
}

@media only screen and (max-width: 767px) {
  .snap-track {
    gap: 20px;
  }
  .snap-item {
    min-height: auto;
  }
  .snap-carousel .snap-item {
    min-width: 290px;
    max-width: calc(100vw - 40px); /* fulll width - 2 * main inline gap 20px - 20px */
  }
  .snap-carousel .snap-item.double {
    max-width: 160vw;
  }
  .snap-carousel .snap-item .snap-item-textBlock {
    padding: 1rem;
  }
  .snap-item-textBlock p:last-child {
    margin-bottom: 0;
  }
}

/* для "двойного" слайда: больше ширина, внутри — свои правила */
.snap-item.double {
  min-width: 998px;
  max-width: 998px;
  width: 998px;
  gap: 1rem;
  display: flex;
}

/* === Верхний ряд внутри double (текст + картинка рядом) === */
.double_top {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  /* важно: растянуть колонки по высоте */
  width: 100%;
}

/* текстовый блок — центрируем содержимое по вертикали */
.snap-item-textBlock {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* вертикальный центр внутри блока */
  align-items: flex-start;
  white-space: normal;
  text-align: left;
  box-sizing: border-box;
  /* если хотим, чтобы текстовый блок занимал оставшееся место при боковой вёрстке */
  flex: 1 1 auto;
}



/* если в .double_top — текст и картинка: текст занимает пространство, картинка подстраивается */
.double_top .snap-item-textBlock {
  flex: 1 1 50%;
  /* можно регулировать: какое место занимает текст */
}

/* картинка в боковой колонке — растягиваем по высоте колонки и обрезаем при необходимости */
.double_top img.halfWidth {
  flex: 0 0 48%;
  /* фиксируем ширину колонки (50%) */
  width: 48%;
  height: 100%;
  object-fit: cover;
  /* заполнит колонку по высоте без искажения */
  display: block;
  border-radius: 1rem;
  /* ваш стиль */
}

/* === Ситуация: картинка сверху, текст внизу, но хотим чтобы текст был по центру вертикально === */
/* Тогда даём текстовому блоку flex:1 и центрируем его */
.snap-item>img.rounded {
  display: block;
  max-width: 100%;
  height: auto;
  /* если хотите, чтобы картинка НЕ занимала всю высоту и оставляла место тексту — не делаем height:100% */
}

/* Для слайдов, где картинка + текст вертикально:
   сделаем, чтобы текстовый блок занял вторую часть и был по центру */
.snap-item .snap-item-textBlock.vertical-center {
  flex: 1 1 auto;
  /* займет всё доступное место */
  display: flex;
  align-items: center;
  /* вертикально по центру */
  justify-content: flex-start;
  padding: 1.5rem 2rem;
}

/* общий стиль картинок */
.snap-item img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-right: 0;
}

/* скроллбар (по желанию) */
.snap-carousel::-webkit-scrollbar {
  height: 0px;
}

.snap-carousel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 8px;
}

.snap-backstage {
  display: flex;
  gap: 1rem;
}

@media only screen and (max-width: 767px) {
  .snap-backstage {
    flex-direction: column;
  }
}

.snap-backstage .snap-item-textBlock {
  padding: 0;
}

.snap-backstage .snap-item {
  min-height: auto;
  gap: 0;
  min-width: auto;
  width: 534px;
  max-width: 36%;
  height: auto;
}

.snap-backstage .snap-item.small {
  width: 400px;
  max-width: 27%;
}


@media only screen and (max-width: 767px) {

  .snap-backstage .snap-item,
  .snap-backstage .snap-item.small {
    max-width: 100%;
  }
}




.marginCenter {
  margin: 2rem;
}

@media only screen and (max-width: 767px) {
  .marginCenter {
    margin: 2rem 0;
  }
}

/* .bottom_video {
  position: relative;
} */

.inner-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1;
}

/* контейнер */
.flowersLine-images {
  position: relative;
}

/* скрытый блок: по умолчанию свернут и невидим */
.flowersLine-item_hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flowersLine-item_hover > span {
  font-family: "DelaGothicOne", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 120%;
  text-align: center;
  white-space: nowrap;
  color: #7F7F7F;
}
.flowersLine-item_hover > span.marked {
  color: #FFF;
}

/* @media only screen and (max-width: 767px) {
  .flowersLine-item_hover {
    font-size: 1rem;
    width: calc(100vw - 40px);
    left: calc(-100vw + 20px);
    margin-left: calc(50vw - 10px);
    bottom: -6rem;

  }

  .flowersLine-item:nth-child(2) .flowersLine-item_hover {
    left: calc(-100vw + 20px);
  }

  .flowersLine-item:nth-child(3) .flowersLine-item_hover {
    left: calc(-50vw + 10px);
  }

  .flowersLine-item:nth-child(4) .flowersLine-item_hover {
    left: calc(-100vw + 20px);
  }

  .flowersLine-item:nth-child(5) .flowersLine-item_hover {
    left: calc(-50vw + 10px);
  }

  .flowersLine-item:nth-child(6) .flowersLine-item_hover {
    left: calc(-100vw + 20px);
  }

} */

/* Десктоп: показываем при hover (CSS-only). max-height задаём достаточно большим запасом
   — это только запас на случай. Для более корректной высоты мы используем JS на мобилке. */
@media (hover: hover) {
  .flowersLine-images:hover>.flowersLine-item_hover {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Открытое состояние (используется JS — добавляет .active и aria-expanded="true") */
.flowersLine-images.active>.flowersLine-item_hover,
.flowersLine-images[aria-expanded="true"]>.flowersLine-item_hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* max-height будет управляться через inline-style (JS) для точной высоты */
}


#scrollUpBtn {
  position: fixed;
  right: 20px;
  bottom: 166px;
  display: block;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  background: #2BCA4D;
  transition: opacity .3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  cursor: pointer;
}
#scrollUpBtn svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#scrollUpBtn.show {
  opacity: 1;
  visibility: visible;
}


/**
  Full width extend About block
*/
.full-width-expander {
  position: relative;
  left: 50%;
  width: 100vw;
  width: calc(100vw - var(--sb, 0px));
  margin-left: -50vw;
  margin-left: calc(-50vw + (var(--sb, 0px) / 2));
  box-sizing: border-box;
}
.full-width-expander > .snap-carousel {
  padding-inline: 50px;
}
@media (max-width: 767px) {
  .full-width-expander > .snap-carousel {
    padding-inline: 20px;
  }
}
@media (min-width: 1600px) {
  .full-width-expander > .snap-carousel {
    padding-inline: calc((100vw - 1600px) / 2 + 50px);
  }
}
/**
  End: Full width extend About block
*/

/**
  Sliders
*/
.flowers-gallery,
.flowers-gallery-slider-wrapper {
    position: relative;
}
.flowers-gallery .swiper-wrapper {
  height: auto;
}

@media screen and (max-width: 767px) {
  .flowers-gallery-slider-wrapper {
    margin-inline: -20px;
  }
  .flowers-gallery-slider-wrapper .outer-slide {
    padding-inline: 20px;
  }
  .flowers-gallery .slider-nav-button,
  .flowers-gallery .slider-pagination {
    top: 335px; /* equal image height */
    transform: translateY(24px);
  }
  .flowers-gallery .slider-nav-button-prev {
    left: 20px;
  }
  .flowers-gallery .slider-nav-button-next {
    right: 20px;
  }
  .flowers-gallery .slider-pagination {
    position: absolute;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-inline: 50px;
    z-index: 1;
  }
}

.project-slider-wrapper {
  position: relative;
}
.project-slider .swiper-wrapper,
.project-slider .swiper-slide {
  height: auto;
}
.project-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-slider .swiper-slide .button-play-video-over img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.project-slider .swiper-slide:has(.snap-item-textBlock) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-slider .swiper-slide:has(.snap-item-textBlock) > * {
  width: 100%;
  flex: 1;
}
.project-slider .swiper-slide:has(.snap-item-textBlock) > .video-wrapper {
  flex: 0 0 auto;
}
.project-slider .snap-item-textBlock p:last-child {
  margin-bottom: 0;
}


.flowers-gallery .swiper-pagination-bullet,
.project-slider-wrapper .swiper-pagination-bullet {
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-inactive-color: #D9D9D9;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-color: #626262;
}
.flowers-gallery .swiper-pagination-bullet {
  --swiper-pagination-bullet-horizontal-gap: 12px;
}
.project-slider-wrapper .swiper-pagination-bullet {
  --swiper-pagination-bullet-horizontal-gap: 4px;
}
.flowers-gallery .swiper-pagination-bullet-active,
.project-slider-wrapper .swiper-pagination-bullet-active {
  --swiper-pagination-bullet-size: 16px;
}
.project-slider-wrapper .slider-pagination {
  display: none;
}
@media screen and (min-width: 768px) {
  .project-slider-wrapper {
    padding-bottom: 66px;
  }

  .project-slider-wrapper .slider-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 66px;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 1;
  }

  .flowers-gallery .slider-nav-button-prev,
  .project-slider-wrapper .slider-nav-button-prev {
    transform: translate(-50%, -50%);
  }
  .flowers-gallery .slider-nav-button-next,
  .project-slider-wrapper .slider-nav-button-next {
    transform: translate(50%, -50%);
  }
}
@media screen and (min-width: 1800px) {
  .flowers-gallery .slider-nav-button-prev,
  .project-slider-wrapper .slider-nav-button-prev {
    transform: translate(-150%, -50%);
  }
  .flowers-gallery .slider-nav-button-next,
  .project-slider-wrapper .slider-nav-button-next {
    transform: translate(150%, -50%);
  }
}
@media screen and (max-width: 540px) {
  .project-slider-wrapper {
    margin-inline: -20px;
  }
  .project-slider-wrapper .snap-item-textBlock {
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 400;
    line-height: 125%;
  }
  .project-slider-wrapper .swiper-wrapper .swiper-slide {
    margin-left: 20px;
  }
  .project-slider-wrapper .swiper-slide {
    width: calc(100vw - 40px - 10px - 30px); /* 2 page padding + 1/2 of slide margin + next slide visible part size */
  }
  .project-slider-wrapper .slider-nav-button {
    --slider-nav-button-background-color: var(--color-white);
    --slider-nav-button-color: var(--color-black);

    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.2);
  }
  .project-slider-wrapper .slider-nav-button-prev,
  .project-slider-wrapper .slider-nav-button-next {
    transform: translateY(-50%);
  }
  .project-slider-wrapper .slider-nav-button-prev {
    left: 28px;
  }
  .project-slider-wrapper .slider-nav-button-next {
    right: 28px;
  }
}
/*
  End: Sliders
*/


/* Backstage */
.backstage {
  display: grid;
  gap: 24px;
}
.backstage-item-content {
  display: grid;
  gap: 16px;
}
.backstage-item-content > * {
  margin-block: 0;
}
.backstage-item-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 117%;
  color: #444444;
}

@media screen and (min-width: 768px) {
  .backstage.backstage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .backstage.backstage-grid .backstage-item {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
  }

  .backstage.backstage-grid .backstage-item:first-child,
  .backstage.backstage-grid .backstage-item:last-child {
    grid-row: 1;
  }

  .backstage.backstage-grid .backstage-item:nth-child(2) {
    grid-column: span 2;
    grid-row: 2;
  }
}

@media screen and (min-width: 1200px) {
  .backstage {
    align-items: stretch;
  }
  .backstage.backstage-grid {
    grid-template-columns: 358px 1fr 358px;
    gap: clamp(24px, 3vw, 40px);
  }
  .backstage.backstage-grid .backstage-item:nth-child(2) {
    align-self: center;
  }

  .backstage.backstage-grid .backstage-item:nth-child(2) {
    grid-column: span 1;
    grid-row: 1;
  }
}

@media screen and (min-width: 1800px) {
  .backstage.backstage-grid {
    gap: clamp(40px, 6vw, 102px);
  }
}
/* END: Backstage */

/* Floating Nav */
.floating-nav-panel {
  --floating-nav-items-gap: 16px;
  --floating-nav-item-indent: 0;
  --floating-nav-item-padding-block: 8px;
  --floating-nav-item-padding-inline: 8px;
  --floating-nav-item-dot-size: 16px;
  --floating-nav-item-color: #333;

  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  transition: top 300ms ease-in-out;
  z-index: 490;
}
.floating-nav-panel-inner {
  width: 100%;
  max-width: 1600px; /* like a header */
  margin: 0 auto;
  padding: 1px 0 10px; /* keep 1px top for prevent panel content overlaping */
  background: #FFF;
}
.floating-nav-panel-inner {
  overflow-x: auto;
}
.floating-nav {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--floating-nav-items-gap);
  list-style-type: none;
}
.floating-nav-item {
  padding-left: var(--floating-nav-item-indent);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 500;
  line-height: clamp(16px, 1vw, 20px);
  white-space: nowrap;
  color: var(--floating-nav-item-color);
}
.floating-nav-item:last-child {
  padding-right: var(--floating-nav-item-indent);
}
.floating-nav-item.active {
  --floating-nav-item-color: #FFF;
}
.floating-nav-item > a,
.floating-nav-item > a:hover {
  color: var(--floating-nav-item-color);
}
.floating-nav-item > * {
  position: relative;
  display: block;
  padding-block: var(--floating-nav-item-padding-block);
  padding-right: var(--floating-nav-item-padding-inline);
  padding-left: calc(var(--floating-nav-item-padding-inline) + var(--floating-nav-item-dot-size) + var(--floating-nav-item-padding-block));
  border-radius: clamp(20px, 1.5vw, 32px);
  text-decoration: none;
  transition: all 200ms ease;
}
.floating-nav-item > *::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--floating-nav-item-padding-inline);
  display: block;
  width: var(--floating-nav-item-dot-size);
  height: var(--floating-nav-item-dot-size);
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #D7B56D, #C89936);
  mix-blend-mode: luminosity;
  transition: all 200ms ease;
}
.floating-nav-item.tricolor > *::before {
  background: linear-gradient(90deg, #E63743, #EE7839);
  mix-blend-mode: normal;
}
.floating-nav-item.rusles > *::before {
  background: linear-gradient(90deg, #FF8421, #FFBD02);
  mix-blend-mode: normal;
}
.floating-nav-item.rustales > *::before {
  background: linear-gradient(90deg, #6EB235, #211F20);
  mix-blend-mode: normal;
}
.floating-nav-item.lace > *::before {
  background: linear-gradient(90deg, #D7B56D, #C89936);
  mix-blend-mode: normal;
}
.floating-nav-item.khokhloma > *::before {
  background: linear-gradient(90deg, #DB3822, #ECAA04);
  mix-blend-mode: normal;
}
.floating-nav-item.gzhel > *::before {
  background: linear-gradient(90deg, #3A57A2, #09B2E9);
  mix-blend-mode: normal;
}
.floating-nav-item.active.tricolor > * {
  background: linear-gradient(90deg, #E63743, #EE7839);
}
.floating-nav-item.active.rusles > * {
  background: linear-gradient(90deg, #FF8421, #FFBD02);
}
.floating-nav-item.active.rustales > * {
  background: linear-gradient(90deg, #6EB235, #211F20);
}
.floating-nav-item.active.lace > * {
  background: linear-gradient(90deg, #D7B56D, #C89936);
}
.floating-nav-item.active.khokhloma > * {
  background: linear-gradient(90deg, #DB3822, #ECAA04);
}
.floating-nav-item.active.gzhel > * {
  background: linear-gradient(90deg, #3A57A2, #09B2E9);
}

.floating-nav-item.active > *::before {
  background: #FFF !important;
}
@media screen and (min-width: 768px) {
  .floating-nav-panel-inner {
    padding-inline: 30px;
    padding-bottom: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .floating-nav-panel-inner {
    padding-inline: 50px;
    border-radius: 0 0 32px 32px;
  }
}
@media screen and (max-width: 1000px) {
  /* .floating-nav::after {
    content: "";
    display: block;
    width: 1px;
    height: 1px;
    flex: 0 0 1px;
  } */
}

@media screen and (max-width: 767px) {
  .floating-nav-panel {
    --floating-nav-items-gap: 0;
    --floating-nav-item-indent: 20px;
    --floating-nav-item-padding-block: 4px;
    --floating-nav-item-dot-size: 12px;
  }
  body:has(.floating-nav-panel.active) .header-middle {
    box-shadow: none;
  }
  .floating-nav-panel.active {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.06);
  }
}


/* END: Floating Nav */

.header-bottom,
.breadcrumbs {
  display: none !important;
}

img[data-src] {
  background: #CCC;
}

.preloader {
  display: none;
}
.preloader.active {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.75);
  z-index: 1000000;
}
.preloader-spinner {
  display: block;
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border: clamp(4px, 6vw, 12px) solid #FFF;
  border-bottom-color: #2BCB4E;
  border-radius: 50%;
  box-sizing: border-box;
  animation: preloader-spin 1s linear infinite;
}

@keyframes preloader-spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}