:root {
    /* ===== RGB-компоненты (для rgba) ===== */
    --rgb-primary: 24, 179, 22;        /* фирменный #18b316 — для полупрозрачных подсветок */
    --rgb-white: 255, 255, 255;
    --rgb-black: 0, 0, 0;
    --rgb-danger: 191, 63, 29;
    --rgb-telegram: 41, 168, 230;

    /* ===== Палитра. В правилах напрямую почти не используется — только для семантики ниже ===== */
    /* Бренд и состояния */
    --green: #18b316;      /* фирменный зелёный старого сайта */
    --yellow: #ff7300;     /* фирменный оранжевый: логотип, цены */
    --success: #3a7f3a;    /* #51a351 старого сайта, затемнён до AA */
    --warning: #a85a00;    /* #f89406 старого сайта, затемнён до AA */
    --danger: #bf3f1d;     /* #dc512c старого сайта, затемнён до AA */

    /* Фирменные поверхности. Имена исторические: теперь это мятный фон
       и зелёная подложка старого сайта, а не персиковые тона. */
    --peach-50: #f3f7f4;   /* фон body старого сайта */
    --peach-100: #e3f6e3;  /* 12% фирменного зелёного на белом — как rgba(24,179,22,.12) в старом CSS */

    /* Нейтральная шкала — чистый серый, как на старом сайте */
    --white: #fff;
    --gray-50: #f5f5f5;
    --gray-100: #eeeeee;   /* рамки .subcats, button-group */
    --gray-200: #dddddd;   /* рамки карточек */
    --gray-400: #999999;   /* плейсхолдеры, пустые звёзды */
    --gray-600: #6b6b6b;   /* #818181 старого сайта, затемнён до AA на мятном фоне */
    --gray-700: #333333;   /* новый: основной текст старого сайта */
    --gray-900: #000000;   /* верхняя полоса, h1, названия товаров */

    /* ===== Семантика. Её и используем в правилах ===== */
    /* Текст */
    --color-text: var(--gray-700);
    --color-heading: var(--gray-900);                 /* новый */
    --color-text-muted: var(--gray-600);
    --color-text-subtle: var(--gray-400);
    --color-text-inverse: var(--white);
    --color-text-inverse-muted: rgba(var(--rgb-white), .68);
    --color-on-primary: var(--white);
    --color-on-accent: var(--gray-900);               /* новый */

    /* Ссылки (новые). Фирменный #18b316 на белом даёт 2.8:1 — для текста
       взят тот же зелёный, затемнённый до 5.2:1. */
    --color-link: #127f11;
    --color-link-hover: #0e6a0d;

    /* Поверхности */
    --color-surface: var(--white);
    --color-surface-alt: var(--peach-50);
    --color-surface-sunken: var(--gray-50);
    --color-surface-muted: var(--gray-100);
    --color-surface-inverse: var(--gray-900);
    --color-primary-soft: var(--peach-100);           /* новый: подложка активного пункта, выбранного фильтра */

    /* Подвал старого сайта (новые) */
    --color-footer-bg: #303030;
    --color-footer-text: #e2e2e2;
    --color-footer-link: var(--green);                /* 4.7:1 на #303030 — фирменный цвет здесь проходит */

    /* Границы */
    --color-border: var(--gray-100);
    --color-border-strong: var(--gray-200);
    /* Рамка кликабельной карточки под курсором. Разбавленный зелёный,
       а не сплошной --color-primary: сплошной читается как «выбрано»,
       а карточку всего лишь ведут мышью. Одно значение на карточки
       товара, плитки кабинета и всё, что появится дальше. */
    --color-border-hover: rgba(var(--rgb-primary), .35);
    /* Тень той же карточки — вместе с рамкой она и даёт «приподнятость»,
       без сдвига самого блока. */
    --shadow-card-hover: 0 10px 26px rgba(var(--rgb-black), .07);
    /* Проявляется неспешно: резкая подсветка на сетке из карточек
       мельтешит, когда курсор идёт наискось. */
    --transition-card: box-shadow .7s ease, border-color .7s ease;
    /* Новый. Фокус — тот же полупрозрачный зелёный, что в старом CSS (rgb(24 179 22 / 23%)) */
    --shadow-focus: 0 0 0 3px rgba(var(--rgb-primary), .23);

    /* Бренд.
       --color-brand (новый) — чистый #18b316 для того, что не несёт текста:
       линии, подчёркивания, иконки, полоса у h1, маркеры.
       --color-primary — заливка кнопок и меню с белым текстом: тот же
       зелёный, затемнённый до 3.7:1 (AA для жирного текста кнопок). */
    --color-brand: var(--green);
    --color-primary: #1c9a1a;
    --color-primary-dark: #178516;   /* hover залитых зелёных элементов */
    --color-accent: var(--yellow);   /* иконки, декор, заливки с тёмным текстом */
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);

    /* Цены (новые). #ff7300 на белом — 2.7:1; для цифр цены взят тот же оранжевый
       чуть глубже: 3.6:1, достаточно для крупного жирного текста цены. */
    --color-price: #e06000;
    --color-price-old: var(--color-text-muted);

    /* Форма */
    --border-radius: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 4px rgba(var(--rgb-black), .08);

    /* Промо-акцент. Отдельный токен, а не --color-danger: «Акции» в меню — это
       реклама, а не ошибка, и оттенок ей нужен ярче, чем у сообщений об ошибках.
       Красно-оранжевый старого сайта (.btn-info #df5c39/#dc512c), затемнён до 4.9:1 с белым. */
    --color-promo: #c7431f;
    --color-promo-hover: #a8391a;

    /* Выделенный пункт горизонтального меню («Оптом»). Нейтральный тёмный, как
       верхняя полоса сайта: на зелёной полосе меню заметен, но не спорит с
       ценами и скидками. Красный --color-promo остаётся у бейджей скидок. */
    --color-menu-accent: var(--color-surface-inverse);
    --color-menu-accent-hover: var(--gray-700);

    /* Фирменный синий Telegram. Вынесен в токен, потому что используется в
       двух местах: иконка в шапке и слайд в анимированном кружке телефона. */
    --color-telegram: #29a8e6;

    /* Совместимость со сторонним CSS модуля отзывов (extended_reviews.css).
       Он обращается к четырём переменным старой палитры, которых после
       рефакторинга здесь нет. Невалидное var() обнуляет свойство, из-за чего
       у модуля пропадали фоны кнопок и серели не те элементы.
       В новых правилах эти алиасы не использовать. */
    --gray-250: var(--gray-200);
    --gray-800: var(--gray-600);
    --gray-920: var(--gray-900);
    --brown-700: var(--color-primary);

    /* Бейджи поверх изображения товара */
    --color-badge-bg: rgba(var(--rgb-white), .92);
    --color-badge-text: var(--color-text-muted);
    /* Акционные бейджи — красным, тем же, что и пункт «Акции» в меню: это один
       и тот же раздел. */
    --color-badge-sale-bg: var(--color-promo);
    --color-badge-sale-text: var(--color-text-inverse);

}

body {
    font-family: Roboto, helvetica neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: var(--color-text);
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    letter-spacing: 0.6px;
    background-color: var(--color-surface-alt);
}
.input-group .form-control{
	z-index: 0;
}
b, strong{
	font-weight: 500;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    margin-top: 0;
}
h2 {
	font-size: 22px;
	font-weight: 700;
}
h3 {
	font-size: 18px;
	font-weight: 700;
}
h4 {
	font-size: 15px;
	font-weight: 600;
}
h5 {
	font-size: 14px;
	font-weight: 700;
}
h6 {
	font-size: 13px;
	font-weight: 700;
}
.d-inline-block{
	display: inline-block;
	vertical-align: middle;
}
input[type="checkbox"], input[type="radio"] {
    margin: 3px 0 0
}
a {
	color: var(--color-text);
	transition: 0.3s ease;
}
:focus{
	outline: none !important;
}
a:focus, a:hover,.btn-link:focus, .btn-link:hover{
	text-decoration: none;
	outline: none;
	color: var(--color-primary);
}
legend {
	font-size: 18px;
	padding: 7px 0px;
	color: var(--color-text);
	border-color: var(--color-border);
}
label {
	font-size: 14px;
	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: 13px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 13px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
	color: var(--color-text)
}
/* z-index был 1 — подсказка отрисовывалась ПОД текстом характеристик в карточке.
   1070 — штатное значение Bootstrap для тултипов. */
.tooltip{
	z-index: 1070;
	color: var(--color-text)
}
/* 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;
}
@media (max-width: 991px){
    .container {
        width: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .container {
        /*width: 963px;*/
        width: 100%;
    }
}
@media (min-width:1200px) and (max-width:1409px){
    .container {
       /*width: 1170px;*/
        width: 100%;
    }
}
@media (min-width: 1410px){
    .container {
        /*width: 1380px;*/
        width: 100%;
    }
}
@media (min-width: 1610px){
    .container {
        width: 1580px;
    }
}
.form-control {
    box-shadow: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: rgba(var(--rgb-white), 0.5);
}
.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn{
	border-radius: 0
}
.form-control:focus{
	border: 1px solid var(--color-primary);
	box-shadow: none
}
/* search */
#search .input-lg {
	height: 45px;
	padding: 0 10px;
	border: none;
	font-size: 14px;
	background-color: var(--color-surface);
	border-radius: 6px 0 0 6px;
}
#search .btn-lg {
	height: 45px;
	border-radius: 0 10px 10px 0;
}
#search .form-control:focus{
	border: none;
	box-shadow: none;
}
/* cart */
.btn-group.open .dropdown-toggle{
	box-shadow: none;
}
#cart.open > .btn {
	background-image: none;
	background-color: var(--color-surface);
	border: 1px solid #E6E6E6;
	color: var(--color-text-muted);
	box-shadow: none;
	text-shadow: none;
}
#cart .dropdown-menu {
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 40px;
	padding: 10px 0;
	box-shadow: none;
}
.dropdown-menu{
	border-radius: var(--border-radius);
}
#cart .btn-danger {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 0;
    border-color: var(--color-text-inverse);
    border: none;
    transition: all 0.4s ease-in-out 0s;
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
	font-size: 14px;
}
#cart .table-striped > tbody > tr:nth-of-type(2n+1) {
    background: none;
}
#cart li tbody tr td {
    border-bottom: 1px solid var(--color-border) !important;
	border: none;
}
#cart li tbody tr td {
    border-bottom: 1px solid var(--color-border) !important;
	border: none;
	font-size: 12px;
}
.cartdrop {
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 10px;
}
.cartdrop img{
	max-width: 60px;
	border-radius: var(--border-radius);
	padding: 0
}
.cartname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 10px;
    width: 160px;
    font-size: 14px;
    transition: 0.3s ease;
}
.cartname:hover{
	color: var(--color-text);
}
.cartname:hover{
	color: var(--color-primary);
}
.cartname a{
	font-weight: 500;
}
.cartprice {
    clear: both;
    position: relative;
    top: -45px;
    left: 70px;
    width: 50%;
    color: var(--color-text);
    font-size: 13px;
    direction: ltr;
    margin-bottom: -10px;
}
#cart .dropdown-menu li > div {
	padding: 10px;
}
#cart .dropdown-menu li > div table td {
	border: 1px solid var(--color-border);
}
/* user dropdowm */
.alogin li {
    border-bottom: 1px solid rgba(var(--rgb-white), 0.9);
    padding: 8px 10px;
}
.alogin .langcdrop li {
    border-bottom: none;
    padding: 0;
}
.alogin svg{
	margin: 0 7px;
	fill: #ef4060;
	width: 14px;
    height: 13px;
}
.alogin {
    min-width: 265px;
    padding: 0 0 8px 0 !important;
}
.hlogout {
    text-align: center;
    padding: 15px;
    min-width: 280px;
}
.hlogout h5 {
    font-size: 16px;
    margin-top: 0;
}
.hlogout h6 {
    font-size: 12px;
    color: var(--color-text-muted);
}
.acd,.hlogout .wishcom,.xsla,.xscu{
    border: 1px solid var(--color-text-inverse);
    border-radius: var(--border-radius);
    display: inline-block;
    padding: 4px 0;
    margin-top: 10px;
    width: 47%;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
}
/* menu */
#menu .dropdown-submenu {
    padding: 0 15px;
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .collapse li.view_more.my-menu {
    cursor: pointer;
    padding: 12px 0px;
    border-radius: var(--border-radius);
    margin: 0 15px;
}
#menu .dropdown-inner a {
	min-width: 200px;
	display: block;
	padding: 3px 2px;
	clear: both;
	line-height: 23px;
	letter-spacing: 0.5px;
}
#menu .dropdown-inner .dropdown-submenu ul.grand-child li {
    padding: 0;
}
#menu .dropdown-inner .dropdown-submenu .submenu-title {
    font-weight: 300;
    padding: 0;
    margin-bottom: 2px;
    position: relative;
    padding-left: 12px;
}

#menu .dropdown-inner .dropdown-submenu .submenu-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 1px;
    background: #999;
    transform: translateY(-50%);
}
@media(min-width: 992px){
	#menu .dropdown-menu {
		margin-top: 0;
		border-top: 3px solid var(--color-primary) !important;
		border: 1px solid #e0e0e0;
		box-shadow: none;
		border-radius: 0 0 10px 10px;
		opacity: 0;
		display: block;
		transform-origin: 0 0 0;
		transform: scale(1, 0);
		transition: all 500ms ease 0s;
		padding-bottom: 10px !important;
		z-index: 1000 !important;
	}
	#menu .dropdown:hover .dropdown-menu {
	  	display: block;
	}
	#menu li a:hover .enangle {
	  	transform: rotate(-180deg);
	  	transition: all 0.3s ease 0s;
 	}
	#menu .dropdown:hover .dropdown-menu {
		  opacity: 1;
		  transform: scale(1, 1);
	}
	.view_cat_menu:hover .more-menu {
	margin-top: 20px;
    opacity: 1;
    visibility: visible;
}

.more-menu {
    padding: 10px;
    position: absolute;
    left: auto;
    right: 0;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border: none;
    box-shadow: 0 0px 5px rgba(var(--rgb-black), .175);
    min-width: 230px;
    border-top: 3px solid var(--color-primary);
    background: var(--color-surface);
    z-index: 9;
    opacity: 0;
    display: inline-block;
    -webkit-transition: all 0.35s ease-out 0s;
    -o-transition: all 0.35s ease-out 0s;
    transition: all 0.35s ease-out 0s;
    text-align: left;
    line-height: 28px;
    top: 30px;
}

/* ── Бургер-меню: все подкатегории всегда раскрыты ── */

/* Фикс контейнера — не обрезать содержимое, но дать ему расшириться по контенту */
.view_cat_menu .more-menu {
  min-width: 260px;
  width: max-content;
  max-width: 340px;
  box-sizing: border-box;
}

/* Подкатегории — в потоке, всегда видны, без Bootstrap-стилей */
.more-menu .burger-submenu {
  display: block;
  list-style: none;
  padding: 0 0 4px 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.more-menu .burger-submenu .dropdown-inner {
  padding: 0;
}
.more-menu .burger-submenu a,
.more-menu .burger-submenu li > a {
  display: block;
  padding: 4px 14px 4px 20px;
  white-space: normal;
  color: var(--color-text-muted);
  font-size: 0.92em;
  box-sizing: border-box;
  width: 100%;
}
.more-menu .burger-submenu a:hover {
  color: var(--color-primary);
  background: transparent;
  text-decoration: none;
}

/* Заголовок категории */
.more-menu .m-menu > a {
  display: block;
  padding: 6px 10px 4px;
  width: 100%;
  box-sizing: border-box;
}
.more-menu .m-menu > a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Стрелку у заголовков скрыть */
.more-menu .m-menu > a .enangle {
  display: none;
}

/* Разделители между пунктами */
.more-menu .m-menu {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
  margin-bottom: 2px;
  width: 100%;
  box-sizing: border-box;
}
.more-menu .m-menu:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

}
/* content */
#content {
	min-height: 600px;
}
/* alert */
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
	border-radius: 0
}
/* ============================================================
   Уведомление «товар добавлен» (корзина, избранное, сравнение)
   ------------------------------------------------------------
   Было модальное окно по центру с затемнением всей страницы: чтобы
   продолжить смотреть каталог, приходилось его закрывать. Действие
   мелкое и обратимое — делаем тост в углу, он не перехватывает клики
   и гаснет сам. Счётчик в шапке и так подсвечивает результат.
   ============================================================ */
.a-one {
    position: fixed;
    inset: 0;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 1000;
}
.alert a {
    color: var(--color-text);
    font-weight: 500
}

.alert a:hover {
    color: var(--color-primary)
}

.alert h2 {
    font-size: 27px;
    color: var(--color-text);
    margin-bottom: 15px;
    margin-top: 26px;
}
.a-one .alert.alertsuc {
	position: fixed !important;
	top: auto !important;
	right: 24px !important;
	/* выше кнопки «наверх»: иначе они лежат в одном углу друг на друге */
	bottom: 84px !important;
	left: auto !important;
	display: block !important;
	width: 370px;
	max-width: calc(100vw - 32px);
	margin: 0 !important;
	/* слева место под кружок с иконкой, справа — под крестик */
	padding: 18px 44px 18px 62px !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 14px !important;
	background: var(--color-surface) !important;
	box-shadow: 0 16px 40px rgba(var(--rgb-black), .16) !important;
	color: var(--color-text-muted) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	pointer-events: auto;
	animation: toast-in .32s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes toast-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.a-one .alertsuc::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 17px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(var(--rgb-primary), .12);
}
.a-one .alertsuc svg {
	position: absolute !important;
	left: 25px;
	top: 24px;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	fill: var(--color-primary) !important;
}
.a-one .alertsuc a {
	border-bottom: 1px solid transparent;
	color: var(--color-text) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.a-one .alertsuc a:hover {
	color: var(--color-primary) !important;
	border-bottom-color: var(--color-primary);
}
.a-one .alert-danger.alertsuc::before { background: rgba(var(--rgb-danger), .12); }
.a-one .alert-danger.alertsuc svg { fill: var(--color-danger) !important; }

.a-one .alert-dismissable .close,
.a-one .alert-dismissible .close {
	position: absolute;
	top: 12px;
	right: 14px;
	color: var(--color-text) !important;
	font-size: 20px;
	font-weight: 400;
	opacity: .45;
	text-shadow: none;
}
.a-one .alert-dismissable .close:hover,
.a-one .alert-dismissible .close:hover { opacity: 1; }

@media (max-width: 767px) {
	.a-one .alert.alertsuc {
		left: 12px !important;
		right: 12px !important;
		bottom: 74px !important;
		width: auto;
		max-width: none;
		padding: 16px 40px 16px 56px !important;
		font-size: 13.5px !important;
	}
	.a-one .alertsuc::before { left: 14px; top: 15px; width: 30px; height: 30px; }
	.a-one .alertsuc svg { left: 20px; top: 21px; }
}

/* Иконки в обычных (не тостовых) алертах */
.alert-danger svg,
.alert-info svg,
.alert-success svg {
    display: block;
    margin: 0 auto 20px;
    width: 65px;
    height: 65px
}
.alert-success svg { fill: var(--color-primary) }
.alert-danger svg  { fill: var(--color-danger) }
.alert-info svg    { fill: var(--color-text-muted) }
/* breadcrumb */
.breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 20px 0;
	padding: 11px 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 13px;
	list-style: none;

	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.breadcrumb::-webkit-scrollbar {
	display: none;
}

.breadcrumb > li { 
	display: inline-flex; 
	align-items: center; 
	flex: 0 0 auto;
}

.breadcrumb > li a { color: var(--color-text-muted); }
.breadcrumb > li a:hover { color: var(--color-primary); }
.breadcrumb > li:last-child { color: var(--color-text); }
.breadcrumb i { font-size: 15px; }

/* разделитель */
.breadcrumb > li + li::before {
	content: "\203A";
	padding: 0 10px;
	color: var(--color-text-muted);
}

.breadcrumb > li a::after { content: none; }

/* МОБИЛКА — цепочка не схлопывается, а прокручивается по горизонтали.
   Скролл уже задан в базовом правиле .breadcrumb (overflow-x:auto + nowrap),
   поэтому отдельных правил под мобильный не требуется. */
/* buttons */
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
	background-color: transparent;
}
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 14px;
	border: none;
	border-radius: var(--border-radius);
	box-shadow: none;
}
.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: var(--color-text);
    background-color: var(--gray-200);
    border-color: var(--color-border-strong);
}
.btn-default:hover {
    color: var(--color-text);
    background-color: var(--gray-200);
    border-color: var(--color-border-strong);
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus,.btn.active, .btn:active{
	outline: none;
	box-shadow: none
}
.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: none;
	transition: 0.3s ease;
	font-size: 14px;
	border-radius: var(--border-radius);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled],.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover,.btn-primary.focus, .btn-primary:focus,
.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover{
	background-color: var(--color-surface-inverse);
	color: var(--color-text-inverse)
}
.btn-warning {
	color: var(--color-text-inverse);
	text-shadow: 0 -1px 0 rgba(var(--rgb-black), 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, var(--color-warning));
	background-repeat: repeat-x;
	border-color: var(--color-warning) var(--color-warning) #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(var(--rgb-black), 0.1);
}
.btn-danger,.btn-info{
	color: var(--color-text-inverse);
	background-color: var(--color-primary);
	transition: 0.3s ease;
}
 .btn-danger:active:hover,.btn-danger:hover,.btn-info:hover,.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover{
	background-color: var(--color-surface-inverse);
	color: var(--color-text-inverse)
}
.btn-success {
	color: var(--color-text-inverse);
	text-shadow: 0 -1px 0 rgba(var(--rgb-black), 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, var(--color-success));
	background-repeat: repeat-x;
	border-color: var(--color-success) var(--color-success) #387038;
}
.btn-link {
	border-color: rgba(var(--rgb-black), 0);
	cursor: pointer;
	color: var(--color-text);
	border-radius: var(--border-radius);
	transition: 0.3s ease;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(var(--rgb-black), 0);
	background-image: none;
	box-shadow: none;
	padding: 0;
	border: none;
}
.btn-inverse {
	color: var(--color-text-inverse);
	text-shadow: 0 -1px 0 rgba(var(--rgb-black), 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, var(--color-surface-inverse));
	background-repeat: repeat-x;
	border-color: var(--color-text) var(--color-text) var(--color-text);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: var(--color-surface-inverse);
	background-image: linear-gradient(to bottom, var(--color-surface-inverse), var(--color-surface-inverse));
}
/* list group */
.list-group a {
	border: 1px solid var(--color-border);
	padding: 12px 12px;
}
.list-group-item:last-child{
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.catlistpage.list-group a.active,.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover,.catlistpage.list-group a.active:hover{
    background: var(--color-surface);
	color: var(--color-primary);
	border: 1px solid var(--color-border);
}
a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover,.catlistpage.list-group a:hover{
	background-color: var(--color-surface);
	color: var(--color-primary)
}
/* carousel */
.carousel-caption {
	color: var(--color-text-inverse);
	text-shadow: 0 1px 0 var(--color-text);
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* ============================================================
   Пустая звезда рейтинга.
   Шаблоны темы рисуют её как <i class="fa fa-star-o">. Это имя из
   Font Awesome 4; в FA7, которая подключена на сайте, такого класса нет —
   ::before остаётся с content:none, и незаполненные звёзды не рисовались
   вообще (у товара без отзывов рядом с «Отзывов: 0» была пустота).
   Подставляем звезду из regular-начертания той же FA7.

   Заполненная звезда в этой теме — пара иконок в одном .fa-stack:
   fa-star (заливка) + fa-star-o поверх (контур). Поэтому контур обязан
   повторять цвет заливки, иначе поверх золотой звезды ложится серый ободок.
   Одиночный fa-star-o (:only-child) — это и есть пустая звезда.
   ============================================================ */
.fa-star-o {
	font-family: "Font Awesome 7 Free" !important;
	font-weight: 400 !important;
}
.fa-star-o::before {
	content: "\f005";
}

.rating .fa-stack {
	font-size: 6px;
	width: 12px;
	height: 13px;
}
.rating .fa-star-o, .rating .fa-star {
    color: var(--color-accent) !important;
    font-size: 14px;
}
.rating .fa-star + .fa-star-o {
	color: var(--color-accent);
}
.rating .fa-stack > .fa-star-o:only-child {
	color: var(--color-border-strong) !important;
}
h2.price {
	margin: 0;
}
.autocalc-product-special {
    margin: 0;
    padding: 0;
    font-size: 36px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
}
.thumbnails {
	clear: both;
	list-style: none;
	padding: 0;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid var(--color-border-strong);
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

/* 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;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover{
	background-color: transparent;
}
/*loader */
.s-panel{
	position: relative;
}
.s-panel .wrloader {
	background: url('../../../../../image/catalog/loader.gif') 50% 50% no-repeat var(--peach-100);
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
/* custom css */
ol, ul{
	margin-bottom: 0;
}
.list-inline{
	margin: 0
}
.list-inline > li {
    padding: 0;
    margin-right: 15px;
}
.langcur .btn-link.dropdown-toggle{
	transition: 0.3s ease;
	text-transform: uppercase;
	font-size: 12px;
	border: 1px solid var(--color-border);
	padding: 7px;
	display: inline-block;
	letter-spacing: 0;
}
.langcur .dropdown-menu{
	min-width: 25rem;
	padding: 15px 15px;
}
.xsla,.xscu{
	display: inline-block;
}
.langcur .langcdrop .dropdown-menu li{
	display: block
}
.langcur .dropdown-menu.langcdrop{
	min-width: 18rem;
	padding: 10px;
}
.btn-link.dropdown-toggle.test {
    display: inline-block;
    position: relative;
    padding: 0;
    border: none;
    border-radius: var(--border-radius);
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
}
.hbottom{
	display: flex;
	align-items: center;
}
/* search */
.desktop-search{
	vertical-align: baseline
}
#madebyhand-search-category{
	float: left;
	width: 200px;
	border: none;
	height: 45px;
	padding: 10px;
	-moz-appearance: none;
	background: var(--color-surface) url("../../../../../image/catalog/arrow.png");
	background-position: right bottom 7px;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	border-radius: 10px 0 0 10px;
	display: none;
}
svg{
	vertical-align: middle;
}
.d-search button{
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}
#search_block_top .input-group-btn{
	position: relative;
    right: 1px;
}
body.active-search .wbSearch {
    opacity: 1;
	transform: translateY(0);
}
.wbSearch{
	z-index: 99;
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	background-color: rgba(var(--rgb-black), .7);
	opacity: 0;
	transition: all 0.3s ease-in-out;
	transform: translateY(-100%);
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 34px
}
.wbSearch .close-nav i{
    margin-left: 15px;
	display: inline-block;
	color: var(--color-text-inverse);
	font-size: 18px;
	position: relative;
	top: 5px;
}
.wbSearch #search_block_top{
	position: relative;
	align-items: center;
	width: 100%;
	max-width: 1000px;
}
/* result */
.madebyhand-search-result .searchbr{
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    position: relative;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.madebyhand-search-result .searchbr:hover{
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(var(--rgb-black), .06);
}
/* вся карточка кликабельна — ссылка названия растянута на весь блок */
.madebyhand-dis h4 a::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.madebyhand-search-loader{
	position: absolute;
	z-index: 110;
	height: 300px;
	background-color: white;
	border: 1px solid var(--color-border);
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 45px;
}
.madebyhand-search-result {
	left: 0;
	top: 100%;
	right: 0;
	box-shadow: none;
	background-color: var(--color-surface);
	border-radius: var(--border-radius);
	position: absolute;
	z-index: 99;
	max-height: 530px;
	overflow-y: auto;
	margin-top: 1px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 0;
}
/* пустая выдача не должна рисовать белую полосу под строкой поиска */
.madebyhand-search-result:empty{
	display: none;
}
.madebyhand-search-result .madebyhand-cat{
	float: none;
	display: flex;
	padding: 5px;
}
.madebyhand-search-result .madebyhand-dis{
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 0;
	position: static; /* чтобы растянутая ссылка считалась от .searchbr, а не от этого блока */
}
.madebyhand-dis h4{
	font-size: 13px;
	line-height: 1.3;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: break-word;
	margin: 0 0 6px;
	padding: 0;
}
.madebyhand-cat img{
	border-radius: var(--border-radius);
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
}
/* Описание в выдаче не показываем — важнее полное название */
.madebyhand-dis .list-des {
    display: none;
}
.madebyhand-dis .price{
	font-weight: 700;
	font-size: 14px;
}
.madebyhand-search-result .product-info {
    flex: 0 0 72px;
    width: 72px;
    max-width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    font-size: 0; /* прячет alt-текст у товаров без картинки */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-sunken);
    border-radius: var(--border-radius);
}
.madebyhand-search-result .product-info a{
    display: block;
    line-height: 0;
}
.madebyhand-search-result p{
	margin: 5px 15px;
}
.madebyhand-search-loader .loaders {
    position: absolute;
    top: 35%;
    z-index: 4;
    background: url('../../../../../image/catalog/loader.gif') 50% 50% no-repeat;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#search_block_top .input-group{
	position: unset
}
/* search over */
#cart-total {
    display: inline-block;
    color: var(--color-text);
    font-size: 16px;
}
.cartta {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    position: absolute;
    top: -12px;
	left: 14px;
}
#cart button.dropdown-toggle {
    border: none !important;
    line-height: normal;
    background-color: transparent;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0;
}
#top-links ul li svg{
	width: 18px;
	height: 17px;
	fill: var(--color-text);
	cursor: pointer
}
#top-links ul li svg:hover,#top-links ul li.inuser .dropdown-toggle:hover svg{
	fill: var(--color-primary)
}
#cart .dropdown-menu p{
	margin-bottom: 0;
}
.hsticky {
	padding: 0;
	position: unset;
	border-bottom: 1px solid var(--color-border);
}
.menusp,#top-links{
	margin-top: 10px;
}
.dropdown.inuser{
    margin: 6px 26px;
}
.inuser .dropdown-toggle svg,#search_toggle svg,#cart .dropdown-toggle svg{
	fill: var(--color-text);
	stroke-width: 6px;
	stroke: var(--color-text);
}
.inuser .dropdown-toggle:hover svg,#search_toggle:hover svg,#cart .dropdown-toggle:hover svg{
	fill: var(--color-primary);
	stroke: var(--color-primary);
}
.haccount{
	line-height: 29px;
	padding: 8px 15px;
	box-shadow: none;
}
.langcdrop {
	line-height: 29px;
	padding: 8px 15px;
	box-shadow: none;
}
.haccount li a i {
    margin-right: 8px;
    min-width: 16px;
}
.haccount.dropdown-menu > li > a,.langcdrop .btn-link{
    padding: 5px 0;
    letter-spacing: 0;
}
.haccount.dropdown-menu > li > a:hover{
	color: var(--color-primary)
}
.langcur{
	margin: 0 15px;
}
/* menu */
#menu .navbar-collapse{
	padding: 0
}
.navbar{
	min-height: auto;
	margin-bottom: 0;
	border: none;
}
.nav > li > a:focus, .nav > li > a:hover{
	background-color: transparent;
}
#menu .fa.pull-right {
    margin: 5px 3px;
}
#menu .navbar-nav > li > a {
    font-size: 16px;
    letter-spacing: .4px;
    font-weight: 500;
    padding: 4px 0;
	margin: 0 15px;
	color: var(--color-text);
}
#menu .navbar-nav > li > a:hover{
	color: var(--color-primary);
}
.head-menu {
    margin: 5px 0;
    padding: 0;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav{
	float: none;
}
/* slider */
.owl-carousel.owl-theme .owl-controls{
	margin-top: 0
}
.owl-carousel.owl-theme .owl-controls .owl-page span {
    margin: 0;
    background: var(--color-primary);
    box-shadow: none;
}
.owl-carousel .owl-wrapper-outer{
	box-shadow: none;
	border: none;
	border-radius: 0
}
.owl-theme.owl-carousel{
	background-color: transparent;
	margin: 0
}
.sliderow .owl-pagination {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    top: auto
}
.slick-dots{
	background-color: transparent !important;
	z-index: 1 !important;
	bottom: 8px !important;
}
.slick-dots li{
	margin: 0 5px !important;
}
.homeslider-container .slick-prev, .homeslider-container .slick-next {
    position: absolute;
    top: 46%;
}
.homeslider-container .slick-prev, .homeslider-container .slick-next {
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: 0px 0px 6px 0px rgba(1,1,1,0.06);
	width: 45px;
	height: 45px;
    opacity: 0;
    border-radius: 100%;
    transition: 0.3s ease;
    z-index: 9;
}
.homeslider-container .slick-prev i, .homeslider-container .slick-next i {
    font-size: 26px;
}
.homeslider-container .slick-prev:hover, .homeslider-container .slick-next:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.homeslider-container:hover .slick-prev, .homeslider-container:hover .slick-next {
    opacity: 1;
}
.homeslider-container:hover .slick-next {
    right: 30px;
}
.homeslider-container:hover .slick-prev {
    left: 30px;
}
.homeslider-container .slick-prev {
    left: 0;
    right: auto;
}
.homeslider-container .slick-next {
    right: 0;
}
/* slider */
.slidebg{
	margin: 0 -15px;
}
.slidebig {
    position: absolute;
    z-index: -1;
}
.slidebig h1 {
    font-size: 315px;
    font-weight: 700;
    color: var(--color-text-inverse);
    transform: scale(1.1);
    transition: all 1.5s ease;
}
.slidedes {
    overflow: hidden;
    position: relative;
    z-index: 9;
    max-width: 575px;
}
.slide-flex{
	display: flex !important;
	align-items: center !important;
}
.slidecap a {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    text-transform: uppercase;
    font-size: 14px;
    padding: 11px 36px;
    display: inline-block;
    transform: translateX(100px);
    transition: all 1.5s ease;
    border-radius: var(--border-radius);
}
.slidecap a:hover {
	background-color: var(--color-surface-inverse);
	color: var(--color-text-inverse);
}
.slidesmall h3 {
    font-size: 30px;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 10px;
    transition: all 1.5s ease;
    transform: translateX(100px);
}
.slidesmall h2 {
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
    max-width: 550px;
    transition: all 1.5s ease;
    transform: scale(1.5);
    color: var(--color-primary);
}
.slidesmall p {
    font-size: 14px;
    color: var(--color-text);
    margin: 25px 0;
    transition: all 1.5s ease;
    transform: translateX(-300px);
}
.homeslider-container .slick-current.slick-active .slidesmall h3, .homeslider-container .slick-current.slick-active .slidesmall h2,
.homeslider-container .slick-current.slick-active .slidesmall p, .homeslider-container .slick-current.slick-active .slidebig h1,
.homeslider-container .slick-current.slick-active .slidecap a {
    transform: unset;
}
.slideimg{
	width: 100%;
}
.slidecap {
    position: absolute;
    left: 0;
    right: 0;
}
/* services */
.service {
    background-color: rgba(var(--rgb-white), 0.5);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0px 0px 20px 0px rgba(var(--rgb-primary), 0.06);
    margin-top: 80px;
}
.service img{
	transition: 0.5s ease;
}
.service [class*="col-"]:hover img{
	transform: rotateY(-180deg);
}
.service h3{
	font-size: 26px;
	font-weight: 700;
	margin: 20px 0;
}
.service p{
	font-size: 14px;
	color: var(--color-text);
}
/* product */
.heading{
	margin: 40px 0 20px 0;
	position: relative;
}
.heading h1, .heading h2, .heading h3{
    margin: 80px 0 40px 0;
    position: relative;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
}
.heading h1::after, .heading h2::after, .heading h3::after {
    content: '';
    border-bottom: 2px solid var(--color-primary);
    width: 100px;
    position: relative;
    height: 2px;
    display: block;
    margin: 22px auto;
}
.heading h1{
	color: var(--color-text);
	margin-bottom: 0;
	margin-top: 0;
}
.heading h4{
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto;
}
.heading h1::after {
    content: '';
    border-bottom: 2px solid var(--color-primary);
    width: 100px;
    position: relative;
    height: 2px;
    display: block;
    margin: 22px auto;
}
/* ============================================================
   Заголовки блоков на главной (Категории / Рекомендуем / Новинки / Акции):
   слева акцентная черта, справа тонкая линейка до края сетки.
   ============================================================ */
.next-prevb .heading {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	margin: 48px 0 18px;
}
.next-prevb .heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 24px;
	border-radius: 2px;
	background: var(--color-primary);
}
.next-prevb .heading h1,
.next-prevb .heading h2,
.next-prevb .heading h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: var(--color-text);
}
/* убираем старое подчёркивание по центру */
.next-prevb .heading h1::after,
.next-prevb .heading h2::after,
.next-prevb .heading h3::after {
	display: none;
}
.next-prevb .heading::after {
	content: "";
	flex: 1 1 auto;
	min-width: 0;
	height: 1px;
	margin-left: 6px;
	background: var(--color-border);
}
@media (max-width: 767px) {
	.next-prevb .heading {
		gap: 10px;
		margin: 32px 0 14px;
	}
	.next-prevb .heading h1,
	.next-prevb .heading h2,
	.next-prevb .heading h3 {
		font-size: 20px;
	}
	.next-prevb .heading::before {
		height: 20px;
	}
}
.heading svg {
    width: 145px;
    height: 15px;
    fill: var(--gray-200);
}
.heading span {
    display: block;
    position: relative;
}
.nav-tabs > li{
	display: inline-block;
	margin-bottom: 0
}
.lpro{
	margin: 0 25px;
}
.nav-tabs{
	border-bottom: none
}
.pro-tab li a {
    border: none;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: normal;
    margin: 0 0px;
    border-radius: var(--border-radius);
    padding: 10px 25px;
    display: inline-block;
    cursor: pointer;
    min-width: 160px;
	min-height: 37px;
}
.pro-tab li.active > a,.pro-tab li.active > a:focus,.pro-tab li.active > a:hover,.pro-tab li a:hover,.pro-tab li a.active{
	color: var(--color-text);
	border: none;
}
.pro-tab.nav-tabs{
	margin-bottom: 30px;
}
.product-thumb:hover .second-img {
    opacity: 1;
}
.product-thumb .second-img {
    top: 0;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: all 400ms ease-in-out 0s;
}
.sale {
    color: var(--color-text-inverse);
    display: inline-block;
    font-size: 12px;
    left: 20px;
    position: absolute;
    text-align: center;
    top: 20px;
    vertical-align: top;
    letter-spacing: 1.2px;
    font-weight: 400;
    background: var(--color-surface-inverse);
    line-height: 20px;
    padding: 0 7px;
    border-radius: var(--border-radius);
}
.product-thumb{
	position: relative
}

.protitle {
    order: 2;
    font-size: 15px;
    color: var(--color-text);
    margin: 0 0 5px 0;
    font-weight: 600;
    line-height: 1.3;
    transition: 0.3s ease;
    padding: 6px 0 4px;
    overflow: hidden;
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
}
.protitle a{
	color: var(--color-text);
}
.protitle:hover,.protitle:hover a{
	color: var(--color-primary);
}
.product-thumb .price {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
    transition: 0.3s ease;
    letter-spacing: 0;
    min-height: 22px;
}
.price-old {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-size: 15px;
    font-weight: 500;
    margin-left: 8px;
}
/* ratting */
.rating .fa-stack {
 	font-size: 13px;
}
.fa {
 	font-size: 13px;
}
.fa-stack {
	 width: 1em;
	 height: 1em;
	 line-height: 10px;
}
/* button effect */
.product-thumb .button-group svg{
	width: 18px;height: 18px;
	fill: #4f4f4f;
}
.product-thumb .button-group .cartb svg{
	width: 20px;height: 20px;
}
.product-thumb .button-group button,.product-thumb .button-group a{
	background-color: var(--color-surface);
	box-shadow: 0px 0px 3px 0px rgba(var(--rgb-black), 0.1);
	border-radius: 50%;
	color: var(--color-text-inverse);
	width: 45px;
	height: 45px;
	text-align: center;
	border: none;
	fill: var(--color-text);
	padding: 11px 8px;
	font-size: 13px;
	text-transform: uppercase;
	transition: 0.3s ease;
	display: inline-block;
	vertical-align: middle;
	margin: 2px 2px;
}
.product-thumb .button-group button:hover,.product-thumb .button-group a:hover{
	background-color: var(--color-primary);
	fill: var(--color-text-inverse);
}
.product-thumb .button-group button:hover svg,.product-thumb .button-group a:hover svg{
	fill: var(--color-text-inverse);
	stroke: var(--color-text-inverse);
}
.product-thumb .button-group button svg{
	stroke: var(--color-text);
	stroke-width: 4px;
}
.bquickv{
	display: inline-block;
	vertical-align: middle;
}
@media (min-width: 992px){
	.product-thumb .abs-btn {
	    position: absolute;
	    bottom: 55%;
	    right: 0;
	    text-align: center;
	    margin: 0 auto;
	    opacity: 0;
	    transition: all 0.4s ease-in-out 0s;
	    left: 0;
	}
	.product-thumb:hover .abs-btn,.product-thumb:hover .button-group button.cartb{
	    opacity: 1;
	}
}
.product-thumb {
    margin-bottom: 30px;
    border-radius: var(--border-radius);
    background-color: rgba(var(--rgb-white), 0.4);
    padding-bottom: 15px;
}
.product-thumb .caption{
	padding-left: 5px;
	padding-right: 5px;
}
.product-thumb .image{
	border-radius: var(--border-radius);
	position: relative;
}
.product-thumb img{
	border-radius: var(--border-radius);
}
.home-page .product-layout:last-child .product-thumb{
	margin-bottom: 0;
}
@media(min-width: 768px){
	 #cart.open .dropdown-menu,
    .inuser.open .user-down {
        visibility: visible;
        opacity: 1;
        margin-top: 15px !important;
        border-top: 2px solid var(--color-primary)
    }
    #cart .dropdown-menu,
    .inuser .user-down {
        margin: 50px 0 0;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface-alt);
        box-shadow: 2px 2px 10px rgba(var(--rgb-black), .1);
        visibility: hidden;
        display: block;
        opacity: 0;
        transition: all .35s ease-out 0s;
        border-radius: 0 0 10px 10px;
    }
}
    #cart .dropdown-menu,
    .inuser .user-down {
        border: 1px solid var(--color-border);
        border-top: 2px solid var(--color-primary);
        background-color: var(--color-surface-alt);
        box-shadow: 2px 2px 10px rgba(var(--rgb-black), .1);
    }
/* category tab */
#cat_tab a {
    transition: 0.3s all ease;
    font-size: 16px;
    text-transform: uppercase;
    background-color: rgba(var(--rgb-white), 0.5);
    padding: 12px 20px;
    color: var(--color-text);
    font-weight: 500;
    border: none;
    border-radius: var(--border-radius);
}
#cat_tab li.active a{
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}
.cate-ul{
	margin-bottom: 40px;
}
@media (min-width: 768px){
	.catb{
		display: none;
	}
	.home-cat.collapse {
	    display: inline-block !important;
	    height: auto !important;
	    padding-bottom: 0;
	    overflow: visible !important;
	    position: relative;
	    margin: 0 auto;
	}
	.viewmore {
		padding: 0;
	    position: absolute;
	    right: -15px;
	    top: 55px;
	    z-index: 1;
	    border-radius: 5px;
	    z-index: 9;
	}
	.viewmore li {
	    display: block;
	    padding: 10px;
	    margin: 8px 10px;
	}
	.wbview_more{
		cursor: pointer;
	}
}
.cat-tab{
	text-align: center;
}
/* menu */
.menu-type .image {
    margin-right: 20px;
}
.menu-type{
	display: flex;
	align-items: center;
	padding: 15px;
}
#toprate .caption::before {
    content: '';
    border-top: 3px dotted var(--color-text);
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 16px;
}
#toprate .caption h4 {
    margin: 0;
    background-color: var(--color-surface-alt);
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 0 5px 2px 5px;
    font-size: 22px;
    font-weight: 300;
}
#toprate .price {
    margin: 0;
    background-color: var(--color-surface-alt);
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 0 5px;
    font-size: 22px;
    font-weight: 300;
    color: var(--color-primary);
}
.menulist-des{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 0;
}
#toprate .product-thumb .image{
	width: 18%;
}
#toprate .product-thumb .caption{
	width: 82%;
	float: left;
	position: relative;
    padding: 0;
}
/* why choose us */
.choose::before{
	content: '';
	background: url('../../../../../image/catalog/choose/choose-bg.png');
	position: absolute;
	left: -15px;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}
.choose{
	position: relative;
	margin-top: 80px;
}
.choose .heading h1::after {
	margin-left: 0;
	margin-right: 0;
}
.choose ul{
	list-style: none;
	padding: 0;
}
.choose ul li div:first-child{
	box-shadow: 0px 0px 12px 0px rgba(var(--rgb-primary), 0.1);
	width: 120px;
	border-radius: 50%;
	background-color: rgb(255, 242, 238);
  	height: 120px;
  	padding: 25px 0;
  	margin-right: 22px;
}
.choose ul h4{
	font-size: 24px;
	font-weight: 700;
	margin-top: 0;
}
.choose ul p{
	font-size: 16px;
	max-width: 495px;
	margin-bottom: 0;
}
.choose ul li{
	padding: 15px 0;
	display: flex;
	align-items: center;
}
.choose .row{
	display: flex;
	align-items: center;
}
/* store Location */
.store-location {
    background-image: url('../../../../../image/catalog/store-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -15px;
    margin-right: -15px;
    padding: 100px 0;
    margin-top: 80px;
}
.store-location .row{
	display: flex;
	align-items: center;
}
.store-location ul li{
	background-color: var(--color-surface);
	border-radius: var(--border-radius);
	box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary), 0.1);
	padding: 20px;
	margin-bottom: 30px;
}
.store-location ul li:last-child{
	margin-bottom: 0;
}
.store-location ul li h3{
	font-weight: 700;
	font-size: 32px;
	margin: 0;
}
.store-location ul li p{
	font-size: 16px;
	margin: 20px 0;
	line-height: 24px;
}
.store-location ul li h4 a{
	color: var(--color-primary);
	font-size: 18px;
	font-weight: 500;
}
.store-location ul li h4 i{
	font-size: 18px;
	margin-right: 10px;
}
.store-location ul li h4{
	margin: 0;
}
/* testimonial */
.parallax-bg .row{
	margin-left: 0;
	margin-right: 0;
}
#testi {
    background-color: rgba(var(--rgb-white), 0.5);
    box-shadow: 0px 0px 8px 0px rgba(var(--rgb-primary), 0.08);
    padding: 35px;
    border-radius: var(--border-radius);
}
#testi h2{
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 15px 0 30px 0;
}
#testi p{
	font-size: 16px;
	line-height: 24px;
}
.testi-box img{
	border: 1px solid var(--color-primary);
	border-radius: 50%;
}
/* blog */
.b-img{
	padding-right: 0;
}
.read_more {
    text-transform: uppercase;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid var(--color-text);
}
.read_more:hover{
	color: var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
}
.blog_webi .blog-right h4 {
    font-size: 20px;
    transition: 0.3s ease;
    margin: 8px 0;
    font-weight: 700;
    line-height: 23px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 0 1px 0;
}
#blog .blog-des{
	margin-top: 15px;
}
.bcomm {
    color: var(--color-text-muted);
}
.blog-des p {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 20px;
}
.blog_webi .blog-right h4:hover{
	color: var(--color-primary)
}
.lb-nav a{
	transition: none
}
.blog-left:hover .webi_post_hover {
    opacity: 1;
    visibility: visible;1
    z-index: 1;
    -webkit-transform: scale(0.93,0.9);
}
#blog .product-block .webi-blog-image img{
	border-radius: var(--border-radius);
	margin-bottom: 10px;
}
.webi-blog-image img{
	border-radius: var(--border-radius);
}
.blog-left:hover .blog_mask {
    visibility: visible;
}
.webi-blog-image {
    position: relative;
    margin-bottom: 15px;
}
#blog .product-block .webi-blog-image {
    margin-bottom: 0;
}
.webi_post_hover {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 0.4s ease;
    -webkit-transform: scale(0.8);
    border-radius: var(--border-radius);
    background-color: rgba(var(--rgb-white), 0.4);
    padding: 10px;
}
.webi_post_hover .icon {
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid var(--color-text);
	padding: 9px 9px;
	display: inline-block;
	line-height: 0px;
}
.webi_post_hover .icon:hover{
	background-color: var(--color-surface-inverse);
	color: var(--color-text-inverse);
}
.blog-ic {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
}
.blogal .alert {
    position: unset;
}
.blog-desc {
    color: var(--color-text-muted);
    line-height: 25px;
    font-size: 13px;
    margin-bottom: 20px;
}
.blog-comment {
    margin: 0 0 10px 0;
}
.blogal .block-title h3,.blog-comment{
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 20px;
}
.wco{
    margin-left: 38px;
    position: relative;
    top: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--color-text-muted);
    border-radius: var(--border-radius);
}
.bcomment{
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 15px;
	margin-bottom: 30px;
}
.view-comment{
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.view-comment:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0
}
.blogu span{
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 23px;
}
.date span{
	margin: 0 20px;
}
.view-comment i {
    font-size: 18px;
    line-height: 30px;
}
.allcomment h5{
	font-weight: 500;
	font-size: 16px;
	margin: 0;
	line-height: 23px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.all-blog-des.allcomment {
    margin-bottom: 30px;
}
.blog_comment::before,.blog_comment::after{
	content: '|';
	padding: 0 15px;
}
.blog_links{
	margin: 15px 0
}
.allmb{
	margin-bottom: 15px;
	background: var(--color-surface);
	padding: 0;
}
.sngblog h3{
	font-size: 16px;
	margin: 0;
	padding-bottom: 10px;
	line-height: 23px;
}
.sngblog .blog-desc{
	margin-bottom: 0
}
.allmb .blog-desc{
	overflow: hidden;
	height: 100px;
	text-align: justify;
}
/* logo slider */
/* newsletter */
.logo-slider {
    padding: 20px 20px;
    background-color: rgba(var(--rgb-white), 0.5);
    margin-top: 80px;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 8px 0px rgba(var(--rgb-primary), 0.08);
}
.new-ti h5 {
    text-transform: uppercase;
    margin: 0px;
    font-size: 22px;
    font-weight: 700;
}
.newsl .input-group input,.newsl .input-group .input-group-btn button{
	height: 45px;
	border: none;
}
.newsl.alert,.white-popup .alert{
	position: unset
}
.newsl .form-group{
	margin-bottom: 0;
	position: relative;
}
.newsl button.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    fill: var(--color-primary);
    height: 50px;
    font-size: 14px;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    right: 0;
    min-width: unset;
    border-radius: 0 10px 10px 0;
}
.newsl button.btn-primary i{
	font-size: 24px;
}
.newsl button.btn-primary svg{
	margin-top: -5px;
}
.newsl .form-vertical {
    position: relative;
    height: 40px;
    margin: 0 auto;
    border-top: 1px solid rgba(var(--rgb-white), 0.1);
}
.newsl button.btn-primary:hover{
	background-color: var(--color-surface-inverse);
	color: var(--color-text-inverse);
	fill: var(--color-primary);
}
.newsbgf .alert{
    bottom: -73px;
    left: 15px;
    right: 15px;
    top: auto;
    border-radius: var(--border-radius);
}
.inner.newsbgf {
    position: relative;
}
.form-control.input-md.inputNew {
    height: 50px;
    border-radius: var(--border-radius);
    background-color: rgba(var(--rgb-white), 0.5);
    border: none;
}
.news-popup .form-control.input-md.inputNew{
	border: 1px solid var(--color-border);
	padding: 0 15px;
}
/* newsletter popup */
.white-popup {
  	position: relative;
	background: var(--color-surface);
	padding: 40px 30px;
	width: auto;
	max-width: 500px;
	margin: 20px auto;
	text-align: center;
}
.white-popup h1{
	font-weight: 500;
	text-transform: uppercase;
	font-size: 26px;
	margin: 0;
	color: var(--color-text);
}
.white-popup p{
	color: var(--color-text-muted);
	margin: 15px;
	line-height: 23px;
}
.white-popup .form-group  .checkbox label{
	position: relative
}
.white-popup  .mfp-close{
    background: transparent;
    border-radius: var(--border-radius);
}
.newsletter-bg{
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: var(--border-radius);
}
.slide-bottom{
    position: absolute;
    padding:30px;
    background:var(--color-surface);
    bottom: 0;
    right: 10%;
    border: solid 1px var(--color-text);
}
.slide-bottom .inner{
    position: relative;
}
.button-slide{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background:var(--color-surface-inverse);
    color: var(--color-text-inverse);
    text-align: center;
    line-height: 30px;
}
/* footer */
#column-left1{
	padding: 0;
}
.social h5 {
    color: var(--color-text-inverse);
    font-weight: 500;
    font-size: 20px;
    vertical-align: middle;
    margin: 0;
}
/* Кнопка «наверх» описана одним блоком ниже (поиск: «Кнопка «наверх»»).
   Здесь остались только свойства, которыми управляет скрипт темы. */
#scroll {
    cursor: pointer;
    outline: none;
    display: none;
    transition: all .5s ease-in-out;
}
.middle-footer{
	padding: 60px 0;
}
footer{
	margin-top: 50px;
}
.middle-footer h5 {
    font-weight: 500;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-size: 18px;
}
.middle-footer .new-ti h5 {
	font-size: 22px;
}
.news-b.text-center {
    margin-top: 50px;
}
.middle-footer a,.f-left li{
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}
.middle-footer a:hover,.fpayment i:hover{
	color: var(--color-primary)
}
.fpayment {
    margin-top: 15px;
}
.footer-top {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 0;
}
.f-left svg,.new-ti svg {
    fill: var(--color-primary);
    margin-right: 10px;
}
.f-left li {
    word-break: break-all;
}
.copy {
    padding: 12px 0;
    border-top: 1px solid var(--color-border-strong);
    color: var(--color-text);
}
.copy a{
	color: var(--color-text);
	font-weight: 500;
}
.payment-img {
    margin-top: 20px;
}
.copy .text-left{
	margin-top: 10px;
}
.copy .text-left a:hover{
	color: var(--color-text)
}
.foot-payment i{
	font-size: 24px;
	color: #717171;
}
.fsocial a {
    line-height: normal;
    text-align: center;
    font-size: 17px !important;
    display: inline-block;
    vertical-align: middle;
    background-color: rgba(var(--rgb-white), 0.5);
    min-width: 34px;
    min-height: 34px;
    padding-top: 5px;
    margin: 2px 0px;
    border-radius: var(--border-radius);
    color: #979696;
    border: none;
}
/* .fsocial a.fb{
	background-color: #3c5b9b;
}
.fsocial a.tw{
	background-color: #40c1df;
}
.fsocial a.ins{
	background-color: #3f729b;
}
.fsocial a.pin{
	background-color: #E60023;
}
.fsocial a.vim{
	background-color: #86c9ef;
} */
.social {
    margin-top: 20px;
}
.fsocial a i{
	font-size: 16px;
}
.fsocial a:hover{
	border: none;
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}
.footer-top.text-center {
    border-bottom: 1px solid #e4e4e4;
    padding: 20px 0;
}
/* carousel button */
.next-prevb .owl-theme .owl-controls .owl-buttons div:hover{
	fill: var(--color-primary);
}
.next-prevb .owl-theme .owl-controls .owl-buttons div {
    background-color: rgba(var(--rgb-white), 0.5);
	width: 45px;
	height: 45px;
	color: var(--color-text-muted);
	fill: var(--color-text);
	transition: all 0.5s ease-in-out 0s;
	margin: 0 8px;
	border: none;
	top: 42%;
	padding: 9px 0;
	opacity: 1;
	position: unset;
	box-shadow: 0px 0px 8px 0px rgba(var(--rgb-primary), 0.08);
}
.next-prevb .owl-theme .owl-controls .owl-buttons div i{
	color: var(--color-text-muted);
	text-shadow: none;
	font-size: 24px !important;
}
.next-prevb .owl-carousel.owl-theme .owl-controls{
	margin-top: 30px;
}
.owl-carousel .owl-buttons div i {
    font-size: 22px !important;
    color: #232323;
    margin: 1px 0 !important;
}
.owl-theme .owl-controls .owl-buttons div:hover i {
    color: var(--color-primary);
}
/* pagination */
/* ============================================================
   Пагинация (чайная тема)
   ============================================================ */
.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 15px;
    padding: 0;
}
.pagination > li { display: inline-flex; }

.pagination > li > a,
.pagination > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius, 10px);
	background: var(--color-surface);
	color: var(--color-text);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* перебиваем bootstrap-скругление только крайних li */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-radius: var(--border-radius, 10px);
}

/* ховер */
.pagination > li > a:hover,
.pagination > li > a:focus {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-surface);
}

/* активная страница */
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(var(--rgb-primary), .1);
}

/* неактивные (если OpenCart отдаёт li.disabled) */
.pagination > .disabled > span,
.pagination > .disabled > a {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}
/* product page */
.form-rating {
    position: relative;
    top: 2px;
}
.gal-img {
    max-height: 750px;
}
#gallery_01 .col-xs-12{
	margin-bottom: 10px;
}
 .form-rating .form-rating-container, .radi .form-rating,.radi label{
    display: inline-block;vertical-align: middle;margin: 0
}
.form-rating .form-rating-container label,
.form-rating .form-rating-container:hover label {
    margin-bottom: 0;
    cursor: pointer
}
#tab-review .fa-stack-2x {
    color: var(--color-accent) !important;
    font-size: 14px !important;
}
.form-rating .form-rating-container input {
    display: none
}
.form-rating .form-rating-container:hover label:hover i.fa-star-o,
.form-rating .form-rating-container:hover label:hover~label i.fa-star-o {
    color: var(--color-accent);
}
.form-rating input:checked~label i.fa-star,.form-rating input:checked~label i.fa-star-o,.form-rating .form-rating-container:hover label:hover i.fa-star,
.form-rating .form-rating-container:hover label:hover~label i.fa-star {
    color: var(--color-accent);
}
.form-rating .form-rating-container label i.fa-star-o, .form-rating .form-rating-container:hover label i.fa-star-o, .form-rating .form-rating-container label i.fa-star, .form-rating .form-rating-container:hover label i.fa-star {
    color: var(--gray-200);
}

.btn.datebtn {
    min-height: 34px;
}
.btn.pcrt.btn-primary {
    min-height: 45px;
    min-width: 45px;
	padding: 0 13px;
	font-weight: 500;
	font-size: 16px;
}
.btn.pcrt.btn-primary .fa {
    font-size: 18px;
    padding-top: 14px;
}
#button-cart {
    min-width: 150px;
}
#product-product .pro-content .alert,#account-wishlist .alert,#account-register .alert{
	position: unset;
}
.zoomWrapper{
	position: relative
}
.thumbnail{
	border: none;
	padding: 0;
	border-radius: var(--border-radius);
}
#zoom_03{
	border-radius: var(--border-radius);
}
.pro-price{
	/*font-size: 18px !important;*/
	/*font-weight: 500;*/
}
.palert,#tab-review .alert{
	position: relative;
}
#tab-review #review{
	margin-bottom: 15px;
}
.product-tab .nav-tabs li.active::after {
    height: 2px;
    width: 100%;
}
.product-tab .nav-tabs li::after {
    content: '';
    position: absolute;
    bottom: 0;
    transition: all .3s ease-in-out;
    width: 0;
    border-bottom: 2px solid var(--color-primary);
    left: 0;
}
.product-tab .nav-tabs > li.active > a,.product-tab .nav-tabs > li.active > a:focus,.product-tab .nav-tabs > li.active > a:hover {
    color: var(--color-primary);
    cursor: default;
    border: none;
    cursor: pointer;
}
.product-tab .nav > li > a:focus,.product-tab .nav > li > a:hover,.product-tab .nav-tabs > li > a{
    border: none;
    background: transparent;
}
.product-tab .nav > li > a{
	font-weight: 500;
	padding-left: 0;
	padding-right: 0
}
#tab-specification .table-bordered > thead > tr > td,#tab-specification .table-bordered > tbody > tr > td{
	border: 1px solid rgba(var(--rgb-white), 0.5);
}
.pro-content h1 {
	margin-top: 0;
}
.pro-content #product h3{
	font-size: 18px;
}
.pro-content .alert,.product-quickview-detail .alert,#accordion .alert{
    position: unset;
}
.pro-content .qty-plus-minus .form-control {
    width: 45px;
    text-align: center;
}
.btnminus,.btnplus{
    line-height: 22px;
}
.btnminus{
    border-radius: 10px 0 0 10px;
}
.btnplus{
    border-radius: 0 10px 10px 0;
}
.btnminus span,.btnplus span{
	position: unset;
}
.producthr {
    border-top: 1px solid rgba(var(--rgb-white), 0.5);
}
.text-decor, .text-de {
    font-size: 14px;
    letter-spacing: 1px;
    min-width: 150px;
    display: inline-block;
    line-height: 25px;
}
.textdeb {
    margin: 0 4px;
    color: var(--color-primary);
}
.textdeb:hover{
    color: var(--color-text);
}
.text-decor-bold{
    font-size: 14px;
}
.text-decor-bold h2 {
    font-weight: 500;
    font-size: 38px;
    margin-top: 0;
    margin-bottom: 0;
}
.custom-radio .img-thumbnail {
    display: block;
    padding: 0;
    border-radius: var(--border-radius);
    border: none;
    height: 30px;
    width: 30px;
}
.text-decorop {
    font-size: 14px;
    letter-spacing: 0;
}
.datebtn {
    background-color: var(--color-primary);
    box-shadow: none;
    transition: all 0.3s ease;
    font-size: 12px;
    color: var(--color-text-inverse);
}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group{
	z-index: 0;
}
.datebtn:hover, .btnup:hover{
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
}
.pro-content .rating li{
	display: inline-block;
}
#tab-description{
	line-height: 22px;
}
#tab-description .first-img-des{
	margin-bottom: 30px;
}
.btnup {
    background-color: var(--color-surface-inverse);
    transition: all 0.3s ease;
    font-size: 14px;
    box-shadow: none;
    border: none;
    color: var(--color-text-inverse);
}
.proreview {
	border-right: 1px solid var(--gray-400);
	border-left: 1px solid var(--gray-400);
	margin: 0 30px;
	padding: 0 30px;
}
.productwish button {
    background-color: transparent;
    color: var(--color-text);
    box-shadow: none;
    border: none;
    font-size: 37px;
    margin-right: 10px;
    padding: 0;
}
.pro-content .pcrt svg{
	fill: var(--color-text-inverse);
}
.pro-content .qty-plus-minus .form-control:focus{
    border-color: var(--color-border);
}
.pro-content #input-quantity{
	border-radius: 0px;
}
.product-tab{
	margin-top: 30px;
	margin-bottom: 40px;
	border-radius: var(--border-radius);
	background-color: rgba(var(--rgb-white), 0.5);
}
.product-tab .nav-tabs{
	border-bottom: 1px solid var(--color-border);
	padding: 0
}
.product-tab li{
	margin: 0 10px;
}
.product-tab .tab-pane{
	padding: 15px;
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover{
	border-color: var(--color-border);	
}
.qtlabel{
	margin-top: 5px;
	width: auto;
}
.product-tab #review .fa-stack{
	font-size: 8px;
}
#gallery_01 img{
	margin-bottom: 1px;
	border-radius: var(--border-radius);
	/* border: 1px solid var(--color-border); */
}
.rsep{
	padding: 0 20px;
}
.custreview{
	border-top: 1px solid var(--color-border);
	padding-top: 10px;
	margin-top: 10px;
}
#review .custreview:nth-child(1)  {
	border-top: none;
	margin-top: 0;
	padding-top: 0
}
#tab-review #review{
	border: 1px solid var(--color-border);
	padding: 10px;
	border-radius: var(--border-radius);
}
#tab-review #review p{
	margin-bottom: 0;
	letter-spacing: 0;
}
.custreview p{
	color: var(--color-text-muted);
	line-height: 23px;
	margin-bottom: 0;
}
.crspc{
	padding: 10px 0;
}
.crspc span{
	display: inline-block
}
/* category page */
.product-grid .catlist-des {
    display: none;
}
.catlist-des {
    color: #727272;
	font-size: 13px;
	margin-top: 0;
	margin-bottom: 12px;
	max-height: 38px;
	overflow: hidden;
}
.filter-panel .panel-footer{
	background-color: var(--color-surface);
}
.filter-panel .list-group a {
    color: var(--color-text);
    border-bottom: 1px dotted var(--color-border);
    padding-bottom: 10px;
    font-weight: normal;
}
.filter-panel .list-group a:hover {
    background-color: transparent;
    border-bottom: 1px dotted var(--color-border);
}
.filter-panel .list-group-item {
    background-color: transparent;
}
.cate-top {
    background-color: rgba(var(--rgb-white), 0.5);
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid rgba(var(--rgb-white), 0.5);
	margin-left: 0;
	margin-right: 0;
	border-radius: var(--border-radius);
}
.cate-top h2{
	font-size: 18px;
	color: var(--color-text);
	letter-spacing: 0.5px;
	margin-top: 0;
}
.cate-top p{
	font-size: 14px;
	color: var(--color-text);
	letter-spacing: 0.5px;
}
/* ============================================================
   Тулбар категории (.cate-border): сравнение + сортировка + лимит
   ============================================================ */
.cate-border {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 0 20px;
	padding: 10px 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius, 12px);
}

/* гасим bootstrap-колонки — позиционирует flex */
.cate-border > [class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* "Сравнение товаров" — слева, селекты уезжают вправо */
.cate-border .ct { margin-right: auto; }
.cate-border #compare-total {
	padding: 0;
	border: 0;
	color: var(--color-text-muted);
	font-weight: 500;
	text-decoration: none;
}
.cate-border #compare-total:hover { color: var(--color-primary); }
.cate-border #compare-total span {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    border-radius: var(--border-radius);
}

/* группы сорт/лимит */
.cate-border .catesort { flex: 0 0 auto; }
.cate-border .select-input {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
}

/* подпись (Сортировка / Показать) — обычный текст без рамки-аддона */
.cate-border .select-input .input-group-addon {
	width: auto;
	border: 0;
	margin-bottom: 0;
	background: transparent;
	color: var(--color-text-muted);
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
}

/* сам select — поле в стиле темы + своя стрелка */
.cate-border .select-input .form-control {
    font-size: inherit;
	width: auto;
	height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius, 10px);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-weight: 500;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
.cate-border .select-input .form-control:hover { border-color: var(--color-primary); }
.cate-border .select-input .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}

/* мобильные: подписи + селекты на всю ширину */
@media (max-width: 767px) {
	h1 { font-size: 22px; }
	.cate-border .catesort { flex: 1 1 100%; }
	.cate-border .select-input { width: 100%; justify-content: space-between; }
	.cate-border .select-input .form-control { flex: 1 1 auto; }
}
.catesort label {
    background-color: transparent;
    border: none;
    color: var(--color-text) !important;
}
.lgrid{
	margin-top: 3px;
}
.lgrid svg {
    cursor: pointer;
}
.lgrid .active svg {
    fill: var(--color-primary);
    cursor: pointer;
}
.catesort select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}
.catesort .input-group .form-control{
	z-index: 0;
	border-radius: var(--border-radius);
}
.catesort select.form-control {
    appearance: none;
    -o-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.listgridbtn {
    background-color: transparent;
    padding: 0 !important;
    margin: 0 2px;
    border: none;
    box-shadow: none
}
.listgridbtn.active, .listgridbtn.active:hover, .listgridbtn:hover {
    background-color: transparent;
    box-shadow: none;
}
.listgridbtn i {
    font-size: 22px;
}
.btn-link:focus, .btn-link:hover{
	text-decoration: none;
}
@media(max-width: 991px){
	.product-grid,.product-list{
		padding: 0 5px;
	}
	.cpagerow{
		margin: 0 -5px;
	}
}
.product-list .product-thumb .image{
	opacity: 1;
}
.product-list .product-thumb .abs-btn{
	position: unset;
	transform: none;
	opacity: 1 !important;
	transition: none;
	text-align: left;
	margin-top: 0;
	display: inline-block;
	vertical-align: middle;
}
.product-list .bquickv{
	opacity: 1;
	transition: none
}
.product-list .protitle,.product-list .protitle a{
	color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
}
.product-list .protitle:hover,.product-list .protitle a:hover{
	color: var(--color-primary)
}
@media(min-width: 768px){
.product-list .product-thumb .button-group button, .product-list .product-thumb .button-group a {
    border-radius: var(--border-radius);
    transition: none;
}
.product-list .product-thumb .button-group button:hover, .product-list .product-thumb .button-group a:hover {
    background: var(--color-primary);
}
}
.product-list .bquickv {
    display: inline-block;
    vertical-align: middle;
}
.product-list .product-thumb .price{
	font-size: 18px;
	margin-bottom: 12px;
}
.product-list .product-thumb {
    float: left;
    width: 100%;
    background-color: transparent;
	padding-bottom: 0;
}
/* filter */
.catfilter.panel-default > .panel-heading,.cathed{
	color: var(--color-text-inverse);
    background-color: var(--color-surface-inverse);
    border: none;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
}
.catfilter .panel-heading button{
	border: none;
	background: transparent;
	box-shadow: none;
}
.catfilter .checkbox input{
	margin-top: 3px;
}
#xsfilter .list-group{
	margin-bottom: 0
}
.panel-default {
    border: none;
    box-shadow: none;
    border-radius: var(--border-radius);
}
.list-group-item {
    border: 1px solid rgba(var(--rgb-white), 0.5);
    background-color: rgba(var(--rgb-white), 0.5);
}
.panel-footer {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}
/* refine search */
.refines ul { margin: 0; padding: 0; display: inline-block }
.refines li { display: inline-block; margin: 0 8px 8px 0; padding: 0; }
.refines li a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.refines li a:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-surface);
}
/* ── Категории в .refines (карточки без картинки) ── */
.refines {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}

.refines .product-layout {
    padding: 0 6px;
    margin-bottom: 10px;
}

.refines .category-thumb {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    height: 100%;
}

/* Ховер как у чипов опций в карточке: подложка и рамка, без тени и смены цвета текста.
   Только для мыши — на тач-экранах :hover залипает после тапа. */
@media (hover: hover) {
    .refines .category-thumb:hover {
        border-color: var(--color-border-strong);
        background: var(--color-surface-muted);
    }
}

.refines .category-thumb .item {
    padding: 10px 14px;
}

.refines .category-thumb .item h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.refines .category-thumb .item h4 a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s ease;
}


/* search page */
.search-page select.form-control {
    appearance: none;
    -o-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.search-page .select-input {
    position: relative;
}
#product-search .checkbox-inline {
    margin-top: 7px;
}
/* other page */
#information-information .col-sm-2.col-lg-1.col-xs-2{
	width: auto;
}
/* cart page */
.cart-des, .cart-img {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
}
.cart-img img{
	border-radius: var(--border-radius);
	padding: 0;
	border: none;
}
.cart-des .input-group {
    max-width: 100px!important;
    margin-top: 10px
}
.cart-des{
    display: inline-block;
    vertical-align: top;
    margin: 0 5px
}
.allcart {
    box-shadow: 0px 0px 20px 0px rgba(var(--rgb-primary), 0.06);
    background-color: rgba(var(--rgb-white), 0.5);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px
}
.allcart .cart-re {
    background-color: transparent;
    border: none;
}
.wish-stock {
    color: green;
    margin-bottom: 10px
}
.cart-des a{
    font-size: 15px;
    font-weight: 500
}
.cart-des .price {
    margin: 5px 0
}
.cartpsp .btn-danger {
    margin: 0 2px;
    height: 34px;
}
.allcart button i{
    font-size: 18px
}
.panel-default > .panel-heading,.panel-group .panel{
	background-color: rgba(var(--rgb-white), 0.5);
	border-radius: var(--border-radius);
}
/* cart page end*/
#common-success .infobg p a{
	color: var(--color-text);
	font-weight: 500;
}
#common-success .infobg p a:hover{
	color: var(--color-primary);
}
.product-quickview-detail .swiper-viewport{
	margin: 0
}
.product-quickview-detail {
    width: 100%;
    background-color: var(--peach-100);
}
.product-quickview-detail #content{
	min-height: auto;
	margin-top: 20px;
}
.mfp-iframe-scaler iframe{
	background: var(--peach-100) !important;
	border-radius: var(--border-radius);
	box-shadow: none !important
}
.product-quickview-detail .pro-content h1{
	margin-top: 0;
}
.swiper-button-prev::before,.swiper-button-next::before{
	color: var(--color-text) !important;
	font-size: 26px !important;
}
.product-quickview-detail #content {
    min-height: auto;
    margin-top: 20px;
}
#checkout-checkout .infobg [class*="col-"] h2 {
    font-size: 18px;
    margin-top: 0;
}
.contsp {
    margin-left: 35px;
    line-height: 25px;
    margin-bottom: 13px;
}
.infocnt i{
	font-size: 16px;
	vertical-align: bottom
}
.infocnt{
	margin-bottom: 20px;
}
.table-bordered,.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th{
	border: 1px solid rgba(var(--rgb-white), 0.5);
}
#accordion .panel-default {
    border: 1px solid rgba(var(--rgb-white), 0.5);
}
.cartpsp .btn-danger {
    margin: 0 2px;
    height: 34px;
}
.subheading, .acpage h1, .not-found-head {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 4px 0 16px;
    color: var(--color-text);
    padding: 20px 0 10px;
}
.acpage .pull-right input[type="checkbox"]{
	margin-top: 0;
	vertical-align: middle;
}
.sitem ul{
	line-height: 35px;
	padding-left: 25px;
	padding-right: 25px;
}
.sitem ul li{
	list-style: url;
}
#accordion #input-password,#affiliate-login #input-password,#account-login #input-password{
	margin-bottom: 10px;
}
.acspace input[type="checkbox"]{
	margin: 0 0 0;
	vertical-align: middle;
}
#accordion .panel-title i {
    float: right;
}
.panel-title{
	font-size: 14px;
}
.valign{
	vertical-align: middle !important;
}
.well {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: 0 0 20px 0 rgba(var(--rgb-primary), 0.06);
	padding: 0 15px 15px 15px;
}
.well p{
	font-size: 12px;
}
.well p strong{
	font-size: 13px;
	font-weight: 500;
}

.table-hover > tbody > tr:hover {
    background-color: transparent;
}
.addlist {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 10px;
    line-height: 25px;
}
.addl{
	border-top: 1px solid var(--color-border);
    border-radius: var(--border-radius);
	padding-top: 10px;
	margin-top: 10px;
}
.alert {
    top: 0;
    left: 0;
    right: 0;
    border-radius: var(--border-radius);
    z-index: 99;
}
.alert .close {
    opacity: 1;
    right: 0;
    top: 0;
}
.co-heading {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: 0;
}
.img-thumbnail{
	border-radius: 0
}
.comb .btn-primary{
	margin: 3px 0;
}
.com-description {
    width: 25%;
    color: var(--color-text-muted);
	font-size: 13px;
}
.com-summary {
    width: 1%;
}
.brand-list .brands-content {
    padding: 8px;
}
.bname {
    background: none repeat scroll 0 0 rgba(var(--rgb-white), .8);
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 6px 0;
    padding: 5px 8px;
    border-radius: var(--border-radius);
}
.brand-list {
    border: 1px solid rgba(var(--rgb-white), .5);
    padding: 5px;
    margin-bottom: 20px;
    background-color: rgba(var(--rgb-white), .5);
    border-radius: var(--border-radius);
}
/* account - left column */
a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover{
	background-color: transparent;
	color: var(--color-primary);
}
.accolumn{
	box-shadow: 0px 0px 20px 0px rgba(var(--rgb-primary), 0.06);
	border-radius: var(--border-radius);
	padding: 15px 0px;
	background-color: rgba(var(--rgb-white), 0.5);
}
.accolumn.list-group a{
	border: none;
	padding: 10px 50px;
	font-size: 13px;
	background-color: transparent;
}
.accolumn.list-group a.logu{
	padding: 10px 0;
	color: var(--color-text)
}
.accolumn h3{
	font-size: 16px;
	color: var(--color-text);
	padding: 0;
	display: inline-block;
	margin-top: 0;
	padding: 0 20px;
}
.accolumn h3 a{
	font-size: 16px;
	font-weight: 500;
	color: #878787;
	padding: 0;
	display: inline-block;
	margin-top: 0;
	padding: 0 0px;
}
.accolumn h3 svg{
	fill: var(--color-primary);
	margin-right: 10px;
}
.accolumn hr{
	border-top: 1px solid #f0f0f0;
}
/* account page */
.acco span{
	display: inline-block;
	vertical-align: middle;
}
#account-account.acpage #content[class*="col-"] a {
    display: inline-block;
    box-shadow: 0px 0px 20px 0px rgba(var(--rgb-primary), 0.06);
    background-color: rgba(var(--rgb-white), 0.5);
    width: 100%;
    padding: 25px 25px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}
#account-account.acpage #content[class*="col-"] span:first-child{
	border-right: 1px solid var(--color-border);
	padding-right: 25px;
	margin-right: 25px;
}
#account-account.acpage #content[class*="col-"] span:last-child{
	font-size: 16px;
	font-weight: 500;
}
#account-account.acpage #content[class*="col-"] span:last-child span{
	font-size: 14px;
	font-weight: 400;
	margin-top: 6px;
	letter-spacing: 0.3px;
}
#account-account.acpage #content[class*="col-"] span svg{
	fill: var(--color-primary);
}
#account-account .achead {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 4px 0 16px;
    color: var(--color-text);
    padding: 20px 0 10px;
}
.infobg {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 0 20px 0 rgba(var(--rgb-primary), 0.06);
    padding: 0 15px 15px 15px;
}
.acl{
	margin-bottom: 5px;
}
/* responsive */
@media (max-width: 779px){
	.product-quickview-detail .pro-content h1 {
	    margin-top: 50px;
	}
}
@media (min-width: 768px){
	.big-img{
		float: right;
	}
	.sticky,.blogsticky{
		position: sticky;
		top: 15px
	}
	.product-list .caption {
	    text-align: left;
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.product-list .image, .product-list .caption {
	    float: left;
	    position: relative;
	    margin: 0;
	}
	#xsfilter {
	    display: block !important;
	}
	.catfilter .panel-heading button{
		display: none
	}
	.middle-footer h5 button {
	    display: none;
	}
	.footer-collapse.collapse {
	    display: block !important;
	    height: auto !important;
	    padding-bottom: 0;
	    overflow: visible !important;
	}
}
@media (min-width: 1410px){
	.big-img{
		width: 83%;
	}
	.gal-img{
		width: 17%;
	}
	#column-right,#column-left{
		width: 22%;
	}
	#content.colright{
		width: 78%;
	}
	.product-list .image {
	    width: 30%;
	}
	.product-list .caption {
	    width: 70%;
	}
	.manucom .product-grid{
		width: 33.33333333%;
	}
	.manucom .product-list .image{
		width: 32%;
	}
	.manucom .product-list .caption{
		width: 68%;
	}
	.manucom .product-list{
		width: 50%;
	}
}
@media (min-width: 1200px) and (max-width: 1409px){
	.choose::before {
		background-size: 500px;
	}
	.choose ul p {
    	max-width: 370px;
	}
	.dropdown.inuser {
    	margin: 6px 12px;
	}
	.manucom .product-grid {
    	width: 25%;
	}
	.slidedes {
	    left: 35px;
	}
	#menu .navbar-nav > li > a {
	    margin: 0 8px;
	}
	.slidesmall h2{
		font-size: 50px;
	}
	.slidesmall p{
		max-width: 450px;
	}
	.manucom .product-list .image{
		width: 22%;
	}
	.manucom .product-list .caption{
		width: 78%;
	}
	.list-group a{
		font-size: 13px;letter-spacing: 0
	}
	.product-list .image {
	    width: 30%;
	}
	.product-list .caption {
	    width: 70%;
	}
}
@media(max-width: 1199px){
	.choose::before {
		display: none;
	}
}
@media(min-width: 1200px){
	.sliderow img {
		width: 1580px;
	    border-radius: var(--border-radius);
	    margin: 15px auto;
	}
}
@media (min-width: 992px) and (max-width: 1199px){
	.sliderow img {
    border-radius: 0;
    margin: 0 auto;
	}
	.menu-type .image {
    	margin-right: 7px;
	}
	#toprate .caption h4{
		width: 55%;
	}
	.choose ul li div:first-child {
		width: 100px;
    	height: 100px;
    	padding: 16px 0;
    	margin-right: 10px;
	}
	.choose ul p {
    	font-size: 14px;
    	max-width: 340px;
	}
	.choose ul h4{
		font-size: 22px;
	}
	.hbottom{
		padding: 0;
	}
	.next-prevb .heading,.banner-bg, .ser-bann,.logo-slider,footer,.store-location,.choose,.service{
		margin-top: 30px;
	}
	.heading h1::after {
    	margin: 15px auto;
	}
	.middle-footer{
		padding: 30px 0;
	}

	.accolumn h3 {
    	font-size: 14px;
    	padding: 0 14px;
	}
	#madebyhand-search-category{
		width: 130px;
	}
	#menu .navbar-nav > li > a {
    	margin: 0 6px;
	}
	.slidedes {
    	left: 15px;
	}
	.slidesmall h2 {
	    font-size: 32px;
	    max-width: 508px;
	}
	.slidesmall p {
	    max-width: 450px;
	}
	.cate {
    	padding: 3px 10px;
	}
	.product-list .image {
	    width: 35%;
	}
	.product-list .caption {
	    width: 65%;
	}
	.heading h1{
		font-size: 24px;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.new-ti h5{
		font-size: 18px;
	}	
	.sliderow img{
    border-radius: 0;
    margin: 0 auto;
	}
	.service h3{
		font-size: 20px;
	}
	.service p{
		font-size: 12px;
	}
	.head-menu {
	    position: absolute;
	    left: 15px;
	    right: auto;
	    width: auto;
	    z-index: 9;
	    margin-top: 6px;
	    color: var(--color-text-inverse);
	}
	.top-bar-co, .hbottom{
		padding: 0;
	}
	.call-no{
		font-size: 14px;
	}
	.accolumn h3 {
    	font-size: 14px;
    	padding: 0 14px;
	}
	.slidebig h1 {
    	font-size: 170px;
	}
	.slidedes {
	    left: 15px;
	}
	.slidesmall p{
		max-width: 400px;
		font-size: 12px;
		margin: 12px 0;
	}
	.slidesmall h2 {
    	font-size: 28px;
    	max-width: 600px;
	}
	.slidecap a {
    	padding: 8px 15px;
	}
	#logo{
		position: relative;
		z-index: 1;
	}
	#logo img{
		margin: 0;
    	max-width: 110px;
	}
	.navbar-toggle{
		margin: 0;
		padding: 0;
		display: block;
	}
	.newsl button {
    	position: absolute;
    	width: auto;
    	top: 0;
    	right: -1px;
	}
	.topbe::before, .xscu .test::before {
    	margin: 0 15px;
	}
	.middle-footer h5{
		font-size: 14px;
	}
	.blog_comment::before, .blog_comment::after{
		padding: 0 3px;
	}
	.proreview{
		margin: 0 15px;
		padding: 0 15px;
	}
	.manucom .product-grid{
		width: 33.33%;
	}
	.manucom .product-list .image{
		width: 30%;
	}
	.manucom .product-list .caption{
		width: 70%;
	}
	.product-list .image {
	    width: 45%;
	}
	.product-list .caption {
	    width: 55%;
	}
	.product-list .caption {
    	margin: 8px 0 0;
	}
}
@media (min-width: 992px){
	#menu .dropdown:hover .dropdown-menu {
		display: block;
		padding: 10px 5px;
	}
}
@media (max-width: 991px){
	.sale{
		top: 2px;
		left: 2px;
	}
	.comments_note {
    	top: 2px;
    	right: 4px;
	}
	#blog .product-block .webi-blog-image{
		margin: 0;
	}
	.date-time {
    	width: 60px;
    	height: 60px;
	    left: 5px;
	    padding: 4px 0;
	}
	.product-thumb .button-group button, .product-thumb .button-group a {
    	box-shadow: 0px 0px 3px 0px rgba(var(--rgb-black), 0.2);
		background: var(--color-surface);
		width: 40px;
		height: 40px;
		padding: 9px 8px;
		display: inline-block;
		margin: 2px 2px;
	}
	.product-thumb .button-group button:hover, .product-thumb .button-group a:hover {
    	background: var(--color-primary);
	}
	.bquickv {
    	display: inline-block;
    	vertical-align: middle;
	}
	.middle-footer{
		padding: 30px 0;
	}
	.abs-btn {
    	display: inline-block;
	}
	.next-prevb .owl-carousel.owl-theme .owl-controls {
    	margin-top: 15px;
	}
	#account-account.acpage #content[class*="col-"] span svg{
		width: 35px;
		height: 35px;
	}
	#account-account.acpage #content[class*="col-"] span:first-child{
		padding-right: 10px;
		margin-right: 10px;
	}
	#account-account.acpage #content[class*="col-"] span:last-child {
   		font-size: 13px;
   		letter-spacing: 0;
	}
	#account-account.acpage #content[class*="col-"] span:last-child span {
    	font-size: 10px;
    	letter-spacing: 0;
    	margin-top: 1px;
	}
	.breadcrumb{
		margin-top: 20px;
	}
	.newsbgf h3 {
    	font-size: 19px;
		letter-spacing: 0;
	}
	.menusp{
		text-align: left
	}
	.navbar-nav{
		margin: 0;
		float: none;
		text-align: left;
	}
	.hsticky {
	    padding: 0 !important;
	}
	#madebyhand-search-category,#search .input-lg,#search .btn-lg{
		height: 40px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-top: 0;
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
	}
	#menu .dropdown-inner .submenu-title{
		padding: 3px 28px;
	}
	#menu .dropdown-inner .dropdown-submenu .grand-child a{
		padding: 0
	}
	#menu .dropdown-submenu {
	    padding: 5px 15px !important;
	}
	#menu .see-all {
		display: inline-block;
		letter-spacing: 0;
		margin: 0;
		padding: 0 25px !important;
		font-weight: 500;
	}
	.navbar-nav .open .dropdown-menu {
	    position: static;
	    float: none;
	    width: auto;
	    margin-top: 0;
	    background-color: transparent;
	    border: 0;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	}
	#menu .dropdown-inner ul{
		display: block;
	}
	#menu .nav li{
		display: block;
		float: none;
	}
	/* sidenav */
	#mySidenav li a i{
		margin-top: 0;
		float: right
	}
	body.active {
	    overflow: hidden;
	}
	body.active::before {
	    background: var(--color-surface-inverse) none repeat scroll 0 0;
	    content: "";
	    height: 100%;
	    left: 0;
	    opacity: 0.7;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    z-index: 9;
	    transition: all .2s ease 0s;
	}
	body.active .sidenav {
	    overflow-x: unset;
	    overflow-y: scroll;
	}
	.sidenav {
	    height: 100%;
	    width: 0;
	    position: fixed;
	    z-index: 999;
	    top: 0;
	    left: 0;
	    transition: 0.5s;
	    padding-top: 60px;
	    overflow-x: hidden;
	    box-shadow: 5px 0 5px 0 rgba(var(--rgb-black), .06);
	    clear: both;
	    height: 100%;
	    background-color: var(--color-surface);
	    list-style: none;
	    margin: 0;
	    padding: 0;
	    text-align: left;
	}
	.sidenav .close-nav {
		background-color: var(--color-surface-inverse);
		padding: 12px 15px;
		width: 100%;
		display: inline-block;
		color: var(--color-text-inverse);
	    margin-bottom: 10px;
	}
	.closebtn,.closebtn:hover,.closebtn:focus{
		color: var(--color-text-inverse);
	}
	#mobile_top_menu_wrapper {
	    margin: 0;
	    line-height: 20px;
	    display: block !important;
	}
	#menu .navbar-collapse {
	    display: block;
	    padding: 0
	}
	#search .btn-lg{
		min-width: unset;
	}
	.serpd,.banner-bg{
		margin-left: 0;
		margin-right: 0
	}
	.middle-footer{
		padding: 20px 0
	}
	.slidebg,.logo-slider{
		margin-left: 0;
		margin-right: 0;
	}
	#common-home #content {
	    padding: 0;
	}
	.rless{
		margin-left: -5px;
		margin-right: -5px;
	}
	.cless{
		padding-left: 5px;
		padding-right: 5px;
	}
	.bquickv{
		opacity: 1
	}
	.product-thumb .button-group button.cartb span,.newsbgf h3, .social h3{
		display: none
	}
	.product-thumb .button-group{
		margin-top: 8px;
	}
	.product-thumb{
		margin-bottom: 10px;
	}
	.pro-tab.nav-tabs{
		margin-bottom: 20px;
	}
	.heading h1{
		font-size: 20px;
	}
	h1 {
	    font-size: 24px;
	}
	h2 {
	    font-size: 19px;
	}
	h3 {
	    font-size: 17px;
	}
	.heading h4{
		font-size: 14px;
	}
	.next-prevb .heading,.logo-slider,.service,.choose,.store-location,footer{
		margin-top: 30px;
	}
	.next-prevb .heading{
		margin-bottom: 15px;
	}
	.logo-slider{
		padding: 15px 0;
	}
	.footer-top{
		padding-top: 0;
	}
	#menu .navbar-nav > li > a{
		padding: 7px 15px;
		margin: 0 !important;
		color: var(--color-text);
	}
	.store-location{
		margin-left: 0;
		margin-right: 0;
	}
}
.owl-pagination{
	top: 0 !important;
}
@media (max-width: 767px){
	.next-prevb .owl-theme .owl-controls .owl-buttons div {
    	width: 35px;
    	height: 35px;
    	padding: 4px 0;
	}
	.cartta{
		top: -8px;
	}
	.menu-type {
    	padding: 10px;
	}
	.menu-type .image {
    	margin-right: 5px;
	}
	#toprate .product-thumb .image {
    	width: auto;
	}
	#toprate .product-thumb .caption {
    	width: 75%;
	}
	#toprate .caption h4 {
    	padding: 2px 5px;
    	font-size: 14px;
    	width: 63%;
	}
	#toprate .price-old{
		display: none;
	}
	#toprate .price {
    	font-size: 14px;
	}
	.menulist-des{
		margin-top: 10px;
	}
	.foot-payment{
		margin-top: 15px;
	}
	#tab-description img{
		margin-bottom: 15px;
	}
	#testi{
		padding: 15px;
	}
	.news-b {
    	margin-top: 10px;
	}
	.product-list .product-thumb .rating{
		margin-top: 5px;
	}
	.all-blog-des.allcomment {
    	margin-bottom: 15px;
	}
	.product-thumb .price{
		font-size: 14px;
	}
	.heading{
		font-size: 20px;
	}
	.product-list .protitle, .product-list .protitle a,.product-list .product-thumb .price{
		font-size: 16px;
	}
	.product-list .product-thumb .price{
		margin-bottom: 8px;
	}
	.next-prevb .owl-theme .owl-controls .owl-buttons div svg{
		width: 18px;
		height: 18px;
	}
	.cate-name-view {
    	bottom: 0;
    	left: 15px;
	}
	.wbSearch{
		padding: 15px;
	}
	.xsla, .xscu{
		margin: 0;
	}
	.haccount {
    	width: 246px;
    	right: -35px;
	}
	.xsla, .xscu {
    	margin: 6px 2px;
    	padding-top: 0;
	}
	.top-bar-co, .hbottom{
		padding: 0;
	}
	.head-menu {
    	position: absolute;
    	left: 15px;
    	right: auto;
    	width: auto;
    	z-index: 9;
		margin-top: 4px;
	}
	.homeslider-container .slick-prev, .homeslider-container .slick-next{
		display: none !important;
	}
	.acspace button{
		display: block;
		text-align: right;
		margin-top: 15px;
	}
	.acspace{
		font-size: 12px;
	}
	.protitle{
		padding: 5px 0 6px 0;
		font-size: 14px;
        min-height: 48px;
	}
	.choose .heading{
		text-align: center;
	}
	.choose .heading h1::after {
		margin: 20px auto;
	}
	.price-old{
		font-size: 13px;
	}
	.social{
		margin-top: 0;
	}
	.copy {
    	padding: 15px 0;
	}
	.dropdown.inuser {
    	margin: 3px 15px;
	}
	.btn-link.dropdown-toggle.test{
		padding: 0 5px;
	}
    .slidesmall h2{
    	font-size: 20px;
    	margin-top: 5px;
    }
    .slidesmall p{
    	font-size: 12px;margin: 12px 0;letter-spacing: 0;max-width: 300px;
    }
    .slidecap a{
    	padding: 7px 15px;
    }
    .slidebig h1{
    	font-size: 72px;
    }
    .slidedes{
    	margin-top: -12px;
    }
    .slidesmall h3{
    	font-size: 18px;
    }
	.product-thumb .button-group svg {
    	width: 15px !important;
		height: 15px !important;   
	}
	.product-thumb .button-group button, .product-thumb .button-group a {
    	width: 28px;
    	height: 28px;
    	padding: 2px 0px;
    	margin: 1px 0px;
	}
	.middle-footer h5{
		font-size: 16px;
	}
	.menusp .navbar-header button{
		border: none;
		padding: 0;
		background: transparent;
		margin: 0;
		float: none;
		position: unset;
	}
	.menusp .navbar-header button i{
		font-size: 17px;
	}
	.navbar-toggle{
		padding: 0;
		margin: 0;
		float: none;
		color: var(--color-text);
	}
	.navbar-toggle:hover{
		color: var(--color-primary);
	}
	#cart-total{
		padding: 0 !important;
	}
	#logo{
		padding-left: 20px;
		position: relative;
		z-index: 1;
	}
	#cart svg {
    	margin: 0 !important;
	}
	#cart {
    	background-color: transparent;
    	padding: 0;
    	margin-top: 0;
	}
	#search .btn-lg{
		min-width: unset;
	}
	.inuser{
		display: inline-block;
		margin: 0 10px;
	}
	.langcur .dropdown-menu {
	    min-width: 23rem;
	    padding: 10px 7px;
	}
	.blog_webi .blog-right h4{
		font-size: 14px;
	}
	.blog-des p{
		margin-bottom: 15px;
	}
	.categorybr h5 span{
		display: inline;
	}
	.categorybr h5{
		font-size: 14px;letter-spacing: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.menusp, #top-links {
	    margin-top: 6px;
	}
	#top-links{
		padding-left: 0;
	}
	.langcur{
		margin: 0 10px;
	}
	header #logo img{
		max-width: 120px;
		margin: 0;
	}
	header #logo {
    	margin-bottom: 0;
	}
	.inuser a.dropdown-toggle span,#cart-total::before{
		display: none
	}
	.newsl{
		margin-bottom: 0;
	}
	.mfp-iframe-holder .mfp-content {
	    height: 100%;
	}
	.breadcrumb{
		padding: 8px 10px;
		margin-top: 15px;
		font-size: 13px;
		letter-spacing: 0
	}
	.allcomment h5{
		font-size: 14px;
	}
	.blog_links{
		font-size: 12px;letter-spacing: 0;
		margin: 8px 0
	}
	.blog_comment::before, .blog_comment::after{
		padding: 0 3px;
	}
	.allmb .blog-desc{
		margin-bottom: 5px;
	}
	.pro-content h1{
		margin-top: 15px;
		font-size: 18px;
	}
	.search-page .select-input {
	    margin: 10px 0;
	}
	.catlist-des{
		height: 36px;
		overflow: hidden;
	}
	.langcur .btn-link.dropdown-toggle.test{
	    border: 1px solid var(--color-border);
		font-size: 12px;
		letter-spacing: 0;
		padding: 2px 8px;
		color: var(--color-text);
	}
	#form-currency .dropdown-menu.dropdown-menu-right{
		left: 0;
		right: auto
	}
	.pro-tab li a{
		font-size: 14px;
		padding: 8px 10px;
	}
	.footappxs{
		text-align: center !important;
	}
	.middle-footer .btn.toggle{
	    text-shadow: none;
	    background: none;
	    background-image: none;
	    background-image: none;
	    border: 0;
	    box-shadow: none;
	    font-size: 12px;
	    position: absolute;
	    top: -3px;
	    right: 0;
	    padding: 0;
	    width: 100%;
	}
	footer h5 .toggle::after,.catfilter .toggle::after{
	    font-family: 'FontAwesome';
	    content: '\f068';
	    font-size: 14px;
	    font-weight: normal;
	    float: right;
	    cursor: pointer;
	}
	footer h5 .toggle.collapsed::after,.catfilter .toggle.collapsed::after{
	    font-family: 'FontAwesome';
	    content: '\f067';
	    font-size: 14px;
	    font-weight: normal;
	    float: right;
	    cursor: pointer;
	}
	.catfilter .panel-heading button {
	    position: absolute;
	    top: 10px;
	    width: 100%;
	    right: 0;
	    padding: 0 15px;
	    background: transparent;
	    color: var(--color-text-inverse)
	}
	#cat_tab .nav-tabs{
		text-align: left;
		margin-bottom: 0;
	}
	#cat_tab a{
		display: block;
	}
	.viewmore{
		padding: 0;
	}
	.category-tab.tabpro.next-prevb {
    	position: relative;
	}
	.cate-pro .row {
	    margin-left: 0;
	    margin-right: 0;
	}
	.cate-pro .product-layout {
	    margin-bottom: 0 !important;
	    padding-right: 0;
	    padding-left: 0;
	}
	.cate-pro .product-layout .product-thumb {
	    border-radius: 0;
	}
	.cate-pro .product-thumb .image {
	    padding: 12px 10px 2px;
	}
	.cate-pro .item {
	    min-height: 45px;
	    padding: 0 4px 10px;
	}
	.cate-pro .item h4 {
	    font-size: 10px;
	    font-weight: 700;
	    line-height: 1.25;
	    letter-spacing: 0.2px;
	    text-transform: uppercase;
	}
	.catb {
	    position: absolute;
	    right: 15px;
	    top: 26px;
	    background: rgba(var(--rgb-white), 0.5);
	    color: var(--color-text);
	    padding: 0;
	    border: none;
	    z-index: 9;
	    padding: 7px 11px 7px 11px;
	}
	.catb.toggle.collapsed::after {
	    font-family: 'FontAwesome';
	    content: '\f067';
	    font-size: 14px;
	    font-weight: normal;
	    float: right;
	    cursor: pointer;
	}
	.catb.toggle::after {
	    font-family: 'FontAwesome';
	    content: '\f068';
	    font-size: 14px;
	    font-weight: normal;
	    float: right;
	    cursor: pointer;
	}
	.category-tab .nav-tabs li,.viewmore li{
		display: block;
		padding: 5px 0;
	}
	#cat_tab {
    	margin-bottom: 15px;
	}
	.catfilter .panel-heading{
		position: relative;
	}
	.catfilter .panel-heading{
		padding: 10px 15px;
	}
	.middle-footer h5{
		font-size: 14px;
		margin-bottom: 10px;
		position: relative
	}
	.topbe::before, .test::before{
		display: none;
	}
	.copy .text-left,.copy .text-right{
		text-align: center
	}
	.middle-footer {
	    padding: 20px 0;
	}
	#under-menu{
    	display: block;
    	border: none;
	}
	.menu-type img{
		max-width: 65px;
	}
	.store-location{
		padding: 0;
		background-image: none;
	}
	#testi p,.store-location ul li p {
    	font-size: 14px;
    	line-height: 20px;
	}
	.store-location ul li h3{
		font-size: 26px;
	}
}
@media (max-width: 450px){
	.slidesmall p{
		margin: 10px 0;
		display: none;
	}
	.slidesmall h2 {
	    font-size: 18px;
	    margin-top: 0;
	    max-width: 160px;
	}
}
@media (max-width: 599px){
	#search .input-lg{
		border-radius: 10px 0 0 10px;
	}
	.sliderow img{
    border-radius: 0;
    margin: 0 auto;
	}
	.choose ul li{
		display: block;
		text-align: center;
	}
	.choose ul h4 {
    	font-size: 16px;
    	margin-top: 0px;
	}
	.choose ul p{
		font-size: 12px;
		line-height: 16px;
		max-width: 210px;
	}
	.choose ul li div:first-child {
	    box-shadow: none;
	    width: auto;
	    background-color: transparent;
	    height: auto;
	    padding: 0;
	    margin-right: 10px;
	}
	.choose ul li div:last-child {
	    text-align: left;
	}
	.pro-tab li a{
		min-width: unset;
		background-size: contain !important;
	}
	.banner-bg{
		background: none;
		padding-top: 0;
	}
	.allcart {
	    text-align: center;
	}
	.cart-des{
		display: block;
		margin-top: 10px;
	}
	.cart-des .input-group{
		margin: 0 auto;
	}
	.allcart .cart-re {
    	float: none !important;
    	margin-top: 5px;
	}
	#blog .blog-left,#blog .blog-right{ 
		width: 100%;
	}
	.slidecap a{
		display: none;
	}
	.newsl .description-top p {
    	font-size: 12px;
	}
	.white-popup{
		padding: 30px 20px;
	}
	.white-popup h1{
		font-size: 18px;letter-spacing: 0
	}
	.white-popup p{
		font-size: 12px;letter-spacing: 0
	}
	.product-tab .nav > li > a{
		letter-spacing: 0
	}
	.product-tab li {
	    margin: 0 4px;
	}
	.pro-content .rating li {
	    letter-spacing: 0;
	    font-size: 13px;
	}
	.proreview {
	    margin: 0 8px;
	    padding: 0 8px;
	}
	#madebyhand-search-category{
		display: none
	}
	.catesort {
	    width: 100%;
	    margin-top: 15px;
	}
	.pagi .text-left, .pagi .text-right {
	    text-align: center;
	    width: 100%;
	}
}
@media (min-width: 600px) and (max-width: 767px){
	.sliderow img{
    border-radius: 0;
    margin: 0 auto;
	}
	.choose ul li div:first-child {
    	height: 106px;
    	padding: 20px 0;
	}
	.service [class*="col-"] img,.service [class*="col-"] div{
		display: inline-block;
		text-align: left;
	}
	.service [class*="col-"]{
		display: flex;
		align-items: center;
	}
	.service p {
    	max-width: 370px;
	}
	.menu-type img{
		max-width: 100px;
	}
	.ct,.slidesmall h3{
		display: none
	}
	.blog_webi .blog-right .read_more {
    	margin-top: 10px;
	}
	.blog-des p {
    	max-height: 66px;
		overflow: hidden;
	}
}
@media (min-width: 400px) and (max-width: 767px){
	.product-list {
	    width: 50%;
	}
}
.beffect a:hover::after {
    width: 100%;
    height: 100%;
    right: auto;
    left: 0;
}
.beffect a::after {
    background: rgba(var(--rgb-white), .1);
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    -webkit-transition: all 0.4s ease-in-out 0s;
    right: 0;
    top: 0;
    border-radius: var(--border-radius);
}
.beffect a {
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.beffect{
	position: relative;
	overflow: hidden
}
.beffect img{
	border-radius: var(--border-radius);
}

/* ============================================================
   Header 2026 — меню на всю ширину + контакты (чайная тема)
   Требует переменные палитры из :root (stylesheet.css).
   Добавьте в конец catalog/view/theme/ocmod/stylesheet/stylesheet.css
   ============================================================ */

.hsticky { background: var(--color-surface); }

/* ---- Верхняя строка: лого | контакты | действия ---- */
#logo{
	margin-bottom: 10px;
}
#logo a {
    display: flex;
    float: left;
    justify-content: center;
    gap: 34px;
    margin: 50px 0 10px;
}
@media (max-width: 991px) {
	#logo a {
	    margin-top: 10px;
	}
}
.hbottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 4px 0;
}
.hbottom > [class*="col-"] {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---- Контакты (на месте бывшего меню) ---- */
.head-contacts { display: flex; align-items: center; }
.hcontacts {
	display: flex;
	justify-content: center;
	gap: 34px;
	width: 100%;
	margin: 50px 0 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
	.hcontacts {
		margin: 35px 0 0;
	}
}
.hcontact-item a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-text);
	text-decoration: none;
	transition: color .18s ease;
}
.hcontact-item a:hover .hc-main,
.hcontact-item a:focus .hc-main { color: var(--color-primary); }
.hsearch {
	width: 100%;
	margin: 55px 0 0;
}
.hc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-primary);
}
/* ── Анимированная смена иконок контакта ── */
.hc-ico--animated {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--rgb-primary), .08);
    color: var(--color-primary);
}
.hc-ico-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.hc-ico-slide i {
  font-size: 18px;
  line-height: 1;
}
.hc-ico-slide.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hc-ico-slide.is-exit {
  opacity: 0;
  transform: translateY(-60%);
}
.hc-ico svg { display: block; fill: var(--color-primary); }
.hc-ico .fa, .hc-ico .fab {
    font-size: 18px;
    color: var(--color-text-muted);
    line-height: 1;
}
.hc-ico-slide:nth-child(2) i { color: var(--color-telegram); } /* telegram */
.hc-ico-slide:nth-child(3) i { color: #7b5ea7; } /* viber */

/* ── Telegram-ссылка в шапке ─────────────────────────────────────────────────
   Было: сплошная чёрная полоса, которая выезжала справа налево и уезжала
   обратно — заказчику нравилось, что она мигает, но просил «чтобы разбегалось
   из середины».
   Стало: линия расходится от центра к краям, держится и гаснет, а не уезжает
   назад; сама линия — градиент с прозрачными концами, поэтому у неё нет
   рубленых торцов, и одновременно подсвечивается текст. Иконку не трогаем:
   анимируется ссылка, а не кружок. */
/* Иконка — зелёная, как значки в тёмной ленте и как подсветка подписи.
   Серый значок рядом с зеленеющим текстом читался как чужой. */
.hc-tg .hc-ico .fab { color: var(--color-primary); }
.hc-tg .hc-main {
    position: relative;
    animation: tg-ink 3.2s ease-in-out infinite;
}
.hc-tg .hc-main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    /*background: linear-gradient(90deg,
        rgba(var(--rgb-primary), 0) 0%,
        var(--color-primary) 20%,
        var(--color-primary) 80%,
        rgba(var(--rgb-primary), 0) 100%);*/
    transform: scaleX(0);
    transform-origin: center;   /* ключевое: рост идёт от середины в обе стороны */
    animation: tg-underline 3.2s cubic-bezier(.22, .8, .3, 1) infinite;
}
@media (min-width: 1199px) and (max-width: 1409px){
    .hc-tg .hc-main span {
        display: none;
    }
}
@keyframes tg-underline {
    0%        { transform: scaleX(0); opacity: 1; }
    22%       { transform: scaleX(1); opacity: 1; }
    62%       { transform: scaleX(1); opacity: 1; }
    80%       { transform: scaleX(1); opacity: 0; }
    /* сжимаем уже невидимой, чтобы следующий цикл снова начался из центра */
    81%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes tg-ink {
    0%, 10%   { color: var(--color-text); }
    26%, 58%  { color: var(--color-primary); }
    80%, 100% { color: var(--color-text); }
}
/* На наведении цикл останавливаем: линия просто остаётся раскрытой. */
.hc-tg a:hover .hc-main,
.hc-tg a:focus .hc-main {
    animation: none;
    color: var(--color-primary);
}
.hc-tg a:hover .hc-main::after,
.hc-tg a:focus .hc-main::after {
    animation: none;
    transform: scaleX(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hc-tg .hc-main,
    .hc-tg .hc-main::after { animation: none; }
    .hc-tg .hc-main::after { transform: scaleX(1); opacity: 1; }
}

.hc-text { display: flex; flex-direction: column; line-height: 1.25; }
.hc-main {
	font-weight: 700;
	font-size: 20px;
	color: var(--color-text);
	transition: color .18s ease;
}
.hc-sub { font-size: 12px; color: var(--color-text-muted); }

/* ---- Вертикальное выравнивание белой строки шапки -------------------------
   .htop лежал абсолютом (position:absolute; top:0; z-index:6) поверх
   контейнера, и тема компенсировала это верхними отступами у каждого блока
   внутри .hbottom по отдельности: .hcontacts — margin-top 50px, поиск — 50px,
   у #logo свои 10px снизу. Блоки в итоге стояли на разных высотах: центр поля
   поиска на 78px, центр корзины на 58px — отсюда и «корзина слишком высоко».
   .htop возвращён в поток ниже по файлу (см. блок «Верхняя служебная полоса»),
   здесь снимаем компенсирующие отступы — align-items:center у .hbottom
   выравнивает всё сам. Общая высота шапки не меняется. */
.hbottom .hcontacts,
.hbottom .header-search-inline,
.hbottom #logo a { margin: 0; }
.hbottom > #logo { margin-bottom: 0; }
/* <li> контакта — list-item со своим line-height: он добавлял 6px под ссылкой
   и уводил номер на 3px вверх относительно поиска. */
.hcontact-item { display: flex; align-items: center; }

/* ---- Меню на всю ширину ---- */
.hmenu-bar {
	width: 100%;
	background: var(--color-primary);
	box-shadow: inset 0 -2px 0 rgba(var(--rgb-black), .08);
}
.hmenu-bar .menurel { margin: 0; }
.hmenu-bar #menu.navbar {
	margin: 0;
	min-height: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.hmenu-bar #menu .navbar-collapse { padding: 0; }
.hmenu-bar #menu .nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	float: none;
	margin: 0;
	/* Минимальный зазор между пунктами. Переменная, а не число: крайние пункты
	   пересчитывают её (см. блок @media min-width:992px ниже). */
	--menu-gap: clamp(4px, 0.3vw, 10px);
}
.hmenu-bar #menu .nav > li { float: none; }
.hmenu-bar #menu .nav > li > a {
    padding: 15px 0;
    color: var(--color-on-primary);
    font-weight: 300;
    background: transparent !important;
    transition: background .18s ease, color .18s ease;
    margin: 0 12px;
}
/* Все категории в один ряд: размер шрифта и отступы тянутся за шириной экрана.
   От ~1200px помещаются все пункты и кнопка «Ещё» скрывается сама;
   ниже — скрипт меню по-прежнему убирает хвост под бургер. */
@media (min-width: 992px) {
    .hmenu-bar #menu .nav {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    /* Bootstrap вешает на .nav клирфикс ::before/::after (display:table).
       Во флекс-контейнере это два полноценных флекс-элемента: они съедают
       по промежутку от space-between и сдвигают первый пункт вправо. */
    .hmenu-bar #menu .nav::before,
    .hmenu-bar #menu .nav::after { display: none; }

    .hmenu-bar #menu .nav > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* Отступ — это МИНИМАЛЬНЫЙ зазор: остальное добирает space-between.
           Поэтому держим его маленьким — так все 13 пунктов помещаются в один
           ряд уже с ~1185px, а не с ~1210px, и на 1200px (частое разрешение
           ноутбука) «Акции» не уезжают под кнопку «ещё». */
        margin: 0 var(--menu-gap);
        font-size: clamp(13px, 0.85vw, 15px);
        letter-spacing: 0;
        white-space: nowrap;
    }
    /* Крайние пункты — заподлицо с сеткой: лого, хлебные крошки и первый пункт
       меню должны начинаться на одной вертикали, «Акции» — упираться в правый край.
       У первого пункта снятый левый отступ отдаём правому, иначе подсветка при
       наведении вплотную обжимает шеврон. У последнего убираем отступы совсем:
       красная плашка должна совпадать с <li> пиксель в пиксель, иначе в полоске
       поля при наведении светится зелёная подсветка <li>. */
    .hmenu-bar #menu .nav > li:first-child { margin-left: calc(var(--menu-gap) * -1); }
    .hmenu-bar #menu .nav > li:first-child > a {
        /* отступ переносим из margin в padding и утягиваем <li> влево на ту же
           величину: текст остаётся на линии сетки, а подсветка при наведении
           получает одинаковые поля слева и справа, а не обжимает надпись */
        margin: 0;
        padding-left: var(--menu-gap);
        padding-right: var(--menu-gap);
    }
    .hmenu-bar #menu .nav > li:last-child > a { margin: 0; }

    /* Шеврон держим в одной строке с названием:
       у него bootstrap-класс pull-right, а float на узком пункте срывается под текст. */
    .hmenu-bar #menu .nav > li > a .enangle {
        float: none;
        margin: 0;
        font-size: 12px;
        line-height: 1;
    }
}

/* ---- Выделенный пункт «Оптом» ---------------------------------------------
   Заказчик просит, чтобы раздел бросался в глаза. Ловим его по адресу ссылки
   (…/optom), а НЕ по :last-child: ниже ~1280px скрипт темы прячет хвост меню
   и последним элементом становится кнопка «ещё». Раньше так выделялись
   «Акции» (…/specials) красным. В украинской версии у пункта другой адрес —
   …/ua/opt, поэтому ловим оба. Сменится адрес пункта — поменяйте адреса
   здесь и в мобильном меню (раздел «Список категорий» ниже по файлу). */
.hmenu-bar #menu .nav > li > a:is([href*="optom"], [href$="/opt"], [href$="/opt/"]) {
    padding: 15px 14px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--color-text-inverse);
    background: var(--color-menu-accent) !important;
}
.hmenu-bar #menu .nav > li > a:is([href*="optom"], [href$="/opt"], [href$="/opt/"]):hover,
.hmenu-bar #menu .nav > li > a:is([href*="optom"], [href$="/opt"], [href$="/opt/"]):focus {
    color: var(--color-text-inverse);
    background: var(--color-menu-accent-hover) !important;
}
/* Подсветка li при наведении не должна перебивать фон ссылки. */
.hmenu-bar #menu .nav > li:hover > a:is([href*="optom"], [href$="/opt"], [href$="/opt/"]) { background: var(--color-menu-accent-hover) !important; }

/* Когда пункт уехал в «ещё» (планшет) — остаётся выделенным жирным тёмным текстом. */
.hmenu-bar #menu .more-menu a:is([href*="optom"], [href$="/opt"], [href$="/opt/"]) {
    color: var(--color-menu-accent);
    font-weight: 700;
}

/* Кнопка «ещё» (скрипт темы добавляет её, когда пункты не помещаются). */
.hmenu-bar #menu .nav > li.view_cat_menu > a {
    padding: 15px 14px;
    color: var(--color-text-inverse);
    background: rgba(var(--rgb-white), .16) !important;
}
.hmenu-bar #menu .nav > li.view_cat_menu > a:hover {
    background: rgba(var(--rgb-white), .28) !important;
}
.hmenu-bar #menu .nav > li:hover,
.hmenu-bar #menu .nav > li.open {
	color: #fff;
	background: rgba(var(--rgb-white), .12) !important;
}
.hmenu-bar #menu .nav > li > a .enangle { color: inherit; opacity: .85; }

/* Выпадающие панели — на светлом фоне */
.hmenu-bar #menu .dropdown-menu {
    border: 0;
    box-shadow: 0 14px 32px rgba(var(--rgb-black), .04);
    padding: 0 2px;
    min-width: 340px;
}
.hmenu-bar #menu .dropdown-menu a { color: var(--color-text-muted); }
.hmenu-bar #menu .dropdown-menu a:hover { color: var(--color-primary); }

/* ---- Бургер-кнопка и оверлей (базовое — скрыто на десктопе) ---- */
.btn-navbar-label { display: none; }
.menu-overlay { display: none; }

/* ============================================================
   Мобильные (≤991px): меню-полоса -> бургер + выезжающая панель
   ============================================================ */
@media (max-width: 991px) {
	.hsearch {
		margin: 5px 0 0;
	}
	.hmenu-bar #menu .nav > li {
	    float: none;
	    width: 100%;
	}
	/* --- Шапка в два ряда вместо трёх -----------------------------------
	   Было: [лого · иконки] / [Меню] / [поиск] — 188px при трёх почти пустых
	   рядах. Стало: [лого · телефон · иконки] / [Меню · поиск] — 135px на
	   планшете и 117px на телефоне.
	   Колонки Bootstrap в первом ряду заменяем на flex: лого и иконки по
	   содержимому, телефон занимает середину (на sm/md она была пустой). */
	.hbottom { flex-wrap: nowrap; position: relative; }
	.hbottom > #logo {
		flex: 0 0 auto;
		width: auto;
		padding-left: 15px;
		padding-right: 0;
	}
	/* Телефон центрируем по окну, а не по остатку строки: лого и блок иконок
	   разной ширины, и в потоке номер всегда уезжал на 6–10px влево. */
	.hbottom > .head-contacts {
		display: flex;
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		transform: translateX(-50%);
		width: auto;
		min-width: 0;
		justify-content: center;
		padding: 0;
	}
	.hbottom > .head-right {
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
		padding-right: 15px;
	}
	.head-contacts .hcontacts {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0;
		padding: 0;
	}
	.head-contacts .hcontact-item { margin: 0; }
	.head-contacts .hc-main { white-space: nowrap; }

	/* Поиск переезжает на строку меню: справа от бургера, а не под ним. */
	.hmenu-bar > .container {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.hmenu-bar .menurel { flex: 0 0 auto; }
	.hmenu-bar #menu,
	.hmenu-bar #menu .navbar-header { width: auto; }
	.hmenu-bar .header-search-mobile {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 460px;   /* на планшете строка поиска во всю ширину выглядит пустой */
		margin-left: auto;
		padding: 0;
		border-top: 0;
	}
	/* Подсказки живого поиска — во всю ширину окна, а не по ширине поля:
	   поле занимает лишь остаток строки после кнопки «Меню», и выпадающий
	   список в нём получался узким. Позиционируем от полосы меню — для этого
	   снимаем position:relative с .hsi-wrap. */
	.hmenu-bar { position: relative; }
	.hmenu-bar .header-search-mobile .hsi-wrap { position: static; }
	.hmenu-bar .header-search-mobile .hsi-results {
		top: 100%;
		left: 0;
		right: 0;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}

	/* Полоса меню становится строкой с бургером */
	.hmenu-bar #menu .navbar-header { float: none; margin: 0; }
	.hmenu-bar #menu .btn-navbar {
		display: flex;
		align-items: center;
		gap: 10px;
		width: auto;
		margin: 0;
		padding: 15px 4px;
		color: var(--color-on-primary);
		background: transparent;
		border: 0;
	}
	.hmenu-bar #menu .btn-navbar .fa { font-size: 20px; }
	.btn-navbar-label { display: inline; font-size: 18px; font-weight: 700; letter-spacing: .3px; }

	/* Выезжающая панель слева */
	#mySidenav.sidenav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1050;
		width: min(86vw, 340px);
		height: 100%;
		background: var(--color-surface);
		transform: translateX(-100%);
		transition: transform .28s ease;
		overflow-y: auto;
		box-shadow: 0 0 40px rgba(var(--rgb-black), .25);
		text-align: left;
	}
	#mySidenav.sidenav.open { transform: translateX(0); }

	/* Затемнение фона */
	.menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1040;
		background: rgba(var(--rgb-black), .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease;
	}
	body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
	body.menu-open { overflow: hidden; }

	/* Шапка панели */
	#mySidenav .close-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 16px 18px;
		background: var(--color-primary);
	}
	#mySidenav .close-nav .categories { color: #fff; font-size: 17px; font-weight: 700; }
	#mySidenav .close-nav .closebtn { color: #fff; font-size: 20px; }

	/* Список категорий */
	#mySidenav .navbar-collapse {
		display: block !important;
		max-height: none;
		padding: 0;
		border: 0;
		box-shadow: none;
	}
	#mySidenav .nav { display: block; margin: 0; }
	#mySidenav .nav > li { float: none; border-bottom: 1px solid var(--color-border); }
	#mySidenav .nav > li > a {
		display: block;
		padding: 15px !important;
		color: var(--color-text) !important;
		font-weight: 500;
		text-align: left;
		background: transparent !important;
	}
	#mySidenav .nav > li > a:hover { color: var(--color-primary) !important; }
	#mySidenav .nav .enangle { float: right; }
	#mySidenav .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin: 0;
		padding: 4px 14px 10px 30px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	#mySidenav .dropdown-menu .submenu-title { color: var(--color-text); }
	#mySidenav .dropdown-menu a:hover { color: var(--color-primary); }

	/* Контакты внутри панели */
	.sidenav-contacts {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 18px;
		border-top: 1px solid var(--color-border);
	}
	.sidenav-contacts a {
		display: flex;
		align-items: center;
		gap: 12px;
		color: var(--color-text);
		font-weight: 500;
		text-decoration: none;
	}
	.sidenav-contacts a:hover { color: var(--color-primary); }
	.sidenav-contacts .sc-ic {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(var(--rgb-primary), .08);
		color: var(--color-primary);
	}
	.sidenav-contacts .sc-ic svg { fill: var(--color-primary); }
	.sidenav-contacts .sc-ic .fa, .sidenav-contacts .sc-ic .fab { font-size: 18px; }
}

/* --- Телефон (≤767px) --------------------------------------------------------
   На узком экране в первом ряду помещается только номер: кружок-иконка съедает
   ~50px и номер уходил в две строки. Сам номер важнее иконки — её прячем. */
@media (max-width: 767px) {
	/* .row.hbottom, а не .hbottom: инлайновый <style> в header.twig подключается
	   после этого файла и при равной специфичности перебивал min-height. */
	.row.hbottom { min-height: 62px; }
	.head-contacts .hc-ico { display: none; }
	/* Номер отцентрован по окну, поэтому просвет до лого нельзя добрать
	   отступом — только шириной самого лого. 30px вместо 34px дают 23px
	   воздуха слева вместо 11px, лого при этом остаётся читаемым. */
	#logo img {
		max-height: 30px;
		width: auto;
		position: relative;
		top: -3px;   /* в картинке лого сверху есть воздух: без сдвига его базовая
		                линия уходит на 3–4px ниже базовой линии номера */
	}
	.head-contacts .hc-main {
		position: relative;
		top: 2px;
		font-size: 14px;
	}
	.hmenu-bar .header-search-mobile { max-width: none; }
}
/* Совсем узкие экраны (≤359px): номер между лого и иконками уже не помещается
   и налезал на корзину — показываем только кружок-иконку, ссылка tel: та же. */
@media (max-width: 359px) {
	.head-contacts .hc-ico { display: inline-flex; }
	.head-contacts .hc-main { display: none; }
}

/* --- Поиск на телефонах: кнопка-иконка вместо кнопки-надписи ----------------
   На 394px кнопка «Поиск» занимала 65px, а лупа в инпуте ещё 38px — на текст
   оставалось 137px из 240. Меняем подпись на лупу и убираем иконку из инпута
   (иначе две лупы подряд): поле ввода вырастает до 196px. */
.hsi-btn-ico { display: none; fill: currentColor; }
@media (max-width: 479px) {
	.hmenu-bar .header-search-mobile .hsi-icon { display: none; }
	.hmenu-bar .header-search-mobile .hsi-input { padding-left: 14px; }
	.hmenu-bar .header-search-mobile .hsi-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		padding: 0;
	}
	.hmenu-bar .header-search-mobile .hsi-btn-ico { display: block; }
	.hmenu-bar .header-search-mobile .hsi-btn-text { display: none; }
}

/*Options*/
.checkbox.fake-checkbox, .radio.fake-radio {
    display: inline-block;
    position: relative;
    margin: 0;
    vertical-align: middle;
    transition: all .2s ease-in-out;
    margin-bottom: 4px;
}

/* Инпут прячем визуально, но НЕ через display:none:
   при display:none часть мобильных браузеров (iOS Safari, Samsung Internet)
   не переключает радио по тапу на <label for>, и опция срабатывает лишь со второго раза. */
/* Селекторы намеренно с двумя классами (.radio.fake-radio): ниже в файле есть
   input[type="radio"]:not(.ocf-value-input) и .radio input[type="radio"] с
   position:relative и размером 20px — при равной специфичности они побеждали
   и возвращали инпут в поток, раздвигая опции. */
.checkbox.fake-checkbox input[type=checkbox],
.radio.fake-radio input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.fake-checkbox label, .fake-radio label {
    min-width: 32px;
    height: 32px;
    padding: 10px;
    margin: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease;
}

.fake-radio-off label.btn { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.fake-radio-off label.btn:hover { background: inherit; border-color: inherit; }
.cartb-off { opacity: .4; cursor: not-allowed; }

/* только для мыши: на тач-экранах :hover «залипает» после тапа
   и невыбранная опция остаётся подсвеченной наравне с выбранной */
@media (hover: hover) {
    .fake-checkbox label:hover, .fake-radio label:hover {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
    }
}

.fake-checkbox input:checked+label, .fake-radio input:checked+label {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/*ocFilter*/
.ocf-content {
    border: 1px solid var(--color-border);
    background-color: rgba(var(--rgb-white), 0.5);
    border-radius: var(--border-radius);
}

.ocf-header {
    font-size: inherit !important;
    line-height: inherit !important;
}

.ocf-filter {
    padding: 12px 12px;
    border-bottom: 1px solid var(--color-border);
}

.ocf-selected-card {
    background-color: var(--color-border) !important;
    box-shadow: none !important;
    padding: 10px !important;
    margin: 0 10px 10px !important;
    border-radius: 5px !important;
}

.ocf-selected-filter {
    background-color: var(--color-surface) !important;
}

.ocf-value-count {
    background-color: var(--color-surface-muted) !important;
    color: var(--color-text-muted) !important;
}

.ocf-value-name {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;       /* запрет переноса */
    overflow: hidden;          /* скрываем лишнее */
    text-overflow: ellipsis;   /* обрезка */
    vertical-align: bottom;
}

.ocf-selected-discard:hover {
    border-color: var(--color-surface) !important;
}

.ocf-scroll-y {
    background-image: none !important;
    background: none !important;
}

.ocf-btn-link {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.ocf-footer {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
    margin: 5px 0 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    box-shadow: inset 0 -2px 0 rgba(var(--rgb-black), .08);
}

.ocf-footer .ocf-btn-link {
    color: var(--color-surface) !important;
}

.ocf-footer:after {
    box-shadow: none !important;
}

/* ============================================================
   Карточка товара в категории — под скриншот (2026)
   Скоуп #product-category, чтобы перебить базовые стили темы
   ============================================================ */

/* Сетка ровными карточками */
.cpagerow { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -5px; }
.cpagerow .product-layout { float: none; padding: 5px; }
/* Сколько карточек в ряд — раздел «Карточка товара: сетка» в конце файла */
.product-list { width: 100%; }

/* Карточка */
.product-thumb {
	position: relative;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
	/* Рамка и тень проявляются неспешно — .7s вместо стандартных .22s.
	   transform из перехода убран: карточка по ховеру не двигается. */
	transition: var(--transition-card);
}
/* Карточка должна читаться как карточка. Рамка --color-border по белому почти
   не видна, а тень 0 16px 34px/.05 слишком рассеяна — четыре товара в ряду
   сливались в одно поле. Усиливаем рамку и собираем тень.
   Блок при этом остаётся на месте: никаких сдвигов по ховеру. */
.product-thumb:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-card-hover);
}

/* Изображение */
.product-thumb .image {
	position: relative;
	padding: 0 0 2px;
	overflow: visible;
	opacity: 1;
}
.category-tab .product-thumb .image {
    padding: 12px 14px 2px;
}
.product-thumb .image > a { display: block; }
.product-thumb .image img.center-block { width: auto; max-width: 100%; margin: 0 auto; }
.product-thumb .second-img { display: none; }

/* Избранное / сравнение — под фото, справа от первой строки названия.
   Раньше кнопки лежали на фото в правом верхнем углу и проявлялись
   по ховеру, а на телефоне висели всегда и закрывали картинку.
   .image больше не обрезает содержимое (overflow: visible выше),
   поэтому блок висит сразу под фото. Место в первой строке названия
   держит .protitle a::before — раздел «Карточка товара: сетка»
   в конце файла. */
.pt-actions {
	position: absolute; top: calc(100% + 6px); right: 8px; z-index: 4;
	display: flex; gap: 2px;
}
.pt-act {
	width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--color-surface);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease;
}
.pt-act svg { width: 13px; height: 13px; fill: var(--color-text-muted); transition: fill .15s ease; }
.pt-act:hover { background: var(--color-primary-soft); }
.pt-act:hover svg { fill: var(--color-primary); }

/* Бейджи скидок поверх */
.product-thumb .sale,
.product-thumb .product-sticker { position: absolute; top: 12px; left: 12px; z-index: 4; margin: 0; }
.product-thumb .sale { background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }

/* Характеристики — выезжают снизу по наведению, поверх фото */
.pt-specs {
	order: 4;
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin-top: 10px;
	max-height: 82%;
	background: rgba(var(--rgb-white), .85);
	border-top: 1px solid var(--color-border);
	/*transform: translateY(101%);*/
	transition: transform .26s ease;
	overflow-y: auto;
	pointer-events: none;
}
/*.product-thumb:hover .pt-specs { transform: translateY(0); }*/
/* отображаются всегда */
.pt-specs {
    position: inherit;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.pt-specs-inner { padding: 0; }
/* Характеристики были 12px с интерлиньяжем 20px и пунктиром под каждой строкой:
   шесть-семь таких строк перевешивали название и цену — это самый «чернильный»
   блок карточки. Ничего не убираем, но сжимаем строки, снимаем пунктир и
   разводим подпись со значением по размеру и весу, а не по цвету линии.
   Одна линия сверху отделяет справку от названия и опций. */
.pt-spec {
	display: flex; justify-content: space-between; gap: 8px;
	padding: 0; border-bottom: 0;
	font-size: 12px; line-height: 17px; text-align: left;
}
.pt-spec-k { font-size: 11.5px; color: var(--color-text-muted); }
.pt-spec-v { color: var(--color-text); font-weight: 600; text-align: right; }

/* Контент карточки + порядок как на скрине (опции, рейтинг, имя, цена) */
.product-thumb .caption { position: relative; padding: 8px 10px 0; display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; }
.product-thumb .opbtn { display: contents; }
.poptions { order: 3; margin: 4px 0 2px; }
/* Рейтинг — бейджем в правом нижнем углу картинки.
   .caption спозиционирован, поэтому bottom:100% выводит бейдж ровно над ним,
   то есть в нижнюю часть блока с картинкой. */
.product-thumb .caption > .rating {
    position: absolute;
    right: 12px;
    /* top: auto обязателен: ниже в файле есть @media (max-width:991px){ .comments_note { top:2px } },
       и вместе с bottom он задавал абсолютному блоку высоту 8px — звёзды вылезали за плашку. */
    top: auto;
    bottom: calc(100% + 8px);
    z-index: 3;
    margin: 0;
    padding: 3px 8px;
    background: var(--color-badge-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
/* Звёзды по центру плашки: у .fa-stack line-height 10px и vertical-align middle,
   на инлайновой базовой линии они уезжали вниз на 3px. */
.product-thumb .caption > .rating,
.product-thumb .caption > .rating .avg-rate,
.product-thumb .caption > .rating .or-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.product-thumb .caption > .rating .fa-stack:last-child {
    margin-right: 0;
}
/* у товаров без отзывов это пять пустых звёзд — прячем бейдж целиком */
.product-thumb .caption > .rating:not(:has(.fa-star)) {
    display: none;
}
/* Описание — не больше двух строк, хвост скрыт */
.product-thumb .catlist-des {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	order: 2;
	height: auto;
	margin: 0 0 2px;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 18px;
	text-align: left;
}
/* Раскладка блока цены — ниже в файле, одним правилом (было два .price-row,
   и второе перебивало margin-top: auto восьмёркой). */
.price-row { order: 5; }

/* Рейтинг — тёмные звёзды + счётчик */
.or-rate { font-size: 7px; }
.or-rate .fa-stack { vertical-align: middle; margin-right: 3px; }
.or-rate .fa-star { color: var(--color-text); }
.or-rate .fa-star-o { color: var(--gray-200); }
.rev-count { font-size: 12px; color: var(--color-text-muted); margin-left: 8px; vertical-align: middle; }


/* Опции товара */
.poptions .control-label,
.poptions .form-group > label.control-label {
	display: none;
}

.poptions .form-group {
	margin: 0;
}

.poptions .poption-values {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
}

.poptions .option.radio {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.rless .poptions .option.radio {
    margin: 0 1px 7px;
}

.poptions .option.radio {
	position: relative;
}

.poptions .option.radio input[type="radio"],
.poptions .option.radio input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.poptions label.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;          /* .fake-radio label задаёт height:32px — снимаем */
	min-height: 26px;
	min-width: 26px;
	padding: 3px 5px;
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	white-space: nowrap;
	line-height: 1.2;
}

/* Выбранная опция: заливка чуть темнее невыбранной, без цветной рамки —
   акцент даёт фон и насыщенность текста, а не обводка. */
.poptions input:checked + label.btn {
	background: var(--gray-200);
	border-color: var(--color-border-strong);
	color: var(--color-text);
	font-weight: 700;
}

/* ============================================================
   Бейджи на изображении товара: наличие и акция.
   Базовые стили «нет в наличии» модуль отдаёт инлайновым <style> с !important,
   поэтому перебиваем более специфичным селектором.
   ============================================================ */
.product-thumb .image .saleslable,
.product-thumb .image .sale {
	position: absolute;
	top: 4px;
	left: 5px;
	right: auto;
	bottom: auto;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 4px 10px;
	font-family: inherit;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .4px;
	text-align: center !important;
	text-transform: uppercase;
	text-shadow: none;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	z-index: 4;
	animation: badge-in .4s ease .05s both;
}

/* Нет в наличии — нейтральный, картинка и так обесцвечена */
.product-thumb .image .saleslable {
	color: var(--color-badge-text) !important;
	background: var(--color-badge-bg);
	border: 1px solid var(--color-border);
}

/* Акция — единственный акцент на карточке */
.product-thumb .image .sale {
	color: var(--color-badge-sale-text);
	background: var(--color-badge-sale-bg);
	border: 0;
}

/* Товар может быть одновременно по акции и не в наличии — второй бейдж под первым */
.product-thumb .image .sale ~ .saleslable,
.product-thumb .image .saleslable ~ .sale {
	top: 42px;
}
/* Бейдж скидки от модуля акций (.dc-label-for-specials) лежит не в .image,
   а прямо в .product-layout, и держится не top/left, а отрицательным
   margin-bottom. Соседним селектором его не поймать, поэтому смотрим на
   карточку целиком: если процент есть, «нет в наличии» уходит под него.
   Иначе оба бейджа стояли ровно друг на друге. */
.product-layout:has(> .dc-label-for-specials) .product-thumb .image .saleslable {
	top: 41px;
}

/* Модуль «нет в наличии» прячет бейдж при наведении на карточку
   (.product-thumb:hover .saleslable {display:none}). Это осталось от старого
   поведения с зумом картинки, который мы убрали: теперь бейдж просто мигает
   и пропадает под курсором. Возвращаем. */
.product-thumb:hover .saleslable {
	display: block;
}

/* Дополнительные фото. Модуль вешает бейдж «нет в наличии» на КАЖДУЮ
   миниатюру галереи, а он фиксированной ширины (min-width:150px !important
   при миниатюре 102px) — плашка вылезала за края и закрывала фото целиком.
   На большой картинке бейдж уже есть, на миниатюрах он лишний. */
#gallery_01 .saleslable,
.gal-img .saleslable {
	display: none !important;
}

/* Тот же бейдж на самой карточке товара. Модуль отдаёт его инлайновым <style>
   с !important: полупрозрачная чёрная плашка ровно по центру картинки,
   Arial, скруглени 5px. Здесь картинка большая, и по центру плашка ложится
   прямо на товар — переносим вниз и приводим к виду бейджей в каталоге. */
#product-product .big-img .thumbnail > .saleslable {
	top: auto;
	bottom: 18px;
	left: 50%;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 9px 20px;
	transform: translateX(-50%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-badge-bg);
	box-shadow: 0 4px 16px rgba(var(--rgb-black), .12);
	color: var(--color-badge-text) !important;
	font-family: inherit;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .5px;
	text-align: center !important;
	text-transform: uppercase;
	text-shadow: none;
}
@media (max-width: 767px) {
	#product-product .big-img .thumbnail > .saleslable {
		bottom: 10px;
		padding: 7px 16px;
		font-size: 11px !important;
	}
}

@keyframes badge-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА
   ============================================================ */

/* ---- Карточки в модулях: одинаковая высота --------------------------------
   Модули на главной — owl-карусели: элементы плавающие, общего ряда нет,
   поэтому карточки были разной высоты (разброс 47px в «Рекомендуем», 67px в
   «Новинках») и цена с кнопкой скакали по вертикали. В категории эту работу
   делает ряд сетки, здесь её нужно сделать руками.
   Лента становится флексом — карточки тянутся до высоты самой высокой, а
   margin-top:auto у .price-row прижимает цену к низу, как в категории.
   display с !important: owl ставит .owl-wrapper display:block инлайном.
   На работу карусели не влияет — она двигается transform'ом, а ширины у
   .owl-item заданы инлайном и сохраняются через flex: 0 0 auto.
   :has() — чтобы не трогать баннерную карусель, там товаров нет. */
.owl-carousel:has(.product-layout) .owl-wrapper {
	display: flex !important;
	align-items: stretch;
}
.owl-carousel:has(.product-layout) .owl-item {
	float: none;
	flex: 0 0 auto;
	display: flex;
}
.owl-carousel:has(.product-layout) .owl-item > .product-layout {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.owl-carousel:has(.product-layout) .owl-item .product-thumb { flex: 1 1 auto; }

/* ---- Плитки категорий -----------------------------------------------------
   Картинки приходят 200×200, но объекты внутри них разного масштаба, а фоны
   разные. Фиксируем квадратную область с одинаковым полем и object-fit:
   contain — тогда любая замена картинки заказчиком встанет ровно. */
.cate-pro .product-thumb { overflow: hidden; }
.cate-pro .product-thumb .image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 20px 4px;
}
.cate-pro .product-thumb .image > a {
	display: block;
	width: 100%;
}
.cate-pro .product-thumb .image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.cate-pro .product-thumb .item {
	padding: 0 12px 16px;
	margin: 0;
}
.cate-pro .product-thumb .item h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.cate-pro .product-thumb .item h4 a { color: var(--color-text); transition: color .18s ease; }
.cate-pro .product-thumb:hover .item h4 a { color: var(--color-primary); }
@media (max-width: 767px) {
	.cate-pro .product-thumb .image { padding: 12px 12px 2px; }
	.cate-pro .product-thumb .item { padding: 0 8px 12px; }
	.cate-pro .product-thumb .item h4 { font-size: 13px; }
}

/* ---- Ссылка «смотреть все» в заголовке блока ------------------------------
   Заголовок блока — флекс-строка: [зелёная черта] Название [линейка]. Ссылку
   кладём последним элементом и раскладываем order'ом, чтобы линейка осталась
   между названием и ссылкой, а не улетела в конец. */
.next-prevb .heading::after { order: 1; }
.sec-more {
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: 6px;
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: color .18s ease;
}
.sec-more:hover,
.sec-more:focus { color: var(--color-primary); text-decoration: none; }
.sec-more .fa { font-size: 11px; transition: transform .18s ease; }
.sec-more:hover .fa { transform: translateX(3px); }
@media (max-width: 767px) {
	.sec-more { font-size: 13px; gap: 5px; }
	.sec-more .sec-more-long { display: none; }   /* на телефоне остаётся «Все» */
}

/* ---- Блок УТП (модуль HTML) -----------------------------------------------
   Четыре тезиса в один ряд, на планшете 2×2, на телефоне в столбик. */
/* Обёртка повторяет геометрию .container. Модуль HTML стоит в позиции во всю
   ширину, и его собственный отступ по краям разный на разных разрешениях: на
   телефоне его нет вовсе (полоса упиралась в края экрана), на десктопе 15px.
   Обёртка приводит блок к линии заголовков и карточек на всех ширинах.
   Если перенесёте модуль в позицию внутри .container — обёртку из разметки
   можно убрать, иначе добавится лишние 15px по краям. */
.utp-wrap {
	max-width: 1580px;
	margin: 0 auto;
	padding: 0 15px;
}
.utp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 40px 0 8px;
	/* Тёплая подложка вместо белого: полоса отделяется от белых товарных
	   блоков вокруг и читается как единый блок, а не как четыре ячейки. */
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
}
.utp-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 22px 20px;
}
/* Разделители — тонкими линиями внутри подложки, а не зазором в сетке:
   зазор давал ощущение таблицы. */
.utp-item + .utp-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: var(--color-border-strong);
	opacity: .55;
}
/* Заливка кружка, а не бледная подложка: четыре зелёных круга в ряд — то, что
   ловит взгляд, ради чего блок и ставится. */
.utp-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	box-shadow: 0 6px 16px rgba(var(--rgb-primary), .28);
	transition: background .2s ease;
}
.utp-ico .fa { font-size: 21px; }
.utp-item:hover .utp-ico { background: var(--color-primary-dark); }
.utp-text { min-width: 0; }
.utp-title {
	display: block;
	margin-bottom: 3px;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
.utp-sub {
	display: block;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.45;
}
@media (max-width: 1199px) {
	.utp-item { padding: 20px 16px; gap: 13px; }
	.utp-ico { width: 46px; height: 46px; }
	.utp-ico .fa { font-size: 19px; }
	.utp-title { font-size: 15px; }
}
@media (max-width: 991px) {
	.utp { grid-template-columns: repeat(2, 1fr); }
	/* в двух колонках вертикальная линия нужна только у правых ячеек */
	.utp-item:nth-child(odd)::before { display: none; }
	.utp-item:nth-child(n+3)::after {
		content: "";
		position: absolute;
		left: 16px;
		right: 16px;
		top: 0;
		height: 1px;
		background: var(--color-border-strong);
		opacity: .55;
	}
}
@media (max-width: 575px) {
	.utp { grid-template-columns: 1fr; margin: 28px 0 4px; border-radius: 14px; }
	.utp-item { padding: 16px 15px; gap: 12px; }
	.utp-item::before { display: none; }
	.utp-item + .utp-item::after {
		content: "";
		position: absolute;
		left: 15px;
		right: 15px;
		top: 0;
		height: 1px;
		background: var(--color-border-strong);
		opacity: .55;
	}
	.utp-ico { width: 42px; height: 42px; }
	.utp-ico .fa { font-size: 18px; }
	.utp-title { font-size: 15px; }
	.utp-sub { font-size: 12.5px; }
}

/* ---- Текстовый блок внизу главной (модуль HTML) ---------------------------
   Первый вариант был колонкой по центру с ограничением ширины: строка
   читалась, но блок висел посреди пустого поля и выпадал из сетки страницы.
   Здесь другая схема — редакторская: заголовок слева, лид справа от него,
   ниже три карточки во всю ширину. Меру строки держит не общее ограничение,
   а ширина каждой колонки, поэтому блок занимает сетку честно. */
.home-about-wrap {
	max-width: 1580px;
	margin: 0 auto;
	padding: 0 15px;
}
.home-about {
	padding: 46px 0 12px;
	border-top: 1px solid var(--color-border);
}
.home-about-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px 48px;
	margin-bottom: 32px;
}
.home-about-head h1,
.home-about-head h2 {
	flex: 0 1 auto;
	max-width: 560px;
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-text);
}
.home-about-head h1::after,
.home-about-head h2::after { display: none; }   /* центральное подчёркивание темы */
.home-about-head p {
	flex: 0 1 640px;      /* ~80 знаков в строке — верхняя граница комфортного */
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-text-muted);
}
.home-about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.ha-card {
	padding: 26px 26px 28px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	transition: border-color .4s ease, box-shadow .4s ease;
}
.ha-card:hover {
	border-color: rgba(var(--rgb-primary), .45);
	box-shadow: 0 10px 26px rgba(var(--rgb-black), .06);
}
.ha-card h3 {
	position: relative;
	margin: 0 0 12px;
	padding-left: 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
}
.ha-card h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: 2px;
	background: var(--color-primary);
}
.ha-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--color-text-muted);
}
@media (max-width: 991px) {
	.home-about { padding: 36px 0 10px; }
	.home-about-head { gap: 14px 30px; margin-bottom: 24px; }
	.home-about-head h1,
	.home-about-head h2 { flex: 1 1 100%; max-width: none; font-size: 26px; }
	.home-about-head p { flex: 1 1 100%; font-size: 15px; }
	.home-about-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.ha-card { padding: 20px; }
}
@media (max-width: 575px) {
	.home-about { padding: 28px 0 6px; }
	.home-about-head h1,
	.home-about-head h2 { font-size: 21px; }
	.home-about-head p { font-size: 14.5px; }
	.home-about-grid { grid-template-columns: 1fr; gap: 12px; }
	.ha-card { padding: 18px; }
	.ha-card h3 { font-size: 16px; }
	.ha-card p { font-size: 14px; }
}

/* ============================================================
   КАРТОЧКА ТОВАРА
   ============================================================ */

/* ---- Рейтинг под заголовком -----------------------------------------------
   Отзывы у товара есть, в каталоге звёзды показываются — а на карточке их не
   было. Это то, что смотрят раньше цены. */
.pro-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -2px 0 14px;
}
.pro-rating .or-rate { display: inline-flex; align-items: center; }
.pro-rating .fa-star { color: var(--color-accent); }
.pro-rating .fa-star-o { color: var(--color-border-strong); }
/* контур поверх заполненной звезды — золотой, серый только у пустой */
.pro-rating .fa-star + .fa-star-o { color: var(--color-accent); }
.pro-rating-count {
	color: var(--color-text-muted);
	font-size: 14px;
	border-bottom: 1px dashed var(--color-border-strong);
	transition: color .18s ease, border-color .18s ease;
}
.pro-rating-count:hover,
.pro-rating-count:focus {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	text-decoration: none;
}

/* ---- Процент скидки рядом со старой ценой ---------------------------------
   Бейдж вешает скрипт price-saving из custom.js: OpenCart отдаёт цены уже
   отформатированными строками, процента среди переменных нет. */
.pro-price-save {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--color-promo);
	color: var(--color-text-inverse);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	vertical-align: middle;
}

/* ---- Условия покупки под кнопкой ------------------------------------------
   Под блоком покупки оставалось ~200px пустоты — ровно там, где принимают
   решение. Три строки, без рамок: это подсказка, а не отдельный блок. */
.pro-usp {
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--color-border);
}
.pro-usp li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	color: var(--color-text-muted);
	font-size: 13.5px;
	line-height: 1.45;
}
.pro-usp .fa {
	flex: 0 0 auto;
	width: 16px;
	margin-top: 2px;
	text-align: center;
	font-size: 14px;
	color: var(--color-primary);
}
@media (max-width: 767px) {
	.pro-usp { margin-top: 14px; padding-top: 12px; }
	.pro-usp li { font-size: 13px; }
}

/* ---- Описание -------------------------------------------------------------
   Текст шёл строками во всю ширину контейнера — 1550px, около 200 знаков при
   комфортных 65–75. Это единственный контент, ради которого листают вниз, и
   он был самым тяжёлым для чтения на странице.
   Плюс описание вставлено из документа: у каждого <span> свои inline-стили —
   чужая гарнитура, кегль в пунктах и фон от выделения. Их гасим, оставляя
   только начертание, иначе абзацы набраны не тем шрифтом, чем весь сайт. */
/* Селекторы со скоупом #product-product: выше в файле лежит
   «#product-product #tab-description p { margin: 0 0 14px }» — без второго id
   правило подзаголовков проигрывало ему по специфичности. */
/* Ширину строки ограничиваем у содержимого, а не у самой вкладки:
   иначе белая плашка обрывалась на 900px и справа оставалась пустая полоса */
#product-product #tab-description > * { max-width: 900px; }
/* Текст описания обёрнут в шаблоне в <div class="col-sm-8"> — это float.
   Вкладка его не охватывала: при коротком описании плавающий блок вылезал
   ниже вкладки, и заголовок «Рекомендуемые товары» уезжал вправо.
   Снимаем float, а вкладку делаем контейнером для плавающих блоков
   на случай картинок с float внутри текста. */
#product-product #tab-description.active { display: flow-root; }   /* только .active — иначе вкладка не скрывалась бы при переходе на «Отзывы» */
#product-product #tab-description > [class*="col-"] { float: none; width: auto; padding: 0; }
#product-product #tab-description [style*="justify"] { text-align: left !important; }
#product-product #tab-description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-text);
}
/* !important здесь вынужденно: описание вставлено из документа, и у каждого
   <p> свои inline-стили — margin-top: 0pt, margin-bottom: 0pt, line-height.
   Инлайн бьёт любой селектор, поэтому вертикальный ритм задать иначе нельзя.
   По-хорошему описание стоит перевставить в админке как обычный текст. */
#product-product #tab-description p {
	margin: 0 0 12px !important;
	line-height: 1.7 !important;
}
#product-product #tab-description br { display: none; }   /* пустые <br> удваивали интерлиньяж */
#product-product #tab-description span[style] {
	font-family: inherit !important;
	font-size: inherit !important;
	background-color: transparent !important;
	color: inherit !important;
}
/* Абзац, целиком состоящий из полужирного, — это подзаголовок раздела
   («Дегустационные заметки:», «Рекомендации по завариванию:»). */
#product-product #tab-description p:has(> span[style*="700"]:only-child),
#product-product #tab-description p:has(> b:only-child),
#product-product #tab-description p:has(> strong:only-child) {
	margin: 26px 0 10px !important;
	font-size: 17px;
	line-height: 1.35 !important;
}
#product-product #tab-description p:first-child { margin-bottom: 18px; }
@media (max-width: 767px) {
	#product-product #tab-description { font-size: 14.5px; }
	#product-product #tab-description p:has(> span[style*="700"]:only-child) { font-size: 16px; margin-top: 20px; }
}

/* ---- Тёмные полосы футера — до краёв экрана -------------------------------
   Футер лежит внутри div.container-fluid с padding: 0 15px, поэтому тёмная
   подложка обрывалась за 15px до краёв окна и по бокам оставались белые
   полосы. Дорисовываем фон тенью с большим разбросом и обрезаем её по
   вертикали: ширина элемента не меняется, горизонтальной прокрутки не
   появляется, и способ не зависит от того, какой отступ у родителя. */
footer .middle-footer,
footer .copy {
	box-shadow: 0 0 0 100vmax var(--color-surface-inverse);
	clip-path: inset(0 -100vmax);
}

/* ---- Заглушка вместо отсутствующей картинки -------------------------------
   Ставится скриптом (image-fallback в custom.js) на место <img>, который не
   загрузился или пришёл с пустым src. Пропорцию скрипт берёт из атрибутов
   width/height картинки и пишет инлайном; квадрат ниже — запасной вариант. */
.img-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--color-surface-alt);
	border-radius: var(--border-radius);
	color: rgba(var(--rgb-primary), .38);
	font-size: 64px;
	line-height: 1;
}
/* В теме есть глобальное .fa { font-size: 13px } — оно перебивало размер,
   унаследованный от коробки, и лист оставался крошечным. */
.img-fallback .fa { font-size: inherit; line-height: 1; }
/* В мелких местах — миниатюры в корзине и в списочном виде — лист поменьше */
.cart-item .img-fallback,
.hcart-drop .img-fallback,
.product-list .img-fallback { font-size: 24px; }

/* ---- Скидка от модуля «Label for specials» (главная, блоки акций) ----------
   Модуль отдаёт <div class="dc-label-for-specials">-30%</div> ПЕРЕД карточкой,
   а всё оформление — инлайновым <style> из настроек в админке. Если настройки
   пустые (как сейчас), метка остаётся неоформленной: static, во всю ширину
   колонки, и занимает отдельную строку над карточкой, сдвигая её вниз.
   Приводим её к виду остальных бейджей сайта.

   Позиционируем не через absolute, а отрицательным margin в обычном потоке:
   метка — сосед .product-thumb, а не его потомок, поэтому absolute считался бы
   от .product-layout вместе с его боковыми padding (здесь 5px, в других
   раскладках 15px) и бейдж уезжал бы за край карточки. В потоке margin-left
   отсчитывается от контентного края — то есть ровно от края карточки. */
.product-layout > .dc-label-for-specials {
	position: relative;
	z-index: 4;
	width: fit-content;
	height: 21px;
	/* нижний отрицательный = высота + верхний: карточка возвращается на место,
	   а метка ложится поверх картинки */
	margin: 10px 0 -31px 10px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	background: var(--color-badge-sale-bg);
	color: var(--color-badge-sale-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 21px;
	letter-spacing: .4px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	animation: badge-in .4s ease .05s both;
}

/* На мобильном ширины хватает — кнопки опций крупнее и с большей зоной нажатия */
@media (max-width: 767px) {
	.poptions label.btn {
		min-height: 32px;
		min-width: 32px;
		padding: 5px 8px;
		font-size: 14px;
	}
	.poptions .poption-values {
		gap: 5px;
	}
}

/* ============================================================
   Модули на главной (Рекомендуем / Новинки / Акции)
   — те же отступы, что в сетке категории; характеристики не показываем
   ============================================================ */
.home-page .owl-carousel .product-layout {
	padding: 0 5px;
}
/* Блок «Рекомендуемые товары» на карточке — та же карусель, что на главной,
   и характеристики в ней тоже лишние: с ними карточка 575px против 469 у
   остальных каруселей, блок перевешивает саму карточку товара. */
/*.relpro .pt-specs { display: none; }*/
.relpro .product-layout { padding: 0 5px; }
.relpro .poptions .option.radio { margin: 0; }
/* .rless задаёт опциям margin: 0 1px 7px — сбрасываем, чтобы ряд был как в категории */
.home-page .poptions .option.radio {
	margin: 0;
}

@media (hover: hover) {
	.poptions label.btn:hover {
		border-color: var(--color-border-strong);
		background: var(--color-surface-muted);
	}
}

/* Цена + кнопка корзины справа */
/* margin-top: auto прижимает блок цены к низу карточки — так нижняя линия
   цены и кнопки совпадает у всех товаров ряда независимо от того, сколько
   у товара строк характеристик и есть ли у него опции.
   Раньше auto стояло в отдельном правиле выше по файлу, и эта же строка с
   margin-top: 8px его перебивала. */
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 12px 0 4px; }
.price-row .price { margin: 0; padding: 0; font-size: 22px; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.price-row .price-new { color: var(--color-primary); }
.price-row .price-old { color: var(--color-text-muted); text-decoration: line-through; font-size: 14px; margin-left: 2px; }
.price-row .cartb {
	flex: 0 0 auto;
	width: 64px; height: 40px; padding: 0;
	border: 0; border-radius: var(--border-radius);
	background: var(--color-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px rgba(var(--rgb-primary), .1);
	opacity: 1;
	transition: background .18s ease, box-shadow .18s ease;
}
/* Ховер тем же зелёным, только темнее: чёрная кнопка выбивалась из карточки. */
.price-row .cartb:hover {
	background: var(--color-primary-dark);
	box-shadow: 0 8px 20px rgba(var(--rgb-primary), .28);
}
.price-row .cartb svg { width: 22px; height: 22px; fill: #fff; }

/* ============================================================
   Карточка ТОВАРА — блок покупки (цена/опции/кол-во/кнопки)
   Скоуп #product-product, язык — как в каталоге
   ============================================================ */

#product-product .pro-title { margin: 4px 0 16px; color: var(--color-text); }

/* Мета: артикул / наличие / бренд */
#product-product .pro-meta { margin: 0 0 16px; }
#product-product .pro-meta li { padding: 4px 0; color: var(--color-text); }
#product-product .pro-meta .text-decor { color: var(--color-text-muted); margin-right: 6px; }
#product-product .pro-meta .textdeb { color: var(--color-primary); }
#product-product .pro-stock {
	display: inline-block; padding: 2px 10px; border-radius: 999px;
	background: rgba(var(--rgb-primary), .1); color: var(--color-primary);
	font-size: 13px;
}
#product-product .pro-outstock {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--rgb-primary), .1);
    color: var(--color-warning);
    font-size: 13px;
}

/* Цена */
#product-product .pro-price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
#product-product .pro-price { font-size: 34px; font-weight: 800; color: var(--color-text); line-height: 1; }
#product-product .pro-price--new { color: var(--color-primary); }
#product-product .pro-price-old { font-size: 20px; color: var(--color-text-muted); text-decoration: line-through; }
#product-product .pro-points { flex: 1 1 100%; color: var(--color-text-muted); font-size: 13px; }
#product-product .pro-discounts { flex: 1 1 100%; margin: 6px 0 0; color: var(--color-text-muted); font-size: 13px; }

/* Заголовок секции опций */
#product-product #product > h3 { font-size: 16px; font-weight: 700; margin: 6px 0 12px; color: var(--color-text); }
#product-product #product .producthr { border-top: 1px solid var(--color-border); margin: 16px 0; }
#product-product #product .form-group { margin-bottom: 16px; }
#product-product #product .control-label,
#product-product #product .text-decorop { display: block; margin-bottom: 8px; color: var(--color-text); }

/* select-опции — в стиле тулбара */
#product-product #product select.form-control,
#product-product #product .input-group .form-control {
	height: 44px; padding: 0 36px 0 14px;
	border: 1px solid var(--color-border); border-radius: var(--border-radius, 10px);
	background-color: var(--color-surface); color: var(--color-text); font-weight: 500;
	box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6657' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
#product-product #product select.form-control:focus,
#product-product #product .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1); outline: 0; }

/* radio-опции -> пилюли-свотчи (как в каталоге) */
#product-product #product .custom-radio { display: flex; flex-wrap: wrap; gap: 8px; }
#product-product #product .custom-radio .radio.fake-radio { position: relative; margin: 0; padding: 0; }
#product-product #product .custom-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#product-product #product .custom-radio label.btn {
	margin: 0; padding: 9px 10px;
	font-size: 13px;
	border: 1px solid var(--color-border); border-radius: var(--border-radius, 10px);
	background: var(--color-surface); color: var(--color-text);
	cursor: pointer;
}
#product-product #product .custom-radio label.btn:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
#product-product #product .custom-radio input:checked ~ label.btn {
	border-color: var(--color-primary); background: var(--color-primary); color: #fff;
}
#product-product #product .custom-radio img.img-thumbnail { display: block; margin: 0 auto 6px; max-width: 70px; border-radius: 8px; }

/* checkbox-опции */
#product-product #product .checkbox label { font-weight: 500; color: var(--color-text); }

/* Количество */
#product-product .pro-buybar { margin-bottom: 0; }
#product-product .qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* второй id обязателен: правило «#product-product #product .control-label»
   с margin-bottom: 8px сильнее — подпись «Кол-во» висела на 4px выше счётчика */
#product-product #product .qty-row .control-label { margin: 0; }
/* Колонка с характеристиками и кнопкой лежит в .pro-content без .row —
   её padding 15px сдвигал всё вправо от заголовка H1 и звёзд */
#product-product .pro-content > .col-lg-7 { padding-left: 0; }
/* Счётчик количества — тот же рисунок, что в корзине на оформлении
   заказа: две отдельные кнопки-квадраты и поле между ними, а не
   слитная «пилюля» в общей рамке. */
#product-product .qty-plus-minus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: auto;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
#product-product .qty-plus-minus .btn-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--border-radius);
	background: var(--color-surface-sunken);
	color: var(--color-text);
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
#product-product .qty-plus-minus .btn-number:hover:not([disabled]) {
	background: var(--color-primary);
	color: var(--color-text-inverse);
}
#product-product .qty-plus-minus .btn-number[disabled] { opacity: .4; cursor: not-allowed; }
#product-product .qty-plus-minus .input-number {
	width: 58px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
}
#product-product .qty-plus-minus .input-number:focus { outline: 0; box-shadow: none; }

/* Кнопки: корзина — главная, остальное — иконки-кружки */
#product-product .pro-actions { display: flex; align-items: center; gap: 10px; }
#product-product #button-cart.add-to-cart {
	flex: 1 1 auto; min-width: 200px; height: 52px; padding: 0 26px;
	border: 0; border-radius: var(--border-radius, 12px);
	background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 700;
	box-shadow: 0 8px 20px rgba(var(--rgb-primary), .1);

}
#product-product #button-cart.add-to-cart:hover { background: var(--color-primary-dark); }
#product-product .btn.add-to-cart.pcrt.btn-primary.cartb-off {
    flex: 1 1 auto; min-width: 200px; height: 52px; padding: 0 26px;
    border: 0; border-radius: var(--border-radius, 12px);

}
#product-product .pro-ico {
	width: 52px; height: 52px; padding: 0; flex: 0 0 auto;
	border: 1px solid var(--color-border); border-radius: var(--border-radius, 12px);
	background: var(--color-surface); color: var(--color-text-muted);
	display: inline-flex; align-items: center; justify-content: center;
}
#product-product .pro-ico svg { fill: var(--color-text-muted); }
#product-product .pro-ico .fa { font-size: 18px; }
#product-product .pro-ico:hover { border-color: var(--color-primary); color: var(--color-surface); background: var(--color-primary); }
#product-product .pro-ico:hover svg { fill: #ffffff; }

/* Инфо о минимальном заказе */
#product-product .palert { margin-top: 14px; border: 0; border-radius: var(--border-radius, 10px); background: rgba(var(--rgb-primary), .08); color: var(--color-text); }


/* ============================================================
   Характеристики товара — в стиле категории (key-value)
   ============================================================ */
#product-product .pro-specs { margin-top: 8px; }
#product-product .pro-specs-h { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: var(--color-text); }
#product-product .pro-specs-group { font-weight: 700; color: var(--color-text); margin: 12px 0 4px; }
#product-product .pt-spec {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 12px;
    text-align: left;
}
#product-product .pt-spec:last-child { border-bottom: 0; }
#product-product .pt-spec-k { color: var(--color-text-muted); }
#product-product .pt-spec-v { color: var(--color-text); text-align: right; }
#product-product .pt-spec-v a{ color: var(--color-primary); }

/* ============================================================
   Карточка ТОВАРА — табы (описание / отзывы)
   ============================================================ */
#product-product .product-tab { margin-top: 30px; }

/* Полоса табов */
#product-product .product-tab .nav-tabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin: 0; border-bottom: 1px solid var(--color-border);
}
#product-product .product-tab .nav-tabs > li { float: none; margin: 0; }
#product-product .product-tab .nav-tabs > li > a {
	margin: 0; padding: 12px 20px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0;
	background: transparent; color: var(--color-text-muted);
	font-weight: 700; font-size: 16px;
}
#product-product .product-tab .nav-tabs > li > a span{
	background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    border-radius: var(--border-radius);
}
#product-product .product-tab .nav-tabs > li > a:hover {
	background: transparent; color: var(--color-primary);
	border-bottom-color: rgba(var(--rgb-primary), .35);
}
#product-product .product-tab .nav-tabs > li.active > a,
#product-product .product-tab .nav-tabs > li.active > a:hover,
#product-product .product-tab .nav-tabs > li.active > a:focus {
	background: transparent; color: var(--color-text);
	border: 0; border-bottom: 2px solid var(--color-primary);
}

/* Контент-карточка */
#product-product .product-tab .tab-content {
	
}

/* Описание — типографика */
#product-product .tab-pane { padding: 18px; background: var(--color-surface); color: var(--color-text); font-size: 15px; line-height: 1.75; border-radius: 0 0 10px 10px; }
#product-product #tab-description p { margin: 0 0 14px; }
#product-product #tab-description h1,
#product-product #tab-description h2,
#product-product #tab-description h3,
#product-product #tab-description h4 { color: var(--color-text); font-weight: 700; margin: 22px 0 10px; }
#product-product #tab-description ul,
#product-product #tab-description ol { margin: 0 0 14px; padding-left: 22px; }
#product-product #tab-description img { max-width: 100%; height: auto; border-radius: 10px; }
#product-product #tab-description a { color: var(--color-primary); }

/* ===== Форма отзыва ===== */
#product-product #tab-review .co-heading { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--color-text); }
#product-product #form-review .form-group { margin-bottom: 16px; }
#product-product #form-review .control-label { display: block; margin-bottom: 8px; color: var(--color-text); }
#product-product #form-review .form-control {
	min-height: 44px; padding: 10px 14px;
	border: 1px solid var(--color-border); border-radius: var(--border-radius, 10px);
	box-shadow: none; color: var(--color-text);
}
#product-product #form-review .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1); outline: 0; }
#product-product #form-review textarea.form-control { min-height: 120px; }
#product-product #button-review {
	height: 48px; padding: 0 28px; border: 0; border-radius: var(--border-radius, 12px);
	background: var(--color-primary); color: #fff; font-weight: 700;
}
#product-product #button-review:hover { background: var(--color-surface-inverse); color: #fff; }

/* Звёзды-выбор рейтинга (DOM 5..1 + row-reverse = визуально 1..5) */
#product-product .form-rating-container {
	display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; float: left;
}
#product-product .form-rating-container .pull-right { float: none !important; }
#product-product .form-rating-container input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
#product-product .form-rating-container label.fa-stack { margin: 0; font-size: 16px; cursor: pointer; }
#product-product .form-rating-container label .fa-star { color: var(--color-accent); opacity: 0; }
#product-product .form-rating-container label .fa-star-o { color: var(--gray-200); }
#product-product .form-rating-container input:checked ~ label .fa-star,
#product-product .form-rating-container label:hover ~ label .fa-star,
#product-product .form-rating-container label:hover .fa-star { opacity: 1; }

/* ===== Загруженные отзывы (review.twig / .custreview) ===== */
#product-product #review { margin-bottom: 24px; }
#product-product #review .custreview { padding: 18px 0; }
#product-product #review .custreview:first-child { padding-top: 0; }
#product-product #review .custreview .fa-star { color: var(--color-accent); }
#product-product #review .custreview .fa-star-o { color: var(--gray-200); }
#product-product #review .crspc { margin: 6px 0 8px; color: var(--color-text-muted); font-size: 16px; }
#product-product #review .crspc strong { color: var(--color-text); }
#product-product #review .crspc .rsep { margin: 0 8px; color: var(--color-border); }
#product-product #review .custreview p { margin: 0; color: var(--color-text); line-height: 1.7; }

/* Звёзды в списке отзывов — уменьшаем 2x-стек */
#product-product #review .custreview > div:first-child { font-size: 9px; line-height: 1; }
#product-product #review .custreview .fa-stack { width: 1.6em; margin-right: 1px; }

/* Ответ магазина на отзыв */
#product-product #review .answer_admin {
	margin: 12px 0 4px;
	padding: 14px 16px;
	background: rgba(var(--rgb-primary), .06);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 10px 10px 0;
}
#product-product #review .answer_admin h5 {
	margin: 0 0 6px;
	font-size: 14px; font-weight: 700;
	color: var(--color-primary);
}
#product-product #review .answer_admin > div { color: var(--color-text); line-height: 1.7; }


/* ============================================================
   Футер (чайная тема) + мобильный аккордеон
   ============================================================ */
footer .middle-footer {
	background: var(--color-surface-inverse);
	color: var(--color-text-inverse-muted);
	border-top: none;
	padding: 0;
}
footer .middle-footer .fborder { border: 0; }
footer .middle-footer .footer-about { color: var(--color-text-inverse-muted); }

/* Заголовки колонок — та же акцентная черта слева, что у секций на главной */
footer .middle-footer h5 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	color: var(--color-text-inverse);
}
footer .middle-footer h5::before {
	content: ""; display: block;
	flex: 0 0 auto;
	width: 4px; height: 16px; margin: 0;
	border-radius: 2px;
	background: var(--color-primary);
}

/* Ссылки */
footer .middle-footer ul.list-unstyled { margin: 0; }
footer .middle-footer ul.list-unstyled li { padding: 0 0 4px 0; }
footer .middle-footer ul.list-unstyled a { color: var(--color-text-inverse-muted); }
footer .middle-footer ul.list-unstyled a:hover { color: var(--color-text-inverse); }

/* Контакты */
footer .footer-contacts li { padding-bottom: 8px; }
footer .footer-contacts .fc-phone {
	display: inline-block;
	font-size: 18px; font-weight: 700; letter-spacing: .01em;
	color: var(--color-text-inverse);
}
footer .footer-contacts .fc-phone:hover { color: var(--color-primary); }

/* Тумблер-шеврон (по умолчанию скрыт) */
footer .middle-footer h5 .toggle {
	display: none;
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; padding: 0; margin: 0;
	border: 0; background: transparent; box-shadow: none;
}
footer .middle-footer h5 .toggle::after {
	content: "\f107"; font-family: FontAwesome; font-weight: normal;
	font-size: 18px; color: var(--color-text-inverse-muted);
}
footer .middle-footer h5 .toggle:not(.collapsed)::after { content: "\f106"; color: var(--color-text-inverse); }

/* Низ футера */
footer .copy {
	background: var(--color-surface-inverse);
	border-top: 1px solid rgba(var(--rgb-white), .12);
	padding: 16px 0;
}
footer .copy, footer .copy a { color: var(--color-text-inverse-muted); font-size: 13px; }
footer .copy a:hover { color: var(--color-text-inverse); }
footer .foot-payment { margin: 0; float: right; }
footer .foot-payment li a,
footer .foot-payment li i { color: var(--color-text-inverse-muted); font-size: 26px; }
footer .foot-payment li a:hover { color: var(--color-text-inverse); }

/* Кнопка «наверх».
   Показ и скрытие делает скрипт темы (inline display), поэтому здесь
   только оформление и геометрия. z-index 1000 — выше карточек и шапки,
   но ниже модального окна входа (99990+), чтобы кнопка не лезла поверх него. */
#scroll {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	box-shadow: 0 6px 16px rgba(var(--rgb-primary), .1);
}
#scroll:hover { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
#scroll .fa { font-size: 20px; }
@media (max-width: 767px) {
	#scroll {
		right: 14px;
		bottom: 14px;
		width: 40px;
		height: 40px;
	}
	#scroll .fa { font-size: 18px; }
}

/* ---- Десктоп (≥768): списки раскрыты, тумблер скрыт ---- */
@media (min-width: 768px) {
	footer .middle-footer { padding: 50px 0 40px; }
	footer .footer-collapse { display: block !important; height: auto !important; }
}

/* ---- Планшеты (768-1199): 2x2 вместо четырёх узких колонок ---- */
@media (min-width: 768px) and (max-width: 1199px) {
	footer .middle-footer > .container > .row > [class*="col-"] {
		width: 50%;
		margin-bottom: 28px;
	}
}

/* ---- Мобильные (<768): аккордеон ---- */
@media (max-width: 767px) {
	footer .middle-footer .fborder { border-bottom: 1px solid rgba(var(--rgb-white), .12); }
	/* иконки оплаты — на свою строку, иначе их перекрывает кнопка «наверх» */
	footer .copy { padding-bottom: 20px; }
	footer .foot-payment { float: none; margin-top: 12px; padding-left: 0; }
	footer .middle-footer h5 { margin: 0; padding: 14px 36px 14px 0; }
	footer .middle-footer h5::before { display: none; }
	footer .middle-footer h5 .toggle { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
	footer .middle-footer h5 .toggle::after { position: absolute; right: 4px; top: 60%; transform: translateY(-50%); }
	footer .footer-collapse { padding-bottom: 14px; }
}

/* ============================================================
   Верхняя панель шапки (.htop) — светлая тонкая полоса
   Избранное / Сравнения / Язык / Валюта
   ============================================================ */
.hsticky { position: relative; }
.hsticky.sticky,
.hsticky.is-sticky,
.hsticky.sticked,
.hsticky.active,
.hsticky.headerfix { z-index: 1080 !important; }
/* ── Верхняя служебная полоса ────────────────────────────────────────────────
   Было: position:absolute поверх контейнера (наследие градиентного фона,
   который «угасал» влево, чтобы не перекрывать логотип) плюс pointer-events
   для той же прозрачной части. Фон давно сплошной, а абсолют заставлял
   компенсировать себя отступами внутри .hbottom и ломал выравнивание строки.
   Возвращаем в поток и убираем оба костыля.
   Цвет: был --color-surface-sunken, почти в тон странице — полоса не читалась
   как отдельная лента, ссылки висели в воздухе. Тёмная, как на старом сайте:
   она отбивает шапку сверху и делает белую строку с логотипом заметнее. */
.htop {
	position: static;
	padding: 0;
	border: 0;
	background: var(--color-surface-inverse);
}
.htop .htop-list { margin: 0; padding: 0; text-align: right; line-height: 1; font-size: 0; }
.htop .htop-list > li { display: inline-flex; align-items: center; padding: 9px 0; margin: 0; vertical-align: middle; font-size: 13px; }
.htop .htop-list > li + li { margin-left: 18px; }

.htop .htop-list {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.htop .htop-blog {
  margin-right: auto !important;
}
.htop .htop-blog a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-inverse-muted);
}
.htop .htop-blog a:hover {
  color: var(--color-text-inverse);
}

/* Ссылки полосы. Иконки — фиксированной ширины, чтобы подписи стояли ровным
   строем; в шаблоне у каждой ссылки своя иконка по смыслу раздела, а не
   один и тот же набор общих значков. */
.htop .htop-list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--color-text-inverse-muted);
	transition: color .18s ease;
}
.htop .htop-list > li > a:hover,
.htop .htop-list > li > a:focus { color: var(--color-text-inverse); text-decoration: none; }
.htop .htop-list > li > a > .fa,
.htop .htop-list > li > a > .fas,
.htop .htop-list > li > a > .fab {
	width: 15px;
	text-align: center;
	font-size: 13px;
	color: var(--color-primary);   /* зелёный акцент — единственное пятно цвета в тёмной ленте */
	transition: color .18s ease;
}
.htop .htop-list > li > a:hover > .fa,
.htop .htop-list > li > a:hover > .fas,
.htop .htop-list > li > a:hover > .fab { color: var(--color-text-inverse); }

/* ── Блог в бургере: отдельная строка ── */
#htop-in-menu .htop-list {
  flex-wrap: wrap !important;
}
#htop-in-menu .htop-blog {
  width: 100%;
  flex-basis: 100%;
  order: -1;
  padding: 4px 0 8px !important;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px !important;
}
#htop-in-menu .htop-blog a {
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
}

@media (max-width: 991px) {
    #mySidenav.sidenav.open #htop-in-menu .htop-blog {
        width: auto;
        flex-basis: auto;
        order: -1;
        padding: 0 !important;
        border-bottom: none;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 992px) {
	.msticky.fixed {
	    position: fixed !important;
	    top: 0;
	    left: 0;
	    right: 0;
	    width: 100%;
	    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	    z-index: 1080;
	}
	body.header-fixed-spacer { padding-top: var(--header-fixed-height, 0px); }
}

/* Избранное / Сравнения */
.htop .htop-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-inverse-muted); }
.htop .htop-link a:hover { color: var(--color-text-inverse); }
/* svg-иконки (избранное, сравнение) красим так же зелёным, как шрифтовые
   иконки ссылок слева — иначе половина ленты в зелёном, половина в сером. */
.htop .htop-link svg { width: 15px; height: 15px; fill: var(--color-primary); transition: fill .18s ease; }
.htop .htop-link a:hover svg { fill: var(--color-text-inverse); }

/* Отбивка перед переключателями. Вертикальной линии тут не место: у <li> нет
   вертикальных полей, и она вытягивалась во всю высоту ленты. */
.htop .htop-lang { margin-left: 22px; }

/* Компактные виджеты языка/валюты */
.htop form { margin: 0; }
.htop .btn-group { display: inline-flex; }
.htop .dropdown-toggle.test {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 0; border: 0; background: transparent; box-shadow: none;
	color: var(--color-text-inverse-muted); font-weight: 500;
}
.htop .dropdown-toggle.test:hover { color: var(--color-text-inverse); }
.htop .dropdown-toggle.test img { width: 16px; height: auto; border-radius: 2px; }
.htop .dropdown-toggle.test .fa { font-size: 12px; }
/* Панель выбора языка — в тон тёмной ленте, с клювиком к переключателю и
   кодом языка отдельным шильдиком слева: список читается с одного взгляда,
   а не как две строки обычного bootstrap-меню. */
.htop .langcdrop {
	min-width: 172px; padding: 6px; margin-top: 12px;
	border: 1px solid rgba(var(--rgb-white), .14);
	border-radius: 12px;
	background: var(--color-surface-inverse);
	box-shadow: 0 16px 34px rgba(var(--rgb-black), .35);
}
.htop .langcdrop::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 16px;
	width: 11px;
	height: 11px;
	background: var(--color-surface-inverse);
	border-left: 1px solid rgba(var(--rgb-white), .14);
	border-top: 1px solid rgba(var(--rgb-white), .14);
	transform: rotate(45deg);
}
.htop .langcdrop > li > .btn-link {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 8px 10px; border-radius: 8px;
	color: var(--color-text-inverse-muted); text-align: left; white-space: nowrap; font-weight: 500;
	transition: background .15s ease, color .15s ease;
}
.htop .langcdrop > li > .btn-link:hover,
.htop .langcdrop > li > .btn-link:focus {
	background: rgba(var(--rgb-white), .10);
	color: var(--color-text-inverse);
	text-decoration: none;
}
/* Код языка. Берём из name кнопки (ru-ru / uk-ua), явными правилами, а не
   через attr() — иначе в шильдике был бы «RU-RU». */
.htop .langcdrop .language-select::before {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 27px; height: 19px;
	border-radius: 5px;
	background: rgba(var(--rgb-white), .14);
	color: var(--color-text-inverse);
	font-size: 10px; font-weight: 700; letter-spacing: .4px;
	transition: background .15s ease;
}
.htop .langcdrop .language-select[name^="ru"]::before { content: "RU"; }
.htop .langcdrop .language-select[name^="uk"]::before { content: "UA"; }
.htop .langcdrop .language-select[name^="en"]::before { content: "EN"; }
.htop .langcdrop .language-select[name^="pl"]::before { content: "PL"; }
.htop .langcdrop .language-select:hover::before { background: var(--color-primary); }
.htop .langcdrop img { width: 16px; height: auto; border-radius: 2px; }

/* ============================================================
   Кластер «аккаунт + корзина» в шапке
   ------------------------------------------------------------
   Было: два одинаковых контурных SVG 23×23 без фона и с одинаковой
   заливкой — по весу близнецы, глаз не понимал, что здесь главное.
   Стало: корзина — единственный залитый элемент во всей белой строке
   шапки, аккаунт — такой же по размеру кружок, но контурный. Пара стоит
   на одной оптической линии и читается как «второстепенное / основное».
   ============================================================ */
.head-right .hsearch {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: auto;
	margin: 0;
	padding: 0;
}
.head-right .hsearch > li { margin: 0; padding: 0; }

/* Общая геометрия обоих кружков */
.head-right .inuser > a,
.head-right #cart .hcart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

/* --- Аккаунт: контурный --- */
.head-right .inuser { display: inline-block; vertical-align: middle; }
.head-right .inuser > a {
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text-muted);
}
.head-right .inuser > a svg { fill: var(--color-text-muted); transition: fill .18s ease; }
.head-right .inuser > a:hover {
	border-color: var(--color-primary);
	background: rgba(var(--rgb-primary), .07);
}
.head-right .inuser > a:hover svg { fill: var(--color-primary); }


/* ============================================================
   Корзина в шапке (#cart dropdown) — стиль сайта
   ============================================================ */

#cart { display: inline-block; }
/* Селектор с тегом (#cart button.hcart-toggle), а не просто #cart .hcart-toggle:
   выше в файле лежит #cart button.dropdown-toggle с background-color:transparent —
   при равной специфичности он бы победил по порядку... нет, по специфичности:
   там id + класс + тег, у нас без тега было бы на разряд меньше. */
#cart button.hcart-toggle {
	border: 0;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	box-shadow: none;
}
/* svg в теме нарисован и заливкой, и обводкой (stroke-width: 6px) — красим оба,
   иначе на зелёном остаётся тёмный контур. */
#cart button.hcart-toggle svg {
	fill: var(--color-text-inverse);
	stroke: var(--color-text-inverse);
}
#cart button.hcart-toggle:hover svg,
#cart.open button.hcart-toggle svg {
	fill: var(--color-text-inverse);
	stroke: var(--color-text-inverse);
}
#cart button.hcart-toggle:hover,
#cart.open button.hcart-toggle { background: var(--color-primary-dark); }
#cart button.hcart-toggle:focus { outline: 0; }

/* Счётчик. Раньше висел над иконкой на жёстких top/left; теперь привязан к
   правому верхнему углу кружка, а белая обводка отделяет его от зелёного. */
#cart .hcart-toggle .cartta {
	position: absolute;
	top: -2px;
	right: -2px;
	left: auto;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	/* тёмный, а не белый: белый кружок на зелёном круге читается как выкушенный
	   из него кусок, потому что фон шапки тоже белый */
	background: var(--color-surface-inverse);
	box-shadow: 0 0 0 2px var(--color-surface);
	color: var(--color-text-inverse);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}
#cart #cart-total { position: static; display: block; font-size: 0; }

/* --- Сумма в кнопке (только на широких экранах) ---------------------------
   С суммой кружок превращается в «пилюлю»: иконка + цена. Ниже 1200px её
   прячем — колонка иконок там уже, чем нужно пилюле, и она бы выдавила поиск.
   :has() — потому что пустая корзина сумму не выводит и должна остаться
   ровным кругом 44px. */
.hcart-sum { display: none; }
@media (min-width: 1200px) {
	#cart button.hcart-toggle:has(.hcart-sum) {
		width: auto;
		padding: 0 16px 0 13px;
		border-radius: 22px;
		gap: 8px;
	}
	#cart button.hcart-toggle:has(.hcart-sum) .hcart-sum {
		display: inline;
		color: var(--color-text-inverse);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
	}
	/* Счётчик держим над иконкой, а не над ценой: правый верхний угол пилюли
	   от корзины уже далеко и связь «значок — количество» теряется. */
	#cart button.hcart-toggle:has(.hcart-sum) .cartta {
		right: auto;
		left: 28px;
	}
}

/* Реакция на добавление товара: раньше в шапке не происходило ничего, и было
   не очевидно, что товар вообще добавился. Класс вешает custom.js, когда
   меняется содержимое #cart-total. */
#cart .hcart-toggle.hcart-bump { animation: hcart-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
#cart .hcart-toggle.hcart-bump .cartta { animation: hcart-badge .5s .06s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hcart-bump {
	0%   { transform: scale(1); }
	28%  { transform: scale(1.18); }
	55%  { transform: scale(.94); }
	100% { transform: scale(1); }
}
@keyframes hcart-badge {
	0%   { transform: scale(.4); opacity: .3; }
	60%  { transform: scale(1.25); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* На телефоне кружки меньше: в ряду 62px рядом с лого и номером на 44px
   просто не хватает ширины. */
@media (max-width: 767px) {
	.head-right .hsearch { gap: 8px; }
	.head-right .inuser > a,
	.head-right #cart .hcart-toggle { width: 38px; height: 38px; }
	#cart .hcart-toggle .cartta { width: 18px; height: 18px; line-height: 18px; font-size: 10px; }
}

/* Панель. 400px вместо 340: на 340 названия товаров ломались на три строки. */
#cart .hcart-drop {
	width: 400px; max-width: 92vw; padding: 8px 8px 12px;
	margin-top: 12px;
	border: 1px solid var(--color-border); border-radius: 16px;
	background: var(--color-surface) !important;
	box-shadow: 0 18px 40px rgba(var(--rgb-black), .12);
}
/* Клювик к кнопке корзины — панель перестаёт «висеть в воздухе». */
#cart .hcart-drop::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 18px;
	width: 11px;
	height: 11px;
	background: var(--color-surface);
	border-left: 1px solid var(--color-border);
	border-top: 1px solid var(--color-border);
	transform: rotate(45deg);
}
#cart .hcart-drop > li { padding: 0; list-style: none; }

/* Позиции */
#cart .hcart-items {
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border-strong) transparent;
}
#cart .hcart-items::-webkit-scrollbar { width: 6px; }
#cart .hcart-items::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
#cart .cart-item {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 10px 8px;
	border-radius: 10px;
	transition: background .15s ease;
}
#cart .cart-item + .cart-item { border-top: 1px solid var(--color-border); border-radius: 0 0 10px 10px; }
#cart .cart-item:hover { background: var(--color-surface-alt); }
#cart .cart-item-img { flex: 0 0 60px; }
#cart .cart-item-img img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); }
/* Заглушка для товаров без картинки: без неё строка «съезжала» влево и
   ломала колонку — у одних позиций миниатюра есть, у других нет. */
#cart .cart-item-img--empty {
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px;
	border: 1px solid var(--color-border); border-radius: 10px;
	background: var(--color-surface-alt);
	color: var(--color-text-subtle); font-size: 20px;
}
#cart .cart-item-info { flex: 1 1 auto; min-width: 0; }
#cart .cart-item-name { display: block; color: var(--color-text); font-size: 14px; font-weight: 500; line-height: 1.3; }
#cart .cart-item-name:hover { color: var(--color-primary); }
#cart .cart-item-opts { color: var(--color-text-muted); font-size: 12px; margin-top: 3px; }
#cart .cart-item-opts span { display: block; }
/* Количество — отдельным «шильдиком», сумма позиции рядом крупно: раньше это
   была одна строка «1.00 × 960 грн.», где количество и цена весили одинаково. */
#cart .cart-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; }
#cart .cart-item-qty .ci-q {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 20px; padding: 0 6px;
	border-radius: 6px;
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	font-size: 12px; font-weight: 700;
}
#cart .cart-item-qty .ci-sum { color: var(--color-text); font-weight: 700; font-size: 14px; }
#cart .cart-item-del {
	flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--color-text-subtle);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
#cart .cart-item-del:hover { background: rgba(var(--rgb-danger), .10); color: var(--color-danger); }

/* Итоги. Ни одну строку не выделяем жирным по позиции: порядок тоталов задаётся
   sort_order расширений, и на этом магазине доставка идёт после «Всего» —
   :last-child подсветил бы доставку вместо суммы заказа. */
#cart .hcart-foot { padding: 12px 8px 0; margin-top: 4px; border-top: 1px solid var(--color-border); }
#cart .cart-totals { margin-bottom: 14px; }
#cart .cart-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
#cart .cart-total-row span:first-child { color: var(--color-text-muted); }
#cart .cart-total-row span:last-child { color: var(--color-text); font-weight: 700; white-space: nowrap; }

/* Кнопки */
#cart .cart-actions { display: flex; gap: 10px; }
#cart .cart-actions .btn { flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 700; font-size: 14px; }
#cart .cart-btn-view { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
#cart .cart-btn-view:hover { border-color: var(--color-primary); color: var(--color-primary); }
#cart .cart-btn-checkout { border: 0; background: var(--color-primary); color: var(--color-text-inverse); }
#cart .cart-btn-checkout:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }
#cart .cart-btn-checkout .fa { font-size: 12px; transition: transform .18s ease; }
#cart .cart-btn-checkout:hover .fa { transform: translateX(3px); }

/* Пусто */
#cart .hcart-empty { padding: 26px 8px 22px; text-align: center; }
#cart .hcart-empty .fa { display: block; margin-bottom: 10px; font-size: 30px; color: var(--color-border-strong); }
#cart .hcart-empty p { margin: 0; color: var(--color-text-muted); }

/* ============================================================
   Сравнение товаров (#product-compare)
   ============================================================ */
#product-compare .heading { font-size: 28px; font-weight: 800; color: var(--color-text); margin: 6px 0 20px; }

#product-compare .table-responsive { border: 1px solid var(--color-border); border-radius: 14px; overflow: auto; background: var(--color-surface); }
#product-compare table.table { margin: 0; border: 0; background: transparent; }
#product-compare table.table > thead > tr > td,
#product-compare table.table > tbody > tr > td {
	border: 0; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
	padding: 14px 16px; vertical-align: middle; color: var(--color-text); font-size: 14px;
}
#product-compare table.table > thead > tr > td:last-child,
#product-compare table.table > tbody > tr > td:last-child { border-right: 0; }

/* Первый столбец — метки. Липкий: таблица шире экрана почти всегда
   (4 товара — это 4 колонки), и при горизонтальной прокрутке названия
   строк уезжали — было не понять, что за значение перед тобой.
   Рамку справа рисуем тенью внутрь: при border-collapse: collapse
   собственная рамка липкой ячейки не отрисовывается. */
#product-compare table.table > thead > tr > td:first-child:not([colspan]),
#product-compare table.table > tbody > tr > td:first-child:not([colspan]) {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 168px;
	max-width: 168px;
	border-right: 0;
	/* Только рамка. Тень «слоя» под липкой колонкой выглядела
	   грязно и была видна даже когда прокручивать нечего. */
	box-shadow: inset -1px 0 0 var(--color-border);
	background: var(--color-surface-sunken);
	color: var(--color-text-muted);
	font-weight: 600;
}

/* Колонки товаров не должны сжиматься до нечитаемых */
#product-compare table.table td:not(:first-child) { min-width: 210px; }

/* Bootstrap внутри .table-responsive ставит td { white-space: nowrap }.
   Из-за этого краткое описание вытягивалось в одну строку: на телефоне
   таблица получалась 6549px вместо 788px. */
#product-compare .table-responsive > table.table > thead > tr > td,
#product-compare .table-responsive > table.table > tbody > tr > td {
	white-space: normal;
	word-break: break-word;
}

/* Пустое значение — прочерк, иначе не отличить «нет данных» от сбоя.
   Метки в первом столбце не трогаем: там пустая ячейка — распорка
   над строкой с кнопками. */
#product-compare table.table td:empty:not(:first-child)::after {
	content: "—";
	color: var(--color-border-strong);
}

/* Подсветка строки — глазом вести по 4 колонкам иначе тяжело */
/* Подсветка строки — только там, где есть курсор. На тач-экране
   :hover «залипает» после касания, и подсветка оставалась висеть
   на случайной строке.

   Липкая ячейка обязана быть непрозрачной: под ней проезжают
   колонки товаров, и полупрозрачный зелёный просвечивал насквозь.
   Кладём подсветку слоем поверх непрозрачной подложки — цвет тот
   же, токен тот же, но фон плотный. */
@media (hover: hover) and (pointer: fine) {
	#product-compare table.table > tbody > tr:hover > td { background: rgba(var(--rgb-primary), .04); }
	#product-compare table.table > tbody > tr:hover > td:first-child {
		background:
			linear-gradient(rgba(var(--rgb-primary), .10), rgba(var(--rgb-primary), .10)),
			var(--color-surface-sunken);
	}
}

/* Полосы-заголовки (Товар / группы атрибутов) */
#product-compare table.table > thead > tr > td {
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text); font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
#product-compare table.table > thead > tr > td strong { font-weight: 800; }

/* Название */
#product-compare table.table > tbody:first-of-type > tr:first-child > td { vertical-align: top; }
#product-compare table.table a strong { display: block; color: var(--color-text); font-weight: 700; font-size: 15px; line-height: 1.4; }
#product-compare table.table a:hover strong { color: var(--color-primary); }

/* Картинка — по центру колонки, а не прижата влево */
#product-compare table.table > tbody:first-of-type > tr:nth-child(2) > td {
	text-align: center;
	padding-top: 18px;
	padding-bottom: 18px;
}
#product-compare table.table img.img-thumbnail { width: 140px; height: auto; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: 10px; }

/* Цена — главный критерий сравнения, поэтому крупно и акцентом.
   Строка «Цена» — третья в первом tbody (порядок задан compare.twig). */
#product-compare table.table > tbody:first-of-type > tr:nth-child(3) > td:not(:first-child) {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-primary);
	white-space: nowrap;
}
#product-compare table.table > tbody:first-of-type > tr:nth-child(3) > td strike { font-size: 14px; font-weight: 500; }
#product-compare table.table strike { color: var(--color-text-muted); margin-right: 6px; }

/* Рейтинг */
#product-compare .rating .fa-stack { font-size: 7px; }
#product-compare .rating .fa-star { color: var(--color-accent); }
#product-compare .rating .fa-star-o { color: var(--gray-200); }

/* Описание */
#product-compare .com-description { min-width: 200px; font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }

/* Кнопки в колонке товара.
   .comb — это сама ячейка <td>. Ни flex, ни inline-flex ей давать
   нельзя: ячейка выпадает из табличной раскладки и строка рассыпается
   на четыре. Выравниваем содержимое, а не контейнер. */
#product-compare .comb { white-space: normal; text-align: center; }
#product-compare .comb .btn { display: inline-block; height: 42px; line-height: 42px; padding: 0 18px; margin: 3px; border-radius: 10px; font-weight: 700; font-size: 14px; }
#product-compare .comb input.btn { border: 0; background: var(--color-primary); color: #fff; }
#product-compare .comb input.btn:hover { background: var(--color-surface-inverse); }
#product-compare .comb a.btn { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
#product-compare .comb a.btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* Телефон: колонка 168px, две кнопки в строку не помещаются */
@media (max-width: 767px) {
	#product-compare table.table > thead > tr > td,
	#product-compare table.table > tbody > tr > td { padding: 12px; font-size: 13px; }
	#product-compare table.table > thead > tr > td:first-child:not([colspan]),
	#product-compare table.table > tbody > tr > td:first-child:not([colspan]) {
		min-width: 116px; max-width: 116px; padding: 12px 10px; font-size: 12px;
	}
	#product-compare table.table td:not(:first-child) { min-width: 168px; }
	#product-compare table.table img.img-thumbnail { width: 100px; }
	#product-compare .comb .btn { display: block; width: 100%; margin: 6px 0 0; }
	#product-compare .comb .btn:first-child { margin-top: 0; }
}

/* Пустое состояние */
#product-compare .buttons .btn { height: 46px; line-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--color-primary); color: #fff; font-weight: 700; }
#product-compare .buttons .btn:hover { background: var(--color-surface-inverse); color: #fff; }

/* ============================================================
   КОНТАКТЫ (#information-contact)
   ------------------------------------------------------------
   Две карточки в ряд: слева контакты, справа форма. Раньше вся
   страница лежала в одной белой плашке (.infobg), а карточки внутри
   были тоже белыми — границы читались только по рамке.
   ============================================================ */
#information-contact .infobg {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
/* .container внутри имеет фиксированную width 1580px и вылезал за
   пределы колонки на 30px */
#information-contact .infobg > .container {
	width: auto;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Заголовок — как на информационных страницах: влево, с акцентной чертой */
#information-contact .heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 24px;
	text-align: left;
}
#information-contact .heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	min-height: 28px;
	border-radius: 2px;
	background: var(--color-primary);
}
#information-contact .heading h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.2px;
	text-align: left;
}
#information-contact .heading h1::after {
	display: none;   /* подчёркивание по центру от старого макета */
}

/* Карточки */
#information-contact .infocnt,
#information-contact .formcnt {
	padding: 26px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-surface);
	box-shadow: none;
}
#information-contact .infocnt {
	margin-bottom: 24px;   /* когда карточки встают друг под друга */
}

/* Промежутка между карточками не было вовсе — рамки стыковались
   вплотную, в стык читалась двойная линия. Бутстраповский гуттер
   (padding 15px у колонок) ушёл под внутренний padding карточки 26px,
   поэтому развести колонки можно только снаружи: ряд переводим на
   flex и ставим gap. Заодно ряд перестаёт вылезать на 15px за
   заголовок — раньше у .row были отрицательные поля. */
@media (min-width: 992px) {
	#information-contact .infobg > .container > .row {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		margin-left: 0;
		margin-right: 0;
	}
	/* клирфикс-псевдоэлементы .row иначе становятся flex-элементами
	   и съедают ещё два gap'а */
	#information-contact .infobg > .container > .row::before,
	#information-contact .infobg > .container > .row::after {
		display: none;
	}
	#information-contact .infocnt {
		flex: 0 0 auto;
		width: calc(33.3333% - 12px);
		margin-bottom: 0;
	}
	#information-contact .formcnt {
		flex: 0 0 auto;
		width: calc(66.6667% - 12px);
	}
}

#information-contact legend {
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--color-border);
	font-size: 19px;
	font-weight: 800;
	color: var(--color-text);
}

/* Строки контактов */
#information-contact .ci-comment {
	margin-bottom: 14px;
	color: var(--color-text-muted);
	line-height: 1.6;
}
#information-contact .contact-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
#information-contact .ci-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
#information-contact .ci-ic {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(var(--rgb-primary), .1);
	color: var(--color-primary);
	font-size: 15px;
}
#information-contact .ci-tx {
	flex: 1 1 auto;
	padding-top: 0;
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.5;
}
#information-contact .ci-tx a {
	color: var(--color-text);
	text-decoration: none;
}
#information-contact .ci-tx a:hover {
	color: var(--color-primary);
}
#information-contact .ci-map {
	margin: 2px 0 4px 50px;
}
#information-contact .btn-map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	transition: color .25s ease, border-color .25s ease;
}
#information-contact .btn-map:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Аккордеон магазинов (если включён вывод нескольких точек) */
#information-contact #accordion { margin-top: 18px; }
#information-contact .panel-heading { padding: 0; background: none; border: 0; }
#information-contact .panel-title { margin: 0; }
#information-contact .panel-title a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 0; border-top: 1px solid var(--color-border);
	color: var(--color-text); font-weight: 700; font-size: 15px; text-decoration: none;
}
#information-contact .panel-title a:hover { color: var(--color-primary); }
#information-contact .panel-title a .fa { color: var(--color-text-muted); }
#information-contact .panel-title a:not(.collapsed) .fa { transform: rotate(180deg); }
#information-contact .panel-collapse address { margin: 8px 0; font-style: normal; color: var(--color-text-muted); line-height: 1.6; }
#information-contact .panel-collapse strong { display: inline-block; margin-top: 6px; color: var(--color-text); }
#information-contact .panel-collapse img { margin-bottom: 12px; border-radius: 10px; }

/* Форма. Разметка bootstrap-horizontal: подпись в col-sm-3 справа,
   поле в col-sm-9. На узкой карточке это читается плохо — раскладываем
   подпись над полем, как в остальных формах сайта. */
#information-contact .form-horizontal .form-group {
	margin: 0 0 18px;
}
#information-contact .form-horizontal .control-label {
	float: none;
	width: auto;
	margin: 0 0 7px;
	padding: 0;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}
#information-contact .form-horizontal .form-group > div[class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}
#information-contact .form-group.required .control-label::before {
	color: var(--color-danger);
}
#information-contact .form-control {
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}
#information-contact .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}
#information-contact textarea.form-control {
	min-height: 150px;
	resize: vertical;
}
#information-contact .text-danger {
	margin-top: 6px;
	font-size: 13px;
	color: var(--color-danger);
}

/* Кнопка отправки */
#information-contact .buttons {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}
#information-contact .buttons .btn-primary {
	height: 46px;
	min-width: 190px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--border-radius);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
	transition: background-color .25s ease, box-shadow .25s ease;
}
#information-contact .buttons .btn-primary:hover {
	background: var(--color-primary-dark);
	box-shadow: 0 8px 20px rgba(var(--rgb-primary), .28);
}

@media (max-width: 767px) {
	#information-contact .heading h1 {
		font-size: 24px;
	}
	#information-contact .infocnt,
	#information-contact .formcnt {
		padding: 18px 16px;
	}
	#information-contact .buttons .pull-right {
		float: none !important;
	}
	#information-contact .buttons .btn-primary {
		width: 100%;
	}
}

/* ============================================================
   Радио / чекбоксы — единый стиль по сайту (без правок HTML)
   ocFilter исключён (там свои стили); скрытые кастомные
   (опции товара, рейтинг) не видны, т.к. opacity:0
   ============================================================ */
input[type="radio"]:not(.ocf-value-input),
input[type="checkbox"]:not(.ocf-value-input) {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	box-sizing: border-box; flex: 0 0 auto;
	width: 20px; height: 20px; margin: 0 8px 0 0; padding: 0;
	border: 2px solid var(--color-border); background: var(--color-surface);
	position: relative; vertical-align: -4px; cursor: pointer;
	accent-color: var(--color-primary);
}
input[type="radio"]:not(.ocf-value-input) { border-radius: 50%; }
input[type="checkbox"]:not(.ocf-value-input) { border-radius: 6px; }

input[type="radio"]:not(.ocf-value-input):hover,
input[type="checkbox"]:not(.ocf-value-input):hover { border-color: var(--color-primary); }

input[type="radio"]:not(.ocf-value-input):checked { border-color: var(--color-primary); }
input[type="radio"]:not(.ocf-value-input):checked::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
	transform: translate(-50%, -50%);
}
input[type="checkbox"]:not(.ocf-value-input):checked { border-color: var(--color-primary); background: var(--color-primary); }
input[type="checkbox"]:not(.ocf-value-input):checked::after {
	content: ""; position: absolute; top: 45%; left: 50%;
	width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

input[type="radio"]:not(.ocf-value-input):focus-visible,
input[type="checkbox"]:not(.ocf-value-input):focus-visible {
	outline: 0; box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
}
input[type="radio"]:not(.ocf-value-input):disabled,
input[type="checkbox"]:not(.ocf-value-input):disabled { opacity: .5; cursor: not-allowed; }

/* Бутстрап-обёртки: ровное выравнивание метки и контрола */
.radio-inline, .checkbox-inline { display: inline-flex; align-items: center; margin-bottom: 0; padding-left: 0; font-weight: 500; color: var(--color-text); cursor: pointer; }
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-left: 16px; }
.radio label, .checkbox label { display: inline-flex; align-items: center; font-weight: 500; color: var(--color-text); cursor: pointer; }
.radio, .checkbox { padding-left: 0; }
.radio input[type="radio"], .checkbox input[type="checkbox"],
.radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"] {
	position: relative; margin: 0 8px 0 0;
}

/* ============================================================
   Список желаний (#account-wishlist)
   ============================================================ */
#account-wishlist .infobg > h1 { font-size: 28px; font-weight: 800; color: var(--color-text); margin: 6px 0 20px; }

#account-wishlist .table-responsive { border: 1px solid var(--color-border); border-radius: 14px; overflow: auto; background: var(--color-surface); }
#account-wishlist table.table { margin: 0; border: 0; background: transparent; }
#account-wishlist table.table > thead > tr > td {
	border: 0; border-bottom: 1px solid var(--color-border); padding: 14px 16px;
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
#account-wishlist table.table > tbody > tr > td {
	border: 0; border-bottom: 1px solid var(--color-border); padding: 14px 16px;
	vertical-align: middle; color: var(--color-text); font-size: 14px;
}
#account-wishlist table.table > tbody > tr:last-child > td { border-bottom: 0; }
#account-wishlist table.table.table-hover > tbody > tr:hover > td { background: var(--color-surface-sunken); }

#account-wishlist table.table img { width: 70px; height: 70px; object-fit: cover; border: 1px solid var(--color-border); border-radius: 10px; }
#account-wishlist table.table tbody a { color: var(--color-text); }
#account-wishlist table.table tbody a:hover { color: var(--color-primary); }

#account-wishlist .price { font-weight: 700; color: var(--color-text); }
#account-wishlist .price b { color: var(--color-primary); }
#account-wishlist .price s { margin-left: 4px; color: var(--color-text-muted); font-weight: 400; }

/* Действия — иконки */
/* Две кнопки по 42px с полями 6px не помещались в колонку 138px —
   не хватало двух пикселей, и «Удалить» уезжала под «Купить»,
   растягивая строку до 137px. Уменьшили до 36px и убрали лишние
   поля: строка стала 99px. */
#account-wishlist td .btn { width: 36px; height: 36px; padding: 0; margin: 0 0 0 6px; border-radius: 9px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
#account-wishlist td .btn:first-child { margin-left: 0; }
#account-wishlist table.table > tbody > tr > td:last-child { white-space: nowrap; }

/* «Наличие»: колонка сжималась до ширины заголовка, и «В наличии»
   переносилось на две строки. nowrap заставляет таблицу отдать ей
   столько, сколько нужно — запас берётся из колонки с названием. */
#account-wishlist table.table > thead > tr > td:nth-child(4),
#account-wishlist table.table > tbody > tr > td:nth-child(4) { white-space: nowrap; }
#account-wishlist td .btn-info { border: 0; background: var(--color-primary); color: #fff; }
#account-wishlist td .btn-info:hover { background: var(--color-surface-inverse); color: #fff; }
#account-wishlist td .btn-danger { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
#account-wishlist td .btn-danger:hover { border-color: var(--color-warning); color: var(--color-warning); }

/* Пусто + кнопка «Продолжить» */
#account-wishlist .infobg > p { margin: 0; padding: 24px; text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
#account-wishlist .buttons { margin-top: 18px; }
#account-wishlist .buttons .btn-primary { height: 46px; line-height: 46px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--color-primary); color: #fff; font-weight: 700; }
#account-wishlist .buttons .btn-primary:hover { background: var(--color-surface-inverse); color: #fff; }

/* ============================================================
   Заказы аккаунта (#account-order: список + страница заказа)
   ============================================================ */
#account-order .infobg > h1 { font-size: 28px; font-weight: 800; color: var(--color-text); margin: 6px 0 20px; }
#account-order h3 { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 24px 0 14px; }

/* Таблицы — единый чистый вид (без вертикальных линий) */
#account-order .table-responsive { border: 0; }
#account-order table.table {
	width: 100%; margin: 0 0 20px; background: var(--color-surface);
	border: 1px solid var(--color-border); border-radius: 12px;
	border-collapse: separate; border-spacing: 0; overflow: hidden;
}
#account-order table.table > thead > tr > td {
	padding: 12px 16px; border: 0; border-bottom: 1px solid var(--color-border);
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
	vertical-align: top;
}
#account-order table.table > tbody > tr > td {
	padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-border);
	vertical-align: middle; color: var(--color-text); font-size: 14px;
}
#account-order table.table > tbody > tr:last-child > td { border-bottom: 0; }
#account-order table.table.table-hover > tbody > tr:hover > td { background: var(--color-surface-sunken); }
#account-order table.table b { color: var(--color-text); }
#account-order table.table small { color: var(--color-text-muted); }
#account-order table.table a:not(.btn) { color: var(--color-primary); }

/* Итоги (tfoot в order_info) */
#account-order table.table > tfoot > tr > td { min-width: 110px;padding: 8px 16px; border: 0; font-size: 14px; color: var(--color-text); }
#account-order table.table > tfoot > tr:first-child > td { border-top: 1px solid var(--color-border); padding-top: 14px; }
#account-order table.table > tfoot > tr:last-child > td b { font-size: 16px; color: var(--color-text); }

/* Кнопки-иконки в строках */
#account-order td .btn { width: 40px; height: 40px; padding: 0; margin-left: 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
#account-order td .btn-info, #account-order td .btn-primary { border: 0; background: var(--color-primary); color: #fff; }
#account-order td .btn-info:hover, #account-order td .btn-primary:hover { background: var(--color-surface-inverse); color: #fff; }
#account-order td .btn-danger { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
#account-order td .btn-danger:hover { border-color: var(--color-warning); color: var(--color-warning); }

/* Алерты */
#account-order .alert { border: 0; border-radius: 12px; padding: 14px 16px; }
#account-order .alert-success { background: rgba(var(--rgb-primary), .1); color: var(--color-text); }
#account-order .alert-danger { background: rgba(191,115,39,.12); color: var(--color-text); }
#account-order .alert .close { color: var(--color-text); opacity: .5; text-shadow: none; }

/* Пагинация/результаты, пусто, кнопки */
#account-order .infobg > .row { margin-top: 14px; align-items: center; }
#account-order .infobg > p { margin: 0; padding: 24px; text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
#account-order .buttons { margin-top: 18px; }
#account-order .buttons .btn-primary { width: auto; height: 46px; line-height: 46px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--color-primary); color: #fff; font-weight: 700; }
#account-order .buttons .btn-primary:hover { background: var(--color-surface-inverse); color: #fff; }

/* ============================================================
   Бонусные баллы (#account-reward)
   ============================================================ */
#account-reward .infobg > h1 { font-size: 28px; font-weight: 800; color: var(--color-text); margin: 6px 0 16px; }

/* Сумма баллов — выделенная плашка */
#account-reward .infobg > p {
	display: inline-block; margin: 0 0 20px; padding: 12px 18px;
	background: rgba(var(--rgb-primary), .08); border-radius: 12px; color: var(--color-text); font-size: 15px;
}
#account-reward .infobg > p b { color: var(--color-primary); font-size: 18px; font-weight: 800; }

/* Таблица */
#account-reward .table-responsive { border: 1px solid var(--color-border); border-radius: 14px; overflow: auto; background: var(--color-surface); }
#account-reward table.table { width: 100%; margin: 0; border: 0; background: transparent; }
#account-reward table.table > thead > tr > td {
	padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-border);
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
#account-reward table.table > tbody > tr > td {
	padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-border);
	vertical-align: middle; color: var(--color-text); font-size: 14px;
}
#account-reward table.table > tbody > tr:last-child > td { border-bottom: 0; }
#account-reward table.table.table-hover > tbody > tr:hover > td { background: var(--color-surface-sunken); }
#account-reward table.table td.text-right { font-weight: 700; }
#account-reward table.table td.text-center { padding: 24px; color: var(--color-text-muted); }
#account-reward table.table a { color: var(--color-primary); }
#account-reward table.table a:hover { color: var(--color-text); }

/* Пагинация/результаты + кнопка */
#account-reward .infobg > .row { margin-top: 14px; align-items: center; }
#account-reward .buttons { margin-top: 18px; }
#account-reward .buttons .btn-primary { height: 46px; line-height: 46px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--color-primary); color: #fff; font-weight: 700; }
#account-reward .buttons .btn-primary:hover { background: var(--color-surface-inverse); color: #fff; }

/* ============================================================
   Утилиты в бургере — компактно в один ряд (#htop-in-menu)
   ============================================================ */
#htop-in-menu .htop-list { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
#htop-in-menu .htop-list > li { margin: 0; padding: 0; }
#htop-in-menu .htop-list > li:empty { display: none; }

/* Избранное / сравнение */
#htop-in-menu .htop-link a {
	display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px;
	border: 1px solid var(--color-border); border-radius: 9px;
	color: var(--color-text); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
}
#htop-in-menu .htop-link a:hover { border-color: var(--color-primary); color: var(--color-primary); }
#htop-in-menu .htop-link svg { width: 15px; height: 15px; fill: currentColor; }

/* Язык — только флаг + шеврон (подпись скрыта для компактности) */
#htop-in-menu .htop-lang form { margin: 0; }
#htop-in-menu .htop-lang .btn-group { position: relative; }
#htop-in-menu .htop-lang .dropdown-toggle.test {
	display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px;
	border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface);
	color: var(--color-text); font-weight: 700; font-size: 13px; box-shadow: none; white-space: nowrap;
}
#htop-in-menu .htop-lang .dropdown-toggle.test span { display: none; }
#htop-in-menu .htop-lang .dropdown-toggle.test img { width: 18px; height: auto; border-radius: 2px; }
#htop-in-menu .htop-lang .dropdown-toggle.test .fa { color: var(--color-text-muted); }
#htop-in-menu .htop-lang .langcdrop { position: absolute;
	left: 0; right: auto; min-width: 170px; margin-top: 6px; padding: 6px;
	border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(var(--rgb-black), .12);
}
#htop-in-menu .htop-lang .langcdrop > li > .btn-link {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 8px;
	color: var(--color-text); font-weight: 500; text-align: left; white-space: nowrap;
}
#htop-in-menu .htop-lang .langcdrop > li > .btn-link:hover { background: rgba(var(--rgb-primary), .08); color: var(--color-primary); text-decoration: none; }
#htop-in-menu .htop-lang .langcdrop img { width: 18px; height: auto; border-radius: 2px; }

/* ============================================================
   Кнопка закрытия — в правый верхний угол панели (только мобайл)
   ============================================================ */
@media (max-width: 991px) {
	#htop-in-menu.sidenav-utility { padding: 12px 18px 12px 18px; border-bottom: 1px solid var(--color-border); }
	#mySidenav .closebtn {
		position: absolute; top: 11px; right: 14px; z-index: 6; float: none !important;
		width: 34px; height: 34px; margin: 0; padding: 0;
		display: inline-flex; align-items: center; justify-content: center;
		border-radius: 9px; color: var(--color-text-muted); font-size: 18px;
	}
	#mySidenav .closebtn:hover { background: var(--color-surface-muted); color: var(--color-text); }
}

/* ============================================================
   SIMPLECHECKOUT — оформление заказа
   ------------------------------------------------------------
   CSS модуля грузится после темы, поэтому почти всё здесь с !important.
   ============================================================ */
.simplecheckout { color: var(--color-text); }

/* Заголовок страницы — как на остальных страницах, с акцентной чертой.
   У страницы оформления нет своего id на <body>, поэтому цепляемся за
   соседний .simple-content: иначе правило заденет h1 всех страниц. */
#content:has(> .simple-content) > h1 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 22px;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.2px;
}
#content:has(> .simple-content) > h1::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	min-height: 28px;
	border-radius: 2px;
	background: var(--color-primary);
}

/* --- Блоки-карточки ----------------------------------------------------- */
.simplecheckout .simplecheckout-block { margin-bottom: 18px !important; }
.simplecheckout .checkout-heading,
.simplecheckout .checkout-heading.panel-heading {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	/* column-gap здесь обязан быть нулевым: он съедается при расчёте
	   auto-отступа и не даёт ссылке встать вплотную к правому краю */
	gap: 6px 0;
	padding: 14px 20px !important;
	/* был зеленоватый rgba(primary,.08) — выбивался из тёплой палитры сайта */
	background: var(--color-surface-sunken) !important;
	border: 1px solid var(--color-border) !important;
	border-bottom: 0 !important;
	border-radius: 14px 14px 0 0 !important;
}
.simplecheckout .checkout-heading > span:first-child,
.simplecheckout .checkout-heading .panel-title,
.simplecheckout .checkout-heading h4 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--color-text) !important;
}
/* «Я зарегистрирован» — приглушённая ссылка с пунктиром, тем же приёмом,
   что счётчик отзывов в карточке товара. */
.simplecheckout .checkout-heading-button {
	flex: 0 0 auto;
	float: none !important;   /* float модуля во flex-строке не работает */
	margin-left: auto;
}
.simplecheckout .checkout-heading-button a {
	color: var(--color-text-muted) !important;
	font-size: 13px !important;
	border-bottom: 1px dashed var(--color-border-strong);
	text-decoration: none;
	transition: color .25s ease, border-color .25s ease;
}
.simplecheckout .checkout-heading-button a:hover {
	color: var(--color-primary) !important;
	border-bottom-color: var(--color-primary);
}
.simplecheckout .simplecheckout-block-content {
	padding: 20px !important;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0 0 14px 14px !important;
}
.simplecheckout .simplecheckout-block-content:first-child { border-radius: 14px !important; }
.simplecheckout .radio img {
    display: none !important;
}

/* --- Поля формы ---------------------------------------------------------
   Модуль верстает bootstrap-horizontal: подпись в col-sm-4 справа, поле в
   col-sm-8. Ставим подпись над полем — как в остальных формах сайта. */
.simplecheckout .form-horizontal .form-group { margin: 0 0 16px; }
.simplecheckout .form-horizontal .control-label {
	float: none !important;
	width: auto !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	text-align: left !important;
}
.simplecheckout .form-horizontal .form-group > div[class*="col-"] {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}
.simplecheckout .form-control {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--border-radius) !important;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: none;
}
.simplecheckout .form-control:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1) !important;
	outline: 0;
}
.simplecheckout textarea.form-control { min-height: 110px; }
.simplecheckout .required .control-label:before,
.simplecheckout .form-group.required > label:before { color: var(--color-danger) !important; }

/* Парные поля в один ряд. Подписи над полями удваивают высоту колонки —
   имя/фамилия и город/отделение спокойно живут рядом. */
@media (min-width: 992px) {
	.simplecheckout .simplecheckout-block-content > fieldset.form-horizontal {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}
	.simplecheckout .simplecheckout-block-content > fieldset.form-horizontal > .form-group {
		grid-column: span 2;
		min-width: 0;
	}
	.simplecheckout .row-customer_firstname,
	.simplecheckout .row-customer_lastname,
	.simplecheckout .row-shipping_address_city,
	.simplecheckout .row-shipping_address_address_2 { grid-column: span 1 !important; }
}

.product-warning { color: var(--color-danger); }

/* --- Шаги (если включён многошаговый режим) ------------------------------ */
.simplecheckout #simplecheckout_step_menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.simplecheckout .simple-step { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.simplecheckout .simple-step.active,
.simplecheckout .simple-step.simple-step-active { background: var(--color-primary) !important; color: var(--color-text-inverse) !important; }
.simplecheckout .simple-step-delimiter img { opacity: .4; }

/* --- Карточка корзины --------------------------------------------------- */
#simplecheckout_cart {
	padding: 20px;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 14px;
}
.simplecheckout .simplecheckout-cart,
.simplecheckout .simplecheckout-cart-total { border: 0 !important; }
.simplecheckout .simplecheckout-cart { width: 100%; border-collapse: collapse; }
.simplecheckout .simplecheckout-cart th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--color-text-muted);
	text-align: left;
}
.simplecheckout .simplecheckout-cart td {
	padding: 12px;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
	font-size: 14px;
}
.simplecheckout .simplecheckout-cart tbody tr:last-child td { border-bottom: 0; }
.simplecheckout .simplecheckout-cart td.image img {
	width: 56px; height: 56px; object-fit: cover;
	border: 1px solid var(--color-border); border-radius: 9px;
}
/* Товар без фото оставлял ячейку пустой: строка становилась ниже соседних,
   а название начиналось от края таблицы. Ставим ту же заглушку с листом,
   что в каталоге и в выпадающей корзине. */
.simplecheckout .simplecheckout-cart td.image:not(:has(img))::before {
	content: "\f06c";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--color-border);
	border-radius: 9px;
	background: var(--color-surface-sunken);
	color: rgba(var(--rgb-primary), .38);
	font-size: 22px;
}

/* Логотип службы доставки в списке способов — от него в строке только шум */
#simplecheckout_shipping .radio img,
#simplecheckout_shipping label img { display: none; }
.simplecheckout .simplecheckout-cart td.name a { color: var(--color-text); }
.simplecheckout .simplecheckout-cart td.name a:hover { color: var(--color-primary); }
.simplecheckout .simplecheckout-cart .options small { color: var(--color-text-muted); }
.simplecheckout .simplecheckout-cart td.total { font-weight: 700; }
/* Заголовки стояли влево, а значения в ячейках — по атрибутам шаблона
   (название по центру, цена и итог вправо): «Цена» висела над пустотой.
   Выравниваем колонку целиком — заголовок и значение одинаково. */
.simplecheckout .simplecheckout-cart th.name,
.simplecheckout .simplecheckout-cart td.name { text-align: left; }
.simplecheckout .simplecheckout-cart th.quantity { text-align: center; }
.simplecheckout .simplecheckout-cart th.price,
.simplecheckout .simplecheckout-cart th.total,
.simplecheckout .simplecheckout-cart td.price,
.simplecheckout .simplecheckout-cart td.total { text-align: right; }
.simplecheckout-cart tbody tr.row-out-of-stock { background-color: rgba(var(--rgb-danger), .05); }
.simplecheckout-cart tbody tr.row-out-of-stock td { border-color: rgba(var(--rgb-danger), .15); }
/* Метка «нет в наличии» рядом с названием. Крупная плашка с рамкой спорила
   с названием товара — делаем компактный ярлык. */
.simplecheckout .oos-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	padding: 2px 9px 3px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(var(--rgb-danger), .08);
	color: var(--color-danger);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	vertical-align: 1px;
}
/* иконка-крестик из разметки заметно тяжелее подписи — приглушаем */
.simplecheckout .oos-badge .fa { font-size: 9px; opacity: .75; }

/* Счётчик количества. Bootstrap-овский .input-group раскладывает кнопки
   таблицей и в узкой ячейке схлопывает «−» в нулевую ширину. */
.simplecheckout .simplecheckout-cart td.quantity .input-group {
	display: inline-flex !important;
	width: auto !important;
	/* .btn-block приносит margin: 0 68px — счётчик уезжал от левого края */
	margin: 0 !important;
	gap: 4px;
}
.simplecheckout .simplecheckout-cart td.quantity .input-group-btn,
.simplecheckout .simplecheckout-cart td.quantity .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
}
.simplecheckout .simplecheckout-cart td.quantity .btn {
	width: 36px !important;
	height: 36px;
	padding: 0;
	border: 0;
	/* bootstrap срезает углы у крайних кнопок группы (6px 0 0 6px) */
	border-radius: var(--border-radius) !important;
}
.simplecheckout .simplecheckout-cart td.quantity .btn-primary { background: var(--color-surface-sunken); color: var(--color-text); }
.simplecheckout .simplecheckout-cart td.quantity .btn-primary:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.simplecheckout .simplecheckout-cart td.quantity .btn-danger { background: transparent; color: var(--color-text-subtle); }
.simplecheckout .simplecheckout-cart td.quantity .btn-danger:hover { background: rgba(var(--rgb-danger), .1); color: var(--color-danger); }
.simplecheckout .simplecheckout-cart td.quantity input.form-control {
	width: 52px !important;
	min-height: 36px;
	height: 36px;
	padding: 0;
	text-align: center;
}

/* --- Итоги -------------------------------------------------------------- */
.simplecheckout .simplecheckout-cart-total {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 14px;
	max-width: 460px;
	margin-left: auto;
	padding: 7px 0;
	font-size: 14px;
}
.simplecheckout .simplecheckout-cart-total > span:first-child {
	flex: 1 1 auto;
	margin-left: 0;
	text-align: right;
	color: var(--color-text-muted);
}
.simplecheckout .simplecheckout-cart-total-value {
	flex: 0 0 auto;
	min-width: 110px;
	max-width: 100%;
	margin-left: auto;
	text-align: right;
	font-weight: 700;
	color: var(--color-text);
}
.simplecheckout #total_total .simplecheckout-cart-total-value { color: var(--color-primary); font-size: 18px; }
/* Строка итога без значения (например «Доставка …», пока способ не выбран)
   всё равно резервировала колонку под цену в 110px, и подпись зависала
   левее остальных. Пустые ячейки убираем, подпись прижимаем вправо. */
.simplecheckout .simplecheckout-cart-total:has(> .simplecheckout-cart-total-value:empty) > .simplecheckout-cart-total-value { display: none; }
.simplecheckout .simplecheckout-cart-total:has(> .simplecheckout-cart-total-value:empty) > span:first-child { flex: 1 1 100%; }
.simplecheckout .simplecheckout-cart-total > .simplecheckout-cart-total-remove:not(:has(*)) { display: none; }
.simplecheckout #total_total > span:first-child b { font-weight: 800; color: var(--color-text); }
.simplecheckout .simplecheckout-cart-total-remove { flex: 0 0 auto; }
.simplecheckout .simplecheckout-cart-total-remove .fa { color: var(--color-text-muted); cursor: pointer; }
.simplecheckout .simplecheckout-cart-total-remove .fa:hover { color: var(--color-danger); }

/* Итоги собираются в отдельную плашку — иначе они висят в пустоте
   справа от широкой таблицы товаров. */
.simplecheckout #simplecheckout_cart .simplecheckout-cart-total {
	padding: 9px 18px;
	background: var(--color-surface-sunken);
}
.simplecheckout #simplecheckout_cart .table-responsive + .simplecheckout-cart-total {
	margin-top: 18px;
	padding-top: 15px;
	border-top: 0 !important;
	border-radius: 12px 12px 0 0;
}
.simplecheckout #simplecheckout_cart .simplecheckout-cart-total:last-child {
	padding-bottom: 15px;
	border-radius: 0 0 12px 12px;
}

/* Купон / сертификат / бонусы */
.simplecheckout .simplecheckout-cart-total .inputs {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
	margin-left: 0;
}
.simplecheckout .simplecheckout-cart-total .inputs .form-control {
	flex: 0 0 auto;
	width: 180px !important;
	min-height: 42px;
}
.simplecheckout .simplecheckout-cart-buttons .inputs { justify-content: flex-end; }
.simplecheckout #simplecheckout_button_cart.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--border-radius);
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	font-weight: 600;
	box-shadow: none;
}
.simplecheckout #simplecheckout_button_cart.btn:hover {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

#simplecheckout_comment textarea { border-radius: var(--border-radius) !important; }

/* --- Способы доставки и оплаты, ошибки ---------------------------------- */
.simplecheckout .simplecheckout-methods-description { color: var(--color-text-muted); font-size: 13px; }
.simplecheckout .radio, .simplecheckout .checkbox { margin: 8px 0; }
.simplecheckout .simplecheckout-warning-block,
.simplecheckout .alert {
	padding: 13px 16px !important;
	border-radius: var(--border-radius) !important;
}
.simplecheckout .alert-danger,
.simplecheckout .simplecheckout-warning-block {
	background: rgba(var(--rgb-danger), .07) !important;
	border: 1px solid rgba(var(--rgb-danger), .25) !important;
	color: var(--color-text) !important;
}
.simplecheckout .alert-success { background: rgba(var(--rgb-primary), .1) !important; color: var(--color-text) !important; }
.simplecheckout .simplecheckout-warning-text,
.simplecheckout .simplecheckout-error-text { color: var(--color-danger) !important; font-size: 13px; }
.simplecheckout .simplecheckout-error { border-color: var(--color-danger) !important; }
.simplecheckout .simplecheckout-proceed-payment {
	margin: 16px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text);
	text-align: center;
}

.shipping-free-info {
	display: inline-block;
	margin-top: 15px;
	padding: 14px 16px;
	border: 1px dashed var(--color-primary);
	border-radius: var(--border-radius);
	background: rgba(var(--rgb-primary), .06);
	font-size: 15px;
	line-height: 1.4;
}
.shipping-free-info span { color: var(--color-primary); font-weight: 700; }

/* --- Кнопка «Оформить заказ» -------------------------------------------- */
#simplecheckout_bottom { margin-top: 18px; }
.simplecheckout #buttons,
.simplecheckout .simplecheckout-button-block {
	display: flex;
	justify-content: flex-end;
	/* было 6px — кнопка упиралась в край белой плашки */
	padding: 14px 16px;
	border-radius: var(--border-radius);
}
#simplecheckout_bottom .btn,
#buttons .btn,
.simplecheckout-button-right .btn {
	/* у ссылки-кнопки line-height не совпадал с высотой — текст прижимался вверх */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px !important;
	min-width: 240px;
	padding: 0 34px !important;
	border: 0 !important;
	border-radius: var(--border-radius) !important;
	background: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
#simplecheckout_bottom .btn:hover,
#buttons .btn:hover {
	background: var(--color-primary-dark) !important;
	box-shadow: 0 10px 24px rgba(var(--rgb-primary), .3) !important;
}

.simplecheckout .well {
    padding-top: 20px;
}

.simplecheckout .well p {
    font-size: inherit;
}

/* --- Телефон ------------------------------------------------------------
   Таблица товаров в 4 колонки не влезает в 320–414px: она уезжала в
   горизонтальный скролл, а «−», «+» и «удалить» оставались за краем
   экрана. Раскладываем каждую строку карточкой. */
@media (max-width: 767px) {
	.simplecheckout .table-responsive { overflow: visible !important; border: 0 !important; }
	.simplecheckout .simplecheckout-cart,
	.simplecheckout .simplecheckout-cart tbody,
	.simplecheckout .simplecheckout-cart tbody tr,
	.simplecheckout .simplecheckout-cart tbody td { display: block !important; width: auto !important; }
	.simplecheckout .simplecheckout-cart thead,
	.simplecheckout .simplecheckout-cart colgroup { display: none !important; }
	.simplecheckout .simplecheckout-cart tbody tr {
		position: relative;
		padding: 14px 0;
		border-bottom: 1px solid var(--color-border);
	}
	.simplecheckout .simplecheckout-cart tbody tr:last-child { border-bottom: 0; }
	.simplecheckout .simplecheckout-cart tbody td { padding: 0 !important; border: 0 !important; }
	/* фото и артикул дублируются внутри td.name, цена есть в «итого» */
	.simplecheckout .simplecheckout-cart td.image,
	.simplecheckout .simplecheckout-cart td.model,
	.simplecheckout .simplecheckout-cart td.price,
	.simplecheckout .simplecheckout-cart td.remove { display: none !important; }
	.simplecheckout .simplecheckout-cart td.name { overflow: hidden; text-align: left; }
	/* display: block — simple.css показывает это фото только до 640px, а карточкой
	   строка становится до 767px: на 641–767px фото пропадало */
	.simplecheckout .simplecheckout-cart td.name .image { display: block; float: left; width: 62px; margin: 0 12px 6px 0; }
	.simplecheckout .simplecheckout-cart td.name .image img {
		width: 62px; height: 62px; object-fit: cover;
		border: 1px solid var(--color-border); border-radius: 9px;
	}
	/* у товара без фото блока .image в ячейке названия нет вовсе —
	   рисуем заглушку, чтобы текст всех строк начинался от одной линии */
	.simplecheckout .simplecheckout-cart td.name:not(:has(> .image))::before {
		content: "\f06c";
		font-family: "Font Awesome 7 Free";
		font-weight: 900;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 62px;
		height: 62px;
		margin: 0 12px 6px 0;
		border: 1px solid var(--color-border);
		border-radius: 9px;
		background: var(--color-surface-sunken);
		color: rgba(var(--rgb-primary), .38);
		font-size: 24px;
	}
	.simplecheckout .simplecheckout-cart td.name a { display: block; font-weight: 600; line-height: 1.35; }
	.simplecheckout .simplecheckout-cart td.quantity {
		clear: both;
		display: flex !important;
		align-items: center;
		gap: 12px;
		margin-top: 12px;
		text-align: left;
	}
	.simplecheckout .simplecheckout-cart td.total {
		position: absolute;
		right: 0;
		bottom: 14px;
		font-weight: 700;
		font-size: 15px;
	}
	.simplecheckout .simplecheckout-cart-total { max-width: none !important; }
	.simplecheckout #simplecheckout_cart .simplecheckout-cart-total { padding-left: 14px; padding-right: 14px; }
	.simplecheckout .simplecheckout-cart-total .inputs { flex-wrap: wrap; }
	.simplecheckout .simplecheckout-cart-total .inputs .form-control { flex: 1 1 100%; width: 100% !important; }
	#simplecheckout_bottom .btn,
	#buttons .btn { width: 100%; min-width: 0; }
	/* на узком экране заголовок и «Я зарегистрирован» переносятся */
	.simplecheckout .checkout-heading,
	.simplecheckout .checkout-heading.panel-heading { flex-wrap: wrap; padding: 12px 16px !important; }
	/* название переносится на 2–3 строки, и ярлык вклинивался в середину
	   текста — на телефоне он всегда отдельной строкой под названием */
	.simplecheckout .oos-badge {
		display: flex;
		width: fit-content;
		margin: 6px 0 0;
	}
	#content:has(> .simple-content) > h1 { font-size: 24px; }
}

/* ============================================================
   Модальное окно входа (SimpleCheckout, «Я зарегистрирован»)
   ------------------------------------------------------------
   Окно выносится в конец <body>, поэтому селекторы без .simplecheckout.
   Модуль задавал ему ширину 300px, padding 5px, розовую (!) рамку
   #ffd9ff и не задавал тени; затемнение фона стояло на 0.8 — страница
   под окном полностью пропадала.
   ============================================================ */
#simple_login_layer {
	background: rgba(var(--rgb-black), .55) !important;
	opacity: 1 !important;
}
#simple_login {
	/* центрируем сами: модуль считает позицию под свои 300px */
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 380px !important;
	max-width: calc(100vw - 32px);
	height: auto !important;
	max-height: calc(100vh - 32px);
	margin: 0 !important;
	padding: 0 !important;
	overflow: auto !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 16px !important;
	background: var(--color-surface) !important;
	box-shadow: 0 24px 60px rgba(var(--rgb-black), .22) !important;
}
#simple_login #simplecheckout_login.simplecheckout-block { margin: 0 !important; }
#simple_login .simplecheckout-block-content {
	padding: 22px 26px 26px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* Кнопка закрытия. В разметке это <img> с растровым крестиком; трогать её
   нельзя — на ней висит обработчик, поэтому оставляем кликабельной,
   но прозрачной, а крестик рисуем шрифтом. */
#simple_login_header {
	position: relative;
	min-height: 30px;
	margin: 0 0 6px;
	text-align: right;
}
#simple_login_header img {
	position: relative;
	z-index: 2;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	opacity: 0 !important;
	cursor: pointer;
}
#simple_login_header::after {
	content: "\f00d";
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	color: var(--color-text-subtle);
	pointer-events: none;
	transition: color .2s ease, background-color .2s ease;
}
#simple_login_header:hover::after {
	color: var(--color-text);
	background: var(--color-surface-sunken);
}

#simple_login .form-group { margin-bottom: 16px; }
#simple_login .control-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 7px;
	padding: 0;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}
#simple_login .form-control {
	width: 100%;
	height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	box-shadow: none;
}
#simple_login .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}
#simple_login .form-group a {
	display: inline-block;
	margin-top: 10px;
	border-bottom: 1px dashed var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: 13px;
	text-decoration: none;
	transition: color .25s ease, border-color .25s ease;
}
#simple_login .form-group a:hover {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}
#simple_login #simplecheckout_button_login.btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--border-radius);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
	transition: background-color .25s ease, box-shadow .25s ease;
}
#simple_login #simplecheckout_button_login.btn:hover {
	background: var(--color-primary-dark);
	box-shadow: 0 8px 20px rgba(var(--rgb-primary), .28);
}

/* ============================================================
   Рекомендуемые категории (featuredcategory) — тайлы
   ============================================================ */
.cate-pro .fc-grid { margin-top: 6px; }
.cate-pro .product-layout { margin-bottom: 24px; }

.cate-pro .fc-tile {
	display: flex; flex-direction: column; height: 100%;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: 18px; overflow: hidden; text-decoration: none;
	box-shadow: 0 2px 10px rgba(var(--rgb-black), .04);
}
.cate-pro .fc-tile:hover { border-color: var(--color-primary); }

.cate-pro .fc-stage {
	position: relative; display: flex; align-items: center; justify-content: center;
	padding: 18px; min-height: 170px; aspect-ratio: 1 / 1;
	background: radial-gradient(120% 120% at 50% 35%, var(--color-surface-sunken) 0%, var(--color-surface) 70%);
}
.cate-pro .fc-stage img {
	max-height: 80%; max-width: 86%; width: auto; height: auto; margin: 0 auto;
	filter: drop-shadow(0 6px 10px rgba(var(--rgb-black), .07));
}

.cate-pro .fc-cap { padding: 14px 10px 16px; text-align: center; }
.cate-pro .fc-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--color-text); }
.cate-pro .fc-name::after {
	content: ""; display: block; width: 24px; height: 2px; margin: 8px auto 0;
	background: var(--color-border); border-radius: 2px;
}
.cate-pro .fc-tile:hover .fc-name { color: var(--color-primary); }
.cate-pro .fc-tile:hover .fc-name::after { background: var(--color-primary); }

/* Плитки одинаковой высоты + подпись всегда прижата к низу */
.cate-pro .row {
	display: flex;
	flex-wrap: wrap;
}
/* Тот же ритм, что в сетке товаров: 10px между плитками.
   Только от 768px — на мобильном плитки намеренно идут стык в стык. */
@media (min-width: 768px) {
	.cate-pro .row {
		margin-left: -5px;
		margin-right: -5px;
	}
	.cate-pro .product-layout {
		padding: 5px;
		margin-bottom: 0;
	}
}
.cate-pro .product-layout {
	display: flex;
	float: none;
}
.cate-pro .product-layout .product-thumb {
	width: 100%;
	margin-bottom: 0;
}
.cate-pro .product-thumb .image {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cate-pro .item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 8px 12px;
}
.cate-pro .item h4 {
	margin: 0;
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* ============================================================
   Алерты Bootstrap — палитра сайта (глобально)
   ============================================================ */
.alert {
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: var(--color-text);
	box-shadow: none;
}
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.alert .close { color: var(--color-text); opacity: .45; text-shadow: none; }
.alert .close:hover { opacity: .8; }

.alert-success { background: rgba(var(--rgb-primary), .09); border-color: rgba(var(--rgb-primary), .3); }
.alert-info    { background: var(--color-surface-sunken);   border-color: var(--color-border-strong); }
.alert-warning { background: rgba(200, 146, 42, .1);        border-color: rgba(200, 146, 42, .3); }
.alert-danger  { background: rgba(var(--rgb-danger), .07);  border-color: rgba(var(--rgb-danger), .25); }

/* ============================================================
   ocFilter — приводим к палитре и ритму шаблона.
   Плагин приносит свои холодные серые (#353535, #444, #eee, #eceef2),
   поэтому часть правил перекрываем по специфичности, часть — !important.
   ============================================================ */
.ocf-content .ocf-filter-header,
.ocf-content .ocf-filter-name,
.ocf-content .ocf-value-name,
.ocf-content .ocf-value,
.ocf-content .ocf-form-control {
	color: var(--color-text);
}
.ocf-content .ocf-form-control {
	border-color: var(--color-border);
}
.ocf-content .ocf-input-group-addon {
	background: var(--color-surface-sunken);
	border-color: var(--color-border);
	color: var(--color-text-muted);
}
.ocf-content .ocf-filter {
	border-color: var(--color-border) !important;
}
.ocf-content .ocf-noUi-pips {
	color: var(--color-text-subtle);
}
.ocf-content .ocf-noUi-marker {
	background: var(--color-border-strong);
}
/* !important: у плагина есть более специфичное правило .ocf-theme-light .ocf-search-btn-static */
.ocf-content .ocf-btn.ocf-disabled {
	background-color: var(--color-border-strong) !important;
	color: var(--color-text-muted) !important;
}

@media (max-width: 767px) {
	/* Шапка списка фильтров и шапка открытого списка значений — один и тот же вид */
	.ocf-content .ocf-header,
	.ocf-content .ocf-filter.ocf-open .ocf-filter-header {
		/* height, а не min-height: плагин задаёт .ocf-open .ocf-filter-header{height:60px},
		   из-за чего шапка списка значений была на 12px выше шапки списка фильтров */
		height: 52px;
		box-sizing: border-box;
		padding: 0 16px;
		background: var(--color-primary);
		color: var(--color-text-inverse);
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .4px;
	}
	.ocf-content .ocf-filter {
		padding: 2px 16px;
	}
	/* Фон непрозрачный: этот список перекрывает собой список фильтров */
	.ocf-content .ocf-filter-body > .ocf-value-list {
		background: var(--color-surface-alt) !important;
		/* верхний отступ обязателен: без него содержимое (особенно поля цены)
		   прилипает вплотную к зелёной шапке */
		padding: 10px 16px 16px !important;
	}

	/* Кнопка применения — во всю ширину панели, а не прижата вправо */
	.ocf-content .ocf-btn-search-slider {
		margin-top: 14px;
		text-align: left;
	}
	.ocf-content .ocf-btn-search-slider .ocf-btn {
		width: 100%;
	}
	/* Строка значения повторяет строку фильтра: та же высота 49px, те же 16px до контента,
	   разделитель во всю ширину панели. Отрицательные поля выводят строку за padding списка,
	   ширину при этом надо задать явно — у плагина на .ocf-value стоит width:100%. */
	.ocf-content .ocf-value-list-body .ocf-value {
		margin: 0 -16px !important;
		width: calc(100% + 32px) !important;
		padding: 12px 16px !important;
		border-bottom: 1px solid var(--color-border);
	}
	.ocf-content .ocf-value-list-body .ocf-value:last-child {
		border-bottom: 0;
	}

	/* Иконки плагина — SVG в background-image, цвет задаётся только фильтром */
	.ocf-content .ocf-filter-header .ocf-icon {
		filter: brightness(0);
		opacity: .75;
	}
	.ocf-content .ocf-header .ocf-icon,
	.ocf-content .ocf-filter.ocf-open > .ocf-filter-body > .ocf-filter-header .ocf-icon {
		filter: brightness(0) invert(1);
		opacity: 1;
	}

	/* Боковая кнопка «Фильтр»: плагин красит её в --color-warning из своих настроек
	   (ocf.cache.*.css грузится после этого файла), поэтому нужен лишний класс по специфичности. */
	.ocf-btn-mobile-fixed .ocf-btn.ocf-btn-default {
		background-color: var(--color-primary);
		color: var(--color-text-inverse);
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}
}

/* ============================================================
   Подкатегории под h1 и панель сортировки — мобильная раскладка
   ============================================================ */
@media (max-width: 767px) {
	/* Подкатегории: одна строка с горизонтальной прокруткой вместо пяти рядов */
	.refines {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 0 14px;
		padding-bottom: 2px;
		scrollbar-width: none;
		/* Подсказка, что ряд листается: правый край растворяется.
		   mask применяется к боксу, а не к содержимому, поэтому при прокрутке остаётся на месте. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
	}
	.refines::-webkit-scrollbar {
		display: none;
	}
	.refines .product-layout {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0 6px 0 0;
	}

	/* Сортировка и «Показать» — в один ряд.
	   Селектор с .row нужен по специфичности: выше в файле есть
	   @media (max-width:767px){ .cate-border .catesort { flex: 1 1 100% } } */
	.row.cate-border {
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		padding: 10px 12px;
	}
	/* Bootstrap вешает на .row клирфиксы ::before/::after, а во flex-контейнере
	   они становятся полноценными flex-элементами и съедают один gap слева. */
	.row.cate-border::before,
	.row.cate-border::after {
		display: none;
	}
	.row.cate-border > [class*="col-"] {
		width: auto;
		max-width: none;
		padding: 0;
	}
	.row.cate-border .catesort {
		min-width: 0;
	}
	/* Не :nth-of-type — он считает среди всех div-ов, а первым идёт блок сравнения,
	   из-за чего «Показать» выпадал в отдельную строку, а «Сортировка» съезжала на gap. */
	/* Доли задаём через flex-grow, а не через basis в процентах:
	   62% + 38% + gap не помещаются в строку и переносятся. */
	.row.cate-border .catesort:has(#input-sort) {
		flex: 62 1 0;
	}
	.row.cate-border .catesort:has(#input-limit) {
		flex: 38 1 0;
	}
	.row.cate-border .select-input {
		width: 100%;
	}
	/* Подписи прячем — значения в списках читаются без них */
	.row.cate-border .select-input .input-group-addon {
		display: none;
	}
	.row.cate-border .select-input select.form-control {
		width: 100%;
		border-radius: var(--border-radius);
	}
	/* Ссылку сравнения уводим под селекты */
	.row.cate-border > [class*="col-"]:first-child {
		flex: 1 1 100%;
		order: 2;
	}
	.row.cate-border > [class*="col-"]:first-child .btn-link {
		font-size: 13px;
	}
}

/* ============================================================
   Строка пагинации: отделена от сетки, стрелки — шевроны,
   на мобильном одна прокручиваемая строка
   ============================================================ */
.pagi {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}
/* клирфиксы .row во flex-контейнере становятся элементами и съедают gap */
.pagi::before,
.pagi::after {
	display: none;
}
.pagi > [class*="col-"] {
	width: auto;
	padding: 0;
}
.pagi > .text-left {
	flex: 1 1 auto;
	min-width: 0;
}
.pagi > .text-right {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--color-text-muted);
}
.pagination {
	margin: 0;
}

/* Стрелки. OpenCart печатает их текстом (|<  <  >  >|) и не даёт классов,
   поэтому классы навешивает скрипт в custom.js, а сам символ прячем. */
.pagination > li > a.page-nav {
	font-size: 0;
}
.pagination > li > a.page-nav::after {
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 1;
}
.pagination > li > a.page-first::after { content: "\f100"; }
.pagination > li > a.page-prev::after  { content: "\f104"; }
.pagination > li > a.page-next::after  { content: "\f105"; }
.pagination > li > a.page-last::after  { content: "\f101"; }

@media (max-width: 767px) {
	.pagi {
		flex-wrap: wrap;
		gap: 0;
		margin-top: 18px;
		padding-top: 16px;
	}
	.pagi > .text-left {
		flex: 1 1 100%;
	}
	.pagi > .text-right {
		flex: 1 1 100%;
		margin-top: 12px;
		text-align: left;
	}
	.pagination {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* отступ слева, чтобы первую страницу не перекрывала кнопка «Фильтр» */
		padding-left: 36px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
	}
	.pagination::-webkit-scrollbar {
		display: none;
	}
	.pagination > li {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   ОТЗЫВЫ (модуль «Расширенные отзывы»)
   --------------------------------------------------------------------------
   Свой CSS модуль подключает ПОСЛЕ stylesheet.css, поэтому все переопределения
   ниже идут с префиксом #tab-review — при равной специфичности выигрывал бы
   модуль, просто потому что его файл ниже в <head>.

   Разметка модуля (для ориентира):
     #review-extended
       .fl-l.pd-0 > select#input-sort      — сортировка
       .fl-r.pd-0 > a.to-write-review      — кнопка «Написать отзыв»
       .review-container                   — карточка отзыва
         .review-title-container           — имя, звёзды, дата
         .review-text-container            — текст
         .review-media-container           — фото/видео к отзыву
         .review-container-footer          — «Ответить» + голоса
         .review-answer-container          — форма ответа (#form-answer-review)
       form#form-review > .user-review-write-block  — форма нового отзыва
   ========================================================================== */

/* Контейнер вкладки. Раньше вокруг всего списка была рамка — она осталась от
   родного OpenCart-списка отзывов. Здесь каждый отзыв уже карточка, рамка
   вокруг рамок читается как двойная обводка. */
#product-product #tab-review #review {
	margin-bottom: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* --- Шапка списка: сортировка + «Написать отзыв» ------------------------
   Модуль верстает их двумя col-md-5 с float. Держать по 41% ширины незачем:
   селект занимает свою ширину, кнопка прижимается вправо. */
#review-extended > .fl-l.pd-0,
#review-extended > .fl-r.pd-0 {
	width: auto;
	max-width: 50%;
	margin-bottom: 18px;
}
#review-extended > .fl-l.pd-0 .form-group {
	width: auto;
	margin: 0;
}
#review-extended #input-sort.form-control {
	width: auto;
	min-width: 210px;
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	box-shadow: none;
	/* своя стрелка вместо системной: у системной высота и отступы зависят от ОС */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
	                  linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
#review-extended #input-sort.form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}

/* --- Карточка отзыва ----------------------------------------------------
   Была серая плашка-шапка во всю ширину карточки (.review-title-container
   с фоном --gray-50) — из-за неё список выглядел таблицей. Имя, звёзды и
   дата спокойно живут на белом. */
#tab-review .review-container {
	margin-bottom: 14px;
	padding: 20px 22px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	box-shadow: none;
}
#tab-review .review-title-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	background: transparent;
	overflow: visible;
}
#tab-review .review-author {
	float: none;
	position: relative;
	margin: 0;
	padding-left: 12px;
}
/* Зелёная засечка слева от имени — тот же приём, что у карточек на главной
   (.ha-card h3::before). Связывает блок с остальным сайтом. */
#tab-review .review-author::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	border-radius: 2px;
	background: var(--color-primary);
}
#tab-review .review-author-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}
#tab-review .rating-container {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	line-height: 1;
}
/* Незаполненные звёзды в карточке отзыва модуль помечает .star-gray, но
   правило `#tab-review .fa-stack-2x {color: accent !important}` красило
   золотом все пять — оценка в 3 звезды выглядела как пятёрка. */
#tab-review .rating-container .star-gray {
	color: var(--color-border-strong) !important;
}
#tab-review .review-date {
	float: none;
	margin-left: auto;
	color: var(--color-text-subtle);
	font-size: 13px;
	line-height: 1.3;
}
#tab-review .review-text-container {
	padding-top: 0;
}
#tab-review .comment-text {
	padding-top: 12px;
	color: var(--color-text);
	font-size: 15px;
	line-height: 1.7;
}
#tab-review .comment-text p {
	margin: 0 0 8px;
	line-height: 1.7;
}
#tab-review .comment-text p:last-child {
	margin-bottom: 0;
}
/* Достоинства / недостатки, если заполнены */
#tab-review .comment-text .plus,
#tab-review .comment-text .minus {
	font-weight: 600;
}
#tab-review .comment-text .plus {
	color: var(--color-success);
}
#tab-review .comment-text .minus {
	color: var(--color-danger);
}
/* Модуль ставит <hr> в конце текста отзыва (внутри .comment-text). Роль
   разделителя берёт на себя верхняя граница подвала карточки. */
#tab-review .comment-text hr {
	display: none;
}
/* Пустой контейнер под фото/видео давал 20px воздуха на ровном месте */
#tab-review .review-media-container:empty {
	margin: 0;
}

/* --- Подвал карточки: «Ответить» + голоса ------------------------------- */
#tab-review .review-container-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}

/* «Спасибо за оценку, ваш голос учтён» после клика по пальцу.
   Блок лежит в подвале карточки, а подвал — flex-строка, поэтому
   сообщение зажималось в остаток свободного места: на телефоне
   получалась колонка в одно слово с обрезанным текстом. Отдаём ему
   всю строку целиком (margin слева модуль ставит в 293px — сбрасываем). */
#tab-review .review_note {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0 !important;
	padding: 9px 14px;
	border-radius: var(--border-radius);
	/*background: rgba(var(--rgb-primary), .08);*/
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 600;
}
#tab-review .review_note:empty { display: none; }
#tab-review .review_note .fa { font-size: 12px; }
/* «Ответить» стоит в разметке ПОСЛЕ голосов; во flex-строке возвращаем его
   влево порядком, а не float — float ломает выравнивание по вертикали. */
#tab-review .review-container-footer .review-answer-button.btn {
	order: -1;
	float: none;
	height: 32px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 30px;
	box-shadow: none;
	transition: color .25s ease, border-color .25s ease;
}
#tab-review .review-container-footer .review-answer-button.btn:hover {
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}
#tab-review .review-answer-button .fa {
	margin-right: 6px;
	font-size: 12px;
}
#tab-review .review-rating-change-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 0;
}
#tab-review .review-rating-change-buttons .fa-custom-lg {
	width: auto;
	font-size: 17px;
	line-height: 1;
}
#tab-review .change-rating-button,
#tab-review .change-rating-button.br-r {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-right: 0;   /* чёрточка-разделитель между «за» и «против» не нужна */
	border-radius: var(--radius-pill);
	transition: background-color .25s ease;
}
#tab-review .change-rating-button:hover {
	background: var(--color-surface-sunken);
}
#tab-review .review-vote-positive,
#tab-review .review-vote-negative {
	display: inline-flex;
	color: var(--color-text-subtle);
	transition: color .25s ease;
}
#tab-review .review-vote-positive:hover {
	color: var(--color-success);
}
#tab-review .review-vote-negative:hover {
	color: var(--color-danger);
}
#tab-review .review-vote-count {
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Опубликованный ответ магазина внутри карточки отзыва */
#tab-review .review-answer-container .review-container {
	margin: 14px 0 0;
	padding: 14px 16px;
	border: 0;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 10px 10px 0;
	background: var(--color-surface-sunken);
}

/* --- Панель «Написать отзыв» -------------------------------------------- */
#tab-review .user-review-write-block {
	margin-top: 26px;
	padding: 28px 26px 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-surface-alt);
}
#tab-review .user-review-write-block h2 {
	margin: 0 0 4px;
	color: var(--color-text);
	font-size: 22px;
	font-weight: 800;
	text-align: center;
}

/* Звёзды оценки.
   1. Размер модуль задаёт как 3.5em с !important — перебиваем тем же.
   2. Серый цвет он берёт из --gray-250, которой в палитре больше нет:
      значение невалидное, свойство обнуляется, и звёзды рисовались цветом
      текста — почти чёрными. */
#tab-review #super-stars.add-review-star-wrap {
	gap: 6px;
	margin: 14px auto 4px;
}
#tab-review #super-stars .star-block {
	width: 78px;
	padding: 6px 0 8px;
	border-radius: 10px;
	transition: background-color .25s ease;
}
#tab-review #super-stars .star-block:hover {
	background: rgba(var(--rgb-primary), .07);
}
#tab-review #super-stars .star-block .fa.star-3x {
	font-size: 36px !important;
	line-height: 1.1;
}
/* Выбранную оценку модуль помечает классом .star-active на .star-block и
   красит правилом `.star-active .fa`. Оно слабее любого нашего селектора с
   #tab-review, поэтому серый цвет обязан стоять только на НЕвыбранных
   звёздах — иначе выбор визуально не фиксируется. */
#tab-review #super-stars .star-block:not(.star-active) .fa.star-gray,
#tab-review #super-stars > div:hover ~ div .fa::before {
	color: var(--color-border-strong);
}
#tab-review #super-stars .star-block.star-active .fa {
	color: var(--color-accent);
}
#tab-review #super-stars .star-block.star-active .super-star-text {
	color: var(--color-text);
	font-weight: 600;
}
#tab-review .super-star-text {
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0;
}

/* Поля обеих форм — нового отзыва и ответа на отзыв.
   В модуле часть подписей обычные (слева), часть — .control-label из
   bootstrap-horizontal (справа). Приводим к одному виду. */
#tab-review #form-review .form-group,
#tab-review #form-answer-review .form-group {
	margin-bottom: 16px;
}
#tab-review #form-review label,
#tab-review #form-review label.control-label,
#tab-review #form-answer-review label,
#tab-review #form-answer-review label.control-label {
	display: block;
	width: auto;
	margin: 0 0 7px;
	padding: 0;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}
#tab-review #form-review .form-control,
#tab-review #form-answer-review .form-control {
	height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	box-shadow: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}
#tab-review #form-review textarea.form-control,
#tab-review #form-answer-review textarea.form-control {
	height: auto;
	min-height: 128px;
	line-height: 1.6;
	resize: vertical;
}
#tab-review #form-answer-review textarea.form-control {
	min-height: 110px;
}
#tab-review #form-review .form-control:focus,
#tab-review #form-answer-review .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}
#tab-review #form-review .form-control::placeholder,
#tab-review #form-answer-review .form-control::placeholder {
	color: var(--color-text-subtle);
}

/* Фото и видео. Плитки были маленькие и серые — делаем их пунктирными
   «зонами добавления», как принято в загрузчиках. Иконки внутри нарисованы
   через currentColor, поэтому на ховере зеленеют вместе с подписью. */
#tab-review .reviews-user-add-content-block {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin: 4px 0 18px;
}
#tab-review .review-media-add-block {
	float: none;
	margin: 0;
}
#tab-review .btn-link-review {
	border: 1px dashed var(--color-border-strong);
	border-radius: 10px;
	background: var(--color-surface);
	transition: border-color .25s ease, background-color .25s ease;
}
#tab-review .btn-link-review:hover {
	border-color: var(--color-primary);
	background: rgba(var(--rgb-primary), .05);
}
#tab-review .btn-link-review .btn-link-i {
	width: 86px;
	padding: 44px 0 11px;
	color: var(--color-text-muted);
}
#tab-review .review-media-text-block {
	flex: 1 1 240px;
	max-width: 340px;
	padding: 0;
	color: var(--color-text-muted);
	font-size: 13.5px;
	line-height: 1.5;
}
/* Рисованная стрелка от подсказки к плиткам — единственный «скетчевый»
   элемент на сайте, выбивается из оформления. */
#tab-review #arrow-left-soft {
	display: none;
}

/* --- Кнопки модуля ------------------------------------------------------
   .btn-blue / .btn-green / .btn-cancel красятся переменными --brown-700 и
   --gray-920 из старой палитры. Их больше нет, и значения невалидны:
   кнопка «Оставить отзыв» была белым текстом на прозрачном фоне, то есть
   попросту невидимой. Красим явно. */
#tab-review .review-form-write-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}
#tab-review .btn.btn-blue,
#tab-review a.btn.btn-blue,
#tab-review .btn.btn-green,
.mfp-content .btn.btn-blue,
.mfp-content .btn.btn-green {
	float: none;
	min-width: 190px;
	height: 46px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: var(--border-radius);
	background-color: var(--color-primary);
	color: var(--color-text-inverse) !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 46px;
	box-shadow: none;
	transition: background-color .25s ease, box-shadow .25s ease;
}
#tab-review .btn.btn-blue:hover,
#tab-review .btn.btn-blue:focus,
#tab-review .btn.btn-blue:active,
#tab-review a.btn.btn-blue:hover,
#tab-review .btn.btn-green:hover,
#tab-review .btn.btn-green:active,
.mfp-content .btn.btn-blue:hover,
.mfp-content .btn.btn-green:hover {
	background-color: var(--color-primary-dark);
	box-shadow: 0 8px 20px rgba(var(--rgb-primary), .28);
}
/* «Написать отзыв» в шапке списка — та же .btn-blue, но компактнее */
#tab-review a.btn.btn-blue.to-write-review {
	float: right;
	min-width: 0;
	height: 40px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 40px;
}
#tab-review .to-write-review .fa {
	margin-right: 7px;
	font-size: 13px;
}
/* «Отмена» была залита красным (--danger) — как будто отмена это ошибка.
   Делаем нейтральной. Цвет текста в модуле стоит с !important. */
#tab-review .btn.btn-cancel,
.mfp-content .btn.btn-cancel {
	float: left;
	height: 46px;
	min-width: 130px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--border-radius);
	background: transparent;
	color: var(--color-text-muted) !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 44px;
	box-shadow: none;
	transition: color .25s ease, border-color .25s ease;
}
#tab-review .btn.btn-cancel:hover,
#tab-review .btn.btn-cancel:focus,
#tab-review .btn.btn-cancel:active,
.mfp-content .btn.btn-cancel:hover {
	border-color: var(--color-text-muted);
	background: transparent;
	color: var(--color-text) !important;
	box-shadow: none;
}

/* --- Форма ответа на отзыв ---------------------------------------------- */
#tab-review #form-answer-review {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--color-border-strong);
}
/* кнопки внутри неё — прямые дети <form> с float, форму нужно замкнуть */
#tab-review #form-answer-review::after {
	content: "";
	display: block;
	clear: both;
}
#tab-review #form-answer-review .btn.btn-blue.fl-r {
	float: right;
}

/* --- Планшет и телефон --------------------------------------------------- */
@media (max-width: 767px) {
	#review-extended > .fl-l.pd-0,
	#review-extended > .fl-r.pd-0 {
		float: none;
		width: 100%;
		max-width: none;
		margin-bottom: 12px;
	}
	#review-extended #input-sort.form-control {
		width: 100%;
		min-width: 0;
	}
	#tab-review a.btn.btn-blue.to-write-review {
		float: none;
		display: block;
		width: 100%;
	}
	#tab-review .review-container {
		padding: 16px;
	}
	/* дата уходит на свою строку под именем — иначе на 320px она жмёт звёзды */
	#tab-review .review-date {
		flex: 1 1 100%;
		margin-left: 12px;
	}
	#tab-review .user-review-write-block {
		padding: 22px 16px 18px;
	}
	/* пять звёзд по 20% ширины — влезают и на 320px */
	#tab-review #super-stars.add-review-star-wrap {
		gap: 0;
		width: 100%;
	}
	#tab-review #super-stars .star-block {
		width: 20%;
	}
	#tab-review #super-stars .star-block .fa.star-3x {
		font-size: 28px !important;
	}
	#tab-review .super-star-text {
		font-size: 10.5px;
	}
	#tab-review .btn.btn-blue,
	#tab-review .btn.btn-green,
	#tab-review .btn.btn-cancel,
	#tab-review #form-answer-review .btn.btn-blue.fl-r {
		float: none;
		width: 100%;
		min-width: 0;
	}
	#tab-review .btn.btn-cancel,
.mfp-content .btn.btn-cancel {
		margin-top: 10px;
	}
}

/* ============================================================
   ИНФОРМАЦИОННЫЕ СТРАНИЦЫ
   (О компании, Доставка и оплата, Политика безопасности и т.п.)

   Текст приходит из WYSIWYG, разметка непредсказуема, поэтому стили
   заданы по тегам внутри #content, а не по классам. Область действия —
   только route=information/information, чтобы не задеть остальные
   страницы, которые тоже рисуются в #content.

   Ширину не ограничиваем: рядом стоит левая колонка, текст занимает
   оставшуюся часть сетки целиком.
   ============================================================ */

/* Вставленный из редактора .container имеет фиксированную width (1580px)
   и вылезал бы за пределы колонки контента. */
#information-information #content .container {
	width: auto;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#information-information #content {
	padding-bottom: 52px;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.75;
}

/* Заголовок страницы — тем же приёмом, что заголовки блоков на сайте:
   слева акцентная черта, выключка влево. По центру он висел в пустоте. */
#information-information h1.heading,
#information-information h1.heading.text-center {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 28px;
	text-align: left;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.2px;
	color: var(--color-text);
}
#information-information h1.heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	min-height: 28px;
	border-radius: 2px;
	background: var(--color-primary);
}
#information-information h1.heading::after {
	display: none;   /* старое подчёркивание по центру */
}
#information-information h1.heading span {
	display: inline;
}

/* --- Типографика содержимого ------------------------------------------- */
#information-information #content h2,
#information-information #content h3,
#information-information #content h4,
#information-information #content h5 {
	color: var(--color-text);
	font-weight: 800;
	line-height: 1.3;
}
#information-information #content h2 {
	margin: 36px 0 12px;
	font-size: 24px;
}
#information-information #content h3 {
	margin: 30px 0 10px;
	font-size: 20px;
}
#information-information #content h4,
#information-information #content h5 {
	margin: 24px 0 8px;
	font-size: 17px;
	font-weight: 700;
}
/* Второй h1 внутри текста — ошибка вёрстки контента, но пока он есть,
   пусть хотя бы выглядит как подзаголовок, а не спорит с заголовком страницы. */
#information-information #content h1:not(.heading) {
	margin: 34px 0 12px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
}
#information-information #content p {
	margin: 0 0 15px;
}
#information-information #content > *:first-child {
	margin-top: 0;
}
#information-information #content strong,
#information-information #content b {
	font-weight: 700;
	color: var(--color-text);
}

/* Списки: свои маркеры вместо браузерных — точка в цвет бренда,
   номера в кружке. */
#information-information #content ul,
#information-information #content ol {
	margin: 0 0 18px;
	padding-left: 0;
	list-style: none;
	counter-reset: infolist;
}
#information-information #content li {
	position: relative;
	margin-bottom: 9px;
	padding-left: 26px;
}
#information-information #content ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
}
#information-information #content ol > li {
	counter-increment: infolist;
}
#information-information #content ol > li::before {
	content: counter(infolist);
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(var(--rgb-primary), .12);
	color: var(--color-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
#information-information #content li > ul,
#information-information #content li > ol {
	margin: 9px 0 0;
}

#information-information #content a {
	color: var(--color-primary);
	border-bottom: 1px solid rgba(var(--rgb-primary), .35);
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}
#information-information #content a:hover {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary-dark);
}

/* Фон страницы — --color-surface-alt, поэтому выделенные блоки делаем
   белыми с рамкой: на surface-alt они были бы не видны. */
#information-information #content blockquote {
	margin: 24px 0;
	padding: 18px 22px;
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 12px 12px 0;
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 16px;
}
#information-information #content blockquote p:last-child {
	margin-bottom: 0;
}

#information-information #content img {
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border-radius: 12px;
}
#information-information #content hr {
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

#information-information #content table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
}
#information-information #content table th,
#information-information #content table td {
	padding: 11px 14px;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
#information-information #content table th {
	background: var(--color-surface-sunken);
	font-weight: 700;
}
#information-information #content .table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Bootstrap-обёртки, которые часто прилетают из редактора ------------- */
#information-information #content .lead {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text-muted);
}
#information-information #content .text-muted {
	color: var(--color-text-muted);
}
#information-information #content .well,
#information-information #content .panel,
#information-information #content .alert {
	margin: 0 0 20px;
	padding: 20px 22px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	box-shadow: none;
	color: var(--color-text);
}
#information-information #content .panel > .panel-body,
#information-information #content .panel > .panel-heading {
	padding: 0;
	border: 0;
	background: transparent;
}
#information-information #content .panel > .panel-heading {
	margin-bottom: 10px;
	font-weight: 700;
}
#information-information #content .alert-success {
	border-color: rgba(var(--rgb-primary), .35);
	background: rgba(var(--rgb-primary), .07);
}
#information-information #content .alert-danger,
#information-information #content .alert-warning {
	border-color: rgba(var(--rgb-danger), .3);
	background: rgba(var(--rgb-danger), .06);
}
#information-information #content .well p:last-child,
#information-information #content .panel p:last-child,
#information-information #content .alert p:last-child {
	margin-bottom: 0;
}

/* Инлайновые font-family/font-size из редактора (наследие вставки из Word
   и Google Docs) ломают типографику страницы. Гасим только у span: абзацы
   и заголовки с осмысленным инлайновым оформлением не трогаем. */
#information-information #content span[style] {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	background-color: transparent !important;
}

/* --- Телефон ------------------------------------------------------------ */
@media (max-width: 767px) {
	#information-information #content {
		font-size: 15px;
	}
	#information-information h1.heading,
	#information-information h1.heading.text-center {
		margin: 4px 0 20px;
		font-size: 24px;
	}
	#information-information #content h2 {
		margin: 28px 0 10px;
		font-size: 20px;
	}
	#information-information #content h3 {
		margin: 24px 0 8px;
		font-size: 18px;
	}
	#information-information #content .well,
	#information-information #content .panel,
	#information-information #content .alert,
	#information-information #content blockquote {
		padding: 16px;
	}
	/* таблица из редактора с фиксированными ширинами уезжает в свой скролл,
	   страница по горизонтали не едет */
	#information-information #content table {
		display: block;
		overflow-x: auto;
	}
}

/* ============================================================
   Правки после проверки на телефоне
   ============================================================ */

/* --- Плитки категорий: длинные названия упирались в края --------------
   .cate-pro .item — flex-контейнер, а у flex-элемента min-width по
   умолчанию равен min-content. «СОПУТСТВУЮЩИЕ» шире колонки, поэтому
   заголовок вылезал за плитку вместо того, чтобы переноситься.
   Снимаем min-width и на узких экранах уменьшаем кегль так, чтобы самое
   длинное слово помещалось целиком и не рвалось посередине. */
.cate-pro .item h4 {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}
@media (max-width: 575px) {
	.cate-pro .item {
		padding: 0 6px 12px;
	}
	.cate-pro .item h4 {
		font-size: 11px;
		letter-spacing: 0;
	}
}

/* --- Стрелки каруселей ------------------------------------------------
   Были полупрозрачной белой заливкой без рамки и вплотную к следующему
   блоку. Делаем аккуратные кружки в общем стиле сайта и добавляем воздух
   снизу, чтобы они не липли к разделительной линии. */
.next-prevb .owl-controls,
.spe-pro .owl-controls,
.lat-pro .owl-controls,
.cate-pro .owl-controls {
	margin: 18px 0 26px;
}
.next-prevb .owl-theme .owl-controls .owl-buttons div.owl-prev,
.next-prevb .owl-theme .owl-controls .owl-buttons div.owl-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 6px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: 15px;
	opacity: 1;
	box-shadow: none;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.next-prevb .owl-theme .owl-controls .owl-buttons div.owl-prev:hover,
.next-prevb .owl-theme .owl-controls .owl-buttons div.owl-next:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-text-inverse);
}
.next-prevb .owl-theme .owl-controls .owl-buttons div i {
	font-size: 17px !important;
	color: inherit;
	margin: 0 !important;
}
.next-prevb .owl-theme .owl-controls .owl-buttons div:hover i {
	color: inherit;
}

/* ============================================================
   Сообщения об ошибках в отзывах
   ------------------------------------------------------------
   Модуль дописывает <div class="review-alert alert-danger"> внутрь
   .review-form-write-footer и .review_note — а это flex-строки, поэтому
   сообщение зажималось в остаток места рядом с кнопкой и на телефоне
   рассыпалось в колонку по одному слову. Отдаём ему всю строку и ставим
   ПЕРЕД кнопкой: ошибку читают до того, как жать «Отправить» ещё раз.
   ============================================================ */
#tab-review .review-form-write-footer { flex-wrap: wrap; }
.review-alert {
	flex: 1 1 100%;
	order: -1;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px !important;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--border-radius);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
}
.review-alert .fa { margin-top: 2px; font-size: 13px; }
.review-alert.alert-danger  { background: rgba(var(--rgb-danger), .08); color: var(--color-danger); }
.review-alert.alert-warning { background: rgba(200, 146, 42, .12);      color: var(--color-warning); }
.review-alert.alert-success { background: rgba(var(--rgb-primary), .1); color: var(--color-primary); }

/* ============================================================
   Превью видео при добавлении к отзыву
   ------------------------------------------------------------
   Модуль верстает превью флоатами: миниатюра 120×90 слева, заголовок в
   колонке 160px со сдвигом margin-left:130px. На телефоне колонка
   схлопывалась и название шло по одному слову. Делаем строку-карточку.
   ============================================================ */
#video-thumb-preview {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#video-thumb-preview .vd-prev {
	display: flex !important;
	float: none !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 !important;
	padding: 10px !important;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-surface);
	overflow: visible !important;
}
#video-thumb-preview .vd-thumb-vrapper {
	position: relative;
	flex: 0 0 auto;
	float: none !important;
	width: 112px !important;
	height: 63px !important;
	border-radius: 8px;
	background: var(--color-surface-sunken);
	overflow: hidden;
}
/* YouTube отдаёт default.jpg в 4:3 с чёрными полями — обрезаем до 16:9 */
#video-thumb-preview .vd-thumb-vrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#video-thumb-preview .vd-thumb-vrapper::after {
	content: "\f04b";               /* fa-play */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	padding-left: 2px;
	border-radius: 50%;
	background: rgba(var(--rgb-black), .55);
	color: #fff;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 10px;
	line-height: 28px;
	text-align: center;
}
#video-thumb-preview .vd-thumb-title-vrapper {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
}
#video-thumb-preview .vd-thumb-title {
	display: block;
	max-height: 2.8em;      /* две строки */
	overflow: hidden;
	color: var(--color-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}
#video-thumb-preview .remove_video {
	position: static !important;
	flex: 0 0 auto;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50%;
	background: transparent !important;
	color: var(--color-text-subtle) !important;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}
#video-thumb-preview .remove_video:hover {
	background: rgba(var(--rgb-danger), .1) !important;
	color: var(--color-danger) !important;
}

/* ============================================================
   «В закладки» и «К сравнению» — состояние «добавлено»
   ------------------------------------------------------------
   Одни и те же правила для каталога (.pt-act) и карточки товара
   (.pro-ico). Класс .is-added вешает скрипт после успешного ответа
   сервера. Тип кнопки различаем по onclick — другого признака в
   разметке нет: сердце заливается, у сравнения появляется галочка.
   ============================================================ */
.pt-act.is-added,
.pro-ico.is-added {
	position: relative;
	border-color: var(--color-primary) !important;
	background: var(--color-primary) !important;
}
.pt-act.is-added svg,
.pro-ico.is-added svg { visibility: hidden; }
.pt-act.is-added::after,
.pro-ico.is-added::after {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-inverse);
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 12px;
}
.pt-act.is-added[onclick*="wishlist"]::after,
.pro-ico.is-added[onclick*="wishlist"]::after { content: "\f004"; }   /* залитое сердце */
.pt-act.is-added[onclick*="compare"]::after,
.pro-ico.is-added[onclick*="compare"]::after  { content: "\f00c"; }   /* галочка */

/* ============================================================
   Кнопки в попапе загрузки фото/видео
   ------------------------------------------------------------
   «Отмена» и «Загрузить» разведены флоатами (.fl-l / .fl-r), а мы
   сняли float с .btn-green — кнопки склеились в ряд и на телефоне
   налезали друг на друга. Ставим нормальную flex-строку.
   ============================================================ */
.mfp-content .popup-footer {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 16px 20px 20px;
}
.mfp-content .popup-footer .btn {
	float: none !important;
	margin: 0 !important;
}
.mfp-content .popup-footer .btn-cancel { order: -1; }
.mfp-content .popup-footer .btn-green,
.mfp-content .popup-footer .btn-blue { margin-left: auto !important; }
@media (max-width: 767px) {
	.mfp-content .popup-footer .btn {
		flex: 1 1 0;
		min-width: 0 !important;
		padding: 0 12px !important;
	}
	.mfp-content .popup-footer .btn-green,
	.mfp-content .popup-footer .btn-blue { margin-left: 0 !important; }
}

/* ============================================================
   «В корзину» — подтверждение нажатия
   ------------------------------------------------------------
   В отличие от закладок, состояние здесь временное: товар можно
   добавить ещё раз, поэтому кнопка не «залипает». На ~1,4 с подпись
   и иконка заменяются галочкой, фон темнеет. Заменяются наложением,
   а не подстановкой иконки — иначе ширина кнопки прыгала бы.
   Класс .is-done вешает и снимает скрипт.
   ============================================================ */
.cartb.is-done,
#button-cart.is-done {
	position: relative;
	background: var(--color-primary-dark) !important;
	color: transparent !important;
}
.cartb.is-done svg,
#button-cart.is-done svg { visibility: hidden; }
.cartb.is-done::after,
#button-cart.is-done::after {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-inverse);
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 18px;
	animation: cart-check .2s ease both;
}
@keyframes cart-check {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ============================================================
   Пагинация: горизонтальный вылет страницы
   ------------------------------------------------------------
   Список страниц идёт в одну строку со своей прокруткой, но сам <ul>
   был flex-элементом с min-width: auto и не мог сжаться уже своего
   содержимого: на 386px он занимал 536px и растягивал документ.
   Из-за этого вся страница ехала вбок, а фиксированные элементы
   (кнопка «Фильтр») ложились поверх содержимого карточек.
   ============================================================ */
.pagi > .text-left,
.pagi > .text-right { min-width: 0; }
.pagi .pagination { max-width: 100%; min-width: 0; }

/* ===================================================================
   ПОДКАТЕГОРИИ В ГОРИЗОНТАЛЬНОМ МЕНЮ
   -------------------------------------------------------------------
   Что было не так:

   1. Перед каждым пунктом рисуется серая чёрточка 6×1px
      (.submenu-title::before). Она изображает список, но список и так
      виден: пункты идут друг под другом. При этом чёрточка съедает
      12px слева и мешает сделать подсветку строки.
   2. Строка — это только текст: высота 23px, кликается сам текст, а не
      строка целиком. На тач-экране в 23px попадать неудобно
      (рекомендуемый минимум — 44px).
   3. Список всегда в одну колонку. У «Аксессуаров» 12 подкатегорий —
      панель превращается в узкую ленту 340×450px.
   4. min-width: 340px у .hmenu-bar #menu .dropdown-menu достаётся и
      мобильному меню: на экране 320px панель шире выезжающей шторки.
   5. Раскрытая группа в мобильном меню ничем не отличается от списка
      корневых пунктов — не видно, где кончаются подкатегории.

   Раскрытие по клику на родителя (mobile) чинится в custom.js —
   там же объяснение.
   =================================================================== */

/* ---------- ДЕСКТОП: панель ---------- */
@media (min-width: 992px) {
	.hmenu-bar #menu .nav > li.m-menu > .dropdown-menu {
		padding: 8px !important;
		/* Зелёная полоса сверху сливалась с зелёной полосой меню —
		   3px, которые никто не видит. Убираем, вместо неё — тень. */
		border-top: 0 !important;
		border: 1px solid var(--color-border);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 16px 36px rgba(var(--rgb-black), .10);
		/* было all 500ms — панель «догоняла» курсор */
		transition: opacity .18s ease, transform .18s ease;
	}

	/* display: table у .dropdown-inner нужен был для нескольких колонок
	   через table-cell; колонки делаем через columns — ниже. */
	.hmenu-bar #menu .dropdown-menu .dropdown-inner { display: block; }
	.hmenu-bar #menu .dropdown-menu .dropdown-inner > ul.list-unstyled { display: block; }
	.hmenu-bar #menu .dropdown-menu li.dropdown-submenu { padding: 0; }

	/* Строка целиком: подсветка на всю ширину, а не подчёркнутый текст */
	.hmenu-bar #menu .dropdown-inner .dropdown-submenu .submenu-title {
		display: block;
		min-width: 0;
		padding: 8px 12px;
		margin: 0;
		border-radius: var(--border-radius);
		line-height: 1.35;
		letter-spacing: 0;
		font-weight: 400;
		color: var(--color-text);
		transition: background-color .15s ease, color .15s ease;
	}
	.hmenu-bar #menu .dropdown-inner .dropdown-submenu .submenu-title::before {
		content: none;
	}
	.hmenu-bar #menu .dropdown-menu .submenu-title:hover,
	.hmenu-bar #menu .dropdown-menu .submenu-title:focus {
		background: rgba(var(--rgb-primary), .10);
		color: var(--color-primary);
	}
}

/* ---------- ДЕСКТОП: длинные списки в две колонки ----------
   :has() считает пункты: восьмой есть — значит список длинный.
   Ниже 1200px оставляем одну колонку: широкая панель у правых
   пунктов меню упиралась бы в край окна. */
@media (min-width: 1200px) {
	.hmenu-bar #menu .nav > li.m-menu > .dropdown-menu:has(li.dropdown-submenu:nth-child(8)) {
		min-width: 520px;
		width: 520px;
	}
	.hmenu-bar #menu .dropdown-menu .dropdown-inner > ul.list-unstyled:has(> li.dropdown-submenu:nth-child(8)) {
		column-count: 2;
		column-gap: 6px;
	}
	.hmenu-bar #menu .dropdown-menu li.dropdown-submenu {
		break-inside: avoid;
	}
	/* Панели у последних пунктов меню открываем влево, чтобы широкая
	   панель не вылезала за правый край. */
	.hmenu-bar #menu .nav > li.m-menu:nth-last-child(-n+3) > .dropdown-menu {
		left: auto;
		right: 0;
	}
}

/* ---------- МОБИЛЬНЫЕ: список внутри шторки ---------- */
@media (max-width: 991px) {
	/* min-width: 340px из десктопного блока шире самой шторки */
	.hmenu-bar #menu #mySidenav .dropdown-menu {
		min-width: 0;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 4px 0 8px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		/* раскрытая группа — на подложке: видно, где она кончается */
		background: var(--color-surface-sunken);
	}
	#mySidenav .dropdown-menu .dropdown-inner,
	#mySidenav .dropdown-menu .dropdown-inner > ul.list-unstyled {
		display: block;
		width: auto;
		column-count: 1;
	}

	/* Стрелку делаем нормальной кнопкой: было 16×13px в углу строки.
	   Клик по стрелке раскрывает список, клик по названию — переход
	   в раздел (см. custom.js). */
	/* !important — рядом лежит #mySidenav .nav > li > a { padding: 15px !important } */
	#mySidenav .navbar-nav > li.m-menu > a.dropdown-toggle {
		position: relative;
		padding-right: 56px !important;
	}
	#mySidenav .navbar-nav > li.m-menu > a.dropdown-toggle .enangle {
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 100%;
		margin: 0;
		float: none;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		opacity: 1;
		color: var(--color-text-muted);
		transition: transform .2s ease, color .2s ease;
	}
	#mySidenav .navbar-nav > li.m-menu.open > a.dropdown-toggle .enangle {
		transform: rotate(180deg);
		color: var(--color-primary);
	}
	#mySidenav .navbar-nav > li.m-menu.open > a.dropdown-toggle {
		color: var(--color-primary);
	}

	/* Строка подкатегории: высота под палец, отступ слева показывает
	   вложенность — чёрточка для этого не нужна. */
	.hmenu-bar #menu #mySidenav .dropdown-submenu {
		padding: 0 10px 0 4px !important;
	}
	#mySidenav .dropdown-inner .dropdown-submenu .submenu-title {
		display: flex;
		align-items: center;
		min-height: 44px;
		width: auto;
		min-width: 0;
		padding: 8px 12px;
		margin: 0;
		border-radius: var(--border-radius);
		line-height: 1.3;
		letter-spacing: 0;
		color: var(--color-text);
	}
	#mySidenav .dropdown-inner .dropdown-submenu .submenu-title::before {
		content: none;
	}
	#mySidenav .dropdown-inner .dropdown-submenu .submenu-title:active {
		background: rgba(var(--rgb-primary), .12);
		color: var(--color-primary);
	}
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ — общий слой
   ------------------------------------------------------------
   Каждая страница кабинета лежит в div[id^="account-"], поэтому
   один блок закрывает их все сразу — и те, что уже есть, и те,
   что появятся. Отдельные блоки (#account-wishlist, #account-order,
   #account-reward) специфичнее по id и остаются в силе там, где
   отличаются.

   Что было: чистый bootstrap. Поля 34px и кнопки 30px против
   44–46px на остальном сайте, таблицы без рамок, меню кабинета —
   девять прямоугольников с общими границами, заголовки без
   акцентной черты, которая есть на информационных страницах и
   контактах.

   Страница «Учётная запись» (account/edit) идёт от модуля
   SimpleCheckout и лежит в .simple-content — она оформлена
   отдельно, вместе с информационными страницами.
   ============================================================ */

/* ---------- Обёртка страницы ---------- */
div[id^="account-"] .infobg {
	padding: 24px;
	border-radius: 16px;
}

/* ---------- Заголовок: как на контактах и в статьях ---------- */
div[id^="account-"] .infobg > h1 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	font-size: 28px;
	font-weight: 800;
	color: var(--color-text);
}
div[id^="account-"] .infobg > h1::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	min-height: 26px;
	border-radius: 2px;
	background: var(--color-primary);
}
div[id^="account-"] .infobg > h1::after { display: none; }

/* Подзаголовок-пояснение («Этот сертификат будет отправлен…») */
div[id^="account-"] .infobg > p {
	margin: 0 0 18px;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* ---------- Формы ---------- */
div[id^="account-"] fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
div[id^="account-"] legend {
	margin: 0 0 16px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 17px;
	font-weight: 800;
	color: var(--color-text);
}
div[id^="account-"] .form-group { margin-bottom: 16px; }

div[id^="account-"] .control-label {
	padding-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}
/* звёздочка обязательного поля — приглушённый акцент вместо #f00 */
div[id^="account-"] .form-group.required > .control-label::before {
	color: var(--color-danger);
	opacity: .7;
}

div[id^="account-"] .form-control {
	height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	box-shadow: none;
	font-size: 14px;
	color: var(--color-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
div[id^="account-"] select.form-control { padding-right: 34px; }
div[id^="account-"] textarea.form-control {
	height: auto;
	min-height: 130px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}
div[id^="account-"] .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .14);
}
div[id^="account-"] .form-control::placeholder { color: var(--color-text-muted); }

div[id^="account-"] .radio,
div[id^="account-"] .checkbox { margin: 0 0 10px; }
div[id^="account-"] .radio:last-child,
div[id^="account-"] .checkbox:last-child { margin-bottom: 0; }
div[id^="account-"] .radio label,
div[id^="account-"] .checkbox label {
	padding-top: 0;
	font-weight: 500;
	color: var(--color-text);
	cursor: pointer;
}

/* Подсказка под полем */
div[id^="account-"] .help-block,
div[id^="account-"] .text-danger {
	margin: 6px 0 0;
	font-size: 13px;
}
div[id^="account-"] .text-danger { color: var(--color-danger); }

/* ---------- Кнопки внизу формы ----------
   .buttons.clearfix разносит кнопки через float. Меняем на flex:
   на телефоне float'ы наезжали друг на друга, а «Назад» и
   «Продолжить» оказывались на разной высоте. */
div[id^="account-"] .buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}
div[id^="account-"] .buttons::before,
div[id^="account-"] .buttons::after { display: none; }
div[id^="account-"] .buttons .pull-left { float: none !important; margin-right: auto; }
div[id^="account-"] .buttons .pull-right { float: none !important; margin-left: auto; }
/* блок согласия в подарочном сертификате — текст, галка и кнопка
   в одной строке, на узком экране переносятся */
div[id^="account-"] .buttons .pull-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	text-align: left;
}

div[id^="account-"] .buttons .btn,
div[id^="account-"] .buttons input.btn {
	height: 46px;
	line-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
}
div[id^="account-"] .buttons .btn-primary {
	background: var(--color-primary);
	color: #fff;
}
div[id^="account-"] .buttons .btn-primary:hover,
div[id^="account-"] .buttons .btn-primary:focus {
	background: var(--color-surface-inverse);
	color: #fff;
}
div[id^="account-"] .buttons .btn-default,
div[id^="account-"] .buttons a.btn:not(.btn-primary) {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
}
div[id^="account-"] .buttons .btn-default:hover,
div[id^="account-"] .buttons a.btn:not(.btn-primary):hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ---------- Таблицы: заказы, транзакции, загрузки, возвраты ---------- */
div[id^="account-"] .table-responsive {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	overflow: auto;
	background: var(--color-surface);
}
div[id^="account-"] table.table {
	margin: 0;
	border: 0;
	background: transparent;
}
/* bootstrap внутри .table-responsive ставит ячейкам nowrap —
   на телефоне таблица разъезжается на несколько экранов */
div[id^="account-"] .table-responsive > table.table > thead > tr > td,
div[id^="account-"] .table-responsive > table.table > thead > tr > th,
div[id^="account-"] .table-responsive > table.table > tbody > tr > td {
	white-space: normal;
}
div[id^="account-"] table.table > thead > tr > td,
div[id^="account-"] table.table > thead > tr > th {
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding: 14px 16px;
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-text);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}
div[id^="account-"] table.table > tbody > tr > td {
	border: 0;
	border-bottom: 1px solid var(--color-border);
	padding: 14px 16px;
	vertical-align: middle;
	font-size: 14px;
	color: var(--color-text);
}
div[id^="account-"] table.table > tbody > tr:last-child > td { border-bottom: 0; }
div[id^="account-"] table.table.table-hover > tbody > tr:hover > td { background: var(--color-surface-sunken); }
div[id^="account-"] table.table tbody a { color: var(--color-text); }
div[id^="account-"] table.table tbody a:hover { color: var(--color-primary); }
div[id^="account-"] table.table td .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0 0 0 6px;
	border-radius: 9px;
	font-size: 13px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-muted);
}
div[id^="account-"] table.table td .btn:first-child { margin-left: 0; }
div[id^="account-"] table.table td .btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
div[id^="account-"] table.table td .btn-info,
div[id^="account-"] table.table td .btn-primary {
	border: 0;
	background: var(--color-primary);
	color: #fff;
}
div[id^="account-"] table.table td .btn-info:hover,
div[id^="account-"] table.table td .btn-primary:hover {
	background: var(--color-surface-inverse);
	color: #fff;
}

/* Строка «Показано 0 – 0 из 0» */
div[id^="account-"] .row > .text-right {
	padding-top: 14px;
	color: var(--color-text-muted);
	font-size: 13px;
}

/* ---------- Меню кабинета в колонке ----------
   Было девять отдельных прямоугольников с общими границами.
   Собираем в одну карточку: строки без рамок, иконка в плашке,
   активный пункт подсвечен (класс проставляется в custom.js —
   OpenCart активный пункт в этом меню не отмечает).

   Второй селектор в :is() — страницы модуля SimpleCheckout
   («Учётная запись», «Адрес»): своей обёртки div[id^="account-"]
   у них нет, цепляемся за ряд, в котором лежит .simple-content. */
:is(div[id^="account-"], .row:has(> #content > .simple-content)) :is(#column-right, #column-left) .list-group {
	padding: 6px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-surface);
	box-shadow: 0 0 20px 0 rgba(var(--rgb-primary), .06);
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--color-text);
	font-size: 14px;
	line-height: 1.3;
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item + a.list-group-item { margin-top: 2px; }
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item .fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	border-radius: 8px;
	background: rgba(var(--rgb-primary), .10);
	color: var(--color-primary);
	font-size: 13px;
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item:hover,
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item:focus {
	background: rgba(var(--rgb-primary), .08);
	color: var(--color-primary);
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item.is-current,
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item.active {
	background: rgba(var(--rgb-primary), .12);
	color: var(--color-primary);
	font-weight: 700;
}
/* «Выход» — не такой же пункт, как остальные */
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item[href*="logout"] { color: var(--color-text-muted); }
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item[href*="logout"] .fa {
	background: var(--color-surface-sunken);
	color: var(--color-text-muted);
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item[href*="logout"]:hover {
	background: rgba(var(--rgb-danger), .08);
	color: var(--color-danger);
}
:is(div[id^="account-"], .row:has(> #content > .simple-content)) .list-group > a.list-group-item[href*="logout"]:hover .fa {
	background: rgba(var(--rgb-danger), .12);
	color: var(--color-danger);
}

/* ---------- Главная страница кабинета: плитки ----------
   Селектор повторяет тему (#account-account.acpage #content[class*="col-"] a),
   иначе не перебить: у неё два id. */
#account-account.acpage #content[class*="col-"] a {
	min-height: 104px;
	margin-bottom: 20px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	transition: var(--transition-card);
}
#account-account.acpage #content[class*="col-"] a:hover {
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-card-hover);
}

/* ---------- Адресная книга: карточки адресов ---------- */
div[id^="account-"] .infobg > .row > [class*="col-"] > .well {
	height: 100%;
	min-height: 0;
	padding: 18px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	box-shadow: none;
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
	div[id^="account-"] .infobg { padding: 16px; }
	div[id^="account-"] .infobg > h1 { font-size: 22px; }
	div[id^="account-"] .control-label { padding-top: 0; margin-bottom: 6px; }
	div[id^="account-"] .buttons .btn,
	div[id^="account-"] .buttons input.btn { width: 100%; padding: 0 16px; }
	div[id^="account-"] .buttons .pull-left,
	div[id^="account-"] .buttons .pull-right { width: 100%; margin: 0; }
	div[id^="account-"] table.table > thead > tr > td,
	div[id^="account-"] table.table > thead > tr > th,
	div[id^="account-"] table.table > tbody > tr > td { padding: 12px; font-size: 13px; }
}

/* ============================================================
   КАБИНЕТ: страницы модуля SimpleCheckout
   ------------------------------------------------------------
   «Учётная запись» (simpleedit), «Адрес» (simpleaddress) и
   регистрация (simpleregister) идут не от OpenCart, а от модуля:
   они лежат в .simple-content, своей обёртки div[id^="account-"]
   у них нет и под общий блок кабинета они не попадают. Разметка
   другая, вид должен получиться тот же.

   Цепляемся за .simpleregister — этот класс стоит на всех трёх
   шаблонах и его нет на оформлении заказа: там свой блок, он
   оформлен отдельно и его правила не трогаем.
   ============================================================ */

/* Форма лежала прямо на фоне страницы, без карточки. Плюс у
   .simple-content поля 0 5px — карточка была на 5px уже заголовка. */
#content > .simple-content { margin-left: 0; margin-right: 0; }

.simple-content .simpleregister {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-surface);
	box-shadow: 0 0 20px 0 rgba(var(--rgb-primary), .06);
}
.simple-content .simpleregister-block-content { margin: 0; padding: 0; }

/* Когда форма завёрнута в .infobg (переверстанные simpleedit /
   simpleaddress / simpleregister), карточку рисует .infobg —
   иначе получилась бы карточка в карточке. */
.simple-content .infobg .simpleregister {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.simple-content .simpleregister fieldset { margin: 0; padding: 0; border: 0; }

/* Поля — те же 44px, что и на остальных страницах кабинета */
.simple-content .simpleregister .form-group { margin-bottom: 16px; }
.simple-content .simpleregister .control-label {
	padding-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}
.simple-content .simpleregister .form-group.required > .control-label::before {
	color: var(--color-danger);
	opacity: .7;
}
.simple-content .simpleregister .form-control {
	height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	box-shadow: none;
	font-size: 14px;
	color: var(--color-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.simple-content .simpleregister textarea.form-control {
	height: auto;
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}
.simple-content .simpleregister .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .14);
}
.simple-content .simpleregister .form-control::placeholder { color: var(--color-text-muted); }

.simple-content .simpleregister .checkbox,
.simple-content .simpleregister .radio { margin: 0 0 10px; }
.simple-content .simpleregister .checkbox label,
.simple-content .simpleregister .radio label { font-weight: 500; cursor: pointer; }

/* Строка с кнопкой. Была белая полоса с float: на регистрации
   галки соглашений и кнопка наезжали друг на друга, когда текст
   соглашения не помещался в строку. */
.simple-content .simpleregister-button-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--color-border);
	background: transparent;
}
.simple-content .simpleregister-button-block::before,
.simple-content .simpleregister-button-block::after { display: none; }
.simple-content .simpleregister-button-right {
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: auto;
	margin-left: auto;
}
.simple-content .simpleregister-button-right #agreement_checkbox { text-align: left; }
.simple-content .simpleregister-button-right .checkbox { margin: 0; }

.simple-content .simpleregister .button_oc.btn {
	height: 46px;
	line-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.simple-content .simpleregister .button_oc.btn:hover,
.simple-content .simpleregister .button_oc.btn:focus {
	background: var(--color-surface-inverse);
	color: #fff;
}

/* «У меня уже есть аккаунт» над формой регистрации */
.simple-content .simpleregister-have-account { margin: 0 0 18px; color: var(--color-text-muted); }
/* Ошибка над формой и блок непринятых соглашений */
.simple-content .simpleregister > .alert-danger,
.simple-content .simpleregister-warning-block { margin: 0 0 18px; }

@media (max-width: 767px) {
	.simple-content .simpleregister { padding: 16px; }
	.simple-content .simpleregister .control-label { padding-top: 0; margin-bottom: 6px; }
	.simple-content .simpleregister-button-right { width: 100%; }
	.simple-content .simpleregister .button_oc.btn { width: 100%; text-align: center; }
}

/* ============================================================
   КАРТА САЙТА (#information-sitemap)
   ------------------------------------------------------------
   Было: два столбца вложенных нумерованных списков. Нумерация
   начиналась заново на каждом уровне, поэтому «1. Чай» и
   «1. Белый чай» стояли друг под другом и читались как рейтинг.
   Уровни отличались только отступом: раздел «Чай» и подраздел
   третьего уровня «Фабрика Ди И» — один шрифт, один цвет.

   Стало: раздел — карточка, подразделы внутри неё в две колонки,
   третий уровень с отбивкой слева. Разделы без вложенности —
   компактная строка-ссылка, а не полупустая карточка.
   ============================================================ */

/* Заголовок — с акцентной чертой, как на контактах и в кабинете */
#information-sitemap #content > h1 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 22px;
	padding: 0;
	font-size: 32px;
	font-weight: 800;
}
#information-sitemap #content > h1::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	min-height: 28px;
	border-radius: 2px;
	background: var(--color-primary);
}
#information-sitemap #content > h1::after { display: none; }

/* text-capitalize превращал «Белый чай» в «Белый Чай»: в базе
   названия записаны нормально, ломала их вёрстка. */
#information-sitemap .text-capitalize { text-transform: none; }

/* Долой нумерацию и служебные отступы списков */
#information-sitemap #content ul { margin: 0; padding: 0; list-style: none; }
#information-sitemap #content li { list-style: none; }
#information-sitemap #content li::before { content: none; }
#information-sitemap #content li::marker { content: ""; }

#information-sitemap #content > .row { margin: 0 -10px; }
#information-sitemap #content > .row > [class*="col-"] { padding: 0 10px; }

/* Раздел — карточка */
#information-sitemap #content > .row > [class*="col-"] > ul > li {
	margin: 0 0 20px;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	box-shadow: 0 0 20px 0 rgba(var(--rgb-primary), .05);
}
#information-sitemap #content > .row > [class*="col-"] > ul > li > a {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
}
#information-sitemap #content > .row > [class*="col-"] > ul > li > a:hover { color: var(--color-primary); }
/* заголовок отделяем чертой только там, где под ним что-то есть */
#information-sitemap #content > .row > [class*="col-"] > ul > li:has(> ul) > a {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}
/* раздел без подразделов — строка-ссылка, а не полупустая карточка */
#information-sitemap #content > .row > [class*="col-"] > ul > li:not(:has(> ul)) {
	margin-bottom: 12px;
	padding: 12px 20px;
}
#information-sitemap #content > .row > [class*="col-"] > ul > li:not(:has(> ul)) > a {
	font-size: 15px;
	font-weight: 600;
}

/* Второй уровень. Две колонки от шести пунктов: у «Чая» их 10,
   у «Аксессуаров» 12 — в одну колонку карточка вытягивалась
   в ленту. Считаем пункты через :has(), порог подстраивается сам. */
#information-sitemap #content > .row > [class*="col-"] > ul > li > ul { column-gap: 26px; }
#information-sitemap #content > .row > [class*="col-"] > ul > li > ul:has(> li:nth-child(6)) { column-count: 2; }
#information-sitemap #content > .row > [class*="col-"] > ul > li > ul > li { break-inside: avoid; margin-bottom: 2px; }
#information-sitemap #content li ul a {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text-muted);
}
#information-sitemap #content li ul a:hover { color: var(--color-primary); }

/* Третий уровень — с отбивкой слева, чтобы было видно вложенность */
#information-sitemap #content li ul ul {
	margin: 2px 0 8px;
	padding-left: 12px;
	border-left: 1px solid var(--color-border);
}
#information-sitemap #content li ul ul a { font-size: 13px; color: var(--color-text-subtle); }

@media (max-width: 767px) {
	#information-sitemap #content > h1 { font-size: 24px; }
	#information-sitemap #content > .row > [class*="col-"] > ul > li { padding: 16px; }
	#information-sitemap #content > .row > [class*="col-"] > ul > li > ul:has(> li:nth-child(6)) { column-count: 1; }
}

/* ============================================================
   ОПИСАНИЕ КАТЕГОРИИ (#product-category .cate-top)
   ------------------------------------------------------------
   Текст в описаниях вставлен из Word: у абзацев inline-стили с
   красной строкой 48px и нулевым отступом снизу, у span'ов —
   свой font-family (Arial) и размер. Из-за этого абзацы слипались
   в сплошное полотно, а куски текста отличались шрифтом от всего
   сайта. Inline-стиль сильнее любого селектора, поэтому чистим
   его через [style] с !important — иначе не перебить.

   Сам блок лежал на фоне без рамки: background и border одного
   цвета rgba(255,255,255,.5).
   ============================================================ */
#product-category .cate-top {
	display: block;
	margin: 0 0 22px;
	padding: 22px 24px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
}
/* Картинка и текст: колонки без padding стояли вплотную, картинка
   была 96px (col-lg-1) с белыми полями — исходник 230×300, а фото в нём
   квадратное. Раскладка на flex с зазором, картинка обрезается в квадрат. */
#product-category .cate-top > .row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
}
#product-category .cate-top > .row::before,
#product-category .cate-top > .row::after { display: none; }
#product-category .cate-top > .row > [class*="col-"] { float: none; width: auto; padding: 0; }
#product-category .cate-top > .row > [class*="col-"]:first-child { flex: 0 0 132px; }
#product-category .cate-top > .row > [class*="col-"]:last-child { flex: 1 1 auto; min-width: 0; }
#product-category .cate-top > .row > [class*="col-"]:first-child img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 10px;
}

/* Свёрнутое состояние: было 80px при межстрочном 19px — обрывалось
   на четвёртой строке. Теперь 112px при 26px, то есть ровно четыре
   строки, и обрыв приходится на межстрочный интервал. */
#product-category .readmore__content {
	max-height: 112px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-muted);
}
#product-category .readmore.open .readmore__content { max-height: 2400px; }

#product-category .readmore__content p {
	margin: 0 0 14px !important;
	text-indent: 0;
	font-size: inherit;
	line-height: inherit;
}
#product-category .readmore__content p:last-child { margin-bottom: 0 !important; }

/* Чистка вордовского мусора */
#product-category .readmore__content [style] {
	text-indent: 0 !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
#product-category .readmore__content [style*="justify"] { text-align: left !important; }

/* !important — иначе сброс [style] выше снял бы жирность и с
   настоящих <b>/<strong> */
#product-category .readmore__content b,
#product-category .readmore__content strong { color: var(--color-text); font-weight: 700 !important; }
#product-category .readmore__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#product-category .readmore__content ul,
#product-category .readmore__content ol { margin: 0 0 14px; padding-left: 20px; }
#product-category .readmore__content li { margin-bottom: 4px; }

/* «Развернуть» была кнопкой во всю ширину с чёрным текстом по
   центру — читалась как разделитель, а не как действие. */
#product-category .readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
#product-category .readmore__toggle:hover { color: var(--color-primary-dark); }
#product-category .readmore__toggle .fa { font-size: 13px; }

@media (max-width: 767px) {
	/* В шаблоне на блоке стоит hidden-xs — на телефоне описание
	   категории не показывалось вообще. Оно свёрнуто до четырёх
	   строк, места занимает немного, а для поиска и для покупателя
	   нужно. Если решите вернуть как было — удалите эту строку. */
	#product-category .cate-top.hidden-xs { display: block; }
	#product-category .cate-top { padding: 16px; }
	#product-category .cate-top > .row { gap: 14px; }
	#product-category .cate-top > .row > [class*="col-"]:first-child { flex-basis: 72px; }
	#product-category .readmore__content { font-size: 14px; }
}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ (#mySidenav) — общая раскладка панели
   ------------------------------------------------------------
   Что было не так:

   1. Кнопка закрытия — position: absolute у верхнего края панели,
      белая иконка на белом фоне поверх ряда сервисных иконок.
      Крестика фактически не было видно, а нажатие попадало по нему
      вместо иконки под ним.
   2. Порядок блоков: иконки → телефон и телеграм → зелёная полоса
      «Категории» → сам список. До первой категории — 270px из 796,
      треть экрана.
   3. Ряд сервисных иконок переносился на две строки: язык не
      помещался седьмым.
   4. Вкладка «Фильтр» от ocFilter лежит в контейнере с
      z-index: 2147483647 и рисовалась поверх открытого меню.

   Порядок блоков меняем через flex order — правки шаблона не
   требуется. Стало: шапка с крестиком → иконки → список →
   контакты внизу панели.

   Селекторы с двумя id (.hmenu-bar #menu #mySidenav) — не для
   красоты: у темы есть правила вида #menu #mySidenav … и
   #mySidenav .nav > li > a { … !important }, иначе не перебить.
   ============================================================ */
@media (max-width: 991px) {

	.hmenu-bar #menu #mySidenav {
		display: flex;
		flex-direction: column;
		/* прокрутка панели не «пробивается» на страницу под ней */
		overscroll-behavior: contain;
	}
	.hmenu-bar #menu #mySidenav .close-nav       { order: 1; }
	.hmenu-bar #menu #mySidenav #htop-in-menu    { order: 2; }
	.hmenu-bar #menu #mySidenav .navbar-collapse { order: 3; }
	/* контакты прижимаем к низу панели */
	.hmenu-bar #menu #mySidenav .sidenav-contacts { order: 4; margin-top: auto; }

	/* ---------- Шапка панели ---------- */
	.hmenu-bar #menu #mySidenav .close-nav {
		position: sticky;
		top: 0;
		z-index: 3;
		flex: 0 0 auto;
		gap: 12px;
		padding: 8px 8px 8px 18px;
		background: var(--color-primary);
	}
	.hmenu-bar #menu #mySidenav .close-nav .categories {
		font-size: 17px;
		font-weight: 700;
		color: #fff;
	}
	.hmenu-bar #menu #mySidenav .close-nav .closebtn {
		position: static;
		float: none;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		border-radius: 10px;
		color: #fff;
		font-size: 20px;
	}
	.hmenu-bar #menu #mySidenav .close-nav .closebtn:focus-visible {
		background: var(--color-surface);
		color: var(--color-primary);
		outline: 2px solid var(--color-surface);
		outline-offset: 2px;
	}
	.hmenu-bar #menu #mySidenav .close-nav .closebtn:active {
		background: var(--color-surface);
		color: var(--color-primary-dark);
	}

	/* ---------- Ряд сервисных иконок ---------- */
	.hmenu-bar #menu #mySidenav .sidenav-utility {
		flex: 0 0 auto;
		padding: 12px 14px;
		border-bottom: 1px solid var(--color-border);
	}
	.hmenu-bar #menu #mySidenav .htop-list { display: flex; flex-wrap: wrap; gap: 6px; }
	/* иконки делят строку поровну — так они помещаются и на 320px */
	.hmenu-bar #menu #mySidenav .htop-list > li.htop-link { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
	.hmenu-bar #menu #mySidenav .htop-list > li.htop-cur:not(:has(*)) { display: none; }
	.hmenu-bar #menu #mySidenav .htop-list > li.htop-link > a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: var(--color-surface-sunken);
		color: var(--color-text);
	}
	.hmenu-bar #menu #mySidenav .htop-list > li.htop-link > a:active {
		background: rgba(var(--rgb-primary), .12);
		color: var(--color-primary);
	}
	.hmenu-bar #menu #mySidenav .htop-list svg { width: 17px; height: 17px; }
	.hmenu-bar #menu #mySidenav .htop-list .fa { margin: 0; font-size: 15px; }
	/* счётчик закладок стоял рядом с иконкой и делал кнопку шире
	   соседних — переносим его бейджем на саму иконку */
	.hmenu-bar #menu #mySidenav .htop-list #wishlist-total {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 15px;
		height: 15px;
		padding: 0 3px;
		border-radius: 999px;
		background: var(--color-primary);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 15px;
		text-align: center;
	}

	/* ---------- Переключение языка — вторым рядом ----------
	   Было выпадающим списком с подписью «Язык»: два касания,
	   и текущий язык не виден. Разворачиваем сам список в пару
	   кнопок во всю ширину — одно касание, выбранный язык видно. */
	.hmenu-bar #menu #mySidenav .htop-list > li.htop-lang {
		flex: 1 1 100%;
		order: 9;
		margin: 2px 0 0;
		padding: 0;
	}
	.hmenu-bar #menu #mySidenav .htop-lang form,
	.hmenu-bar #menu #mySidenav .htop-lang .btn-group { display: block; width: 100%; }
	.hmenu-bar #menu #mySidenav .htop-lang .dropdown-toggle { display: none; }
	.hmenu-bar #menu #mySidenav .htop-lang .dropdown-menu {
		display: flex !important;
		position: static;
		float: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 4px;
		gap: 4px;
		border: 1px solid var(--color-border);
		border-radius: 12px;
		background: var(--color-surface-sunken);
		box-shadow: none;
		font-size: 14px;
	}
	.hmenu-bar #menu #mySidenav .htop-lang .dropdown-menu > li { flex: 1 1 0; min-width: 0; float: none; }
	.hmenu-bar #menu #mySidenav .htop-lang .language-select {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 38px;
		padding: 0 6px;
		border: 0;
		border-radius: 9px;
		background: transparent;
		color: var(--color-text-muted);
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}
	.hmenu-bar #menu #mySidenav .htop-lang .language-select:active { background: rgba(var(--rgb-primary), .10); }
	/* Текущий язык — по lang у <html>: у кнопок name="ru-ru" / "uk-ua".
	   Без JS и без правки шаблона. */
	html[lang="ru"] .hmenu-bar #menu #mySidenav .language-select[name^="ru"],
	html[lang="uk"] .hmenu-bar #menu #mySidenav .language-select[name^="uk"] {
		background: var(--color-surface);
		color: var(--color-primary);
		box-shadow: 0 1px 3px rgba(var(--rgb-black), .10);
	}

	/* ---------- Список категорий ---------- */
	.hmenu-bar #menu #mySidenav .navbar-collapse { flex: 0 0 auto; padding: 4px 0 8px; }
	.hmenu-bar #menu #mySidenav .navbar-nav { flex-direction: column; width: 100%; margin: 0; }
	.hmenu-bar #menu #mySidenav .navbar-nav > li { width: 100%; border-bottom: 1px solid var(--color-border); }
	.hmenu-bar #menu #mySidenav .navbar-nav > li:last-child { border-bottom: 0; }
	.hmenu-bar #menu #mySidenav .navbar-nav > li > a {
		font-size: 16px;
		font-weight: 500;
		color: var(--color-text);
	}
	.hmenu-bar #menu #mySidenav .navbar-nav > li > a:active { background: rgba(var(--rgb-primary), .06); }

	/* «Оптом» — первым пунктом и выделенным цветом. Пункт ищем по ссылке
	   (…/optom), а не по позиции: порядок в меню меняется. */
	.hmenu-bar #menu #mySidenav .navbar-nav > li:has(> a:is([href*="optom"], [href$="/opt"], [href$="/opt/"])) {
		order: -1;
		width: auto;              /* иначе 100% + боковые поля вылезают за панель */
		margin: 8px 14px 12px;
		border-bottom: 0;
		border-radius: 10px;
		background: var(--color-menu-accent);
		overflow: hidden;
	}
	.hmenu-bar #menu #mySidenav .navbar-nav > li:has(> a:is([href*="optom"], [href$="/opt"], [href$="/opt/"])) > a {
		padding-right: 18px !important;
		color: #fff !important;
		font-weight: 700;
	}
	.hmenu-bar #menu #mySidenav .navbar-nav > li:has(> a:is([href*="optom"], [href$="/opt"], [href$="/opt/"])) > a:active { background: var(--color-menu-accent-hover); }

	/* ---------- Контакты внизу панели ---------- */
	.hmenu-bar #menu #mySidenav .sidenav-contacts {
		flex: 0 0 auto;
		padding: 14px 18px 18px;
		border-top: 1px solid var(--color-border);
		background: var(--color-surface-sunken);
	}

	/* Вкладка «Фильтр» лежит в контейнере ocFilter с
	   z-index: 2147483647 и рисовалась поверх открытого меню. */
	body.menu-open .ocf-btn-mobile-fixed { display: none; }
}

/* Наведение на крестик: инверсия — белая подложка, зелёная иконка.
   Просто высветлить фон мало: крестик и так белый, цвет бы не
   поменялся. Отдельным медиазапросом (а не вложенным в блок выше):
   на тач-экране :hover залипает после касания, там работает :active. */
@media (max-width: 991px) and (hover: hover) and (pointer: fine) {
	.hmenu-bar #menu #mySidenav .close-nav .closebtn:hover {
		background: var(--color-surface);
		color: var(--color-primary);
	}
}

/* ============================================================
   БЛОГ — список статей, статья, отзывы
   ------------------------------------------------------------
   Шаблоны блога шли от стандартной темы OpenCart: карточки статей
   собирались из .product-thumb с группой круглых кнопок внизу,
   дата и просмотры прятались в тултипы, отзывы верстались таблицей
   .table-bordered. Рядом с каталогом это выглядело как другой сайт.

   Разметка блога переписана на свои классы (.article-card,
   .blog-article), а оформление собрано из тех же токенов, что и
   карточка товара: --color-surface, --color-border, --border-radius,
   --color-border-hover + --shadow-card-hover по наведению. Тулбар
   сортировки (.cate-border), пагинация (.pagi), хлебные крошки и
   кнопки берутся у темы как есть — отдельных правил не требуют.
   ============================================================ */

/* ── Список статей: категория блога и «Последние» ───────────── */

/* Вступление категории: картинка слева, текст справа. Раньше это
   были две bootstrap-колонки на голом фоне — текст висел в воздухе,
   как описание категории до того, как его убрали в карточку. */
.blog-listing .blog-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin: 0 0 22px;
	padding: 22px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
}
.blog-listing .blog-intro__media { flex: 0 0 120px; }
.blog-listing .blog-intro__media img { border-radius: 10px; }
.blog-listing .blog-intro__text {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-muted);
}
.blog-listing .blog-intro__text p { margin: 0 0 12px; }
.blog-listing .blog-intro__text p:last-child { margin-bottom: 0; }
.blog-listing .blog-intro__text a { color: var(--color-primary); }

/* Сетка карточек. Тот же приём, что и .cpagerow в каталоге: flex
   вместо float, чтобы карточки в ряду тянулись до одной высоты. */
.blogrow {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 -8px;
}
.blogrow .article-layout { float: none; padding: 8px; }

/* ── Карточка статьи ────────────────────────────────────────── */
.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
	/* один в один с .product-thumb: рамка и тень проявляются неспешно,
	   сама карточка по наведению не двигается */
	transition: var(--transition-card);
}
.article-card:hover {
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-card-hover);
}

/* Картинка фиксированной пропорции: у статей превью разного размера,
   и без этого ряд карточек шёл ступенькой. */
.article-card__image {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-surface-sunken);
}
.article-card__image::before {
	content: "";
	display: block;
	padding-top: 56%;
}
.article-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.article-card:hover .article-card__image img { transform: scale(1.04); }

/* Дата и оценка — плашками на картинке, теми же токенами, что бейджи
   товара. В старом шаблоне дата была тултипом на кнопке с часами:
   чтобы её узнать, нужно было навести мышь. Оценка тоже лежит на
   картинке, а не первой строкой в тексте: статьи без отзывов есть
   всегда, и в ряду карточек заголовки разъезжались по высоте —
   ровно та же причина, по которой рейтинг товара вынесен в бейдж. */
.article-card__date,
.article-card__rating {
	position: absolute;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	background: var(--color-badge-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	color: var(--color-badge-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}
.article-card__date { left: 12px; }
.article-card__date .fa { font-size: 11px; color: var(--color-primary); }

.article-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
	text-align: left;
}

/* Звёзды берут цвет у .or-rate каталога (тёмные, не золотые):
   на карточке это справка, а не акцент. */
.article-card__rating { right: 12px; font-size: 7px; }
.article-card__rating .fa-stack:last-child { margin-right: 0; }

.article-card__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}
.article-card__title a { color: var(--color-text); }
.article-card__title a:hover { color: var(--color-primary); }

/* Три строки анонса: ровно столько, чтобы карточки не разъезжались
   по высоте на статьях с длинным вступлением. */
.article-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 14px;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* Подвал прижат к низу — у карточек разной длины кнопка «Подробнее»
   стоит на одной линии. */
.article-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}
.article-card__views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text-subtle);
	font-size: 12px;
}
.article-card__views .fa { font-size: 12px; }
.article-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
}
.article-card__more:hover { color: var(--color-primary-dark); }
.article-card__more .fa { transition: transform .2s ease; }
.article-card:hover .article-card__more .fa { transform: translateX(3px); }

/* Пустая категория */
.blog-empty {
	padding: 48px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	text-align: center;
}
.blog-empty .fa { font-size: 38px; color: var(--color-text-subtle); }
.blog-empty p { margin: 14px 0 20px; color: var(--color-text-muted); font-size: 15px; }

/* ============================================================
   Страница статьи
   ============================================================ */
.blog-article {
	padding: 26px 30px 30px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
}
.blog-article__title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.25; }

/* Строка со служебной информацией. Дата и просмотры были кнопками
   с тултипом — здесь это обычный текст, его видно сразу. */
.blog-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 13px;
}
.blog-article__meta-item { display: inline-flex; align-items: center; gap: 7px; }
.blog-article__meta-item > .fa { color: var(--color-primary); }
.blog-article__meta a { color: var(--color-text-muted); border-bottom: 1px dashed var(--color-border-strong); }
.blog-article__meta a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.blog-article__meta-sep { color: var(--color-border-strong); }
.blog-article__rating .or-rate { font-size: 8px; line-height: 1; }

/* Главная картинка и галерея одним списком — magnificPopup
   пролистывает их как одну галерею. */
.blog-article__media {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
}
.blog-article__media > li { list-style: none; }
.blog-article__media .thumbnail {
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-surface);
}
.blog-article__media .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.blog-article__hero { flex: 1 1 100%; }
.blog-article__hero .thumbnail img { max-height: 460px; }
/* .image-additional в теме — float с margin-left и шириной 78px;
   во flex-строке это мешает, поэтому сбрасываем. */
.blog-article__media .image-additional { float: none; max-width: none; flex: 0 0 92px; margin: 0; }
.blog-article__media .image-additional a { margin: 0; padding: 0; height: 92px; }

/* Текст статьи — та же типографика, что во вкладке «Описание»
   карточки товара, чтобы контент читался одинаково. */
.blog-article__body { color: var(--color-text); font-size: 15px; line-height: 1.8; }
.blog-article__body p { margin: 0 0 14px; }
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 { margin: 26px 0 12px; color: var(--color-text); font-weight: 700; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 16px; padding-left: 22px; }
.blog-article__body li { margin-bottom: 6px; }
.blog-article__body img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-article__body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__body blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 10px 10px 0;
	background: rgba(var(--rgb-primary), .06);
	font-size: 15px;
}
.blog-article__body table { width: 100%; margin: 0 0 16px; }
.blog-article__body td,
.blog-article__body th { padding: 8px 10px; border: 1px solid var(--color-border); }

/* Вложения — строкой-чипом, а не голой ссылкой с дискетой */
.blog-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.blog-download {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--color-surface-sunken);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
}
.blog-download:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-download .fa { color: var(--color-primary); }
.blog-download__size { color: var(--color-text-subtle); font-size: 12px; font-style: normal; font-weight: 400; }

/* Заголовки блоков «Похожие товары» / «Похожие статьи»: приём темы
   (.heading с зелёной чертой), но отступы поменьше — на странице
   статьи 80px сверху разрывали её пополам. */
#blog-article .heading { margin: 40px 0 0; }
#blog-article .heading h2 { margin: 36px 0 28px; font-size: 24px; }
#blog-article .heading h2::after { margin: 16px auto; }

/* ── Отзывы к статье ────────────────────────────────────────── */
.blog-reviews {
	margin-top: 10px;
	padding: 26px 30px 30px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
}
#blog-article .blog-reviews .heading { margin: 0; }
#blog-article .blog-reviews .heading h2 { margin: 0 0 24px; }
.blog-reviews .co-heading { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--color-text); }

/* Список загруженных отзывов — та же вёрстка, что у товара
   (review.twig переведён с таблицы на .custreview). */
#blog-article #review { margin-bottom: 26px; }
#blog-article #review .custreview { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
#blog-article #review .custreview:first-child { padding-top: 0; }
#blog-article #review .custreview:last-of-type { border-bottom: 0; }
#blog-article #review .custreview > div:first-child { font-size: 9px; line-height: 1; }
#blog-article #review .custreview .fa-stack { width: 1.6em; margin-right: 1px; }
#blog-article #review .custreview .fa-star { color: var(--color-accent); }
#blog-article #review .custreview .fa-star-o { color: var(--gray-200); }
#blog-article #review .crspc { margin: 6px 0 8px; color: var(--color-text-muted); font-size: 15px; }
#blog-article #review .crspc strong { color: var(--color-text); }
#blog-article #review .crspc .rsep { margin: 0 8px; color: var(--color-border); }
#blog-article #review .custreview p { margin: 0; color: var(--color-text); line-height: 1.7; }
#blog-article .blog-no-reviews { margin: 0 0 20px; color: var(--color-text-muted); }

/* Форма отзыва. Была bootstrap-horizontal с радиокнопками 1..5 —
   заменена на тот же звёздный переключатель, что на карточке товара. */
#blog-article #form-review .form-group { margin-bottom: 16px; }
#blog-article #form-review .control-label { display: block; margin-bottom: 8px; color: var(--color-text); font-weight: 600; }
#blog-article #form-review .form-control {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: none;
	color: var(--color-text);
}
#blog-article #form-review .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
	outline: 0;
}
#blog-article #form-review textarea.form-control { min-height: 120px; }
#blog-article #form-review .help-block { margin-top: 6px; color: var(--color-text-subtle); font-size: 12px; }
#blog-article #button-review {
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--border-radius);
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
}
#blog-article #button-review:hover { background: var(--color-surface-inverse); color: #fff; }

/* Звёзды-переключатель: в DOM 5..1, row-reverse рисует их 1..5,
   поэтому «~ label» подсвечивает все звёзды левее наведённой. */
#blog-article .form-rating-container {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}
#blog-article .form-rating-container input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
/* Размеры задаём явно: в теме .fa прибит к 13px, а .fa-stack — к
   коробке 1em с line-height 10px, и штатные 2em от FontAwesome не
   срабатывают. У товара это компенсирует правило #tab-review, до
   которого блогу не дотянуться, — звёзды выходили с ноготь. */
#blog-article .form-rating-container label.fa-stack {
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	font-size: 18px;
	line-height: 1.5em;
	cursor: pointer;
}
#blog-article .form-rating-container label .fa { font-size: 20px; line-height: inherit; }
#blog-article .form-rating-container label .fa-star { color: var(--color-accent); opacity: 0; }
#blog-article .form-rating-container label .fa-star-o { color: var(--gray-200); }
#blog-article .form-rating-container input:checked ~ label .fa-star,
#blog-article .form-rating-container label:hover ~ label .fa-star,
#blog-article .form-rating-container label:hover .fa-star { opacity: 1; }

/* ── Выпадающее меню блога (menu.twig) ──────────────────────── */
.blog-menu .dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 0; color: var(--color-text-inverse-muted); }
.blog-menu .dropdown-toggle:hover,
.blog-menu .dropdown-toggle:focus { color: var(--color-text-inverse); }
.blog-menu .dropdown-toggle > .fa:first-child { color: var(--color-primary); }
.blog-menu__list {
	min-width: 220px;
	padding: 6px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-card-hover);
}
.blog-menu__list > li > a {
	padding: 8px 12px;
	border-radius: var(--border-radius);
	color: var(--color-text);
	font-size: 14px;
	white-space: normal;
}
.blog-menu__list > li > a:hover { background: var(--color-surface-sunken); color: var(--color-primary); }
.blog-menu__child > a { padding-left: 22px !important; color: var(--color-text-muted) !important; font-size: 13px !important; }
.blog-menu__child > a .fa { color: var(--color-text-subtle); margin-right: 4px; }
.blog-menu__all { margin-top: 4px; border-top: 1px solid var(--color-border); }
.blog-menu__all > a { color: var(--color-primary) !important; font-weight: 600; }

/* ── Мобильные ──────────────────────────────────────────────── */
@media (max-width: 991px) {
	.blog-article,
	.blog-reviews { padding: 20px 18px 22px; }
	.blog-article__title { font-size: 24px; }
}
@media (max-width: 767px) {
	/* Тема на мобильном уводит первый блок тулбара под селекты
	   (order: 2) — это ссылка «Сравнение товаров» на странице
	   категории. В блоге её нет, и правило забирало сортировку:
	   «Показать» вставало первым, а «Сортировка» за ним. */
	.blog-listing .row.cate-border > [class*="col-"]:first-child { order: 0; }
	.blogrow { margin: 0 -5px; }
	.blogrow .article-layout { padding: 5px; }
	.blog-listing .blog-intro { padding: 16px; gap: 14px; }
	.blog-listing .blog-intro__media { flex: 0 0 84px; }
	.blog-listing .blog-intro__text { font-size: 14px; }
	.blog-article,
	.blog-reviews { padding: 16px 14px 18px; }
	.blog-article__title { font-size: 21px; }
	.blog-article__body { font-size: 14px; line-height: 1.75; }
	#blog-article .heading h2 { margin: 28px 0 20px; font-size: 20px; }
	.blog-downloads .blog-download { width: 100%; }
	.blog-empty { padding: 32px 16px; }
}

/* ============================================================
   Карточка товара: сетка, 2 в ряд на телефоне
   ------------------------------------------------------------
   Каталог (.cpagerow: категория, поиск, акции, производитель,
   товары в статье блога) и модули-карусели (Рекомендуем, Новинки,
   Акции, Хиты, вкладки категорий, похожие товары) — разметка у них
   одна, .product-thumb, и карточек в ряд одинаково:

                   без боковой колонки   с колонкой   с двумя
     до 767px              2                 2            2
     768–991px             3                 2            2
     992–1199px            5                 4            2
     от 1200px             6                 5            3

   В каталоге это ширины ниже, в каруселях — productGrid.items()
   в eptheme-common.js: меняете здесь — поменяйте и там.
   Боковая колонка — сосед #content в той же строке: #column-left
   стоит перед ним, #column-right — после (его видно только через :has()).

   Кнопки «В закладки» / «В сравнение» стоят под фото справа от
   первой строки названия (см. .pt-actions выше по файлу). Место под
   них держит плавающий .protitle a::before: короче становится только
   первая строка, остальные идут на всю ширину.
   ============================================================ */

/* --- Сетка каталога ------------------------------------------------------- */
.cpagerow > .product-grid { width: 50%; }
@media (min-width: 768px) {
	.cpagerow > .product-grid { width: 33.33333%; }
	#column-left ~ #content .cpagerow > .product-grid,
	#content:has(~ #column-right) .cpagerow > .product-grid { width: 50%; }
}
@media (min-width: 992px) {
	.cpagerow > .product-grid { width: 20%; }
	#column-left ~ #content .cpagerow > .product-grid,
	#content:has(~ #column-right) .cpagerow > .product-grid { width: 25%; }
	#column-left ~ #content:has(~ #column-right) .cpagerow > .product-grid { width: 50%; }
}
@media (min-width: 1200px) {
	.cpagerow > .product-grid { width: 16.66667%; }
	#column-left ~ #content .cpagerow > .product-grid,
	#content:has(~ #column-right) .cpagerow > .product-grid { width: 20%; }
	#column-left ~ #content:has(~ #column-right) .cpagerow > .product-grid { width: 33.33333%; }
}

/* --- Карусели модулей: зазоры как в каталоге, крайние карточки вровень
   с краем блока. Сколько карточек видно и шаг прокрутки (по 2 товара) —
   productGrid.carousel() в eptheme-common.js. */
.rless:has(.product-layout) { margin-left: -5px; margin-right: -5px; }
.rless .owl-item > .product-layout { padding-left: 5px; padding-right: 5px; }

/* Название: до 3 строк (первая короче на ширину кнопок) */
.product-thumb .caption { padding-top: 10px; }
.product-thumb .protitle {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: 38px;
	margin: 0 0 4px;
	padding: 0;
	font-size: 14.5px;
	line-height: 19px;
}
/* Поплавок — внутри ссылки, в строке текста. Прямой ::before у .protitle
   (-webkit-box) Safari ставит отдельным блоком над названием, а не
   поплавком, и сверху появлялась пустая строка. */
.product-thumb .protitle a::before {
	content: "";
	float: right;
	width: 64px;
	height: 19px;
}

/* Характеристики, количество и цена прижаты к низу: у карточек ряда
   разной высоты (название в 2 и в 3 строки) «Код товара», счётчик
   и кнопка корзины стоят на одной линии. Раньше auto был у .qty-box,
   и строка характеристик прыгала вслед за длиной названия. */
.product-thumb .caption .pt-specs { margin-top: auto; }
.product-thumb .qty-box { margin-top: 10px; }
/* у товара без характеристик прижимаем к низу сам блок количества */
.product-thumb .caption:not(:has(.pt-specs)) .qty-box { margin-top: auto; }

/* Наличие и цена за единицу не рвутся посередине слова */
.product-thumb .qty-meta { flex-wrap: wrap; row-gap: 2px; }
.product-thumb .qty-stock { white-space: nowrap; }

/* Старая цена уходит под новую и не выталкивает кнопку корзины */
.product-thumb .price-row .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	min-width: 0;
}

/* --- Телефон: 2 карточки в ряд, зазор 8px --------------------------------- */
@media (max-width: 767px) {
	.cpagerow { margin: 0 -4px; }
	.cpagerow .product-layout { padding: 4px; }
	.rless:has(.product-layout) { margin-left: -4px; margin-right: -4px; }
	.rless .owl-item > .product-layout { padding-left: 4px; padding-right: 4px; }
}

/* --- Узкая карточка: телефон (2 в ряд) и компьютер (4–6 в ряд) -------------
   И там и там карточка 140–250px: крупный вид в неё не помещается — цена
   в 22px и кнопка корзины 64px не встают в одну строку. На планшете
   (768–991px) карточек 2–3 в ряд, они шире и остаются крупными. */
@media (max-width: 767px), (min-width: 992px) {
	.product-thumb .caption { padding: 8px 8px 0; }
	.pt-actions { top: calc(100% + 3px); right: 4px; gap: 0; }
	/*.pt-act { width: 28px; height: 28px; }*/
	/*.pt-act svg { width: 16px; height: 16px; }*/

	.product-thumb .protitle {
		min-height: 36px;
		font-size: 13.5px;
		line-height: 18px;
	}
	.product-thumb .protitle a::before { width: 54px; height: 18px; }

	.product-thumb .catlist-des { font-size: 12.5px; line-height: 17px; }

	.product-thumb .pt-specs { padding-top: 6px; }

	.product-thumb .qty-box { padding-top: 6px; }
	.product-thumb .qty-meta { gap: 4px; margin-bottom: 6px; font-size: 12px; }
	.product-thumb .qty-stock { gap: 4px; }
	.product-thumb .qty-stock::before { width: 6px; height: 6px; }
	.product-thumb .qty-stepper { gap: 2px; padding: 3px; }
	.product-thumb .qty-btn { width: 30px; height: 30px; }
	.product-thumb .qty-btn svg { width: 16px; height: 16px; }
	.product-thumb .qty-value { padding: 0 4px; font-size: 14px; line-height: 30px; }

	.product-thumb .price-row,
	.product-thumb .qty-box .price-row { gap: 6px; padding: 8px 0 2px; }
	.product-thumb .price-row .price { font-size: 17px; }
	.product-thumb .price-row .price-old { margin-left: 0; font-size: 12px; }
	.product-thumb .price-row .cartb { width: 44px; height: 34px; }
	.product-thumb .price-row .cartb svg { width: 19px; height: 19px; }
}
/* Узкие телефоны (320–374): наличие и цена за единицу — двумя строками
   у всех карточек сразу, чтобы соседние карточки не расходились по высоте */
@media (max-width: 374px) {
	.product-thumb .qty-meta { flex-direction: column; align-items: flex-start; }
}