/* ============================================================    VIP Comfort — Стилі сторінки категорії товарів    Макет: vipcomfort_category_v4.html    Усі класи з префіксом vc-, змінні з префіксом --vc-.    Підключається тільки на сторінках категорій WooCommerce.    Стилі мобільної плашки (.vc-mobile-bar) — інлайн у functions.php    (рендериться на всьому сайті).    ============================================================ */  @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&display=swap');  :root { 	--vc-c1: #274C4F; 	--vc-c2: #456A6D; 	--vc-c3: #42504b; 	--vc-c4: #152420; 	--vc-c5: #E2EDEF; 	--vc-c6: #EEF4F5; 	--vc-c7: #FBFCFC; 	--vc-c8: #ffffff; 	--vc-accent: #e8a020; 	--vc-danger: #dc2626; 	--vc-success: #16a34a; 	--vc-text: #1a2420; 	--vc-muted: #5a7070; 	--vc-border: #d4e0e1; 	--vc-bg: #f0f4f4; 	--vc-font: 'Exo 2', sans-serif; }  /* Базова типографіка лише для блоків vc- (не чіпаємо глобальний body Blocksy) */ .vc-wrap, .vc-wrap * { 	box-sizing: border-box; } .vc-wrap { 	font-family: var(--vc-font); 	color: var(--vc-text); 	font-size: 14px; 	padding: 16px 20px; } .vc-wrap a { text-decoration: none; color: inherit; }  /* Двоколонковий layout: sidebar (260px) + основний контент */ .vc-layout { 	display: grid; 	grid-template-columns: 260px 1fr !important; 	gap: 16px; }  /* ── ХЛІБНІ КРИХТИ ── */ .vc-breadcrumbs { 	display: flex; align-items: center; gap: 6px; flex-wrap: wrap; 	font-size: 12px; color: var(--vc-muted); 	margin-bottom: 16px; } .vc-breadcrumbs a { color: var(--vc-c1); } .vc-breadcrumbs span { color: var(--vc-border); }  /* ── ЗАГОЛОВОК КАТЕГОРІЇ ── */ .vc-cat-header { margin-bottom: 10px; } .vc-cat-title { 	font-size: 28px; font-weight: 900; color: var(--vc-text); 	margin: 0 0 6px; display: flex; align-items: center; gap: 10px; 	line-height: 1.2; } .vc-cat-desc { font-size: 13px; color: var(--vc-muted); line-height: 1.6; max-width: 700px; } .vc-cat-desc p { margin: 0 0 8px; } .vc-cat-info-btn { 	width: 18px; height: 18px; background: var(--vc-c5); border-radius: 50%; 	display: inline-flex; align-items: center; justify-content: center; 	font-size: 11px; color: var(--vc-c1); cursor: pointer; font-weight: 700; flex-shrink: 0; }  /* ── ПІДКАТЕГОРІЇ ── */ .vc-subcats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .vc-subcat-btn { 	padding: 8px 18px; border-radius: 20px; 	border: 2px solid var(--vc-border); 	font-size: 13px; font-weight: 700; cursor: pointer; 	background: var(--vc-c8); color: var(--vc-text); 	transition: all 0.15s; white-space: nowrap; } .vc-subcat-btn:hover, .vc-subcat-btn.active { background: var(--vc-c1); color: #fff; border-color: var(--vc-c1); }  /* ── КАРУСЕЛЬ БРЕНДІВ ── */ .vc-brands-carousel-wrap { 	position: relative; margin-bottom: 10px; 	background: var(--vc-c8); border-radius: 10px; 	box-shadow: 0 1px 4px rgba(39,76,79,0.06); 	overflow: hidden; } .vc-brands-carousel-inner { 	display: flex; overflow-x: auto; 	scroll-snap-type: x mandatory; 	scrollbar-width: none; } .vc-brands-carousel-inner::-webkit-scrollbar { display: none; } .vc-brand-card { 	flex: 0 0 calc(100% / 8); min-width: 110px; 	display: flex; align-items: center; justify-content: center; 	padding: 14px 10px; 	border-right: 1px solid var(--vc-c6); 	cursor: pointer; transition: background 0.15s; 	scroll-snap-align: start; position: relative; } .vc-brand-card:last-child { border-right: none; } .vc-brand-card:hover, .vc-brand-card.active { background: var(--vc-c6); } .vc-brand-card.active::after { 	content: ''; position: absolute; bottom: 0; left: 0; right: 0; 	height: 3px; background: var(--vc-c1); border-radius: 2px 2px 0 0; } .vc-brand-logo { 	width: 80px; height: 40px; 	display: flex; align-items: center; justify-content: center; } .vc-brand-logo-text { 	font-size: 13px; font-weight: 900; color: #aaa; 	letter-spacing: 0.5px; text-align: center; 	transition: color 0.15s; } .vc-brand-card:hover .vc-brand-logo-text, .vc-brand-card.active .vc-brand-logo-text { color: var(--vc-c1); } .vc-brands-arrow { 	position: absolute; top: 50%; transform: translateY(-50%); 	width: 28px; height: 28px; background: var(--vc-c8); 	border: 1.5px solid var(--vc-border); border-radius: 50%; 	display: flex; align-items: center; justify-content: center; 	cursor: pointer; z-index: 2; font-size: 12px; color: var(--vc-c1); 	box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.15s; 	padding: 0; } .vc-brands-arrow:hover { background: var(--vc-c1); color: #fff; border-color: var(--vc-c1); } .vc-brands-arrow.prev { left: 8px; } .vc-brands-arrow.next { right: 8px; }  /* ── ПАНЕЛЬ ФІЛЬТРІВ ── */ .vc-filter-bar { 	background: var(--vc-c8); border-radius: 10px; 	padding: 14px 16px; margin-bottom: 12px; 	box-shadow: 0 1px 4px rgba(39,76,79,0.06); } .vc-filter-top { 	display: flex; align-items: center; gap: 12px; 	margin-bottom: 14px; flex-wrap: wrap; } .vc-filter-count { font-size: 15px; font-weight: 800; color: var(--vc-text); } .vc-filter-count span { color: var(--vc-c1); }  /* Підпис перед групою кнопок ("Сортування:" / "Швидкий фільтр:") */ .vc-filter-label { 	font-size: 13px; font-weight: 800; color: var(--vc-muted); 	white-space: nowrap; flex-shrink: 0; }  /* Рядок сортування */ .vc-filter-sortrow { 	display: flex; align-items: center; gap: 12px; 	margin-bottom: 14px; flex-wrap: wrap; } .vc-filter-sorts { display: flex; gap: 8px; flex-wrap: wrap; } .vc-sort-btn { 	padding: 7px 16px; border-radius: 8px; 	border: 1.5px solid var(--vc-border); 	font-size: 12px; font-weight: 700; 	cursor: pointer; background: none; color: var(--vc-muted); 	transition: all 0.15s; font-family: var(--vc-font); } .vc-sort-btn:hover, .vc-sort-btn.active { background: var(--vc-c1); color: #fff; border-color: var(--vc-c1); }  .vc-filter-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vc-quick-filter { 	display: flex; align-items: center; gap: 6px; 	padding: 8px 16px; border-radius: 8px; 	border: 1.5px solid var(--vc-border); 	font-size: 13px; font-weight: 700; cursor: pointer; 	background: var(--vc-c8); color: var(--vc-text); 	transition: all 0.15s; font-family: var(--vc-font); 	white-space: nowrap; } .vc-quick-filter:hover, .vc-quick-filter.active { border-color: var(--vc-c1); color: var(--vc-c1); background: var(--vc-c6); } .vc-qf-arrow { font-size: 10px; color: var(--vc-muted); }  /* Мобільний рядок фільтр + сортування */ .vc-mobile-filter-row { display: none; gap: 10px; margin-bottom: 14px; } .vc-mob-filter-btn, .vc-mob-sort-btn { 	flex: 1; display: flex; align-items: center; justify-content: space-between; 	padding: 11px 16px; border-radius: 8px; 	border: 1.5px solid var(--vc-border); 	font-size: 14px; font-weight: 700; cursor: pointer; 	background: var(--vc-c8); color: var(--vc-text); 	font-family: var(--vc-font); } .vc-mob-filter-btn { border-color: var(--vc-c1); color: var(--vc-c1); background: var(--vc-c6); }  /* ── МОБІЛЬНА КНОПКА «ФІЛЬТР» (FAB) ── */ .vc-mobile-filter-fab { 	display: none; 	position: fixed; bottom: 72px; left: 50%; 	transform: translateX(-50%); 	background: var(--vc-c1); color: #fff; border: none; 	border-radius: 50px; padding: 12px 28px; 	font-family: var(--vc-font); 	font-size: 14px; font-weight: 800; 	cursor: pointer; z-index: 400; 	box-shadow: 0 4px 20px rgba(39,76,79,0.4); 	align-items: center; gap: 8px; white-space: nowrap; } .vc-mfab-badge { 	background: var(--vc-accent); color: #000; 	width: 20px; height: 20px; border-radius: 50%; 	display: flex; align-items: center; justify-content: center; 	font-size: 11px; font-weight: 900; }  /* ── СІТКА ТОВАРІВ ── */ .vc-products-grid { 	display: grid; 	grid-template-columns: repeat(4, 1fr); 	gap: 14px; }  /* ── КАРТКА КАЛЬКУЛЯТОРА ── */ .vc-calc-card { 	background: linear-gradient(140deg, var(--vc-c1), var(--vc-c4)); 	border-radius: 12px; padding: 24px 20px; 	display: flex; flex-direction: column; 	align-items: flex-start; justify-content: space-between; 	min-height: 320px; cursor: pointer; 	transition: transform 0.15s; 	position: relative; overflow: hidden; } .vc-calc-card::after { 	content: '🧮'; position: absolute; 	right: -10px; bottom: -10px; 	font-size: 80px; opacity: 0.1; } .vc-calc-card:hover { transform: translateY(-3px); } .vc-calc-tag { 	background: rgba(232,160,32,0.2); 	border: 1px solid rgba(232,160,32,0.3); 	color: #fbbf24; font-size: 10px; font-weight: 800; 	padding: 3px 10px; border-radius: 12px; 	letter-spacing: 1px; text-transform: uppercase; 	margin-bottom: 14px; display: inline-block; } .vc-calc-title { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 8px; display: block; } .vc-calc-desc { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 20px; display: block; } .vc-calc-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; width: 100%; } .vc-calc-step { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.7); } .vc-cs-num { 	width: 20px; height: 20px; background: rgba(255,255,255,0.15); 	border-radius: 50%; display: flex; align-items: center; justify-content: center; 	font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; } .vc-btn-calc-card { 	width: 100%; background: var(--vc-accent); color: #000; 	border: none; padding: 11px; border-radius: 8px; 	font-family: var(--vc-font); font-size: 13px; font-weight: 800; 	cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; 	margin-top: auto; }  /* ── КАРТКА ТОВАРУ ── */ /* ============================================================
   КАРТКА ТОВАРУ  .vc-pcard
   ============================================================ */

/* ============================================================
   КАРТКА ТОВАРУ  .vc-pcard
   ============================================================ */

.vc-pcard {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	overflow: hidden;
	box-shadow: none;
	transition: transform 0.2s, border-color 0.2s;
	display: flex;
	flex-direction: column;
	position: relative;
}
.vc-pcard:hover {
	transform: translateY(-2px);
	border-color: #274C4F;
	box-shadow: none;
}

/* ФОТО */
.vc-pcard-img {
	height: 190px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.vc-pcard-imglink {
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px;
	box-sizing: border-box;
}
.vc-pcard-img-real {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s;
}
.vc-pcard:hover .vc-pcard-img-real { transform: scale(1.05); }

/* Бейджі — ліво зверху */
.vc-pcard-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}
.vc-badge {
	font-size: 10px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 5px;
	width: fit-content;
	line-height: 1.4;
}
.vc-badge-sale { background: #C0392B; color: #fff; }
.vc-badge-top  { background: #E67E22; color: #fff; }

/* Іконки — право зверху */
.vc-pcard-actions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.vc-pcard-act-btn {
	width: 30px;
	height: 30px;
	background: #fff;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0,0,0,0.12);
	color: #555;
	transition: background 0.15s, color 0.15s;
	padding: 0;
}
.vc-pcard-act-btn:hover { background: #f0f4f4; color: #274C4F; }
.vc-pcard-fav.active { background: #fee2e2; color: #C0392B; }

/* ТІЛО */
.vc-pcard-body {
	padding: 12px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.vc-pcard-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 6px;
	flex: 1;
	color: #1a2420;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}
.vc-pcard-name:hover { color: #274C4F; }

.vc-pcard-rating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	min-height: 16px;
}
.vc-stars { color: #f59e0b; font-size: 12px; letter-spacing: -1px; }
.vc-stars-empty { color: #d1d5db; }
.vc-rcount { font-size: 11px; color: #8a9ea0; }

/* РЯДОК ЦІНИ */
.vc-pcard-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

/* Блок ціни .vc-price-new
   WC рендерить: .sale-price > del > .woocommerce-Price-amount
                             + ins > .woocommerce-Price-amount
   Для звичайних товарів: .woocommerce-Price-amount напряму */
.vc-price-new {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	min-width: 0;
	flex: 1;
}

/* Скидаємо flex-напрямок у вбудованому .sale-price / .price */
.vc-price-new .sale-price,
.vc-price-new .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 0;
	line-height: 1;
}

/* Стара ціна — перекреслена сіра дрібна */
.vc-price-new .sale-price del .woocommerce-Price-amount,
.vc-price-new .price del .woocommerce-Price-amount,
.vc-price-new del .woocommerce-Price-amount {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #8a9ea0 !important;
	line-height: 1.3;
}

/* Базовий розмір — всі .woocommerce-Price-amount */
.vc-price-new .woocommerce-Price-amount {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #274C4F;
	line-height: 1;
}

/* Без знижки: єдина ціна — синя */
.vc-price-new:not(.is-sale) .woocommerce-Price-amount {
	color: #274C4F;
}

/* З знижкою — нова ціна червона */
.vc-price-new.is-sale .sale-price ins .woocommerce-Price-amount,
.vc-price-new.is-sale .price ins .woocommerce-Price-amount,
.vc-price-new.is-sale ins .woocommerce-Price-amount {
	color: #A32D2D !important;
	font-size: 22px !important;
	font-weight: 700 !important;
}

.vc-price-new .woocommerce-Price-currencySymbol {
	font-size: 0.65em;
	font-weight: 700;
}

/* Кнопка кошика — десктоп: зелена з текстом */
.vc-btn-cart {
	background: #0F6E56;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 7px;
	transition: background 0.15s, transform 0.1s;
	flex-shrink: 0;
	white-space: nowrap;
	font-family: inherit;
}
.vc-btn-cart:hover,
.vc-btn-cart:focus { background: #0a5040; color: #fff; text-decoration: none; }
.vc-btn-cart:active { transform: scale(0.96); }
.vc-btn-cart.added   { background: #274C4F; }
.vc-btn-cart.loading { opacity: 0.7; }

/* Іконка завжди біла */
.vc-btn-cart svg,
.vc-btn-cart .vc-btn-cart-ico,
.vc-btn-cart i {
	color: #fff !important;
	stroke: #fff !important;
	fill: none !important;
	flex-shrink: 0;
}

.vc-wrap .woocommerce-pagination { 	display: flex; justify-content: center; gap: 8px; 	margin-top: 32px; padding-bottom: 20px; } .vc-wrap .woocommerce-pagination ul { 	display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; border: none; } .vc-wrap .woocommerce-pagination ul li { margin: 0; border: none; } .vc-wrap .woocommerce-pagination ul li a, .vc-wrap .woocommerce-pagination ul li span { 	width: 38px; height: 38px; border-radius: 8px; 	border: 1.5px solid var(--vc-border); 	display: flex; align-items: center; justify-content: center; 	font-size: 13px; font-weight: 700; 	background: var(--vc-c8); color: var(--vc-text); 	transition: all 0.15s; padding: 0; margin: 0; line-height: 1; } .vc-wrap .woocommerce-pagination ul li a:hover, .vc-wrap .woocommerce-pagination ul li span.current { 	background: var(--vc-c1); color: #fff; border-color: var(--vc-c1); } .vc-wrap .woocommerce-pagination ul li span.dots { 	border: none; background: none; }  /* ============================================================    САЙДБАР — фільтри WooCommerce у нашому дизайні    Скоуп .ct-sidebar (контейнер сайдбару Blocksy).    ============================================================ */  /* Обгортка сайдбару */ .ct-sidebar { 	background: #fff; 	border-radius: 12px; 	padding: 16px; 	box-shadow: 0 1px 4px rgba(39,76,79,0.07); 	font-family: 'Exo 2', sans-serif; }  /* Відступ між групами фільтрів */ .ct-sidebar .wp-block-woocommerce-product-filter, .ct-sidebar .widget { margin-bottom: 20px; }  /* Заголовки груп фільтрів */ .ct-sidebar .widget-title, .ct-sidebar .widgettitle, .ct-sidebar .wp-block-heading { 	font-family: 'Exo 2', sans-serif !important; 	font-size: 13px !important; 	font-weight: 800 !important; 	color: #274C4F !important; 	text-transform: uppercase; 	letter-spacing: 0.5px; 	padding-bottom: 8px; 	border-bottom: 2px solid #E2EDEF; 	margin-bottom: 10px !important; 	margin-top: 0 !important; }  /* Чекбокси */ .ct-sidebar input[type="checkbox"], .ct-sidebar input[type="radio"], .ct-sidebar .wc-block-product-filter-checkbox-list__input { 	accent-color: #274C4F; } /* Кастомний бокс чекбокса через currentColor */ .ct-sidebar .wc-block-product-filter-checkbox-list__input-wrapper, .ct-sidebar .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__input-wrapper { 	color: #274C4F; }  /* Списки чекбоксів */ .ct-sidebar .wc-block-product-filter-checkbox-list__items { 	display: flex; flex-direction: column; gap: 6px; 	list-style: none; margin: 0; padding: 0; } .ct-sidebar .wc-block-product-filter-checkbox-list__item { margin: 0; } .ct-sidebar .wc-block-product-filter-checkbox-list__label { 	display: flex; align-items: center; gap: 8px; width: 100%; 	font-size: 13px; color: var(--vc-text); cursor: pointer; margin: 0; } .ct-sidebar .wc-block-product-filter-checkbox-list__count, .ct-sidebar .widget_layered_nav li .count { 	color: var(--vc-muted); font-size: 12px; margin-left: auto; font-weight: 400; } .ct-sidebar .wc-block-product-filter-checkbox-list__show-more { 	color: #274C4F; font-weight: 700; font-size: 12px; 	background: none; border: none; padding: 4px 0; cursor: pointer; }  /* Класичний layered nav */ .ct-sidebar .widget_layered_nav ul, .ct-sidebar .widget_layered_nav_filters ul { list-style: none; margin: 0; padding: 0; } .ct-sidebar .widget_layered_nav li, .ct-sidebar .widget_layered_nav_filters li { padding: 4px 0; font-size: 13px; }  /* Повзунок ціни (блоковий WC) */ .ct-sidebar .wc-block-components-price-slider__range-input { accent-color: #274C4F; } .ct-sidebar .widget__track { background: #E2EDEF; } .ct-sidebar .widget__track-fill { background: #274C4F !important; } .ct-sidebar .widget__range { accent-color: #274C4F; } .ct-sidebar .widget__input, .ct-sidebar .widget__select { 	border: 1.5px solid #d4e0e1; border-radius: 6px; 	font-family: 'Exo 2', sans-serif; font-size: 13px; 	padding: 6px 8px; color: #1a2420; }  /* Повзунок ціни (класичний jQuery UI) */ .ct-sidebar .price_slider .ui-slider-range { background: #274C4F; } .ct-sidebar .price_slider .ui-slider-handle { background: #274C4F; border-color: #274C4F; } .ct-sidebar .price_slider_wrapper .price_slider { background: #E2EDEF; }  /* Кнопка «Застосувати» / submit */ .ct-sidebar .wc-block-components-filter-submit-button, .ct-sidebar button[type="submit"], .ct-sidebar .wp-block-woocommerce-product-filters button[type="submit"], .ct-sidebar .wp-block-woocommerce-product-filter button[type="submit"], .ct-sidebar .wc-block-product-filter__button, .ct-sidebar .widget_price_filter .button, .ct-sidebar .price_slider_amount .button { 	background: #274C4F !important; 	color: #fff !important; 	border: none !important; 	border-radius: 8px !important; 	padding: 10px 16px !important; 	font-family: 'Exo 2', sans-serif !important; 	font-size: 13px !important; 	font-weight: 700 !important; 	width: 100% !important; 	cursor: pointer !important; 	transition: background 0.15s !important; 	display: block; } .ct-sidebar .wc-block-components-filter-submit-button:hover, .ct-sidebar button[type="submit"]:hover, .ct-sidebar .wc-block-product-filter__button:hover, .ct-sidebar .price_slider_amount .button:hover { 	background: #152420 !important; }  /* ── СІРИЙ БАНЕР BLOCKSY (archive hero) ── */ /*   Blocksy рендерить свій шаблон архіву (article#post-382) у ct-container-full   ПЕРЕД site-main — це дає сірий блок з дублюючим заголовком і хлібними крихтами.   Ховаємо тільки на сторінках WooCommerce-архіву. */ :is(.woocommerce-archive, .woocommerce-shop) .ct-container-full[data-content="normal"] {   display: none !important; }  /* ── АДАПТИВ ── */ @media (max-width: 1024px) { 	.vc-products-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) {  	/* --- Container: 10px padding --- */ 	:is(.woocommerce-archive, .woocommerce-shop) .site-main .ct-container, 	:is(.woocommerce-archive, .woocommerce-shop) .ct-container { 		padding-left: 10px !important; 		padding-right: 10px !important; 	}  	/* --- Sidebar grid: 1 column. 	     CRITICAL: Blocksy sidebar.min.css sets [data-sidebar=left]>section{grid-column:2}. 	     In a 1-col grid that pushes section into an implicit auto-width column. 	     Fix: force section to grid-column:1. --- */ 	:is(.woocommerce-archive, .woocommerce-shop) [data-sidebar="left"] { 		grid-template-columns: 1fr !important; 	} 	:is(.woocommerce-archive, .woocommerce-shop) [data-sidebar="left"] > section { 		grid-column: 1 !important; 		width: 100% !important; 		min-width: 0; 	}  	/* --- Hide sidebar (opens via Filtration drawer) --- */ 	:is(.woocommerce-archive, .woocommerce-shop) #sidebar, 	:is(.woocommerce-archive, .woocommerce-shop) aside { 		display: none !important; 	}  	/* --- vc-wrap: no side padding (container provides 10px) --- */ 	.vc-wrap { 		padding: 8px 0 !important; 	}  	/* --- Products: 2 columns, gap 8px --- */ 	.vc-products-grid { 		grid-template-columns: repeat(2, 1fr) !important; 		gap: 10px !important; 	}  	/* --- Brands carousel: horizontal scroll, 33% per card --- */ 	.vc-brands-carousel-wrap { 		overflow: hidden; 	} 	.vc-brands-carousel-inner { 		overflow-x: auto; 		-webkit-overflow-scrolling: touch; 	} 	.vc-brand-card { 		flex: 0 0 33.333%; 		min-width: 0; 	} 	.vc-brands-arrow { display: none; }  	/* --- Typography --- */ 	.vc-cat-title { font-size: 20px; } 	.vc-pcard-img { height: 140px; } 	.vc-pcard-price-row .price { font-size: 18px; }  	/* --- Filter bar: show mobile row (Filter + Sort buttons), hide desktop rows --- */ 	.vc-filter-top     { display: none; } 	.vc-filter-sortrow { display: none; } 	.vc-filter-quick   { display: none; } 	.vc-mobile-filter-row { display: flex; } 	.vc-mob-filter-btn, 	.vc-mob-sort-btn   { display: flex; flex: 1; } 	
  .vc-btn-cart { width:40px; height:40px; padding:0; justify-content:center; border-radius:10px; }
  .vc-btn-text { display:none; }
  .vc-mobile-filter-fab { display: none !important; } }  /* ════════════════════════════════════════════════════════════════    Повна ширина на сторінці категорії    Blocksy ставить width:var(--theme-container-width)≈90vw    Тут перевизначаємо обидва — контейнер і vc-wrap    ════════════════════════════════════════════════════════════════ */ :is(.woocommerce-archive, .woocommerce-shop) .site-main .ct-container {   width: 100% !important;   max-width: 100% !important;   box-sizing: border-box; }  /* ════════════════════════════════════════════════════════════════    Симетрія і gap — виправляємо Blocksy sidebar grid    ════════════════════════════════════════════════════════════════ */  /* Ширина sidebar 260px замість 27%, gap 20px замість 4% (~75px) */ :is(.woocommerce-archive, .woocommerce-shop) [data-sidebar="left"] { 	--sidebar-width: 260px; 	--sidebar-gap: 20px; }  /* vc-wrap: прибираємо бокові відступи — ct-container вже дає 20px зліва і справа.    Без цього: право = 20px(container) + 20px(vc-wrap) = 40px, тоді як ліво = 20px */ :is(.woocommerce-archive, .woocommerce-shop) .vc-wrap { 	padding-left: 0; 	padding-right: 0; }  /* .vc-layout gap = 20px (на випадок якщо буде використовуватись) */ .vc-layout { 	gap: 20px !important; } 

/* ============================================================
   Remove scroll inside filter blocks -- show all options inline
   ============================================================ */

.ct-sidebar .wc-block-product-filter,
.ct-sidebar .wc-block-components-panel__content,
.ct-sidebar .wc-block-attribute-filter__options,
.ct-sidebar .wc-block-product-filter__options,
.ct-sidebar ul.wc-block-checkbox-list,
.ct-sidebar .wc-block-checkbox-list {
	max-height: none !important;
	overflow: visible !important;
	overflow-y: visible !important;
}

/* Override inline style max-height / overflow set by JS */
.ct-sidebar [style*=""max-height""],
.ct-sidebar [style*=""overflow""] {
	max-height: none !important;
	overflow: visible !important;
}

.added_to_cart,
a.added_to_cart,
.woocommerce-message a.button,
.wc-forward {
  display: none !important;
}