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


.whb-top-bar .sled  { font-size: 16px !important; color: white;  }
.whb-top-bar .wd-social-icons>a  {     width: 35px;    height: 35px; }
.wd-header-nav>#menu-osnovnoe-menju li>a { text-transform: none;  font-size: 16px; }

.wd-header-nav  {     margin-left: 40px; }

footer .elementor-icon-list-text:hover, footer a:hover {
    color: #639755;
}

/* --- НАСТРОЙКИ ЦВЕТОВ --- */
:root {
    --brand-green: #629756; 
    --brand-black: #37424d;
}

/* 1. БАЗА КНОПКИ */
.pogert .elementor-button {
    background-color: #ffffff !important;
    color: var(--brand-black) !important;
    border: 2px solid var(--brand-green) !important;
    border-radius: 30px !important;
    
    /* Отступы как договаривались: Слева 25, Справа 15 */
    padding: 6px 15px 6px 25px !important; 
    
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* Скорость возврата текста и рамки (Быстро) */
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 56px; 
}

.pogert .elementor-button-content-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

/* 2. ЧЕРНЫЙ КРУГ (НАСТРОЙКА СКОРОСТИ) */
.pogert .elementor-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px; 
    height: 600px;
    background-color: var(--brand-black);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    
    /* СКОРОСТЬ ВОЗВРАТА (КОГДА УБРАЛИ МЫШКУ) - БЫСТРО (0.8 сек) */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
}

/* 3. НАСТРОЙКА ЗАЛИВКИ ПРИ НАВЕДЕНИИ */
.pogert .elementor-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    
    /* СКОРОСТЬ ЗАЛИВКИ (КОГДА НАВЕЛИ) - МЕДЛЕННО (2.5 сек) */
    /* Мы переопределяем transition только для hover состояния */
    transition: transform 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 4. КРУЖОК ИКОНКИ */
.pogert .elementor-button .elementor-button-icon {
    background-color: var(--brand-green) !important;
    border-radius: 50%;
    width: 44px !important; 
    height: 44px !important;
    min-width: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
    
    transition: background-color 0.4s ease;
}

/* 5. САМА СТРЕЛКА (ЦВЕТ И РАЗМЕР) */
/* Добавил path, чтобы точно покрасить линии */
.pogert .elementor-button .elementor-button-icon svg,
.pogert .elementor-button .elementor-button-icon svg path {
    width: 30px !important; /* Большая стрелка */
    height: auto !important;
    
    /* ИСХОДНЫЙ ЦВЕТ: БЕЛЫЙ */
    stroke: #ffffff !important; 
    fill: none !important; 
    
    transition: stroke 0.4s ease;
}

/* --- ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (HOVER) --- */

/* Текст и рамка */
.pogert .elementor-button:hover {
    color: #ffffff !important;
    border-color: var(--brand-black) !important;
}

/* Кружок иконки становится белым + анимация */
.pogert .elementor-button:hover .elementor-button-icon {
    background-color: #ffffff !important; 
    animation: bounceright 0.3s alternate ease infinite;
}

/* Стрелка становится ЗЕЛЕНОЙ */
.pogert .elementor-button:hover .elementor-button-icon svg,
.pogert .elementor-button:hover .elementor-button-icon svg path {
    stroke: var(--brand-green) !important;
}

/* --- KEYFRAMES --- */
@keyframes bounceright {
    from { transform: translateX(0); }
    to   { transform: translateX(5px); }
}


/* 1. Настраиваем сам блок заголовка WoodMart */
.page-title {
    position: relative;
    overflow: hidden; /* Чтобы сердечки не вылезали за края секции, если они сбоку */
}

/* 2. Поднимаем текст заголовка и крошки выше сердечек */
.page-title .container {
    position: relative;
    z-index: 2;
}

/* 3. Общие свойства для обоих сердечек */
.page-title::before,
.page-title::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none; /* Чтобы картинки не перекрывали клики по ссылкам */
    z-index: 1; /* Кладем под текст, но над фоном */
}

/* 4. ПЕРВОЕ СЕРДЕЧКО (летает вверх-вниз) */
.page-title::before {
    /* ВСТАВЬ ССЫЛКУ НА 1-Е СЕРДЕЧКО МЕЖДУ КАВЫЧКАМИ НИЖЕ */
    background-image: url('/wp-content/uploads/2026/03/page-header-shape-1.png');
    
    width: 80px;  /* Ширина сердечка */
    height: 73px; /* Высота сердечка */
    top: 20%;     /* Отступ сверху */
    left: 10%;    /* Отступ слева (можно менять на свой вкус) */
        opacity: 0.2;
    animation: float-bob-y 3s ease-in-out infinite;
}

/* 5. ВТОРОЕ СЕРДЕЧКО (летает влево-вправо) */
.page-title::after {
    /* ВСТАВЬ ССЫЛКУ НА 2-Е СЕРДЕЧКО МЕЖДУ КАВЫЧКАМИ НИЖЕ */
    background-image: url('/wp-content/uploads/2026/03/page-header-shape-2.png');
    
    width: 163px;  /* Ширина сердечка */
    height: 140px; /* Высота сердечка */
    bottom: 20%;  /* Отступ снизу */
    right: 15%;   /* Отступ справа */
        opacity: 0.2;
    animation: float-bob-x 4s ease-in-out infinite;
}

/* 6. САМИ АНИМАЦИИ */
@keyframes float-bob-y {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); } /* 20px - это высота полета */
    100% { transform: translateY(0); }
}

@keyframes float-bob-x {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); } /* 20px - это дальность полета */
    100% { transform: translateX(0); }
}

.wd-tools-element .wd-tools-icon  { color: #639755; }
h2.elementor-heading-title {     text-transform: none; }






/* Включаем стили только для компьютеров (где есть мышка) */
@media (min-width: 1025px) {
    
    /* Скрываем системный курсор ВЕЗДЕ, КРОМЕ админки и редактора Elementor */
body:not(.wp-admin):not(.elementor-editor-active), 
body:not(.wp-admin):not(.elementor-editor-active) a, 
body:not(.wp-admin):not(.elementor-editor-active) button, 
body:not(.wp-admin):not(.elementor-editor-active) input, 
body:not(.wp-admin):not(.elementor-editor-active) select, 
body:not(.wp-admin):not(.elementor-editor-active) textarea {
    cursor: none !important;
}

/* Принудительно прячем наши кастомные кружочки, если мы в режиме редактирования */
body.wp-admin .custom-cursor-inner,
body.wp-admin .custom-cursor-outer,
body.elementor-editor-active .custom-cursor-inner,
body.elementor-editor-active .custom-cursor-outer {
    display: none !important;
}

    /* Настройки центральной точки */
    .custom-cursor-inner {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px; /* Размер точки */
        height: 8px;
        background-color: #9ebd9c; /* Зеленый цвет (похож на тот, что на скрине) */
        border-radius: 50%;
        pointer-events: none; /* ВАЖНО: чтобы курсор не мешал кликать на кнопки */
        z-index: 999999;
    }

    /* Настройки внешнего круга с задержкой */
    .custom-cursor-outer {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px; /* Размер круга */
        height: 20px;
        border: 1px solid #9ebd9c; /* Толщина и цвет рамки круга */
        border-radius: 50%;
        pointer-events: none;
        z-index: 999998;
        transition: width 0.2s, height 0.2s, background-color 0.2s; /* Плавность для эффекта наведения */
    }

    /* Как ведет себя круг, когда мы наводим его на ссылку */
    .custom-cursor-outer.cursor-hover {
        width: 30px;
        height: 30px;
        background-color: rgba(158, 189, 156, 0.2); /* Делаем чуть залитым внутри прозрачным зеленым */
        border-color: transparent; /* Убираем ободок при наведении (можно удалить эту строку, если не нужно) */
    }
}

/* 1. Блок с логотипом: прибиваем влево и вверх, убрана серая полоса */
.mobile-nav-custom-logo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(100% - 60px) !important; /* Занимаем всю ширину, оставив 60px справа под крестик */
    height: 64px !important; 
    padding: 10px 20px !important; 
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff; /* Белый фон, чтобы под логотипом не просвечивало меню при скролле */
    z-index: 100;
}

/* Настройка размера самой картинки логотипа */
.mobile-nav-custom-logo img {
    max-height: 44px;
    width: auto;
}

/* 2. Крестик: прибиваем ровно в правый верхний угол на ту же линию */
.mobile-nav .wd-heading,
.mobile-nav .close-side-widget,
.mobile-nav .wd-close-side {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60px !important; /* Выделяем ровно 60px под клик крестика */
    height: 64px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 101 !important;
    background: transparent !important;
	border-bottom: 0;
}

/* Если у темы WoodMart в шапке выводится слово "Меню", скрываем его, чтобы не наслаивалось на крестик */
.mobile-nav .wd-heading .wd-heading-title {
    display: none !important;
}

/* 3. Опускаем ссылки меню вниз, чтобы наш зафиксированный логотип их не перекрывал */
.mobile-nav,
.mobile-nav .wd-scroll-content {
    padding-top: 64px !important;
}





/* --- БЛОК КОНТАКТОВ В МЕНЮ (С КАРТИНКАМИ СОЦСЕТЕЙ) --- */

.mobile-nav-custom-footer {
    padding: 15px 20px 30px 20px; 
    background-color: #ffffff;
    border-top: none; 
}

.mn-footer-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important; 
    text-decoration: none !important;
    border: none !important; 
    padding: 0 !important;
}

/* Зеленые кружки для почты и телефона */
.mn-footer-icon {
    width: 30px; 
    height: 30px;
    background-color: #6a9559; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; 
    margin-right: 12px;
    flex-shrink: 0;
}

.mn-footer-icon svg {
    display: block; 
}

/* Текст (почта и телефон) */
.mn-footer-text {
    color: #333333; 
    font-size: 15px;
    font-weight: 600;
    line-height: 1; 
}

/* Блок соцсетей */
.mn-footer-socials {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между иконками TG и VK */
    padding-top: 5px; 
}

/* Ссылки-контейнеры для твоих картинок */
.mn-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Задаем жесткий размер 30x30 для картинок соцсетей */
.mn-social-link img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain; /* Картинка не сплюснется, если ее исходные пропорции немного отличаются */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}