/* ══════════════════════════════════════════════════════════════════
   ФУНДАМЕНТ — CSS-змінні. Раніше жили тільки в
   vapelab-child/assets/css/vapelab.css, окремим, ЗАВЖДИ підключеним
   файлом теми; весь інший CSS (нижче й у попередніх сесіях) лише
   ЧИТАЄ ці змінні через var(), жодного разу не визначаючи їх сам.

   🐛 2026-08-27: коли інлайновий блок переїхав у цей файл, а старий
   файл теми (class-assets.php) зняли з черги як «застарілий», разом
   з ним зникли й самі визначення --vl-accent, --wd-primary-color
   тощо — весь сайт миттю втратив акцентний колір (прозорі бейджі,
   кнопки). «Застарілі» там були тільки правила КОМПОНЕНТІВ нижче
   в тому файлі (стара картка, старі кнопки) — їх свідомо не
   переносимо, вони давно замінені детальнішими правилами нижче.
   Сам блок :root зі змінними — переносимо без змін, він і зараз
   чинний. ══════════════════════════════════════════════════════════════════ */
:root {
	--vl-accent:       #7375D0;
	--vl-accent-hover: #5F61C4;
	--vl-accent-soft:  #D1CCFB;
	--vl-surface-1:    #F0F0FC;
	--vl-surface-2:    #F4F4FC;
	--vl-ink:          #111111;
	--vl-ink-muted:    #858585;
	--vl-border:       #EAEAEA;
	--vl-bg:           #FFFFFF;
	--vl-star:         #FFB800;

	--vl-font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--wd-text-font:            var(--vl-font-body) !important;
	--wd-text-font-size:       14px !important;
	--wd-text-font-weight:     400 !important;
	--wd-title-font:           var(--vl-font-head) !important;
	--wd-title-font-weight:    700 !important;
	--wd-alternative-font:     var(--vl-font-body) !important;
	--wd-widget-title-font:    var(--vl-font-head) !important;
	--wd-widget-title-font-weight: 700 !important;
	--wd-header-el-font:       var(--vl-font-body) !important;
	--wd-header-el-font-weight: 700 !important;

	--wd-entities-title-font:        var(--vl-font-body) !important;
	--wd-entities-title-font-weight: 700 !important;

	--wd-primary-color:     var(--vl-accent) !important;
	--wd-alternative-color: var(--vl-star) !important;
	--wd-text-color:        var(--vl-ink-muted) !important;
	--wd-title-color:       var(--vl-ink) !important;
	--wd-entities-title-color: var(--vl-ink) !important;
	--wd-entities-title-color-hover: var(--vl-accent) !important;
	--wd-widget-title-color: var(--vl-ink) !important;
	--wd-link-color:        var(--vl-ink) !important;
	--wd-link-color-hover:  var(--vl-accent) !important;
	--wd-main-bgcolor:      var(--vl-bg) !important;

	--wd-brd-radius:      8px !important;
	--wd-form-brd-radius: 8px !important;
	--wd-form-brd-width:  1px !important;
	--wd-form-brd-color:  var(--vl-border) !important;
	--wd-form-brd-color-focus: var(--vl-accent) !important;
	--wd-form-height:     44px !important;

	--wd-container-w: 1280px !important;
}

/* ── Порожня смуга над футером ───────────────────────────────────────────
   Тема виводить блок .wd-prefooter заввишки 40px з білим фоном.
   У макеті його немає. */
.wd-prefooter {
	display: none;
}

/* Бейдж позиціюється від найближчого предка з position: relative —
   ним виявився .product-image-link, і після зменшення зображення бейдж
   опинявся на 44px замість 23. Знімаємо relative з обох. */
.product-grid-item .product-element-top,
.product-grid-item .product-image-link,
.product-grid-item .content-product-imagin {
	position: static;
}

/* Рядок дій має власні бічні відступи, через які кнопка вужча за макет */
.product-grid-item .wd-bottom-actions {
	padding: 0 !important;
	margin: 0 !important;
}

/* ── Картка: фінальне доведення ──────────────────────────────────────────
   Після зменшення зображення бейдж поїхав униз (він позиціюється від
   контейнера зображення), а кнопка виявилась вужчою за макет через
   подвійні бічні відступи. */
.product-grid-item .product-labels {
	position: absolute;
	top: 23px;
	left: 22px;
	z-index: 3;
	margin: 0;
}

/* У макеті текст має відступ 11 від краю картки, кнопка — 16.
   Тому інформаційний блок лишаємо з відступом теми (11), а кнопці
   додаємо ще 5. */
.product-grid-item .product-element-bottom.product-information {
	padding-bottom: 0 !important;
}

.product-grid-item .fade-in-block {
	padding: 0 5px !important;
	/* 18px за макетом мінус 14px власного простору рядка кнопки */
	margin: 4px 0 0 !important;
}

.product-grid-item .wd-bottom-actions,
.product-grid-item .wd-add-btn {
	margin-bottom: 0 !important;
	line-height: 0;
}

.product-grid-item .fade-in-block {
	padding-bottom: 22px !important;
}

/* Назва: тема задає розмір змінною --wd-entities-title-font-size */
.product-grid-item .wd-entities-title,
.wd-product .wd-entities-title,
.product-grid-item h3.wd-entities-title {
	font-size: 16px !important;
	line-height: 1.3;
}

.product-grid-item .product-image-link img,
.product-grid-item .product-element-top img {
	margin-top: 0;
}

/* ── Картка товару: доведення до макета ──────────────────────────────────
   Заміри з figma/shop.png: картка 258x385, зображення ~181 (70% ширини)
   з полями з боків, бейдж 78x27, назва 16px, кнопка 226 завширшки
   зі скругленням 12. */

/* Зображення в темі на всю ширину картки — через це картка була
   на 75px вищою за макет. */
.product-grid-item .product-element-top,
.product-grid-item .product-image-link {
	display: block;
	padding: 0;
}

.product-grid-item .product-image-link img,
.product-grid-item .product-element-top img {
	display: block;
	width: 70%;
	max-width: 70%;
	height: auto;
	margin: 20px auto 0;
}

/* Бейдж: у теми власні padding і line-height, звідси висота 50 замість 27 */
.product-grid-item .product-labels .product-label.onsale,
.product-grid-item .product-labels .product-label {
	height: 27px;
	min-height: 27px;
	line-height: 27px;
	padding: 0 12px;
	font-size: 13px;
	border-radius: 9px;
}

.product-grid-item .wd-entities-title {
	font-size: 16px;
}

/* Сердечко: в макеті акцентного кольору і трохи менше */
.product-grid-item .wd-wishlist-btn a,
.product-grid-item .wd-wishlist-btn a::before {
	color: var(--vl-accent);
	font-size: 22px;
}

.product-grid-item .wrap-wishlist-button {
	top: 16px;
	right: 16px;
}

/* Кнопка: скруглення теми перебиває наше, повторюємо її специфічність */
.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-add-btn > a {
	border-radius: 12px !important;
}

.product-grid-item .fade-in-block {
	padding: 0 16px !important;
	margin-top: 18px;
}

/* .content-product-imagin — прихований білий шар, який при наведенні
   розгортається на всю картку і накриває назву, зірки та ціну.
   У макеті його немає. */
.product-grid-item .content-product-imagin,
.wd-product .content-product-imagin {
	display: none !important;
}

.wd-hover-with-fade.hover-ready:is(:hover, .state-hover) .product-wrapper {
	transform: none !important;
	z-index: auto !important;
}

/* ── Повне вимкнення механіки наведення Woodmart ─────────────────────────
   Тема будує картку так: ціна і зірки лежать у вікні висотою в один рядок
   (.product-rating-price { overflow: hidden; height: 1.4em }), а при
   наведенні .wrapp-product-price зсувається на -50%, показуючи зірки
   замість ціни. Кнопка при цьому позиціонується абсолютно поверх тексту.
   У макеті картка статична — прибираємо всі три ефекти. */
.wd-product.wd-hover-base.has-stars .product-rating-price,
.wd-product.wd-hover-base .product-rating-price {
	overflow: visible !important;
	height: auto !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.wd-product.wd-hover-base.has-stars .wrapp-product-price,
.wd-product.wd-hover-base.has-stars:hover .wrapp-product-price,
.wd-product.wd-hover-base.has-stars.state-hover .wrapp-product-price {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	transform: none !important;
	transition: none !important;
}

.wd-product.wd-hover-base .fade-in-block,
.wd-hover-with-fade .fade-in-block,
.wd-product:hover .fade-in-block {
	position: static !important;
	top: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
	padding: 0 5px !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Нічого не має ховатись під час наведення */
.wd-product:hover .wd-entities-title,
.wd-product:hover .product-rating-price,
.wd-product:hover .price,
.wd-product:hover .star-rating,
.wd-product.state-hover .wd-entities-title,
.wd-product.state-hover .product-rating-price {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	transform: none !important;
}

.wd-product:hover .product-rating-price,
.wd-product.state-hover .product-rating-price {
	display: flex !important;
}

/* ── Рейтинг і ціна ──────────────────────────────────────────────────────
   Тема кладе ціну і зірки в контейнер висотою 20px і прокручує їх одна
   замість одної при наведенні. У макеті обидві видимі: зірки над ціною.
   column-reverse ставить зірки (другий елемент) над ціною. */
.product-grid-item .product-rating-price,
.product-grid-item .wrapp-product-price {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
	transition: none !important;
}

.product-grid-item .product-rating-price .wrapp-product-price,
.wd-product .product-rating-price .wrapp-product-price {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

/* У DOM ціна йде першою, у макеті зверху зірки */
.product-grid-item .star-rating {
	order: -1;
}

.product-grid-item .star-rating {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	margin: 0 auto;
}

/* Назва зникала при наведенні — тримаємо її на місці */
.product-grid-item:hover .wd-entities-title,
.product-grid-item .wd-entities-title {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	transform: none !important;
}

.product-grid-item:hover .wrapp-product-price,
.product-grid-item:hover .price,
.product-grid-item:hover .star-rating {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Зірки: жовті заповнені, сірі порожні — як у макеті */
.product-grid-item .star-rating span::before {
	color: #FFB800;
}

.product-grid-item .star-rating::before {
	color: #D9D9D9;
}

/* ── Картка товару: розміри з макета ─────────────────────────────────────
   Виміряно на figma/shop.png: картка 258 шириною, фон #F9F9F9 (той самий,
   що полотно), межа #EBEBEB, назва 16px у два рядки, ціна 22px,
   кнопка заввишки 47. */
.product-grid-item {
	background-color: #F9F9F9;
	border: 1px solid #EBEBEB;
	border-radius: 20px;
	/* Простір під кнопкою дає line-height рядка дій, тому власного
	   нижнього відступу картці не треба. */
	padding-bottom: 0;
	overflow: visible;
}

/* Тема лишає під блоком з ціною і під обгорткою власні відступи —
   через них картка була на 28px вищою за макет. */
.product-grid-item .product-wrapper {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.product-grid-item .product-rating-price {
	margin: 0 !important;
}

.product-grid-item .wd-entities-title {
	margin-bottom: 8px !important;
}

.product-grid-item .wd-entities-title {
	font-size: 16px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.product-grid-item .price {
	font-size: 22px;
	font-weight: 700;
}

.product-grid-item .price del {
	font-size: 17px;
	font-weight: 400;
}

.product-grid-item .price ins {
	font-size: 22px;
	font-weight: 700;
}

/* Тема задає кнопці висоту 35px правилом із високою специфічністю
   (.wd-product.wd-hover-base ...), тому повторюємо ті самі класи. */
.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-add-btn > a {
	height: 47px;
	min-height: 47px;
	padding: 0 16px;
	border-radius: 12px;
	font-size: 14px;
}

.product-grid-item .fade-in-block {
	margin-top: 20px;
	padding: 0 16px;
}

/* Бейдж: 78x27 з макета, відступ 22 від краю картки */
.product-labels {
	top: 22px;
	left: 22px;
}

.product-labels .product-label.onsale {
	min-width: 78px;
	height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-size: 13px;
}

/* ── Ефекти наведення теми ───────────────────────────────────────────────
   У макеті картка статична: підміни зображення, зсувів і напівпрозорих
   шарів немає. */
.product-grid-item .hover-img,
.product-grid-item .product-image-link .wd-back-image,
.product-grid-item .wd-product-hover,
.product-grid-item .swap-elements .hover-img {
	display: none !important;
	opacity: 0 !important;
}

.product-grid-item,
.product-grid-item * {
	transition: none !important;
}

.product-grid-item:hover {
	transform: none !important;
	box-shadow: none !important;
}

.product-grid-item .product-element-top img {
	transform: none !important;
}

/* ── Каталог на мобільному ───────────────────────────────────────────────
   У макеті: крихти, заголовок SHOP, потім рядок «фіолетова кнопка FILTER
   + селект NEWEST», далі сітка у дві колонки. */


/* ── Сайдбар: ALL PRODUCTS і SHOW MORE ───────────────────────────────────
   Рядок і кнопку додає плагін; тут лише вигляд за макетом. */
.sidebar-container .vl-all-products > a {
	font-weight: 700;
}

/* Усі рядки категорій мають однаковий лівий відступ, щоб текст
   у підсвіченому ALL PRODUCTS стояв на одній вертикалі з рештою. */
.sidebar-container .widget_product_categories li,
.sidebar-container .widget_layered_nav li {
	padding-left: 12px;
	padding-right: 12px;
}

.sidebar-container li.vl-all-products.vl-current {
	background-color: var(--vl-accent);
	border-radius: 8px;
	padding-top: 9px;
	padding-bottom: 9px;
	margin-bottom: 4px;
}

.sidebar-container li.vl-all-products.vl-current > a,
.sidebar-container li.vl-all-products.vl-current .count {
	color: #fff;
}

.widget_layered_nav li.vl-hidden-brand {
	display: none;
}

.widget_layered_nav ul.vl-expanded li.vl-hidden-brand {
	display: flex;
}

.vl-show-more {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding-top: 14px;
	border: 0;
	border-top: 1px solid var(--vl-border);
	background: none;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--vl-ink-muted);
	cursor: pointer;
	text-align: center;
}

.vl-show-more:hover {
	color: var(--vl-accent);
}

/* ── Картка товару: прибираємо зайве з теми ──────────────────────────────
   Woodmart кладе в картку короткий опис і рядок дій (обране, швидкий
   перегляд, порівняння). У макеті цього немає — лише сердечко в кутку
   зображення і кнопка ADD TO CART на всю ширину. */
.product-grid-item {
	position: relative;
}

.product-grid-item .hover-content,
.product-grid-item .wd-more-desc,
.product-grid-item .wrap-quickview-button,
.product-grid-item .wrap-compare-button,
.product-grid-item .wd-quick-shop-btn {
	display: none;
}

/* Кольори кнопок магазину в темі задані змінними (типово зелений #83b735).
   Перебиваємо саме змінні — правила теми мають вищу специфічність,
   а значення однаково беруться звідси. */
:root {
	--btn-accented-bgcolor: #7375D0;
	--btn-accented-bgcolor-hover: #5F61C4;
	--btn-accented-color: #FFFFFF;
	--btn-accented-color-hover: #FFFFFF;
}

/* Іконка кошика. Псевдоелементами самої кнопки керує тема (::before —
   шрифтова іконка, ::after — абсолютно позиціонований глиф), тому обидва
   вимикаємо, а свою іконку вішаємо на внутрішній span. */
.product-grid-item .wd-add-btn > a::before,
.product-grid-item .wd-add-btn > a::after {
	content: none;
	display: none;
}

.product-grid-item .wd-add-btn > a > span {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.product-grid-item .wd-add-btn > a > span::before {
	content: "";
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: center/16px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

.product-grid-item .wd-add-btn > a:hover > span::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* У картці каталогу кнопка світла з акцентним текстом */
.product-grid-item .wd-add-btn > a,
.product-grid-item .wd-bottom-actions .wd-add-btn > a {
	--btn-accented-bgcolor: #F4F4FC;
	--btn-accented-color: #7375D0;
	--btn-accented-bgcolor-hover: #7375D0;
	--btn-accented-color-hover: #FFFFFF;
}

.product-grid-item .wd-bottom-actions {
	display: block;
	width: 100%;
}

/* Сердечко — у правий верхній кут зображення, як у макеті.
   У теми .product-information має position: relative і перехоплює
   абсолютне позиціювання, тому знімаємо його. */
.product-grid-item .product-element-bottom {
	position: static;
}

.product-grid-item .wrap-wishlist-button {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	margin: 0;
}

.product-grid-item .wd-wishlist-btn a {
	color: var(--vl-ink-muted);
}

.product-grid-item .wd-wishlist-btn a:hover {
	color: var(--vl-accent);
}

/* Кнопка ADD TO CART: світла підкладка, акцентний текст, на всю ширину.
   Колір з налаштувань магазину теми (зелений) перебиваємо тут. */
.product-grid-item .wd-add-btn,
.product-grid-item .wd-add-btn-replace {
	width: 100%;
	margin: 0;
}

.product-grid-item .wd-add-btn > a,
.product-grid-item .wd-bottom-actions a.button,
.product-grid-item a.add_to_cart_button,
.product-grid-item a.product_type_simple {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--vl-surface-2);
	background-image: none;
	color: var(--vl-accent);
	border: none;
	box-shadow: none;
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.product-grid-item .wd-add-btn > a:hover,
.product-grid-item .wd-bottom-actions a.button:hover,
.product-grid-item a.add_to_cart_button:hover,
.product-grid-item a.product_type_simple:hover {
	background-color: var(--vl-accent);
	color: #fff;
}

/* ── Картка товару в каталозі ────────────────────────────────────────────
   У макеті: бейдж SALE, сердечко, фото, назва по центру у два рядки,
   рейтинг, стара і нова ціна, і кнопка ADD TO CART, видима завжди. */

/* Тема ховає кнопку до наведення — у макеті вона на місці постійно. */
.product-grid-item .fade-in-block {
	opacity: 1;
	visibility: visible;
	position: static;
	transform: none;
	pointer-events: auto;
	margin-top: 12px;
}

.product-grid-item .product-information {
	text-align: center;
	padding: 0 14px;
}

.product-grid-item .wd-entities-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.35;
	margin: 0 0 8px;
}

.product-grid-item .product-rating-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.product-grid-item .star-rating {
	margin: 0 auto;
}

/* Кнопка в картці: світла підкладка, акцентний текст, на всю ширину */
.product-grid-item .fade-in-block .button,
.product-grid-item .add-to-cart-loop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background-color: var(--vl-surface-2);
	color: var(--vl-accent);
	border: none;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.product-grid-item .fade-in-block .button:hover,
.product-grid-item .add-to-cart-loop:hover {
	background-color: var(--vl-accent);
	color: #fff;
}

/* Бейдж: у макеті «SALE -8%», тема виводить лише відсоток.
   white-space: pre — інакше пробіл у content схлопується. */
.product-labels .onsale::before {
	content: "SALE ";
	white-space: pre;
}

.product-labels .product-label.onsale {
	background-color: var(--vl-accent);
	color: #fff;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px;
}

/* ── Сайдбар: рядки списків ──────────────────────────────────────────────
   У макеті назва ліворуч, кількість праворуч, без маркерів. */
.sidebar-container .widget_product_categories li,
.sidebar-container .widget_layered_nav li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	margin: 0;
	list-style: none;
}

.sidebar-container .widget_product_categories li > a,
.sidebar-container .widget_layered_nav li > a {
	flex: 1 1 auto;
}

.sidebar-container .widget .count {
	flex: 0 0 auto;
	color: var(--vl-ink-muted);
	font-size: 13px;
}

/* Заголовки віджетів: іконка ліворуч, шеврон праворуч */
.sidebar-container .widget_product_categories .widget-title,
.sidebar-container .widget_layered_nav .widget-title {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	padding-right: 24px;
}

.sidebar-container .widget_product_categories .widget-title::before,
.sidebar-container .widget_layered_nav .widget-title::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background: center/20px no-repeat;
}

.sidebar-container .widget_product_categories .widget-title::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

.sidebar-container .widget_layered_nav .widget-title::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4L12 22 2 12V2h10l8.6 8.6a2 2 0 010 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.2' fill='%237375D0'/%3E%3C/svg%3E");
}

.sidebar-container .widget_product_categories .widget-title::after,
.sidebar-container .widget_layered_nav .widget-title::after {
	content: "";
	position: absolute;
	right: 0;
	width: 12px;
	height: 12px;
	border-left: 2px solid var(--vl-ink);
	border-bottom: 2px solid var(--vl-ink);
	transform: rotate(135deg);
	margin-top: 4px;
}

/* ── Шапка каталогу ──────────────────────────────────────────────────────
   Виміряно з макета: SHOP — 32px uppercase (висота літер 25),
   хлібні крихти 13px через 22px під ним, селект сортування 258x47
   з межею #EBEBEB. Списку категорій під заголовком у макеті немає. */
.page-title.page-title-default {
	padding-top: 34px;
	padding-bottom: 0;
	margin-bottom: 0;
	background: transparent;
	min-height: 0;
}

.page-title .entry-title,
.page-title h1 {
	font-family: var(--vl-font-head);
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
	margin: 0;
}

/* Список категорій із «0 Products» під заголовком — не з макета */
.page-title .wd-nav-product-cat,
.page-title .wd-btn-show-cat {
	display: none;
}



/* Заголовок і рядок з крихтами лежать у різних контейнерах теми,
   тому прибираємо нижній відступ у титульного блоку. */
.page-title.page-title-default .container {
	padding-bottom: 0;
	margin-bottom: 0;
}

.page-title.page-title-default > .container > * {
	margin-bottom: 0;
}

.wd-shop-tools .wd-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--vl-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.woocommerce-breadcrumb a {
	color: var(--vl-ink-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--vl-accent);
}

/* Селект сортування */
.wd-shop-tools .woocommerce-ordering,
.wd-shop-tools .woocommerce-ordering form {
	width: 258px;
	max-width: 258px;
}

/* Тема обмежує селект: .woocommerce-ordering.wd-style-underline select
   { max-width: 200px }. Повторюємо той самий клас, щоб перебити. */
.wd-shop-tools .woocommerce-ordering.wd-style-underline select,
.wd-shop-tools .woocommerce-ordering select,
.wd-shop-tools .woocommerce-ordering .wd-ordering-select {
	width: 100%;
	max-width: 100%;
	height: 47px;
	border: 1px solid #EBEBEB;
	border-radius: 8px;
	background-color: transparent;
	padding: 0 16px;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
}

/* ── Сайдбар як картка ───────────────────────────────────────────────────
   У макеті CATEGORIES і BRANDS — один блок з межею і скругленням 16,
   а «Need help?» — окрема світла картка під ним. */
.sidebar-container .widget_product_categories,
.sidebar-container .widget_layered_nav {
	border: 1px solid var(--vl-border);
	background: transparent;
	padding: 20px;
	margin: 0;
}

.sidebar-container .widget_product_categories {
	border-radius: 16px 16px 0 0;
	border-bottom: none;
	padding-bottom: 4px;
}

.sidebar-container .widget_layered_nav {
	border-radius: 0 0 16px 16px;
	padding-top: 20px;
}

.sidebar-container .widget_custom_html {
	margin-top: 20px;
	border: 0;
	padding: 0;
}

.sidebar-container .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Каталог /shop/ ──────────────────────────────────────────────────────
   Виміряно з макета (figma/shop.png, 4x): контент 1200, сайдбар 314,
   проміжок до сітки 40, сітка 846 = три колонки по 258 з проміжками 36. */

.wd-shop-content,
.site-content .row {
	gap: 0;
}

.shop-content-area,
.site-content > .row > .sidebar-container {
	box-sizing: border-box;
}

/* Рядок теми має ширину 1230 і поля 15px у колонок. Щоб отримати
   сайдбар 314, проміжок 40 і сітку 846 (разом 1200):
     сайдбар  = 314 + 15 + 25 = 354  -> 28.78%
     контент  = 846 + 15 + 15 = 876  -> 71.22%
   проміжок між вмістом = 25 + 15 = 40. */
.sidebar-container.col-lg-3 {
	flex: 0 0 28.78%;
	max-width: 28.78%;
	padding-left: 15px;
	padding-right: 25px;
}

/* :not(.single-product) — Woodmart вішає клас shop-content-area і на
   сторінку товару, і без цього вона стискалась до 1015px замість 1200. */
body:not(.single-product) .site-content.shop-content-area {
	flex: 0 0 71.22%;
	max-width: 71.22%;
	padding-left: 15px;
	padding-right: 15px;
}

/* Проміжок між картками 36 замість типових 20 */
.products.wd-products {
	--wd-col-lg: 3;
	column-gap: 36px;
	row-gap: 28px;
}

/* Панель над сіткою: у макеті лише сортування праворуч. Перемикачі
   кількості товарів і режиму перегляду прибираємо. */
.wd-shop-tools .wd-products-per-page,
.wd-shop-tools .wd-products-shop-view,
.wd-shop-tools .wd-show-sidebar-btn {
	display: none;
}

/* Тема виводить два окремі рядки .wd-shop-tools — з крихтами і з
   сортуванням. У макеті це один рівень: крихти ліворуч, селект праворуч. */
.shop-loop-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 10px;
	margin-bottom: 28px;
}

.shop-loop-head > .wd-shop-tools {
	width: auto;
	max-width: none;
	flex: 0 1 auto;
	margin: 0;
	min-height: 47px;
	display: flex;
	align-items: center;
}

.shop-loop-head > .wd-shop-tools:last-child {
	flex: 0 0 258px;
	justify-content: flex-end;
}

.wd-shop-tools .woocommerce-ordering {
	margin-left: auto;
}

/* Порожню категорію Uncategorized у каталозі не показуємо */
.widget_product_categories li.cat-item .count:only-child,
.widget_product_categories li a[href*="uncategorized"] {
	display: none;
}

.widget_product_categories li a[href*="uncategorized"] + .count {
	display: none;
}

/* Заголовки віджетів сайдбару */
.wd-sidebar .widget-title,
.sidebar-container .widget-title {
	font-family: var(--vl-font-head);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
	margin-bottom: 16px;
}

/* Активна категорія — заливка акцентом на всю ширину рядка */
.widget_product_categories .current-cat > a,
.widget_product_categories .current-cat-parent > a {
	background-color: var(--vl-accent);
	color: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-weight: 700;
}

/* У макеті назви категорій і брендів набрані великими літерами */
.widget_product_categories li,
.widget_layered_nav li {
	margin-bottom: 6px;
	font-size: 14px;
}

.widget_product_categories li > a,
.widget_layered_nav li > a {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.widget_product_categories .count,
.widget_layered_nav .count {
	color: var(--vl-ink-muted);
	font-size: 12px;
}

/* Блок «Need help?» — у макеті світла картка з іконкою */
.vl-help {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--vl-surface-1);
	border-radius: 16px;
	padding: 16px 18px;
}

.vl-help-icon {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff center/18px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='2' y='14' width='4' height='6' rx='1'/%3E%3Crect x='18' y='14' width='4' height='6' rx='1'/%3E%3C/svg%3E");
}

.vl-help-text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.vl-help-text strong {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
}

.vl-help-text span {
	font-size: 12px;
	color: var(--vl-ink-muted);
}





/* ── Футер ───────────────────────────────────────────────────────────────
   Власна розмітка з плагіна vapelab-core. Розміри з макета:
   висота 388, фон — градієнт #F0F0FC → #E4E4F8,
   колонки на x 119 / 703 / 948 / 1175 при контенті 1200. */

/* Порожній футер теми ховаємо — його зона віджетів не виводиться. */
.footer-container {
	display: none;
}

.vl-footer {
	background-image: linear-gradient(135deg, #F0F0FC 0%, #E9E9FA 55%, #E4E4F8 100%);
	color: var(--vl-ink);
	font-family: var(--vl-font-body);
}



/* Ті самі 1230 з полями 15, що й .container теми — тоді футер
   вирівняний з рештою сторінки, а чистий контент виходить 1200. */
.vl-footer-inner {
	max-width: 1230px;
	margin: 0 auto;
	padding: 50px 15px 40px;
	display: flex;
	align-items: flex-start;
	gap: 0;
}

/* Колонки в макеті починаються на x 119 / 703 / 948 / 1175 при контенті
   1200, тобто перша шириною 584, далі 245 і 227, остання добирає решту.
   Логотип і текстовий блок — окремі елементи (на мобільному вони
   розʼїжджаються: логотип угору, тексти вниз), на десктопі зшиваємо
   їх в одну колонку через wrap. */
.vl-footer-inner {
	flex-wrap: wrap;
}

.vl-footer-logo-block {
	flex: 0 0 584px;
	order: 0;
}

.vl-footer-about {
	flex: 0 0 584px;
	order: 4;
	margin-top: -170px;
}

/* Порядок дітей: logo-block(1), about(2), далі три колонки.
   nth-of-type рахує всі div і давав ширини не тим елементам. */
.vl-footer-col {
	order: 1;
}

.vl-footer-inner > .vl-footer-col:nth-child(3) {
	flex: 0 0 245px;
}

.vl-footer-inner > .vl-footer-col:nth-child(4) {
	flex: 0 0 227px;
}

.vl-footer-inner > .vl-footer-col:nth-child(5) {
	flex: 1 1 auto;
}

.vl-foot-logo {
	width: 200px;
	height: auto;
	display: block;
	margin-bottom: 26px;
}

.vl-foot-tagline {
	font-size: 13px;
	line-height: 1.6;
	color: var(--vl-ink-muted);
	margin: 0 0 28px;
}

/* Попередження 18+ — навмисно дрібне й приглушене, як у макеті */
.vl-age-notice {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--vl-ink-muted);
	text-transform: uppercase;
	margin: 0 0 18px;
}

.vl-foot-copy {
	font-size: 12px;
	color: var(--vl-ink-muted);
	margin: 0;
}

.vl-footer-title {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vl-ink);
	cursor: default;
	text-align: left;
}

.vl-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vl-footer-menu li {
	margin-bottom: 10px;
}

.vl-footer-menu a {
	color: var(--vl-ink);
	font-size: 14px;
	text-decoration: none;
}

.vl-footer-menu a:hover {
	color: var(--vl-accent);
}



/* ── Згортання SEO-тексту ────────────────────────────────────────────────
   У згорнутому стані видно початок тексту з розчиненням донизу;
   кнопка знімає обмеження висоти. */
#vl-seo-body,
#vl-seo-body-m {
	position: relative;
	max-height: 210px;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

#vl-seo-body.vl-expanded,
#vl-seo-body-m.vl-expanded {
	max-height: 4000px;
}

#vl-seo-body::after,
#vl-seo-body-m::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	background: linear-gradient(180deg, rgba(249, 249, 249, 0) 0%, #F9F9F9 100%);
	pointer-events: none;
}

#vl-seo-body.vl-expanded::after,
#vl-seo-body-m.vl-expanded::after {
	display: none;
}

#vl-seo-more .elementor-button,
#vl-seo-more-m .elementor-button {
	cursor: pointer;
}

/* ── Шапка ───────────────────────────────────────────────────────────────
   У макеті шапка біла і лежить на полотні #F9F9F9 — стик різкий,
   без тіні й градієнта. */
.whb-main-header,
.whb-general-header,
.whb-row {
	background-color: #FFFFFF;
}

/* Мобільна шапка: тільки бургер і чотири іконки. Текстові підписи
   (MENU, LOGIN / REGISTER) розсували рядок до 518px при вікні 394px —
   через це праворуч зʼявлялася порожня смуга полотна. */


/* ── Фон сторінки ────────────────────────────────────────────────────────
   Полотно #F9F9F9, шапка біла — як у макеті.

   Woodmart малює власний білий фон на .website-wrapper і .main-page-wrapper,
   і вони перекривали сіре полотно body — сірий було видно лише всередині
   .site-content. Знімаємо їх фон, лишаємо єдине джерело кольору на body. */
body {
	background-color: #F9F9F9;
}

.website-wrapper,
.main-page-wrapper,
.wd-page-content,
.site-content {
	background-color: transparent;
}

/* ── Другорядні кнопки під секціями ──────────────────────────────────────
   VIEW ALL PRODUCTS і OPEN ALL TEXT у макеті не залиті акцентом: прозорий
   фон, тонка сіра межа, темний текст. Коробка 352x45. */
#vl-seo-more .elementor-button,
#vl-products .elementor-widget-button .elementor-button {
	background: transparent;
	color: var(--vl-ink);
	border: 1px solid var(--vl-border);
	min-width: 352px;
	padding: 15px 24px;
	border-radius: 8px;
	font-size: 13px;
}

#vl-seo-more .elementor-button:hover,
#vl-products .elementor-widget-button .elementor-button:hover {
	background: var(--vl-accent);
	border-color: var(--vl-accent);
	color: #fff;
}

/* Кнопки під секціями стоять по центру */
#vl-products .elementor-widget-button,
#vl-seo-more {
	align-self: center;
}

/* ── Сітка ───────────────────────────────────────────────────────────────
   Виміряно з макета (figma/general.png, експорт 4x): контент 1200px,
   поля по 120px, вертикальний ритм 16px. На 393px поля 16px. */
:root {
	/* Woodmart додає 15px внутрішніх полів, тож 1230 - 30 = 1200 чистого
	   контенту і рівно 120px від краю вікна, як у макеті. */
	--wd-container-w: 1230px !important;
}

/* Проміжок між секціями. flex_gap в Elementor діє на дітей контейнера,
   а між самими секціями відступу немає — задаємо margin. */
.elementor > .e-con {
	margin-bottom: 16px;
}

.elementor > .e-con:last-child {
	margin-bottom: 0;
}

/* Три горизонтальні смуги в макеті мають однакову висоту 92px */
#vl-brands,
#vl-instagram,
#vl-features {
	min-height: 92px;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}



/* ── Заголовки секцій, які є тільки на мобільному ────────────────────── */
#vl-mheading .elementor-heading-title {
	font-family: var(--vl-font-head);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

#vl-mh-link .elementor-button {
	background: var(--vl-surface-1);
	color: var(--vl-accent);
	padding: 10px 20px;
	font-size: 13px;
	border-radius: 10px;
}

#vl-mh-link .elementor-button:hover {
	background: var(--vl-accent-soft);
	color: var(--vl-accent-hover);
}

/* Elementor додає кожному віджету 20px нижнього відступу. Через це
   всі відстані всередині блоків збиваються — вимикаємо і керуємо
   проміжками через gap контейнерів, як задано в макеті. */
.elementor > .e-con .elementor-widget {
	margin-block-end: 0;
}

/* ── Elementor: віджети ──────────────────────────────────────────────────
   В Elementor увімкнена «оптимізована розмітка»: обгортка .elementor-widget-container
   прибрана, і сам віджет стає flex-контейнером. Для тексту це ламає верстку —
   абзаци вишиковуються в рядок замість колонки. */
.elementor-widget-text-editor {
	display: block;
}

.elementor-widget-heading .elementor-heading-title {
	color: var(--vl-ink);
	font-family: var(--vl-font-head);
}

.elementor-widget-heading .elementor-heading-title a {
	color: inherit;
}

/* ── Elementor: кнопки ───────────────────────────────────────────────────
   За замовчуванням беруть акцент з глобальної схеми Woodmart (зелений). */
.elementor-button {
	background-color: var(--vl-accent);
	color: #fff;
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 8px;
	padding: 14px 28px;
	white-space: nowrap;
}

.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--vl-accent-hover);
	color: #fff;
}

/* ── Секції головної ─────────────────────────────────────────────────── */

/* Банери в макеті зі скругленням 16px. Самі файли — прямокутні,
   щоб не тягнути прозорість заради кутів. */
/* Радіус кутів в оригіналах — 26px (виміряно по альфа-каналу).
   При 16px між скругленням картинки і обрізкою лишалась біла смужка. */
#vl-hero img,
#vl-bonus img,
#vl-about img,
#vl-cats img,
#vl-cats-m img {
	border-radius: 26px;
	display: block;
	width: 100%;
	height: auto;
}

#vl-cats .e-con-inner > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Стрічка брендів. У макеті фон — горизонтальний градієнт, а логотипи
   розтягнуті по всій ширині (перший на 36px від краю, останній біля правого).
   Селектор саме > .e-con: у цій розмітці .e-con-inner не існує. */
#vl-brands {
	background-image: linear-gradient(90deg, #E3EAE5 0%, #F4F2FD 50%, #E8E5FF 100%);
	background-color: transparent;
}

#vl-brands > .e-con {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-left: 36px;
	padding-right: 36px;
}

#vl-brands > .e-con > * {
	flex: 0 0 auto;
}

#vl-brands img {
	max-height: 30px;
	width: auto;
	object-fit: contain;
}

/* Instagram. Група icon+text+button центрована в смузі (виміряно: вміст
   займає x380…1059 при смузі 119…1321, центр збігається з центром смуги). */
#vl-instagram {
	background-image: linear-gradient(90deg, #F0E8EA 0%, #DDDDF3 100%);
	background-color: transparent;
}

#vl-instagram > .e-con {
	justify-content: center;
	align-items: center;
	width: 100%;
}

#vl-instagram > .e-con > * {
	flex: 0 0 auto;
	width: auto;
}

#vl-instagram img {
	width: 51px;
	height: 51px;
}

#vl-instagram .elementor-widget-heading .elementor-heading-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

#vl-instagram p {
	margin: 0;
	font-size: 13px;
	color: var(--vl-ink-muted);
}

#vl-ig-btn .elementor-button {
	background: #fff;
	color: var(--vl-ink);
	border: 1px solid var(--vl-border);
	min-width: 136px;
	padding: 14px 20px;
	font-size: 13px;
}

#vl-ig-btn .elementor-button:hover {
	background: var(--vl-accent);
	color: #fff;
	border-color: var(--vl-accent);
}

/* Рядок переваг: чотири рівні колонки по 298px (виміряно з макета),
   іконка 42px, 14px до тексту, 5px між заголовком і підписом. */
/* Чотири рівні колонки по 300px без проміжку; відступ 40px задається
   всередині кожної колонки — тоді перша іконка стає рівно на 159px,
   як у макеті. */
#vl-features > .e-con {
	width: 100%;
	padding: 0;
	gap: 0;
}

#vl-features > .e-con > * {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 40px;
}

#vl-features > .e-con > * > .e-con {
	gap: 14px;
}

#vl-features img {
	width: 42px;
	height: 40px;
	flex: 0 0 42px;
}

#vl-features .elementor-heading-title {
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

/* Проміжок задає gap контейнера (5px) — власний margin у абзацу
   додавався б зверху і давав подвійний відступ. */
#vl-features p {
	margin: 0;
	font-size: 12px;
	color: var(--vl-ink-muted);
}

/* SEO-блок: у макеті це компактний дрібний текст, а не повноцінна стаття */
#vl-seo .elementor-heading-title {
	font-size: 32px;
	margin-bottom: 16px;
}

#vl-seo-body {
	font-size: 13px;
	line-height: 1.7;
	color: var(--vl-ink-muted);
}

#vl-seo-body h3 {
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--vl-ink);
	margin: 14px 0 4px;
}

#vl-seo-body p {
	margin: 0 0 8px;
}

/* ── Картка товару ────────────────────────────────────────────────────── */
.product-grid-item {
	border: 1px solid var(--vl-border);
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 14px;
}

.product-grid-item .product-element-top {
	border-radius: 16px 16px 0 0;
}

/* У макеті під назвою рейтинг, а не назва категорії */
.product-grid-item .wd-product-cats {
	display: none;
}

/* ══ Адаптив. Медіа-запити стоять у кінці файлу: інакше пізніші
   десктопні правіла з такою ж специфічністю їх перебивають. ══ */

/* ══════════════════════════════════════════════════════════════════
   ПЕРЕВИЗНАЧЕННЯ. Все, що має гарантовано перебити тему і попередні
   правила, лежить тут — у CSS за однакової ваги виграє те, що нижче.
   Нові правила дописувати САМЕ СЮДИ, не на початок файлу.
   ══════════════════════════════════════════════════════════════════ */

/* ── Рамки: 2px #EAEAEA ──────────────────────────────────────────────────
   Виміряно на експорті 4x: рамка займає 8 пікселів = 2 CSS px,
   колір #EAEAEA. Раніше замір по одному пікселю ловив згладжений край
   і давав #EBEBEB товщиною 1px — звідси і «рамок не видно». */
:root {
	--vl-border: #EAEAEA;
	--wd-form-brd-color: #EAEAEA !important;
	--wd-form-brd-width: 2px !important;
}

.product-grid-item,
.sidebar-container .widget_product_categories,
.sidebar-container .widget_layered_nav,
.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-add-btn > a,
.wd-shop-tools .woocommerce-ordering select,
#vl-seo-more .elementor-button,
#vl-products .elementor-widget-button .elementor-button,
#vl-ig-btn .elementor-button,
#vl-seo-more-m .elementor-button,
#vl-mh-link .elementor-button {
	border-width: 2px !important;
	border-style: solid !important;
	border-color: #EAEAEA !important;
}

/* ── Наведення на кнопку картки ──────────────────────────────────────────
   Текст зливався з фоном: тема бере колір із власної змінної. */
.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a:hover,
.product-grid-item .wd-add-btn > a:hover {
	background-color: var(--vl-accent) !important;
	border-color: var(--vl-accent) !important;
	color: #FFFFFF !important;
	--btn-accented-color: #FFFFFF;
	--btn-accented-color-hover: #FFFFFF;
}

.product-grid-item .wd-add-btn > a:hover > span {
	color: #FFFFFF !important;
}

/* ── Сайдбар: відступи з макета ──────────────────────────────────────────
   Картка має внутрішній відступ 22, текст рядків стоїть на 39 від рамки,
   пігулка ALL PRODUCTS займає всю внутрішню ширину (270 з 314). */
.sidebar-container .widget_product_categories,
.sidebar-container .widget_layered_nav {
	padding: 22px !important;
}

.sidebar-container .widget_product_categories li,
.sidebar-container .widget_layered_nav li {
	padding-left: 17px !important;
	padding-right: 17px !important;
}

.sidebar-container li.vl-all-products.vl-current {
	margin-left: 0;
	margin-right: 0;
	border-radius: 10px;
	min-height: 37px;
}

/* ══════════════════════════════════════════════════════════════════════
   КАРТКА ТОВАРУ — зведення з макетами
   Заміри зняті з експортів 4x: figma/shop.png і figma/general.png.
   Один CSS-піксель = чотири пікселі файлу.

   Каталог  (shop.png):    картка 258 x 384, поля 20 (22 від зовнішнього
                           краю разом з рамкою), кнопка 214 x 47.
   Головна  (general.png): картка 285 x 317, чотири в ряд, проміжок 20,
                           кнопки ADD TO CART у макеті немає.

   Спільне: рамка 2px #EAEAEA, скруглення 24, фон #F9F9F9,
   назва Inter 700 14/17 uppercase #111111, зірки #FFCC00,
   стара ціна Inter 500 12 #111111 закреслена,
   ціна зі знижкою Inter 600 18 #7375D0, звичайна ціна — #111111.
   ────────────────────────────────────────────────────────────────────── */

/* ── Геометрія картки ───────────────────────────────────────────────────
   box-sizing з рамкою: зовнішня ширина 258, з них 2+20 з кожного боку,
   отже вміст рівно 214 — стільки ж, скільки кнопка в макеті. */
.product-grid-item {
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column;
	position: relative;
	padding: 20px !important;
	border: 2px solid #EAEAEA !important;
	border-radius: 24px !important;
	background-color: #F9F9F9 !important;
	overflow: visible !important;
}

/* Обгортки теми мають власні відступи — вони збивали всю вертикаль.
   Робимо їх наскрізними flex-колонками, щоб кнопка могла стати вниз. */
.product-grid-item .product-wrapper,
.product-grid-item .product-element-bottom.product-information {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 !important;
	margin: 0 !important;
	text-align: center;
}

/* ── Зображення ─────────────────────────────────────────────────────────
   У макеті картинка займає смугу фіксованої висоти, а не відсоток
   ширини: інакше квадратний файл 300x300 робить картку вищою за макет. */
.product-grid-item .product-element-top {
	display: block !important;
	flex: 0 0 auto;
	height: 156px;
	margin: 0 !important;
	padding: 0 !important;
}

.product-grid-item .product-image-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.product-grid-item .product-image-link img,
.product-grid-item .product-element-top img {
	width: auto !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	margin: 0 !important;
}

/* ── Бейдж і сердечко: 22 від зовнішнього краю картки ───────────────────
   Абсолютні координати рахуються від внутрішнього краю рамки,
   тому 20, а не 22. */
.product-grid-item .product-labels {
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	right: auto !important;
	margin: 0 !important;
	z-index: 3;
}

.product-grid-item .product-labels .product-label,
.product-grid-item .product-labels .product-label.onsale {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 78px;
	height: 27px;
	min-height: 27px;
	padding: 0 11px;
	border-radius: 5px;
	background-color: var(--vl-accent);
	color: #FFFFFF;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.product-grid-item .wrap-wishlist-button {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	margin: 0 !important;
	z-index: 3;
}

.product-grid-item .wd-wishlist-btn a,
.product-grid-item .wd-wishlist-btn a::before {
	color: var(--vl-accent);
	font-size: 24px;
}

/* ── Назва ──────────────────────────────────────────────────────────────
   Inter 14 Bold за дизайн-системою (figma/Frame 10.png).
   min-height у два рядки — це і є «вирівняна сітка»: у макеті назви
   двострокові, і коли трапляється однорядкова, низ картки не має
   з'їжджати вгору. */
.product-grid-item .wd-entities-title,
.product-grid-item h3.wd-entities-title,
.wd-product .wd-entities-title {
	flex: 0 0 auto;
	margin: 26px 0 0 !important;
	padding: 0 !important;
	min-height: 34px;
	font-family: var(--vl-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 17px !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: var(--vl-ink);
}

.product-grid-item .wd-entities-title a {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* ── Зірки і ціна ───────────────────────────────────────────────────────
   У DOM ціна йде перед зірками, у макеті зірки зверху — order: -1. */
.product-grid-item .product-rating-price {
	flex: 0 0 auto;
	display: block !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.product-grid-item .product-rating-price .wrapp-product-price,
.wd-product .product-rating-price .wrapp-product-price {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	transform: none !important;
}

/* Ширина рядка зірок у макеті 68px. Тема дає 14px + 2px розрядки = 75.6 */
.product-grid-item .star-rating {
	order: -1;
	display: block !important;
	width: auto !important;
	height: 20px;
	margin: 7px auto 0 !important;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.6px;
}

.product-grid-item .star-rating::before,
.product-grid-item .star-rating span::before {
	line-height: 20px;
	letter-spacing: 0.6px;
}

.product-grid-item .star-rating::before {
	color: #D9D9D9;
}

.product-grid-item .star-rating span::before {
	color: #FFCC00;
}

/* Ціна: два значення в один рядок з проміжком 10 */
.product-grid-item .price {
	display: flex !important;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-family: var(--vl-font-body) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
	color: var(--vl-ink) !important;
}

.product-grid-item .price del,
.product-grid-item .price del .woocommerce-Price-amount {
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 22px;
	color: var(--vl-ink) !important;
	opacity: 1 !important;
	text-decoration: line-through;
}

.product-grid-item .price ins,
.product-grid-item .price ins .woocommerce-Price-amount {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--vl-accent) !important;
	background: none;
	text-decoration: none;
}

/* ── Кнопка ADD TO CART ─────────────────────────────────────────────────
   Макет: 214 x 47, скруглення 10, підкладка #F4F4FC, рамка 2px #EAEAEA,
   текст Inter 600 14 uppercase #7375D0, іконка 18, проміжок 10.
   Ряд дій притискається до низу картки — це і є «Even product grid»:
   у сусідів з однорядковою назвою кнопка лишається на тій самій лінії. */
.product-grid-item .fade-in-block {
	flex: 0 0 auto;
	width: 100%;
	margin: auto 0 0 !important;
	padding: 20px 0 0 !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.product-grid-item .wd-bottom-actions {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.product-grid-item .wd-add-btn,
.product-grid-item .wd-add-btn-replace {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-bottom-actions .wd-add-btn > a,
.product-grid-item .wd-add-btn > a {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100% !important;
	height: 47px !important;
	min-height: 47px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 2px solid #EAEAEA !important;
	border-radius: 10px !important;
	background-color: #F4F4FC !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: var(--vl-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--vl-accent) !important;
	overflow: hidden;
}

/* Іконка кошика 18px. Псевдоелементи самої кнопки належать темі,
   тому іконку вішаємо на внутрішній span. */
.product-grid-item .wd-add-btn > a > span,
.product-grid-item .wd-add-btn > a:hover > span {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	color: inherit !important;
	/* Тема (woo-mod-add-btn-replace) при наведенні виштовхує напис
	   угору на 100%, а наш transition: none робить це миттєвим —
	   кнопка ставала порожньою фіолетовою плямою. */
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.product-grid-item .wd-add-btn > a > span::before {
	content: "";
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: center/18px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* Наведення: підкладка стає акцентною, текст та іконка — білі.
   Раніше білим ставав тільки <a>, а напис лишався фіолетовим
   і зникав разом зі зсувом теми. */
.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a:hover,
.product-grid-item .wd-bottom-actions .wd-add-btn > a:hover,
.product-grid-item .wd-add-btn > a:hover {
	background-color: var(--vl-accent) !important;
	border-color: var(--vl-accent) !important;
	color: #FFFFFF !important;
}

.product-grid-item .wd-add-btn > a:hover > span,
.product-grid-item .wd-add-btn > a:hover > span * {
	color: #FFFFFF !important;
}

.product-grid-item .wd-add-btn > a:hover > span::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* ── Сітка каталогу ─────────────────────────────────────────────────────
   Три колонки по 258, проміжок 36, між рядами 30 (не 28). */
.shop-content-area .products.wd-products,
.wd-products.grid-columns-3 {
	row-gap: 30px !important;
	column-gap: 36px !important;
}

.shop-content-area .product-grid-item {
	min-height: 384px;
}

/* ── Сітка товарів на головній ──────────────────────────────────────────
   У макеті general.png чотири картки по 285 з проміжком 20 в обидва боки,
   висота 317, кнопки ADD TO CART немає — тільки фото, назва, зірки, ціна.
   Сердечко лишається: воно позиціонується абсолютно і з потоку вийшло. */
#vl-products .products.wd-products {
	grid-template-columns: repeat(4, 1fr) !important;
	row-gap: 20px !important;
	column-gap: 20px !important;
}

#vl-products .product-grid-item {
	min-height: 317px;
}

#vl-products .product-grid-item .product-element-top {
	height: 172px;
}

#vl-products .product-grid-item .wd-add-btn,
#vl-products .product-grid-item .wd-add-btn-replace {
	display: none !important;
}

#vl-products .product-grid-item .fade-in-block {
	padding: 0 !important;
	min-height: 0;
	/* На головній кнопки немає — цей блок порожній (0 висоти), але успадковує
	   від .fade-in-block правило `margin: auto 0 0` (воно ж «Even product
	   grid» для каталогу: підпирає кнопку до низу картки). На порожньому
	   блоці auto забирає собі ВЕСЬ вільний простір картки як невидимий
	   відступ — саме він і є тим порожнім місцем під ціною. Кнопки тут
	   немає, підпирати нема чому. */
	margin-top: 0 !important;
}

/* Проміжок до кнопки VIEW ALL PRODUCTS — 30 за макетом */
#vl-products {
	gap: 30px !important;
}

/* ── Вертикальний ритм головної ─────────────────────────────────────────
   Перезаміряно на general.png: між усіма секціями 20, а не 16.
   Смуги брендів / Instagram / переваг — 90 заввишки. */
.elementor > .e-con {
	margin-bottom: 20px;
}

.elementor > .e-con:last-child {
	margin-bottom: 0;
}

#vl-brands,
#vl-instagram,
#vl-features {
	min-height: 90px;
}


/* ── Картка: три місця, де тема перебила заміри вище ─────────────────────
   1. .product-element-top тема тримає в position: relative, і бейдж
      чіплявся до нього, а не до картки — виходило 42 замість 22.
   2. Обгортки-flex мають власний gap 12, через нього кожен наступний
      блок з'їжджав на 12 вниз.
   3. Ряд дій має правило з трьома класами і !important
      (padding: 0 5px) — кнопка виходила 204 замість 214.
   Повторюємо ті самі селектори, щоб виграти за вагою. */

.product-grid-item .product-wrapper,
.product-grid-item .product-element-top,
.product-grid-item .product-image-link,
.product-grid-item .product-element-bottom,
.product-grid-item .product-element-bottom.product-information,
.product-grid-item .content-product-imagin,
.product-grid-item .fade-in-block,
.product-grid-item .wd-bottom-actions {
	position: static !important;
}

.product-grid-item .product-wrapper,
.product-grid-item .product-element-bottom.product-information {
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}

.wd-product.wd-hover-base .fade-in-block,
.wd-hover-with-fade .fade-in-block,
.wd-product:hover .fade-in-block,
.product-grid-item .fade-in-block {
	margin: auto 0 0 !important;
	padding: 20px 0 0 !important;
}

#vl-products .wd-product.wd-hover-base .fade-in-block,
#vl-products .wd-hover-with-fade .fade-in-block,
#vl-products .product-grid-item .fade-in-block {
	padding: 0 !important;
}

/* Рядок ціни: у del/ins власний line-height, через нього рядок
   виходив 24.6 замість 22 і кнопка з'їжджала вниз. */
.product-grid-item .price del,
.product-grid-item .price ins,
.product-grid-item .price bdi,
.product-grid-item .price .woocommerce-Price-amount,
.product-grid-item .price .woocommerce-Price-currencySymbol {
	line-height: 22px !important;
}


/* Рядок ціни: різні розміри del та ins розсувають рядок за baseline
   до 24.6 — фіксуємо висоту рядка в 22, як у макеті. */
.product-grid-item .price {
	height: 22px !important;
}


/* Віджет зображення: посилання навколо картинки — inline-block,
   і під ним лишається смуга 6.7px від рядка тексту. Через неї
   банер і плитки категорій були на 7px вищі за макет,
   і весь ритм сторінки з'їжджав униз. */
.elementor-widget-image {
	line-height: 0;
}


/* ── Сайдбар каталогу: один блок зі скругленням 24 ───────────────────────
   У макеті CATEGORIES і BRANDS — одна картка без роздільної лінії.
   Тема виводить їх двома віджетами, і на стику виходила подвійна рамка. */
.sidebar-container .widget_product_categories {
	border-radius: 24px 24px 0 0 !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.sidebar-container .widget_layered_nav {
	border-radius: 0 0 24px 24px !important;
	border-top: 0 !important;
}


/* Блок NEED HELP?: у макеті 314 x 74, скруглення 24 (як у картки). */
.sidebar-container .vl-help {
	padding: 20px 18px;
	border-radius: 24px;
}


/* ── Обрана категорія в сайдбарі ─────────────────────────────────────────
   Тема підсвічує поточну категорію по-своєму: фон вішає на посилання
   і додає йому padding-left: 12px, через що текст рядка з'їжджав праворуч,
   а пігулка була вужчою за ту, що в ALL PRODUCTS.
   У макеті обидва стани однакові: залита пігулка на всю ширину вмісту
   картки (270), текст на тій самій вертикалі, що й у решти рядків. */
.sidebar-container .widget_product_categories li.current-cat,
.sidebar-container .widget_product_categories li.current-cat-parent,
.sidebar-container li.vl-all-products.vl-current {
	background-color: var(--vl-accent) !important;
	border-radius: 10px;
	min-height: 37px;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	margin-left: 0;
	margin-right: 0;
}

.sidebar-container .widget_product_categories li.current-cat > a,
.sidebar-container .widget_product_categories li.current-cat > a:hover,
.sidebar-container .widget_product_categories li.current-cat-parent > a,
.sidebar-container li.vl-all-products.vl-current > a {
	padding-left: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: #FFFFFF !important;
	font-weight: 700;
}

.sidebar-container .widget_product_categories li.current-cat > .count,
.sidebar-container .widget_product_categories li.current-cat-parent > .count,
.sidebar-container li.vl-all-products.vl-current > .count {
	color: #FFFFFF !important;
}

/* Лічильники: у макеті це простий сірий текст без рамки й підкладки */
.sidebar-container .widget .count,
.sidebar-container .widget_product_categories .count,
.sidebar-container .widget_layered_nav .count {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Кнопка «назад» у заголовку категорії — не з макета, вона зсувала
   заголовок праворуч на 50px відносно решти сторінок. */
.page-title .wd-back-btn {
	display: none !important;
}


/* Висота рядків сайдбара з макета: категорії 33, бренди 37,
   пігулка обраного 37. Тема додає посиланню категорії 8px зверху
   і знизу — через них рядок виходив 49.6 замість 33. */
.sidebar-container .widget_product_categories li > a {
	padding: 0 !important;
}

.sidebar-container .widget_layered_nav li {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}

/* Під пігулкою ALL PRODUCTS у макеті 10px до першого рядка */
.sidebar-container li.vl-all-products.vl-current {
	margin-bottom: 10px;
}

.sidebar-container .widget_product_categories li.current-cat,
.sidebar-container .widget_product_categories li.current-cat-parent {
	margin-top: 5px;
	margin-bottom: 5px;
}


/* Тема дає лічильнику margin-top: 8px — через нього число стояло
   нижче за назву рядка, а сам рядок виходив на 7px вищий за макет. */
.sidebar-container .widget .count,
.sidebar-container .widget_product_categories .count,
.sidebar-container .widget_layered_nav .count {
	margin: 0 !important;
}


/* Назви рядків сайдбара в макеті чорні (#111111), а не сірі,
   лічильники — приглушені. */
.sidebar-container .widget_product_categories li > a,
.sidebar-container .widget_layered_nav li > a {
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--vl-ink) !important;
}

.sidebar-container li.vl-all-products.vl-current > a,
.sidebar-container .widget_product_categories li.current-cat > a,
.sidebar-container .widget_product_categories li.current-cat-parent > a {
	color: #FFFFFF !important;
	font-weight: 700;
}


/* ── Бренди: натуральний розмір логотипів ────────────────────────────────
   Заміри на general.png і mobile-general.png: у макеті кожен логотип
   стоїть у своєму натуральному розмірі — файли експортовані рівно в
   потрібному (108x33, 99x46, 87x35, 98x29, 74x33, 67x46, 122x46, 123x46,
   збіг до пікселя). Спільний `max-height: 30px` ламав це: у файлів різна
   кількість порожнього поля всередині, тож LOST MARY і HQD виходили
   помітно дрібнішими за сусідів.

   Розкладка — рівні колонки: центри логотипів у макеті стоять через
   145.6 на десктопі (8 колонок, поля 18) і через 82.6 на мобільному
   (4 колонки, поля 16). */
#vl-brands img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
}

#vl-brands {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#vl-brands > .e-con {
	display: grid !important;
	grid-template-columns: repeat(8, 1fr);
	justify-items: center;
	align-items: center;
	gap: 0 !important;
	width: 100%;
	flex: 1 1 auto;
	padding: 0 18px !important;
}

#vl-brands > .e-con > * {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 100%;
	justify-content: center;
}


/* Оптичне вирівнювання логотипів — поправка поверх макета.
   У самому макеті логотипи різного розміру (LOST MARY — широкий
   і низький напис, ELFBAR — з іконкою), тому три з них читались
   дрібнішими за сусідів. Це не спільна висота (вона й ламала ряд раніше),
   а поштучна ширина під однакову «вагу» у рядку.
   Порядок жорсткий: ELFBAR, VOZOL, SKE, ELFLIQ, RandM, HQD, VAPORESSO,
   LOST MARY. Якщо логотипи мінятимуться — числа треба переглянути. */
#vl-brands > .e-con > *:nth-child(1) img { width: 96px !important; }
#vl-brands > .e-con > *:nth-child(2) img { width: 105px !important; }
#vl-brands > .e-con > *:nth-child(3) img { width: 90px !important; }
#vl-brands > .e-con > *:nth-child(4) img { width: 112px !important; }
#vl-brands > .e-con > *:nth-child(5) img { width: 68px !important; }
#vl-brands > .e-con > *:nth-child(6) img { width: 84px !important; }
#vl-brands > .e-con > *:nth-child(7) img { width: 118px !important; }
#vl-brands > .e-con > *:nth-child(8) img { width: 140px !important; }


/* ══════════════════════════════════════════════════════════════════════
   СТОРІНКА ТОВАРУ — верхній блок. Макет figma/card.png (4x).
   Контент 1200 (120…1320): галерея 600, проміжок 40, підсумок 560.
   Крихти повнорядково над обома колонками (ink 128…140).
   Картка галереї 600×468, біла, скруглення 24, бейдж 78×27 на 40/40.
   ────────────────────────────────────────────────────────────────────── */

/* ── Дві колонки ────────────────────────────────────────────────────────
   Рядок теми має ширину 1230 і поля 15 у колонок:
     галерея = 15 + 600 + 25 = 640  -> 52.03%
     підсумок = 15 + 560 + 15 = 590 -> 47.97%
   проміжок між вмістом = 25 + 15 = 40. */
.single-product-page .product-images {
	flex: 0 0 52.03%;
	max-width: 52.03%;
	padding-left: 15px;
	padding-right: 25px;
}

.single-product-page .product-image-summary-inner > div:not(.product-images) {
	flex: 0 0 47.97%;
	max-width: 47.97%;
	padding-left: 15px;
	padding-right: 15px;
}

/* ── Крихти над колонками ───────────────────────────────────────────────
   Тема кладе їх усередину підсумку (breadcrumbs-location-summary), тому
   вони стояли в правій колонці. Виносимо з потоку на всю ширину. */
.single-product-page .product-image-summary-wrap {
	position: relative;
	padding-top: 56px;
}

.single-product-page .single-breadcrumbs-wrapper {
	position: absolute;
	top: 0;
	left: 15px;
	right: 15px;
	width: auto;
	margin: 0 !important;
}

.single-product-page .single-breadcrumbs {
	font-family: var(--vl-font-body);
	font-size: 13px;
	line-height: 22px;
	color: var(--vl-ink-muted);
}

/* ── Картка галереї ─────────────────────────────────────────────────────
   У макеті це біла картка 600×468 зі скругленням 24 на полотні #F9F9F9. */
.single-product-page .woocommerce-product-gallery {
	width: 100%;
	height: 468px;
	background-color: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}

.single-product-page .wd-gallery-images,
.single-product-page .wd-gallery-images .wd-carousel-inner,
.single-product-page .woocommerce-product-gallery__wrapper {
	width: 100% !important;
	height: 100% !important;
}

.single-product-page .woocommerce-product-gallery__image,
.single-product-page .woocommerce-product-gallery .wd-carousel-item {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.single-product-page .woocommerce-product-gallery__image img,
.single-product-page .woocommerce-product-gallery img {
	width: auto !important;
	max-width: calc(100% - 80px) !important;
	height: auto !important;
	max-height: calc(100% - 60px) !important;
	object-fit: contain;
	margin: 0 auto;
}

/* Бейдж знижки — 78×27 на 40 від краю картки, як у макеті */
.single-product-page .product-labels {
	top: 40px !important;
	left: 40px !important;
	right: auto !important;
	z-index: 3;
}

.single-product-page .product-labels .product-label,
.single-product-page .product-labels .product-label.onsale {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 78px;
	height: 27px;
	min-height: 27px;
	padding: 0 11px;
	border-radius: 5px;
	background-color: var(--vl-accent);
	color: #FFFFFF;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Дрібниці теми, яких у макеті немає */
.single-product-page .product-additional-galleries,
.single-product-page .wd-gallery-thumb,
.single-product-page .wd-nav-arrows,
.single-product-page .wd-product-brands,
.single-product-page .woocommerce-product-details__short-description,
.single-product-page .summary-inner > p.stock,
.single-product-page .wd-social-icons,
.single-product-page .product_meta,
.single-product-page .vapelab-from-price,
.single-product-page .wd-product-nav {
	display: none !important;
}

/* ── Підсумок ───────────────────────────────────────────────────────────
   Заголовок Manrope 700 32/44, під ним рядок «зірки + відгуки + SKU»,
   ціни, таблиця оптових цін, атрибут і кнопки. */
.single-product-page .summary-inner {
	position: relative;
}

.single-product-page .product_title.entry-title {
	font-family: var(--vl-font-head);
	font-size: 32px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: 0;
	color: var(--vl-ink);
	margin: 0 !important;
	padding-right: 50px;
}

/* Сердечко — у правий верхній кут підсумку, на рівні заголовка */
.single-product-page .summary-inner > .wd-wishlist-btn {
	position: absolute;
	top: 4px;
	right: 0;
	margin: 0 !important;
	z-index: 2;
}

.single-product-page .summary-inner > .wd-wishlist-btn > a {
	font-size: 0 !important;
	color: var(--vl-accent);
}

.single-product-page .summary-inner > .wd-wishlist-btn > a::before {
	font-size: 28px;
	color: var(--vl-accent);
	margin: 0;
}

/* Рядок «зірки + (N) + SKU» (розмітку додає плагін) */
.vl-single-meta {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 17px;
	font-family: var(--vl-font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--vl-ink-muted);
}

.vl-single-meta .star-rating {
	display: block;
	width: auto;
	height: 22px;
	margin: 0;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 0.9px;
}

.vl-single-meta .star-rating::before {
	color: #D9D9D9;
}

.vl-single-meta .star-rating span::before {
	color: #FFCC00;
}

.vl-single-meta .vl-review-count {
	margin-left: -1px;
}

.vl-single-meta .vl-meta-sep {
	width: 1px;
	height: 17px;
	background-color: #D9D9D9;
	margin: 0 10px;
}

.vl-single-meta .vl-single-sku span {
	color: var(--vl-ink-muted);
}

/* ── Ціни ───────────────────────────────────────────────────────────────
   У макеті стара ціна тут СІРА 18px (на відміну від картки товару,
   де вона чорна 12px), нова — акцентна 24px. */
.single-product-page .summary-inner > .price {
	display: flex !important;
	align-items: baseline;
	gap: 11px;
	margin: 18px 0 0 !important;
	font-family: var(--vl-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
	color: var(--vl-ink);
}

.single-product-page .summary-inner > .price del,
.single-product-page .summary-inner > .price del .woocommerce-Price-amount {
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--vl-ink-muted) !important;
	opacity: 1 !important;
	text-decoration: line-through;
}

.single-product-page .summary-inner > .price ins,
.single-product-page .summary-inner > .price ins .woocommerce-Price-amount {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--vl-accent) !important;
	background: none;
	text-decoration: none;
}

/* ── Таблиця оптових цін ────────────────────────────────────────────────
   Дві колонки: QUANTITY на 0, PRICE PER PIECE на 258.5 від лівого краю
   підсумку. Крок рядків 27. */
.vapelab-tiers {
	width: 100%;
	border-collapse: collapse;
	margin: 38px 0 0 !important;
	font-family: var(--vl-font-body);
	table-layout: fixed;
}

.vapelab-tiers th {
	text-align: left;
	padding: 0 0 25px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vl-ink);
	border: 0;
}

.vapelab-tiers th:first-child,
.vapelab-tiers td:first-child {
	width: 258px;
}

.vapelab-tiers td {
	padding: 0 0 13px;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	border: 0;
	background: none;
}

.vapelab-tiers td:first-child {
	color: var(--vl-ink-muted);
}

.vapelab-tiers td:nth-child(2) {
	color: var(--vl-ink);
}

.vapelab-tiers tr:last-child td {
	padding-bottom: 0;
}

/* ── Атрибут (TASTE) ────────────────────────────────────────────────────
   Підпис 18 Bold uppercase, селект 560×47 з рамкою 2px. */
.single-product-page .variations th.label,
.single-product-page .variations label {
	font-family: var(--vl-font-body);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
	padding: 0 0 10px;
}

.single-product-page .variations,
.single-product-page .variations tbody,
.single-product-page .variations tr,
.single-product-page .variations td,
.single-product-page .variations th {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	border: 0;
	background: none;
}

.single-product-page .variations select,
.single-product-page .summary-inner select {
	box-sizing: border-box;
	width: 100%;
	height: 47px;
	padding: 0 18px;
	border: 2px solid var(--vl-border);
	border-radius: 12px;
	background-color: transparent;
	font-family: var(--vl-font-body);
	font-size: 14px;
	color: var(--vl-ink-muted);
}

/* ── Кнопки: кількість 95 + ADD TO CART 214 + BUY NOW 214, проміжки 18 ── */
.single-product-page form.cart {
	display: flex !important;
	align-items: center;
	gap: 18px;
	margin: 20px 0 0 !important;
	flex-wrap: nowrap;
}

.single-product-page form.cart .quantity {
	flex: 0 0 95px;
	box-sizing: border-box;
	width: 95px;
	height: 47px;
	margin: 0 !important;
	border: 2px solid var(--vl-border);
	border-radius: 12px;
	background-color: transparent;
	overflow: hidden;
}

.single-product-page form.cart .quantity input.qty {
	height: 43px;
	border: 0;
	background: none;
	font-family: var(--vl-font-body);
	font-size: 15px;
	color: var(--vl-ink);
}

.single-product-page form.cart .quantity .minus,
.single-product-page form.cart .quantity .plus {
	border: 0;
	background: none;
	color: var(--vl-ink-muted);
}

.single-product-page form.cart .single_add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	flex: 0 0 214px;
	width: 214px;
	height: 47px;
	min-height: 47px;
	padding: 0 !important;
	margin: 0 !important;
	border: 2px solid var(--vl-border) !important;
	border-radius: 12px !important;
	background-color: #F4F4FC !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: var(--vl-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--vl-accent) !important;
}

.single-product-page form.cart .single_add_to_cart_button::before {
	content: "";
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: center/18px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

.single-product-page form.cart .single_add_to_cart_button:hover {
	background-color: var(--vl-accent) !important;
	border-color: var(--vl-accent) !important;
	color: #FFFFFF !important;
}

.single-product-page form.cart .single_add_to_cart_button:hover::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* BUY NOW — акцентна кнопка зі стрілкою праворуч */
.vl-buy-now {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	box-sizing: border-box;
	flex: 0 0 214px;
	width: 214px;
	height: 47px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background-color: var(--vl-accent);
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
}

.vl-buy-now:hover {
	background-color: #5F61C4;
}

.vl-buy-now-arrow {
	display: inline-block;
	width: 34px;
	height: 12px;
	background: center/34px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6h32M26 1l6 5-6 5'/%3E%3C/svg%3E");
}

/* Плитки переваг — у макеті лише на мобільній */
.vl-single-features {
	display: none;
}


/* Доведення верхнього блоку товару */

/* Крихти мають чіплятись до рядка, а не до підсумку —
   інакше вони лягали поверх заголовка в правій колонці. */
.single-product-page .summary-inner {
	position: static;
}

.single-product-page .summary-inner > .wd-wishlist-btn {
	right: 15px;
}

.single-product-page .product_title.entry-title {
	text-transform: uppercase;
}

/* Стрілки «попередній / наступний товар» і сітка — не з макета */
.single-product-page [class*="wd-product-nav"],
.single-product-page .wd-products-nav {
	display: none !important;
}


/* Колонка підсумку від bootstrap має position: relative — через неї
   крихти чіплялись до колонки і лягали поверх заголовка.
   Обидва абсолютні елементи чіпляємо до рядка. */
.single-product-page .product-image-summary-inner > div:not(.product-images) {
	position: static;
}

.single-product-page .summary-inner > .wd-wishlist-btn {
	top: 60px;
	right: 15px;
}


/* Ще одна позиціонована обгортка теми між рядком і колонками —
   крихти чіплялись до неї і стояли на рівні картки, а не над нею. */
.single-product-page .product-image-summary {
	position: static;
}

/* Зображення вписуємо в картку явними числами: відсотковий
   max-height рахується від <a>, а той сам тягнеться за картинкою. */
.single-product-page .woocommerce-product-gallery__image,
.single-product-page .woocommerce-product-gallery__image > a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-product-page .woocommerce-product-gallery img,
.single-product-page .woocommerce-product-gallery__image img {
	width: auto !important;
	height: auto !important;
	max-width: 520px !important;
	max-height: 408px !important;
	object-fit: contain;
}


/* ══════════════════════════════════════════════════════════════════════
   ПРАВКИ ПО ЗАУВАЖЕННЯХ
   ══════════════════════════════════════════════════════════════════════ */

/* ── Рядок «from … / pc in bulk» від плагіна оптових цін ─────────────────
   У макеті його немає ні в картці каталогу, ні на сторінці товару. */
.vapelab-from-price {
	display: none !important;
}

/* ── Сайдбар: лічильник при наведенні ───────────────────────────────────
   Тема робить його білим на заливці primary. Заливку ми зняли, тож
   лишався білий текст на прозорому — цифра просто зникала. */
.sidebar-container .widget_product_categories .product-categories li a:hover + .count,
.sidebar-container .widget_product_categories .product-categories li a:focus + .count,
.sidebar-container .widget_layered_nav li a:hover + .count,
.sidebar-container .widget li:hover > .count {
	color: var(--vl-ink-muted) !important;
	background: none !important;
	border-color: transparent !important;
}

/* Обраний рядок лишається білим */
.sidebar-container li.vl-all-products.vl-current > .count,
.sidebar-container li.vl-all-products.vl-current:hover > .count,
.sidebar-container .widget_product_categories li.current-cat > .count,
.sidebar-container .widget_product_categories li.current-cat:hover > .count,
.sidebar-container .widget_product_categories li.current-cat a:hover + .count {
	color: #FFFFFF !important;
}

/* ── Сайдбар: картка цілісна, коли блоку BRANDS немає ───────────────────
   На категорії без товарів WooCommerce не виводить фільтр за брендом,
   і картка CATEGORIES лишалась зі зрізаним низом (ми зшивали її з
   сусідньою). Зшиваємо лише тоді, коли сусідка справді є. */
.sidebar-container .widget_product_categories {
	border-radius: 24px !important;
	border-bottom: 2px solid var(--vl-border) !important;
	padding-bottom: 20px !important;
}

.sidebar-container .widget_product_categories:has(+ .widget_layered_nav) {
	border-radius: 24px 24px 0 0 !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ── Сайдбар: згортання блоків по кліку на заголовок ─────────────────────
   Шеврон у макеті означає, що блок згортається. Обробник додає плагін. */
.sidebar-container .widget_product_categories .widget-title,
.sidebar-container .widget_layered_nav .widget-title {
	cursor: pointer;
	user-select: none;
}

.sidebar-container .widget.vl-collapsed > *:not(.widget-title) {
	display: none !important;
}

.sidebar-container .widget.vl-collapsed .widget-title {
	margin-bottom: 0 !important;
}

.sidebar-container .widget_product_categories .widget-title::after,
.sidebar-container .widget_layered_nav .widget-title::after {
	transition: transform 0.2s ease;
}

.sidebar-container .widget.vl-collapsed .widget-title::after {
	transform: rotate(-45deg);
	margin-top: -3px;
}

/* ── Картки в каруселі «Similar products» ────────────────────────────────
   Тема використовує тут інший варіант наведення: кнопки лежать у
   .wd-buttons.wd-pos-r-t, абсолютно притиснутому у правий верхній кут.
   Через це під ціною лишалась порожнеча, а кнопка при наведенні
   вискакувала в кут картки. Повертаємо її в потік, як у каталозі. */
.product-grid-item .wd-buttons,
.product-grid-item .wd-buttons.wd-pos-r-t {
	position: static !important;
	display: block !important;
	width: 100% !important;
	inset: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.product-grid-item .wd-buttons .wd-add-btn,
.product-grid-item .wd-add-btn.wd-style-icon,
.product-grid-item .wd-add-btn.wd-action-btn {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
}

.product-grid-item .wd-buttons .wrap-wishlist-button {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
}

/* Кнопка «CHOOSE OPTIONS» у варіативних товарів — зі стрілкою, як у макеті */
.product-grid-item .wd-add-btn > a.product_type_variable > span::before {
	content: none;
}

.product-grid-item .wd-add-btn > a.product_type_variable > span::after {
	content: "";
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	height: 12px;
	margin-left: 2px;
	background: center/18px no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%237375D0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5'/%3E%3C/svg%3E");
}

.product-grid-item .wd-add-btn > a.product_type_variable:hover > span::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5'/%3E%3C/svg%3E");
}

/* ── Сторінка товару: варіативний товар ──────────────────────────────────
   Форма варіацій — таблиця атрибутів і окремий блок кнопок. У флексі
   вони ставали двома колонками; у макеті атрибут зверху на всю ширину,
   кнопки під ним. */
.single-product-page form.variations_form.cart {
	display: block !important;
}

.single-product-page table.variations {
	width: 100%;
	margin: 30px 0 0 !important;
}

.single-product-page .variations th.label label {
	font-family: var(--vl-font-body);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
}

/* Тема дописує двокрапку після підпису — у макеті її немає */
.single-product-page .variations th.label label::after,
.single-product-page .variations .label::after {
	content: none !important;
}

.single-product-page .wd-reset-var {
	display: none !important;
}

.single-product-page .single_variation_wrap {
	width: 100%;
}

.single-product-page .woocommerce-variation-add-to-cart {
	display: flex !important;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
	margin-top: 20px;
}

.single-product-page .woocommerce-variation-price .price {
	display: none;
}

/* Іконка кошика в кнопці товару — прибрана: тема тримає власний
   абсолютний псевдоелемент, і наша іконка сідала в лівий верхній кут. */
.single-product-page form.cart .single_add_to_cart_button::before,
.single-product-page form.cart .single_add_to_cart_button::after {
	content: none !important;
	display: none !important;
}

/* ══ Кнопки решти магазину в одному стилі з макетом ══════════════════════
   Первинна: заливка #7375D0, білий текст, скруглення 12, висота 47.
   Вторинна: підкладка #F4F4FC, рамка 2px #EAEAEA, акцентний текст.
   Правила навмисно перелічують конкретні місця, щоб не зачепити
   кнопки карток товару й сторінки товару, які вже зведені з макетом. */
.widget_shopping_cart .buttons .button,
.cart-widget-side .buttons .button,
.woocommerce-cart .actions .button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce form button[type="submit"],
.woocommerce-cart .coupon .button,
.wd-empty-page .btn,
.return-to-shop .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 47px !important;
	height: auto;
	padding: 0 28px !important;
	border: 2px solid var(--vl-accent) !important;
	border-radius: 12px !important;
	background-color: var(--vl-accent) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: var(--vl-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: #FFFFFF !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.widget_shopping_cart .buttons .button:hover,
.cart-widget-side .buttons .button:hover,
.woocommerce-cart .actions .button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce form button[type="submit"]:hover,
.woocommerce-cart .coupon .button:hover,
.return-to-shop .button:hover {
	background-color: #5F61C4 !important;
	border-color: #5F61C4 !important;
	color: #FFFFFF !important;
}

/* Вторинні: «View cart» у кошику збоку, «Update cart» і «Apply coupon» */
.widget_shopping_cart .buttons .btn-cart,
.cart-widget-side .buttons .btn-cart,
.woocommerce-cart .actions .button[name="update_cart"],
.woocommerce-cart .coupon .button {
	background-color: #F4F4FC !important;
	border-color: var(--vl-border) !important;
	color: var(--vl-accent) !important;
}

.widget_shopping_cart .buttons .btn-cart:hover,
.cart-widget-side .buttons .btn-cart:hover,
.woocommerce-cart .actions .button[name="update_cart"]:hover,
.woocommerce-cart .coupon .button:hover {
	background-color: var(--vl-accent) !important;
	border-color: var(--vl-accent) !important;
	color: #FFFFFF !important;
}

/* Кнопки на всю ширину там, де вони такі в теми */
.widget_shopping_cart .buttons .button,
.cart-widget-side .buttons .button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order {
	width: 100%;
}

.widget_shopping_cart .buttons,
.cart-widget-side .buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Поля вводу на сторінках кошика, оформлення й акаунту */
.woocommerce-checkout .woocommerce input.input-text,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .select2-selection,
.woocommerce-account .woocommerce input.input-text,
.woocommerce-cart .coupon input.input-text {
	box-sizing: border-box;
	min-height: 47px;
	padding: 0 18px;
	border: 2px solid var(--vl-border) !important;
	border-radius: 12px !important;
	background-color: #FFFFFF;
	font-family: var(--vl-font-body);
	font-size: 14px;
	color: var(--vl-ink);
}

.woocommerce-checkout .woocommerce textarea {
	padding-top: 14px;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	border: 2px solid var(--vl-border);
	border-radius: 24px;
	padding: 30px;
	background-color: #FFFFFF;
}


/* Селект атрибута — на всю ширину підсумку (560), як у макеті.
   Тема обмежує його власною шириною. */
.single-product-page .variations td.value select,
.single-product-page .variations select {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	text-transform: uppercase;
}

.single-product-page table.variations {
	margin-top: 20px !important;
}


/* ── Блок SIMILAR PRODUCTS на сторінці товару ────────────────
   Заміряно на card.png: заголовок Manrope 700 32 uppercase,
   чотири картки по **270** з проміжком **40**, висота 347. */
.single-product-page .related-products .wd-el-title,
.single-product-page .related-products .slider-title {
	font-family: var(--vl-font-head);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--vl-ink);
	margin: 0 0 46px !important;
}

.single-product-page .related-products .wd-carousel {
	margin-left: -20px;
	margin-right: -20px;
}

.single-product-page .related-products .wd-carousel-item {
	padding-left: 20px;
	padding-right: 20px;
}

.single-product-page .related-products .product-grid-item {
	min-height: 347px;
}


/* ── Картка товару: фіксована висота назви — і є вирівняна сітка ─────────
   Спроба №2. У проміжному варіанті назва не мала своєї висоти, а весь
   текстовий блок притискався до низу картки margin-top:auto. Це
   вирівнювало низ (кнопку) між картками ряду, але верх «плавав»:
   висота самого текстового блока в однорядкових назв («Elfbar BC30000
   20mg» — 17px) менша, ніж у дворядкових («Maskking Extra 100000
   Puffs 10mg» — 34px), тож margin-top:auto штовхав короткі картки
   на 17px нижче за довгі — саме той нерівний відступ між фото і
   назвою, який видно на скріншоті.

   Правильно — навпаки: назва завжди займає висоту двох рядків
   (min-height: 34px, задано вище), а textual-блок ІДЕ ОДРАЗУ ПІСЛЯ
   фото, без жодного auto-відступу. Порожній рядок короткої назви
   лишається В МЕЖАХ її власної коробки (між текстом і зірками) —
   там він непомітний, і головне — однаковий у кожній картці, а не
   залежний від довжини імені товару. Оскільки зображення (172),
   назва (34), рейтинг-ціна (57) і кнопка (47/0) в усіх карток мають
   фіксовану висоту, цього досить, щоб і низ картки збігався сам —
   auto-відступ був зайвим. */
.product-grid-item .wd-entities-title,
.product-grid-item h3.wd-entities-title,
.wd-product .wd-entities-title {
	min-height: 34px !important;
}

.product-grid-item .product-element-bottom.product-information {
	margin-top: 0 !important;
}


/* ── Сторінка списку бажань ──────────────────────────────────────────────
   Тема додає картці окремий рядок `Remove` + чекбокс масового видалення
   і кладе його ПЕРШИМ у потоці, у ту саму точку, куди ми абсолютно
   ставимо бейдж знижки й сердечко. Через це напис «✕ Remove» лягав
   поверх бейджа, а чекбокс — поверх сердечка.

   Макета для цієї сторінки немає, тому робимо за логікою решти сайту:
   бейдж лишається зліва зверху, а видалення стає хрестиком у правому
   верхньому куті — там, де на інших сторінках сердечко. Саме сердечко
   тут зайве: товар уже в списку.
   Чекбокс масового видалення прибраний — під нього немає ані дизайну,
   ані окремої кнопки «видалити обране». Якщо знадобиться, вимикається
   в Theme Settings → Shop → Wishlist → Bulk action. */
.product-grid-item .wd-wishlist-product-actions,
.wd-product .wd-wishlist-product-actions {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	z-index: 4;
}

.wd-wishlist-product-checkbox {
	display: none !important;
}

/* Сердечко на цій сторінці не потрібне */
.product-grid-item:has(.wd-wishlist-product-actions) .wrap-wishlist-button,
.wd-product:has(.wd-wishlist-product-actions) .wrap-wishlist-button {
	display: none !important;
}

/* Саме видалення — акуратний хрестик 16×16 замість напису */
.wd-wishlist-product-remove {
	display: block !important;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	padding: 0 !important;
}

.wd-wishlist-product-remove > a.wd-wishlist-remove {
	display: block !important;
	position: relative;
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 0 !important;
	color: transparent;
}

.wd-wishlist-product-remove > a.wd-wishlist-remove::before,
.wd-wishlist-product-remove > a.wd-wishlist-remove::after {
	content: "" !important;
	position: absolute;
	top: 7px;
	left: -1px;
	width: 18px;
	height: 2px;
	margin: 0;
	border-radius: 1px;
	background-color: var(--vl-ink-muted);
	opacity: 1 !important;
	transition: background-color 0.2s ease;
}

.wd-wishlist-product-remove > a.wd-wishlist-remove::before {
	transform: rotate(45deg);
}

.wd-wishlist-product-remove > a.wd-wishlist-remove::after {
	transform: rotate(-45deg);
}

.wd-wishlist-product-remove > a.wd-wishlist-remove:hover::before,
.wd-wishlist-product-remove > a.wd-wishlist-remove:hover::after {
	background-color: var(--vl-accent);
}

/* ══ Адаптив — завжди найнижче ══ */

@media (min-width: 769px) {
	.vl-footer {
		min-height: 388px;
	}
}

@media (max-width: 768px) {
	/* Заголовок налазив на рядок з крихтами */
	.page-title.page-title-default {
		padding-top: 18px;
		padding-bottom: 12px;
		margin-bottom: 0;
	}

	.page-title.page-title-default .container {
		display: block;
	}

	.page-title .entry-title {
		font-size: 28px;
		line-height: 1.2;
		display: block;
	}

	/* Тема дає .shop-loop-head margin-top: -20px — через це рядок
	   з крихтами налазив на заголовок. */
	/* Блокова розкладка замість flex: у flex-колонці другий рядок
	   розтягувався до 258px попри вміст у 48px. */
	.shop-loop-head {
		display: block;
		margin-top: 12px !important;
		margin-bottom: 18px;
	}

	.shop-loop-head > .wd-shop-tools:first-child {
		margin-bottom: 12px !important;
	}

	/* Тема задає цим рядкам власні відступи й межу — прибираємо,
	   інакше між крихтами і сіткою лишається порожнеча ~200px
	   і зайва горизонтальна лінія, якої немає в макеті. */
	.shop-loop-head > .wd-shop-tools,
	.shop-loop-head > .wd-shop-tools:last-child {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		align-items: center;
		justify-content: space-between;
	}

	.shop-loop-head .woocommerce-ordering {
		height: auto;
		margin: 0;
	}

	/* Рядок, у якому лишились самі приховані елементи, не має займати місце */
	.shop-loop-head > .wd-shop-tools:first-child {
		min-height: 0;
		margin: 0;
	}

	/* «Showing all 10 results» у макеті немає */
	.wd-shop-tools p.woocommerce-result-count,
	p.woocommerce-result-count {
		display: none !important;
	}

	/* Кнопка відкриття фільтрів — у макеті це залита акцентом кнопка
	   з іконкою повзунків, а не текстове посилання. */
	.wd-show-sidebar-btn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 10px;
		flex: 0 0 48%;
		background-color: var(--vl-accent);
		color: #fff;
		border-radius: 10px;
		padding: 13px 16px;
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.wd-show-sidebar-btn::before {
		content: "";
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
		background: center/18px no-repeat;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h13M18 7h3M3 17h5M10 17h11'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
	}

	/* Напис ставимо на саму кнопку, а посилання розтягуємо поверх —
	   так вигляд не залежить від стилів теми для <a>. */
	.wd-show-sidebar-btn {
		position: relative;
	}

	.wd-show-sidebar-btn > a {
		position: absolute;
		inset: 0;
		font-size: 0;
		color: transparent;
		z-index: 2;
	}

	.wd-show-sidebar-btn > a::before,
	.wd-show-sidebar-btn > a::after {
		content: none;
	}

	.wd-show-sidebar-btn::after {
		content: "FILTER";
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: #fff;
	}

	/* Селект: тема згортає його в іконку — повертаємо текст */
	.woocommerce-ordering.wd-ordering-mb-icon {
		flex: 0 0 48%;
	}

	/* Тема робить селект прозорим і замінює його іконкою —
	   повертаємо звичайний вигляд із текстом. */
	.woocommerce-ordering.wd-ordering-mb-icon select.orderby {
		display: block;
		width: 100%;
		max-width: 100%;
		opacity: 1;
		visibility: visible;
		position: static;
		height: 48px;
		border: 1px solid var(--vl-border);
		border-radius: 10px;
		padding: 0 14px;
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 500;
		/* тема робить текст селекта прозорим — повертаємо колір */
		color: var(--vl-ink) !important;
		-webkit-text-fill-color: var(--vl-ink);
		background-color: transparent;
		-webkit-appearance: auto;
		appearance: auto;
	}

	.woocommerce-ordering.wd-ordering-mb-icon::before,
	.woocommerce-ordering.wd-ordering-mb-icon::after {
		content: none;
	}

	/* Бейдж переносився у два рядки */
	.product-labels .product-label {
		white-space: nowrap;
		font-size: 11px;
		padding: 4px 8px;
	}
}

@media (max-width: 1024px) {
	.sidebar-container.col-lg-3,
	.site-content.shop-content-area {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 768px) {
	.products.wd-products {
		column-gap: 14px;
		row-gap: 14px;
	}
}

@media (max-width: 768px) {
	/* На мобільному — логотип, далі колонки акордеонами */
	.vl-footer-inner {
		flex-direction: column;
		padding: 34px 16px 30px;
		gap: 0;
	}

	.vl-footer-logo-block,
	.vl-footer-about,
	.vl-footer-col,
	.vl-footer-col:nth-of-type(1),
	.vl-footer-col:nth-of-type(2),
	.vl-footer-col:nth-of-type(3) {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 0;
	}

	/* Порядок у макеті: логотип, акордеони, потім слоган і копірайт */
	.vl-footer-logo-block { order: 0; }
	.vl-footer-col        { order: 1; }
	.vl-footer-about      { order: 2; padding-top: 22px; }

	.vl-footer-col {
		border-bottom: 1px solid rgba(17, 17, 17, 0.12);
	}

	/* Кнопка за замовчуванням центрує вміст незалежно від text-align —
	   тому робимо її блоковою. */
	.vl-footer-title {
		display: block;
		width: 100%;
		margin: 0;
		padding: 16px 0;
		cursor: pointer;
		position: relative;
		text-align: left;
	}

	.vl-footer-title::after {
		content: "+";
		position: absolute;
		right: 2px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		font-weight: 400;
	}

	.vl-footer-title[aria-expanded="true"]::after {
		content: "−";
	}

	.vl-footer-links {
		display: none;
		padding-bottom: 14px;
	}

	.vl-footer-title[aria-expanded="true"] + .vl-footer-links {
		display: block;
	}

	.vl-foot-logo {
		width: 168px;
		margin-bottom: 20px;
	}
}

@media (max-width: 1024px) {
	.whb-mobile-right .wd-tools-text,
	.wd-header-mobile-nav .wd-tools-text {
		display: none;
	}

	.whb-column .wd-tools-element {
		margin-left: 8px;
		margin-right: 8px;
	}

	/* У мобільному макеті шапка без логотипа: бургер ліворуч, чотири
	   іконки праворуч. Логотип займав 160px і виштовхував кошик за екран. */
	.whb-mobile-center {
		display: none;
	}

	.whb-mobile-right {
		margin-left: auto;
	}
}

@media (max-width: 768px) {
	.container,
	.elementor-section-boxed > .elementor-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 768px) {
	#vl-brands .e-con-inner {
		justify-content: center;
		gap: 18px;
	}

	#vl-features .e-con-inner > * {
		flex: 1 1 45%;
	}

	/* Категорії: сітка 2x2 з чотирьох карток */
	#vl-cats-m > .e-con {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px;
	}

	#vl-cats-m > .e-con > * {
		flex: 0 0 calc(50% - 7px);
	}

	/* Переваги: чотири окремі картки, іконка зверху по центру */
	#vl-features-m > .e-con {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px;
	}

	#vl-features-m > .e-con > * {
		flex: 0 0 calc(50% - 7px);
		align-items: center;
		text-align: center;
	}

	#vl-features-m img {
		width: 30px;
		height: 30px;
	}

	#vl-features-m .elementor-heading-title {
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		margin: 0;
	}

	#vl-features-m p {
		margin: 0;
		font-size: 13px;
		color: var(--vl-ink-muted);
	}

	/* Бренди на мобільному — чотири в ряд, два ряди */
	#vl-brands .e-con-inner,
	#vl-brands > .e-con {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 14px 10px;
	}

	#vl-brands .e-con-inner > *,
	#vl-brands > .e-con > * {
		flex: 0 0 calc(25% - 8px);
		display: flex;
		justify-content: center;
	}

	#vl-brands img {
		max-height: 22px;
	}

	/* Короткий SEO-блок із кнопкою READ MORE */
	#vl-seo-short {
		font-size: 15px;
		line-height: 1.55;
		color: var(--vl-ink-muted);
	}

	#vl-seo-more-m .elementor-button {
		background: transparent;
		color: var(--vl-ink);
		border: 1px solid var(--vl-border);
		border-radius: 10px;
		padding: 12px 18px;
	}

	/* Ритм мобільної: 14px між спорідненими блоками,
	   ~30px перед заголовком секції. */
	.elementor > .e-con {
		margin-bottom: 14px;
	}

	#vl-mheading {
		margin-top: 16px;
	}
}

/* Перед SEO-блоком у макеті 30, а не 20 (general.png: 2804 → 2834). */
@media (min-width: 769px) {
	#vl-about {
		margin-bottom: 30px;
	}
}

/* ── Шапка каталогу: вертикаль з макета (figma/shop.png) ─────────────────
   SHOP  135.5 … 159 (32px), крихти 182 … 194 на лівому краю контенту,
   селект сортування 149 … 196, сайдбар і сітка починаються на 226.

   Тема кладе рядок «крихти + сортування» ВСЕРЕДИНУ правої колонки.
   Через це на сторінці категорії, де вище стоїть ще й опис, сайдбар і
   сітка розходились по вертикалі, а крихти налазили на картку фільтрів.
   Тому рядок виноситься з потоку і лягає над обома колонками на всю
   ширину контенту — тоді сайдбар і товари починаються з однієї лінії
   на будь-якій сторінці каталогу, без підбору чисел під кожну. */
@media (min-width: 1025px) {
	.page-title.page-title-default {
		padding-top: 42px !important;
	}

	body.woodmart-archive-shop:not(.single-product) .content-layout-wrapper {
		position: relative;
		margin-top: -16px;
		/* 47 висота рядка + 30 до сітки */
		padding-top: 77px;
	}

	/* Права колонка в теми position: relative — інакше рядок чіплявся
	   до неї і лишався у своїх 846px замість повної ширини контенту. */
	body.woodmart-archive-shop:not(.single-product) .shop-content-area {
		position: static !important;
	}

	body.woodmart-archive-shop:not(.single-product) .shop-loop-head {
		position: absolute;
		top: 0;
		left: 15px;
		right: 15px;
		width: auto;
		margin: 0 !important;
		align-items: flex-end;
	}

	/* Крихти в макеті стоять біля низу рядка сортування (ink 182 … 194),
	   а тема центрує їх у смузі 47px. */
	body.woodmart-archive-shop:not(.single-product) .shop-loop-head > .wd-shop-tools:first-child {
		align-items: flex-end;
		margin-left: 0 !important;
	}

	body.woodmart-archive-shop:not(.single-product) .sidebar-container.area-sidebar-shop {
		padding-top: 0;
	}

	/* Опис категорії — під товарами. Якщо лишити його зверху правої
	   колонки, сітка з'їжджає вниз відносно сайдбара рівно на його
	   висоту, а вона залежить від довжини тексту і наперед невідома. */
	body.woodmart-archive-shop:not(.single-product) .shop-content-area {
		display: flex;
		flex-direction: column;
	}

	body.woodmart-archive-shop:not(.single-product) .shop-content-area > .term-description {
		order: 10;
		margin-top: 30px;
		font-family: var(--vl-font-body);
		font-size: 15px;
		line-height: 1.6;
		color: var(--vl-ink-muted);
	}
}

/* ── Картка товару на мобільному ─────────────────────────────────────────
   Заміри з figma/mobile-shop.png (експорт 4x, 1572 = 393 CSS):
   дві колонки по 172, проміжок 18, ряди через 20, картка 354 заввишки,
   поля 12, кнопка 144 x 45, бейдж 44 x 24, ціна зі знижкою 14 (не 18). */
@media (max-width: 768px) {
	.products.wd-products {
		column-gap: 18px !important;
		row-gap: 20px !important;
	}

	.product-grid-item {
		padding: 12px !important;
		min-height: 354px;
	}

	.shop-content-area .product-grid-item,
	#vl-products .product-grid-item {
		min-height: 354px;
	}

	.product-grid-item .product-element-top,
	#vl-products .product-grid-item .product-element-top {
		height: 166px;
	}

	.product-grid-item .product-labels {
		top: 12px !important;
		left: 12px !important;
	}

	.product-grid-item .wrap-wishlist-button {
		top: 12px !important;
		right: 12px !important;
	}

	.product-grid-item .product-labels .product-label,
	.product-grid-item .product-labels .product-label.onsale {
		min-width: 44px;
		height: 24px;
		min-height: 24px;
		padding: 0 8px;
		font-size: 12px;
	}

	.product-grid-item .wd-entities-title,
	.product-grid-item h3.wd-entities-title {
		margin-top: 19px !important;
	}

	.product-grid-item .star-rating {
		margin-top: 6px !important;
	}

	.product-grid-item .price ins,
	.product-grid-item .price ins .woocommerce-Price-amount {
		font-size: 14px !important;
	}

	.product-grid-item .price {
		font-size: 14px !important;
	}

	.wd-product.wd-hover-base .fade-in-block,
	.wd-hover-with-fade .fade-in-block,
	.product-grid-item .fade-in-block {
		padding: 9px 0 0 !important;
	}

	.wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a,
	.product-grid-item .wd-add-btn > a {
		height: 45px !important;
		min-height: 45px !important;
	}

	/* На головній кнопки в макеті немає і на мобільному теж */
	#vl-products .product-grid-item .fade-in-block {
		padding: 0 !important;
	}

	/* ── Картка на головній (мобільна): свої розміри, не catalog ─────────
	   Рядки вище (`.shop-content-area .product-grid-item, #vl-products
	   .product-grid-item { min-height: 354px }` і `height: 166px` на
	   зображенні) — це виміри картки КАТАЛОГУ (з кнопкою). Для головної
	   їх просто скопіювали за компанію, не переміривши. Тому картка була
	   вища за реальний вміст на ~90px, і той порожній залишок
	   `.fade-in-block` (див. вище) складав точнісінько під ціною.

	   Перезамір на mobile-general.png (4x, 1572 = 393 CSS): картка
	   174×263, зображення 120 заввишки. */
	#vl-products .product-grid-item {
		min-height: 252px;
	}

	#vl-products .product-grid-item .product-element-top {
		height: 120px;
	}
}

/* ── Мобільна панель фільтрів ────────────────────────────────────────────
   Макет: figma/mobile-shop-filter.png (4x, 1572 = 393 CSS).
   Тема висуває сайдбар збоку на всю висоту екрана. У макеті це картка,
   притиснута до низу: поля 16 з боків і знизу, скруглення 12,
   смужка-«ручка» 51x6 зверху, рядок FILTERS / CLEAR ALL / ✕,
   списки з чекбоксами (крок 37), кнопки RESET і SHOW N PRODUCTS,
   і картка NEED HELP? останньою.
   Розмітку шапки й кнопок додає плагін (class-shop-sidebar.php). */
@media (max-width: 1024px) {
	.sidebar-container.area-sidebar-shop.wd-side-hidden {
		inset-block: auto 16px !important;
		top: auto !important;
		bottom: 16px !important;
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 90px);
		display: flex;
		flex-direction: column;
		padding: 0 !important;
		border-radius: 12px;
		background-color: #FFFFFF;
		overflow: hidden !important;
		transform: translate3d(0, calc(100% + 32px), 0) !important;
	}

	.sidebar-container.area-sidebar-shop.wd-side-hidden.wd-opened {
		transform: none !important;
	}

	/* Затемнення сторінки в макеті світліше за типове теми (0.7) */
	.wd-close-side {
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* Смужка-«ручка» */
	.sidebar-container.area-sidebar-shop.wd-side-hidden::before {
		content: "";
		position: absolute;
		top: 16px;
		left: 50%;
		width: 51px;
		height: 6px;
		margin-left: -25.5px;
		border-radius: 3px;
		background-color: #858585;
		z-index: 3;
	}

	/* ── Шапка ─────────────────────────────────────────────────────────── */
	.sidebar-container.area-sidebar-shop .wd-heading {
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		padding: 45px 16px 20px !important;
		border: 0 !important;
	}

	.vl-filter-title {
		flex: 1 1 auto;
		font-family: var(--vl-font-body);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--vl-ink);
	}

	.vl-filter-clear {
		flex: 0 0 auto;
		margin-right: 26px;
		font-family: var(--vl-font-body);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--vl-accent) !important;
	}

	/* Кнопка закриття: у макеті самий хрестик 14x14, без слова Close */
	.sidebar-container .close-side-widget > a {
		font-size: 0 !important;
		width: 16px;
		height: 16px;
		display: block;
		position: relative;
	}

	.sidebar-container .close-side-widget > a::before,
	.sidebar-container .close-side-widget > a::after {
		content: "" !important;
		position: absolute;
		top: 7px;
		left: -1px;
		width: 18px;
		height: 2px;
		margin: 0;
		background-color: var(--vl-ink);
	}

	.sidebar-container .close-side-widget > a::before {
		transform: rotate(45deg);
	}

	.sidebar-container .close-side-widget > a::after {
		transform: rotate(-45deg);
	}

	/* ── Вміст ─────────────────────────────────────────────────────────── */
	.sidebar-container.area-sidebar-shop .widget-area {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0 16px 16px !important;
	}

	/* Усередині панелі віджети не мають власних карток — картка сама панель */
	.sidebar-container.wd-side-hidden .widget_product_categories,
	.sidebar-container.wd-side-hidden .widget_layered_nav,
	.sidebar-container.wd-side-hidden .widget {
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
	}

	.sidebar-container.wd-side-hidden .widget + .widget {
		margin-top: 9px !important;
	}

	/* ── Рядки списків: крок 37, чекбокс 20, назва 14 uppercase ────────── */
	.sidebar-container.wd-side-hidden .widget_product_categories li,
	.sidebar-container.wd-side-hidden .widget_layered_nav li {
		padding: 8px 17px !important;
		margin: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		min-height: 0 !important;
	}

	.sidebar-container.wd-side-hidden .widget_product_categories li > a,
	.sidebar-container.wd-side-hidden .widget_layered_nav li > a {
		display: flex !important;
		align-items: center;
		gap: 11px;
		padding: 0 !important;
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 500;
		line-height: 21px;
		text-transform: uppercase;
		color: var(--vl-ink) !important;
	}

	.sidebar-container.wd-side-hidden .widget_product_categories li > a::before,
	.sidebar-container.wd-side-hidden .widget_layered_nav li > a::before {
		content: "" !important;
		flex: 0 0 20px;
		width: 20px !important;
		height: 20px !important;
		margin: 0 !important;
		border: 2px solid #D9D9D9 !important;
		border-radius: 6px;
		background-color: #FFFFFF !important;
		background-clip: content-box;
		padding: 2px;
		box-sizing: border-box;
	}

	/* Обраний рядок: залитий чекбокс, без пігулки — у макеті її немає */
	.sidebar-container.wd-side-hidden li.vl-all-products.vl-current,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat-parent {
		background: none !important;
		padding: 8px 17px !important;
		margin: 0 !important;
	}

	.sidebar-container.wd-side-hidden li.vl-all-products.vl-current > a,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat > a,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat-parent > a,
	.sidebar-container.wd-side-hidden .widget_layered_nav li.chosen > a {
		color: var(--vl-ink) !important;
		font-weight: 500;
	}

	.sidebar-container.wd-side-hidden li.vl-all-products.vl-current > a::before,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat > a::before,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat-parent > a::before,
	.sidebar-container.wd-side-hidden .widget_layered_nav li.chosen > a::before {
		border-color: var(--vl-accent) !important;
		background-color: var(--vl-accent) !important;
	}

	.sidebar-container.wd-side-hidden li.vl-all-products.vl-current > .count,
	.sidebar-container.wd-side-hidden .widget_product_categories li.current-cat > .count {
		color: var(--vl-ink-muted) !important;
	}

	.sidebar-container.wd-side-hidden .widget .count {
		font-family: var(--vl-font-body);
		font-size: 14px;
		color: var(--vl-ink-muted) !important;
	}

	/* ── Кнопки RESET і SHOW N PRODUCTS ────────────────────────────────── */
	.vl-filter-actions {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 30px 0 20px;
	}

	.vl-filter-reset,
	.vl-filter-apply {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		height: 45px;
		border-radius: 12px;
		font-family: var(--vl-font-body);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: uppercase;
		cursor: pointer;
	}

	.vl-filter-reset {
		border: 2px solid var(--vl-border);
		background-color: #FFFFFF;
		color: var(--vl-accent) !important;
	}

	.vl-filter-apply {
		border: 0;
		background-color: var(--vl-accent);
		color: #FFFFFF;
	}

	/* Картка NEED HELP? у макеті остання, зі скругленням 24 */
	.sidebar-container.wd-side-hidden .vl-help {
		border-radius: 24px;
	}

	/* SHOW MORE під брендами */
	.sidebar-container.wd-side-hidden .vl-show-more {
		border-top: 0;
		margin-top: 6px;
		padding-top: 6px;
	}
}

/* Доведення мобільної панелі фільтрів */
@media (max-width: 1024px) {
	/* Друга риска хрестика в теми прозора — була видна лише одна. */
	.sidebar-container .close-side-widget > a::after {
		opacity: 1 !important;
	}

	.sidebar-container.area-sidebar-shop .wd-heading {
		justify-content: space-between;
	}

	.sidebar-container.wd-side-hidden .widget_product_categories li,
	.sidebar-container.wd-side-hidden .widget_layered_nav li {
		align-items: center !important;
	}

	.sidebar-container.wd-side-hidden .widget .count {
		line-height: 21px !important;
	}
}

/* ── Виправлення після звірки з мобільними макетами ──────────────────────
   Три помилки з попереднього заходу: правила, писані під десктоп,
   лишались чинними й на телефоні, бо мали вищу вагу за мобільні. */
@media (max-width: 768px) {
	/* 1. Сітка товарів на головній лишалась чотириколонковою: правило
	   `#vl-products .products` не було обмежене шириною екрана, і картки
	   виїжджали за межі контейнера. У макеті на мобільному — дві в ряд. */
	#vl-products .products.wd-products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* 2. Проміжки каталогу. `.shop-content-area .products` (0,3,0)
	   перебивало мобільне `.products.wd-products` (0,2,0) навіть
	   усередині медіа-запиту — звідси 36/30 замість 18/20 з макета
	   і завузькі картки (162.8 замість 172). */
	.shop-content-area .products.wd-products,
	.wd-products.grid-columns-3,
	#vl-products .products.wd-products,
	.products.wd-products {
		column-gap: 18px !important;
		row-gap: 20px !important;
	}

	/* 3. Футер. Колонкам задані `flex: 0 0 245px` / `227px` для рядка,
	   а мобільний блок перемикає контейнер у колонку — і ці числа
	   стають ВИСОТОЮ. Звідси порожні смуги під SHOP та INFORMATION.
	   Мобільні правила без префікса `.vl-footer-inner >` не вигравали. */
	.vl-footer-inner > .vl-footer-logo-block,
	.vl-footer-inner > .vl-footer-about,
	.vl-footer-inner > .vl-footer-col,
	.vl-footer-inner > .vl-footer-col:nth-child(3),
	.vl-footer-inner > .vl-footer-col:nth-child(4),
	.vl-footer-inner > .vl-footer-col:nth-child(5) {
		flex: 0 0 auto !important;
		width: 100%;
		margin-top: 0 !important;
	}

	/* 4. Бренди: чотири рівні колонки, логотипи в 0.528 натурального
	   розміру (саме така пропорція між general.png і mobile-general.png).
	   Поля картки в макеті 16, а не 24 + 36, як виходило раніше. */
	#vl-brands {
		min-height: 0 !important;
	}

	#vl-brands > .e-con {
		grid-template-columns: repeat(4, 1fr);
		/* крок між центрами рядків у макеті — 46 */
		row-gap: 18px !important;
		padding: 22px 16px !important;
	}

	#vl-brands img {
		zoom: 0.528;
	}
}

/* Рядок акордеона футера в макеті 43 заввишки (крок 84 → 127 → 170) */
@media (max-width: 768px) {
	.vl-footer-title {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Акордеон футера: у розгорнутому стані замість мінуса
   стояв битий символ (U+0081 і «3») — виходила цифра з квадратиком.
   І браузер малював сіру підкладку на натиснутій кнопці. */
@media (max-width: 768px) {
	.vl-footer-title:focus,
	.vl-footer-title:active,
	.vl-footer-title:hover {
		background: none !important;
		outline: none;
	}

	.vl-footer-title:focus-visible {
		outline: 2px solid var(--vl-accent);
		outline-offset: 2px;
	}
}

/* ── Сторінка товару на мобільному ───────────────────────────────────────
   Макет figma/mobile-card.png (4x, 1572 = 393 CSS).
   Крихти, картка-квадрат 362×362, заголовок 20 uppercase, рядок
   «зірки + SKU», ціни, роздільник, блок оптових цін (тут без колонки
   QUANTITY — просто заголовок PRICE PER PIECE), роздільник, атрибут,
   кількість 95 + ADD TO CART 251 в один рядок, BUY NOW на всю ширину,
   і чотири плитки переваг 2×2 по 52 заввишки. */
@media (max-width: 768px) {
	.single-product-page .product-image-summary-wrap {
		padding-top: 40px;
	}

	.single-product-page .product-images,
	.single-product-page .product-image-summary-inner > div:not(.product-images) {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.single-product-page .single-breadcrumbs-wrapper {
		left: 0;
		right: 0;
	}

	/* Картка галереї — квадрат на всю ширину контенту */
	.single-product-page .woocommerce-product-gallery {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.single-product-page .woocommerce-product-gallery img,
	.single-product-page .woocommerce-product-gallery__image img {
		max-width: calc(100% - 60px) !important;
		max-height: calc(100% - 40px) !important;
	}

	.single-product-page .product-labels {
		top: 24px !important;
		left: 24px !important;
	}

	/* Сердечко — у правий верхній кут картки, а не до заголовка */
	.single-product-page .summary-inner > .wd-wishlist-btn {
		top: 60px;
		right: 24px;
	}

	.single-product-page .summary-inner > .wd-wishlist-btn > a::before {
		font-size: 24px;
		color: var(--vl-ink-muted);
	}

	.single-product-page .product_title.entry-title {
		font-size: 20px;
		line-height: 26px;
		padding-right: 0;
		margin-top: 37px !important;
	}

	.vl-single-meta {
		margin-top: 14px;
		font-size: 13px;
	}

	.vl-single-meta .star-rating {
		height: 18px;
		font-size: 18px;
		line-height: 18px;
	}

	.single-product-page .summary-inner > .price {
		margin-top: 14px !important;
		font-size: 22px;
		line-height: 28px;
	}

	.single-product-page .summary-inner > .price del,
	.single-product-page .summary-inner > .price del .woocommerce-Price-amount {
		font-size: 17px !important;
	}

	.single-product-page .summary-inner > .price ins,
	.single-product-page .summary-inner > .price ins .woocommerce-Price-amount {
		font-size: 22px !important;
	}

	/* Блок оптових цін між двома лініями. Колонки QUANTITY на мобільній
	   немає — лишається тільки заголовок PRICE PER PIECE. */
	.vapelab-tiers {
		margin: 0 !important;
		border-top: 2px solid var(--vl-border);
		border-bottom: 2px solid var(--vl-border);
		padding: 21px 0 22px;
		display: block;
	}

	.vapelab-tiers thead,
	.vapelab-tiers tbody,
	.vapelab-tiers tr {
		display: block;
		width: 100%;
	}

	.vapelab-tiers tr {
		display: flex;
		justify-content: space-between;
	}

	.vapelab-tiers th:first-child {
		display: none;
	}

	.vapelab-tiers th,
	.vapelab-tiers td:first-child,
	.vapelab-tiers td {
		width: auto;
	}

	.vapelab-tiers th {
		padding: 0 0 22px;
		font-size: 18px;
	}

	.vapelab-tiers thead tr {
		justify-content: flex-start;
	}

	.vapelab-tiers td {
		padding: 0 0 11px;
		font-size: 14px;
		line-height: 14px;
	}

	.vapelab-tiers td:nth-child(2) {
		flex: 0 0 200px;
	}

	/* Атрибут */
	.single-product-page .variations th.label,
	.single-product-page .variations label {
		font-size: 18px;
		padding-bottom: 14px;
	}

	/* Кнопки: кількість 95 + ADD TO CART на решту, BUY NOW окремим рядком */
	.single-product-page form.cart {
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 16px !important;
	}

	.single-product-page form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		width: auto;
	}

	.vl-buy-now {
		flex: 0 0 100%;
		width: 100%;
	}

	/* Плитки переваг — 2×2, кожна 52 заввишки */
	.vl-single-features {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin-top: 16px;
	}

	.vl-single-feature {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		min-height: 52px;
		padding: 8px 14px 8px 46px;
		border-radius: 12px;
		background-color: var(--vl-surface-2);
		position: relative;
	}

	.vl-single-feature::before {
		content: "";
		position: absolute;
		left: 14px;
		top: 50%;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		background: center/22px no-repeat;
	}

	.vl-feature-shipping::before {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h11v11H1z'/%3E%3Cpath d='M12 9h4l3 3v5h-7z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='16' cy='19' r='2'/%3E%3C/svg%3E");
	}

	.vl-feature-delivery::before {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	}

	.vl-feature-payment::before {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	}

	.vl-feature-original::before {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14L7 22l5-2.5L17 22l-1.5-8'/%3E%3C/svg%3E");
	}

	.vl-feature-title {
		font-family: var(--vl-font-body);
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--vl-ink);
		line-height: 1.2;
	}

	.vl-feature-note {
		font-family: var(--vl-font-body);
		font-size: 11px;
		color: var(--vl-ink-muted);
		line-height: 1.3;
	}
}

/* Шапка на мобільній: логотипа в макеті немає, а колонка з ним
   виштовхує кошик за екран. Тема тримає `.whb-column { display: flex }`
   у файлі, який іноді підключається після нашого інлайну,
   тому тут потрібна вища вага. */
@media (max-width: 1024px) {
	.whb-column.whb-mobile-center {
		display: none !important;
	}
}

/* Сторінка товару на мобільній: рядок теми має margin: 0 -15px,
   тож колонкам треба лишити поля 15 — інакше вміст виходить
   на самий край екрана замість 16 за макетом. */
@media (max-width: 768px) {
	.single-product-page .product-images,
	.single-product-page .product-image-summary-inner > div:not(.product-images) {
		padding-left: 15px;
		padding-right: 15px;
	}

	.single-product-page .single-breadcrumbs-wrapper {
		left: 15px;
		right: 15px;
	}

	.single-product-page .summary-inner > .wd-wishlist-btn {
		right: 39px;
	}
}

/* Мобільна шапка панелі фільтрів і її кнопки — тільки на мобільній.
   На десктопі вони вилазили неоформленим рядком під карткою фільтрів. */
@media (min-width: 1025px) {
	.vl-filter-actions,
	.vl-filter-title,
	.vl-filter-clear {
		display: none !important;
	}
}

/* Блок SIMILAR PRODUCTS на мобільній: дві картки в ряд */
@media (max-width: 768px) {
	.single-product-page .related-products .wd-el-title,
	.single-product-page .related-products .slider-title {
		font-size: 20px;
		margin-bottom: 20px !important;
	}

	.single-product-page .related-products .wd-carousel {
		margin-left: -9px;
		margin-right: -9px;
	}

	.single-product-page .related-products .wd-carousel-item {
		padding-left: 9px;
		padding-right: 9px;
	}

	.single-product-page .related-products .product-grid-item {
		min-height: 354px;
	}
}

/* Варіативний товар на мобільній: кількість + ADD TO CART в один
   рядок, BUY NOW окремим — як у простого товару й у макеті. */
@media (max-width: 768px) {
	.single-product-page .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
		gap: 16px;
	}

	.single-product-page .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 auto;
		width: auto;
	}

	.single-product-page .woocommerce-variation-add-to-cart .vl-buy-now {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* У макеті (mobile-card.png) плитки мають лише назву, без підпису —
   тому всі чотири однакові по 52. */
@media (max-width: 768px) {
	.vl-single-features .vl-feature-note {
		display: none;
	}

	.vl-single-feature {
		justify-content: center;
		height: 52px;
		min-height: 52px;
	}
}

/* ── Каталог на планшеті й телефоні — на всю ширину ──────────────────────
   Колонка каталогу має 71.22% для десктопної розкладки з сайдбаром.
   Коли я обмежив те правило скоупом `body:not(.single-product)`, воно
   набрало ваги (0,3,1) і почало вигравати в мобільного (0,2,0) —
   сітка товарів стиснулась до 71% ширини екрана. */
@media (max-width: 1024px) {
	.sidebar-container.col-lg-3,
	.site-content.shop-content-area,
	body:not(.single-product) .site-content.shop-content-area {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* ── Кнопка варіативного товару на телефоні ──────────────────────────────
   «CHOOSE OPTIONS» зі стрілкою не влазить у картку 172px.
   У мобільному макеті (mobile-card.png) написано просто «CHOOSE →». */
@media (max-width: 768px) {
	.product-grid-item .wd-add-btn > a.product_type_variable > span {
		font-size: 0 !important;
	}

	.product-grid-item .wd-add-btn > a.product_type_variable > span::before {
		content: "CHOOSE" !important;
		display: inline !important;
		width: auto !important;
		height: auto !important;
		flex: 0 0 auto !important;
		background: none !important;
		font-family: var(--vl-font-body);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0;
		color: inherit;
	}
}

/* Сітка списку бажань — як блок товарів на головній: чотири в ряд
   по 285 з проміжком 20. Тема ставить три колонки по 376 — зашироко. */
@media (min-width: 769px) {
	.products:has(.wd-wishlist-product-actions) {
		grid-template-columns: repeat(4, 1fr) !important;
		row-gap: 20px !important;
		column-gap: 20px !important;
	}
}

/* ── Сторінка товару: таби опису (figma/card.png) ─────────────────────────
   Тема сама малює underline точно в акцентному кольорі — через глобальну
   змінну, яку ми вже перевизначили для кнопок. Тут лише розмір активного/
   неактивного напису (тема давала 16px і надто темний неактивний). */
.woocommerce-tabs .wd-nav-tabs .wd-nav-link {
	font-size: 18px;
}

.woocommerce-tabs .wd-nav-tabs li:not(.active) .wd-nav-link {
	color: var(--vl-ink-muted);
}

/* ── Сторінка товару: типографіка опису ───────────────────────────────────
   У макеті весь текст опису (заголовки й абзаци) — капсом: заголовки
   розділів жирним Manrope, абзаци й списки — Inter, приглушений сірий. */
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
	font-family: var(--vl-font-head);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
	margin: 24px 0 10px;
}

.woocommerce-Tabs-panel--description > h2:first-child,
.woocommerce-Tabs-panel--description > h3:first-child,
.woocommerce-Tabs-panel--description > p:first-child {
	margin-top: 0;
}

.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--vl-ink-muted);
	text-transform: uppercase;
}

.woocommerce-Tabs-panel--description p {
	margin: 0 0 12px;
}

.woocommerce-Tabs-panel--description ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.woocommerce-Tabs-panel--description li {
	margin-bottom: 6px;
}

/* ── Сторінка товару: крапки каруселі Similar Products ────────────────────
   Розмітка вже готова в темі (.wd-nav-pagin) — розмір і проміжок (12px,
   gap 10px) виміряні на card.png майже збігаються з дефолтом теми (10px),
   лишалось поправити колір (тема малює обидва стани однаковим сірим) і
   показати на мобільній — тема ховає через wd-hide-sm/wd-hide-md-sm. */
.related-products .wd-nav-pagin-wrap {
	display: block !important;
}

.related-products .wd-nav-pagin-item span {
	width: 12px;
	height: 12px;
	background-color: var(--vl-border) !important;
}

.related-products .wd-nav-pagin-item.wd-active span {
	background-color: var(--vl-accent) !important;
}

/* ── Сторінка товару: блок WHY VAPELAB? ────────────────────────────────────
   Розмітку додає плагін (class-single-product.php) під тими самими ID,
   що на головній (#vl-seo/#vl-seo-body/#vl-seo-more/...) — стилі
   заголовка/кнопки/розгортання звідти підходять напряму (див. вище по
   файлу «Згортання SEO-тексту» і «SEO-блок»). Тут лише колір/шрифт
   заголовка (на головній він приходить через .elementor-widget-heading,
   якого тут немає) і перемикання десктоп/мобільна версія. */
#vl-seo .elementor-heading-title,
#vl-seo-m .elementor-heading-title {
	font-family: var(--vl-font-head);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vl-ink);
	margin: 0 0 16px;
}

.vl-product-why {
	margin-top: 60px;
	padding-bottom: 60px;
}

.vl-why-desktop {
	display: block;
}

.vl-why-mobile {
	display: none;
}

@media (max-width: 768px) {
	.vl-why-desktop {
		display: none;
	}

	.vl-why-mobile {
		display: block;
	}
}

/* ── Сторінка Wholesale ────────────────────────────────────────────────
   Макета в figma/ немає — сітка й картка перевикористовують уже
   затверджений каталожний компонент (3 × 258, проміжок 36, картка з
   кнопкою ADD TO CART). Контейнер тут без сайдбару, на всі 1200px, тому
   звужуємо сітку до тих самих 846px, що дає сайдбар+відступ у каталозі —
   інакше картки розтягуються до ~376px (та сама пастка, що вже була на
   списку бажань, § «Пастки»). */
#vl-wholesale-head {
	padding-top: 40px;
	padding-bottom: 8px;
}

#vl-wholesale-intro p {
	max-width: 700px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--vl-ink-muted);
	margin: 0;
}

#vl-wholesale-grid {
	padding-bottom: 60px;
}

#vl-wholesale-grid .products.wd-products {
	max-width: 846px;
	margin-left: auto;
	margin-right: auto;
}

.vapelab-wholesale-empty {
	padding: 40px 0 80px;
	color: var(--vl-ink-muted);
	font-size: 14px;
}

/* Підпис «from $X / pc in bulk» пробували показати на Wholesale (у решті
   місць він навмисно вимкнений вище — «У макеті його немає ні в картці
   каталогу, ні на сторінці товару»). Не вийшло дешево: якщо додати йому
   висоту (display:block + flex-wrap на .price), він ховається під
   .fade-in-block — той самий шар наведення картки, що описаний нижче
   в § «Пастки» (hover-content, «Read more description»). Він абсолютно
   не залежить від висоти сусідів по флексу, тож картка просто не
   розсувається під другий рядок ціни. Займатись цим — розхитувати
   перевірену механіку наведення заради необов'язкового підпису, якого
   й у макеті нема. Лишили вимкненим і тут — сітка Wholesale не потребує
   власного винятку.
   */

/* ── Службові сторінки: Privacy Policy, Terms ────────────────────────────
   Макета немає. Довгий текст читається краще у вузькій колонці, ніж на
   всі 1200px — і, на відміну від технічного опису товару, тут звичайний
   регістр, не капс: це суцільний текст для читання, а не таблиця
   характеристик. */
#vl-legal-body {
	max-width: 760px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--vl-ink-muted);
}

#vl-legal-body h3 {
	font-family: var(--vl-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--vl-ink);
	margin: 32px 0 12px;
}

#vl-legal-body > div > h3:first-child {
	margin-top: 0;
}

#vl-legal-body p {
	margin: 0 0 14px;
}

#vl-legal-body ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

#vl-legal-body li {
	margin-bottom: 8px;
}

#vl-legal-body a {
	color: var(--vl-accent);
}

#vl-legal-body a:hover {
	color: var(--vl-accent-hover);
}

/* ══════════════════════════════════════════════════════════════════
   ПЕРЕВИЗНАЧЕННЯ 2 — правки за списком з 10 пунктів, 2026-08-23.
   Нові правила теж дописувати в кінець, після цього блоку.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Wholesale: 3 товари замість 4 ────────────────────────────────────
   Сітка була звужена до 846px (та сама ширина, що дає сайдбар+відступ
   у каталозі — див. коментар вище). У Wholesale сайдбару немає, контейнер
   на всі 1200px, тож звуження лишало по 177px порожнечі з боків і зайвий
   товар з'їжджав на другий рядок. Розтягуємо на всю ширину й даємо
   4 рівні колонки (перевірено: із фіксованих 258px карток сітка сама
   переходить на 1fr і картки рівномірно розтягуються до ~275px,
   як у блоку BEST SELLERS на головній).

   🐛 2026-08-24: це правило саме й було тією класичною пасткою з розділу
   «Пастки Woodmart» — десктопне правило про сітку без @media, тому на
   мобільній воно так само перебивало мобільну колонковість (2 в ряд),
   і 4 колонки з !important стискались до «двох з половиною картки в ряд»
   на 393px. Тепер розділено на десктоп/мобільну версії явно. */
@media (min-width: 769px) {
	#vl-wholesale-grid .products.wd-products {
		max-width: 1200px;
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* Мобільна: та сама сітка 2 в ряд, що на головній і в каталозі —
   Wholesale використовує той самий каталожний компонент картки. */
@media (max-width: 768px) {
	#vl-wholesale-grid .products.wd-products {
		max-width: 100%;
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ── 2. Заголовок категорії — інколи величезний, після Ctrl+F5 нормальний.
   Не CSS-логіка: nginx кешує повну сторінку (X-Nginx-Upstream-Cache-Status),
   і кілька термінів каталогу віддавали кешовану версію ще ДО того, як
   правило нижче з'явилось у vapelab_custom_css. На момент перевірки
   (усі категорії + /shop/) заголовок скрізь коректний 32px, живих ознак
   бага не лишилось — але без !important правило можна легко перебити
   інлайновим style/вищою специфічністю в майбутньому, тому підстраховуємось. */
.page-title .entry-title,
.page-title h1 {
	font-size: 32px !important;
}

@media (max-width: 768px) {
	.page-title .entry-title {
		font-size: 28px !important;
	}
}

/* ── 3. Кроки кошика/оформлення зливаються з вмістом ─────────────────────
   «SHOPPING CART → CHECKOUT → ORDER COMPLETE» — це сам .page-title
   (класи page-title-default), який на сторінках каталогу навмисно
   отримав padding-bottom: 0 (щоб .shop-loop-head міг стати під ним
   абсолютно). Той самий нульовий відступ протікав і сюди, де під
   рядком кроків одразу йде звичайний вміст у потоці, без жодного
   позиціювання — і зливався з ним впритул. */
.page-title:has(.wd-checkout-steps) {
	padding-bottom: 28px;
}

/* Таблиця Order number / Date / Email / Total / Payment method —
   рівні flex-колонки на всю ширину (justify-content: space-between,
   flex: 1 1 0%). З Email довжина рядка непередбачувана, і в темі немає
   переносу за символом — довгий рядок без пробілів (email) вилазив
   за межі своєї колонки й налазив на сусідню. */
.woocommerce-order-overview.order_details li {
	flex: 1 1 150px;
	min-width: 150px;
}

.woocommerce-order-overview.order_details li strong {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* На телефоні рівні flex-колонки (justify-content: space-between,
   flex: 1 1 150px) при 4-5 пунктах не вміщались у 393px і ламались
   на нерівні рядки. Замість колонок — вертикальний список: кожен
   пункт своїм рядком, підпис ліворуч, значення праворуч. */
@media (max-width: 768px) {
	.woocommerce-order-overview.order_details {
		flex-direction: column;
		gap: 14px;
	}

	.woocommerce-order-overview.order_details li {
		flex: 1 1 auto !important;
		width: 100%;
		min-width: 0 !important;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
	}

	.woocommerce-order-overview.order_details li strong {
		text-align: right;
		flex: 0 1 auto;
	}
}

/* ── 4. Порожні сторінки футера (About Us, Contact, FAQ, Shipping,
   Returns, Help Center) — наповнено типовим контентом, build/footer_pages.py.
   Верстка й стилі ті самі #vl-legal-body, окремих правил не потрібно. */

/* ── 5. Логотип у футері — клікабельний (обгорнутий у <a> в class-footer.php).
   Та сама пастка, що й з картинкою Elementor на головній: inline-block
   посилання без line-height:0 лишає під зображенням смужку від рядка тексту. */
.vl-footer-logo-block a {
	display: block;
	line-height: 0;
}

/* ── 6. My Account: кнопка View в Orders і Pay/Cancel на Order complete —
   стандартний зелений/сірий WooCommerce, поза дизайн-системою. Скоуп
   навмисно вузький (тільки .woocommerce-account і .woocommerce-order-received) —
   чіпати .button глобально вже ламало картки товару, див. коментар вище
   в блоці «Магазин: кошик, оформлення, акаунт». */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-order-received .woocommerce a.button,
.woocommerce-order-received .woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	background-color: var(--vl-surface-2);
	color: var(--vl-accent);
	border: 2px solid var(--vl-border);
	border-radius: 10px;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-order-received .woocommerce a.button:hover,
.woocommerce-order-received .woocommerce button.button:hover {
	background-color: var(--vl-accent);
	color: #fff;
	border-color: var(--vl-accent);
}

/* Порожні сірі квадрати під полями пароля на Account details — індикатор
   надійності пароля WooCommerce, порожній, поки нічого не введено.
   Ховаємо, доки він справді порожній; коли користувач починає вводити
   пароль, WooCommerce сам заповнює текст і колір, і :empty перестає
   збігатись. */
.woocommerce-password-strength-meter:empty {
	display: none;
}

/* ── 7. BUY NOW: білий текст при наведенні ставав чорним ─────────────────
   Кнопка — звичайний <button> без appearance:none, у Safari/iOS лишається
   частина нативного chrome-стилю кнопки, який на деяких платформах
   перебиває колір тексту саме в :hover/:active. Явний колір з !important
   і зняття нативного вигляду — стандартний фікс для кастомних <button>. */
.vl-buy-now {
	-webkit-appearance: none;
	appearance: none;
	color: #FFFFFF !important;
}

.vl-buy-now:hover,
.vl-buy-now:focus,
.vl-buy-now:active {
	color: #FFFFFF !important;
}

/* ── 8. Ціна при наведенні на картку — стара і нова ціна зближались ──────
   Причина: .price в картці за задумом display:flex (щоб del/ins стояли
   з відступом 16px), а спільне правило «нічого не має ховатись під час
   наведення» (вище, «Нічого не має ховатись») форсило ВСЬОМУ переліку,
   включно з .price, display:block !important під час :hover — той самий
   прийом, яким одразу нижче по тексту повернули display:flex саме
   .product-rating-price, але для .price такого повернення не було.
   Без flex у del/ins лишався тільки їхній власний inline-відступ (6px),
   звідси видиме «зближення» рівно на наведенні. Той самий прийом:
   окреме правило нижче по каскаду повертає .price назад у flex. */
.wd-product:hover .price,
.wd-product.state-hover .price {
	display: flex !important;
}

/* ── 9. Мобільна панель фільтрів — потягнути ручку вниз, щоб закрити ─────
   Розмітку/поведінку тягне JS у class-shop-sidebar.php (mobile_filter_chrome).
   Ручка — псевдоелемент (::before), у DOM вузла немає, тому саму панель
   не можна зсунути інлайновим transform: обидва стани (.wd-side-hidden
   і його .wd-opened) уже мають transform з !important у CSS вище, і
   інлайн-стиль без !important їх не переб'є. Замість цього — окремий
   клас .vl-dragging із власним !important і читанням позиції з
   CSS-змінної --vl-drag-y, яку рухає JS під час touchmove. */
.sidebar-container.area-sidebar-shop.wd-side-hidden.wd-opened.vl-dragging {
	transition: none !important;
	transform: translate3d(0, var(--vl-drag-y, 0px), 0) !important;
}

/* ── 6b. My Account: «показати пароль» — сірий квадрат замість іконки ──
   Точний HTML прислав замовник: <button class="show-password-input">,
   яку сама додає WooCommerce (aria-label="Show password") усередині
   <span class="password-input">. Woodmart про цю кнопку не знає —
   ні position:relative на обгортці, ні розмірів/іконки для самої кнопки
   в темі немає (фіча новіша за версію теми). Без position:relative на
   .password-input абсолютне позиціювання кнопки (яке задає сам WC) не
   від чого рахувати, і вона лишається порожнім <button> у звичайному
   потоці — звідси великий сірий прямокутник під полем, а не маленька
   іконка ока в кутку. */
.woocommerce-account .password-input {
	position: relative;
	display: block;
}

.woocommerce-account .password-input input.input-text {
	padding-right: 44px !important;
}

.woocommerce-account .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 14px !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%);
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
	cursor: pointer;
}

/* Стан «пароль показано» — WooCommerce сам додає цей клас на кнопку
   під час перемикання видимості (frontend/password-strength-meter.js). */
.woocommerce-account .show-password-input.display-password {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}

/* ── 10. Similar products: подвійна іконка кошика / подвійний CHOOSE ─────
   Карусель «Схожі товари» використовує інший варіант кнопки Woodmart
   (wd-style-icon wd-add-cart-icon) — усередині <a> два <span>: прихований
   до наведення .wd-tooltip-label (чорна спливаюча підказка теми) і
   звичайний видимий span із нашою іконкою кошика. Наше ж правило
   `> a:hover > span { display:inline-flex !important }` (вище) зачіпало
   ОБИДВА span без розбору — тултул теж ставав видимим і показував свою
   копію тексту/іконки поверх основної кнопки. Ховаємо саме
   .wd-tooltip-label, і саме з такою специфічністю (> a > span.клас),
   інакше програє тому самому правилу, яке й спричиняє дублікат. */
.product-grid-item .wd-add-btn > a > span.wd-tooltip-label,
.product-grid-item .wd-add-btn > a:hover > span.wd-tooltip-label {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   ПЕРЕВИЗНАЧЕННЯ 3 — 2026-08-24: блог, мобільна Wholesale/Order complete,
   картка контактів. Нові правила теж дописувати в кінець.
   ══════════════════════════════════════════════════════════════════ */

/* ── Сторінка Contact: картка контактів + карта ──────────────────────────
   Макета немає. Картка того самого стилю, що NEED HELP? у сайдбарі
   (фон #F9F9F9, рамка 2px #EAEAEA, іконки в білих кружках), карта —
   звичайний Google Maps iframe без API-ключа. */
#vl-contact-row {
	align-items: stretch;
}

.vl-contact-card {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	background-color: #F9F9F9;
	border: 2px solid #EAEAEA;
	border-radius: 24px;
	padding: 32px;
}

.vl-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.vl-contact-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}

/* Іконки — класами, не інлайновим style: SVG усередині сам використовує
   одинарні лапки (xmlns='...'), і якщо обгорнути url() теж в одинарні
   лапки прямо в HTML-атрибуті style="", браузер закриває рядок на
   першій-ліпшій із них — фон просто не малювався. У .css-файлі цієї
   колізії нема (зовнішні лапки — подвійні), тому іконки тут, а не в HTML. */
.vl-contact-icon-phone {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
}

.vl-contact-icon-mail {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.vl-contact-icon-pin {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.vl-contact-icon-chat {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E");
}

.vl-contact-icon-sm {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background-size: 16px;
}

.vl-contact-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vl-contact-label {
	font-family: var(--vl-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vl-ink-muted);
}

.vl-contact-value {
	font-family: var(--vl-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--vl-ink);
	line-height: 1.4;
}

.vl-contact-messengers {
	margin-top: 6px;
	padding-top: 22px;
	border-top: 2px solid #EAEAEA;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vl-contact-messengers-title {
	font-family: var(--vl-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vl-ink-muted);
	margin-bottom: 4px;
}

.vl-contact-msg-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--vl-ink);
	cursor: default;
}

.vl-contact-map {
	box-sizing: border-box;
	border: 2px solid #EAEAEA;
	border-radius: 24px;
	overflow: hidden;
	height: 100%;
	min-height: 360px;
}

.vl-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
}

@media (max-width: 768px) {
	.vl-contact-map,
	.vl-contact-map iframe {
		min-height: 260px;
	}
}

/* ── Блог: власна сітка карток (шорткод [vapelab_blog]) ──────────────────
   Штатна JS-масонрі Woodmart (position: absolute, кількість колонок —
   у Theme Settings, куди запис через REST не проходить) не дає контролю
   над версткою, тому власний компонент — той самий підхід, що з Wholesale:
   картка того самого стилю, що товар (рамка 2px #EAEAEA, скруглення 24,
   фон #F9F9F9), але зі своєю пропорцією фото й текстовим блоком. */
.vl-blog-empty {
	padding: 40px 0 80px;
	color: var(--vl-ink-muted);
	font-size: 14px;
}

.vl-blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--vl-blog-cols, 3), 1fr);
	gap: 30px;
}

.vl-blog-card {
	display: flex;
	flex-direction: column;
	background-color: #F9F9F9;
	border: 2px solid #EAEAEA;
	border-radius: 24px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.vl-blog-card:hover {
	border-color: var(--vl-accent);
}

.vl-blog-card-img {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: #FFFFFF;
	overflow: hidden;
}

.vl-blog-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.vl-blog-cat {
	position: absolute;
	top: 16px;
	left: 16px;
	background-color: var(--vl-accent);
	color: #FFFFFF;
	font-family: var(--vl-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 6px 12px;
	border-radius: 8px;
}

.vl-blog-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 24px;
}

.vl-blog-date {
	font-family: var(--vl-font-body);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vl-ink-muted);
}

.vl-blog-title {
	font-family: var(--vl-font-head);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--vl-ink);
	margin: 0;
}

.vl-blog-excerpt {
	flex: 1 1 auto;
	font-family: var(--vl-font-body);
	font-size: 13px;
	line-height: 1.7;
	color: var(--vl-ink-muted);
	margin: 0;
}

.vl-blog-more {
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--vl-accent);
	margin-top: 4px;
}

.vl-blog-more::after {
	content: "\2192";
	margin-left: 6px;
}

@media (max-width: 1024px) {
	.vl-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.vl-blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ── Один пост блогу ──────────────────────────────────────────────────
   Штатний шаблон теми (single.php) — тут лише типографіка під
   дизайн-систему, той самий регістр і сірий приглушений текст, що на
   Privacy/Terms (#vl-legal-body): суцільний текст для читання. */
.single-post .entry-title {
	font-family: var(--vl-font-head);
	font-weight: 700;
	color: var(--vl-ink);
}

.single-post .post-thumbnail img,
.single-post .wd-post-image img {
	border-radius: 26px;
	display: block;
	width: 100%;
	height: auto;
}

.single-post .entry-content {
	font-family: var(--vl-font-body);
	font-size: 15px;
	line-height: 1.8;
	color: var(--vl-ink-muted);
	max-width: 760px;
	margin: 0 auto;
}

.single-post .entry-content h3 {
	font-family: var(--vl-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--vl-ink);
	margin: 32px 0 12px;
}

.single-post .entry-content h3:first-child {
	margin-top: 0;
}

.single-post .entry-content p {
	margin: 0 0 14px;
}

.single-post .entry-content ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.single-post .entry-content li {
	margin-bottom: 8px;
}

.single-post .entry-content a {
	color: var(--vl-accent);
}

.single-post .entry-content a:hover {
	color: var(--vl-accent-hover);
}

/* ══════════════════════════════════════════════════════════════════
   ПЕРЕВИЗНАЧЕННЯ 4 — 2026-08-25: рамка карток при наведенні, доведення
   одиночного поста блогу, картка Contact на всю ширину.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Фіолетова рамка при наведенні — на всі картки товару ─────────────
   У блозі (.vl-blog-card:hover) вже так; той самий прийом на
   .product-grid-item. Базова рамка задана з !important — тут теж треба. */
.product-grid-item:hover {
	border-color: var(--vl-accent) !important;
}

/* ── 2. Одиночний пост блогу: прибрати автора ────────────────────────── */
.single-post .meta-author {
	display: none;
}

/* ── 3. Одиночний пост: зображення на всю ширину (1200×900, як у макеті
   картки, тобто дуже високе) і текст вужчою колонкою з відступами по
   боках — тепер зображення теж у колонці 760px, як текст під ним,
   і не таке високе (16:9 замість 4:3, object-fit:cover). */
.single-post .entry-thumbnail {
	max-width: 760px;
	margin: 0 auto 32px;
}

.single-post .entry-thumbnail img.attachment-post-thumbnail {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 26px;
}

/* ── 4. Прибрати «попередній/наступний запис», коментарі й «поділитись» ── */
.single-post .wd-page-nav,
.single-post .comments-area,
.single-post .single-post-social {
	display: none !important;
}

/* ── 5. Contact: картка й карта нарівно на всю ширину рядка ──────────────
   Обидва html-віджети всередині #vl-contact-row мали flex-grow:0 —
   кожен займав лише свою природну ширину контенту, а решта рядка
   (до 1200px) лишалась порожньою праворуч. */
#vl-contact-row {
	flex-wrap: nowrap;
}

#vl-contact-row > .elementor-widget-html {
	flex: 1 1 0;
	min-width: 0;
}

.vl-contact-map {
	width: 100%;
}

@media (max-width: 768px) {
	#vl-contact-row {
		flex-wrap: wrap;
	}
}

/* Іконки Viber/WhatsApp/Telegram — того самого розміру, що телефон/пошта/
   адреса вище (було менше, .vl-contact-icon-sm), і кожна свій розпізнаваний
   силует замість однієї спільної «бульбашки» на всі три. */
.vl-contact-msg-row .vl-contact-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	background-size: 20px;
}

/* Іконки-бульбашки з крапками (типовий значок «чат») замість спроби
   вмалювати трубку всередину — при 20px трубка перетворювалась на
   нечитабельну кляксу. Дві різні форми бульбашки (кругла / зі
   скругленим кутом) + крапки-«індикатор набору» дають чистий і
   впізнаваний результат навіть у дрібному розмірі. */
.vl-contact-icon-whatsapp {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.3-4.7A8 8 0 1112 20a8 8 0 01-4.6-1.5L3 21z'/%3E%3Ccircle cx='8.3' cy='11' r='0.9' fill='%237375D0' stroke='none'/%3E%3Ccircle cx='11.7' cy='11' r='0.9' fill='%237375D0' stroke='none'/%3E%3Ccircle cx='15.1' cy='11' r='0.9' fill='%237375D0' stroke='none'/%3E%3C/svg%3E");
}

.vl-contact-icon-telegram {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10.5 13.5'/%3E%3Cpath d='M21 3l-6.5 18-4-8-8-4z'/%3E%3C/svg%3E");
}

.vl-contact-icon-viber {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237375D0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2h-7l-4.5 4v-4H5a2 2 0 01-2-2V5a2 2 0 012-2z'/%3E%3Ccircle cx='8.5' cy='9.5' r='0.9' fill='%237375D0' stroke='none'/%3E%3Ccircle cx='12' cy='9.5' r='0.9' fill='%237375D0' stroke='none'/%3E%3Ccircle cx='15.5' cy='9.5' r='0.9' fill='%237375D0' stroke='none'/%3E%3C/svg%3E");
}

/* ── Пост блогу: контент на всю ширину, не вузькою колонкою ──────────────
   Заголовок і фото лишаються як були (760px, центровано) — але текст
   статті користувач попросив на всю ширину, а не в тій самій вузькій
   колонці: 760px читався як «замало» проти ширини сторінки. */
.single-post .entry-content {
	max-width: none;
	margin: 0;
}

/* Сіра лінія під текстом унизу — .wd-single-footer, обгортка навколо
   .wd-page-nav (попередній/наступний запис). Сам .wd-page-nav уже
   прихований (§11.4), але обгортка лишалась: порожня, 42px заввишки,
   з власною верхньою рамкою — та сама лінія «нідочого», про яку
   написав замовник. */
.single-post .wd-single-footer {
	display: none !important;
}

/* ── Службові сторінки (About Us, FAQ, Shipping, Returns, Help Center,
   Privacy Policy, Terms): та сама вузька колонка 760px, тепер на
   прохання замовника — на всю ширину, як і текст постів блогу вище. */
#vl-legal-body {
	max-width: none;
}

/* ── Сторінка товару: кнопка SUBMIT на вкладці Reviews ───────────────────
   Стандартна WooCommerce-кнопка коментаря — гострі кути (border-radius:0)
   і нижча за решту кнопок сайту (42px замість 47), хоча колір уже
   акцентний. Заодно поля Name/Email/textarea — під ту саму рамку
   2px #EAEAEA, скруглення 12, що всюди на сайті. */
#respond .form-submit input#submit {
	height: 47px;
	padding: 0 24px;
	border-radius: 12px;
	background-color: var(--vl-accent);
	border: 0;
	color: #FFFFFF;
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

#respond .form-submit input#submit:hover {
	background-color: var(--vl-accent-hover);
}

#respond .comment-form-author input,
#respond .comment-form-email input,
#respond textarea {
	border: 2px solid #EAEAEA !important;
	border-radius: 12px !important;
	padding-left: 16px;
	padding-right: 16px;
}

#respond .comment-form-author input,
#respond .comment-form-email input {
	height: 47px;
}

#respond textarea {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* ── Ще дві кнопки з тим самим системним недоліком ────────────────────────
   Колір уже акцентний скрізь (var(--btn-accented-*) виставлено на самому
   початку), але жодна з них не отримала border-radius/height нарівні з
   рештою кнопок сайту — той самий недогляд, що й SUBMIT на Reviews вище. */

/* Випадаюче вікно шапки: LOG IN (не залогінений користувач наводить
   на іконку акаунту). */
.woocommerce-form-login__submit {
	height: 47px !important;
	padding: 0 24px !important;
	border-radius: 12px !important;
	font-family: var(--vl-font-body);
	font-size: 14px;
	font-weight: 600;
}

/* Випадаюче вікно кошика: RETURN TO SHOP (кошик порожній). */
.wc-backward {
	height: 47px !important;
	padding: 0 24px !important;
	border-radius: 12px !important;
	display: inline-flex !important;
	align-items: center;
	font-family: var(--vl-font-body);
	font-size: 13px;
	font-weight: 600;
}

/* ── My Account: заголовок «MY ACCOUNT» двічі ─────────────────────────────
   H1 сторінки (page-title) уже показує «MY ACCOUNT» — той самий напис
   повторює H3 у сайдбарі (woocommerce-MyAccount-title), суто декоративний,
   над списком Dashboard/Orders/.../Logout. Прибираємо дублікат. */
.woocommerce-MyAccount-title {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ПЕРЕВИЗНАЧЕННЯ 5 — 2026-09-02: перемикач смаків на сторінці товару.

   Кожен смак — окремий простий товар (див. class-flavour-switcher.php),
   тому розмітки WooCommerce .variations тут немає і стилі для неї
   (рядок ~2613) не застосовуються. Вигляд знятий з figma/card.png
   зрізом на 4x: поле 601..648 -> висота 47, рамка 2px, радіус 12,
   підпис 18/700 uppercase.
   ═══════════════════════════════════════════════════════════════════════ */

.vl-flavour {
	margin-top: 34px;
}

.vl-flavour-label {
	display: block;
	font-family: var(--vl-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vl-ink);
	/* 22, а не 20: підпис має line-height 1, і верхівка літер стоїть на
	   ~2.5px нижче за верх коробки. У макеті від низу літер до поля 24. */
	padding: 0 0 22px;
	/* Тема дає всім <label> margin-bottom: 5px — саме через нього поле
	   стояло на 5px нижче за макет. */
	margin: 0;
}

.vl-flavour-select {
	/* block, а не інлайновий: інакше перенос рядка між <label> і <select>
	   у розмітці дає зайві 5px базової лінії під полем. */
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 47px;
	padding: 0 18px;
	border: 2px solid var(--vl-border);
	border-radius: 12px;
	background-color: transparent;
	font-family: var(--vl-font-body);
	font-size: 14px;
	color: var(--vl-ink);
	cursor: pointer;

	/* Власна стрілка: нативна різна в кожному браузері. Розміри зняті
	   зрізом з макета на 4x — 14x8, колір #858585 (--vl-ink-muted),
	   21 від правого краю поля (19 від внутрішнього, бо рамка 2). */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='%23858585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L7 6.5L13 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 19px center;
	background-size: 14px 8px;
	padding-right: 45px;
}

/* Вище (рядок ~2638) вже є `.single-product-page .summary-inner select`
   з кольором --vl-ink-muted — воно важить (0,2,1) і перебивало наш
   один клас. У макеті сірим показаний ПОРОЖНІЙ стан («CHOOSE AN OPTION»),
   а в нас у полі завжди стоїть обраний смак, тому текст має бути темний.
   Селектор навмисно (0,3,1), щоб не залежати від порядку правил. */
.single-product-page .summary-inner select.vl-flavour-select {
	color: var(--vl-ink);
}

/* Селект варіації (NICOTINE у лінійці Yami) стоїть просто під нашим
   перемикачем смаку і має виглядати так само. Те саме правило з
   --vl-ink-muted робило його текст сірим, поки TASTE був чорний. */
.single-product-page .summary-inner .variations select {
	color: var(--vl-ink);
}

.vl-flavour-select:focus {
	outline: none;
	border-color: var(--vl-accent);
}

/* Запасний список без JS — перехід усе одно можливий. */
.vl-flavour-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vl-flavour-list a {
	display: inline-block;
	padding: 6px 12px;
	border: 2px solid var(--vl-border);
	border-radius: 12px;
	font-family: var(--vl-font-body);
	font-size: 13px;
	color: var(--vl-ink);
}

@media (max-width: 768px) {
	.vl-flavour {
		margin-top: 24px;
	}

	.vl-flavour-label {
		font-size: 16px;
		padding-bottom: 12px;
	}
}

/* ── Сайдбар: більше ніж один фільтр у картці ────────────────────────────
   Було рівно два блоки (CATEGORIES + BRANDS), тому зшивання описувало
   лише «перший» і «останній»: .widget_layered_nav завжди діставав нижнє
   скруглення І нижню рамку. З появою третього блока (NICOTINE) BRANDS
   опинився посередині — і малював кінець картки просто в її середині.

   Тепер низ картки малює тільки ОСТАННІЙ фільтр; будь-який, за яким іде
   ще один, стає прохідним. Працює на будь-яку кількість блоків. */
.sidebar-container .widget_layered_nav:has(+ .widget_layered_nav) {
	border-radius: 0 !important;
	border-bottom: 0 !important;
}

/* ── Сайдбар: трицифрові лічильники ──────────────────────────────────────
   Рядок фільтра — flex із wrap. Поки товарів було менше ста, назва й
   лічильник вміщались у рядок; на «108» лічильник переносився під назву
   і рядок ставав удвічі вищим (68 замість 34).

   Заборонено переносити САМ рядок; натомість назві дозволено стискатись
   (min-width: 0), тому довга назва перенесеться всередині себе, а число
   лишиться праворуч на своєму місці. */
.sidebar-container .widget_product_categories li,
.sidebar-container .widget_layered_nav li,
.sidebar-container.wd-side-hidden .widget_product_categories li,
.sidebar-container.wd-side-hidden .widget_layered_nav li {
	flex-wrap: nowrap !important;
}

.sidebar-container .widget_product_categories li > a,
.sidebar-container .widget_layered_nav li > a {
	min-width: 0;
}

.sidebar-container .widget_product_categories li > .count,
.sidebar-container .widget_layered_nav li > .count {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ── Таблиця характеристик в описі товару ────────────────────────────────
   Замовник надсилає її разом із <style>, який редактор WordPress ламає:
   правила виходять загорнутими в <p> і <br />, і на сторінці це видно як
   сміттєвий текст. Тому в опис іде лише семантична розмітка
   (brand_build.spec_table), а оформлення — тут, один раз на всі товари.

   Текст опису на сайті капсом (див. § типографіка опису), тому назви
   характеристик лишаємо в тому ж регістрі, що й решта тексту. */
/* Відступ симетричний згори й знизу. Знизу він обовʼязковий: останній
   рядок таблиці навмисно без рамки, тож без відступу наступний абзац
   («Frequently asked questions») злипався з таблицею впритул — заміряно
   на сторінці, було рівно 0. Для порівняння ритм опису: 12 між абзацами,
   16 після списку. */
.woocommerce-Tabs-panel--description .vl-specs {
	margin: 34px 0;
}

.woocommerce-Tabs-panel--description .vl-specs h3 {
	margin: 0 0 18px;
	font-family: var(--vl-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--vl-ink);
	text-transform: uppercase;
}

/* Вузькі екрани: таблиця прокручується всередині себе, сторінка — ні. */
.woocommerce-Tabs-panel--description .vl-specs table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	font-family: var(--vl-font-body);
	font-size: 14px;
}

.woocommerce-Tabs-panel--description .vl-specs th,
.woocommerce-Tabs-panel--description .vl-specs td {
	padding: 13px 0;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 2px solid var(--vl-border);
	background: none;
	line-height: 1.5;
	overflow-wrap: anywhere;

	/* Решта опису на сайті капсом, але таблиця — технічні дані, а не
	   проза: «850mAh», «USB Type-C», «mg/ml» втрачають сенс у верхньому
	   регістрі. Заголовки th інакше успадковували капс від опису, а
	   значення td — ні, і таблиця виглядала різнобоєм. */
	text-transform: none;
}

.woocommerce-Tabs-panel--description .vl-specs th {
	font-weight: 700;
	color: var(--vl-ink);
}

.woocommerce-Tabs-panel--description .vl-specs td:first-child {
	width: 45%;
	color: var(--vl-ink-muted);
}

.woocommerce-Tabs-panel--description .vl-specs td:last-child {
	color: var(--vl-ink);
	font-weight: 500;
}

.woocommerce-Tabs-panel--description .vl-specs tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 768px) {
	.woocommerce-Tabs-panel--description .vl-specs {
		margin: 26px 0;
	}

	.woocommerce-Tabs-panel--description .vl-specs h3 {
		font-size: 18px;
	}

	.woocommerce-Tabs-panel--description .vl-specs th,
	.woocommerce-Tabs-panel--description .vl-specs td {
		padding: 11px 0;
	}

	.woocommerce-Tabs-panel--description .vl-specs td:first-child {
		width: 42%;
	}
}

/* ── ПЕРЕВИЗНАЧЕННЯ: відступ під ціною в каруселі «Similar products» ─────
   🐛 У каталозі між ціною і кнопкою 20px, а в каруселі внизу сторінки
   товару — нуль, кнопка прилипає до ціни.

   Причина не в самій каруселі: на її картки тема вішає ЩЕ ОДИН клас,
   `wd-fade-off` (у каталозі його немає), а під нього в
   woo-product-loop-base.min.css лежить

       .wd-hover-with-fade.wd-fade-off .fade-in-block { padding-top: 0 !important }

   Вага (0,3,0) проти нашого `.product-grid-item .fade-in-block` (0,2,0) —
   тому наші 20px програють, попри !important з обох боків.

   Беремо вагу (0,4,0), додавши `.product-grid-item` до того ж селектора. */
.product-grid-item.wd-hover-with-fade.wd-fade-off .fade-in-block {
	padding: 20px 0 0 !important;
}

@media (max-width: 768px) {
	.product-grid-item.wd-hover-with-fade.wd-fade-off .fade-in-block {
		padding: 9px 0 0 !important;
	}

	/* На головній кнопок немає — там відступ не потрібен (див. вище). */
	#vl-products .product-grid-item.wd-hover-with-fade.wd-fade-off
	.fade-in-block {
		padding: 0 !important;
	}
}

#vl-products .product-grid-item.wd-hover-with-fade.wd-fade-off
.fade-in-block {
	padding: 0 !important;
}