@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//oxaflow.com.ua/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.2.5") format("woff2");
}

.wd-popup.wd-promo-popup{
	background-color:rgb(242,242,242);
	background-image: url(https://oxaflow.com.ua/wp-content/uploads/2021/10/landing-popup.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

.page-title-default{
	background-color:rgb(232,78,72);
	background-image: url(https://oxaflow.com.ua/wp-content/uploads/2021/10/landing-gadget-page-title.jpg);
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-color:rgb(240,242,244);
	background-image: none;
}

:root{
--wd-text-font:"hkgroteskpro", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:#777777;
--wd-text-font-size:14px;
}
:root{
--wd-title-font:"hkgroteskpro", Arial, Helvetica, sans-serif;
--wd-title-font-weight:600;
--wd-title-color:#242424;
}
:root{
--wd-entities-title-font:"hkgroteskpro", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:400;
--wd-entities-title-color:#333333;
--wd-entities-title-color-hover:rgb(51 51 51 / 65%);
}
:root{
--wd-alternative-font:"Lato", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"hkgroteskpro", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:400;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:#333;
--wd-widget-title-font-size:16px;
}
:root{
--wd-header-el-font:"hkgroteskpro", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:600;
--wd-header-el-transform:uppercase;
--wd-header-el-font-size:13px;
}
:root{
--wd-primary-color:rgb(232,78,72);
}
:root{
--wd-alternative-color:#fbbc34;
}
:root{
--wd-link-color:#333333;
--wd-link-color-hover:#242424;
}
:root{
--btn-default-bgcolor:#f7f7f7;
}
:root{
--btn-default-bgcolor-hover:#efefef;
}
:root{
--btn-accented-bgcolor:rgb(232,78,72);
}
:root{
--btn-accented-bgcolor-hover:rgb(212,71,66);
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}
	:root{
					
							--wd-form-brd-radius: 5px;
			
					
					--wd-form-brd-width: 1px;
		
					--btn-default-color: #333;
		
					--btn-default-color-hover: #333;
		
					--btn-accented-color: #fff;
		
					--btn-accented-color-hover: #fff;
		
					
			
			
							--btn-default-brd-radius: 5px;
				--btn-default-box-shadow: none;
				--btn-default-box-shadow-hover: none;
					
					
			
			
							--btn-accented-brd-radius: 5px;
				--btn-accented-box-shadow: none;
				--btn-accented-box-shadow-hover: none;
					
									--wd-sticky-btn-height: 95px;
					
					--wd-brd-radius: 0px;
			}

			@media (max-width: 1024px) {
			:root {
				--wd-sticky-btn-height: 95px;
			}
		}
	
			@media (max-width: 768px) {
			:root {
				--wd-sticky-btn-height: 42px;
			}
		}
	
			@media (min-width: 1025px) {
			.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header {
				max-width: 1192px;
			}
		}

		.container {
			max-width: 1222px;
		}

		:root{
			--wd-container-w: 1222px;
		}
	
			@media (min-width: 1239px) {
			.platform-Windows .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
		@media (min-width: 1222px) {
			html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
	
			div.wd-popup.popup-quick-view {
			max-width: 920px;
		}
	
	
	
	
			.woodmart-woocommerce-layered-nav .wd-scroll-content {
			max-height: 223px;
		}
	
	
@font-face {
	font-family: "hkgroteskpro";
	src: url("//oxaflow.com.ua/wp-content/uploads/2021/09/hkgroteskpro-regular.woff2") format("woff2"), 
url("//oxaflow.com.ua/wp-content/uploads/2021/09/hkgroteskpro-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "hkgroteskpro";
	src: url("//oxaflow.com.ua/wp-content/uploads/2021/09/hkgroteskpro-semibold.woff2") format("woff2"), 
url("//oxaflow.com.ua/wp-content/uploads/2021/09/hkgroteskpro-semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}

/* Сама кнопка (Эллипс) */
body .wd-sticky-btn .wd-sticky-add-to-cart {
    width: 100% !important;
    height: 55px !important;
    background-color: #eb269f !important; 
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Прячем старый текст полностью */
    color: transparent !important;
    border: none !important;
    position: relative !important;
}

/* Новый текст (ровно по центру) */
body .wd-sticky-btn .wd-sticky-add-to-cart::before {
    content: "ДОДАТИ В КОШИК" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
}

/* Убираем ::after если он был в прошлом коде, чтобы не двоилось */
body .wd-sticky-btn .wd-sticky-add-to-cart::after {
    display: none !important;
}

/* Скрываем само увеличенное изображение */
.zoomImg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Отключаем события наведения на контейнере галереи */
.wvg-single-gallery-image-container, 
.woocommerce-product-gallery__image {
    pointer-events: none !important;
}
.dashicons,.dashicons-before:before {
	display:none;
}
/* Полное скрытие контейнера миниатюр плагина Woo Variation Gallery */
.woo-variation-gallery-thumbnail-wrapper,
.woo-variation-gallery-thumbnail-slider,
.wvg-thumbnail-prev-arrow,
.wvg-thumbnail-next-arrow {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Убираем возможные пустые отступы у основного слайдера после скрытия превью */
.woo-variation-gallery-wrapper {
    display: block !important;
}
/* Убираем иконку и запрещаем любые нажатия в этой зоне */
.woo-variation-gallery-trigger, 
.wvg-zoom-magnifier,
.woocommerce-product-gallery__trigger {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important; /* Клик будет проходить сквозь элемент */
    z-index: -1 !important;
}
/* Блокируем вызов зума по всей картинке */
.wvg-single-gallery-image-container {
    cursor: default !important;
    pointer-events: none !important;
}
/* Разрешаем только свайп для слайдера */
.woo-variation-gallery-slider {
    pointer-events: auto !important;
}
/* Скрываем секцию хлебных крошек и навигации по ID */
.elementor-element-1c51a7f9 {
    display: none !important;
}
/* 1. Контейнер: общая серая подложка-капсула */
.variations_form div[data-id="pa_size"].wd-swatches-product {
    display: inline-flex !important;
    background-color: #f1f1f1 !important; /* Серый фон всей группы */
    border: none !important;
    border-radius: 50px !important;
    padding: 3px !important;
    gap: 0 !important;
}

/* 2. Базовый стиль кнопок (неактивных) */
div[data-id="pa_size"] .wd-swatch {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 10px 25px !important;
    min-width: 80px;
    height: auto !important;
    border-radius: 50px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* 3. ЭФФЕКТ ЗАЛИВКИ: Активная плашка (проверяем оба возможных класса) */
div[data-id="pa_size"] .wd-swatch.active-swatch,
div[data-id="pa_size"] .wd-swatch.wd-active {
    background-color: #33383c !important; /* Темный цвет заливки */
    color: #ffffff !important;
}

/* 4. Принудительный цвет текста для активной плашки */
div[data-id="pa_size"] .wd-swatch.active-swatch .wd-swatch-text,
div[data-id="pa_size"] .wd-swatch.wd-active .wd-swatch-text {
    color: #ffffff !important;
}

/* 5. Цвет текста для НЕактивных плашек */
div[data-id="pa_size"] .wd-swatch:not(.active-swatch):not(.wd-active) .wd-swatch-text {
    color: #333 !important;
}

/* 6. Убираем полоски WoodMart, которые перекрывают фон */
div[data-id="pa_size"] .wd-swatch:after {
    display: none !important;
    content: none !important;
}
/* Убираем стандартные подчеркивания WoodMart, которые могут мешать */
div[data-id="pa_size"] .wd-swatch:after {
    display: none !important;
}





/* --- ЦВЕТ (pa_color) --- */

/* 1. Убираем подчеркивание и полоски везде в вариациях */
.variations_form .wd-swatch:after,
.variations_form .wd-swatch:before,
.variations_form .wd-swatch-bg:after {
    display: none !important;
    content: none !important;
}

/* 2. Контейнер цвета: создаем отступ от надписи "Колір" и зазор между кружками */
div[data-id="pa_color"].wd-swatches-product {
    margin-left: 15px !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; /* Расстояние между кружками */
}

/* 3. Сами кружки: делаем их идеально круглыми и чистыми */
div[data-id="pa_color"] .wd-swatch {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
}

/* Внутренний слой с цветом */
div[data-id="pa_color"] .wd-swatch-bg {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: block !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 4. АКТИВНЫЙ ЦВЕТ: черная обводка вокруг круга */
div[data-id="pa_color"] .wd-swatch.active-swatch .wd-swatch-bg {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important;
    border: 1px solid transparent !important;
}

/* --- ОБЪЕМ (pa_size) --- */

/* Контейнер объема */
div[data-id="pa_size"].wd-swatches-product {
    border: 1px solid #e1e1e1 !important;
    border-radius: 50px !important;
    padding: 2px !important;
    display: inline-flex !important;
    background: transparent !important;
}

/* Плашки объема */
div[data-id="pa_size"] .wd-swatch {
    border-radius: 50px !important;
    padding: 8px 18px !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
}

/* Активный объем */
div[data-id="pa_size"] .wd-swatch.active-swatch {
    background-color: #33383c !important;
}

div[data-id="pa_size"] .wd-swatch.active-swatch .wd-swatch-text {
    color: #fff !important;
}

/* --- ПЕРЕЧЕРКИВАНИЕ (Нет в наличии) --- */
.wd-swatch.wd-disabled {
    opacity: 0.4 !important;
}

.wd-swatch.wd-disabled:before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1.5px !important;
    background: #000 !important;
    transform: rotate(-45deg) !important;
    z-index: 10 !important;
    display: block !important;
}
/* 4. АКТИВНЫЙ ЦВЕТ: Эффект закраски по кругу */
/* Мы используем двойную тень: первая (белая) создает зазор, вторая (черная) создает внешнее кольцо */
div[data-id="pa_color"] .wd-swatch.active-swatch .wd-swatch-bg,
div[data-id="pa_color"] .wd-swatch.wd-active .wd-swatch-bg {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
    transform: scale(0.9); /* Слегка уменьшаем сам цвет, чтобы кольцо выглядело аккуратнее */
    border-color: transparent !important;
}

/* 5. Убираем стандартные подчеркивания WoodMart */
div[data-id="pa_color"] .wd-swatch:after {
    display: none !important;
    content: none !important;
}
/* Полностью скрываем стандартную липкую кнопку WoodMart */
.wd-sticky-add-to-cart, 
.wd-sticky-add-to-cart-wrapper,
body .wd-sticky-add-to-cart-shown .wd-sticky-add-to-cart {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(200%) !important; /* Уводим её далеко за пределы экрана */
}






/* На всякий случай убираем отступ у body, который тема добавляет под свою кнопку */
body.wd-sticky-add-to-cart-shown {
    padding-bottom: 0 !important;
}

.oxa-bundle-builder {
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    padding: 20px;
    background: #fff;
    max-width: 100%;
}
.bundle-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 20px; }

.bundle-visual-row {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px;
}
.visual-item img { width: 50px; height: 50px; object-fit: contain; border-radius: 5px; }
.visual-plus { font-size: 18px; color: #999; }

.bundle-main-price { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 20px; }

.bundle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bundle-item-select {
    flex: 1; border: none !important; font-size: 14px; font-weight: 500; background: transparent !important;
}

.oxa-add-more-btn {
    background: none; border: none; font-size: 12px; text-decoration: underline; color: #666; cursor: pointer;
}

.oxa-bundle-submit {
    width: 100%; background: #333 !important; color: #fff !important; height: 50px;
    border-radius: 50px; font-weight: 700; border: none; margin-top: 15px;
}

/* Стили чекбокса */
.oxa-check { position: relative; width: 18px; height: 18px; cursor: pointer; }
.bundle-item-check { cursor: pointer; }
/* Контейнер */
.oxa-bundle-container {
    border: 1px solid #EAEAEA !important;
    border-radius: 20px !important;
    padding: 30px !important;
    background: #fff !important;
    margin: 40px 0 !important;
    max-width: 100% !important;
}

.bundle-header {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}

/* Картинки */
.bundle-visual-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
}

.vis-slot {
    width: 70px !important;
    height: 70px !important;
    background: #F9F9F9 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vis-slot img {
    max-width: 80% !important;
    height: auto !important;
}

.vis-divider {
    font-size: 20px !important;
    color: #CCC !important;
}

/* Строки выбора */
.bundle-selection-row {
    display: flex !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

.bundle-check-col { margin-right: 15px !important; }

/* Красивый Чекбокс */
.bundle-inv-check { display: none; }
.bundle-inv-check + label {
    width: 22px; height: 22px;
    border: 2px solid #333;
    border-radius: 4px;
    display: block; cursor: pointer;
    position: relative;
}
.bundle-inv-check:checked + label { background: #333; }
.bundle-inv-check:checked + label:after {
    content: '✓'; color: #fff; position: absolute; left: 4px; top: -1px; font-size: 14px;
}

.bundle-select-col { flex-grow: 1 !important; }

.bundle-real-select {
    width: 100% !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    padding: 5px !important;
}

/* Кнопки */
.oxa-add-more-btn {
    background: none !important;
    border: none !important;
    color: #888 !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    margin: 15px auto !important;
    display: block !important;
    cursor: pointer !important;
}
.oxa-main-bundle-btn {
    width: 100% !important;
    background: #333 !important;
    color: #fff !important;
    border-radius: 50px !important;
    height: 55px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
    transition: background 0.3s !important;
}
.oxa-main-bundle-btn:hover { background: #000 !important; }



.oxa-final-bundle {
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    background: #fff !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
}
.oxa-bundle-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}
.oxa-visual-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}
.oxa-slot {
    width: 65px !important;
    height: 65px !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.oxa-slot img { max-width: 80% !important; height: auto !important; }
.oxa-plus-sign { font-size: 20px !important; color: #ccc !important; }

.oxa-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.oxa-item-select {
    flex: 1 !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.oxa-add-more {
    background: none !important;
    border: none !important;
    font-size: 11px !important;
    text-decoration: underline !important;
    color: #999 !important;
    cursor: pointer !important;
}
.oxa-submit-btn {
    width: 100% !important;
    background: #333 !important;
    color: #fff !important;
    height: 55px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    border: none !important;
}

.oxa-final-bundle {
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    background: #fff !important;
    margin: 20px 0 !important;
}
.oxa-bundle-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}
.oxa-visual-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}
.oxa-slot {
    width: 65px !important;
    height: 65px !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.oxa-slot img { max-width: 85% !important; height: auto !important; object-fit: contain !important; }
.oxa-plus-sign { font-size: 20px !important; color: #ccc !important; }

.oxa-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.oxa-select-container { flex: 1 !important; min-width: 0 !important; }
.oxa-item-select {
    width: 100% !important;
    border: 1px solid #ddd !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px !important;
    border-radius: 6px !important;
}
.oxa-add-more {
    background: none !important;
    border: none !important;
    font-size: 11px !important;
    text-decoration: underline !important;
    color: #999 !important;
    cursor: pointer !important;
}
.oxa-submit-btn {
    width: 100% !important;
    background: #333 !important;
    color: #fff !important;
    height: 55px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    border: none !important;
    cursor: pointer !important;
}
.oxa-final-bundle {
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    background: #fff !important;
}

.oxa-row-container { margin-bottom: 10px !important; }

.oxa-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 0 !important;
}

.oxa-select-wrapper { flex: 1 !important; }

.oxa-item-select {
    width: 100% !important;
    height: 45px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Кнопка "Додати ще" под вторым полем */
.oxa-add-more-wrapper {
    padding-left: 35px !important;
    margin-top: -5px !important;
    margin-bottom: 10px !important;
}

.oxa-add-more {
    background: none !important;
    border: none !important;
    color: #0071e3 !important; /* Цвет Apple */
    font-size: 13px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.oxa-submit-btn {
    width: 100% !important;
    background: #333 !important;
    color: #fff !important;
    height: 55px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 15px !important;
    border: none !important;
}


.oxa-visual-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; }
.oxa-slot { width: 60px; height: 60px; background: #f5f5f7; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oxa-slot img { max-width: 90%; height: auto; transition: opacity 0.3s; }
.oxa-plus-sign { color: #888; font-size: 18px; }
/* Кнопка "Додати ще" под вторым полем */
.oxa-add-more-wrapper {
    margin-top: -5px !important;
    padding-left: 35px !important;
    margin-bottom: 10px !important;
}

.oxa-add-more {
    color: #0071e3 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}
.oxa-item-select {
    width: 100% !important;
    height: 45px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    font-weight: 600 !important;
}

.oxa-visual-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; }
.oxa-slot { width: 70px; height: 70px; background: #f9f9f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oxa-slot img { max-width: 85%; height: auto; }
/* Скрываем перечеркнутые свотчи (вариации), которых нет в наличии для выбранной комбинации */
.wd-swatch.wd-disabled,
.wd-swatches-product .wd-swatch.wd-disabled {
    display: none !important;
}

@media (max-width: 768px) {
    /* Делаем контейнер вариации вертикальным */
    .variations tr {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    /* Название атрибута (Колір, Об'єм) теперь всегда сверху */
    .variations td.label {
        padding-bottom: 5px;
        text-align: left;
    }

    /* Сами свотчи (кружочки) или кнопки объема принудительно с новой строки */
    .variations td.value {
        padding-left: 0 !important;
        width: 100%;
    }

    /* Убираем лишние отступы, чтобы всё стояло ровно по левому краю */
    .wd-swatches-product, 
    .wd-swatches-filter {
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}

a.my-custom-sticky-btn{
display:none}

/* Робимо так, щоб кожен рядок варіацій (Колір, Об'єм) займав окремий рядок */
/* Форсуємо таблицю варіацій поводитися як блок */
table.variations {
    display: block !important;
    width: 100% !important;
}

table.variations tbody {
    display: block !important;
    width: 100% !important;
}

/* Кожен ряд (Колір, Об'єм) стає окремим блоком на всю ширину */
table.variations tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    border: none !important;
}

/* Назва (Колір:, Об'єм:) */
table.variations td.label {
    display: block !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    text-align: left !important;
}

/* Контейнер зі свотчами/кнопками */
table.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Контейнер свотчів WoodMart */
.wd-swatches-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

/* Прибираємо зайві відступи, які можуть заважати */
.variations td:before {
    display: none !important;
}
/* =========================================================
   OXA: СТИЛІ ДЛЯ ВИЇЗНОГО КОШИКА (WOODMART)
   ========================================================= */

/* 1. Кошик на всю ширину на мобільних пристроях (до 768px) */
@media (max-width: 768px) {
    .cart-widget-side {
        width: 100vw !important;
        max-width: 100% !important;
    }
}

/* 2. Красиве відображення кількості та ціни (розносимо по краях) */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.widget_shopping_cart .woocommerce-mini-cart-item .quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* Розносить "1 х" і "1599 ₴" по різних краях */
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #eaeaea; /* Легкий розділювач */
    font-size: 14px;
    color: #888; /* Робимо "1 х" менш помітним */
}

/* Акцент на саму ціну */
.widget_shopping_cart .woocommerce-mini-cart-item .quantity .amount {
    font-size: 16px;
    font-weight: bold;
    color: #000; /* Чорний або зміни на #f50087 якщо хочеш фірмовий колір */
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 8px;
}

/* 3. Оформлення нашої кастомної плашки "Бандл: -20% знижка" */
.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    margin-top: 8px !important;
    background: #fff8e1; /* Легкий жовтий фон для привернення уваги */
    border: 1px solid #ffe082;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}

.widget_shopping_cart .woocommerce-mini-cart-item .variation dt,
.widget_shopping_cart .woocommerce-mini-cart-item .variation .item-variation-name {
    font-weight: 700;
    color: #f57f17; /* Темно-жовтий/помаранчевий текст */
    text-transform: uppercase;
    font-size: 11px;
}

.widget_shopping_cart .woocommerce-mini-cart-item .variation dd,
.widget_shopping_cart .woocommerce-mini-cart-item .variation .item-variation-value p {
    margin: 0 !important;
    display: inline;
    color: #d32f2f; /* Червоний текст знижки */
    font-weight: 600;
    font-size: 12px;
}
/* 2. Красиве відображення кількості та ціни (ЄДИНА СУЧАСНА ПЛАШКА) */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.widget_shopping_cart .woocommerce-mini-cart-item .quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between; 
    margin-top: 12px;
    background: #f5f5f5; /* Спільний сірий фон для всього рядка */
    padding: 8px 12px;   /* Внутрішні відступи плашки */
    border-radius: 8px;  /* Заокруглення всієї плашки */
    font-size: 14px;
    color: #666;
    font-weight: 500;
    border-top: none;    /* Прибираємо стару лінію */
}

/* Сама ціна всередині спільної плашки */
.widget_shopping_cart .woocommerce-mini-cart-item .quantity .amount {
    font-size: 16px;
    font-weight: bold;
    color: #000; 
    background: transparent; /* Прибираємо старий окремий фон */
    padding: 0;              /* Прибираємо старі відступи, бо тепер є спільні */
}
.widget_shopping_cart .woocommerce-mini-cart-item .quantity {
	color:#555 !Important;
}
/* 2. Красиве відображення кількості та ціни (ЄДИНА СУЧАСНА ПЛАШКА) */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch; /* Змушує дочірні блоки тягнутися на всю ширину */
}

.widget_shopping_cart .woocommerce-mini-cart-item .quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important; 
    width: 100% !important; /* КРИТИЧНЕ ВИПРАВЛЕННЯ: розтягуємо плашку */
    box-sizing: border-box;
    margin-top: 12px;
    background: #f5f5f5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
    border-top: none;
}

/* Вбиваємо стандартні відступи Woodmart/WooCommerce, які ламають Flexbox */
.widget_shopping_cart .woocommerce-mini-cart-item .quantity::after,
.widget_shopping_cart .woocommerce-mini-cart-item .quantity::before {
    display: none !important;
}

/* Сама ціна всередині спільної плашки */
.widget_shopping_cart .woocommerce-mini-cart-item .quantity .amount {
    font-size: 16px !important;
    font-weight: bold;
    color: #000; 
    background: transparent !important;
    padding: 0 !important; 
}
body > div.cart-widget-side.wd-side-hidden.wd-right.wd-opened > div.widget.woocommerce.widget_shopping_cart > div > div.shopping-cart-widget-footer > p.woocommerce-mini-cart__buttons.buttons > a.button.btn-cart.wc-forward {
	display:none !Important }
/* 1. Прячем стандартные стрелки (левую и правую) */
.woo-variation-gallery-slider .wvg-slider-prev-arrow, 
.woo-variation-gallery-slider .wvg-slider-next-arrow {
    display: none !important;
}

/* 2. Настраиваем контейнер для точек */
.woo-variation-gallery-slider .slick-dots {
    bottom: 15px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
}

/* 3. Базовый стиль точки */
.woo-variation-gallery-slider .slick-dots li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.woo-variation-gallery-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: rgba(0, 0, 0, 0.1); /* Цвет неактивной точки */
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* 4. Стиль активной точки (розовая и растянутая) */
.woo-variation-gallery-slider .slick-dots li.slick-active button {
    background: #f50087; /* Ваш розовый цвет */
    width: 18px;
    border-radius: 10px;
}

/* Скрываем текст внутри кнопок (иногда Slick подставляет цифры) */
.woo-variation-gallery-slider .slick-dots li button:before {
    display: none;
}


.wd-sticky-btn-shown.scrollToTop {
    bottom: calc(55px + var(--wd-sticky-btn-height)) !IMPORTANT;
}


@media (max-width: 1024px) {
    .scrollToTop {
        right: 12px;
        bottom: 12px;
        width: 55px !Important;
        height: 55px !Important;
        font-size: 14px;
    }
}

/* Сірий фон для блоку відгуків */
.elementor-widget-wd_single_product_reviews .elementor-widget-container,
.wd-single-reviews {
    background-color: #f5f5f5 !important; /* Світло-сірий колір (можеш змінити на #f1f1f1 для темнішого) */
    padding: 30px !important;             /* Внутрішні відступи, щоб текст "дихав" */
    border-radius: 15px !important;       /* Закруглені кути для краси */
}

/* На мобільних пристроях робимо відступи трохи меншими */
@media (max-width: 768px) {
    .elementor-widget-wd_single_product_reviews .elementor-widget-container,
    .wd-single-reviews {
        padding: 20px !important;
    }
}

/* =========================================================
   OXA: ІДЕАЛЬНИЙ КОШИК (КНОПКИ ЗЛІВА, ЦІНА СПРАВА)
   ========================================================= */

/* 1. Робимо контейнер гнучким (Flexbox) */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: center !important;
    justify-content: space-between !important; 
}

/* 2. Назва товару і мітка бандлу займають весь верхній рядок */
.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title,
.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* 3. Оформлення сірої капсули тільки для кнопок Плюс/Мінус (div.quantity) */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    width: auto !important;
    border: none !important;
}

/* Самі кнопки + і - */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

/* Поле з цифрою кількості */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    text-align: center !important;
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

/* Ховаємо стрілочки браузера в полі вводу */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. Блок з ціною (span.quantity) - стає справа */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important; /* Без сірого фону */
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    font-size: 0 !important; /* ТРЮК: Ховаємо текст "3 ×" */
    border: none !important;
}

/* Відновлюємо розмір та робимо акцент тільки для самої суми */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000 !important;
}

/* Вбиваємо псевдоелементи теми, які можуть ламати верстку */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::after,
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::before {
    display: none !important;
}
/* =========================================================
   OXA: ІДЕАЛЬНИЙ КОШИК (КНОПКИ ЗЛІВА, ЦІНА СПРАВА В ОДИН РЯДОК)
   ========================================================= */

/* 1. Робимо контейнер гнучким */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: center !important;
}

/* 2. Назва товару і мітки займають весь верхній рядок */
.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title,
.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    width: 100% !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
}

/* 3. Сіра капсула для кнопок Плюс/Мінус (div.quantity) - стає ЗЛІВА */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    border: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    text-align: center !important;
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

/* Ховаємо стрілочки браузера */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. Блок з ціною (span.quantity) - ПРИТИСКАЄМО ВПРАВО */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important; /* Відштовхує ціну максимально вправо! */
    border: none !important;
    font-size: 0 !important; /* Ховаємо текст "3 ×" */
}

/* Відновлюємо розмір тільки для суми */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000 !important;
}

/* Прибираємо сміття від теми Woodmart */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::after,
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::before {
    display: none !important;
}
/* =========================================================
   OXA: ІДЕАЛЬНИЙ КОШИК (ЗМЕНШЕНІ КНОПКИ ТА ЦІНА В ОДИН РЯДОК)
   ========================================================= */

/* 1. Робимо контейнер гнучким */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: center !important;
    justify-content: space-between !important; /* Розштовхує елементи по краях */
}

/* 2. Назва товару і мітки займають 100% верхнього рядка */
.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title,
.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    width: 100% !important;
    flex: 0 0 100% !important; /* Жорстко займає весь рядок */
    margin-bottom: 8px !important;
}

/* 3. ЗМЕНШЕНА СІРА КАПСУЛА (div.quantity) - стоїть ЗЛІВА */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    display: inline-flex !important;
    flex: 0 0 auto !important; /* Займає лише необхідну ширину */
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 15px !important; /* Зменшено */
    font-weight: 500 !important;
    width: 24px !important; /* Зменшено */
    height: 24px !important; /* Зменшено */
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 13px !important; /* Зменшено */
    text-align: center !important;
    width: 26px !important; /* Зменшено */
    height: 24px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

/* Ховаємо стрілочки браузера */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. БЛОК З ЦІНОЮ (span.quantity) - стоїть СПРАВА */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    display: inline-flex !important;
    flex: 0 0 auto !important; /* Займає лише необхідну ширину */
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important; /* Ховаємо текст "3 ×" */
}

/* ЗМЕНШЕНА СУМА */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 14px !important; /* Зменшено (було 16px) */
    font-weight: bold !important;
    color: #000 !important;
}

/* Прибираємо сміття від теми Woodmart */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::after,
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::before {
    display: none !important;
}

/* =========================================================
   OXA: СУПЕР-КОШИК (GRID-ВЕРСТКА ТА БЛОКУВАННЯ БАНДЛІВ)
   ========================================================= */

/* 1. Залізобетонна сітка (CSS Grid) - елементи НІКОЛИ не розіб'ються */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: 
        "title title title"
        "variation variation variation"
        "qty space price" !important;
    align-items: center !important;
    row-gap: 10px !important;
    width: 100% !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title {
    grid-area: title !important;
    margin: 0 !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    grid-area: variation !important;
    margin: 0 !important;
}

/* 2. Капсула з кнопками (Жорстко стоїть зліва) */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* 3. Ціна (Жорстко стоїть справа) */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    grid-area: price !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important; /* Ховаємо текст "3 х " для звичайних пляшок */
}

.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
}

/* Прибираємо "сміття" теми Woodmart, яке ламало верстку */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::


/* =========================================================
   OXA: СУПЕР-КОШИК (GRID-ВЕРСТКА ТА БЛОКУВАННЯ БАНДЛІВ)
   ========================================================= */

/* 1. Залізобетонна сітка (CSS Grid) - елементи НІКОЛИ не розіб'ються */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: grid !important;
    grid-template-columns: min-content 1fr min-content !important;
    grid-template-areas: 
        "title title title"
        "variation variation variation"
        "qty space price" !important;
    align-items: center !important;
    row-gap: 10px !important;
    width: 100% !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title {
    grid-area: title !important;
    margin: 0 !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    grid-area: variation !important;
    margin: 0 !important;
}

/* 2. Капсула з кнопками (Жорстко стоїть зліва) */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: none !important;
    width: max-content !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* 3. Ціна (Жорстко стоїть справа) */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    grid-area: price !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important; /* Ховаємо текст "3 х " для звичайних пляшок */
    white-space: nowrap !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
}

/* Прибираємо "сміття" теми Woodmart, яке ламало верстку */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::after,
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::before {
    display: none !important;
}

/* ==========================================
   4. МАГІЯ ДЛЯ БАНДЛУ: БЛОКУЄМО КІЛЬКІСТЬ
   ========================================== */

/* Використовуємо наш новий унікальний клас (див. Крок 2) */
.widget_shopping_cart .oxa-bundle-cart-item div.quantity {
    display: none !important;
}

/* Для бандлу повертаємо текст "1 × " біля ціни */
.widget_shopping_cart .oxa-bundle-cart-item span.quantity {
    font-size: 13px !important; 
    color: #888 !important;
    gap: 5px;
}
/* =========================================================
   OXA: СУПЕР-КОШИК (GRID-ВЕРСТКА ТА БЛОКУВАННЯ БАНДЛІВ)
   ========================================================= */

/* 1. Залізобетонна сітка (CSS Grid) - елементи НІКОЛИ не розіб'ються */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info {
    display: grid !important;
    grid-template-columns: min-content 1fr min-content !important;
    grid-template-areas: 
        "title title title"
        "variation variation variation"
        "qty space price" !important;
    align-items: center !important;
    row-gap: 10px !important;
    width: 100% !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title {
    grid-area: title !important;
    margin: 0 !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .variation {
    grid-area: variation !important;
    margin: 0 !important;
}

/* 2. Капсула з кнопками (Жорстко стоїть зліва) */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: none !important;
    width: max-content !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* 3. Ціна (Жорстко стоїть справа + зсунута на 20px лівіше) */
.widget_shopping_cart .woocommerce-mini-cart-item span.quantity {
    grid-area: price !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
    /* ТУТ: Зсуваємо ціну на 20px від правого краю */
    margin: 0 20px 0 0 !important; 
    border: none !important;
    font-size: 0 !important; /* Ховаємо текст "3 х " для звичайних пляшок */
    white-space: nowrap !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
}

/* Прибираємо "сміття" теми Woodmart, яке ламало верстку */
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::after,
.widget_shopping_cart .woocommerce-mini-cart-item .cart-info::before {
    display: none !important;
}

/* ==========================================
   4. МАГІЯ ДЛЯ БАНДЛУ: БЛОКУЄМО КІЛЬКІСТЬ
   ========================================== */

/* Робимо капсулу бандлу неклікабельною і напівпрозорою (неактивною) */
.widget_shopping_cart .oxa-bundle-cart-item div.quantity {
    pointer-events: none !important; /* Повністю блокуємо кліки */
    opacity: 0.4 !important;         /* Візуально показуємо, що кнопка вимкнена */
}

/* Для бандлу знову ховаємо текстовий лічильник "1 х ", бо капсула тепер видима */
.widget_shopping_cart .oxa-bundle-cart-item span.quantity {
    font-size: 0 !important; 
}

.widget_shopping_cart .woocommerce-mini-cart-item span.quantity .amount {
	margin-right:11px !IMPORTANT;
}

.widget_shopping_cart .woocommerce-mini-cart-item span.quantity{
	margin:0px !IMPORTANT;
}

.woocommerce-mini-cart .remove{
top:0px !IMPORTANT;
}

/* ==========================================
   4. МАГІЯ ДЛЯ БАНДЛУ: БЛОКУЄМО КІЛЬКІСТЬ
   ========================================== */

/* Якщо всередині товару є блок <ul class="variation"> (наша знижка), робимо кнопки неактивними */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity {
    pointer-events: none !important; /* Повністю блокує будь-які кліки */
    opacity: 0.4 !important;         /* Робить капсулу візуально "вимкненою" (напівпрозорою) */
}

/* Для бандлу ховаємо текстовий лічильник "1 х " */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) span.quantity {
    font-size: 0 !important; 
}
/* ==========================================
   4. МАГІЯ ДЛЯ БАНДЛУ: ТОТАЛЬНЕ БЛОКУВАННЯ
   ========================================== */

/* Робимо капсулу напівпрозорою та встановлюємо відносне позиціонування для щита */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity {
    position: relative !important;
    opacity: 0.5 !important;
}

/* Створюємо невидимий "ЩИТ", який повністю перекриває кнопки */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important; /* Ставимо поверх кнопок */
    cursor: not-allowed !important; /* Курсор: перекреслене коло (заборонено) */
    display: block !important;
}

/* Додатково фізично вирубаємо будь-які події на самих кнопках та інпуті */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity input {
    pointer-events: none !important;
    user-select: none !important;
}

/* Ховаємо текстовий лічильник "1 х " */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) span.quantity {
    font-size: 0 !important; 
}

/* 2. Капсула з кнопками (Жорстко стоїть зліва) */
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity {
    grid-area: qty !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: none !important;
    width: max-content !important;
    /* ВИПРАВЛЕННЯ: Витягуємо капсулу НАД невидимим посиланням Woodmart */
    position: relative !important;
    z-index: 10 !important; 
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input[type="button"] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-outer-spin-button,
.widget_shopping_cart .woocommerce-mini-cart-item div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* ==========================================
   4. МАГІЯ ДЛЯ БАНДЛУ: ТОТАЛЬНЕ БЛОКУВАННЯ
   ========================================== */

/* Робимо капсулу напівпрозорою */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity {
    opacity: 0.4 !important;
}

/* Створюємо ЩИТ, який ПОГЛИНАЄ клік і не віддає його посиланню */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important; /* Ставимо поверх кнопок +- */
    cursor: not-allowed !important;
    pointer-events: auto !important; /* Жорстко перехоплює тап пальцем/мишкою */
}

/* Вимикаємо фізичні інпути під щитом */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) div.quantity input {
    pointer-events: none !important; 
}

/* Для бандлу ховаємо текстовий лічильник "1 х " */
.widget_shopping_cart .woocommerce-mini-cart-item:has(ul.variation) span.quantity {
    font-size: 0 !important; 
}
/* =========================================================
   OXA: SHOPIFY STYLE CHECKOUT (Стилізація полів)
   ========================================================= */

/* Заголовки блоків (Contact, Shipping address) */
.woocommerce-checkout h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: none !important;
    border-bottom: none !important;
    margin-bottom: 15px !important;
    margin-top: 20px !important;
}

/* Дизайн полів вводу (як у Shopify) */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border-radius: 5px !important;
    border: 1px solid #d9d9d9 !important;
    padding: 12px 14px !important;
    height: auto !important;
    background-color: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 14px !important;
}

/* Ефект фокусу на полі (Фіолетова/синя рамка зі скріна) */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #5a31f4 !important; /* Колір кнопки Shop зі скріна */
    box-shadow: 0 0 0 2px rgba(90, 49, 244, 0.2) !important;
    outline: none !important;
}

/* Приховуємо зірочки обов'язкових полів (як у Shopify) */
.woocommerce-checkout .required {
    display: none !important;
}

/* Стилізація головної кнопки замовлення */
.woocommerce-checkout #place_order {
    background-color: #5a31f4 !important; /* Фіолетовий колір */
    color: #fff !important;
    border-radius: 5px !important;
    padding: 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 100% !important;
    text-transform: none !important;
    transition: background-color 0.3s ease !important;
}

.woocommerce-checkout #place_order:hover {
    background-color: #4826c7 !important; /* Трохи темніший при наведенні */
}

/* Відступи між полями */
.woocommerce-checkout .form-row {
    margin-bottom: 15px !important;
}

/* Стилізація радіокнопок та чекбоксів */
.woocommerce-checkout input[type="checkbox"], 
.woocommerce-checkout input[type="radio"] {
    accent-color: #5a31f4 !important;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* =========================================================
   OXA: СТИЛЬ ДЛЯ НЕАКТИВНИХ КОЛЬОРІВ ТА ОБ'ЄМІВ
   ========================================================= */

/* Принудительно показываем неактивные цвета, делаем 20% видимости и блокируем клик */
.wd-swatches-product .wd-swatch.wd-disabled {
    display: inline-flex !important; /* Показываем, даже если тема их прячет */
    opacity: 0.2 !important;         /* 20% видимости */
    pointer-events: none !important; /* Полностью блокируем возможность выбора */
    cursor: default !important;
}

/* Убираем стандартное перекрещивание (крестик или линию), которое Woodmart рисует на неактивных цветах */
.wd-swatches-product .wd-swatch.wd-disabled::after,
.wd-swatches-product .wd-swatch.wd-disabled::before {
    display: none !important;
}

@media (max-width: 1024px) {
    /* Перевертаємо колонки: права (замовлення) стає зверху, ліва (форма) йде вниз */
    .elementor-16375 .elementor-element-2cb063e8 > .elementor-container {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    
    /* Додаємо акуратний відступ під блоком замовлення, щоб він не прилипав до форми */
    .elementor-16375 .elementor-element-2aa59c99 {
        margin-bottom: 30px !important;
    }
}
@media only screen and (max-width: 480px) {
    .woo-variation-product-gallery {
        width: 320px;
        max-width: 100% !important;
        margin-bottom: -50px !Important;
    }
}
/* =========================================================
   OXA: SHOPIFY STYLE (Замовлення зверху, кнопка внизу)
   ========================================================= */

@media (max-width: 1024px) {
    /* 1. Робимо головний контейнер гнучким (прямий порядок) */
    .elementor-16375 .elementor-element-2cb063e8 > .elementor-container {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 2. "Розчиняємо" праву колонку та її секції, щоб звільнити віджети */
    .elementor-16375 .elementor-element-2aa59c99,
    .elementor-16375 .elementor-element-2aa59c99 > .elementor-widget-wrap,
    .elementor-16375 .elementor-element-15dbd826,
    .elementor-16375 .elementor-element-15dbd826 > .elementor-container,
    .elementor-16375 .elementor-element-517c3ce7,
    .elementor-16375 .elementor-element-517c3ce7 > .elementor-widget-wrap {
        display: contents !important;
    }
    
    /* КРОК 1: Заголовок "Ваше замовлення" - НА САМИЙ ВЕРХ */
    .elementor-16375 .elementor-element-25f2fbb8 { 
        order: 1 !important; 
        margin-top: 20px !important; 
        width: 100% !important;
    } 
    
    /* КРОК 2: Таблиця із замовленням - ПІД ЗАГОЛОВКОМ */
    .elementor-16375 .elementor-element-7db7146 { 
        order: 2 !important; 
        width: 100% !important;
        background-color: #fafafa !important; /* Сірий фон для чеку */
        padding: 20px !important;
        border-radius: 8px !important;
    } 
    
    /* КРОК 3: Ліва колонка (Форми: Адреса та Дані) - ПОСЕРЕДИНІ */
    .elementor-16375 .elementor-element-be5cde { 
        order: 3 !important; 
        margin-top: 30px !important; 
        width: 100% !important;
    } 
    
    /* КРОК 4: Блок з методами оплати та кнопкою - В САМИЙ НИЗ! */
    .elementor-16375 .elementor-element-796f75ab { 
        order: 4 !important; 
        margin-top: 20px !important; 
        width: 100% !important;
    }
}
/* =========================================================
   OXA: ЗБІЛЬШЕННЯ ЗНАЧКА ВИДАЛЕННЯ З КОШИКА
   ========================================================= */
.woocommerce a.remove {
    font-size: 28px !important; /* Розмір самого хрестика (стандартно десь 16-20px) */
    width: 36px !important;     /* Ширина клікабельної зони */
    height: 36px !important;    /* Висота клікабельної зони */
    line-height: 32px !important; /* Центрування хрестика по вертикалі */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* При наведенні (щоб було зрозуміло, що це кнопка) */
.woocommerce a.remove:hover {
    color: #ff0000 !important; /* Робимо червоним при наведенні (за бажанням) */
    background: transparent !important;
}
/* =========================================================
   OXA: ЗБІЛЬШЕННЯ ЗНАЧКА ВИДАЛЕННЯ З КОШИКА (БЕЗ ДУБЛІВ)
   ========================================================= */

/* Прибираємо зайвий хрестик, який малює тема Woodmart */
.woocommerce a.remove::before,
.woocommerce a.remove::after {
    display: none !important;
}

/* Наш ідеальний збільшений хрестик (стандартний текст "×") */
.woocommerce a.remove {
    font-size: 32px !important;  /* Розмір хрестика (можна міняти) */
    width: 36px !important;
    height: 36px !important;
    line-height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #999 !important;      /* Спокійний сірий колір */
    font-weight: 300 !important; /* Робимо його тоншим і витонченим */
    text-decoration: none !important;
}

/* При наведенні */
.woocommerce a.remove:hover {
    color: #ff0000 !important; /* Червоний при наведенні */
    background: transparent !important;
}
/* =========================================================
   OXA: ЗБІЛЬШЕННЯ ЗНАЧКА ВИДАЛЕННЯ З КОШИКА (БЕЗ ДУБЛІВ)
   ========================================================= */

/* Прибираємо зайвий хрестик, який малює тема Woodmart */
.woocommerce a.remove::before,
.woocommerce a.remove::after {
    display: none !important;
}

/* Наш ідеальний збільшений хрестик (стандартний текст "×") */
.woocommerce a.remove {
    font-size: 38px !important;  /* Збільшили розмір самого хрестика */
    width: 31px !important;      /* Трохи збільшили клікабельну зону */
    height: 44px !important;
    line-height: 36px !important; /* Ідеальне центрування по вертикалі */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #999 !important;      /* Спокійний сірий колір */
    font-weight: 300 !important; /* Тонкий і витончений */
    text-decoration: none !important;
}

/* При наведенні */
.woocommerce a.remove:hover {
    color: #ff0000 !important; /* Червоний при наведенні */
    background: transparent !important;
}

.widget_shopping_cart .woocommerce-mini-cart-item .wd-entities-title{
	width:85% !Important;
}
/* =========================================================
   OXA: ЗБІЛЬШЕННЯ ЗНАЧКА ВИДАЛЕННЯ З КОШИКА (БЕЗ ДУБЛІВ)
   ========================================================= */

/* Прибираємо зайвий хрестик, який малює тема Woodmart */
.woocommerce a.remove::before,
.woocommerce a.remove::after {
    display: none !important;
}

/* Наш ідеальний збільшений хрестик (стандартний текст "×") */
.woocommerce a.remove {
    font-size: 40px !important;  /* Збільшили розмір самого хрестика */
    width: 44px !important;      /* Трохи збільшили клікабельну зону */
    height: 44px !important;
    line-height: 36px !important; /* Ідеальне центрування по вертикалі */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #999 !important;      /* Спокійний сірий колір */
    font-weight: 300 !important; /* Тонкий і витончений */
    text-decoration: none !important;
}

/* При наведенні */
.woocommerce a.remove:hover {
    color: #ff0000 !important; /* Червоний при наведенні */
    background: transparent !important;
}

/* =========================================================
   OXA: СТИЛІ ДЛЯ ПЕРЕНЕСЕНОГО КУПОНА
   ========================================================= */
.woocommerce-billing-fields .woocommerce-form-coupon-toggle {
    margin-bottom: 15px !important;
}

.woocommerce-billing-fields .woocommerce-form-coupon-toggle .woocommerce-info {
    margin-bottom: 0 !important;
    border-radius: 5px; /* Трохи заокруглимо краї для стилю */
}

.woocommerce-billing-fields form.checkout_coupon {
    margin-bottom: 25px !important;
    border-radius: 5px;
}
@media (max-width: 1024px) {
    .elementor-16375 .elementor-element.elementor-element-be5cde > .elementor-element-populated {
        padding: 0px 15px 15px 15px;
    }
}
/* =========================================================
   OXA: КАРТИНКИ ТОВАРІВ У ЧЕКАУТІ (SHOPIFY STYLE)
   ========================================================= */

/* Головний контейнер для рядка з товаром */
.oxa-checkout-item-wrapper {
    display: flex;
    align-items: center; /* Вирівнюємо по центру вертикалі */
    gap: 15px;           /* Відступ між картинкою і текстом */
    text-align: left;
}

/* Контейнер картинки */
.oxa-checkout-item-img {
    flex-shrink: 0; /* Забороняємо картинці стискатися */
    position: relative;
    display: flex;
}

/* Сама картинка */
.oxa-checkout-item-img img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important; /* Заокруглені кути */
    border: 1px solid #e1e1e1 !important; /* Легка рамка */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

/* Контейнер з текстом (Назва, Варіації, Бандл-мітки) */
.oxa-checkout-item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Робимо шрифт назви акуратним */
.oxa-checkout-item-info, 
.oxa-checkout-item-info a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

/* Стилізуємо кількість (х1) */
.woocommerce-checkout .product-quantity {
    font-weight: 400 !important;
    color: #777777 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    display: inline-block;
}

/* Прибираємо базовий вертикальний відступ WooCommerce у таблиці */
.woocommerce-checkout-review-order-table tbody td.product-name {
    vertical-align: middle !important;
}
/* =========================================================
   OXA: ІДЕАЛЬНА ТАБЛИЦЯ ЧЕКАУТУ (SHOPIFY STYLE)
   ========================================================= */

/* 1. Ховаємо шапку таблиці (ТОВАР, ПІДСУМОК) як у Shopify */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* 2. Вирівнюємо рядок: ліва частина (товар) і права (ціна) */
.woocommerce-checkout-review-order-table tr.cart_item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eeeeee !important;
}

/* 3. Налаштовуємо комірку з товаром як СІТКУ (Grid) */
.woocommerce-checkout-review-order-table td.product-name {
    display: grid !important;
    grid-template-columns: 64px 1fr !important; /* Зліва 64px під картинку, справа весь інший простір */
    column-gap: 15px !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    flex: 1 !important;
}

/* 4. Картинка (займає ліву колонку і тягнеться вниз) */
.oxa-checkout-item-img {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 10 !important; /* Охоплює всі можливі рядки тексту */
    display: flex;
}

.oxa-checkout-item-img img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e1e1e1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

/* 5. Назва товару (Права колонка сітки) */
.oxa-item-name-text {
    grid-column: 2 / 3 !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* 6. Характеристики та кількість (теж стають у праву колонку сітки під назвою) */
.woocommerce-checkout-review-order-table td.product-name .product-quantity,
.woocommerce-checkout-review-order-table td.product-name .variation,
.woocommerce-checkout-review-order-table td.product-name .wc-item-meta {
    grid-column: 2 / 3 !important;
    font-size: 12px !important;
    color: #777 !important;
    margin: 4px 0 0 0 !important;
    font-weight: 400 !important;
}

/* 7. Права частина чеку (Ціна) */
.woocommerce-checkout-review-order-table td.product-total {
    border: none !important;
    padding: 0 0 0 15px !important;
    text-align: right !important;
    font-weight: 600 !important;
}
/* =========================================================
   OXA: КАРТИНКА ПІД ЦІНОЮ В ТАБЛИЦІ ЗАМОВЛЕННЯ (SHOPIFY STYLE)
   ========================================================= */

/* 1. Ховаємо зайві заголовки таблиці (ТОВАР / ПІДСУМОК) */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* 2. Робимо рядок відносним контейнером, щоб всередині нього рухати елементи */
.woocommerce-checkout-review-order-table tr.cart_item {
    position: relative !important;
    display: block !important;
    padding: 15px 0 !important;
    min-height: 95px !important; /* Даємо висоту, щоб картинка влізла */
    border-bottom: 1px solid #eeeeee !important;
}

/* 3. Ліва частина (назва, кількість, бандл) */
.woocommerce-checkout-review-order-table td.product-name {
    display: block !important;
    width: 100% !important;
    padding: 0 80px 0 0 !important; /* Відступаємо 80px справа, щоб текст не наліз на картинку */
    border: none !important;
    text-align: left !important;
}

/* Робимо шрифт назви і кількості акуратним */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table td.product-name a {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* 4. Права частина (ЦІНА) - Жорстко кріпимо в правий верхній кут */
.woocommerce-checkout-review-order-table td.product-total {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
    border: none !important;
    padding: 0 !important;
    text-align: right !important;
    font-weight: 600 !important;
}

/* 5. КАРТИНКА - Жорстко кріпимо в правий кут ПІД ціною */
.oxa-checkout-image-under-price {
    position: absolute !important;
    top: 45px !important; /* Опускаємо на 45px вниз, щоб бути під ціною */
    right: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Дизайн самої картинки */
.oxa-checkout-image-under-price img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e1e1e1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    background: #fff !important;
}


/* =========================================================
   OXA: КАРТИНКА ПІД ЦІНОЮ (СТОРІНКА ПОДЯКИ) - ФІНАЛЬНИЙ ФІКС
   ========================================================= */

/* 1. Повністю ламаємо "табличність", щоб рядок став нормальним блоком */
table.woocommerce-table--order-details,
table.woocommerce-table--order-details tbody {
    display: block !important;
    width: 100% !important;
}

/* Ховаємо шапку таблиці (Товар / Підсумок) */
table.woocommerce-table--order-details thead {
    display: none !important;
}

/* 2. Рядок стає Flex-контейнером */
table.woocommerce-table--order-details tr.order_item {
    display: block !important; /* Змінив на block для кращого контролю ширини */
    position: relative !important;
    padding: 15px 0 !important;
    min-height: 95px !important;
    border-bottom: 1px solid #eeeeee !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Ліва комірка (ТЕКСТ) - ПРОБИВАЄМО ОБМЕЖЕННЯ ТЕМИ */
table.woocommerce-table--order-details tr.order_item td.product-name {
    display: block !important;
    float: none !important;
    width: 100% !important;        /* Розтягуємо на всю доступну ширину */
    max-width: 100% !important;    /* Вбиваємо ліміти Woodmart */
    min-width: 100% !important;
    padding: 0 85px 0 0 !important; /* 85px справа, щоб текст не наліз на картинку */
    border: none !important;
    position: static !important; 
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Робимо шрифт назви і кількості акуратним */
.oxa-order-item-name,
table.woocommerce-table--order-details tr.order_item td.product-name a {
    display: inline !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
}

/* Стиль для кількості (x 1) */
table.woocommerce-table--order-details tr.order_item td.product-name .product-quantity {
    font-weight: 400 !important;
    color: #777 !important;
    font-size: 13px !important;
    display: inline-block;
    margin-left: 5px;
}

/* 4. Права комірка (ЦІНА) - Абсолютно в правий верхній кут рядка */
table.woocommerce-table--order-details tr.order_item td.product-total {
    display: block !important;
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
    width: auto !important; /* Знімаємо ширину 50% */
    border: none !important;
    padding: 0 !important;
    text-align: right !important;
    font-weight: 600 !important;
}

/* 5. КАРТИНКА - Абсолютно під ціну в правий кут */
.oxa-order-image-under-price {
    position: absolute !important;
    top: 45px !important; /* Опускаємо під ціну */
    right: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Дизайн картинки */
.oxa-order-image-under-price img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e1e1e1 !important;
    background: #fff !important;
}

/* 6. Ремонтуємо підсумки знизу (Разом, Спосіб оплати) */
table.woocommerce-table--order-details tfoot {
    display: block !important;
    width: 100% !important;
}
table.woocommerce-table--order-details tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    padding: 15px 0 !important;
    border-top: 1px solid #eeeeee !important;
}
table.woocommerce-table--order-details tfoot th,
table.woocommerce-table--order-details tfoot td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
}
table.woocommerce-table--order-details tr.order_item {
min-height:125px !IMPORTANT;
	
}

.woocommerce-checkout-review-order-table tr.cart_item {
	min-height:125px !IMPORTANT;
}

.oxa-color-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.5);
}@media (min-width: 1025px) {
	.wd-sticky-btn-shown.wd-sticky-btn, .wd-sticky-btn .wd-sticky-btn-shown{
	display:none !IMPORTANT;
}
.oxa-fixed-btn{
	display:none !IMPORTANT:
}

.oxa-fixed-btn {
	display:none !IMPORTANT
}







}

@media (min-width: 768px) and (max-width: 1024px) {
	.wd-sticky-btn-shown.wd-sticky-btn, .wd-sticky-btn .wd-sticky-btn-shown{
	display:none !IMPORTANT;
}
.oxa-fixed-btn{
	display:none !IMPORTANT:
}
}

@media (max-width: 576px) {
	/* 1. Настройка контейнера: задаем фиксированную пропорцию (например, квадрат 1:1) */
.wvg-single-gallery-image-container {
    width: 100% !important;
    aspect-ratio: 1 / 2 !important; /* Можно поставить 4/5, если нужно чуть выше */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    background-color: #f9f9f9; /* Фон для пустых зон по бокам */
    height: auto !important;
}

/* 2. Настройка картинки: ВПИСЫВАЕМ полностью */
.wvg-single-gallery-image-container img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important; /* Важно: ширина подстроится под высоту */
    height: 100% !important;  /* Занимает всю доступную высоту */
    object-fit: contain !important; /* ГАРАНТИРУЕТ, что картинка не обрежется */
    object-position: center !important;
}

/* 3. Фикс для слайдера WoodMart/WooVariationGallery */
.woo-variation-gallery-slider, 
.slick-list.draggable, 
.wvg-gallery-image {
    height: auto !important;
}

/* 4. Настройка для мобильных: чтобы картинка была чуть меньше и аккуратнее */
@media (max-width: 768px) {
    .wvg-single-gallery-image-container {
        aspect-ratio: 1 / 1 !important; /* Квадрат на мобильных выглядит компактно */
        padding: 10px; /* Небольшой отступ внутри, чтобы картинка не липла к краям */
    }
}

@media (max-width: 768px) {
    /* 1. ПРИНУДИТЕЛЬНО ВПИСЫВАЕМ САЙТ В ЭКРАН */
    html, body {
        overflow-x: hidden !important; /* Убирает горизонтальную прокрутку */
        width: 100% !important;
        position: relative !important;
    }

    .website-wrapper {
        overflow: hidden !important;
        width: 100% !important;
    }

    /* 2. ИСПРАВЛЯЕМ КОНТЕНТ (чтобы не обрезался логотип и текст) */
    .container, 
    .site-content, 
    .whb-container {
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. ИСПРАВЛЯЕМ СЛАЙДЕР (чтобы картинка была видна полностью по высоте) */
    .wvg-single-gallery-image-container {
        aspect-ratio: 4 / 5 !important; /* Устанавливаем высоту под формат бутылки */
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .wvg-single-gallery-image-container img {
        height: 100% !important; /* Картинка на всю высоту блока */
        width: auto !important;   /* Ширина подстроится сама */
        object-fit: contain !important; /* ГАРАНТИРУЕТ, что товар не обрежется */
    }

    /* 4. ЧИНИМ КНОПКУ (убираем наложение ADD TO CART) */
    .single_add_to_cart_button {
        font-size: 0 !important; /* Скрываем кашу из букв */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    .single_add_to_cart_button::before {
        content: "ДОДАТИ В КОШИК"; /* Оставляем только один чистый текст */
        font-size: 14px !important;
        color: white;
        display: block;
    }
}

/* Скрываем дублирующиеся элементы галереи при клике */
.wvg-single-gallery-image-container .zoomImg,
.wvg-single-gallery-image-container .wvg-additional-image {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Фикс для корректного отображения основного фото */
.wvg-single-gallery-image-container {
    pointer-events: auto;
}

/* 1. Контейнер цвета: отступы и выравнивание */
div[data-id="pa_color"].wd-swatches-product {
    margin-left: 20px !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    padding: 5px 0 !important;
}

/* 2. Базовый вид кружка цвета */
div[data-id="pa_color"] .wd-swatch {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
    background: none !important;
    border: none !important;
}

/* 3. Внутренний круг с самим цветом */
div[data-id="pa_color"] .wd-swatch .wd-swatch-bg {
    width: 26px !important; /* Чуть меньше основного контейнера */
    height: 26px !important;
    border-radius: 50% !important;
    display: block !important;
    border: 2px solid rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
}
/* Скрываем системную кнопку "В корзину" и выбор количества на мобильных */
.single-product .entry-summary .cart .single_add_to_cart_button,
.single-product .entry-summary .cart .quantity {
    display: none !important;
}








/* Принудительное отображение текста в кнопке на мобильных */
.single_add_to_cart_button.button {
    font-size: 14px !important; /* Устанавливаем размер шрифта */
    color: #ffffff !important;  /* Белый цвет текста */
    text-indent: 0 !important;  /* Сбрасываем возможные сдвиги текста */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Убираем скрытие текста, которое WoodMart иногда применяет для иконочного режима */
.single_add_to_cart_button.button span,
.single_add_to_cart_button.button {
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Если тема подставляет иконку корзины вместо текста — убираем иконку */
.single_add_to_cart_button.button:before {
    display: none !important;
}

/* Гарантируем, что текст не прозрачный */
.single_add_to_cart_button.button:not(.loading) {
    color: #ffffff !important;
}

/* 1. Скрываем эту липкую кнопку на Десктопе (на всякий случай) */
@media (min-width: 1025px) {
    .wd-sticky-add-to-cart {
        display: none !important;
    }
}

/* 2. Настройка липкой кнопки на Мобайле */
.wd-sticky-add-to-cart {
    position: fixed !important;
    bottom: 15px !important; /* Отступ от самого низа экрана */
    left: 5% !important;     /* Отступ слева */
    right: 5% !important;    /* Отступ справа */
    width: 90% !important;   /* Чтобы она не была на весь экран */
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: #33383c !important; /* Ваш темный цвет */
    color: #ffffff !important;
    
    min-height: 50px !important;
    border-radius: 50px !important; /* Скругление как у кнопок выше */
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; /* Тень, чтобы кнопка "парила" */
    z-index: 999 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Убираем лишние иконки или контейнеры, если они вылезают внутри */
.wd-sticky-add-to-cart-content {
    padding: 0 !important;
    background: none !important;
}

/* Если при скролле кнопка дергается или меняет размер */
body .wd-sticky-add-to-cart-shown .wd-sticky-add-to-cart {
    display: flex !important;
}
.wd-sticky-btn-shown.scrollToTop {
    bottom: calc(45px + var(--wd-sticky-btn-height));
}

div.quantity{
    margin-top:25px;
}
div.quantity:before{
    content:"Кількість"!important;
    position: absolute !important;
    top: 185px !important; /* Выносим текст над эллипсом */
    left: 0px !important;  /* Выравнивание по левому краю (или 50% и transform для центра) */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: none !important
    
}
/* 1. Основной контейнер-эллипс */
.quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #f1f1f1 !important; /* Серый фон как у объема */
    border-radius: 50px !important;       /* Форма эллипса */
    padding: 5px !important;
    min-width: 140px !important;          /* Увеличиваем ширину */
    height: 50px !important;
    border: none !important;
}

/* 2. Кнопки плюс и минус */
.quantity .plus, 
.quantity .minus {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s !important;
    outline: none !important;
}

.quantity .plus:hover, 
.quantity .minus:hover {
    color: #f50087 !important; /* Цвет при наведении */
}

/* 3. Поле с цифрой (центр) */
.quantity input[type="number"].qty {
    width: 40px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    -moz-appearance: textfield; /* Убираем стандартные стрелочки браузера */
}

/* Убираем стандартные стрелочки Chrome/Safari */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-template-default form.cart button.button{
	margin-right: 10px;
	display:none !important;
}
/* Полностью автономная кнопка */
.oxa-fixed-btn {
    position: fixed !important;
    bottom: 20px !important;
    left: 15px !important;
    right: 15px !important;
    height: 55px !important;
    
    /* Цвета и текст */
    background-color: #f50087 !important; /* Яркий розовый */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    
    /* Центрирование текста */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Форма и видимость */
    border-radius: 50px !important;
    z-index: 99999 !important; /* Поверх всего */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* Игнорируем анимации сдвига темы */
    
    /* Тень */
    box-shadow: 0 8px 20px rgba(245, 0, 135, 0.4) !important;
}

/* Скрываем на ПК */
@media (min-width: 1025px) {
    .oxa-fixed-btn {
        display: none !important;
    }
}
.wd-sticky-btn-shown.scrollToTop {
    bottom: calc(45px + var(--wd-sticky-btn-height))
}

/* Удаление кнопки "Очистити" только для мобильных */
.reset_variations,
.wd-reset-var {
    display: none !important;
}

/* Убираем лишние отступы, которые могли остаться после скрытия кнопки */
.variations td.value {
    padding-right: 0 !important;
}








/* =========================================================
   OXA: СТИЛІ КУПОНА ДЛЯ МОБІЛЬНИХ (ПЕРЕНОС РЯДКА)
   ========================================================= */
@media (max-width: 767px) {
    /* Додаємо порожнє місце (відступ) знизу всього блоку */
    .woocommerce-form-coupon-toggle .woocommerce-info {
        margin-bottom: 50px !important; 
    }

    /* Змушуємо посилання "Натисніть тут..." перестрибнути на новий рядок */
    .woocommerce-form-coupon-toggle .woocommerce-info .showcoupon {
        display: block !important;
        margin-top: 8px !important; /* Невеличкий відступ між питанням і посиланням */
    }
}





.woocommerce-billing-fields .woocommerce-form-coupon-toggle .woocommerce-info {
    margin-bottom: 60px !important;
    border-radius: 5px;
}

@media (max-width: 576px) {
    @media (max-width: 767px) {
        .woocommerce-form-coupon-toggle .woocommerce-info .showcoupon {
            display: block !important;
            margin-top: 8px !important;
            margin-left: 0px ! IMPORTANT;
        }
    }
}
td.inline-volume-qty {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap; /* Позволяет переносить элементы, если не хватает места */
    gap: 10px 15px; /* Отступы между объемом и количеством */
}

/* Убираем лишние отступы у плашек объема */
td.inline-volume-qty .wd-swatches-product {
    margin-bottom: 0 !important;
    order: 1; /* Ставим на первое место */
}

/* Настройки для самого блока количества */
td.inline-volume-qty .quantity {
    margin-bottom: 0 !important;
    order: 2; /* Ставим сразу после объема */
}

/* Кнопку "Очистити" отправляем на новую строку под ними */
td.inline-volume-qty .wd-reset-var {
    order: 3;
    width: 100%;
    margin-top: 5px;
}


/* Делаем контейнер жесткой строкой и выравниваем по центру */
td.inline-volume-qty {
    display: flex !important;
    align-items: center !important; /* Выравнивание строго по центральной оси */
    flex-wrap: nowrap !important; /* Запрещаем перенос на вторую строку */
    gap: 15px !important; /* Отступ между плашкой объема и счетчиком */
}

/* Убираем любые отступы у плашки объема */
td.inline-volume-qty .wd-swatches-product {
    margin: 0 !important;
    order: 1;
}

/* Убираем отступы у счетчика количества и выравниваем его */
td.inline-volume-qty .quantity {
    margin: 0 !important;
    order: 2;
    height: 100%; /* Чтобы визуально совпадало по высоте */
}

/* Кнопка "Очистити", если она появится, уйдет вниз */
td.inline-volume-qty .wd-reset-var {
    position: absolute;
    bottom: -25px; /* Сдвигаем вниз под блоки */
    left: 0;
}
/* --- СТРОКА ЗАГОЛОВКОВ (Об'єм и Кількість) --- */
th.flex-label-qty {
    display: flex !important;
    justify-content: space-between !important; /* Расталкиваем по краям */
    align-items: center;
    width: 100%;
}

th.flex-label-qty .mobile-qty-label {
    font-weight: 600; /* Делаем жирным, как и "Об'єм" */
    color: #333; /* Можно поменять цвет, если у вас другой */
}

/* --- СТРОКА КНОПОК ([710мл] и [- 1 +]) --- */
td.inline-volume-qty {
    display: flex !important;
    justify-content: space-between !important; /* Расталкиваем по краям */
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 15px; /* Зазор между кнопками объема и счетчиком */
}

/* Убираем лишние отступы у плашек */
td.inline-volume-qty .wd-swatches-product {
    margin: 0 !important;
}

/* Настройки для самого счетчика */
td.inline-volume-qty .quantity {
    margin: 0 !important;
    flex-shrink: 0; /* Чтобы счетчик не сжимался, если экран очень узкий */
}

/* --- ПРЯЧЕМ СТАРУЮ НАДПИСЬ ВНИЗУ --- */
.woocommerce-variation-add-to-cart > .quantity-label,
.woocommerce-variation-add-to-cart > label,
.quantity-label {
    display: none !important;
}
[class*="wd-swatches"].wd-text-style-1 .wd-swatch.wd-text {
    min-width: max(var(--wd-swatch-text-min-width, 25px), var(--wd-swatch-text-size));
    min-height: 42px !IMPORTANT;
}
/* --- СТРОКА ЗАГОЛОВКОВ --- */
th.flex-label-qty {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

/* Прижимаем "Об'єм" и "710мл" друг к другу слева */
th.flex-label-qty label {
    margin-right: 5px !important;
    margin-bottom: 0 !important;
}

/* Добавляем "Кількість" через CSS (так Woodmart его не сломает) */
th.flex-label-qty::after {
    content: "Кількість";
    margin-left: auto !important; /* Эта команда прибивает слово к правому краю! */
    font-weight: 600; /* Делаем жирным */
    color: #333;
    font-size: 14px;
}

/* --- СТРОКА КНОПОК --- */
td.inline-volume-qty {
    display: flex !important;
    justify-content: space-between !important; /* Расталкиваем плашки и счетчик по краям */
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 15px; 
}

/* Убираем отступы */
td.inline-volume-qty .wd-swatches-product {
    margin: 0 !important;
}

/* Счетчик количества */
td.inline-volume-qty .quantity {
    margin: 0 !important;
    flex-shrink: 0; /* Не даем счетчику сжиматься */
}

/* Прячем старую надпись внизу */
.woocommerce-variation-add-to-cart > .quantity-label,
.woocommerce-variation-add-to-cart > label,
.quantity-label {
    display: none !important;
}
@media (max-width: 576px) {
    td.inline-volume-qty .quantity {
        margin: 0 !important;
        flex-shrink: 0;
        float: right;
        margin-right: 0px ! IMPORTANT;
    }
}
@media (max-width: 576px) {
    th.flex-label-qty::after {
        content: "Кількість";
        margin-left: auto !important;
        font-weight: 600;
        color: #333;
        font-size: 14px;
        margin-right: 16px;
    }
}

@media (max-width: 576px) {
    div.quantity:before {
        content: "Кількість" !important;
        position: absolute !important;
        top: 185px !important;
        left: 0px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-transform: none !important;
				display:none !IMPORTANT;
    }
}
.my-second-element{
	margin-left:37px !IMPORTANT;
}
.oxa-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
     padding: 0px !IMPORTANT; 
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid !IMPORTANT;
}
.oxa-color-swatch.active {
    border-color: #000 !IMPORTANT;
	padding:2px !IMPORTANT;
}
.elementor-widget-container p.price {
    display: flex !important;
    justify-content: center; /* Центрирует элементы по горизонтали */
    align-items: center;     /* Выравнивает их ровно по одной линии по вертикали */
    gap: 15px;               /* Задает расстояние между ценой и "В наявності" */
    width: 100%;
}
/* Выравниваем контейнер с картинкой по центру */
.elementor-widget-container .wvg-single-gallery-image-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

/* Центрируем саму картинку внутри контейнера */
.elementor-widget-container .wvg-single-gallery-image-container img {
    margin: 0 auto !important;
    display: block !important;
}

/* (Опционально) Центрируем саму галерею целиком, если колонка Elementor шире галереи */
.elementor-widget-container .woo-variation-product-gallery {
    margin: 0 auto !important;
}


[class*="wd-single-"].wd-swatch-layout-inline table.variations .cell {
    padding-bottom: 0;
    margin: auto !IMPORTANT;
}


div[data-id="pa_color"].wd-swatches-product {
    margin-left: calc(50% - 148px) !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
/* Усиленный селектор для центрирования цены и наличия */
body .elementor-widget-container > p.price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

body .elementor-widget-container p.price .oxa-final-stock {
    margin: 0 !important; /* Убираем лишние отступы, если они есть */
}
/* --- Стили объема ТОЛЬКО для товаров 15747 и 16056 --- */

.postid-15747 .variations_form div[data-id="pa_size"].wd-swatches-product,
.postid-16056 .variations_form div[data-id="pa_size"].wd-swatches-product {
    display: inline-flex !important;
    background-color: #f1f1f1 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 3px !important;
    gap: 0 !important;
    width: 120px;
}

.postid-15747 [class*="wd-swatches"].wd-text-style-1 .wd-swatch.wd-text,
.postid-16056 [class*="wd-swatches"].wd-text-style-1 .wd-swatch.wd-text {
    min-width: max(var(--wd-swatch-text-min-width, 35px), var(--wd-swatch-text-size));
    min-height: 42px !important;
    margin-left: 10px !important;
}





.slick-dotted.slick-slider {
    margin-bottom: -10px !IMPORTANT;
}

.elementor-widget-container .woo-variation-product-gallery {
      margin: -90px auto !important;
			margin-top:-14px !IMPORTANT;
    }
.woo-variation-gallery-slider .slick-dots {
    display: flex !important;
    position: absolute !important;
    bottom: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 20px !important;
}




.wd-single-title .product_title {
    margin-bottom: 0;
    margin-top: 10px !IMPORTANT;
}

@media (max-width: 768px) {
    /* Скрываем второй (дублирующий) блок количества, если они находятся в одном контейнере */
    form.variations_form .woocommerce-variation-add-to-cart .quantity ~ .quantity {
        display: none !important;
    }

    /* Скрываем "сиротский" блок количества, если он выпадает из обертки прямо в форму */
    form.variations_form > .quantity {
        display: none !important;
    }
    
    /* Дополнительная защита: если тема создает свой кастомный блок, а стандартный woo оставляет видимым */
    .woodmart-hover-quick .woocommerce-variation-add-to-cart > .quantity {
        display: none !important;
    }
}

/* Если для мобильных телефонов нужно сделать отступ меньше (например, 20px) */
@media (max-width: 767px) {
    .postid-15747 .unpacked .oxa-section-header,
    .postid-16056 .unpacked .oxa-section-header {
     margin-top: 40px !important; 
		 margin-bottom: -40px !IMPORTANT;
    }
}

/* 1. Уничтожаем все дубликаты кнопок количества [- 1 +], оставляя только первую */
form.variations_form .quantity ~ .quantity {
    display: none !important;
}

/* 2. Уничтожаем дубликаты строк с ценами (1 x 1499), если плагин оборачивает их в стандартные классы */
form.variations_form div[class*="price"] ~ div[class*="price"],
form.variations_form div[class*="subtotal"] ~ div[class*="subtotal"],
form.variations_form div[class*="totals"] ~ div[class*="totals"] {
    display: none !important;
}

/* На всякий случай скрываем клоны, если плагин создает для них отдельные таблицы/обертки внизу формы */
.woocommerce-variation-add-to-cart ~ div[class*="qty"],
.woocommerce-variation-add-to-cart ~ div[class*="price"] {
    display: none !important;
}


}