/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/




.widgetarea-mobile .footer-map-tr {
   display: none !important;
}


/* Footer Map */

.footer-map-tr {
    position: relative !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body .footer-map-tr > .vc_column-inner {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    border: 0 !important;
    border-radius: 15px !important;
    box-shadow: none !important;

    background-color: #222731 !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: cover !important;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.footer-map-tr > .vc_column-inner::before {
    content: none !important;
    display: none !important;
}

.footer-map-tr > .vc_column-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(34, 39, 49, 1) 0%,
        rgba(34, 39, 49, 1) 30%,
        rgba(34, 39, 49, 0.99) 42%,
        rgba(34, 39, 49, 0.95) 51%,
        rgba(34, 39, 49, 0.84) 60%,
        rgba(34, 39, 49, 0.68) 69%,
        rgba(34, 39, 49, 0.46) 78%,
        rgba(34, 39, 49, 0.24) 89%,
        rgba(34, 39, 49, 0.08) 100%
    ) !important;
}

.footer-map-tr > .vc_column-inner > .wpb_wrapper {
    position: relative !important;
    z-index: 2 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-map-tr > .vc_column-inner::after {
        background: linear-gradient(
            90deg,
            rgba(34, 39, 49, 1) 0%,
            rgba(34, 39, 49, 1) 34%,
            rgba(34, 39, 49, 0.98) 47%,
            rgba(34, 39, 49, 0.85) 61%,
            rgba(34, 39, 49, 0.62) 74%,
            rgba(34, 39, 49, 0.34) 88%,
            rgba(34, 39, 49, 0.10) 100%
        ) !important;
    }
}

@media (max-width: 767px) {
    html body .footer-map-tr > .vc_column-inner {
        background-image: none !important;
        background-color: #222731 !important;
    }

    html body .footer-map-tr > .vc_column-inner::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;

        border-radius: inherit !important;
        pointer-events: none;

        background-color: #222731 !important;
        background-image: url("/wp-content/uploads/footer-map-bachground.png") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
    }
    

    html body .footer-map-tr > .vc_column-inner::after {
        background: rgba(34, 39, 49, 0.64) !important;
    }
}

html body .footer-map-tr > .vc_column-inner {
    -webkit-clip-path: inset(0 0 2px 0 round 15px);
    clip-path: inset(0 0 2px 0 round 15px);
}

html body .footer-map-tr > .vc_column-inner::after {
    box-shadow: inset 0 -5px 0 #222731 !important;
}




/* How it Works Arrows */


/* =========================================================
   KARAT — «Як ми працюємо»
   Декоративные стрелки поверх карточек
   ========================================================= */

.how-it-works {
    --hiw-arrow-color: #ffc58a;
}


/*
 * Карточки не меняем.
 * Создаём только точку привязки для стрелок.
 */
.how-it-works .wd-carousel-item {
    position: relative !important;
    overflow: visible !important;
}


/*
 * Очищаем старый ::before из предыдущих вариантов.
 */
.how-it-works .wd-carousel-item::before {
    content: none !important;
    display: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    /*
     * Предыдущая карточка должна находиться поверх следующей,
     * иначе следующая карточка перекрывает наконечник стрелки.
     */
    .how-it-works .wd-carousel-item:nth-child(1) {
        z-index: 40 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(2) {
        z-index: 30 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(3) {
        z-index: 20 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(4) {
        z-index: 10 !important;
    }


    /*
     * Стрелка:
     * — начинается внутри текущей карточки;
     * — проходит через промежуток;
     * — заканчивается перед следующей карточкой.
     */
    .how-it-works
    .wd-carousel-item:not(:last-child)::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        top: 50% !important;
        left: calc(100% - 33px) !important;
        right: auto !important;
        z-index: 100 !important;

        width: 52px !important;
        height: 40px !important;

        background-image:
            url("/wp-content/uploads/2026/07/arrow-icon.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;

        border: 0 !important;

        transform: translateY(-50%) !important;

        pointer-events: none !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /*
     * Карусель продолжается до правого края экрана.
     * Левая граница остаётся без изменений.
     */
    .how-it-works .wd-nested-carousel {
        width: auto !important;
        max-width: none !important;

        margin-right: calc(50% - 50vw) !important;
    }


    /*
     * Сохраняем правильный порядок наложения слайдов.
     */
    .how-it-works .wd-carousel-item:nth-child(1) {
        z-index: 40 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(2) {
        z-index: 30 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(3) {
        z-index: 20 !important;
    }

    .how-it-works .wd-carousel-item:nth-child(4) {
        z-index: 10 !important;
    }


    /*
     * На мобильном стрелка начинается внутри текущей карточки
     * и направляет взгляд к следующему слайду.
     */
    .how-it-works
    .wd-carousel-item:not(:last-child)::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        top: 50% !important;
        left: calc(100% - 60px) !important;
        right: auto !important;
        z-index: 100 !important;

        width: 96px !important;
        height: 40px !important;

        background-image:
            url("/wp-content/uploads/2026/07/arrow-icon.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;

        border: 0 !important;

        transform: translateY(-50%) !important;

        pointer-events: none !important;
    }
}

/* =========================================================
   HOW IT WORKS — mobile arrow fix
   Показываем стрелку только на активной карточке
   ========================================================= */

@media (max-width: 768px) {

    /*
     * Убираем фиксированную иерархию 40/30/20/10.
     * Иначе предыдущая карточка остаётся поверх активной.
     */
    .how-it-works .wd-carousel-item {
        z-index: 1 !important;
    }

    .how-it-works .wd-carousel-item.wd-slide-next {
        z-index: 2 !important;
    }

    .how-it-works .wd-carousel-item.wd-active {
        z-index: 3 !important;
    }


    /*
     * Скрываем декоративную стрелку у всех карточек.
     */
    .how-it-works .wd-carousel-item::after {
        content: none !important;
        display: none !important;
    }


    /*
     * Показываем её только у текущей активной карточки.
     * На последней карточке стрелки не будет.
     */
    .how-it-works
    .wd-carousel-item.wd-active:not(:last-child)::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        top: 50% !important;
        left: calc(100% - 60px) !important;
        right: auto !important;
        z-index: 100 !important;

        width: 96px !important;
        height: 40px !important;

        background-image:
            url("/wp-content/uploads/2026/07/arrow-icon.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;

        border: 0 !important;

        transform: translateY(-50%) !important;

        pointer-events: none !important;
    }
}

/* =========================================================
   HOW IT WORKS — скрываем стрелки неактивных слайдов
   ========================================================= */

@media (max-width: 768px) {

    /* Жёстко скрываем стрелку у всех неактивных карточек */
    .how-it-works
    .wd-carousel-wrap
    > .wd-carousel-item:not(.wd-active)::after {
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 0 !important;
        height: 0 !important;

        background: none !important;
        border: 0 !important;

        pointer-events: none !important;
    }


    /* Показываем стрелку только у активной карточки */
    .how-it-works
    .wd-carousel-wrap
    > .wd-carousel-item.wd-active:not(:last-child)::after {
        content: "" !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: absolute !important;
        top: 50% !important;
        left: calc(100% - 60px) !important;
        right: auto !important;
        z-index: 100 !important;

        width: 96px !important;
        height: 40px !important;

        background-image:
            url("/wp-content/uploads/2026/07/arrow-icon.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;

        border: 0 !important;

        transform: translateY(-50%) !important;

        pointer-events: none !important;
    }
}





/* =========================================================
   KARAT — «Результат після робіт»
   Карусель до правого края экрана только на мобильном
   ========================================================= */

@media (max-width: 767px) {

    /*
     * Родительские элементы не должны обрезать
     * расширенную область карусели.
     */
    .good-work,
    .good-work > .vc_column-inner,
    .good-work > .vc_column-inner > .wpb_wrapper {
        overflow: visible !important;
    }


    /*
     * Слева остаётся стандартный отступ контейнера,
     * справа карусель доходит до края viewport.
     */
    .good-work .wd-nested-carousel {
        width: auto !important;
        max-width: none !important;

        margin-right: calc(50% - 50vw) !important;
    }
}




/* =========================================================
   KARAT — «Популярні послуги»
   Карусель до правого края экрана на мобильном
   ========================================================= */

@media (max-width: 767px) {

    #our-services,
    #our-services > .vc_row,
    #our-services > .vc_row > .wpb_column,
    #our-services > .vc_row > .wpb_column > .vc_column-inner,
    #our-services > .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper {
        overflow: visible !important;
    }

    #our-services .wd-nested-carousel {
        width: auto !important;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
    }
}


/* =========================================================
   KARAT — «Чому нам довіряють»
   Карусель до правого края экрана только на мобильном
   ========================================================= */

@media (max-width: 767px) {

    /*
     * Секция обрезает расширение строго по краю экрана,
     * чтобы не появился горизонтальный скролл страницы.
     */
    #why-choose-us {
        overflow: hidden !important;
    }


    /*
     * Внутренние контейнеры WPBakery не должны
     * преждевременно обрезать карусель.
     */
    #why-choose-us > .vc_row,
    #why-choose-us .vc_col-sm-8,
    #why-choose-us .vc_col-sm-8 > .vc_column-inner,
    #why-choose-us .vc_col-sm-8 > .vc_column-inner > .wpb_wrapper {
        overflow: visible !important;
    }


    /*
     * Левый отступ сохраняется.
     * Правая сторона карусели доходит до края viewport.
     */
    #why-choose-us .info-box-carousel-wrapper {
        width: auto !important;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
    }
}


/* =========================================================
   KARAT — FAQ
   Отступ между пунктами и высота заголовков
   ========================================================= */

#faqs .wd-accordion.wd-style-shadow > .wd-accordion-item {
    margin-bottom: 7px !important;
}


/*
 * Убираем лишний отступ после последнего вопроса.
 */
#faqs .wd-accordion.wd-style-shadow > .wd-accordion-item:last-child {
    margin-bottom: 0 !important;
}


/*
 * Внутренние вертикальные отступы строки вопроса.
 */
#faqs .wd-accordion-title {
    gap: 12px !important;
    padding-block: 14px !important;
}

































@media (max-width: 767px) {
   .title-dot-text-block p {
      display: flex !important;
      align-items: flex-start !important;
      gap: 10px;
      margin: 0 !important;
   }

   .title-dot-text-block p img {
      flex: 0 0 24px;
      width: 24px !important;
      height: 24px !important;
      margin: 3px 0 0 0 !important;
   }
}

.wd-text-block.dot-animation {
   --dot-size: 12px;
   --dot-gap: 13px;
   --dot-color: #ff6262;
   --dot-brand-color: 183, 28, 28;

   position: relative;
   z-index: 2;
   isolation: isolate;
   overflow: visible !important;
   border-radius: 999px;
   will-change: box-shadow;

   animation: karat-cta-glow 5.6s ease-in-out infinite;
}

.wd-text-block.dot-animation > p {
   position: relative;
   z-index: 4;
   display: inline-flex;
   align-items: center;
   gap: var(--dot-gap);
   margin: 0;
   overflow: visible;
}

.wd-text-block.dot-animation > p > img {
   display: none !important;
}

.wd-text-block.dot-animation > p::before {
   content: "";
   position: relative;
   z-index: 2;
   flex: 0 0 var(--dot-size);
   width: var(--dot-size);
   height: var(--dot-size);
   border-radius: 50%;
   background: var(--dot-color);

   box-shadow:
      0 0 0 4px rgba(var(--dot-brand-color), 0.5),
      0 0 12px rgba(255, 90, 90, 0.7);

   animation: karat-dot-core 2.6s ease-in-out infinite;
}

.wd-text-block.dot-animation > p::after {
   content: "";
   position: absolute;
   z-index: 1;
   top: 50%;
   left: calc(var(--dot-size) / 2);
   width: var(--dot-size);
   height: var(--dot-size);
   border: 2px solid rgba(255, 105, 105, 0.72);
   border-radius: 50%;
   pointer-events: none;

   animation: karat-dot-ring 2.6s ease-out infinite;
}

.wd-text-block.dot-animation::before {
   content: "";
   position: absolute;
   z-index: -2;
   inset: -48px -110px;
   border-radius: 999px;
   pointer-events: none;

   background:
      radial-gradient(
         ellipse at center,
         rgba(255, 95, 95, 0.72) 0%,
         rgba(239, 65, 65, 0.48) 22%,
         rgba(183, 28, 28, 0.25) 44%,
         rgba(183, 28, 28, 0.09) 64%,
         transparent 82%
      );

   filter: blur(30px);
   opacity: 0.5;
   transform: scale(0.96) translateZ(0);
   will-change: transform, opacity;

   animation: karat-aura-breathe 5.6s ease-in-out infinite;
}

.wd-text-block.dot-animation::after {
   content: "";
   position: absolute;
   z-index: -1;
   inset: -34px -78px;
   border-radius: 999px;
   pointer-events: none;

   background:
      radial-gradient(
         ellipse at center,
         rgba(255, 195, 195, 0.85) 0%,
         rgba(255, 112, 112, 0.76) 17%,
         rgba(235, 58, 58, 0.52) 36%,
         rgba(183, 28, 28, 0.27) 56%,
         rgba(183, 28, 28, 0.08) 71%,
         transparent 86%
      );

   filter: blur(22px);
   opacity: 0;
   transform: scale(0.9) translateZ(0);
   will-change: transform, opacity;

   animation: karat-cta-wave 5.6s ease-in-out infinite;
}

@keyframes karat-dot-core {
   0%,
   100% {
      transform: scale(0.94);

      box-shadow:
         0 0 0 4px rgba(var(--dot-brand-color), 0.48),
         0 0 10px rgba(255, 90, 90, 0.58);
   }

   50% {
      transform: scale(1.12);

      box-shadow:
         0 0 0 6px rgba(var(--dot-brand-color), 0.68),
         0 0 18px rgba(255, 90, 90, 0.9),
         0 0 30px rgba(183, 28, 28, 0.58);
   }
}

@keyframes karat-dot-ring {
   0% {
      transform: translate(-50%, -50%) scale(0.85);
      opacity: 0.75;
   }

   70% {
      transform: translate(-50%, -50%) scale(2.6);
      opacity: 0;
   }

   100% {
      transform: translate(-50%, -50%) scale(2.6);
      opacity: 0;
   }
}

@keyframes karat-cta-glow {
   0%,
   100% {
      box-shadow:
         0 0 0 1px rgba(255, 105, 105, 0.32),
         0 0 12px rgba(255, 75, 75, 0.3),
         0 0 30px rgba(183, 28, 28, 0.24),
         0 0 55px rgba(183, 28, 28, 0.12);
   }

   50% {
      box-shadow:
         0 0 0 2px rgba(255, 145, 145, 0.82),
         0 0 22px rgba(255, 82, 82, 0.75),
         0 0 55px rgba(220, 40, 40, 0.6),
         0 0 105px rgba(183, 28, 28, 0.42);
   }
}

@keyframes karat-aura-breathe {
   0%,
   100% {
      opacity: 0.38;
      transform: scale(0.96) translateZ(0);
   }

   50% {
      opacity: 0.82;
      transform: scale(1.08) translateZ(0);
   }
}

@keyframes karat-cta-wave {
   0% {
      opacity: 0;
      transform: scale(0.9) translateZ(0);
   }

   18% {
      opacity: 0.28;
      transform: scale(0.97) translateZ(0);
   }

   45% {
      opacity: 0.82;
      transform: scale(1.08) translateZ(0);
   }

   72% {
      opacity: 0.34;
      transform: scale(1.28) translateZ(0);
   }

   100% {
      opacity: 0;
      transform: scale(1.45) translateZ(0);
   }
}

.wpb_wrapper:has(> .wd-text-block.dot-animation),
.vc_column-inner:has(.wd-text-block.dot-animation),
.wd-row:has(.wd-text-block.dot-animation),
.vc_row:has(.wd-text-block.dot-animation) {
   overflow: visible !important;
}

@media (max-width: 767px) {
   .wd-text-block.dot-animation::before {
      inset: -38px -58px;
      filter: blur(26px);
   }

   .wd-text-block.dot-animation::after {
      inset: -27px -42px;
      filter: blur(20px);
   }
}

@media (prefers-reduced-motion: reduce) {
   .wd-text-block.dot-animation,
   .wd-text-block.dot-animation::before,
   .wd-text-block.dot-animation::after,
   .wd-text-block.dot-animation > p::before,
   .wd-text-block.dot-animation > p::after {
      animation: none;
   }

   .wd-text-block.dot-animation {
      box-shadow:
         0 0 0 2px rgba(255, 125, 125, 0.75),
         0 0 20px rgba(255, 75, 75, 0.62),
         0 0 50px rgba(183, 28, 28, 0.4);
   }

   .wd-text-block.dot-animation::before {
      opacity: 0.55;
      transform: none;
   }

   .wd-text-block.dot-animation::after {
      display: none;
   }
}













/* =========================================================
   KARAT — компактные преимущества в Hero
   4 блока в одну строку без растягивания
   ========================================================= */

.karat-hero-benefits > .wpb_column > .vc_column-inner > .wpb_wrapper,
.karat-hero-benefits > .vc_column-inner > .wpb_wrapper {
   display: flex !important;
   flex-flow: row nowrap !important;
   align-items: flex-start !important;
   justify-content: flex-start !important;

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

   gap: 16px !important;
}


/* Каждый из четырёх блоков */

.karat-hero-benefits > .wpb_column > .vc_column-inner > .wpb_wrapper > .info-box-wrapper,
.karat-hero-benefits > .vc_column-inner > .wpb_wrapper > .info-box-wrapper {
   display: block !important;

   flex: 0 0 142px !important;

   width: 142px !important;
   min-width: 142px !important;
   max-width: 142px !important;

   margin: 0 !important;
   padding: 0 !important;

   vertical-align: top !important;
}


/* Сам Information box */

.karat-hero-benefits .wd-info-box {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: flex-start !important;

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

   margin: 0 !important;
   padding: 0 !important;

   text-align: center !important;
}


/* Иконка */

.karat-hero-benefits .box-icon-wrapper {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;

   width: 100% !important;
   margin: 0 0 14px !important;
   padding: 0 !important;
}

.karat-hero-benefits .info-box-icon,
.karat-hero-benefits .info-svg-wrapper {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;

   margin: 0 auto !important;
}


/* Текстовая часть */

.karat-hero-benefits .info-box-content {
   display: block !important;

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

   margin: 0 !important;
   padding: 0 !important;
}


/* Заголовок */

.karat-hero-benefits .info-box-title {
   display: block !important;

   width: 142px !important;
   min-width: 142px !important;
   max-width: 142px !important;
   min-height: 48px !important;

   margin: 0 auto !important;
   padding: 0 !important;

   color: #FFFFFF !important;

   font-size: 16px !important;
   font-weight: 600 !important;
   line-height: 24px !important;

   text-align: center !important;
   white-space: normal !important;
   word-break: normal !important;
   overflow-wrap: normal !important;
   hyphens: none !important;
}


/* Убираем ручные переносы, если WPBakery добавил BR */

.karat-hero-benefits .info-box-title br {
   display: none !important;
}


/* Для более узких экранов */

@media (max-width: 1200px) {

   .karat-hero-benefits > .wpb_column > .vc_column-inner > .wpb_wrapper,
   .karat-hero-benefits > .vc_column-inner > .wpb_wrapper {
      gap: 12px !important;
   }

   .karat-hero-benefits > .wpb_column > .vc_column-inner > .wpb_wrapper > .info-box-wrapper,
   .karat-hero-benefits > .vc_column-inner > .wpb_wrapper > .info-box-wrapper {
      flex-basis: 132px !important;

      width: 132px !important;
      min-width: 132px !important;
      max-width: 132px !important;
   }

   .karat-hero-benefits .info-box-title {
      width: 132px !important;
      min-width: 132px !important;
      max-width: 132px !important;
   }

}









#map-block .vc_column-inner > .wpb_wrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
}

#map-block .map-street-info {
   margin-left: auto !important;
   text-align: right !important;
}

#map-block .map-street-info p {
   margin: 0;
   text-align: right;
}

#map-block .vc_empty_space {
   flex: 0 0 100%;
   width: 100%;
}

#map-block .wd-button-wrapper {
   margin-left: auto;
}

@media (max-width: 767px) {
   #map-block .vc_column-inner > .wpb_wrapper {
      align-items: flex-start;
   }

   #map-block .wd-image {
      flex: 0 0 90px;
      max-width: 90px;
   }

   #map-block .wd-image img {
      width: 90px;
      height: auto;
   }

   #map-block .map-street-info {
      flex: 0 1 auto;
      max-width: calc(100% - 105px);
      margin-left: auto !important;
      text-align: right !important;
   }

   #map-block .map-street-info p {
      margin: 0;
      text-align: right;
   }

   #map-block .wd-button-wrapper {
      width: 100%;
      margin-left: 0;
      text-align: right;
   }
}





/* Mobile Custom Top Menu */

@media (max-width: 1024px) {
   .whb-header .whb-general-header .whb-general-header-inner {
      align-items: center;
   }

   .whb-header .whb-general-header .whb-mobile-left {
      flex: 0 0 96px !important;
      width: 96px !important;
      min-width: 96px !important;
      max-width: 96px !important;
      margin-inline: 0 !important;
   }

   .whb-header .whb-general-header .whb-mobile-center {
      flex: 1 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      justify-content: center;
   }

   .whb-header .whb-general-header .whb-mobile-right {
      flex: 0 0 48px !important;
      width: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      margin-inline: 0 !important;
      justify-content: flex-end;
   }

   .whb-header .whb-general-header .whb-mobile-left .site-logo {
      width: 100%;
      max-width: 100%;
      padding-inline: 0 !important;
   }

   .whb-header .whb-general-header .whb-mobile-left .wd-logo {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
   }

   .whb-header .whb-general-header .whb-mobile-left .wd-logo img {
      width: auto;
      max-width: 92px !important;
   }

   .whb-header .whb-general-header .whb-mobile-center > .wd-header-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      padding-inline: 2px !important;
   }

   .karat-mobile-contacts {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-width: 0;
      line-height: 1;
   }

   .karat-mobile-phone {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      max-width: 100%;
      margin-bottom: 6px;
      color: #ffffff !important;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none !important;
      white-space: nowrap;
   }

   .karat-mobile-phone:hover,
   .karat-mobile-phone:focus {
      color: #ffffff !important;
   }

   .karat-mobile-phone-icon {
      flex: 0 0 auto;
      width: 15px;
      color: #b71c1c;
      font-size: 14px;
      line-height: 1;
      text-align: center;
   }

   .karat-mobile-phone-number {
      display: block;
      white-space: nowrap;
   }

   .wd-social-icons.karat-mobile-socials {
      --wd-align: center;
      --wd-social-size: 26px;
      --wd-social-gap: 7px;
      --wd-social-icon-size: 14px;
      --wd-social-bg: transparent;
      --wd-social-bg-hover: transparent;
      --wd-social-color: #ffffff;
      --wd-social-color-hover: #b71c1c;

      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon {
      display: inline-flex !important;
      flex: 0 0 26px !important;
      align-items: center !important;
      justify-content: center !important;
      width: 26px !important;
      min-width: 26px !important;
      max-width: 26px !important;
      height: 26px !important;
      min-height: 26px !important;
      max-height: 26px !important;
      margin: 0 !important;
      padding: 0 !important;
      color: #ffffff !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      opacity: 1;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon .wd-icon {
      color: inherit !important;
      font-size: 14px !important;
      line-height: 1 !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon .wd-icon::before {
      color: inherit !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon:hover,
   .wd-social-icons.karat-mobile-socials .wd-social-icon:focus {
      color: #b71c1c !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon:focus-visible {
      outline: 1px solid rgba(183, 28, 28, 0.75);
      outline-offset: 2px;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav {
      --wd-tools-icon-width: 32px;

      width: 48px;
      min-width: 48px;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav > a {
      width: 48px;
      height: 44px;
      padding-inline: 4px;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav .wd-tools-icon {
      width: 40px;
      height: 40px;
      margin: 0;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav .wd-custom-icon {
      width: 32px !important;
      max-width: 32px !important;
      opacity: 1;
   }
}

@media (max-width: 360px) {
   .whb-header .whb-general-header .whb-mobile-left {
      flex-basis: 84px !important;
      width: 84px !important;
      min-width: 84px !important;
      max-width: 84px !important;
   }

   .whb-header .whb-general-header .whb-mobile-left .wd-logo img {
      max-width: 82px !important;
   }

   .whb-header .whb-general-header .whb-mobile-right {
      flex-basis: 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav {
      --wd-tools-icon-width: 29px;

      width: 44px;
      min-width: 44px;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav > a {
      width: 44px;
      padding-inline: 2px;
   }

   .whb-header .whb-general-header .whb-mobile-right .wd-header-mobile-nav .wd-custom-icon {
      width: 29px !important;
      max-width: 29px !important;
   }

   .karat-mobile-contacts {
      gap: 6px;
   }

   .karat-mobile-phone {
      gap: 5px;
      font-size: 12.5px;
   }

   .karat-mobile-phone-icon {
      width: 13px;
      font-size: 12.5px;
   }

   .wd-social-icons.karat-mobile-socials {
      --wd-social-size: 24px;
      --wd-social-gap: 5px;
      --wd-social-icon-size: 13px;

      gap: 5px !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon {
      flex-basis: 24px !important;
      width: 24px !important;
      min-width: 24px !important;
      max-width: 24px !important;
      height: 24px !important;
      min-height: 24px !important;
      max-height: 24px !important;
   }

   .wd-social-icons.karat-mobile-socials .wd-social-icon .wd-icon {
      font-size: 13px !important;
   }
}























/* ==========================================================
   KARAT — CONTACT FORM + SMS GIFT
   Scope: #contact-form-gift only
   ========================================================== */

#contact-form-gift {
   --karat-red: #b71c1c;
   --karat-red-hover: #c82020;

   --karat-text: #ffffff;
   --karat-muted: rgba(255, 255, 255, .62);
   --karat-border: rgba(255, 255, 255, .30);
   --karat-border-focus: rgba(255, 255, 255, .62);

   /* USER */
   --karat-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");

   /* PHONE */
   --karat-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M7.1 3.5 9.6 8 7.8 9.8c1.3 2.7 3.5 4.9 6.2 6.2l1.8-1.8 4.5 2.5-.5 3c-.2 1-1.1 1.8-2.2 1.8C9.4 21.5 2.5 14.6 2.5 6.4c0-1.1.8-2 1.8-2.2l2.8-.7Z'/%3E%3C/svg%3E");

   /* CALL */
   --karat-icon-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M7.1 3.5 9.6 8 7.8 9.8c1.3 2.7 3.5 4.9 6.2 6.2l1.8-1.8 4.5 2.5-.5 3c-.2 1-1.1 1.8-2.2 1.8C9.4 21.5 2.5 14.6 2.5 6.4c0-1.1.8-2 1.8-2.2l2.8-.7ZM15 3.5c2.8.6 4.9 2.7 5.5 5.5M15.3 7c1.1.3 1.9 1.1 2.2 2.2'/%3E%3C/svg%3E");

   /* GIFT */
   --karat-icon-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18v11H3zM2 7h20v4H2zM12 7v14'/%3E%3Cpath d='M12 7H7.7C5.8 7 4.5 6 4.5 4.7 4.5 3.5 5.4 3 6.4 3 8.9 3 12 7 12 7ZM12 7h4.3c1.9 0 3.2-1 3.2-2.3 0-1.2-.9-1.7-1.9-1.7C15.1 3 12 7 12 7Z'/%3E%3C/g%3E%3C/svg%3E");
}


/* ==========================================================
   CF7
   ========================================================== */

#contact-form-gift .wpcf7 {
   width: 100%;
}

#contact-form-gift .wpcf7-form {
   width: 100%;
   margin-top: 22px;
}

#contact-form-gift .wpcf7-form > p {
   margin: 0 0 12px;
}

#contact-form-gift .wpcf7-form-control-wrap {
   position: relative;
   display: block;
   width: 100%;
}


/* ==========================================================
   FIELD ICONS
   ========================================================== */

#contact-form-gift .wpcf7-form-control-wrap[data-name="your-name"]::before,
#contact-form-gift .wpcf7-form-control-wrap[data-name="your-phone"]::before {
   content: "";
   position: absolute;
   left: 15px;
   top: 50%;
   z-index: 2;

   width: 19px;
   height: 19px;

   transform: translateY(-50%);

   background-color: rgba(255, 255, 255, .62);

   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;

   pointer-events: none;
}

#contact-form-gift .wpcf7-form-control-wrap[data-name="your-name"]::before {
   -webkit-mask-image: var(--karat-icon-user);
   mask-image: var(--karat-icon-user);
}

#contact-form-gift .wpcf7-form-control-wrap[data-name="your-phone"]::before {
   -webkit-mask-image: var(--karat-icon-phone);
   mask-image: var(--karat-icon-phone);
}

#contact-form-gift .wpcf7-form-control-wrap:focus-within::before {
   background-color: #fff;
}


/* ==========================================================
   INPUTS
   ========================================================== */

#contact-form-gift input[type="text"],
#contact-form-gift input[type="tel"] {
   display: block;
   width: 100%;
   height: 48px;

   margin: 0 !important;
   padding: 0 14px 0 46px !important;

   color: #fff !important;

   font-size: 15px !important;
   font-weight: 400 !important;
   line-height: 48px !important;

   background: rgba(10, 13, 17, .22) !important;

   border: 1px solid var(--karat-border) !important;
   border-radius: 7px !important;

   box-shadow: none !important;
   outline: none !important;

   transition:
      border-color .2s ease,
      background-color .2s ease;
}

#contact-form-gift input[type="text"]::placeholder,
#contact-form-gift input[type="tel"]::placeholder {
   color: rgba(255, 255, 255, .48) !important;
   opacity: 1;
}

#contact-form-gift input[type="text"]:focus,
#contact-form-gift input[type="tel"]:focus {
   background: rgba(10, 13, 17, .32) !important;
   border-color: var(--karat-border-focus) !important;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

#contact-form-gift .wpcf7-form > p:has(.wpcf7-submit) {
   position: relative;
   width: 100%;
   margin-top: 16px;
   margin-bottom: 0;
}

#contact-form-gift .wpcf7-submit {
   display: block !important;

   width: 100% !important;
   max-width: none !important;
   height: 50px !important;

   margin: 0 !important;
   padding: 0 48px !important;

   color: #fff !important;
   background-color: var(--karat-red) !important;

   /*
    * Иконка теперь является background самого input.
    * Поэтому она НЕ ездит при изменении ширины.
    */
   background-image: var(--karat-icon-call) !important;
   background-repeat: no-repeat !important;
   background-position: 18px 50% !important;
   background-size: 20px 20px !important;

   border: 0 !important;
   border-radius: 6px !important;

   font-size: 16px !important;
   font-weight: 600 !important;
   line-height: 50px !important;
   text-align: center !important;

   box-shadow: none !important;

   transition:
      background-color .2s ease,
      box-shadow .2s ease;
}

#contact-form-gift .wpcf7-submit:hover {
   background-color: var(--karat-red-hover) !important;
   box-shadow: 0 5px 15px rgba(183, 28, 28, .20) !important;
}

#contact-form-gift .wpcf7-submit:active {
   background-color: #a81919 !important;
}


/* Spinner */

#contact-form-gift .wpcf7-spinner {
   position: absolute;
   right: 12px;
   top: 50%;

   margin: 0;

   transform: translateY(-50%);
}


/* ==========================================================
   SMS GIFT
   ========================================================== */

#contact-form-gift .karat-gift-box {
   display: flex;
   align-items: center;

   gap: 18px;

   width: 100%;
   margin-top: 24px;
   padding: 20px 0;

   border-top: 1px solid rgba(255, 255, 255, .12);
   border-bottom: 1px solid rgba(255, 255, 255, .12);
}

#contact-form-gift .karat-gift-icon {
   flex: 0 0 54px;

   width: 54px;
   height: 54px;

   background-color: var(--karat-red);

   -webkit-mask-image: var(--karat-icon-gift);
   mask-image: var(--karat-icon-gift);

   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;

   -webkit-mask-position: center;
   mask-position: center;

   -webkit-mask-size: 44px 44px;
   mask-size: 44px 44px;
}

#contact-form-gift .karat-gift-content {
   flex: 1 1 auto;
   min-width: 0;
}

#contact-form-gift .karat-gift-title {
   margin: 0 0 5px;

   color: #fff;

   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
}

#contact-form-gift .karat-gift-title span {
   color: rgb(255, 255, 255);
   background-color: rgb(183, 28, 28);
   padding: 1px 6px 1px 6px;
   border-radius: 5px;
}

#contact-form-gift .karat-gift-text {
   margin: 0;

   color: rgba(255, 255, 255, .75);

   font-size: 13.5px;
   font-weight: 400;
   line-height: 1.5;
}


/* ==========================================================
   VALIDATION
   ========================================================== */

#contact-form-gift .wpcf7-not-valid-tip {
   margin-top: 5px;

   color: #ff7777;

   font-size: 12px;
   line-height: 1.35;
}

#contact-form-gift .wpcf7-not-valid {
   border-color: rgba(255, 90, 90, .75) !important;
}

#contact-form-gift .wpcf7-response-output {
   margin: 12px 0 0 !important;
   padding: 9px 12px !important;

   color: #fff;

   font-size: 12.5px;
   line-height: 1.4;

   background: rgba(0, 0, 0, .20);
   border-radius: 6px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

   #contact-form-gift .wpcf7-form {
      margin-top: 18px;
   }

   #contact-form-gift .wpcf7-form > p {
      margin-bottom: 10px;
   }


   /* Fields */

   #contact-form-gift input[type="text"],
   #contact-form-gift input[type="tel"] {
      height: 46px;

      padding-left: 43px !important;

      font-size: 14px !important;
      line-height: 46px !important;

      border-radius: 6px !important;
   }

   #contact-form-gift .wpcf7-form-control-wrap[data-name="your-name"]::before,
   #contact-form-gift .wpcf7-form-control-wrap[data-name="your-phone"]::before {
      left: 14px;

      width: 18px;
      height: 18px;
   }


   /* Button */

   #contact-form-gift .wpcf7-form > p:has(.wpcf7-submit) {
      margin-top: 14px;
   }

   #contact-form-gift .wpcf7-submit {
      height: 48px !important;

      padding-left: 44px !important;
      padding-right: 44px !important;

      background-position: 16px 50% !important;
      background-size: 19px 19px !important;

      font-size: 15px !important;
      line-height: 48px !important;
   }


   /* Gift — отдельная адаптивная сетка */

   #contact-form-gift .karat-gift-box {
      display: grid;

      grid-template-columns: 42px minmax(0, 1fr);
      grid-template-rows: auto auto;

      align-items: center;

      column-gap: 12px;
      row-gap: 10px;

      margin-top: 20px;
      padding: 18px 0;
   }

   #contact-form-gift .karat-gift-icon {
      grid-column: 1;
      grid-row: 1;

      width: 42px;
      height: 42px;

      -webkit-mask-size: 36px 36px;
      mask-size: 36px 36px;
   }

   /*
    * Делаем title и text непосредственными
    * участниками grid.
    */
   #contact-form-gift .karat-gift-content {
      display: contents;
   }

   #contact-form-gift .karat-gift-title {
      grid-column: 2;
      grid-row: 1;

      margin: 0;

      font-size: 17px;
      line-height: 1.35;
   }

   #contact-form-gift .karat-gift-text {
      grid-column: 1 / -1;
      grid-row: 2;

      font-size: 13px;
      line-height: 1.5;
   }

}












@media (max-width: 767.98px) {

   .subtitle-mobile {
      display: block !important;
      width: 100% !important;
      margin: 18px 0 22px !important;
   }

   .subtitle-mobile .box-icon-wrapper {
      display: none !important;
   }

   .subtitle-mobile .info-box-content {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
   }

   .subtitle-mobile .info-box-inner {
      width: 100% !important;
      max-width: 100% !important;
      color: #b1b4c8 !important;
   }

   .subtitle-mobile .info-box-inner p {
      margin: 0 !important;
   }
}