body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666;
	/* базовий текст пропорційно більший на більших екранах (було
	   фіксовано 12px скрізь) — плавно росте від 13px на мобільному
	   до 15px, починаючи приблизно з планшета, і лишається таким далі */
	font-size: clamp(13px, 0.45vw + 11.5px, 15px);
	line-height: 1.65;
	width: 100%;
}
/* на телефоні деякі блоки (скляні пігулки з тінями/бордерами, negative-margin
   рядки bootstrap) на пару пікселів виходили за ширину екрана — це давало
   горизонтальний скрол на всій сторінці; ховаємо його на рівні html/body,
   не змінюючи ширину/розташування самого контенту */
@media (max-width: 767px) {
	html, body {
		overflow-x: hidden;
	}
}
/* ==== Широкоекранний макет ====
   Перекриває фіксовану ширину .container з Bootstrap (750/970/1170px)
   Підключається ПІСЛЯ bootstrap.min.css, тому спрацьовує без !important */
.container {
	width: 100%;
	max-width: 1600px;
	padding-left: 30px;
	padding-right: 30px;
}
@media (max-width: 767px) {
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* дуже широкі/великі монітори (2K, 4K, ultrawide) — контейнер плавно
   розтягується відносно ширини екрана замість фіксованої стелі в 1600px,
   інакше по боках лишається величезне порожнє поле. Стеля 2200px, щоб
   текст не розтягувався до нечитабельної довжини рядка на 4K+ */
@media (min-width: 1600px) {
	.container {
		max-width: clamp(1600px, 92vw, 2200px);
	}
	.category-showcase-item {
		max-width: 340px;
	}
	.category-showcase-icon {
		width: 112px;
		height: 112px;
	}
	.category-showcase-icon .fa {
		font-size: 42px;
	}
	.subcategory-card img {
		max-width: 340px;
		max-height: 340px;
	}
	/* сторінка товару — фото й панель купівлі також пропорційно більші,
	   а не просто з більшими порожніми полями навколо на великому екрані */
	.thumbnails > li:first-child > a.thumbnail {
		max-width: 560px;
	}
	.product-view[data-product-variant="3"] .product-block-gallery {
		flex: 0 1 620px;
	}
	.product-view[data-product-variant="3"] .product-block-buy {
		flex: 0 0 440px;
	}
	.product-view[data-product-variant="4"] .product-block-gallery {
		flex: 0 1 560px;
	}
	.product-view[data-product-variant="4"] .product-block-buy {
		flex: 0 1 440px;
	}
	/* всі варіанти картки товару — верхній ряд (фото+ціна) просто вищий на
	   великому екрані, ширини/розташування блоків не чіпаємо; блоки й так
	   тягнуться на всю висоту ряду (align-items:stretch вже є в базовому
	   правилі .product-top-row) */
	.product-view .product-top-row {
		min-height: 520px;
	}
	/* заголовки й ціна на картках товару — ще трохи більші на дуже
	   широких моніторах, пропорційно до решти макета */
	h1 { font-size: 40px; }
	h2 { font-size: 33px; }
	h3 { font-size: 25px; }
	h4 { font-size: 18px; }
	.product-thumb .price-new {
		font-size: 20px;
	}
	.price-ask {
		font-size: 18px;
	}
	.price-gpl {
		font-size: 17px;
	}
}
h1, h2, h3, h4, h5, h6 {
	color: #111;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults — трішки більші за попередні значення й
   додатково ростуть на великих екранах (див. @media min-width:1600px) */
h1 {
	font-size: 36px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 23px;
}
h4 {
	font-size: 17px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
}
a {
	/* var(--accent) сам по собі занадто світлий на білому фоні для
	   звичайного тексту посилань (напр. #5b8dd6 у пресеті "Мінімалізм"
	   дає лише ~3.4:1 — недостатньо для WCAG AA 4.5:1); --accent-dark
	   вже є в кожному пресеті й раніше використовувався тільки для
	   виділення тексту, тому переносимо на нього базовий колір посилань */
	color: var(--accent-dark);
}
a:hover {
	text-decoration: none;
}
.link-underline {
	text-decoration: underline;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 12px 10px 12px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid var(--glass-border);
	padding: 3px 20px;
	border-radius: 0 0 14px 14px;
	font-size: 12px;
	color: var(--glass-text-dim);
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	background-image: none;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
	/* на мобільному підменю розгортається інлайн в списку, а не спливає
	   карткою — прибираємо тінь/заокруглення, інакше лишається дивний
	   "недомальований" контур навколо пункту з підкатегоріями */
	#menu .dropdown-menu {
		border-radius: 0;
		box-shadow: none;
		border: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
	#menu .nav > li.dropdown > a:hover,
	#menu .nav > li.dropdown.open > a {
		border-radius: 0;
	}
}
/* content */
#content {
	min-height: 600px;
}
#product-category #content, #information-information #content {
	font-size: 13px;
}
/* опис товару — трохи більший текст на ПК для кращої читабельності,
   на телефоні лишається компактним як і був */
#product-product #tab-description {
	font-size: 13px;
}
@media (min-width: 992px) {
	#product-product #tab-description {
		font-size: 16px;
		line-height: 1.7;
	}
}
/* таблиці всередині опису товару (сирий HTML з адмінки, часто без
   bootstrap-класів) — інакше межі клітинок майже не видно на світлому
   фоні, а текст стоїть впритул до краю */
#tab-description table {
	width: 100%;
	border-collapse: collapse;
	margin: 15px 0;
	font-size: 13px;
}
#tab-description table th,
#tab-description table td {
	border: 1px solid #d5d7da;
	padding: 8px 12px;
	text-align: left;
}
#tab-description table th {
	background: #eceef0;
	font-weight: 600;
}
#tab-description table tr:nth-child(even) {
	background: #f6f7f8;
}
/* на телефоні таблиці (опис товару й характеристики) часто ширші за
   екран і ламають верстку картки — тепер контейнер скролиться по
   горизонталі, а сама таблиця не стискається до нечитабельного стану */
@media (max-width: 767px) {
	#tab-description, #tab-specification {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#tab-description table {
		width: auto;
		min-width: 100%;
	}
	#tab-specification table {
		width: auto;
		min-width: 480px;
	}
}
/* footer — liquid glass */
footer {
	margin-top: 50px;
	padding: 40px 0 25px 0;
	background: linear-gradient(180deg, rgba(245,246,248,0.55), rgba(255,255,255,0.35));
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 -8px 32px rgba(31,38,135,0.07);
	color: #333;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	margin: 25px 0;
}
footer a {
	color: #333;
	transition: color 0.2s ease;
}
footer a:hover {
	color: #000;
	text-decoration: none;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #111;
	margin-bottom: 15px;
}
footer p {
	color: #555;
	font-size: 11px;
	text-align: center;
	margin: 0;
}
footer .list-unstyled li {
	margin-bottom: 6px;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
/* назва товару в списку/сітці категорії — звичайний `a` глобально
   пофарбований у var(--accent) (для liquid-glass це фіолетовий #8b6bff),
   тут явно перебиваємо на чорний — картка товару завжди світла (біла),
   незалежно від пресету, бо на ній лежать фото товарів з білим фоном */
.product-thumb h4 a {
	color: #111;
}
.product-thumb h4 a:hover {
	color: var(--accent);
}
.product-thumb .caption {
	padding: 0 20px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
	min-height: 120px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
/* компактніша картка товару в категорії на телефоні — менше відступів,
   назва обмежена 2 рядками (щоб картки в ряду не "стрибали" по висоті
   через різну довжину назви), менші ціна/артикул/кнопки */
.product-row > [class*="col-"] {
	padding-left: 6px;
	padding-right: 6px;
}
.product-grid .product-thumb {
	border-radius: 12px;
	margin-bottom: 10px;
}
.product-grid .product-thumb .image {
	padding-top: 8px;
}
.product-grid .product-thumb .image img {
	max-height: 140px;
	object-fit: contain;
}
.product-grid .product-thumb .caption {
	padding: 0 8px;
}
.product-grid .product-thumb h4 {
	font-size: 13px;
	line-height: 1.3;
	margin: 6px 0 2px;
}
.product-grid .product-thumb h4 a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.product-grid .product-thumb .rating {
	padding-bottom: 4px;
}
.product-grid .product-thumb .price {
	margin: 2px 0;
}
.product-grid .product-thumb .price-new {
	font-size: 16px;
}
.product-grid .price-gpl {
	font-size: 12px;
	margin-right: 6px;
}
.product-grid .price-ask {
	font-size: 14px;
}
.product-grid .product-model {
	font-size: 11px;
	margin: 2px 0 6px;
}
.product-grid .product-thumb .button-group button {
	line-height: 30px;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
	font-size: 18px;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-right: 10px;
}
.price-gpl {
	color: #666;
	font-size: 16px;
	font-weight: 500;
	text-decoration: line-through;
	margin-right: 10px;
}
.price-ask {
	color: #e02b2b;
	font-weight: 700;
	font-size: 17px;
}
/* на сторінці товару "Уточнюйте" замінює велику h2-ціну, але сама по собі
   не мусить бути настільки ж гігантською — це не число, а підказка */
.price-ask-lg {
	font-size: 24px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	/* лишились кошик + порівняти (вішлист прибрали) — кошик ширший,
	   порівняти вузька іконка збоку */
	width: 75%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #666;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 25%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px\9;
    margin-right: -20px;
      margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child  .col-sm-4, html[dir=rtl] .container .row:first-child  .col-sm-5 {
  float: right;

}
html[dir=rtl] #cart .dropdown-menu {
  left: 0;
  right: auto;

}
@media (min-width: 768px) {
   
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0;
    }
    
    html[dir=rtl] .navbar-nav > li {
        float: right;
    }
   
}


/* ======================================================================
   ТЕМА — зміни ці змінні, щоб швидко перефарбувати весь хедер/футер
   ====================================================================== */
:root {
	/* фон сторінки (3 стопи градієнта) — чистий графіт, без кольорового тону */
	--page-bg-1: #8a8d92;
	--page-bg-2: #5f6167;
	--page-bg-3: #2c2d30;

	/* скло */
	--glass-bg: rgba(255, 255, 255, 0.14);
	--glass-bg-strong: rgba(255, 255, 255, 0.22);
	--glass-border: rgba(255, 255, 255, 0.28);
	--glass-blur: blur(28px) saturate(140%);
	--glass-shadow: 0 6px 28px rgba(0, 0, 0, 0.30);
	--glass-radius: 18px;

	/* окремий, більш непрозорий фон для випадних меню —
	   вони можуть опинитись і над темним, і над світлим вмістом,
	   тому мають лишатись читабельними в обох випадках */
	--dropdown-bg: rgba(26, 28, 32, 0.92);

	/* текст */
	--glass-text: rgba(255, 255, 255, 0.94);
	--glass-text-dim: rgba(255, 255, 255, 0.58);

	/* єдина висота елементів хедера, щоб пігулки були рівні */
	--header-item-h: 80px;

	/* монохромний акцент замість синього — графіт/хром */
	--accent: #33353a;
	--accent-dark: #1c1d1f;
	--accent-light: #6b6e74;
	--chrome-gradient: linear-gradient(180deg, #6e7178 0%, #33353a 55%, #1c1d1f 100%);
	--chrome-gradient-hover: linear-gradient(180deg, #7c7f86 0%, #3d3f45 55%, #232427 100%);

	/* окремий градієнт саме для кнопок (.btn-primary) — за замовчуванням
	   такий самий, як --chrome-gradient, але для пресетів з "яскравим"
	   --chrome-gradient (напр. liquid-glass) перевизначається на щось
	   спокійніше, щоб кнопка "Купити" не виглядала як райдужна плашка */
	--btn-gradient: var(--chrome-gradient);
	--btn-gradient-hover: var(--chrome-gradient-hover);

	/* фон "активного" пункту в списку категорій (сайдбар) — за
	   замовчуванням = --accent, але для яскравих пресетів (liquid-glass)
	   перевизначається на сіруватий тон, як у верхній частині шапки */
	--selection-bg: var(--accent);
	--selection-bg-dark: var(--accent-dark);

	/* форма іконки категорій на головній — коло за замовчуванням,
	   пресети можуть перевизначити на квадрат зі скругленням */
	--icon-radius: 50%;

	/* скруглення "пігулок" хедера (пошук/кошик/контакти/меню/крихти) —
	   за замовчуванням повністю округлі, окремо від --glass-radius карток,
	   щоб пресети з малим --glass-radius (напр. Мінімалізм) могли зробити
	   і ці елементи менш округлими — інакше лого виглядає майже квадратним
	   поруч з ідеально круглими кнопками */
	--pill-radius: 999px;
}

/* ======================================================================
   ПРЕСЕТИ ДИЗАЙНУ — перемикаються класом body.theme-preset-* (адмінка:
   Налаштування → Загальні → Дизайн вітрини). "graphite" — це :root вище,
   окремого класу не має. Кожен пресет перевизначає лише змінні з :root,
   тому решта CSS (скло, тіні, типографіка) підхоплює їх без змін.
   ====================================================================== */

/* Liquid Glass — темний, кольоровий, у стилі iOS/маркетингових сторінок Cisco */
body.theme-preset-liquid-glass {
	--page-bg-1: #171426;
	--page-bg-2: #100e1c;
	--page-bg-3: #050509;

	--glass-bg: rgba(255, 255, 255, 0.08);
	--glass-bg-strong: rgba(255, 255, 255, 0.16);
	--glass-border: rgba(255, 255, 255, 0.18);
	--glass-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
	--dropdown-bg: rgba(10, 9, 16, 0.92);

	--glass-text: rgba(255, 255, 255, 0.96);
	--glass-text-dim: rgba(255, 255, 255, 0.62);

	--accent: #8b6bff;
	--accent-dark: #5a3fd6;
	--accent-light: #c98bff;
	--chrome-gradient: linear-gradient(135deg, #7c5cff 0%, #d66bd0 50%, #ff9d6c 100%);
	--chrome-gradient-hover: linear-gradient(135deg, #8f72ff 0%, #e07fda 50%, #ffae82 100%);

	/* кнопки (.btn-primary, "Купити" тощо) і "активний" пункт у списку
	   категорій — сіруватий графітовий тон, як у верхній частині шапки
	   (глянцеве скло на темному фоні), БЕЗ фіолетового/райдужного
	   chrome-gradient — той лишається тільки для суто декоративних
	   елементів (іконки вітрини категорій, орб на фоні) */
	--btn-gradient: linear-gradient(135deg, #5c5e68 0%, #34363d 100%);
	--btn-gradient-hover: linear-gradient(135deg, #6c6e78 0%, #3f414a 100%);
	--selection-bg: #4a4c56;
	--selection-bg-dark: #34363d;
}
/* кольоровий розмитий "орб" — суто декоративний, повторює референс-скріншот.
   z-index: -1 (а не 0) — інакше цей fixed-елемент лягає ПОВЕРХ #content
   (він у звичайному потоці, без власного z-index, і за правилами stacking
   context програє будь-якому позиціонованому нащадку з рівнем 0). */
body.theme-preset-liquid-glass::before {
	content: '';
	position: fixed;
	right: -12vw;
	bottom: -18vh;
	width: 60vw;
	height: 60vw;
	max-width: 900px;
	max-height: 900px;
	background: conic-gradient(from 200deg, #7c5cff, #d66bd0, #ff9d6c, #7c5cff);
	filter: blur(90px) saturate(140%);
	opacity: 0.55;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

/* Ocean — світліше скло, синьо-бірюзовий акцент */
body.theme-preset-ocean {
	--page-bg-1: #7fb3c9;
	--page-bg-2: #3d7a94;
	--page-bg-3: #163c4d;

	--accent: #1d7a9c;
	--accent-dark: #135269;
	--accent-light: #4fb0d1;
	--chrome-gradient: linear-gradient(135deg, #4fb0d1 0%, #1d7a9c 55%, #135269 100%);
	--chrome-gradient-hover: linear-gradient(135deg, #63bcda 0%, #2688ab 55%, #1a6079 100%);
}

/* Sunset — теплий помаранчево-рожевий акцент */
body.theme-preset-sunset {
	--page-bg-1: #f2b28c;
	--page-bg-2: #d9738a;
	--page-bg-3: #4a2545;

	--glass-text: rgba(255, 255, 255, 0.96);
	--glass-text-dim: rgba(255, 255, 255, 0.68);

	--accent: #e0607d;
	--accent-dark: #a83f5b;
	--accent-light: #f08fa3;
	--chrome-gradient: linear-gradient(135deg, #f6a56b 0%, #e0607d 55%, #a83f5b 100%);
	--chrome-gradient-hover: linear-gradient(135deg, #f8b585 0%, #ea7893 55%, #b6516c 100%);
}

/* Мінімалізм — пласкі непрозорі картки без розмиття (backdrop-filter вимикається
   через --glass-blur: none), менші скруглення, монохромний акцент замість
   райдужного chrome-gradient. Той самий "скляний" каркас CSS, інші змінні. */
body.theme-preset-minimal {
	--page-bg-1: #3a3d42;
	--page-bg-2: #26282c;
	--page-bg-3: #131416;

	--glass-bg: rgba(30, 32, 36, 0.92);
	--glass-bg-strong: rgba(42, 44, 49, 0.97);
	--glass-border: rgba(255, 255, 255, 0.10);
	--glass-blur: none;
	--glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	--glass-radius: 20px;
	--dropdown-bg: rgba(24, 25, 28, 0.98);

	--glass-text: rgba(255, 255, 255, 0.92);
	--glass-text-dim: rgba(255, 255, 255, 0.52);

	--accent: #5b8dd6;
	--accent-dark: #3d6bb0;
	--accent-light: #86adea;
	--chrome-gradient: #3d5a80;
	--chrome-gradient-hover: #4a6d99;
	--btn-gradient: var(--chrome-gradient);
	--btn-gradient-hover: var(--chrome-gradient-hover);
	--selection-bg: var(--accent);
	--selection-bg-dark: var(--accent-dark);

	/* округла геометрія — коло для іконок і повністю округлі пігулки,
	   як і в решти "круглих" пресетів; відрізняється не формою, а
	   відсутністю розмиття/градієнтів (--glass-blur: none вище) */
	--icon-radius: 50%;
	--pill-radius: 999px;
}

/* Neon Tech — контрастний "техно" стиль: неоновий акцент, скляні картки
   підсвічуються кольором по контуру при наведенні, іконки категорій —
   шестикутник замість кола (клас нижче, поза системою --icon-radius,
   бо тут потрібна саме ця форма, а не просто інше скруглення) */
body.theme-preset-neon-tech {
	--page-bg-1: #0a0e14;
	--page-bg-2: #06181a;
	--page-bg-3: #020505;

	--glass-bg: rgba(0, 20, 22, 0.55);
	--glass-bg-strong: rgba(0, 30, 32, 0.7);
	--glass-border: rgba(0, 229, 199, 0.35);
	--glass-shadow: 0 6px 24px rgba(0, 229, 199, 0.12), 0 6px 28px rgba(0, 0, 0, 0.5);
	--glass-radius: 6px;
	--dropdown-bg: rgba(3, 12, 13, 0.95);

	--glass-text: rgba(255, 255, 255, 0.96);
	--glass-text-dim: rgba(180, 255, 245, 0.55);

	--accent: #00e5c7;
	--accent-dark: #007a69;
	--accent-light: #7bffe9;
	--chrome-gradient: linear-gradient(135deg, #00e5c7 0%, #00a3c4 55%, #0057b8 100%);
	--chrome-gradient-hover: linear-gradient(135deg, #4dffe0 0%, #33c2e0 55%, #2c7fd6 100%);
	--btn-gradient: var(--chrome-gradient);
	--btn-gradient-hover: var(--chrome-gradient-hover);
	--selection-bg: #00a68f;
	--selection-bg-dark: #007566;

	/* кутаста, "техно" геометрія — гострі прямокутники замість пігулок,
	   іконки категорій лишаються шестикутниками (окреме правило нижче) */
	--pill-radius: 6px;
}
body.theme-preset-neon-tech .product-thumb {
	border-top: 3px solid var(--accent);
}
body.theme-preset-neon-tech .product-thumb:hover,
body.theme-preset-neon-tech .category-showcase-item:hover {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(0, 229, 199, 0.25);
}
body.theme-preset-neon-tech .category-showcase-icon {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	border-radius: 0;
}

body {
	background:
		radial-gradient(1200px 600px at 12% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
		radial-gradient(1000px 600px at 92% 8%, rgba(255, 255, 255, 0.05), transparent 55%),
		radial-gradient(1000px 700px at 50% 110%, rgba(255, 255, 255, 0.04), transparent 60%),
		linear-gradient(160deg, var(--page-bg-1) 0%, var(--page-bg-2) 50%, var(--page-bg-3) 100%);
	background-attachment: fixed;
	font-family: 'Manrope', 'Open Sans', sans-serif;
}

/* ---- легка елегантна типографіка ---- */
header #logo h1 a, header #logo h1,
#menu #category {
	font-family: 'Manrope', sans-serif;
	font-weight: 300;
	letter-spacing: 0.02em;
}
footer h5 {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* ---- header: лого / пошук / контакти / кошик — скляні картки ---- */
header {
	position: relative;
	/* backdrop-filter на #logo/#search/#contacts/#cart створює для кожного
	   свій stacking context; без z-index тут їх випадні списки програють
	   #content (він теж на backdrop-filter) і ховаються під ним */
	z-index: 200;
	background: transparent;
	padding: 32px 0 0 0;
}
header #logo {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	padding: 0 14px;
	margin: 0 0 14px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--header-item-h);
	box-sizing: border-box;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
header #logo:hover {
	background: var(--glass-bg-strong);
}
header #logo img {
	max-height: 66px;
	width: auto;
}
header #logo a,
header #logo a:hover,
header #logo a:focus,
header #logo a:active,
header #logo img:hover,
header #logo img:focus,
header #logo img:active {
	outline: none;
	border: none;
	box-shadow: none;
}
header #logo h1 a, header #logo h1 {
	color: var(--glass-text);
	margin: 0;
}

#search {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	padding: 4px;
	overflow: hidden;
	height: var(--header-item-h);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0 0 14px 0;
	transition: background 0.2s ease;
}
#search:focus-within {
	background: var(--glass-bg-strong);
}
.mobile-search-icon {
	display: none;
}
#search .input-lg {
	background: transparent;
	border: none;
	color: var(--glass-text);
	box-shadow: none;
	height: 100%;
}
#search .input-lg::placeholder {
	color: var(--glass-text-dim);
}
#search .input-group-btn .btn-lg {
	background: transparent;
	background-image: none;
	border: none;
	color: var(--glass-text);
	box-shadow: none;
	text-shadow: none;
}
#search .input-group-btn .btn-lg:hover {
	color: #fff;
}

#cart {
	margin-bottom: 14px;
}
#cart > .btn {
	background: var(--glass-bg);
	background-image: none;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	color: var(--glass-text);
	padding: 12px 22px;
	height: var(--header-item-h);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
#cart > .btn:hover, #cart.open > .btn {
	background: var(--glass-bg-strong);
	color: #fff;
}
#cart > .btn .fa-shopping-cart {
	font-size: 22px;
	margin-right: 12px;
}
#cart-total {
	font-size: 15px;
	font-weight: 700;
	min-width: 12px;
	text-align: center;
}
#cart .dropdown-menu {
	background: var(--dropdown-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
	color: var(--glass-text);
}
/* вміст міні-кошика — стандартні bootstrap-таблиці мають власний білий
   фон/сині лінки/світлі рамки, які не узгоджені з темним скляним фоном
   випадного меню вище */
#cart .dropdown-menu .table {
	color: var(--glass-text);
}
#cart .dropdown-menu .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: transparent;
}
#cart .dropdown-menu .table > tbody > tr > td {
	border-color: var(--glass-border);
}
#cart .dropdown-menu a {
	color: var(--glass-text);
}
#cart .dropdown-menu a:hover {
	color: #fff;
}
#cart .dropdown-menu li p .fa {
	margin-right: 6px;
}
#cart .dropdown-menu small {
	color: var(--glass-text-dim);
}
#cart .dropdown-menu .img-thumbnail {
	background: #fff;
	border-radius: 10px;
	border-color: var(--glass-border);
}
#cart .dropdown-menu .btn-danger {
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
}
#cart .dropdown-menu .btn-danger:hover {
	background: rgba(224, 43, 43, 0.7);
}

/* ---- контакти (нова кнопка в хедері) ---- */
.header-row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}
.mobile-search-toggle-input {
	display: none;
}
#contacts {
	display: flex;
	align-items: stretch;
	height: var(--header-item-h);
	box-sizing: border-box;
	margin-bottom: 14px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	transition: background 0.2s ease;
}
#contacts:hover, #contacts.open {
	background: var(--glass-bg-strong);
}
#contacts .contacts-main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 10px 0 20px;
	color: var(--glass-text);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#contacts .contacts-main:hover, #contacts .contacts-main:focus {
	color: #fff;
	text-decoration: none;
}
#contacts .contacts-main .fa-phone {
	font-size: 18px;
}
#contacts .contacts-toggle {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-left: 1px solid var(--glass-border);
	color: var(--glass-text-dim);
}
#contacts .contacts-toggle:hover, #contacts.open .contacts-toggle {
	color: #fff;
}
#contacts .dropdown-menu {
	background: var(--dropdown-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
	min-width: 240px;
	padding: 8px 0;
}
#contacts .dropdown-menu li > a {
	color: var(--glass-text);
	padding: 8px 18px;
}
#contacts .dropdown-menu li > a .fa {
	margin-right: 8px;
	width: 14px;
	text-align: center;
}
#contacts .dropdown-menu li > a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
#contacts .dropdown-menu .divider {
	background: var(--glass-border);
	margin: 6px 0;
}
#contacts .copy-email {
	cursor: pointer;
}
@media (min-width: 768px) {
	#contacts:hover .dropdown-menu {
		display: block;
	}
}
#menu {
	position: relative;
	z-index: 100;
	background: var(--glass-bg);
	background-image: none;
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	margin-bottom: 20px;
}
#menu .nav > li > a {
	color: var(--glass-text);
	text-shadow: none;
	font-weight: 500;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--pill-radius);
	color: #fff;
}
#menu .dropdown-menu {
	background: var(--dropdown-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
}
#menu .dropdown-inner a {
	color: var(--glass-text);
}
#menu .dropdown-inner li a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
#menu #category {
	color: var(--glass-text);
	text-shadow: none;
}
/* пункт меню з підкатегоріями: текст-посилання (клік → перехід на сторінку
   категорії) окремо від шеврона (клік/ховер → відкрити випадний список) */
#menu .nav > li.dropdown {
	display: flex;
	align-items: stretch;
}
#menu .nav > li.dropdown > a {
	padding-right: 6px;
}
#menu .nav > li.dropdown > .dropdown-toggle {
	display: flex;
	align-items: center;
	/* ліве значення підняте з 2px до 8px — надто малий відступ від
	   сусіднього посилання-назви категорії, Lighthouse позначав область
	   дотику як занадто щільну */
	padding: 12px 14px 12px 8px;
	font-size: 10px;
	color: var(--glass-text-dim);
	cursor: pointer;
}
#menu .nav > li.dropdown > .dropdown-toggle:hover,
#menu .nav > li.dropdown.open > .dropdown-toggle {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}
#menu .dropdown-inner {
	gap: 24px;
	padding: 4px 4px 0;
}
#menu .dropdown-inner ul {
	padding-right: 10px;
}

/* ---- футер: кожен блок як окрема тепла скляна картка ---- */
footer {
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
	border-top: none;
	margin-top: 50px;
	padding: 40px 0;
}
footer h5 {
	color: var(--glass-text);
}
footer a {
	color: var(--glass-text-dim);
}
footer a:hover {
	color: var(--glass-text);
}
footer hr {
	border-bottom: 1px solid var(--glass-border);
	margin: 25px 20px;
}
footer p {
	color: var(--glass-text-dim);
	text-align: center;
}

/* ------------------------------------------------------------------
   Футер — лого, контакти, центрований макет
   ------------------------------------------------------------------ */
.footer-logo-img {
	max-height: 40px;
	width: auto;
}
.footer-brand-name {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.01em;
	color: var(--glass-text);
}
.footer-contacts-inline li {
	margin-bottom: 6px;
}
.footer-contacts-inline .fa {
	width: 16px;
	text-align: center;
	margin-right: 4px;
}
.footer-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	background: linear-gradient(rgba(12, 10, 20, 0.55), rgba(12, 10, 20, 0.55)), var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	padding: 30px 24px;
}
.footer-contacts-row, .footer-links-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	padding: 0;
	margin: 0;
}
.footer-contacts-row li, .footer-links-row li {
	margin: 0;
}
/* ------------------------------------------------------------------
   Головна сторінка — блок переваг (USP) і "Популярні товари"
   ------------------------------------------------------------------ */
.home-usp {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0;
}
.home-usp-item {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 220px;
	padding: 18px 20px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
	color: var(--glass-text);
}
.home-usp-item .fa {
	font-size: 26px;
	color: var(--accent);
	width: 30px;
	text-align: center;
}
.home-usp-item span {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 14px;
}
.home-section-title {
	color: var(--glass-text);
	margin: 32px 0 18px;
}
@media (max-width: 767px) {
	.home-usp {
		margin: 20px 0;
	}
	.home-usp-item {
		flex: 1 1 calc(50% - 8px);
		padding: 14px 16px;
	}
}

/* ======================================================================
   GENERAL CONTENT — узгодження решти сторінки з liquid glass темою
   ====================================================================== */

/* сторінки "Інформація" (Оплата, Доставка тощо) — прибираємо фонові плями,
   що лишаються в тексті після вставки з Word/Google Docs через редактор CMS */
#information-information [style*="background"] {
	background: transparent !important;
}

/* "Порівняння товарів" на сторінці категорії — був у стандартному
   синьому кольорі Bootstrap замість кольорів теми */
#compare-total {
	color: var(--glass-text-dim);
}
#compare-total:hover, #compare-total:focus {
	color: var(--glass-text);
}

/* банер / карусель брендів — картка замість голого прямокутника */
/* .swiper-viewport специфічність підбита під catalog/view/javascript/jquery/swiper/css/opencart.css,
   що підключається пізніше через addStyle() і інакше перекриває ці правила */
div.swiper-viewport {
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	overflow: hidden;
	box-shadow: var(--glass-shadow);
	margin-bottom: 30px;
}
div.carousel.swiper-viewport {
	background: var(--glass-bg-strong);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	padding: 20px 10px;
}
.swiper-pager .swiper-button-next,
.swiper-pager .swiper-button-prev {
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	box-shadow: var(--glass-shadow);
}

/* головний банер (slideshow) — картинка на всю висоту/ширину картки,
   замість "img-responsive" (max-width:100%), яка лишає порожнє поле,
   якщо оригінал вужчий за контейнер */
.slideshow.swiper-viewport,
.slideshow .swiper-container,
.slideshow .swiper-slide {
	height: 420px;
}
.slideshow .swiper-slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
@media (max-width: 991px) {
	.slideshow.swiper-viewport,
	.slideshow .swiper-container,
	.slideshow .swiper-slide {
		height: 300px;
	}
}
@media (max-width: 767px) {
	.slideshow.swiper-viewport,
	.slideshow .swiper-container,
	.slideshow .swiper-slide {
		height: 200px;
	}
}

/* хлібні крихти — скляна пігулка замість "відірваного кутка" */
.breadcrumb {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--pill-radius);
	box-shadow: var(--glass-shadow);
	padding: 10px 22px;
}
.breadcrumb > li {
	text-shadow: none;
	padding: 0 8px;
}
.breadcrumb > li a {
	color: var(--glass-text);
}
.breadcrumb > li + li:before {
	content: '/';
	color: var(--glass-text-dim);
	padding: 0 4px;
}
.breadcrumb > li:after {
	display: none;
}
/* на телефоні хлібні крихти займали кілька рядків (кожен пункт зі своїм
   рядком) — тепер один рядок, що скролиться по горизонталі, замість
   високого блоку зверху сторінки */
@media (max-width: 767px) {
	.breadcrumb {
		padding: 8px 16px;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.breadcrumb > li {
		display: inline-block;
		padding: 0 6px;
		font-size: 12px;
	}
}

/* картки товарів */
.product-thumb {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-thumb:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.product-thumb .image {
	padding-top: 15px;
}
.product-thumb .button-group {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	background-color: #f7f7f8;
	border-radius: 0 0 16px 16px;
}
.product-thumb .button-group button {
	background-color: transparent;
}
.product-thumb .button-group button:hover {
	background-color: #ececee;
}
/* артикул знизу картки (категорія/головна) */
.product-model {
	color: #999;
	font-size: 12px;
	margin: 4px 0 8px;
}

/* сітка карток товару (категорія, "Популярні товари" на головній) — рядок
   стає flex, щоб усі картки в ряду мали однакову висоту незалежно від
   довжини назви товару, а кнопка "купити" завжди лежала внизу картки.
   Раніше вирівнювання тримали на фіксованому min-height у .caption — саме
   він і створював порожнє поле під ціною на коротких картках */
.product-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.product-row > [class*="col-"] {
	display: flex;
}
/* сторінка категорії має бокову панель, тож у контенту більше вільної
   ширини — стандартна 12-колонкова сітка bootstrap не ділиться рівно на
   5, тому ширину картки тут задаємо напряму, а не через col-lg-3/col-md-4
   з common.js. Межа для "5 в ряд" — 1920px (справжній десктопний монітор;
   1600px виявився типовою шириною екрана НОУТБУКА, а не монітора, тож
   ноутбук 1600x900 без Retina помилково потрапляв у "просторий" режим),
   АЛЕ для Retina/HiDPI-ноутбуків (MacBook 1512-1536px CSS-px, min-resolution
   1.5dppx = звичайний devicePixelRatio 2) поріг лишається 1500px — однакова
   CSS-ширина не означає однаковий фізичний розмір екрана, Retina-ноутбук
   при 1512-1536px реально просторіший */
@media (min-width: 1920px), (min-width: 1500px) and (min-resolution: 1.5dppx) {
	#product-category .product-row > [class*="col-"] {
		flex: 0 0 20%;
		max-width: 20%;
	}
}
@media (min-width: 992px) and (max-width: 1499px), (min-width: 1500px) and (max-width: 1919px) and (max-resolution: 1.49dppx) {
	#product-category .product-row > [class*="col-"] {
		flex: 0 0 25%;
		max-width: 25%;
	}
}
.product-grid .product-thumb {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.product-grid .product-thumb > div:last-child {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.product-grid .product-thumb .caption {
	flex: 1 1 auto;
	min-height: 0;
}

/* кнопки — плаский заокруглений iOS-стиль замість градієнтів */
.btn {
	border-radius: 999px;
	box-shadow: none;
	text-shadow: none;
	border: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-primary {
	background: var(--btn-gradient);
	color: #f4f4f5;
	border: 1px solid #45474d;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
	background: var(--btn-gradient-hover);
}
.btn-default {
	background: #eef0f2;
	background-image: none;
	color: #444;
	border: none;
}
.btn-default:hover {
	background: #e2e5e8;
}
.btn-inverse {
	background: #2b2d31;
	background-image: none;
}
.btn-inverse:hover {
	background: #1c1d20;
}
.btn:active {
	transform: scale(0.98);
}

/* поля форм — м'якше заокруглення */
.form-control {
	border-radius: 12px;
	box-shadow: none;
	border: 1px solid #ddd;
}
.form-control:focus {
	border-color: var(--accent-light);
	box-shadow: 0 0 0 3px rgba(51, 53, 58, 0.12);
}

/* панелі/картки на сторінках акаунту, категорій тощо */
.panel {
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.panel-heading {
	border-radius: 16px 16px 0 0 !important;
}

/* світла скляна панель під основним контентом — інакше заголовки/текст
   сторінок категорій, товару, акаунту тощо рендеряться прямо на темному
   фоні body і стають нечитабельними (текст успадковує старі темні кольори) */
#content {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 28px 30px;
	margin-bottom: 30px;
}
/* на головній #content містить лише банер/карусель — вони вже власні скляні
   картки на темному тлі, тому тут світлу панель-обгортку прибираємо */
#common-home #content {
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 0;
}
/* H1 потрібен лише для SEO (Google хоче H1 на сторінці) — людям він не
   показується, ховаємо його стандартним прийомом (клас .sr-only), сам
   текст лишається доступним пошуковим системам та скрін-рідерам */
.home-h1 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* головне фото товару — обмежуємо ширину, інакше невеликі оригінали
   розтягуються на всю колонку і виглядають розмито/спотворено */
.thumbnails > li:first-child {
	width: 100%;
	margin-left: 0;
	text-align: center;
}
.thumbnails > li:first-child > a.thumbnail {
	display: inline-block;
	max-width: 420px;
	width: 100%;
}
.thumbnails > li:first-child img {
	width: 100%;
	height: auto;
}

/* список категорій зліва/справа — та ж скляна картка, що й #content,
   замість голих білих рядків bootstrap .list-group-item на темному тлі */
#column-left, #column-right {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 16px;
	margin-bottom: 30px;
	height: fit-content;
	box-sizing: border-box;
}
/* компенсуємо гаттер бутстрапа, який "з'їли" власним padding вище —
   інакше сайдбар і #content торкаються впритул */
#column-left {
	width: calc(25% - 20px);
	margin-right: 20px;
}
#column-right {
	width: calc(25% - 20px);
	margin-left: 20px;
}
/* різні ноутбуки й монітори можуть мати однакову ширину вікна в CSS-px
   (HiDPI-екран ноутбука і великий монітор — це не одне й те саме, але
   media query бачить лише ширину), тож ділимо на три реальні діапазони:
   - до 992px — панель ховається (мобільний/планшет), як і було
   - 992-1919px звичайний екран (АБО 992-1499px Retina) — панель трохи
     вужча за стандартні 25%, але не крихітна, і 4 картки товару в рядок.
     1600px навмисно лишається тут — це типова ширина ноутбука, не монітора
   - від 1920px звичайний екран (справжній десктопний монітор), АБО від
     1500px Retina/HiDPI (min-resolution 1.5dppx, як у MacBook) — панель
     вузька, 5 карток у ряд */
@media (min-width: 992px) and (max-width: 1499px), (min-width: 1500px) and (max-width: 1919px) and (max-resolution: 1.49dppx) {
	#column-left, #column-right {
		width: calc(20% - 20px);
	}
	#column-left .list-group a, #column-right .list-group a {
		font-size: 13px;
		padding: 8px 12px;
	}
}
@media (min-width: 1920px), (min-width: 1500px) and (min-resolution: 1.5dppx) {
	#column-left, #column-right {
		width: calc(15% - 20px);
	}
	/* content поруч має розширюватись на тій самій межі, що й звуження
	   панелі — раніше content розширювався через bootstrap-клас col-lg-10
	   від 1200px, а панель звужувалась лише від 1600px, тож між ними
	   разом вони давали 103% і не влазили в рядок */
	#product-category #content.col-sm-9 {
		width: 85%;
	}
}
#column-left .list-group, #column-right .list-group {
	margin: 0;
}
#column-left .list-group a, #column-right .list-group a {
	border: none;
	border-radius: 10px;
	color: #555;
	padding: 9px 14px;
	margin-bottom: 2px;
}
#column-left .list-group a.active, #column-right .list-group a.active {
	background: var(--selection-bg);
	color: #fff;
	text-shadow: none;
}
#column-left .list-group a:hover, #column-right .list-group a:hover {
	background: #eef0f2;
	color: #222;
	border: none;
	text-shadow: none;
}
#column-left .list-group a.active:hover, #column-right .list-group a.active:hover {
	background: var(--selection-bg-dark);
	color: #fff;
}

/* картки підкатегорій (Refine Search) — зображення + назва замість голого тексту */
.subcategory-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 25px;
}
/* на телефоні фото+опис категорії (велике зображення й текст над товарами)
   займали багато місця зверху — переносимо цей блок в кінець сторінки,
   під товари, не змінюючи нічого на ПК */
@media (max-width: 767px) {
	#product-category #content {
		display: flex;
		flex-direction: column;
	}
	#product-category #content > .category-top-info {
		order: 10;
	}
}
.subcategory-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 0 0 calc(25% - 10.5px);
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 12px 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	text-align: center;
	color: #444;
	transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.subcategory-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
	color: var(--accent);
	text-decoration: none;
}
.subcategory-card img {
	width: 85%;
	height: 85%;
	max-width: 280px;
	max-height: 280px;
	object-fit: contain;
}
.subcategory-card .fa-folder-o {
	font-size: 40px;
	color: #ccc;
}
.subcategory-card span {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

/* ======================================================================
   МОБІЛЬНА АДАПТАЦІЯ (< 768px) — компактний хедер + меню категорій
   ====================================================================== */
@media (max-width: 767px) {
	header {
		padding: 14px 0;
	}
	/* лого, пошук (іконкою), телефон, кошик — все в один рядок */
	.header-row {
		position: relative;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}
	.header-row > div {
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}
	.mobile-search-toggle-input {
		display: none;
	}

	/* прибираємо десктопний margin-bottom:14px (робив відступ до меню) —
	   інакше колонка виходить на 14px вища за пошук і вони "пливуть" відносно
	   одне одного при align-items:center */
	header #logo, #search, #contacts, #cart {
		margin: 0;
	}
	header #logo, #cart > .btn {
		height: 48px;
	}
	.header-col-logo {
		flex: 1 1 auto;
		min-width: 0;
	}
	header #logo {
		padding: 0 12px;
		overflow: hidden;
	}
	header #logo img {
		max-height: 28px;
		max-width: 100%;
	}

	/* пошук згорнутий в кнопку-лупу; повне поле розкривається по тапу */
	.header-col-search {
		/* bootstrap ставить position:relative на всі .col-sm-*, через це
		   абсолютно позиційований #search розтягувався по цій вузькій
		   колонці (48px), а не по всьому #header-row */
		position: static;
		flex: 0 0 auto;
	}
	.mobile-search-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: var(--glass-bg);
		border: 1px solid var(--glass-border);
		color: var(--glass-text);
		margin: 0;
		cursor: pointer;
	}
	#search {
		display: none;
	}
	#header-row:has(#mobile-search-toggle:checked) .mobile-search-icon {
		background: var(--glass-bg-strong);
		color: #fff;
	}
	#header-row:has(#mobile-search-toggle:checked) #search {
		display: flex;
		position: absolute;
		left: 12px;
		right: 12px;
		top: 100%;
		margin: 8px 0 0 0;
		height: 52px;
		z-index: 10;
	}

	/* телефон — тільки іконки, номер ховаємо, лишається місця мало */
	.header-col-contacts {
		flex: 0 0 auto;
	}
	#contacts {
		height: 48px;
	}
	#contacts .contacts-main span.hidden-xs {
		display: none;
	}
	#contacts .contacts-main {
		flex: 0 0 auto;
		padding: 0 12px;
	}
	#contacts .contacts-toggle {
		flex: 0 0 auto;
		padding: 0 10px;
	}

	.header-col-cart {
		flex: 0 0 auto;
	}
	#cart > .btn {
		padding: 0 14px;
	}

	/* смуга з кнопкою "Categories" — та сама скляна пігулка, що й решта хедера */
	#menu {
		border-radius: var(--glass-radius);
	}
	#menu .navbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4px 6px 4px 18px;
		min-height: 56px;
	}
	#menu #category {
		float: none;
		padding-left: 0;
		line-height: normal;
	}
	#menu .btn-navbar {
		float: none;
		background: var(--glass-bg-strong);
		background-image: none;
		border: 1px solid var(--glass-border);
		border-radius: var(--pill-radius);
		box-shadow: none;
		padding: 10px 16px;
	}
	#menu .btn-navbar:hover, #menu .btn-navbar:focus {
		background: rgba(255, 255, 255, 0.3);
		background-image: none;
	}

	/* трохи компактніший внутрішній відступ контенту на вузьких екранах */
	#content {
		padding: 18px 16px;
	}
	#column-left, #column-right {
		padding: 12px;
	}
	.subcategory-card {
		flex: 0 0 calc(50% - 7px);
	}
	.subcategory-card img {
		width: 72px;
		height: 72px;
	}

	/* компактніший футер на мобільному — менше повітря між картками */
	footer {
		margin-top: 24px;
		padding: 20px 0;
	}
	footer hr {
		margin: 14px 20px;
	}

	.product-view[data-product-variant="3"] .product-block-buy {
		position: static;
	}
	.product-view[data-product-variant="3"] .product-top-row,
	.product-view[data-product-variant="4"] .product-top-row {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
   СТОРІНКА ТОВАРУ — 3 варіанти картки, перемикаються через атрибут
   data-product-variant на .product-view (кнопки зверху сторінки —
   тимчасова панель лише для перегляду клієнтом, не для покупців)
   ====================================================================== */
.product-view {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 30px;
}
.product-top-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}
.product-block-gallery {
	flex: 1 1 380px;
}
.product-block-buy {
	flex: 1 1 300px;
}
.product-block-info {
	flex: 1 1 100%;
}

/* +/- кнопки біля кількості — фішка лише для варіантів 3 і 4 (Преміум,
   Професійний), в інших варіантах лишається звичайне поле вводу */
.qty-btn {
	display: none;
}

/* спільне для варіантів 2 і 3: головне фото — у м'якій нейтральній рамці,
   щоб білий фон самого фото не "висів у порожнечі" на тлі сторінки */
.product-block-gallery .thumbnails > li:first-child > a.thumbnail {
	background: #f7f7f8;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	padding: 24px;
	box-sizing: border-box;
}

/* ---------- Варіант 1 — Оновлений: фото і блок купівлі лежать в одній
   спільній білій картці зверху (без "голого" фото на тлі сторінки) ---------- */
.product-view[data-product-variant="1"] .product-top-row {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	padding: 24px;
}
.product-view[data-product-variant="1"] .product-block-gallery .thumbnails > li:first-child > a.thumbnail {
	background: transparent;
	border: none;
	padding: 0;
}

/* ---------- Варіант 2 — Блоками: фото і купівля — двома окремими
   картками поряд зверху, опис — окремою карткою під ними ---------- */
.product-view[data-product-variant="2"] .product-block {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	padding: 24px;
}
/* тут фото вже в своїй картці — внутрішня рамка з базового правила зайва */
.product-view[data-product-variant="2"] .product-block-gallery .thumbnails > li:first-child > a.thumbnail {
	background: transparent;
	border: none;
	padding: 0;
}

/* ---------- Варіант 3 — Преміум: справжнє "скло" (розмиття, напівпрозорість),
   grid на всю ширину (без порожнього місця праворуч), декоративне сяйво
   позаду фото, вторинні дії (закладки/порівняння) — окремим рядком під
   кнопкою купівлі, а не купкою іконок зверху ---------- */
.product-view[data-product-variant="3"] .product-top-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: stretch;
	gap: 24px;
}
.product-view[data-product-variant="3"] .product-block-gallery {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: 32px;
	box-sizing: border-box;
	overflow: hidden;
}
/* декоративне кольорове сяйво позаду фото — суто "преміальний" акцент */
.product-view[data-product-variant="3"] .product-block-gallery::before {
	content: '';
	position: absolute;
	width: 60%;
	height: 60%;
	background: var(--chrome-gradient);
	filter: blur(60px);
	opacity: 0.25;
	border-radius: 50%;
	z-index: 0;
}
.product-view[data-product-variant="3"] .product-block-gallery .thumbnails {
	position: relative;
	z-index: 1;
}
.product-view[data-product-variant="3"] .product-block-gallery .thumbnails > li:first-child > a.thumbnail {
	background: transparent;
	border: none;
	padding: 0;
	max-width: 100%;
	display: block;
}
.product-view[data-product-variant="3"] .product-block-buy {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: 28px;
	box-sizing: border-box;
}
.product-view[data-product-variant="3"] .product-block-buy > .btn-group {
	order: 6;
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.product-view[data-product-variant="3"] .product-block-buy > .btn-group .btn {
	flex: 1 1 0;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.03);
}
.product-view[data-product-variant="3"] .product-block-buy > h1 {
	order: 1;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.product-view[data-product-variant="3"] .product-block-buy > ul.list-unstyled:nth-of-type(1) {
	order: 2;
	font-size: 13px;
	color: #6e6e73;
	padding: 10px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	margin: 10px 0;
}
.product-view[data-product-variant="3"] .product-block-buy > ul.list-unstyled:nth-of-type(2) {
	order: 3;
	margin-bottom: 16px;
}
.product-view[data-product-variant="3"] .product-block-buy > #product {
	order: 4;
}
.product-view[data-product-variant="3"] .product-block-buy > .rating {
	order: 5;
}
.product-view[data-product-variant="3"] .product-block-buy h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--accent);
}
.product-view[data-product-variant="3"] .qty-stepper,
.product-view[data-product-variant="4"] .qty-stepper {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 12px;
}
.product-view[data-product-variant="3"] .qty-btn,
.product-view[data-product-variant="4"] .qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: #1c1c1e;
	cursor: pointer;
}
.product-view[data-product-variant="3"] #input-quantity,
.product-view[data-product-variant="4"] #input-quantity {
	border: none;
	background: transparent;
	box-shadow: none;
	text-align: center;
	width: 44px;
	border-radius: 0;
	padding: 0;
	height: 38px;
}
.product-view[data-product-variant="3"] .nav-tabs {
	border-bottom: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.product-view[data-product-variant="3"] .nav-tabs > li {
	float: none;
}
.product-view[data-product-variant="3"] .nav-tabs > li > a {
	border: none;
	border-radius: 999px;
	background: #f0f0f2;
	margin-right: 0;
	padding: 8px 18px;
}
.product-view[data-product-variant="3"] .nav-tabs > li.active > a,
.product-view[data-product-variant="3"] .nav-tabs > li.active > a:hover,
.product-view[data-product-variant="3"] .nav-tabs > li.active > a:focus {
	background: var(--accent);
	color: #fff;
	border: none;
}

/* ---------- Варіант 4 — Професійний: макет у дусі авто-оголошень
   (велике фото + стрічка мініатюр знизу, бейджі характеристик, чітка
   ієрархія кнопок), виконаний у стилі "iOS glass" ---------- */
.product-view[data-product-variant="4"] .product-top-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: stretch;
	gap: 24px;
}
.product-view[data-product-variant="4"] .product-block-gallery,
.product-view[data-product-variant="4"] .product-block-buy,
.product-view[data-product-variant="4"] .product-block-info {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	padding: 20px;
	box-sizing: border-box;
}
.product-view[data-product-variant="4"] .product-block-buy {
	display: flex;
	flex-direction: column;
	padding: 28px;
}

/* фото + стрічка мініатюр знизу, у дусі авто-оголошень — картка вже
   скляна сама по собі (правило вище), тому фото без другої вкладеної
   рамки і без розтягування на всю висоту колонки */
.product-view[data-product-variant="4"] .product-block-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.product-view[data-product-variant="4"] .product-block-gallery .thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
.product-view[data-product-variant="4"] .product-block-gallery .thumbnails > li:first-child {
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
	text-align: center;
}
.product-view[data-product-variant="4"] .product-block-gallery .thumbnails > li:first-child > a.thumbnail {
	background: transparent;
	border: none;
	padding: 0;
	max-width: 340px;
	display: inline-block;
	box-sizing: border-box;
}
.product-view[data-product-variant="4"] .product-block-gallery .thumbnails > li.image-additional {
	flex: 0 0 64px;
	max-width: 64px;
	margin: 0;
}
.product-view[data-product-variant="4"] .product-block-gallery .thumbnails > li.image-additional > a.thumbnail {
	display: block;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
	padding: 0;
}

/* заголовок і бейджі характеристик — "II покоління · 2.0 TDI · Quattro" */
.product-view[data-product-variant="4"] .product-block-buy > h1 {
	order: 1;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1c1c1e;
	margin-bottom: 10px;
}
.product-view[data-product-variant="4"] .product-block-buy > ul.list-unstyled:nth-of-type(1) {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}
.product-view[data-product-variant="4"] .product-block-buy > ul.list-unstyled:nth-of-type(1) > li {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	color: #48484a;
}
.product-view[data-product-variant="4"] .product-block-buy > ul.list-unstyled:nth-of-type(1) > li:last-child {
	background: rgba(52, 199, 89, 0.15);
	color: #1a7f37;
	font-weight: 600;
}

/* ціна — акцент у стилі "великий зелений цінник" авто-оголошень */
.product-view[data-product-variant="4"] .product-block-buy > ul.list-unstyled:nth-of-type(2) {
	order: 3;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.product-view[data-product-variant="4"] .product-block-buy h2 {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1c1c1e;
}

/* первинна дія — велика кнопка купівлі; вторинні — закладки/порівняння
   рядком під нею, як "Написати в чат" під основним CTA */
.product-view[data-product-variant="4"] .product-block-buy > #product {
	order: 4;
}
.product-view[data-product-variant="4"] .product-block-buy > .rating {
	order: 5;
	margin-top: 12px;
}
.product-view[data-product-variant="4"] .product-block-buy > .btn-group {
	order: 6;
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.product-view[data-product-variant="4"] .product-block-buy > .btn-group .btn {
	flex: 1 1 0;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.03);
}
.product-view[data-product-variant="4"] #button-cart {
	background: #1c1c1e;
	border: none;
	border-radius: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}
.product-view[data-product-variant="4"] #button-cart:hover {
	background: #000;
}
.product-view[data-product-variant="4"] #input-quantity {
	border-radius: 10px;
}

/* сегмент-контрол в стилі iOS замість вкладок Bootstrap — inline-flex,
   щоб контейнер стискався до вмісту (інакше єдина вкладка "Опис" без
   інших сусідів розтягується на всю ширину картки) */
.product-view[data-product-variant="4"] .nav-tabs {
	display: inline-flex;
	max-width: 100%;
	gap: 2px;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 16px;
}
.product-view[data-product-variant="4"] .nav-tabs > li {
	float: none;
	flex: 1 1 0;
}
.product-view[data-product-variant="4"] .nav-tabs > li > a {
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #6e6e73;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	margin-right: 0;
	padding: 6px 12px;
}
.product-view[data-product-variant="4"] .nav-tabs > li.active > a,
.product-view[data-product-variant="4"] .nav-tabs > li.active > a:hover,
.product-view[data-product-variant="4"] .nav-tabs > li.active > a:focus {
	border: none;
	background: #fff;
	color: #1c1c1e;
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ======================================================================
   ГОЛОВНІ БАНЕРИ — image/banercis1.png, image/banercis2.png (карусель
   Bootstrap, вже підключений в header.twig) зі слоганом поверх зображення.
   ====================================================================== */
.hero-banner {
	margin: 20px 0;
	border-radius: var(--glass-radius);
	overflow: hidden;
	box-shadow: var(--glass-shadow);
}
/* position тут НЕ чіпаємо — Bootstrap сам ставить .carousel-inner > .item
   { position: relative } і перемикає на position: absolute під час
   переходу (.next/.prev). Наше правило раніше мало той самий селектор
   і, підключаючись пізніше за bootstrap.min.css, перебивало саме це
   position: absolute — звідси "глюк"/смуга зліва під час гортання. */
.hero-banner .item img {
	display: block;
	width: 100%;
	height: auto;
}
.hero-banner .item > a {
	display: block;
	outline: none;
}
.hero-banner .item > a:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: -2px;
}
.hero-banner-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 6% 88px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
}
.hero-banner-caption h2 {
	max-width: 780px;
	margin: 0 0 8px;
	color: #fff;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.25;
	font-size: clamp(14px, 2.3vw, 30px);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.hero-banner .carousel-control {
	width: 8%;
	background-image: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.hero-banner:hover .carousel-control {
	opacity: 0.8;
}
.hero-banner .carousel-control .fa {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hero-banner .carousel-control.left .fa { left: 16px; }
.hero-banner .carousel-control.right .fa { right: 16px; }
.hero-banner .carousel-indicators {
	bottom: 14px;
	z-index: 2;
}
.hero-banner .carousel-indicators li {
	border-color: rgba(255, 255, 255, 0.7);
}
.hero-banner .carousel-indicators .active {
	background-color: #fff;
}
/* окремий банер для мобільного (ID банерів 10 в адмінці, або ті самі
   банери з ПК, якщо мобільна група ще порожня) — на ПК/планшеті прихований,
   на телефоні висота фіксована й фото кадрується по центру (object-fit),
   а не просто стискається по ширині зі збереженням пропорцій */
.hero-banner-mobile {
	display: none;
}
@media (max-width: 767px) {
	.hero-banner-desktop {
		display: none;
	}
	.hero-banner-mobile {
		display: block;
	}
	.hero-banner-mobile .item, .hero-banner-unified .item {
		height: 220px;
	}
	.hero-banner-mobile .item img, .hero-banner-unified .item img {
		height: 220px;
		object-fit: cover;
	}
	.hero-banner-caption {
		padding: 10px 6% 40px 5%;
	}
	.hero-banner-caption h2 {
		display: inline-block;
		max-width: 92%;
		margin-bottom: 4px;
		font-size: 16px;
		background: rgba(0, 0, 0, 0.45);
		padding: 5px 12px;
		border-radius: 8px;
	}
	.hero-banner .carousel-control {
		display: none;
	}
}

/* ======================================================================
   ВІТРИНА КАТЕГОРІЙ НА ГОЛОВНІЙ — скляні плитки, та сама мова, що й у
   хедері (var(--glass-*)/var(--chrome-gradient)), щоб виглядало єдиним
   цілим з обраним пресетом дизайну.
   ====================================================================== */
.category-showcase {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 28px 0;
}
.category-showcase-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex: 1 1 220px;
	max-width: 280px;
	/* фіксована висота — інакше коли Manrope/FontAwesome довантажується
	   пізніше й трохи змінює ширину/перенос тексту назви категорії, весь
	   ряд плиток перерахунковує висоту і "стрибає" (це і давало CLS 0.17) */
	min-height: 230px;
	padding: 34px 20px;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	text-align: center;
	color: var(--glass-text);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.category-showcase-item:hover {
	transform: translateY(-4px);
	background: var(--glass-bg-strong);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
	color: var(--glass-text);
	text-decoration: none;
}
.category-showcase-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--icon-radius);
	background: var(--chrome-gradient);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transition: border-radius 0.2s ease;
}
.category-showcase-item:hover .category-showcase-icon {
	background: var(--chrome-gradient-hover);
}
.category-showcase-icon .fa {
	font-size: 38px;
	color: #fff;
}
.category-showcase-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--icon-radius);
}
.category-showcase-name {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.01em;
}
.category-showcase-btn {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 12px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--chrome-gradient);
	color: #fff;
	transition: background 0.2s ease;
}
.category-showcase-item:hover .category-showcase-btn {
	background: var(--chrome-gradient-hover);
}
@media (max-width: 767px) {
	.category-showcase {
		gap: 10px;
		margin: 18px 0;
	}
	.category-showcase-item {
		flex: 1 1 calc(50% - 10px);
		max-width: none;
		padding: 20px 12px;
	}
	.category-showcase-icon {
		width: 68px;
		height: 68px;
	}
	.category-showcase-icon .fa {
		font-size: 28px;
	}
	.category-showcase-btn {
		font-size: 11px;
		padding: 6px 12px;
	}
}

/* ======================================================================
   ПОПУЛЯРНІ ТОВАРИ НА ГОЛОВНІЙ — звичайна картка товару (фото, ціна,
   кнопки кошика/вішлиста/порівняння), просто в компактнішому розмірі —
   такому ж, як плитки вітрини категорій вище (.category-showcase-item),
   а не на всю ширину bootstrap-колонки.
   ====================================================================== */
.popular-products-wrap {
	position: relative;
	margin: 28px 0;
}
.popular-products-wrap.has-overflow {
	/* стрілкам відведено власне поле збоку, замість накладання на картки */
	padding: 0 48px;
}
.popular-products {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16px;
	margin: 0;
	/* завжди один рядок — якщо картки (їх фіксовано 8) не влазять по
	   ширині навіть по мінімальній ширині картки, рядок стає слайдером
	   (стрілки нижче) замість переносу товару на 2-й рядок. Нативний
	   скролбар ховаємо — гортання лише стрілками/свайпом/трекпадом */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.popular-products::-webkit-scrollbar {
	display: none;
}
.popular-product-col {
	display: flex;
	flex: 1 1 220px;
	min-width: 180px;
	max-width: 280px;
	scroll-snap-align: start;
}
.popular-products-nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	background: #fff;
	color: #666;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	cursor: pointer;
}
.popular-products-nav:hover {
	color: #333;
}
.popular-products-wrap.has-overflow .popular-products-nav {
	display: flex;
}
.popular-products-prev {
	left: 4px;
}
.popular-products-next {
	right: 4px;
}
@media (max-width: 767px) {
	.popular-products {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 10px;
	}
	.popular-product-col {
		flex: 1 1 calc(50% - 10px);
		min-width: 0;
		max-width: none;
	}
	.popular-products-nav {
		display: none !important;
	}
	.popular-products-wrap.has-overflow {
		padding: 0;
	}
}
/* форма оформлення замовлення — за замовчуванням текст полів/підписів
   тримався на дрібному bootstrap-розмірі (14px), зробили трохи більшим
   для кращої читабельності */
#checkout-onepage .form-control {
	font-size: 15px;
	height: 42px;
	padding: 9px 14px;
}
#checkout-onepage textarea.form-control {
	height: auto;
}
#checkout-onepage legend {
	font-size: 20px;
}
#checkout-onepage .btn-lg {
	font-size: 16px;
}