.elementor-852 .elementor-element.elementor-element-2255679{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:36px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-6f53a4b{padding:10px 0px 0px 0px;top:0px;z-index:0;text-align:end;--flx-min:40;--flx-max:90;}.elementor-852 .elementor-element.elementor-element-6f53a4b.elementor-element{--align-self:flex-end;}body:not(.rtl) .elementor-852 .elementor-element.elementor-element-6f53a4b{right:0px;}body.rtl .elementor-852 .elementor-element.elementor-element-6f53a4b{left:0px;}.elementor-852 .elementor-element.elementor-element-6f53a4b .elementor-heading-title{font-family:"TT Norms Pro Expanded", Sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#F9F9F9;font-size:clamp(calc(var(--flx-min) * 1px), calc(calc(var(--flx-min) * 1px) + (var(--flx-max) - var(--flx-min)) * ((100vw - calc(var(--flx-min-vw, 320) * 1px)) / (var(--flx-max-vw, 1200) - var(--flx-min-vw, 320)))), calc(var(--flx-max) * 1px)) !important;}.elementor-852 .elementor-element.elementor-element-61aa121.elementor-element{--align-self:flex-start;}.elementor-852 .elementor-element.elementor-element-61aa121 .elementor-heading-title{font-family:"TT Norms Pro Expanded", Sans-serif;font-weight:600;text-transform:uppercase;color:#C2ACB6;font-size:clamp(calc(var(--flx-min) * 1px), calc(calc(var(--flx-min) * 1px) + (var(--flx-max) - var(--flx-min)) * ((100vw - calc(var(--flx-min-vw, 320) * 1px)) / (var(--flx-max-vw, 1200) - var(--flx-min-vw, 320)))), calc(var(--flx-max) * 1px)) !important;}.elementor-852 .elementor-element.elementor-element-61aa121{--flx-min:26;--flx-max:36;}.elementor-852 .elementor-element.elementor-element-4a2eb40{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;}.elementor-852 .elementor-element.elementor-element-9aa5973{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;color:#C2ACB6;--flx-min:14;--flx-max:18;}.elementor-852 .elementor-element.elementor-element-9aa5973, .elementor-852 .elementor-element.elementor-element-9aa5973 p, .elementor-852 .elementor-element.elementor-element-9aa5973 .elementor-widget-container, .elementor-852 .elementor-element.elementor-element-9aa5973 .elementor-widget-container p{font-size:clamp(calc(var(--flx-min) * 1px), calc(calc(var(--flx-min) * 1px) + (var(--flx-max) - var(--flx-min)) * ((100vw - calc(var(--flx-min-vw, 320) * 1px)) / (var(--flx-max-vw, 1200) - var(--flx-min-vw, 320)))), calc(var(--flx-max) * 1px)) !important;}.elementor-852 .elementor-element.elementor-element-ddea86f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-ddea86f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-852 .elementor-element.elementor-element-1649f69{width:100%;max-width:100%;}.elementor-852 .elementor-element.elementor-element-1649f69.elementor-element{--align-self:stretch;}.elementor-852 .elementor-element.elementor-element-94ce719{--spacer-size:5px;}.elementor-852 .elementor-element.elementor-element-15c0eb1{width:auto;max-width:auto;}.elementor-852 .elementor-element.elementor-element-15c0eb1.elementor-element{--align-self:flex-end;}.elementor-852 .elementor-element.elementor-element-a7b9036{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:40px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-852 .elementor-element.elementor-element-d9a32cd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-852 .elementor-element.elementor-element-d9a32cd.e-con{--align-self:flex-start;}.elementor-852 .elementor-element.elementor-element-9640ecc > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-852 .elementor-element.elementor-element-8813dae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-products-with-bg, .elementor-852 .elementor-element.elementor-element-0d32c91 .wd-products-with-bg :is(.wd-product,.wd-cat){--wd-prod-bg:#F9F9F9;--wd-bordered-bg:#F9F9F9;}@media(min-width:768px){.elementor-852 .elementor-element.elementor-element-ddea86f{--width:100%;}.elementor-852 .elementor-element.elementor-element-d9a32cd{--width:25%;}.elementor-852 .elementor-element.elementor-element-8813dae{--width:83%;}}@media(max-width:1024px) and (min-width:768px){.elementor-852 .elementor-element.elementor-element-ddea86f{--width:100%;}.elementor-852 .elementor-element.elementor-element-d9a32cd{--width:100%;}.elementor-852 .elementor-element.elementor-element-8813dae{--width:100%;}}@media(max-width:1366px){.elementor-852 .elementor-element.elementor-element-6f53a4b{padding:5px 0px 0px 0px;}.elementor-852 .elementor-element.elementor-element-9aa5973{--container-widget-width:65%;--container-widget-flex-grow:0;width:var( --container-widget-width, 65% );max-width:65%;}}@media(max-width:1024px){.elementor-852 .elementor-element.elementor-element-6f53a4b .elementor-heading-title{line-height:1.1em;}.elementor-852 .elementor-element.elementor-element-4a2eb40{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-852 .elementor-element.elementor-element-9aa5973{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-852 .elementor-element.elementor-element-ddea86f{--border-radius:30px 30px 30px 30px;--margin-top:15px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:4px;--padding-bottom:4px;--padding-left:4px;--padding-right:4px;}.elementor-852 .elementor-element.elementor-element-a7b9036{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-852 .elementor-element.elementor-element-d9a32cd{--padding-top:0px;--padding-bottom:15px;--padding-left:5px;--padding-right:5px;}}@media(max-width:767px){.elementor-852 .elementor-element.elementor-element-ddea86f{--margin-top:15px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;}.elementor-852 .elementor-element.elementor-element-1649f69{width:var( --container-widget-width, 33% );max-width:33%;--container-widget-width:33%;--container-widget-flex-grow:0;}.elementor-852 .elementor-element.elementor-element-15c0eb1{width:var( --container-widget-width, 33% );max-width:33%;--container-widget-width:33%;--container-widget-flex-grow:0;}.elementor-852 .elementor-element.elementor-element-d9a32cd{--border-radius:0px 15px 15px 0px;}}/* Start custom CSS for wd_sidebar, class: .elementor-element-9640ecc *//* ==========================================
   АНТИ-СТРИБОК ПРИ ЗАВАНТАЖЕННІ (FOUC FIX)
   ========================================== */
/* Миттєво ховаємо начинку віджетів (крім заголовка), поки JS не розрахує їх стан */
html.sidebar-preload-hide .elementor-widget-wd_sidebar .widget > *:not(.widget-title) {
    display: none !important;
}

/* Обертаємо стрілочку за замовчуванням у стан "закрито" на час завантаження */
html.sidebar-preload-hide .elementor-widget-wd_sidebar .widget .widget-title::after {
    transform: translateY(-50%) rotate(-180deg) !important;
}







/* Робимо текст плейсхолдера прозорим для поля пошуку */
.wd-filter-search input[type="text"]::placeholder {
    color: transparent !important;
}

/* Для кращої підтримки різних браузерів */
.wd-filter-search input[type="text"]::-webkit-input-placeholder {
    color: transparent !important; /* Chrome, Safari, Edge, Opera */
}
.wd-filter-search input[type="text"]::-moz-placeholder {
    color: transparent !important; /* Firefox */
}


.widget {
    padding-bottom: 0px !important;
}


/* ===================================================
   КАСТОМНІ ФІЛЬТРИ: БІЛІ БЛОКИ, ТІНІ ТА 40px SVG
   =================================================== */

/* --- 1. КАРТОЧКИ ВІДЖЕТІВ (Фон та Тінь) --- */

.wd-filter-search input {
    border-radius: 30px !important;
}


.elementor-widget-wd_sidebar .widget {

    border-radius: 20px !important; /* Закруглені кути для карток */
    border: none !important;
}

.widget_price_filter .ui-slider-horizontal:before {
    height: 6px !important;
    background-color: #EBF4FE !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
    --wd-otl-style: none;
    display: none !important;
}

/* --- 2. Акордеони для заголовків --- */
.elementor-widget-wd_sidebar .widget-title {
    cursor: pointer !important;
    position: relative !important;
    padding-right: 24px !important;
    font-weight: 600 !important;
    user-select: none !important;
    border: none !important;
    font-size: 18px !important;
    font-family: 'Unbounded' !important;
}

.elementor-widget-wd_sidebar .widget-title::after {
    content: '' !important;
    position: absolute !important;
    right: 36px !important;
    top: 50% !important;
    width: 12px !important;
    height: 8px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transform: translateY(-50%) !important;
    transition: transform 0.3s ease !important;
}

.elementor-widget-wd_sidebar .widget.is-closed .widget-title::after {
    transform: translateY(-50%) rotate(-180deg) !important;
}
.elementor-widget-wd_sidebar .widget.is-closed > ul,
.elementor-widget-wd_sidebar .widget.is-closed > div,
.elementor-widget-wd_sidebar .widget.is-closed > form {
    display: none !important;
}


.elementor-widget-wd_sidebar .widget-title {
    display: flex !important;
    justify-content: flex-start !important;
}

/* Градієнт для тексту заголовка "Категорії" */
.widget-title {
    background: #c2acb6;
    color: #ffffff !important; 
    padding: 8px 36px !important;
    border-radius: 30px !important;
}

/* --- 3. Скролбар --- */
.elementor-widget-wd_sidebar .wd-scroll-content {
    max-height: 300px !important; /* Висота контенту до появи скролу */
    overflow-y: auto !important;
    padding-right: 12px !important;
}
.elementor-widget-wd_sidebar .wd-scroll-content::-webkit-scrollbar {
    width: 10px !important;
}
.elementor-widget-wd_sidebar .wd-scroll-content::-webkit-scrollbar-track {
    background: #ffffff !important;
    border-radius: 4px !important;

}
.elementor-widget-wd_sidebar .wd-scroll-content::-webkit-scrollbar-thumb {
    /*background: #FF9AEE !important;*/
    border-radius: 4px !important;
    background: #C2ACB6 !important;

}

/* --- 4. ЗНИЩУЄМО СТАНДАРТНІ ЧЕКБОКСИ WOODMART --- */
.elementor-widget-wd_sidebar .wd-checkboxes-on .wd-filter-lable::before,
.elementor-widget-wd_sidebar .wd-checkboxes-on .wd-filter-lable::after,
.elementor-widget-wd_sidebar .wd-checkboxes-on .layer-term-lable::before,
.elementor-widget-wd_sidebar .wd-checkboxes-on .layer-term-lable::after {
    content: none !important;
    display: none !important;
}

/* --- 5. НАШІ 40px SVG ЧЕКБОКСИ --- */
.elementor-widget-wd_sidebar .cat-item > a,
.elementor-widget-wd_sidebar .wc-layered-nav-term > a {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding-left: 20px !important; /* 40px іконка + 12px відступ до тексту */
    min-height: 40px !important; /* Щоб іконка не обрізалась */
    text-decoration: none !important;
    color: #C2ACB6 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    transition: color 0.3s ease !important;
}

.elementor-widget-wd_sidebar .cat-item > a:hover,
.elementor-widget-wd_sidebar .wc-layered-nav-term > a:hover {
    color: #c2acb6 !important;
}

/* ПОРОЖНІЙ СТАН (uncheck) */
body .custom-mobile-sidebar .elementor-widget-wd_sidebar .cat-item > a::before,
body .elementor-widget-wd_sidebar .wc-layered-nav-term > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0px !important;
    margin-left: -50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;  /* Розмір іконки */
    height: 40px !important; /* Розмір іконки */
    background-image: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/quick-filters-general.svg') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    z-index: 1 !important;
}

/* ВИБРАНИЙ СТАН (check) */
.elementor-widget-wd_sidebar .cat-item.chosen > a::before,
.elementor-widget-wd_sidebar .cat-item.current-cat > a::before,
.elementor-widget-wd_sidebar .wc-layered-nav-term.chosen > a::before,
.elementor-widget-wd_sidebar .wc-layered-nav-term.wd-active > a::before {
    background-image: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/quick-filters-general.svg') !important;
}



/* ВИБРАНИЙ СТАН ДЛЯ КАТЕГОРІЙ (check) */
.elementor-widget-wd_sidebar .cat-item.wd-active > a::before {
    background-image: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/quick-filters-active.svg') !important;
}



/* Прибираємо старий псевдоелемент, якщо він залишився */
/*.elementor-widget-wd_sidebar .cat-item > a::after,*/
/*.elementor-widget-wd_sidebar .wc-layered-nav-term > a::after {*/
/*    display: none !important;*/
/*}*/

/* Цифри кількості товарів */
.elementor-widget-wd_sidebar .count {
    font-size: 13px !important;
    color: #A0A0A0 !important;
    margin-left: 6px !important;
}




/* --- 6. Повзунок ціни --- */
.widget_price_filter .ui-slider-range {
    background: #c2acb6 !important;
}
.widget_price_filter .ui-slider-handle {
    border: 2px solid #D09AFF !important;
    background-color: #FFFFFF !important;
    border-radius: 50% !important;
    outline: none !important;
    width: 18px !important;
    height: 18px !important;
    top: -8px !important; /* Центрування більшого повзунка */
}

.widget_price_filter .ui-slider .ui-slider-range {
    height: 6px !important;
    border-radius: 4px !important;
}
/* Ховаємо стандартну кнопку "Фільтр" */
.widget_price_filter .button {
    display: none !important;
}

/* --- 7. Кнопка "Скинути" (Внизу сайдбару) --- */
/* Базові налаштування кнопки */
.custom-reset-filters-btn {
    position: relative; /* Обов'язково для роботи псевдоелементів */
    overflow: hidden;   /* Щоб градієнт не виходив за кути кнопки */
    z-index: 1;         /* Щоб текст був над градієнтом */
    text-align: center;
    display: inline-block;
    transition: color 0.3s ease; /* Для плавного переходу кольору тексту, якщо треба */
}

/* Ефект при наведенні */
.custom-reset-filters-btn:hover::before {
    opacity: 0; /* Ховаємо перший */
}
.custom-reset-filters-btn:hover::after {
    opacity: 1; /* Показуємо другий */
}






.custom-reset-filters-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 24px !important;
    margin-top: 10px !important;
    border: 2px solid #E19E88;
    border-radius: 30px !important;
    box-shadow: 0px 10px 10px 0px #FF97EE40 !important; /* Тінь як у віджетів */
    color: #ffffff !important;
    background-color: #e19e88 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    
    font-family: Manrope;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;

}

.custom-reset-filters-btn:hover {
    border: 2px solid #c2acb6 !important;
    background-color: #c2acb6 !important;
    color: #ffffff !important;
}


/* ===================================================
   КАСТОМНІ ПОЛЯ ВВОДУ ЦІНИ (Дизайн)
   =================================================== */

/* Ховаємо стандартний текст "Ціна: ..." */
.widget_price_filter .price_label {
    display: none !important;
}

/* Контейнер для полів */
.custom-price-inputs-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.custom-price-input-group {
    display: flex;
    flex-direction: column;
    width: 48%;
}

.custom-price-input-group label {
    font-size: 13px;
    color: #929292;
    margin-bottom: -10px;
    margin-left: 10px;
    z-index: 9;
    position: relative; /* Щоб z-index точно спрацював */
    
    /* Додаємо перекриття лінії */
    background-color: #FFFFFF; /* Колір фону віджета */
    padding: 0 5px;            /* Відступи з боків, щоб лінія не торкалась літер */
    width: max-content;        /* Обмежуємо ширину білого фону лише розміром тексту */
}

.custom-price-input-box {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #EBF1FF; /* Світлий бордер як на макеті */
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    transition: border-color 0.3s ease;
}

.custom-price-input-box:focus-within {
    border-color: #BDCCFF; /* Підсвічування при кліку */
}

.custom-price-input-box input {
    border: none !important;
    background: transparent !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px;
    color: #5A749B; /* Колір цифр */
    font-weight: 500;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield; /* Прибираємо стандартні стрілочки браузера */
}

/* Прибираємо стрілочки (spinners) в Chrome/Safari/Edge */
.custom-price-input-box input::-webkit-outer-spin-button,
.custom-price-input-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-price-input-box .currency {
    color: #5A749B;
    font-size: 16px;
    margin-left: 5px;
    font-weight: 500;
}



.wd-filter-search:before {
    color: #C2ACB6 !important;
}

body .widget {
    margin-bottom: 20px !important;
}
.elementor-widget-wd_sidebar .wd-scroll-content {
    background-color: #F9F9F9 !important;
    border-radius: 20px !important;
    margin-top: 10px !important;
}
ul.product-categories.wd-scroll-content {
    padding: 8px !important;
}
.wd-filter-wrapper {
    padding: 8px !important;
    background-color: #F9F9F9 !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    margin-top: 10px !important;
}
.price_slider_wrapper {
    padding: 8px !important;
    background-color: #F9F9F9 !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    margin-top: 10px !important;
}

body .widgettitle, .widget-title {
    margin-bottom: 0px !important;
}

a.wd-filter-lable {
    background-color: #FFF !important;
    border-radius: 30px !important;
    margin-left: 50px !important;
}
a.layered-nav-link {
    background-color: #FFF !important;
    border-radius: 30px !important;
    margin-left: 50px !important;
}


/* Планшет */
@media (max-width: 1024px) {
    
}

/* Мобільний */
@media (max-width: 767px) {
    /* Ваш селектор */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d9a32cd *//* Планшет */
@media (max-width: 1024px) {
    /* Ваш селектор */
}

/* Мобільний */
@media (max-width: 767px) {
    .elementor-852 .elementor-element.elementor-element-d9a32cd {
        --border-radius: 0px 15px 15px 0px;
        z-index: 99999 !important;
    }
    .custom-mobile-sidebar .mobile-sidebar-header {
    position: -webkit-sticky; /* Для підтримки Safari */
    position: sticky;
    top: 0;
    z-index: 999; /* Гарантує, що заголовок буде поверх фільтрів, які скроляться під ним */
    
    /* Важливо: обов'язково задай колір фону панелі (наприклад, білий). 
       Якщо фон буде прозорим, текст фільтрів при скролі буде накладатись на заголовок */
    background-color: #ffffff !important;
    
    /* За бажанням: можна додати тінь або лінію знизу, щоб візуально відділити зафіксований заголовок */
    border-bottom: 1px solid #f2f2f2; 
    padding-top: 20px !important;
}

.elementor-element.elementor-element-d9a32cd.e-con-full.custom-mobile-sidebar.e-flex.e-con.e-child.is-open {
    padding-top: 0px !important;
}
}/* End custom CSS */
/* Start custom CSS for wd_archive_products, class: .elementor-element-0d32c91 *//*.product-type-variable.wd-product.wd-hover-standard .price span:nth-child(2) {*/
/*    display: none !important;*/
/*}*/


/* 1. Робимо блок ціни гнучким, з дозволом на перенесення рядків (flex-wrap) */
body .product-type-variable.wd-product.wd-hover-standard .price {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px; /* Невеликий відступ для звичайних цін */
    align-content: flex-start;
}

/* 2. Показуємо тире, яке приховує тема у товарах без знижки */
body .product-type-variable.wd-product.wd-hover-standard .price > span:nth-child(2) {
    display: inline-block !important;
}

/* 3. Звичайні ціни (і тире) тримаємо в одному рядку */
body .product-type-variable.wd-product.wd-hover-standard .price > span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* 4. Акційні ціни: змушуємо стару та нову ціну займати 100% ширини і ставати одна під одною */
body .product-type-variable.wd-product.wd-hover-standard .price del,
body .product-type-variable.wd-product.wd-hover-standard .price ins {
    flex: 1 1 100% !important; /* Розтягуємо на весь рядок */
    display: block !important;
    margin: 0 !important;
    text-align: start !important;
}

/* 5. Додаємо невеликий відступ між старою і новою ціною для естетики */
body .product-type-variable.wd-product.wd-hover-standard .price del {
    margin-bottom: 2px !important;
}






body .elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-wrapper {
    padding: 2px !important;
}
.custom-grid-product-class .wd-product:not(.wd-hover-small) :is(.wd-product-img-link,.wd-product-img-hover) :is(picture,img) {
    border-radius: 20px 20px 0px 0px !important;
}


html .wd-product .wd-product-cats a {
    font-size: clamp(10px, 9.1429px + 0.2679vw, 13px) !important;
}



/* Планшет */
@media (max-width: 1024px) {
    /* Ваш селектор */
}

/* Мобільний */
@media (max-width: 767px) {
    .product-labels {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 10px;
    transition: all .3s ease;
}
.wd-product.wd-hover-standard .wd-product-cats {
        padding-left: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
    }
}





body .product-labels .onsale, .product-labels .featured, .product-labels .new {
    margin-bottom: 0px !important;
}
.wd-loop-builder-off .wd-product-wrapper {
    padding: 0px !important;
}
:where(.wd-loop-builder-off) .wd-hover-with-fade .product-element-bottom {
    padding: 20px !important;
}
.wd-product:not(.wd-hover-small) :is(.wd-product-img-link,.wd-product-img-hover) :is(picture,img) {
    border-radius: 20px !important;
}
/*.wd-product:not(.wd-hover-small) :is(.wd-product-img-link,.wd-product-img-hover) :is(picture,img) {*/
/*    width: 101%;*/
/*}*/
/*img.attachment-full.size-full {*/
/*    max-width: 101% !important;*/
/*}*/

/* ========================================================
   ФІКС КАРТОЧКИ ТОВАРУ (СІТКА МАГАЗИНУ)
   ======================================================== */

/* 1. Тотально прибираємо сіру рамку WoodMart з усіх шарів картки */
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product,
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-wrapper,
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-card-bg {
    border: none !important;
}

/* 2. Налаштовуємо ідеальний фон, м'яку тінь та загальне заокруглення */
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-card-bg {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* М'яка тінь, як на головній */
    border-radius: 15px !important;
}

/* 3. Забираємо стандартні внутрішні відступи обгортки (дозволить фото розтягнутись) */
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-wrapper {
    padding: 0px !important;
}

/* 4. Фікс зображення: розтягуємо і заокруглюємо тільки верхні кути */
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-product-thumb {
    width: 101% !important; /* Використовуємо твій хак для перекриття бокових зазорів */
    margin-left: -2px !important;
    margin-top: -1px !important; /* Перекриває мікро-зазор зверху, якщо він залишається */
    border-radius: 15px 15px 0 0 !important;
}

/* 5. Повертаємо відступи виключно для текстового блоку з ціною */
.elementor-852 .elementor-element.elementor-element-0d32c91 .product-element-bottom {
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: 0px 10px 10px 0px #6A8DFF40, 0px -10px 10px 0px #6A8DFF40 !important;
    border-radius: 15px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wd-loop-builder-off :where(.wd-product-wrapper,.product-element-bottom) {
    gap: 0px !important;
}
/* 6. Заокруглення нижніх кутів білого фону, який "виїжджає" при наведенні (Hover) */
.elementor-852 .elementor-element.elementor-element-0d32c91 .wd-hover-with-fade .product-element-bottom {
    border-radius: 0 0 15px 15px !important;
    border-radius: 10px !important;
}

/* 7. Фікс відступів для SVG міток, щоб вони не з'їжджали */
.elementor-852 .elementor-element.elementor-element-0d32c91 .product-labels .onsale, 
.elementor-852 .elementor-element.elementor-element-0d32c91 .product-labels .featured, 
.elementor-852 .elementor-element.elementor-element-0d32c91 .product-labels .new {
    margin-bottom: 0px !important;
}
.elementor-1926 .elementor-element.elementor-element-3df3836 .wd-product-thumb {
    width: 101% !important;
    border-radius: 15px !important;
    width: 101% !important;
    margin-left: -2px !important;
}
.product-element-bottom {
    gap: 16px !important;
}

@media (hover: hover) {
    .wd-hover-with-fade.hover-ready:hover .wd-product-card-bg {
        visibility: visible;
        opacity: 0 !important;
        transition: opacity .3s ease, visibility 0s ease, transform .3s ease;
        transform: scale(1);
    }
}



.wd-products-with-shadow, .wd-products-with-shadow .wd-product, .wd-products-with-shadow .wd-cat {
    --wd-prod-shadow: 0 0 0px rgba(0, 0, 0, 0.12) !important;
}
/* --- 5. НАШІ 40px SVG ЧЕКБОКСИ (Категорії + Атрибути) --- */

/* Спільний стиль для посилань */
.elementor-widget-wd_sidebar .cat-item > a,
.elementor-widget-wd_sidebar .wc-layered-nav-term > a {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    /*padding-left: 52px !important; */
    min-height: 40px !important; 
    text-decoration: none !important;
    /*color: #4A4A4A !important;*/
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    transition: color 0.3s ease !important;
}

/* Порожній чекбокс (uncheck) - для всіх */
.elementor-widget-wd_sidebar .cat-item > a::before,
.elementor-widget-wd_sidebar .wc-layered-nav-term > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-image: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/quick-filters-general.svg') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
}

/* ВИБРАНИЙ СТАН (check)
   Ловимо клас 'wd-active' (для категорій WoodMart) 
   ТА класи 'chosen'/'wd-active' (для атрибутів)
*/
body .elementor-widget-wd_sidebar .cat-item.wd-active > a::before,
body .elementor-widget-wd_sidebar .wc-layered-nav-term.chosen > a::before,
body .elementor-widget-wd_sidebar .wc-layered-nav-term.wd-active > a::before {
    background-image: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/quick-filters-active.svg') !important;
}

/* Додатковий фікс для тексту активної категорії */
.elementor-widget-wd_sidebar .cat-item.wd-active > a {
    color: #c2acb6 !important; 
}






/* ===================================================
   КАСТОМНА ПАГІНАЦІЯ (WOODMART) - ОНОВЛЕНА ВЕРСІЯ
   =================================================== */

/* 1. Контейнер пагінації */
.woocommerce-pagination.wd-pagination ul.page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    position: relative !important; /* ВАЖЛИВО: Робимо контейнер базою для абсолютних стрілок */
    min-height: 48px !important;
    padding: 0 60px !important; /* Захищаємо цифри від накладання стрілок на мобільних */
}


/* 2. Фіксуємо стрілки по краях (Абсолютне позиціонування) */
.woocommerce-pagination.wd-pagination ul.page-numbers li:has(.prev),
.woocommerce-pagination.wd-pagination ul.page-numbers li:has(.next) {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Стрілка "Назад" завжди жорстко зліва */
.woocommerce-pagination.wd-pagination ul.page-numbers li:has(.prev) {
    left: 0 !important;
}

/* Стрілка "Вперед" завжди жорстко справа */
.woocommerce-pagination.wd-pagination ul.page-numbers li:has(.next) {
    right: 0 !important;
}

/* 3. Загальний стиль для всіх елементів (Звичайний стан) */
.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #BFBFBF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-shadow: 0px 10px 10px 0px #c2acb654 !important;
    transition: all 0.3s ease !important;
    
    /* Трюк для градієнтного бордера із закругленими кутами */
    background: #F9F9F9 !important;
    border: 2px solid transparent !important;
}

/* 4. Стиль для цифр і крапок (Форма "Пігулки") */
.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers:not(.prev):not(.next) {
    min-width: 60px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 22px !important;
}

/* 5. Стиль для кнопок стрілок */
.woocommerce-pagination.wd-pagination ul.page-numbers li .prev,
.woocommerce-pagination.wd-pagination ul.page-numbers li .next {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    
    /* НАДІЙНО ховаємо стандартний текст та іконки */
    color: transparent !important; 
    font-size: 0 !important;
    overflow: hidden !important;
}

/* Примусово вимикаємо стандартні іконки Woodmart (щоб не було подвоєння) */
.woocommerce-pagination.wd-pagination ul.page-numbers li .prev::before,
.woocommerce-pagination.wd-pagination ul.page-numbers li .next::before {
    display: none !important;
}

/* Додаємо твої SVG іконки */
.woocommerce-pagination.wd-pagination ul.page-numbers li .prev::after {
    content: '';
    width: 14px;
    height: 14px;
    background: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/left.svg') no-repeat center/contain;
    display: block;
}

.woocommerce-pagination.wd-pagination ul.page-numbers li .next::after {
    content: '';
    width: 14px;
    height: 14px;
    background: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/right.svg') no-repeat center/contain;
    display: block;
}

/* 6. Активний стан сторінки та стан при Наведенні */
.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers:hover,
.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers.current {
    background: #F9F9F9 !important;
    box-shadow: 0px 10px 10px 0px #c2acb654 !important; 
    color: #E19E88 !important;
}

.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers:hover {
    background: #c2acb6 !important;
    box-shadow: 0px 10px 10px 0px #c2acb654 !important;
    color: #FFFFFF !important;
}
/* ===================================================
   ЗМІНА КОЛЬОРУ СТРІЛОК ПРИ НАВЕДЕННІ
   =================================================== */

/* Біла стрілка "Назад" при наведенні */
.woocommerce-pagination.wd-pagination ul.page-numbers li .prev:hover::after {
    background: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/left-white.svg') no-repeat center/contain !important;
}

/* Біла стрілка "Вперед" при наведенні */
.woocommerce-pagination.wd-pagination ul.page-numbers li .next:hover::after {
    background: url('https://www.emmiliss-beauty.com/wp-content/uploads/2026/06/right-white.svg') no-repeat center/contain !important;
}


/* ===================================================
   АДАПТИВ ДЛЯ МОБІЛЬНИХ (Пагінація в 1 рядок)
   =================================================== */
@media (max-width: 767px) {
    /* Зменшуємо відступи контейнера та забороняємо перенесення */
    .woocommerce-pagination.wd-pagination ul.page-numbers {
        padding: 0 45px !important; /* Менше місця під стрілки */
        gap: 6px !important; /* Менша відстань між цифрами */
        flex-wrap: nowrap !important; /* Забороняємо другий рядок */
    }

    /* Зменшуємо "пігулки" з цифрами */
    .woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers:not(.prev):not(.next) {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important; 
        font-size: 14px !important;
    }

    /* Зменшуємо стрілки пропорційно цифрам */
    .woocommerce-pagination.wd-pagination ul.page-numbers li .prev,
    .woocommerce-pagination.wd-pagination ul.page-numbers li .next {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ===================================================
   БОНУС: Фікс для крапок (...)
   =================================================== */
/* Коли сторінок стане ще більше, з'являться крапки. 
   Цей код не дасть їм перетворитися на "пігулку" з тінью */
.woocommerce-pagination.wd-pagination ul.page-numbers li .page-numbers.dots {
    background: transparent !important;
    box-shadow: none !important;
    min-width: auto !important;
    color: #BFBFBF !important;
}/* End custom CSS */
/* Start custom CSS */.wd-product.wd-hover-fw-button .wd-add-btn>a:hover {
    background-image: linear-gradient(20deg, #EFBEFF 0.17%, #97B0FF 52.74%, #EEBEFE 100.48%) !important;
    background-color: transparent !important;
    background-size: 100% auto !important;
    transition: all 0.4s ease-in-out !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0px 10px 10px 0px #6A8DFF40 !important;
}
.custom-grid-product-class .wd-entities-title a {
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}


@media (max-width: 1024px) {
    .custom-grid-product-class [class*=wd-grid] {
        --wd-col-sm: 3 !important;
        gap: 10px !important;
    }
}

@media (max-width: 767px) {
    .custom-grid-product-class [class*=wd-grid] {
        --wd-col-sm: 2 !important;
        gap: 5px !important;
    }
    .wrap-price .price {
        justify-content: flex-end !important;
    }
    .wrap-price del .amount {
        text-decoration: line-through !important;
        margin-left: 0px !important;
    }
    .elementor-2965 .elementor-element.elementor-element-4b0f200 .product-element-bottom {
    padding: 20px 0px 20px 0px !important;
    background: #ffffff00 !important;
    box-shadow: 0px 0px 0px 0px #6A8DFF40, 0px 0px 0px 0px #6A8DFF40 !important;
    border-radius: 15px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
    .wd-product.wd-hover-fw-button .wd-add-btn-replace .add-to-cart-loop {
        box-shadow: 0px 10px 15px 5px #FF97EE40;
    }
    
    
    
    
    .wd-product-img-link::after {
    content: '';
    box-shadow: 0px 15px 12px 4px #6A8DFF40 !important;
    height: 0px !important;
    padding: 0px !important;
    width: 90% !important;
    display: flex;
    transform: rotate(180deg);
    margin-top: 17px;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 5%;
}
}


.wd-product.wd-hover-standard .wd-entities-title {
    order: 3;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    padding-left: 24px;
    min-height: 3.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}/* End custom CSS */