/* Выделение текста */
::selection {
 color: #000;
}

.gcarouselarrows::selection {
 background: none !important;
}

/* Сброс стилей */
* {
 outline: none;
}

/* Основные элементы */
html, body {
 margin: 0;
 padding: 0;
 height: 100%;
}

/* Поля ввода текста и пароля */
textarea, input {
 outline: none;
 resize: none;
 box-sizing: border-box;
}

/* Изображения */
img, a img {
 border: none;
 outline: none;
}

/* Ссылки */
a {
 text-decoration: none;
 color: #7a7a7a; /* Серый */
 transition: all .3s ease; /* Плавный переход цвета при наведении */
}

a:hover {
 color: #3f3836; /* Темно-серый при наведении */
}

/* Жирный текст */
b {
 font-weight: 600; /* Полужирный */
}

/* Основной текст */
body {
 font-size: 17px;
 line-height: 20px;
 color: #000; /* Черный */
 font-weight: 400; /* Обычный */
 font-family: 'Roboto', sans-serif;
 letter-spacing: 0,4px; /* Межбуквенный интервал */
}

/* Класс для скрытия прокрутки */
body.noscroll {
 overflow: hidden; 
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
 margin: 0 0 20px; /* Отступ снизу 20px */
 padding: 0;
 color: #3f3836; /* Темно-серый */
 font-family: 'Montserrat', sans-serif;
 font-weight: 600; /* Полужирный */
}

h1 { font-size: 30px; line-height: 30px; } /* Размер h1 */
h2 { font-size: 28px; line-height: 28px; } /* Размер h2 */
h3 { font-size: 24px; line-height: 24px; } /* Размер h3 */
h4 { font-size: 20px; line-height: 20px; } /* Размер h4 */
h5 { font-size: 18px; line-height: 18px; } /* Размер h5 */
h6 { font-size: 16px; line-height: 16px; } /* Размер h6 */

/* Списки в aside */
aside ul, aside ol, aside li {
 margin: 0;
 padding: 0;
 list-style: none; /* Убираем маркеры у списков */
 list-style-type: none; 
}

/* Поле textarea */
textarea {
 overflow: auto; /* Автоматическая прокрутка */
 border: 1px solid #ededed; /* Светло-серая рамка */
 color: #3f3836; /* Темно-серый текст */
 background: #fbfbfb; /* Светло-серый фон */
 line-height: 20px;
 min-height: 60px; /* Минимальная высота */
 padding: 20px 30px; /* Внутренние отступы */
 font-size: 13px;
 font-family: 'Montserrat', sans-serif;
 box-sizing: border-box; /* padding и border не влияют на ширину */
 transition: all .3s ease; /* Плавный переход при изменении состояния */
 font-weight: 400; /* Обычный */
 border-radius: 0; /* Без скругления углов */
 -webkit-appearance: none; /* Убираем стандартный вид для WebKit */
}

/* Поля ввода текста, пароля, email, телефона и URL */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"] {
 font-size: 13px;
 border: 1px solid #ededed; /* Светло-серая рамка */
 background: #fbfbfb; /* Светло-серый фон */
 color: #3f3836; /* Темно-серый текст */
 line-height: 20px;
 height: 46px;
 padding: 0 20px;
 font-family: 'Montserrat', sans-serif;
 box-sizing: border-box;
 transition: all .2s ease; /* Плавный переход при изменении состояния */
 font-weight: 400;
 border-radius: 0;
 -webkit-appearance: none;
}

/* Фокус на полях ввода и textarea */
textarea:focus,
input:focus { 
 box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); /* Тень при фокусе */
}

/* Кнопки (input и button) */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
 border: none;
 color: #fff; /* Белый текст */
 height: 46px;
 line-height: 46px;
 padding: 0 20px;
 font-family: 'Montserrat', sans-serif;
 cursor: pointer;
 font-size: 13px;
 font-weight: 500; /* Средний */
 box-sizing: border-box;
 transition: all .3s ease;
 border-radius: 0;
 -webkit-appearance: none;
}

/* Hover на кнопках */
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
 background-color: #ededed; /* Светло-серый фон при наведении */
 color: #3f3836; /* Темно-серый текст при наведении */
}

/* Элемент внутри кнопки (возможно, иконка) */
button .la { 
 margin-right: 5px; 
}

/* Выпадающий список */
select {
 color: #3f3836; /* Темно-серый текст */
 background: #f2f2f2; /* Светло-серый фон */
 cursor: pointer;
 font-size: 13px;
 font-family: 'Montserrat', sans-serif;
 height: 40px;
 padding-right: 38px; /* Отступ справа для стрелочки */
 padding-left: 20px; /* Отступ слева */
 border: 0; /* Убираем стандартную рамку */
 border-radius: 0; /* Без скругления углов */
 box-sizing: border-box;
 /* Стрелка выпадающего списка (base64 изображение) */
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAFCAYAAABB9hwOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNkFGNUM5QjJCNDkxMUU4QUY2MkQxNkZENzRCQzZFQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNkFEN0I5MjA3MEYxMUVBQThDQkRGN0UyQTY1NzEzNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNkFEN0I5MTA3MEYxMUVBQThDQkRGN0UyQTY1NzEzNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTRkOWRmNS00MTYxLTRhNGMtYjg3Ny0yMzE1MDM5MjJiZWUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDZBRjVDOUIyQjQ5MTFFOEFGNjJEMTZGRDc0QkM2RUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Zx2b3AAAAVUlEQVR42mJQVFQMZcABgHJKIPz//38GUjETUL8xUHMHNkOB1CoGMgHT/fv3K6AGdWAxNAwof48cgxmRDIMZPAvdUJDXSHYxjAFzORDspsSlMAAQYAAX00SOx3SJ8wAAAABJRU5ErkJggg==);
 background-position: right center;
 background-repeat: no-repeat;
 line-height: 1em;
 text-indent: 1px; /* Небольшой отступ для текста */
 -ms-appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none; /* Убираем стандартный вид селекта */
}

/* Скрываем кнопку расширения в IE */
select::-ms-expand {
 display: none;
}

/* Убираем контур при фокусе */
select:focus {
 outline: none;
}

/* Стилизация чекбоксов и радиокнопок (при поддержке appearance) */
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {

 /* Чекбоксы */
 input[type="checkbox"] {
 width: 13px;
 height: 13px;
 background-color: transparent;
 border: 1px solid #a5a5a5; /* Светло-серый */
 border-radius: 0; /* Без скругления */
 cursor: pointer;
 position: relative;
 margin: 2px 3px 4px 0; /* Отступы */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 outline: 0;
 min-width: 13px;
 min-height: 13px;
 box-sizing: border-box !important;
 vertical-align: middle;
 transition: all .3s ease; /* Плавный переход */
 }

 /* Чекбокс: отмеченный */
 input[type="checkbox"]:checked,
 input[type="checkbox"]:checked:hover {
 background-color: #3f3836; /* Темно-серый */
 border-color: #3f3836;
 }

 /* Галочка в отмеченном чекбоксе */
 input[type="checkbox"]:checked:before {
 content: '';
 display: block;
 width: 3px;
 height: 9px;
 border: 2px solid transparent;
 border-bottom-color: #fff; /* Белый */
 border-right-color: #fff;
 position: absolute;
 top: -3px;
 left: 3px;
 transform: rotate(43deg); /* Объединение префиксов */
 }

 /* Радиокнопки */
 input[type="radio"] {
 display: inline-block;
 width: 14px;
 min-width: 14px;
 height: 14px;
 padding: 3px; /* Внутренний отступ */
 border: 1px solid #ededed; /* Светло-серый */
 border-radius: 50%; /* Круглый */
 cursor: pointer;
 vertical-align: middle;
 margin: 1px 3px 4px 0; /* Отступы */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 outline: 0;
 position: relative;
 box-sizing: border-box !important;
 transition: border-color .3s ease; /* Плавное изменение цвета рамки */
 }

 /* Радиокнопка и чекбокс: наведение */
 input[type="radio"]:hover,
 input[type="checkbox"]:hover {
 border: 1px solid #3f3836; /* Темно-серая рамка при наведении */
 }

 /* Радиокнопка: отмеченная */
 input[type="radio"]:checked {
 border-color: #3f3836; /* Темно-серый */
 background: transparent; 
 }

 /* Точка в отмеченной радиокнопке */
 input[type="radio"]:checked:before {
 content: '';
 display: block;
 height: 8px;
 width: 8px;
 border-radius: 50%;
 background-color: #3f3836; /* Темно-серый */
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); /* Центрирование */
 }

 /* Чекбокс и радиокнопка: отключенные */
 input[type="checkbox"]:disabled,
 input[type="radio"]:disabled {
 cursor: default; /* Курсор по умолчанию */
 opacity: .4; /* Прозрачность 40% */
 background-color: #ededed; /* Светло-серый фон */
 }
}

/* Поддержка старых версий Internet Explorer (IE) */
@supports (-ms-ime-align: auto) {
 /* Радиокнопки */
 input[type="radio"] {
 -webkit-appearance: radio; /* Восстанавливаем стандартный вид радиокнопки */
 width: auto; /* Автоматическая ширина */
 height: auto; /* Автоматическая высота */
 }

 /* Чекбоксы */
 input[type="checkbox"] {
 -webkit-appearance: checkbox; /* Восстанавливаем стандартный вид чекбокса */
 width: auto; /* Автоматическая ширина */
 height: auto; /* Автоматическая высота */
 min-width: unset; /* Сбрасываем минимальную ширину */
 min-height: unset; /* Сбрасываем минимальную высоту */
 }
}

/* Стили для параграфов */
p {
 margin: 0;
 padding: 0;
}

/* Утилитарные классы */
.oh { 
 overflow: hidden; /* Скрываем содержимое, выходящее за пределы блока */
}

.cnt { /* Ограничивающий контейнер */
 width: 1290px;
 margin: 0 auto; /* Центрируем по горизонтали */
}

.clr:after { /* Очистка float */
 content: '';
 display: block;
 clear: both;
}

/* Колонки */
.col2 { width: 48.717948717949%; } /* Ширина колонки 2 */
.col3 { width: 31.623931623932%; } /* Ширина колонки 3 */
.col4 { width: 23.076923076923%; } /* Ширина колонки 4 */
.col6 { width: 14.529914529914%; } /* Ширина колонки 6 */

/* Колонки внутри контейнера #content */
#content .col2 { width: 48.051948051%; } /* Ширина колонки 2 в #content */
#content .col3 { width: 30.649350649%; } /* Ширина колонки 3 в #content */

/* Общие стили для колонок */
.col2, .col3, .col4, .col6 {
 margin-bottom: 30px; /* Отступ снизу */
 margin-right: 2.5641025641026%; /* Отступ справа */
 float: left; /* Располагаем колонки в ряд */
 transition: transform 0.3s ease;
}

/* Отступы для колонок внутри #content */
#content .col2, 
#content .col3, 
#content .col4, 
#content .col6 {
 margin-right: 3.896103896%;
}

/* Убираем правый отступ у последних колонок в ряду */
.col2:nth-child(2n), /* Каждая вторая колонка .col2 */
.col3:nth-child(3n), /* Каждая третья колонка .col3 */
.col4:nth-child(4n), /* Каждая четвертая колонка .col4 */
.col6:nth-child(6n) { /* Каждая шестая колонка .col6 */
 margin-right: 0; 
}

/* То же самое для колонок внутри #content */
#content .col2:nth-child(2n),
#content .col3:nth-child(3n),
#content .col4:nth-child(4n),
#content .col6:nth-child(6n) {
 margin-right: 0; 
}

/* Перенос первой колонки в каждом ряду на новую строку */
.col2:nth-child(2n + 1), 
.col3:nth-child(3n + 1),
.col4:nth-child(4n + 1), 
.col6:nth-child(6n + 1) {
 clear: left; 
}

/* Ограничение максимальной ширины контента в колонках */
.col2 *, 
.col3 *, 
.col4 *, 
.col6 * { 
 max-width: 100%; 
}

/* Стили кнопок */
.button {
 display: inline-block; /* Разрешаем тексту обтекать кнопку */
 padding: 0 20px; /* Отступы внутри кнопки */
 height: 40px;
 line-height: 40px; /* Выравнивание текста по вертикали */
 border-radius: 0; /* Прямоугольная форма */
 font-weight: 500; /* Средний вес шрифта */
 box-sizing: border-box; /* Учитываем padding и border в ширине */
}

/* Модификаторы кнопок */

/* Цветная кнопка */
.button.color { 
 color: #fff; /* Белый текст */
}
.button.color:hover {
background: radial-gradient(circle at center, rgb(29 152 73) 0%, rgba(26, 141, 67, 0.2) 100%, rgb(0 0 0 / 5%) 100%, rgba(26, 141, 67, 0) 100%);
 color: #3F3836; /* Темно-серый текст при наведении */
 transform: translateY(-2px); /* Лёгкое поднятие */ 
}
.button.big:active {
 transform: translateY(0); /* Возврат при нажатии */
}
/* Кнопка без фона */
.button.nobg:hover {
 color: #3f3836; /* Темно-серый текст при наведении */
}

/* Внутренний элемент кнопки (например, иконка или текст) */
.button > span {
 font-size: 15px;
 padding-left: 8px; /* Отступ слева для иконки или текста */
 vertical-align: middle; /* Выравнивание по вертикали */
 position: relative;
 top: -1px; /* Небольшое смещение вверх */
}

/* Размеры кнопок */
.button.medium { /* Средний размер */
 font-size: 15px;
 font-weight: 600; /* Полужирный */
 line-height: 51px;
 height: 50px;
}

.button.big { /* Большой размер */
 font-size: 15px;
 height: 60px;
 line-height: 60px;
 padding: 0 40px; /* Большие отступы внутри кнопки */
 font-weight: 600; /* Полужирный */
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
}

/* Цветовые схемы кнопок */
.button.white { /* Белая кнопка */
 background: #fff; /* Белый фон */
 color: #3f3836; /* Темно-серый текст */
}
.button.white:hover { /* Hover для белой кнопки */
 color: #fff; /* Белый текст */
}

.button.light { /* Светлая кнопка */
 color: #3f3836; /* Темно-серый текст */
 background: #ededed; /* Светло-серый фон */
}
.button.light:hover { /* Hover для светлой кнопки */
 background: #dadada; /* Темно-серый фон */
}

.button.dark { /* Темная кнопка */
 color: #fff; /* Белый текст */
 background: #3f3836; /* Темно-серый фон */
}
.button.dark:hover { /* Hover для темной кнопки */
 background: #dadada; /* Темно-серый фон */
 color: #3f3836; /* Темно-серый текст */
}

/* Основной контейнер (обертка) сайта */
#wrapper {
 background: #fff; /* Белый фон */
 overflow: hidden; /* Скрываем содержимое, выходящее за границы */
 max-width: 1920px; /* Максимальная ширина */
 margin: 0 auto; /* Центрируем по горизонтали */
 box-shadow: 0 0 70px rgba(0, 0, 0, 0.2); /* Тень */
}

/* Шапка сайта */
#header {
 padding: 23px 0; /* Верхний и нижний отступы 23px */
 position: fixed; /* Фиксируем шапку при прокрутке */
 top: 0;
 left: 0;
 z-index: 999; /* Помещаем шапку поверх других элементов */
 width: 100%;
 box-sizing: border-box; /* Включаем padding и border в ширину */
 transition: all .3s ease; /* Плавный переход */
 opacity: 1;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */

}

/* Шапка при прокрутке */
#header.scroll {
 padding: 0;
 background: var(--frost-bg);
}

/* Нижняя часть шапки (возможно, для меню) */
.header-bottom {
 height: 100px; 
}

/* Фоновое изображение шапки */
.header-image {
 height: 130px;
 background: #f6f6f6; /* Светло-серый фон */
}

/* Контейнер внутри шапки */
#header .cnt {
 position: relative; 
}

/* Логотип */
.logo {
 float: left;
 display: block;
 margin-right: 120px; /* Отступ справа */
 line-height: 50px; /* Высота строки для вертикального выравнивания */
 font-size: 28px;
 font-weight: 700; /* Жирный */
 color: #3f3836; /* Темно-серый */
 padding-top: 4px;
}

.logo img {
 vertical-align: bottom; /* Выравнивание изображения по нижнему краю */
}

/* Корзина покупок */
#shop-basket {
 float: right; /* Выравнивание по правому краю */
 position: relative; /* Позиционирование для выпадающего списка */
 z-index: 999; /* Указываем, что корзина должна быть выше других элементов */
 margin-bottom: -20px; 
 margin-right: -30px; 
 padding: 5px 30px 20px; 
}

/* Заголовок корзины (иконка или текст) */
.shop-header {
 height: 46px;
 line-height: 46px !important; /* Фиксируем высоту строки, игнорируя другие стили */
 margin-top: -1px; 
 font-size: 24px;
 cursor: pointer; /* Курсор в виде указателя */
 position: relative; /* Позиционирование для счетчика */
 transition: all .3s ease; /* Плавный переход */
}

/* Счетчик товаров в корзине */
.shop-header span {
 display: block;
 position: absolute;
 top: 4px;
 right: -7px;
 width: 17px;
 height: 17px;
 line-height: 15px;
 text-align: center;
 color: #fff; /* Белый текст */
 font-size: 9px !important; /* Фиксируем размер шрифта */
 font-family: 'Montserrat';
 border-radius: 10px; /* Закругленные углы */



 box-sizing: border-box;
 padding-left: 1px !important;
 border: 1px solid #fff; /* Белая рамка */
}

/* Содержимое корзины (выпадающий список) */
.b-body {
 position: absolute;
right: -99999px;
 top: 66px;
 width: 350px;
 box-sizing: border-box;
 opacity: 0;
 transition: opacity 0.3s ease;
 background: var(--light-bg);
 padding: 16px;
 border-radius: 12px;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
}

/* Стили для открытой корзины */
#header.cart-opened .b-body {
 opacity: 1; /* Делаем содержимое видимым */
 right: 0px;
}

/* Список товаров в корзине */
.b-list { /* Общие стили для списка */
 margin: 0;
 padding: 0;
 list-style: none; /* Убираем маркеры списка */
}

/* Элементы списка товаров */
#shop-basket .b-list li { 
 padding: 0;
 margin: 0 0 25px; /* Отступ снизу */
}

/* Очистка float в элементах списка корзины */
.b-list li:after {
 content: '';
 display: block;
 clear: both; /* Очищаем обтекание, чтобы следующие элементы отображались на новой строке */
}

/* Стили изображения товара в корзине */
.b-list-image {
 float: left; /* Размещаем изображение слева */
 position: relative; /* Позиционирование для дочерних элементов */
 width: 60px; /* Ширина изображения */
 box-sizing: border-box; /* Учитываем padding и border в ширине */
}

.b-list-image img {
 vertical-align: bottom; /* Выравниваем изображение по нижнему краю */
 width: 60px; /* Ширина изображения */
 border: 1px solid #ededed; /* Светло-серая рамка */
 border-radius: 0; /* Без скругления углов */
 box-sizing: border-box;
}

/* Значок на изображении товара (например, количество) */
.b-list-image > b {
 display: block;
 width: 16px;
 height: 16px;
 line-height: 16px; /* Выравнивание текста по вертикали */
 text-align: center;
 border-radius: 10px; /* Закругленные углы */
 color: #fff; /* Белый текст */
 font-size: 8px;
 font-weight: 600; /* Полужирный */
 position: absolute;
 top: -4px;
 right: -4px;
 box-sizing: border-box;
 padding-left: 1px;
 z-index: 3; /* Помещаем значок поверх изображения */
}

/* Элемент для удаления товара (крестик?) */
.b-list-image > span {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 width: 100%;
 height: 100%;
 line-height: 60px; /* Выравнивание текста (крестика) по вертикали */
 text-align: center;
 font-size: 30px;
 box-sizing: border-box;
 color: #f42323; /* Красный цвет */
 background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый фон */
 border: 1px solid #ededed; /* Светло-серая рамка */
 border-radius: 0;
 z-index: 2;
 transition: all .3s ease; /* Плавный переход при наведении */
 opacity: 0; /* Скрываем по умолчанию */
}

/* Элементы списка товаров в корзине */
.b-list li:hover .b-list-image > span { /* Показываем кнопку удаления при наведении */
 opacity: 1;
}

/* Описание товара в корзине */
.b-list-text { 
 margin-left: 80px; /* Отступ слева от изображения */
 line-height: 18px; /* Высота строки */
}

.b-list-text > a { /* Ссылка на товар */
 color: #7a7a7a; /* Серый цвет */
 display: inline-block;
 line-height: 17px;
}
.b-list-text > a:hover { /* Ссылка на товар при наведении */
 color: #3f3836; /* Темно-серый цвет */
}

.b-list-text > b { /* Название товара (жирный текст) */
 display: block;
 font-weight: 600; /* Полужирный */
 color: #3f3836; /* Темно-серый */
 padding-top: 5px; /* Отступ сверху */
}

.b-list-text i { /* Дополнительная информация о товаре (напр., размер) */
 font-size: 11px; /* Уменьшенный размер шрифта */
 color: #a7a7a7; /* Светло-серый */
}

/* Итоговая сумма в корзине */
.b-total { /* Контейнер для итоговой суммы */
 padding-top: 25px; /* Отступы */
 padding-bottom: 20px;
 border-bottom: 1px solid #ededed; /* Разделитель под итогом */
}

.b-total > b { /* Жирный текст итоговой суммы */
 display: inline-block;
 padding-left: 5px;
 color: #3f3836; /* Темно-серый */
 font-size: 20px;
 font-weight: 600; /* Полужирный */
}

/* Кнопки в корзине */
.b-buttons {
 overflow: hidden;
 padding-top: 20px;
}

.b-buttons .button:first-child { /* Отступ между кнопками */
 margin-right: 5px;
}

/* Профиль пользователя */
.tprofile {
 float: right; /* Выравнивание по правому краю */
 margin-right: 5px;
 padding-top: 5px;
 position: relative; /* Позиционирование для выпадающего меню */
}

/* Иконка профиля пользователя */
span.tprofile-icon {
 display: block;
 height: 46px;
 line-height: 46px; /* Вертикальное выравнивание текста */
 text-align: center;
 font-size: 22px;
 color: #3f3836; /* Темно-серый */
 cursor: pointer;
 transition: all .3s ease; /* Плавный переход */
}

/* Выпадающее меню профиля */
.tprofile-body {
 background: #fff; /* Белый фон */
 position: absolute;
 top: 66px;
 right: -999999px; /* Скрываем по умолчанию */
 width: 290px;
 box-sizing: border-box;
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 padding: 30px;
 border-radius: 0;
 text-align: center;
 opacity: 0; /* Скрываем по умолчанию */
 transition: opacity .3s ease; /* Плавное появление */
}

.tprofile.opened .tprofile-body { /* Открытое меню профиля */
 right: -57px; /* Позиционирование справа от иконки */
 opacity: 1; /* Делаем видимым */
}

/* Аватар пользователя */
.tprofile-ava {
 width: 80px;
 border-radius: 0;
 vertical-align: bottom; /* Выравнивание по нижнему краю */
}

/* Имя пользователя */
.tprofile-name {
 padding-top: 20px;
}
.tprofile-name b {
 font-weight: 600;
 color: #3f3836;
}

/* Ссылки в профиле */
.tprofile-links a:hover {
 color: #3f3836;
}
.tprofile-links span {
 padding: 0 7px;
 font-size: 11px;
}

/* Список в профиле */
.tprofile-list { 
 list-style: none; /* Убираем маркеры */
 margin: 20px 0 0;
 border-top: 1px solid #ededed; /* Разделитель */
 padding: 20px 0 0;
 text-align: left;
}

.tprofile-list li { 
 padding: 0 0 10px; 
}
.tprofile-list li a { 
 color: #3f3836; 
}
.tprofile-list li a:hover { 
 transform: scale(1.05);
 color: #2F9854;
}
.tprofile-list li span { /* Иконки перед пунктами списка */
 display: inline-block;
 text-align: center;
 margin-right: 15px;
 width: 20px;
 font-size: 20px;
 position: relative;
 top: 4px;
}

/* Выбор валюты */
.tprofile-body #shop-currency {
 margin-top: 15px;
}
.tprofile-body #shop-currency select {
 width: 100%;
 height: 46px;
}

/* Иконка поиска */
span.search-icon {
 float: right; /* Выравнивание по правому краю */
 margin-right: 35px; 
 padding-top: 5px;
 display: block;
 height: 46px;
 line-height: 46px; /* Вертикальное выравнивание иконки */
 text-align: center;
 font-size: 22px; /* Размер иконки */
 color: #3f3836; /* Темно-серый */
 cursor: pointer; /* Курсор в виде указателя */
 transition: all .3s ease; /* Плавный переход */
}

/* Форма поиска */
#s-form {
 position: absolute; /* Позиционирование относительно родителя */
 top: 0;
 left: -999999px; /* Скрываем за пределами экрана */
 height: 56px;
 width: 100%;
 padding: 0 10px;
 margin-left: -10px;
 margin-right: -10px;
 background: #fff; /* Белый фон */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 z-index: 99999; /* Выше всех остальных элементов */
 border-radius: 0; /* Прямоугольная форма */
 overflow: hidden; /* Скрываем содержимое, выходящее за пределы */
 opacity: 0; /* Скрываем форму по умолчанию */
 transition: opacity .3s ease; /* Плавное появление */
}

#s-form.opened { /* Открытая форма поиска */
 opacity: 1;
 left: 0; /* Перемещаем форму в видимую область */
}

/* Поле ввода текста */
input.s-text {
 position: absolute;
 width: 100%;
 height: 100%;
 border: 0; /* Без рамки */
 font-size: 15px;
 padding-right: 112px; /* Отступ справа для кнопки поиска */
 background: #fff; /* Белый фон */
}
input.s-text:focus { /* При фокусе */
 box-shadow: none; /* Убираем тень */
}

/* Кнопка закрытия формы */
span.s-close {
 position: absolute;
 top: 0;
 right: 0;
 width: 56px;
 height: 22px;
 line-height: 22px; /* Вертикальное выравнивание текста */
 cursor: pointer; /* Курсор в виде указателя */
 text-align: center;
 font-size: 22px; /* Размер крестика */
 color: #3f3836; /* Темно-серый */
 margin-top: 17px; /* Отступ сверху */
 transition: all .3s ease; /* Плавный переход */
 border-left: 1px solid #ededed; /* Разделитель слева */
}

/* Кнопка поиска */
button.s-button {
 position: absolute;
 top: 0;
 right: 57px; /* Положение кнопки */
 background: 0; /* Без фона */
 padding: 0;
 color: #3f3836; /* Темно-серый */
 width: 56px;
 height: 56px;
 line-height: 59px; /* Вертикальное выравнивание иконки */
 text-align: center;
 font-size: 19px; /* Размер иконки */
}

/* Слайдер */
.slider { 
 position: relative; /* Позиционирование для элементов слайдера */
}

/* Слайды */
.slide { 
 padding-top: 165px; 
 padding-bottom: 65px;
 background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
}

/* Правая часть слайда */
.slide-right {
 float: right; /* Выравнивание по правому краю */
 position: relative; 
 width: 670px; /* Ширина */
}

.slide-right img { /* Изображение в правой части слайда */
 width: 100%;
 border-radius: 50%; /* Круглое изображение */
filter: drop-shadow(0px 30px 30px rgba(0, 0, 0, 0.2));
}

/* Цена на слайде */
.slide-price {
width: 130px;
 height: 130px;
 border-radius: 50%;
 background: #3f3836;
 color: #fff;
 text-align: center;
 line-height: 130px;
 font-size: 20px;
 font-weight: bold;
 position: absolute;
 right: 15px;
 top: 65px;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

<!--/* Декоративные точки справа */
.slide-dots-right {
 width: 0px;
 height: 0px;
 background: url(/img/imsa/slide-dots-right.png); /* Фоновое изображение */
 position: absolute;
 left: calc(100% + 20px); /* Справа от основного контента */
 top: calc(50% - 63px); /* Вертикальное центрирование */
}-->

/* Левая часть слайда */
.slide-left {
 float: left;
 width: 400px; /* Ширина */
 padding-top: 110px;
}

/* Первый текстовый блок на слайде */
.slide-text-1 {
 font-size: 50px;
 line-height: 70px;
 font-weight: 600; /* Полужирный */
 text-transform: uppercase; /* Все буквы заглавные */
 color: #3f3836; /* Темно-серый */
 position: relative; 
}

.slide-text-1 span { /* Текст внутри первого блока */
 position: relative;
 z-index: 2;
}

 <!--.slide-text-1:before { /* Декоративный элемент перед текстом */
!content: '';
 display: block;
 width: 250px;
 height: 130px;
 background: #3f3836 url(/img/imsa/slide-dots-left.png); /* Фон и изображение */
 position: absolute;
 top: -72px;
 left: -87px;
}-->

/* Второй текстовый блок на слайде */
.slide-text-2 {
 font-size: 15px;
 line-height: 24px;
 margin-top: 50px;
 margin-bottom: 30px;
}

/* Навигация слайдера (Owl Carousel) */
.slider .owl-nav {
 margin-top: 20px !important; /* Переопределяем верхний отступ */
 position: absolute;
 width: 100%;
 top: 50%; /* Вертикальное центрирование */
}

.slider .owl-nav span { /* Скрываем стандартные элементы навигации */
 display: none;
}

/* Кнопки навигации слайдера (Owl Carousel) */
.slider .owl-prev,
.slider .owl-next {
 background: none !important; /* Убираем фон */
 color: #3f3836 !important; /* Темно-серый цвет */
 position: absolute;
}

.slider .owl-prev {
 left: 50px; /* Позиционирование слева */
}

.slider .owl-next {
 right: 50px; /* Позиционирование справа */
}

/* Иконки навигации слайдера (Owl Carousel) */
.slider .owl-prev:before,
.slider .owl-next:before {
 content: ''; /* Убираем контент по умолчанию */
 font-family: 'Linearicons-Free'; /* Шрифт с иконками */
 font-size: 42px; /* Размер иконок */
 line-height: 50px; /* Вертикальное выравнивание иконок */
}

.slider .owl-prev:before {
 content: '\e879'; /* Иконка "предыдущий слайд" */
}

.slider .owl-next:before {
 content: '\e87a'; /* Иконка "следующий слайд" */
}

/* Стили секций */
.section {
 padding-top: 20px; /* Отступ сверху */
}

/* Модификаторы секций */
.section.mb-30 { 
 margin-bottom: -30px; /* Отрицательный отступ снизу */
}

.section.gray-bg {
background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
}

.section.gray-bg.pb-70 {
 padding-bottom: 70px; /* Отступ снизу (переопределение) */
}

/* Верхний контейнер */
.top-ct {
 display: block;
 box-sizing: border-box; /* Учитываем padding и border в ширине */
 text-align: center; /* Выравнивание текста по центру */
 border-radius: 0;
 background: #fff; /* Белый фон */
 overflow: hidden; /* Скрываем содержимое, выходящее за границы */
 position: relative; 
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
}
.top-ct:active:hover{
 transform: scale(0.95);
}
/* Изображение в контейнере */
.top-ct img {
 vertical-align: bottom;
 width: 100%; /* Занимаем всю ширину контейнера */
 border-radius: 0; /* Без скругления углов */
 transition: all .3s ease; /* Плавный переход при изменении свойств */ 
}
.top-ct:hover {
}
.col6:hover{
 transform: scale(1.05);
}

/* Заголовок в контейнере */
.top-ct h3 {
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
 margin: 0;
 padding: 0 10px 20px; /* Отступы */
 transition: all .3s ease; /* Плавный переход */
}

/* Заголовки секций */
.title {
 text-align: center; /* Выравнивание по центру */
 padding-bottom: 40px; /* Отступ снизу */
}

.title > b { /* Подзаголовок секции (жирный текст) */
 display: block; 
 font-size: 17px;
 line-height: 20px;
 font-weight: 500; /* Полужирный */
 margin-bottom: 10px; /* Отступ снизу */
 font-weight: bold; 
}

.title h2 { /* Основной заголовок секции */
 font-size: 30px;
 font-weight: 700; /* Жирный */
 line-height: 36px;
 margin-bottom: 0;
}

.title p { /* Описание секции */
 padding-top: 25px;
 font-size: 15px;
 line-height: 24px;
 max-width: 670px; /* Максимальная ширина описания */
 display: inline-block; /* Чтобы текст не занимал всю доступную ширину */
}

/* Элементы списков товаров */
.bestsallers .list-item,
.gp-more-goods .list-item {
 float: left;
 width: 23.076923076%; /* Ширина элемента списка */
 margin-right: 2.564102564%; /* Отступ справа */
 margin-top: 10px; /* Отступ сверху */
 margin-bottom: 30px; /* Отступ снизу */
}

/* Убираем правый отступ у каждого 4-го элемента */
.bestsallers .list-item:nth-child(4n),
.gp-more-goods .list-item:nth-child(4n) {
 margin-right: 0;
}

/* Перенос на новую строку каждого элемента, следующего за 4-м */
.bestsallers .list-item:nth-child(4n + 1),
.gp-more-goods .list-item:nth-child(4n + 1) {
 clear: left; /* Отменяем обтекание слева */
}

/* Контейнер изображения товара */
.g-img {
 position: relative; /* Позиционирование для меток */
}
.g-text {
 text-align: center;
 padding: 0 15px 10px 15px;
 font-weight: bold;
}
.g-img-link {
 display: block; /* Делаем ссылку блочной */
 text-align: center; /* Выравниваем изображение по центру */
}

.g-img img {
 max-width: 100%; /* Изображение занимает всю доступную ширину */
 border-radius: 0; /* Без скругления углов */
 vertical-align: bottom;
}
.g-name_1{
 color: #3f3836;
 font-size: 16px;
}
.g-price_1{
font-size: 18px;
 margin-top: 15px;
 color: #219149;
 text-align: center;
 margin-bottom: 10px;
}

/* Контейнер для меток (sale, new) */
.g-notes {
 position: absolute;
 top: 15px; /* Позиционирование в левом верхнем углу */
 left: 15px;
 z-index: 2; /* Уровень выше изображения */
 width: 36px;
}

/* Метки (sale, new) */
.g-sale, 
.g-new {
 display: block;
 text-align: center;
 height: 16px;
 line-height: 16px; /* Вертикальное выравнивание текста */
 border-radius: 0;
 margin-bottom: 5px; 
 color: #fff; /* Белый текст */
 font-size: 9px;
 font-weight: 500; /* Полужирный */
}

.g-sale { /* Метка "распродажа" */
 background: #3f3836; /* Темно-серый фон */
}

/* Кнопка "добавить в избранное" */
.g-img .wish {
 position: absolute;
 top: 15px; /* Позиционирование в правом верхнем углу */
 right: 15px;
 z-index: 2; /* Уровень выше изображения */
 cursor: pointer;
}

.g-img .wish:before { /* Иконка сердечка */
 content: '\e813'; 
 font-family: 'Linearicons-Free'; 
 color: #3f3836; /* Темно-серый */
 font-size: 18px;
}

.g-img .wish.wdel:before { /* Изменение цвета иконки при добавлении в избранное */
 color: #f12039; /* Красный */
}

/* Кнопка товара */
.g-button {
 display: block;
 line-height: 40px;
 border-radius: 0;
 width: calc(100% - 20px); /* Ширина кнопки с учетом отступов */
 text-align: center;
 background: #ededed;
 position: absolute;
 bottom: 0;
 left: 10px;
 font-weight: 600;
 opacity: 0;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Тень */
 transition: all .3s ease; /* Плавный переход */
}

/* Кнопка при наведении на товар */
.g-body:hover .g-button {
 opacity: 1;
 bottom: 10px; /* Отступ снизу при наведении */
}

.g-button span {
 position: relative;
 top: 1px;
 margin-left: 8px;
}

/* Кнопка при наведении: цвет текста и фон */
.g-button:hover {
 color: #fff;
 background: #3f3836;
}

/* Стили для конкретных кнопок */
.g-to-basket {
 color: #fff; /* Цвет текста кнопки "добавить в корзину" */
}

.g-to-options {
 background: #fff; /* Фон кнопки "выбрать опции" */
 color: #3f3836; /* Цвет текста кнопки "выбрать опции" */
}

/* Название товара */
.g-name {
 display: block; /* Блочный элемент для переноса на новую строку */
 color: #3f3836; /* Темно-серый цвет */
 font-size: 15px;
 font-weight: 500; /* Средний вес шрифта */
 margin-top: 20px; /* Отступ сверху */
 line-height: 20px;
 display: none;
}

<!--/* Название товара на мобильных устройствах */
.g-name-mobile {
 font-size: 18px; /* Увеличиваем размер шрифта */
 font-weight: bold; /* Жирный шрифт */
}-->

/* Описание товара (краткое) */
.g-brief {
 margin-top: 15px; /* Отступ сверху */
 display: none; /* Скрыто по умолчанию */
}

/* Цена товара */
.g-price {
 font-size: 18px;
 font-weight: 700; /* Жирный */
 margin-top: 10px; /* Отступ сверху */
 display: none;
}
.g-price s { /* Старая цена (зачёркнутая) */
 color: #a7a7a7; /* Светло-серый */
 font-weight: 400; 
 font-size: 13px;
 padding-left: 10px; /* Отступ слева */
}

/* Промо-блок */
.promo {
background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
 margin-top: 70px; /* Отступ сверху */
 padding: 100px 0; /* Верхний и нижний отступы */
}

/* Левая часть промо-блока (изображение) */
.promo-left {
 float: left;
 width: 570px;
 position: relative; /* Для позиционирования элементов внутри */
}
.promo-left img {
 width: 100%; 
 border-radius: 570px; /* Круглое изображение */
 box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
 vertical-align: bottom;
 transition: transform 0.3s ease;
 
}
.promo-left img:hover{
 transform: scale(1.02);
 box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;

}
.promo-left img:active:hover{
 transform: scale(0.98);
 box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;

}

/* Метка "Sale" на изображении */
.promo-sale {
 width: 120px;
 height: 120px;
 text-align: center;
 color: #fff; /* Белый текст */
 font-size: 15px;
 font-weight: 500;
 border-radius: 50%; /* Круг */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); /* Тень */
 position: absolute;
 top: 30px; 
 right: 0;
 background: #3f3836; /* Темно-серый фон */
 box-sizing: border-box;
 padding-top: 38px;
}
.promo-sale b { /* Процент скидки */
 display: block;
 font-size: 24px;
 line-height: 24px;
 font-weight: 700; /* Жирный */
}

/* Правая часть промо-блока (текст) */
.promo-right {
 float: right;
 width: 500px;
 padding-top: 75px;
}
.promo-right .title { /* Заголовок в правой части */
 text-align: left; 
 padding-bottom: 20px;
}

/* Цена в промо-блоке */
.promo-price {
 font-size: 20px;
 font-weight: 700; /* Жирный */
 margin-bottom: 20px;
}
.promo-price s { /* Старая цена (зачёркнутая) */
 font-size: 15px;
 font-weight: 400;
 color: #a7a7a7; /* Светло-серый */
 padding-right: 10px;
}

/* Текст промо-блока */
.promo-text {
 font-size: 15px;
 line-height: 26px;
}

/* Таймер обратного отсчета */
.promo-timer {
 padding: 40px 0 45px 10px;
}

.promo-timer .countdown-period {
 display: block;
 position: absolute;
 top: -3px;
 left: -43px;
 text-transform: lowercase; /* Нижний регистр */
 font-size: 11px;
 text-align: right;
 width: 70px;
 transform: rotate(-90deg); /* Поворачиваем текст */
}

.promo-timer .countdown-amount {
 display: inline-block;
 box-sizing: border-box;
 height: 70px;
 line-height: 70px;
 color: #3f3836; /* Темно-серый */
 text-align: left;
 font-size: 50px;
 font-weight: 400;
 position: relative; 
}

.promo-timer .countdown-section {
 position: relative;
 margin-right: 45px;
}

/* Навигация в секции с каруселью Owl Carousel */
.owl-section .owl-carousel .owl-nav {
 position: absolute;
 width: 100%;
 top: calc(50% - 40px); /* Вертикальное центрирование */
 z-index: 3; /* Уровень выше контента слайдера */
}

/* Кнопки навигации */
.owl-section .owl-carousel .owl-nav button {
 height: 46px;
 width: 35px;
 text-align: center;
 position: absolute;
 top: 0;
 background: none; /* Убираем фон */
 cursor: pointer; /* Курсор в виде указателя */
}

/* Отключенная кнопка */
.owl-section .owl-carousel .owl-nav button.disabled {
 cursor: default; /* Курсор по умолчанию */
}

/* Кнопка при наведении */
.owl-section .owl-carousel .owl-nav button:hover {
 background: none; /* Фон не меняется при наведении */
}

/* Иконки в кнопках навигации */
.owl-section .owl-carousel .owl-nav button span {
 color: #3f3836; /* Темно-серый цвет */
 font-size: 30px;
 line-height: 47px; /* Выравнивание по вертикали */
 box-sizing: border-box;
 padding-left: 1px;
}

/* Положение кнопок "предыдущий" и "следующий" */
.owl-section .owl-carousel .owl-nav button.owl-prev {
 left: -70px; /* Слева от слайдера */
}
.owl-section .owl-carousel .owl-nav button.owl-next {
 right: -70px; /* Справа от слайдера */
}

/* Внешний контейнер слайдов */
.owl-section .owl-carousel .owl-stage-outer {
 padding: 30px 20px; /* Внутренние отступы */
 margin: -30px -20px; /* Отрицательные внешние отступы */
}

/* Стрелки карусели */
.carousel-left,
.carousel-right {
 display: block;
 width: 35px;
 height: 1px;
 background: #3f3836; /* Темно-серый фон */
 position: relative; /* Для позиционирования псевдоэлементов */
}

.carousel-left:before,
.carousel-left:after,
.carousel-right:before,
.carousel-right:after {
 content: '';
 width: 17px;
 height: 1px;
 background: #3f3836; /* Темно-серый фон */
 position: absolute;
}

/* Стрелка влево */
.carousel-left:before {
 top: -6px; /* Положение сверху */
 left: -2px;
 transform: rotate(-45deg); /* Поворот на -45 градусов */
}

.carousel-left:after {
 bottom: -6px; /* Положение снизу */
 left: -2px;
 transform: rotate(45deg); /* Поворот на 45 градусов */
}

/* Стрелка вправо */
.carousel-right:before {
 top: -6px; /* Положение сверху */
 right: -2px;
 transform: rotate(45deg); /* Поворот на 45 градусов */
}

.carousel-right:after {
 bottom: -6px; /* Положение снизу */
 right: -2px;
 transform: rotate(-45deg); /* Поворот на -45 градусов */
}

/* Стили для навигации (предположительно в header) */
.nh { 
 padding: 25px 0; /* Верхний и нижний отступ */
}

.nh-left { /* Левая часть навигации */
 float: left;
 color: #fff; /* Белый текст */
 font-size: 18px;
 font-weight: 600; /* Полужирный */
 padding: 15px 0;
 margin-right: 50px; /* Отступ справа */
}

.nh-right { /* Правая часть навигации */
 float: right;
}

/* Футер */
#footer {
 background: #3f3836; /* Темно-серый фон */
 color: #a7a7a7; /* Светло-серый цвет текста */
}

#footer a { /* Ссылки в футере */
 color: #a7a7a7; /* Светло-серый цвет */
}

.f-top { /* Верхняя часть футера */
 padding-top: 80px; /* Отступы */
 padding-bottom: 50px;
}

.f-contact { /* Контактная информация */
 overflow: hidden; /* Для очистки float */
}

.f-contact:first-child { /* Первый элемент контактной информации */
 margin-bottom: 10px; /* Отступ снизу */
}

.f-contact > span { /* Иконка/заголовок контакта */
 float: left;
 font-size: 20px;
}

.f-contact > p { /* Текст контакта */
 margin-left: 35px; /* Отступ слева */
}

.f-copy { /* Копирайт */
 padding: 35px 0; /* Отступы */
 border-top: 1px solid rgba(255, 255, 255, 0.07); /* Разделитель */
}

.f-athemes { /* Ссылка на разработчика темы? */
 font-weight: 500; /* Полужирный */
}

/* Навигация по страницам (пагинация) */
.path {
 padding: 20px 0;
 background: #f4f4f4; /* Светло-серый фон */
 color: #fff; /* Белый текст */
 text-align: center;

}

.path a { /* Ссылки в пагинации */
 color: #fff; /* Белый цвет */
}

.path span.lnr { /* Разделитель в пагинации */
 margin: 0 10px; /* Отступы */
 position: relative;
 top: 1px;
}

/* Основные блоки контента */
#content {
 float: right;
 width: 72.649572649%; 
}

#sidebar {
 float: left;
 width: 23.076923076%; 
}

/* Информация о категории */
.cat-info {
 overflow: hidden; /* Очистка float */
 margin-bottom: 40px; /* Отступ снизу */
}

.cat-info h1 { /* Заголовок категории */
 font-size: 17px;
 line-height: 24px;
 margin-bottom: 20px;
 font-weight: 700; /* Жирный */
 text-transform: uppercase; /* Все буквы заглавные */
}

/* Панель сортировки */
.sort-panel {
 box-sizing: border-box; /* Учитываем padding и border в ширине */
 padding: 16px 25px; /* Внутренние отступы */
 border-radius: 0; /* Без скругления углов */
 margin-bottom: 40px; /* Отступ снизу */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
}

/* Левая часть панели сортировки */
.sort-panel-left {
 float: left;
}

.sort-panel-left select { /* Выпадающий список сортировки */
 height: 20px;
 line-height: 20px;
 background: none; /* Прозрачный фон */
 padding: 0 20px 0 5px;
 background-position: right 9px;
 color: #7a7a7a; /* Серый */
 position: relative;
 z-index: 2; /* Помещаем поверх других элементов */
 transition: all .3s ease; /* Плавный переход */
}

.sort-panel-left select:hover { /* При наведении */
 color: #3f3836; /* Темно-серый */
}

.sort-panel-left span { /* Текст рядом с выпадающим списком */
 font-size: 11px;
 vertical-align: middle;
 margin-left: -15px;
}

.sort-panel-left b {
 font-weight: 400; /* Обычный */
}

.sort-panel-left i { /* Иконка (скрыта) */
 font-size: 20px;
 vertical-align: middle;
 display: none;
}

/* Правая часть панели сортировки */
.sort-panel-right {
 float: right;
}

/* Переключатели режимов отображения товаров */
.goods-view-mode-grid,
.goods-view-mode-list {
 display: inline-block;
 width: 20px;
 height: 20px;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 6px; /* Отступ слева */
}

/* Сетка */
.goods-view-mode-grid span {
 display: block;
 float: left;
 width: 5px; /* Размер квадрата */
 height: 5px;
 margin-right: 2px;
 margin-bottom: 2px;
 background: #ededed; /* Светло-серый фон */
 transition: all .3s ease; /* Плавный переход */
}
.goods-view-mode-grid span:nth-child(3n) { /* Каждый третий квадрат в ряду */
 margin-right: 0;
}

/* Список */
.goods-view-mode-list span {
 display: block;
 float: left;
 height: 5px; /* Размер полоски */
 width: 5px;
 margin-right: 2px;
 margin-bottom: 2px;
 background: #ededed; /* Светло-серый фон */
 transition: all .3s ease; /* Плавный переход */
}
.goods-view-mode-list span:nth-child(even) { /* Каждая вторая полоска в ряду */
 margin-right: 0;
 width: 12px; /* Делаем полоску шире */
}

/* Hover для кнопок */
.goods-view-mode-grid:hover span,
.goods-view-mode-list:hover span {
 background: #3f3836; /* Темно-серый фон при наведении */
}

/* Активный режим отображения */
.goods-view-mode-active {
 cursor: default; /* Курсор по умолчанию (не указатель) */
}

/* Элементы списка товаров в контейнере #content */
#content .list-item {
 float: left;
 margin-right: 3.448275862%;
 margin-bottom: 40px;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 border-radius: 6px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

/* Убираем правый отступ для каждого третьего элемента */
#content .list-item:nth-child(3n) {
 margin-right: 0;
}

/* Перенос первого элемента в каждой строке на новую строку */
#content .list-item:nth-child(3n+1) {

}

/* Кнопка "Показать ещё" */
#shop-page-more button {
 width: 100%; 
 background: #ededed; /* Светло-серый фон */
 border-radius: 0;
 color: #3f3836; /* Темно-серый текст */
 font-size: 13px;
 font-weight: 600; /* Полужирный */
 text-transform: none; 
 box-sizing: border-box; 
 height: 46px;
 line-height: 46px; /* Выравнивание текста по вертикали */
 transition: all .3s ease; /* Плавный переход */
}

#shop-page-more button:hover {
 background: #f2f2f2; /* Более светлый фон при наведении */
}

#shop-page-more button span { /* Иконка/текст в кнопке */
 line-height: 20px;
 vertical-align: middle;
 font-size: 16px;
 margin-left: 7px; /* Отступ слева от текста/иконки */
 position: relative;
 transition: all .3s ease; /* Плавный переход */
}

#shop-page-more button:hover span { /* При наведении смещаем текст/иконку */
 margin-left: 12px; 
}

/* Общие стили для блоков */
.block {
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 border-radius: 0;
 padding: 50px 40px; /* Отступы внутри */
 margin-bottom: 40px; /* Отступ снизу */
 border: 2px solid #ededed; /* Светлая рамка */
}

/* Заголовки блоков */
.block-title {
 font-size: 15px;
 font-weight: 700; /* Жирный */
 text-transform: uppercase;
 color: #3f3836;
 padding-bottom: 30px; /* Отступ снизу */
}

/* Обертка для блока фильтров */
.shop-spec-filter-wrapper {
 position: relative;
 padding-bottom: 46px;
}

/* Кнопка сброса фильтра */
#reset-filter-btn {
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 display: block !important; /* Переопределяем display для отображения кнопки */
}

#reset-filter-btn a {
 display: block;
 text-align: center;
 border-radius: 0;
 box-sizing: border-box;
 height: 40px;
 line-height: 40px; /* Выравниваем текст по вертикали */
 background: #ededed; /* Светло-серый фон */
 font-weight: 600; /* Полужирный */
 color: #3f3836; /* Темно-серый текст */
}

#reset-filter-btn a:hover { /* Изменение стиля при наведении */
 color: #fff; /* Белый текст */
 background: #3f3836; /* Темно-серый фон */
}

/* Затемнение блока с фильтрами */
#spec-filter-fade {
 position: absolute;
 top: 0 !important; /* Переопределяем top для правильного позиционирования */
 left: 0 !important; /* Переопределяем left для правильного позиционирования */
 padding: 20px;
 margin: -20px;
 border-radius: 0;
}

/* Заголовки и значения фильтров */
.spec-filter-title span {
 font-size: 13px !important; /* Переопределяем размер шрифта */
}

.spec-filter-title {
 margin-bottom: 5px; /* Отступ снизу */
}

.spec-filter {
 margin-bottom: 20px; /* Отступ снизу */
}

.spec-val-text { 
 cursor: pointer; /* Курсор в виде указателя */
}

/* Ценовой слайдер */
.price-slider-wrap {
 padding: 0 7px;
 position: relative; /* Позиционирование для псевдоэлемента */
}

.price-slider-wrap:before { /* Линия слайдера */
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 background: #ededed; /* Светло-серый фон */
 height: 2px;
 border-radius: 5px;
}

#price-slider-margin-value-min { /* Минимальное значение слайдера */
 float: left;
 margin-bottom: 10px; 
}

#price-slider-margin-value-max { /* Максимальное значение слайдера */
 float: right;
 margin-bottom: 10px;
}

#flist-item-price { /* Скрываем блок с ценой */
 display: none;
}

/* Отображение значений ценового слайдера */
.price-slider-val {
 overflow: hidden;
 color: #3f3836; /* Темно-серый текст */
}

/* Метки фильтров */
.flist-label {
 color: #3f3836; /* Темно-серый текст */
 margin-bottom: 10px; /* Отступ снизу */
 display: inline-block; /* Разрешаем тексту обтекать элемент */
 margin-top: 20px; /* Отступ сверху */
}

/* Выпадающие списки в фильтрах */
.flist-select {
 width: 100%; /* Занимаем всю ширину родителя */
 font-size: 12px;
 color: #3f3836; /* Темно-серый текст */
}

/* Дерево категорий внутри блока */
.block-body .cat-tree {
 color: #1a1a1a; /* Цвет текста */
 font-weight: 400; /* Обычный */
}

.block-body .cat-tree a {
 color: #1a1a1a; /* Цвет текста */
}

.block-body .cat-tree u { /* Убираем подчеркивание у тега <u> */
 text-decoration: none !important; 
}

/* Сброс стилей списков в дереве категорий */
.block-body ul.cat-tree,
.block-body ul.cat-tree ul,
.block-body ul.cat-tree li {
 padding: 0;
 margin: 0;
 list-style: none; /* Убираем маркеры */
}

.block-body > ul.cat-tree { /* Стили для первого уровня списка */
 padding: 0 !important; /* Переопределяем padding */
 background: #fff; /* Белый фон */
 margin-bottom: -15px; /* Отрицательный отступ снизу */
}

/* Стили для вложенных уровней списка */
.block-body ul.cat-tree ul { 
 display: none; /* Скрываем по умолчанию */
 padding-left: 10px; 
 margin: 10px 0 0 10px; /* Отступы */
 border-left: 1px solid #ededed; /* Разделитель слева */
}

.block-body ul.cat-tree b { /* Скрываем элемент <b> */
 display: none;
}

/* Стили элементов списка */
.block-body ul li, 
.block-body ul.cat-tree li {
 line-height: 16px;
 padding-top: 15px;
 padding-bottom: 15px; /* Отступы */
 position: relative; 
}

.block-body ul.cat-tree li {
 padding-top: 13px;
 padding-bottom: 13px;
}

/* Ссылки в списке при наведении */
.block-body ul.cat-tree a:hover {
 color: #1a1a1a;
 padding-left: 10px; /* Отступ слева */
}

.block-body > ul.cat-tree > li > a { 
 position: relative; 
}

/* Ссылки в дереве категорий */

/* Подчёркивание при наведении */
.block-body ul.cat-tree a:before {
 content: '';
 display: block;
 position: absolute;
 width: 0; /* Изначально невидимая линия */
 height: 1px;
 background: #777; /* Темно-серый */
 top: 50%; /* Позиционирование линии по середине высоты ссылки */
 left: 0;
 transition: width 0.3s ease; /* Плавный переход ширины при наведении */
}

.block-body ul.cat-tree li a:hover:before {
 width: 15px; /* Показываем линию при наведении */
}

/* Отступ при наведении */
.block-body ul.cat-tree li a:hover {
 padding-left: 25px; /* Добавляем отступ слева при наведении */
}

/* Значки "+" и "-" для раскрытия/скрытия подкатегорий */
.block-body ul.cat-tree .plus:before,
.block-body ul.cat-tree .minus:before {
 content: ''; /* Очищаем содержимое по умолчанию */
 display: inline-block;
 font-family: 'Linearicons-Free'; /* Шрифт с иконками */
 font-size: 15px; /* Размер иконок */
 float: right;
 color: #1a1a1a; /* Темно-серый */
 cursor: pointer; /* Курсор "указатель" */
 width: 18px;
 height: 18px;
 line-height: 18px; /* Выравнивание текста */
 text-align: center;
 border-radius: 50%; /* Круглая форма */
 transition: all .3s ease; /* Плавный переход */
}

.block-body ul.cat-tree .plus:before {
 content: '\e87a'; /* Иконка "плюс" */
}

.block-body ul.cat-tree .minus:before {
 content: '\e879'; /* Иконка "минус" */
}

/* Стили для подменю категорий при ширине экрана от 1278px */
@media (min-width: 1278px) {

 .block-body ul.cat-tree ul {
 display: block !important; /* Отображаем подменю */
 position: absolute; 
 background: #fff; /* Белый фон */
 top: 40px;
 right: -99999px; /* Скрываем за пределы экрана по умолчанию */
 width: 220px; /* Ширина подменю */
 border: none;
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 z-index: 1002; /* Отображаем поверх других элементов */
 padding: 15px 30px; /* Отступы внутри подменю */
 transition: opacity .3s ease, top .3s ease; /* Плавный переход прозрачности и положения */
 opacity: 0; /* Скрываем подменю по умолчанию */
 }

 .block-body ul.cat-tree li:hover > ul {
 opacity: 1; /* Показываем подменю при наведении */
 top: -25px; /* Корректировка положения сверху */
 right: -280px; /* Позиционирование справа */
 }

 .block-body ul.cat-tree li.cat-tree-with-ul:hover > a {
 padding-left: 10px; /* Отступ слева при наведении на родительский элемент */
 }

 .block-body ul.cat-tree .plus:before,
 .block-body ul.cat-tree .minus:before {
 content: "\e87a"; /* Используем иконку "плюс" для всех элементов */
 }
}

/* Стили для подменю категорий при ширине экрана до 1279px */
@media (max-width: 1279px) {
 .block-body ul.cat-tree .plus:before {
 content: "\e874"; /* Значок "стрелка вправо" для раскрытия */
 }

 .block-body ul.cat-tree .minus:before {
 content: "\e873"; /* Значок "стрелка вниз" для скрытия */
 }
}

/* Отображение элементов списка в режиме списка */
#content .list-item-view-mode-list .list-item {
 float: none; /* Отменяем обтекание для элементов списка */
 width: 100%; /* Занимаем всю ширину контейнера */
 margin-right: 0; /* Убираем правый отступ */
}

/* Стили для контейнера товара */
#content .list-item-view-mode-list .list-item .g-body {
 border: 0 !important; /* Убираем рамку */
 box-shadow: none !important; /* Убираем тень */
 background: none !important; /* Убираем фон */
}
#content .list-item-view-mode-list .list-item .g-body:after { 
 content: '';
 display: block;
 clear: both; /* Очищаем обтекание */
}

/* Изображение товара */
#content .list-item-view-mode-list .list-item .g-img {
 float: left; /* Размещаем изображение слева */
 width: 220px; /* Фиксированная ширина изображения */
 border-radius: 0;
}

/* Текстовая часть товара */
#content .list-item-view-mode-list .list-item .g-text {
 margin-left: 250px; /* Отступ от изображения */
 text-align: left; /* Выравнивание текста по левому краю */
 padding: 0; /* Убираем отступы */
}

/* Название товара */
#content .list-item-view-mode-list .list-item .g-name {
 min-height: auto; /* Убираем минимальную высоту */
 font-size: 17px; /* Увеличиваем размер шрифта */
 line-height: 22px;
}

/* Краткое описание товара */
#content .list-item-view-mode-list .list-item .g-brief {
 display: block; /* Отображаем краткое описание */
}

/* Стрелка сайдбара (скрыта) */
.sidebar-arrow {
 display: none; 
}

/* Контейнер группы товаров (gp) */
.gp {
 margin-bottom: 20px; /* Отступ снизу */
}

/* Главное изображение группы товаров */
.gp-img {
 position: relative; /* Позиционирование для дополнительных элементов */
 float: left; /* Размещаем слева */
 width: 38.461538461%; /* Ширина */
}

.gp-img img {
 max-width: 100%; /* Занимаем всю доступную ширину */
 vertical-align: bottom; /* Выравнивание по нижнему краю */
 border-radius: 0;
}

/* Небольшие изображения группы товаров */
.gp-img-small {
 display: block;
 float: left; /* Размещаем в ряд */
 margin-top: 15px; /* Отступ сверху */
 width: 22.5%; /* Ширина */
 margin-right: 3.333333333%; /* Отступ справа */
}

.gp-img-small:nth-child(4n) { /* Убираем отступ справа у каждого 4-го изображения */
 margin-right: 0;
}

.gp-img-small:nth-child(4n + 1) { /* Переносим каждый 5-й элемент на новую строку */
 clear: left;
}

/* Информация о группе товаров */
.gp-info {
 float: right; /* Выравнивание по правому краю */
 width: 58.119658119%; /* Ширина блока */
}

/* Информация о наличии товара */
.gp-stock {
 display: inline-block;
 padding: 0 15px; /* Внутренние отступы */
 line-height: 30px; /* Высота строки */
 border-radius: 0; /* Без скругления углов */
 font-size: 11px;
 font-weight: 600;
 color: #3f3836; /* Темно-серый цвет */
 background: #ededed; /* Светло-серый фон */
}

/* Название группы товаров */
.gp-name {
 font-size: 20px;
 line-height: 22px;
 margin-top: 20px; /* Отступ сверху */
 font-weight: 700; /* Жирный */
}

/* Цена */
.gp-price {
 font-size: 18px;
 font-weight: 700; /* Жирный */
 margin-bottom: 15px; /* Отступ снизу */
}

.gp-price s { /* Старая цена (зачёркнутая) */
 font-size: 11px;
 font-weight: 400;
 color: #a7a7a7; /* Светло-серый */
 padding-left: 10px; /* Отступ слева */
}

/* Краткое описание группы товаров */
.gp-brief {
 padding-bottom: 15px; /* Отступ снизу */
}

/* Список дополнительных характеристик */
.gp-more {
 list-style: none; /* Убираем маркеры */
 margin: 0 0 20px; /* Отступы */
 padding: 0;
}
.gp-more li {
 margin-top: 7px; /* Отступ сверху у элементов списка */
}
.gp-more li b { /* Выделение жирным */
 font-weight: 600;
 padding-left: 5px;
 color: #3f3836; /* Темно-серый */
}

/* Опции товара */
.gp-options {
 margin-bottom: 15px; /* Отступ снизу */
}

.shop-options {
 list-style: none; /* Убираем маркеры списка */
 padding: 0;
 margin: 0;
}

/* Опции товара */
.gp-options .opt { /* Название опции */
 display: block;
 color: #3f3836; /* Темно-серый текст */
 font-weight: 500;
 padding-bottom: 2px; /* Отступ снизу */
}

.gp-options > ul > li { /* Элементы списка опций */
 padding-bottom: 15px;
 overflow: hidden; /* Для очистки float */
}

/* Метки для опций */
.gp-options label {
 position: relative;
 padding: 13px 15px;
 float: left; /* Размещаем метки в ряд */
 margin-right: 5px;
 font-weight: 500;
 color: #3f3836; /* Темно-серый текст */
}

/* Радиокнопки в опциях */
.gp-options label input[type="radio"] {
 width: 100%; /* Занимаем всю ширину метки */
 border-radius: 0;
 position: absolute;
 top: 0;
 left: 0;
 height: 44px; /* Высота радиокнопки */
 transition: all .3s ease; /* Плавный переход */
 border-width: 1px;
 border-color: #ededed; /* Светло-серая рамка */
}

.gp-options label input[type="radio"]:before { /* Скрываем стандартный маркер */
 display: none;
}

/* Выпадающий список значений опции */
.gp-options .val select {
 float: left;
 width: 70%;
 box-sizing: border-box;
}

/* Метка цвета (кастомная радиокнопка) */
.gp-options label.gp-color { /* Скрываем текст метки */
 text-indent: -999px; 
 margin-top: 2px;
 margin-bottom: -15px;
}

.gp-options label.gp-color input[type="radio"] {
 margin-left: 2px;
 border: 3px solid #fff; /* Белая рамка */
 border-radius: 0;
 width: 28px; /* Размер квадрата цвета */
 height: 28px;
}

/* Выбранная метка цвета */
.gp-options label.gp-color input[type="radio"]:checked {
 border-color: #fff;
 box-shadow: 0 0 0 1px #3f3836 !important; /* Тонкая темно-серая рамка при выборе */
}

/* Отмеченная радиокнопка (общий стиль) */
.gp-options label input[type="radio"]:checked {
 border-color: #3f3836; /* Темно-серая рамка */
}

/* Блок с кнопками действий с товаром */
.gp-buttons {
 margin-bottom: 10px; /* Отступ снизу */
}

.gp-buttons a { 
 margin-right: 3px;
 margin-bottom: 7px;
}

/* Добавление в избранное */
.gp-add .wish {
 display: inline-block;
 cursor: pointer;
 transition: all .3s ease; /* Плавный переход */
 margin-right: 20px;
}

/* Кнопка "Отложить" */
.gp-add .wish.wadd:before {
 content: '\e813'; /* Иконка из Linearicons-Free */
 font-family: 'Linearicons-Free';
 font-size: 16px;
 padding-right: 7px;
 position: relative;
 top: 2px;
}
.gp-add .wish.wadd:after {
 content: 'Отложить';
 font-weight: 400;
}

/* Кнопка "Отложено" */
.gp-add .wish.wdel:before {
 content: '\e87f'; /* Иконка из Linearicons-Free */
 font-family: 'Linearicons-Free';
 font-size: 16px;
 padding-right: 7px;
 position: relative;
 top: 2px;
}
.gp-add .wish.wdel:after {
 content: 'Отложено';
 font-weight: 400;
}

.gp-add .wish:hover { /* Изменение цвета при наведении */
 color: #3f3836;
}

/* Сравнение товаров */
.gp-add .compare-widget-wrapper {
 display: inline-block;
}

.gp-add .compare-widget-wrapper a { 
 display: none; /* Скрываем ссылку */
}

.gp-add .compare-widget {
 display: inline-block;
 cursor: pointer;
 transition: all .3s ease; /* Плавный переход */
}

/* Кнопка "Сравнить" */
.gp-add .compare-widget-add:before {
 content: '\e862'; /* Иконка из Linearicons-Free */
 font-family: 'Linearicons-Free';
 font-size: 16px;
 padding-right: 7px;
 position: relative;
 top: 2px;
}
.gp-add .compare-widget-add:after {
 content: 'Сравнить';
 font-weight: 400;
}

/* Кнопка "В сравнении" */
.gp-add .compare-widget-remove:before {
 content: '\e87f'; /* Иконка из Linearicons-Free */
 font-family: 'Linearicons-Free';
 font-size: 16px;
 padding-right: 7px;
 position: relative;
 top: 2px;
}
.gp-add .compare-widget-remove:after {
 content: 'В сравнении';
 font-weight: 400;
}

.gp-add .compare-widget:hover { /* Изменение цвета при наведении */
 color: #3f3836;
}

/* Описание группы товаров */
.gp-descr { /* Контейнер для описания */
 margin-bottom: 70px;
}

.gp-descr p { /* Параграфы внутри описания */
 margin-bottom: 20px;
}

/* Вторичный заголовок */
.title-2 {
 font-size: 18px;
 font-weight: 600;
 color: #3f3836; /* Темно-серый */
 margin-bottom: 20px;
}

/* Стили для элементов внутри описания */
.gp-descr * { 
 max-width: 100%; 
}

.gp-descr img { /* Изображения в описании */
 border-radius: 0;
}

/* Спецификации товара */
.gp-spec { /* Контейнер для спецификаций */
 margin-bottom: 80px;
}

table.shop_spec {
 width: 100%; /* Ширина таблицы */
 margin-top: -15px;
}

/* Ячейки таблицы характеристик */
.shop_spec_grp td {
 border-top: 0 !important; /* Убираем верхнюю границу */
 border-bottom: 1px dotted #dadada; /* Добавляем пунктирную нижнюю границу */
 font-weight: 400 !important; /* Устанавливаем обычный вес шрифта */
}

/* Контент ячейки таблицы характеристик */
.shop_spec_grp_td_content {
 background: #fff; /* Белый фон */
 float: left;
 margin-bottom: -23px; /* Отрицательный отступ снизу */
 padding: 15px 10px;
 margin-left: -10px; /* Отрицательный отступ слева */
 font-weight: 500;
 color: #3f3836; /* Темно-серый текст */
}

/* Последняя ячейка в группе */
.shop_spec_grp td:last-child .shop_spec_grp_td_content {
 float: none; /* Отменяем обтекание для последней ячейки */
}

/* Контент ячейки со значениями характеристик */
.shop_spec_val .shop_spec_grp_td_content {
 color: #7a7a7a; /* Серый цвет для значений */
 font-weight: 400; /* Обычный */
}

/* Вкладки */
.tabs {
 /* ... */
}

.tabs .tabs-head span { /* Заголовки вкладок */
 display: inline-block;
 font-size: 15px;
 font-weight: 700;
 text-transform: uppercase;
 color: #a7a7a7; /* Светло-серый цвет */
 cursor: pointer; /* Курсор в виде указателя */
 margin-right: 30px; /* Отступ справа */
 margin-bottom: 20px; /* Отступ снизу */
 transition: all .3s ease; /* Плавный переход */
}

.tabs .tabs-head span:last-child { /* Последний заголовок вкладки */
 margin-right: 0; /* Убираем отступ справа */
}

.tabs .tabs-head span.aTabsHeadSpanActive { /* Активный заголовок вкладки */
 color: #3f3836 !important; /* Темно-серый цвет (переопределение) */
 cursor: default; /* Курсор по умолчанию */
}

.tabs .tabs-body { /* Контейнер содержимого вкладок */
 margin: 0;
 padding: 0;
}

.tabs .tabs-body > li { /* Элементы содержимого вкладок */
 list-style: none; /* Убираем маркеры */
 margin: 0;
 padding: 0;
}

/* Дополнительные товары (под блоком с описанием товара) */
.gp-more-goods {
 margin-top: 80px; /* Отступ сверху */
}

/* Вторичный заголовок */
.title2 {
 font-size: 20px;
 font-weight: 700; /* Жирный */
 color: #3f3836; /* Темно-серый */
 padding-bottom: 25px;
}

/* Таблица характеристик товара */
table.shop_spec {
 width: 100%; /* Занимаем всю доступную ширину */
 margin-top: -15px; /* Отрицательный отступ сверху */
}

/* Ячейки таблицы спецификаций */
.shop_spec_grp td {
 border-top: 0 !important; /* Убираем верхнюю границу */
 border-bottom: 1px dotted #dadada; /* Пунктирная нижняя граница */
 font-weight: 400 !important; /* Обычный вес шрифта */
 padding-bottom: 10px; /* Отступ снизу */
 padding-top: 10px; /* Отступ сверху */
}

/* Содержимое ячейки таблицы */
.shop_spec_grp_td_content {
 background: #fff; /* Белый фон */
 float: left;
 margin-bottom: -23px; /* Отрицательный отступ снизу (для перекрытия рамки) */
 padding: 15px 10px; /* Отступы */
 margin-left: -10px; /* Отрицательный отступ слева (для перекрытия рамки) */
}

/* Последняя ячейка в группе характеристик */
.shop_spec_grp td:last-child .shop_spec_grp_td_content {
 float: none; /* Отменяем обтекание для последней ячейки */
}

/* Первая ячейка в группе характеристик (название) */
.shop_spec_grp td:first-child {
 font-weight: 500 !important; /* Устанавливаем полужирный шрифт */
 color: #0f202c; /* Темно-синий цвет текста */
}

/* Значения характеристик */
.shop_spec_val .shop_spec_grp_td_content {
 color: #7a7a7a; /* Серый цвет текста */
 font-weight: 400; /* Обычный */
}

/* Комментарии к товару */
.gp-comm { /* Контейнер для блока комментариев */
 margin-bottom: 40px; /* Отступ снизу */
}

.comm { /* Общий стиль для комментария */
 padding-top: 10px; /* Отступы */
 padding-bottom: 30px;
}

.comm-ava { /* Аватар пользователя */
 float: left;
 width: 100px; /* Ширина аватара */
 border-radius: 15px; /* Скругленные углы */
}

.comm-text { /* Текст комментария */
 margin-left: 125px; /* Отступ слева от аватара */
}

.comm-name { /* Имя пользователя */
 font-size: 16px;
 font-weight: 500; /* Полужирный */
 color: #0f202c; /* Темно-синий */
}

.comm-date { /* Дата комментария */
 font-size: 11px;
 color: #a7a7a7; /* Светло-серый */
 margin-bottom: 20px; /* Отступ снизу */
}

/* Плюсы и минусы товара */
.shop-pros, 
.shop-cons {
 display: block; /* Делаем элементы блочными */
}

.shop-pros b { /* Жирный текст для плюсов */
 display: block;
 font-size: 15px;
 font-weight: 500;
 color: #029c72; /* Зеленый цвет */
}

.shop-cons b { /* Жирный текст для минусов */
 display: block;
 font-size: 15px;
 font-weight: 500;
 color: #f02743; /* Красный цвет */
}

/* Блок добавления комментария */
.gp-comm-add {
 margin-bottom: 80px; /* Отступ снизу */
}

/* Ячейка с категориями в блоке */
.block .catsTd {
 padding-top: 20px; /* Отступ сверху */
}

.block tr:first-child .catsTd { /* Первая строка таблицы */
 padding-top: 10px; /* Уменьшенный отступ сверху */
}

/* Счетчик категорий (скрыт) */
.block .catNumData {
 float: right;
 display: none; 
}

/* Ссылки в ячейках категорий */
.block .catsTd a {
 display: block; /* Делаем ссылку блочной */
 color: #3f3836; /* Темно-серый текст */
 position: relative; /* Для позиционирования псевдоэлементов */
}

/* Подчёркивание ссылки при наведении */
.block .catsTd a:before {
 content: '';
 display: block;
 position: absolute;
 width: 0; /* Изначально невидимая линия */
 height: 1px;
 background: #777; /* Темно-серый цвет линии */
 top: 50%; /* Посередине высоты ссылки */
 left: 0;
 transition: all .3s ease; /* Плавный переход ширины */
}

.block .catsTd a:hover:before {
 width: 15px; /* Показываем линию при наведении */
}

.block .catsTd a:hover {
 padding-left: 25px; /* Отступ слева при наведении */
}

/* Текст раздела "О компании" */
.about-text {
 float: right;
 width: 670px; /* Ширина блока с текстом */
}

/* Левый заголовок */
.title.left { 
 text-align: left; /* Выравнивание текста по левому краю */
}

.title.left h2 { 
 line-height: 40px; /* Высота строки */
}
.title.left p { 
 max-width: 100%; /* Максимальная ширина параграфа */
}

/* Список в разделе "О компании" */
.about-list {
 list-style: none;
 margin: 0;
 padding: 0;
}
.about-list li { /* Элементы списка */
 margin: 0;
 padding: 0 0 35px; /* Отступ снизу */
 font-size: 15px;
 line-height: 24px;
}
.about-list li > span { /* Иконка/маркер списка */
 float: left;
 font-size: 24px;
 margin-right: 30px; /* Отступ справа */
 margin-bottom: 10px;
}

/* Изображение в разделе "О компании" */
.about-image {
 float: left;
 width: 440px;
 position: relative;
 padding-bottom: 100px; /* Отступ снизу */
}

.about-image img {
 border-radius: 0;
 vertical-align: bottom;
}
.about-1 { /* Первое изображение */
 width: 76.136363636%; 
}
.about-2 { /* Второе изображение (располагается поверх первого) */
 display: block;
 position: absolute;
 right: 0;
 bottom: 0;
 width: 76.136363636%;
}
.about-2 img {
 width: 100%;
}

/* Видео в разделе "О компании" */
.about-video {
 position: absolute; /* Позиционирование поверх изображения */
 top: 0;
 left: 0;
 width: 100%; /* Видео занимает всю ширину контейнера */
 height: 100%; /* Видео занимает всю высоту контейнера */
 background: rgba(255, 255, 255, 0.4); /* Полупрозрачный белый фон */
 border-radius: 0;
 transition: all .3s ease; /* Плавный переход */
}

.about-video:hover { /* Эффект при наведении */
 background: rgba(255, 255, 255, 0.6); /* Фон становится более прозрачным */
}

/* Иконка Play на видео */
.about-video-icon {
 position: absolute;
 top: calc(50% - 40px); /* Вертикальное центрирование */
 left: calc(50% - 40px); /* Горизонтальное центрирование */
 background: #fff; /* Белый фон */
 border-radius: 50%;
 width: 80px;
 height: 80px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* Тень */
 transition: all .3s ease; /* Плавный переход */
}

.about-video-icon:before { /* Треугольник play (псевдоэлемент) */
 content: '';
 display: block;
 border: 10px solid transparent; /* Создаем треугольник с помощью прозрачных границ */
 border-left-color: #fff; /* Левая граница белая */
 position: absolute;
 top: calc(50% - 10px); /* Вертикальное центрирование */
 left: calc(50% - 7px); /* Горизонтальное центрирование */
}

.about-video:hover .about-video-icon { /* Изменение фона иконки при наведении */
 background: #3f3836; /* Темно-серый фон */
}

/* Контейнер для видео */
#about-video-container {
 display: none; /* Скрываем контейнер по умолчанию */
}

#about-video-container iframe { /* Стили для видео */
 max-width: 100%;
 vertical-align: bottom;
}

/* Блок с иконкой */
.icon-block {
transition: all .3s ease;
 background: rgba(255, 255, 255, 0.15);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 20px;
 padding: 20px;
 color: #1a1a1a;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 display: grid
;
 height: 250px;
}

/* Плавное изменение цвета элементов блока при наведении */
.icon-block > * {
 transition: color .3s ease;
}

/* Цвет элементов блока при наведении (белый) */
.icon-block:hover > * {
 color: #fff !important; /* Переопределение цвета */
}

/* Иконка внутри блока */
.icon-block-icon span {
 font-size: 60px; /* Размер иконки */
 line-height: 60px; /* Вертикальное выравнивание */
}

/* Заголовок внутри блока */
.icon-block > h3 {
 font-weight: 700; /* Жирный */
 font-size: 18px;
 line-height: 20px;
 margin-top: 30px; /* Отступ сверху */
}

/* Параграф внутри блока */
.icon-block > p {
 margin-bottom: 20px; /* Отступ снизу */
 color: #777; /* Серый цвет текста */
}

/* Иконка стрелки вправо внутри блока */
.icon-block > .lnr-arrow-right {
 font-size: 20px;
 color: #3f3836; /* Темно-серый */
}

/* Счетчик */
.count {
 text-align: center; /* Выравнивание по центру */
}

.count-val { /* Значение счетчика */
 font-size: 72px;
 line-height: 72px; /* Высота строки */
 font-weight: 700; /* Жирный */
}

.count-text { /* Текст счетчика */
 font-size: 15px;
 font-weight: 600; /* Полужирный */
 color: #3f3836; /* Темно-серый */
 margin-top: 5px; /* Отступ сверху */
}

/* Поля формы */
.mf-field { /* Контейнер поля формы */
 position: relative; /* Позиционирование для иконки */
 margin-bottom: 30px; /* Отступ снизу */
}

.col2 .mf-field { /* Убираем отступ для полей в колонках col2 */
 margin-bottom: 0;
}

.mf-field input,
.mf-field textarea { /* Общие стили для полей ввода и textarea */
 width: 100%; /* Ширина */
 padding: 16px 60px 16px 60px; /* Отступы (с учётом иконки) */
 box-sizing: border-box; 
}

.mf-field input { /* Высота поля ввода */
 height: 54px;
}

.mf-field textarea { /* Высота textarea */
 height: 230px;
}

.mf-field > span { /* Иконка внутри поля формы */
 position: absolute;
 top: -1px;
 left: 0;
 width: 60px; /* Размер иконки */
 height: 54px;
 line-height: 54px; /* Вертикальное выравнивание иконки */
 text-align: center;
 font-size: 20px;
 color: #3f3836; /* Темно-серый */
 box-sizing: border-box;
 padding-left: 2px;
}

/* Кнопка формы */
.mf-button { /* Контейнер кнопки */
 text-align: center; /* Выравнивание кнопки по центру */
}

.mf-button button {
 font-size: 15px;
 font-weight: 600; /* Полужирный */
 height: 54px;
 line-height: 55px; /* Высота строки */
 padding: 0 30px; /* Отступы внутри кнопки */
}

.mf-button button span { /* Иконка или текст в кнопке */
 margin-right: 15px;
 font-size: 20px;
 line-height: 54px; /* Выравнивание по вертикали */
 vertical-align: middle;
}

/* Карта */
.g-map {
 height: 500px; /* Высота карты */
 margin-bottom: -100px; 
 border-top: 1px solid #ededed; /* Разделитель сверху */
}

.g-map iframe {
 width: 100%; /* Ширина iframe */
 height: 100%; /* Высота iframe */
}

/* Пост */
.post {
 border-radius: 0;
 overflow: hidden; /* Скрываем содержимое, выходящее за границы */
}

.post-image img { /* Изображение поста */
 width: 100%;
 vertical-align: bottom;
}

.post-text { /* Текстовая часть поста */
 padding: 40px; /* Отступы */
 background: #f8f8f8; /* Светло-серый фон */
 transition: all .3s ease; /* Плавный переход */
 position: relative; 
}

.post-text * { /* Все элементы внутри текста поста */
 transition: all .3s ease; /* Плавный переход */
}

.post-moder { /* Элемент для модерации поста */
 position: absolute;
 right: 30px;
 bottom: 35px;
}

.post:hover .post-text * { /* Цвет текста при наведении */
 color: #fff;
}

/* Категория поста */
.post-cat {
 display: inline-block;
 font-size: 15px;
 margin-bottom: 20px; 
}

.post-cat span {
 padding-right: 10px; /* Отступ справа */
}

/* Заголовок поста */
.post-name {
 display: block;
 font-weight: 700; /* Жирный */
 font-size: 16px;
 color: #3f3836;
}

/* Кнопка "Читать далее" */
.post-more {
 margin-top: 20px;
 display: inline-block;
}
.post-more span { /* Текст/иконка в кнопке */
 position: relative;
 top: 1px;
 margin-left: 7px; /* Отступ слева от текста/иконки */
}

/* Пагинация категорий */
.catPages1 .lnr { 
 position: relative;
 top: 1px;
 margin-left: 5px; /* Отступ слева */
}

/* Жирный элемент с переключателем (возможно, вкладка) */
b.swchItemA {
 font-weight: 400; /* Обычный (не жирный) */
 color: #fff; /* Белый текст */
}

/* Элемент продукта (pp - product page?) */
.pp {
 margin-bottom: 60px; /* Отступ снизу */
}

.pp-image { /* Изображение продукта */
 text-align: center; /* Выравнивание по центру */
 margin-bottom: 30px;
}

.pp-image img {
 border-radius: 0;
 vertical-align: bottom;
 max-width: 100%; /* Изображение занимает всю доступную ширину */
}

/* Категория продукта */
.pp-cat {
 font-size: 15px;
 display: inline-block;
 margin-bottom: 20px;
}

.pp-cat span {
 padding-right: 10px;
}

/* Название продукта */
.pp-name {
 font-size: 20px;
 line-height: 20px;
 color: #3f3836; /* Темно-серый */
 font-weight: 700; /* Жирный */
}

/* Цитата (скрыта по умолчанию) */
.bbQuoteName {
 display: none;
}

/* Сообщение цитаты */
.quoteMessage {
 padding: 30px; /* Отступы */
 margin: 20px 0; 
 background: #f0f0f0; /* Светло-серый фон */
 border-left: 3px solid #ededed; /* Разделитель слева */
 border-radius: 0;
 font-size: 15px;
 line-height: 22px;
 font-style: italic; /* Курсив */
 color: #3f3836; /* Темно-серый */
}

/* Раздел FAQ */
.faq-left {
 float: left;
 width: 57.264957264%;
}

.faq-right {
 float: right;
 width: 37.606837606%;
}

.faq-right img {
 width: 100%;
 border-radius: 0;
 vertical-align: bottom;
}

/* Форма обратной связи (скрыта по умолчанию) */
#mail-form-2 {
 display: none;
 box-sizing: border-box;
 padding: 40px 30px 0;
}

.m-form b { /* Заголовки в форме */
 color: #0f202c; /* Темно-синий */
 display: block;
 font-weight: 500;
 margin-bottom: 15px; /* Отступ снизу */
}

input.m-field { /* Поля ввода в форме */
 width: 100%;
 margin-bottom: 20px;
 height: 56px;
 padding-left: 25px;
 padding-right: 25px;
}

textarea.m-text { /* Область текста в форме */
 width: 100%;
 height: 140px;
 padding: 18px 25px;
 margin-bottom: 20px;
}

.m-button { /* Кнопка отправки формы */
 font-size: 15px;
 height: 56px;
 padding: 0 25px;
 margin-bottom: 50px;
}

/* Страница 404 */
.section-404 {
 padding-top: 130px; /* Отступы */
 padding-bottom: 180px;
 background: url(/img/bg-404.jpg) center bottom no-repeat; /* Фоновое изображение */
}

.er404 { /* Ошибка 404 */
 text-align: center;
 font-size: 300px; /* Очень большой размер шрифта */
 line-height: 300px;
}

.er404 b { /* Жирное выделение в тексте ошибки */
 font-weight: 600; /* Полужирный */
}

.er404-title { /* Заголовок на странице 404 */
 text-align: center;
}

.er404-title h2 {
 margin-bottom: 20px;
 font-size: 24px;
 line-height: 30px;
 font-weight: 700; /* Жирный */
}

.er404-title p { /* Параграф на странице 404 */
 max-width: 710px;
 margin: 0 auto; /* Центрируем по горизонтали */
}

.f404 > .section { /* Секция на странице 404 */
 padding-top: 0;
}

/* Быстрые ссылки (скрыты) */
.fastLinks {
 display: none;
}

/* Блок FAQ (Часто задаваемые вопросы) */
.faq {
 margin-bottom: 12px;
 border-radius: 0;
 overflow: hidden; /* Скрываем содержимое, выходящее за границы */
}

/* Заголовок вопроса */
.faq-title {
 background: #f8f8f8; /* Светло-серый фон */
 padding: 15px 25px; /* Отступы */
 font-size: 15px;
 line-height: 20px;
 color: #3f3836; /* Темно-серый текст */
 overflow: hidden; /* Скрываем содержимое, выходящее за границы */
 cursor: pointer; /* Курсор в виде указателя */
 position: relative; /* Позиционирование для псевдоэлементов */
 transition: all .3s ease; /* Плавный переход */
}

.faq-title b { /* Выделение жирным */
 display: block;
 padding-right: 40px; /* Отступ справа для иконки */
 font-weight: 700; /* Жирный */
}

/* Значок вопроса */
.faq-title span {
 position: absolute;
 top: 15px;
 right: 15px;
 display: block;
 float: right;
 width: 21px;
 height: 21px;
}

.faq-title span:before,
.faq-title span:after { /* Линии, образующие плюс */
 content: '';
 display: block;
 position: absolute;
 background: #3f3836; /* Темно-серый */
 transition: all .3s ease; /* Плавный переход */
}

.faq-title span:before { /* Горизонтальная линия */
 width: 21px;
 height: 1px;
 top: 10px;
 left: 0;
}

.faq-title span:after { /* Вертикальная линия */
 width: 1px;
 height: 21px;
 left: 10px;
 top: 0;
}

/* Открытый вопрос */
.faq.opened .faq-title {
 color: #fff; /* Белый текст */
 background: #3f3836; /* Темно-серый фон */
}
.faq.opened .faq-title span:before,
.faq.opened .faq-title span:after {
 background: #fff; /* Белые линии */
}
.faq.opened .faq-title span:after { /* Убираем вертикальную линию */
 display: none;
}

/* Содержимое вопроса (ответ) */
.faq-message {
 padding: 15px 25px; /* Отступы */
 background: #fff; /* Белый фон */
 border: 1px solid #f8f8f8; /* Светло-серая рамка */
 border-top: 0;
 display: none; /* Скрываем ответ по умолчанию */
 border-radius: 0;
}

.faq.opened .faq-message { /* Открытый ответ */
 display: block; /* Отображаем */
 border-color: #3f3836; /* Темно-серая рамка */
}

/* Таблица заказов */
#order-table,
#order-table * {
 max-width: 99.9%;
 box-sizing: border-box; /* Учитываем отступы и границы в ширине */
 border-collapse: collapse; /* Убираем двойные границы */
 border-spacing: 0;
}

#order-table {
 border: 1px solid #ededed; /* Светло-серая рамка */
 border-radius: 0;
}

#order-table .order-item-nom { /* Скрываем номер товара */
 display: none;
 width: 0;
}

/* Ячейки таблицы */
#order-table td {
 padding: 10px 20px; /* Внутренние отступы */
 border: 1px solid #f4f4f4; /* Светло-серый разделитель */
}

/* Заголовки таблицы */
#order-table thead {
 background: #fafafa; /* Светло-серый фон */
}

#order-table thead th {
 text-align: left;
 padding: 0 20px;
 line-height: 40px;
 color: #212121;
 font-weight: 500; /* Средний */
}

/* Ячейки в строках таблицы */
#order-table tbody tr td:nth-child(2) { /* Вторая ячейка */
 border-left: none;
}

#order-table tbody tr td:last-child { /* Последняя ячейка */
 border-right: none;
}

/* Ячейка с изображением товара */
#order-table td.order-item-img {
 line-height: 0;
}

#order-table td.order-item-img img {
 width: 60px;
 max-width: 60px;
 border-radius: 0;
}

/* Ячейка с названием товара */
#order-table td.order-item-name,
#order-table td.order-item-name a {
 color: #212121; /* Темный цвет текста */
}

/* Заголовок столбца "Цена" */
#order-table thead th.order-head-price {
 width: 120px;
}

/* Ячейка с ценой товара */
#order-table td.order-item-price {
 font-size: 13px;
 color: #212121; /* Темный цвет текста */
 max-width: none;
 text-align: center;
 padding-left: 5px; /* Отступы */
 padding-right: 5px;
}

/* Ячейка с количеством товара */
#order-table td.order-item-cnt {
 overflow: hidden; /* Скрываем лишнее содержимое */
}

#order-table td.order-item-cnt > * { /* Элементы внутри ячейки */
 float: left;
 height: 36px;
 text-align: center;
}

#order-table td.order-item-cnt input[type="text"] {
 width: 100px; /* Ширина поля ввода */
}

/* Кнопка уменьшения количества */
.o-minus {
 display: block;
 line-height: 36px; /* Высота строки для вертикального выравнивания */
 width: 36px; /* Ширина и высота кнопки */
 height: 36px;
 cursor: pointer; /* Курсор в виде указателя */
 margin-right: -36px; /* Отрицательный отступ справа */
 position: relative; 
 z-index: 2; /* Помещаем поверх других элементов */
 text-align: center;
 font-size: 20px; /* Размер значка */
 color: #212121; /* Темный цвет текста */
 transition: color .3s ease; /* Плавный переход цвета */
}

/* Кнопка увеличения количества */
.o-plus {
 display: block;
 line-height: 36px; /* Вертикальное выравнивание текста */
 width: 36px; /* Размер кнопки */
 height: 36px;
 cursor: pointer; /* Курсор "указатель" */
 margin-left: -36px; /* Отрицательный отступ слева */
 position: relative; /* Позиционирование для z-index */
 z-index: 2; /* Над другими элементами */
 text-align: center;
 font-size: 18px; /* Размер символа "+" */
 color: #212121; /* Темный цвет текста */
 transition: color 0.3s ease; /* Плавный переход цвета при наведении */
}

/* Hover для кнопок */
.o-minus:hover, 
.o-plus:hover {
 color: red; /* Красный цвет при наведении */
}

/* Убираем выделение текста при клике */
.o-minus::selection, 
.o-plus::selection {
 background: rgba(0, 0, 0, 0); /* Прозрачный фон */
 color: inherit; /* Наследуем цвет */
}

/* Заголовок столбца "Сумма" */
#order-table thead th.order-head-sum {
 width: 120px;
}

/* Ячейка с суммой заказа */
#order-table td.order-item-sum {
 font-size: 13px;
 color: #212121; /* Темно-серый */
 max-width: none;
 text-align: center;
 padding-left: 5px;
 padding-right: 5px;
}

/* Иконка удаления товара */
#order-table td.order-item-del i {
 font-size: 20px;
 line-height: 17px;
 color: red; /* Красный */
 cursor: pointer;
 transition: all 0.3s ease; /* Плавный переход */
}

#order-table td.order-item-del i:hover {
 color: #000 !important; /* Черный при наведении (переопределение) */
}

#order-table td.order-item-del input[type="checkbox"] { /* Скрываем чекбокс */
 display: none;
}

/* Последние строки таблицы */
#order-table tbody tr:nth-last-child(2) td { /* Предпоследняя строка */
 border-bottom: 0;
}

#order-table tbody tr:last-child { /* Последняя строка (скрыта) */
 display: none;
}

#order-table tbody tr:last-child td {
 border: none;
 padding: 20px;
}

/* Кнопка "Продолжить оформление заказа" (скрыта) */
#order-but-continue {
 font-weight: 400;
 text-transform: uppercase;
 font-size: 11px;
 border: 1px solid #ededed;
 background: #fafafa;
 color: #212121;
 height: 36px;
 display: none;
}

#order-but-continue:hover {
 background: #212121; /* Темный фон при наведении */
 color: #f0f0f0; /* Светлый текст при наведении */
 border-color: #212121;
}

/* Кнопка "Пересчитать" */
#order-but-recalc {
 height: 36px;
 line-height: 36px;
 margin-left: 30px;
 float: right;
}

/* Итоговая сумма */
#order-table td.order-total:last-child {
 font-size: 16px;
 max-width: none;
 width: 150px;
 display: block;
 line-height: 36px;
 text-align: center;
 font-weight: 400;
 color: red;
 float: left;
}

/* Строка с итоговой суммой */
#order-total-line {
 padding: 10px;
 width: 99.9%;
 box-sizing: border-box;
 background: #fafafa; /* Светло-серый фон */
 border: 1px solid #ededed;
 border-top: 0;
 font-size: 16px;
 color: #212121;
 text-align: right;
 overflow: hidden; /* Скрываем лишнее содержимое */
 line-height: 40px;
 margin-bottom: 10px;
 border-radius: 0;
}

/* Заголовок страницы заказа */
.order-page-title {
 margin-top: 40px; /* Отступ сверху */
 margin-bottom: 15px; /* Отступ снизу */
 font-size: 18px;
}

/* Ячейки в таблицах способов оплаты и доставки */
#payments-list tr td, 
#delivery-list tr td {
 padding-bottom: 10px; /* Отступ снизу */
}

/* Элементы списка способов оплаты */
.payments-list-item {
 height: 16px;
 overflow: hidden; /* Скрываем лишнее содержимое */
}

#payment-block-1 .payments-list-item { /* Исключение для блока #payment-block-1 */
 height: auto; /* Высота определяется содержимым */
}

/* Описания способов оплаты и доставки (скрыты по умолчанию) */
.pl-text, 
div[id^="delivery-descr"] { 
 background: #f4f4f4; /* Светло-серый фон */
 box-sizing: border-box;
 padding: 15px 20px !important; /* Переопределяем padding */
 line-height: 18px;
 font-size: 12px;
 position: relative; /* Для позиционирования псевдоэлемента */
 margin-top: 15px;
 display: none; /* Скрываем по умолчанию */
 border-radius: 0;
}

/* Уголки для описаний (псевдоэлементы) */
.pl-text:before,
div[id^="delivery-descr"]:before { 
 content: '';
 display: block;
 width: 12px; /* Размер уголка */
 height: 12px;
 background: #f4f4f4; /* Светло-серый фон */
 transform: rotate(-45deg); /* Поворот на -45 градусов */
 position: absolute;
 top: -5px; /* Позиционирование сверху */
 left: 15px;
}

/* Метки */
.label {
 line-height: 20px;
 cursor: pointer; /* Курсор в виде указателя */
 font-weight: 500 !important; /* Полужирный шрифт */
 color: #212121; /* Темный цвет текста */
}

/* Форма оформления заказа */
#checkout-form .label {
 cursor: default; /* Курсор "по умолчанию" */
 margin-bottom: 2px;
 margin-top: 10px;
}

#checkout-form textarea {
 height: 100px;
 width: 100% !important; /* Переопределяем ширину */
}

#checkout-form select,
#checkout-form input[type="text"] {
 width: 100% !important; /* Переопределяем ширину */
}

#checkout-form .checkbox {
 margin-top: 10px;
 vertical-align: bottom;
}

/* Горизонтальный разделитель */
hr.solid {
 background: none;
 border-top: 1px solid #ededed; /* Светло-серая линия */
 margin: 15px 0; /* Отступы сверху и снизу */
}

/* Отображение итоговой суммы */
.order-total-span,
.order-total-sum-span {
 display: inline-block;
 line-height: 24px;
}

.order-total-sum-span {
 font-weight: 400;
 color: #212121;
 font-size: 18px;
 padding-left: 3px;
}

/* Кнопка оформления заказа */
input#order-button {
 width: 100% !important; /* Переопределяем ширину */
 margin: 0 !important; /* Убираем отступы */
 text-align: center;
 box-sizing: border-box;
 height: 50px !important; /* Переопределяем высоту */
 font-size: 15px;
 font-weight: 500;
}

/* Заголовок слайдера */
.sl-title {
 font-size: 20px;
}

/* Таблица на форуме */
.forumContent .gTable {
 border-radius: 0;
 background: #fcfcfc; /* Светло-серый фон */
}

.gTable { 
 background: none;
 border-spacing: 0;
 overflow: hidden;
}

.gTable td {
 padding: 5px 20px; /* Отступы в ячейках */
}

/* Заголовки таблицы */
.gTableTop {
 line-height: 40px;
 padding: 0 20px !important; /* Переопределяем padding */
 color: #fff;
 text-decoration: none;
 font-size: 12px !important; /* Переопределяем размер шрифта */
 text-transform: uppercase;
 background: #3f3836; /* Темно-серый фон */
}

.gTableTop a {
 color: #fff !important; /* Переопределяем цвет текста */
 text-decoration: none;
 font-size: 12px;
}

.gTableSubTop { /* Подзаголовок таблицы */
 padding: 5px 10px; 
 font-size: 13px;
}

/* Ссылка на категорию */
.catLink {
 color: #fff !important; /* Переопределяем цвет текста */
 font-size: 12px !important;
 text-transform: uppercase;
 font-weight: 500; /* Полужирный */
}

.catLink:hover,
.gTableTop a:hover { /* Изменение цвета при наведении */
 color: #fff !important; 
}

/* Общие стили для форума */
.funcBlock { 
 padding-right: 10px;
}

.forumIcoTd,
.forumNameTd,
.forumThreadTd,
.forumPostTd,
.forumLastPostTd {
 padding: 5px 10px; /* Отступы внутри ячеек */
}

.forumThreadTd,
.forumPostTd,
.threadPostTd,
.threadViewTd,
.threadAuthTd,
.threadIcoTd,
.threadNametd,
.threadLastPostTd {
 vertical-align: middle;
 padding-left: 20px; /* Дополнительный отступ слева */
}

/* Ячейка с иконкой форума */
.forumIcoTd {
 text-align: center;
}

/* Ячейка с названием форума */
.forumNameTd {
 line-height: 24px; /* Высота строки */
}

.forumNameTd a {
 font-size: 12px;
 text-transform: uppercase;

 font-weight: 500;
}

/* Названия форума */
.forumNamesBar {
 padding-left: 10px !important;
}

/* Кнопки на форуме */
.frmBtns {
 text-align: right;
 padding-right: 10px;
}

.legendTd {
 padding: 0 10px;
}

/* Иконки в темах и постах */
.threadIcoTd,
.threadIcoTd {
 text-align: center;
 vertical-align: middle;
}

/* Детали темы */
.threadsDetails {
 padding: 5px;
}

.postTdTop { /* Верхняя часть ячейки с постом */
 text-align: center;
 padding: 5px;
}

.postTdInfo { /* Информация о посте */
 text-align: center;
}

.posttdMessage { /* Сообщение поста */
 vertical-align: top;
 padding: 5px;
}

/* Сброс фона */
.threadsDetails,
.postTdTop,
.gTable tr {
 background: none;
}

/* Нижняя часть div */
.gDivBottomRight {
 height: 50px;
}

/* Информация о страницах */
.pagesInfo {
 padding: 0 10px;
 line-height: 24px;
}

/* Активный переключатель */
.switchActive {
 padding: 0 10px;
 color: #fff; /* Белый текст */
}

.postBottom {
 padding: 0 20px !important; /* Переопределение отступов */
}

/* Форма поиска по темам */
#thread_search_form {
 position: relative;
 padding-bottom: 10px;
 overflow: hidden;
}

#thread_search_button {
 position: absolute;
 top: 0;
 right: 0;
}

.fNavLink {
 display: inline-block;
 margin-bottom: 30px;
}

/* Фильтр форума */
#forum_filter {
 text-align: right;
 padding-bottom: 10px;
 margin-top: -32px;
}

#forum_filter form {
 display: inline-block;
}

/* Фильтр по... (вероятно, выпадающий список) */
#filter_by {
 display: inline-block;
 line-height: 34px; /* Высота строки для вертикального выравнивания текста */
}

/* Переопределяем ширину для некоторых элементов */
.postPreview,
#iplus,
.ucoz-editor-panel input,
.allUsersBtn,
.uSearchFlSbm,
#selectPhotosBtn,
#order-button,
#thread_search_field {
 width: auto !important; /* Устанавливаем автоматическую ширину */
}

#selectPhotosBtn, 
#order-button {
 height: auto !important; /* Устанавливаем автоматическую высоту */
}

/* Позиционирование поля поиска темы */
#thread_search_field {
 float: left !important; /* Выравнивание по левому краю (переопределение) */
 width: 165px !important;
}

/* Границы в таблицах форума */
.forumIcoTd,
.forumNameTd,
.forumThreadTd,
.forumPostTd,
.forumLastPostTd,
.threadPostTd,
.threadViewTd,
.threadAuthTd,
.threadIcoTd,
.threadNametd,
.threadLastPostTd,
.postTdTop,
.postBottom {
 border-bottom: 1px solid #d8d8d8; /* Разделитель снизу */
}

.postTdTop, 
.postBottom {
 border-top: 1px solid #d8d8d8; /* Разделитель сверху */
}

/* Фон и цвет текста для подзаголовков таблицы и информации о страницах */
.gTableSubTop,
.pagesInfo {
 background: #f2f2f2; /* Светло-серый фон */
}
.gTableSubTop, 
.gTableSubTop a {
 color: #3f3836 !important; /* Темно-серый текст (переопределение) */
}

/* Граница в ячейке с информацией о посте */
.postTdInfo {
 border-right: 1px solid #d8d8d8; /* Разделитель справа */
}

/* Цвет текста в ячейках с названиями форумов */
.forumNameTd {
 color: #666; /* Серый текст */
}

/* Ссылки на форумы */
a.forum {
 color: #3f3836; /* Темно-серый текст */
}

.forumContent a:hover { /* Цвет ссылки при наведении */
 color: #3f3836; /* Темно-серый текст */
}

/* Кнопка "Наверх" */
span#go-top {
 border-radius: 0;
 color: #fff; /* Белый текст */
 width: 46px; /* Размер кнопки */
 height: 46px;
 line-height: 47px; /* Выравнивание текста */
 text-align: center;
 padding-left: 1px;
 box-sizing: border-box;
 font-size: 16px;
}

span#go-top:hover { /* Фон при наведении */
 background: #ededed; /* Светло-серый фон */
}

/* Текст в промо-блоке */
.text.promo {
 margin-top: 0;
}

/* Стили меню для больших экранов (от 1278px) */
@media (min-width: 1278px) {
 /* Иконка меню */
 .menu-icon {
 display: none; /* Скрываем иконку меню на больших экранах */
 }

 /* Основной контейнер меню */
 #menu {
 float: left;
 margin-left: -43px;
 padding-top: 17px;
 text-align: center;
 position: relative; /* Позиционирование для выпадающих подменю */
 z-index: 10; /* Уровень выше других элементов */
 }

 #menu > div { 
 display: inline-block;
 text-align: left;
 }

 /* Список элементов меню */
 #menu .uMenuRoot { 
 margin: 0;
 padding: 0;
 list-style: none; /* Убираем маркеры у списка */
 transition: margin 0.3s ease; /* Плавный переход отступа */
 }

 /* Элементы меню первого уровня */
 #menu .uMenuRoot > li { 
 float: left; /* Размещаем элементы горизонтально */
 position: relative; /* Для позиционирования подменю */
 }

 /* Ссылки меню первого уровня */
 #menu .uMenuRoot > li > a { 
 display: inline-block;
 position: relative; /* Позиционирование для подчеркивания */
 padding: 2px 20px 20px; /* Отступы: сверху/снизу 2px, слева/справа 20px */
 font-size: 18px;
 font-weight: 500; /* Полужирный (или bolder) */
 text-transform: uppercase;
 color: #3f3836; /* Темно-серый */
 margin-bottom: -20px; /* Корректировка высоты строки */
 }
 
 /* Обёртка для текста внутри ссылки */
 #menu .uMenuRoot > li > a > span {
 position: relative; /* Позиционирование для подчеркивания */
 display: inline-block;
 }

 /* Скрываем текст для домашней страницы */
 #menu .uMenuRoot > li > a.home-page > span {
 display: none;
 }

/* Иконка "Домой" для ссылки на главную страницу */
 #menu .uMenuRoot > li > a.home-page:before {
 content: '\e800'; /* Иконка дома из шрифта Linearicons-Free */
 font-family: 'Linearicons-Free';
 font-size: 20px;
 position: relative; 
 top: -3px; /* Небольшая коррекция положения */
 }
 
/* Стрелка вниз в пунктах меню с подменю */
 #menu .uMenuRoot > li > a > i { 
 margin-left: 8px; /* Отступ слева от стрелки */
 font-size: 11px;
 }

 /* Выпадающие подменю */
 #menu .uMenuRoot ul, 
 #menu .uMenuRoot ul li { /* Сброс стилей для всех списков внутри меню */
 padding: 0;
 margin: 0;
 list-style: none; /* Убираем маркеры */
 position: relative; /* Позиционирование для вложенных подменю */
 }

/* Выпадающее подменю первого уровня */
 #menu .uMenuRoot > li > ul { 
 display: block;
 position: absolute; 
 padding: 15px 20px; /* Отступы внутри */
 top: 80px; /* Положение сверху */
 left: -99999px; /* Скрываем за пределы экрана по умолчанию */
 box-sizing: border-box; /* Учитываем отступы и границы в ширине */
 width: 240px;
 opacity: 0; /* Прозрачность 0 по умолчанию */
 transition: opacity 0.3s ease, top 0.3s ease; /* Плавный переход */
 background: var(--light-bg);
 border-radius: 12px;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
 min-width: 200px;
 }

/* Отображение подменю при наведении */
 #menu .uMenuRoot > li.uWithSubmenu:hover > ul {
 top: 35px; /* Положение подменю сверху */
 left: 0;
 opacity: 1; /* Полная непрозрачность */
 }

 /* Элементы подменю */
 #menu .uMenuRoot > li > ul > li {
 padding: 10px 0; /* Внутренние отступы */
 }

 /* Последний элемент подменю */
 #menu .uMenuRoot > li > ul > li:last-child {
 border-bottom: 0; /* Убираем нижнюю границу у последнего элемента */
 }

 /* Ссылки в подменю */
 #menu .uMenuRoot > li > ul > li > a {
 display: block; /* Занимают всю ширину родителя */
 color: #3f3836; /* Темно-серый цвет */
 transition: all 0.3s ease-out;
 }

 #menu .uMenuRoot > li > ul > li > a:hover {
 transform: scale(1.05);
 color: #2F9854;
 }
 
 /* Выпадающее подменю второго уровня */
 #menu .uMenuRoot > li > ul ul { 
 display: block;
 position: absolute;
 background: #fff; /* Белый фон */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 padding: 15px 20px; /* Отступы внутри */
 top: 50px; /* Положение сверху */
 left: -99999px; /* Скрываем за пределы экрана по умолчанию */
 box-sizing: border-box; /* Учитываем отступы и границы в ширине */
 width: 240px;
 opacity: 0; /* Прозрачность 0 по умолчанию */
 transition: opacity 0.3s ease, top 0.3s ease; /* Плавный переход */
 border-radius: 0; /* Без скругления углов */
 } 

/* Отображение подменю второго уровня при наведении */
 #menu .uMenuRoot > li > ul li.uWithSubmenu:hover > ul {
 opacity: 1; /* Полная непрозрачность */
 top: -15px; /* Корректировка положения сверху */
 left: 195px; /* Положение слева */
 }

 #menu .uMenuRoot > li ul > li.uWithSubmenu:hover > a {
 padding-left: 10px; /* Отступ слева при наведении */
 color: #3f3836; /* Темно-серый */
 }

 /* Элементы подменю второго уровня */
 #menu .uMenuRoot > li > ul ul li { 
 padding: 10px 0; /* Отступы сверху и снизу */
 }

 #menu .uMenuRoot > li > ul ul li:last-child { /* Последний элемент подменю */
 border-bottom: 0; /* Убираем нижнюю границу */
 }

 /* Ссылки в подменю второго уровня */
 #menu .uMenuRoot > li > ul ul a {
 display: block; /* Делаем ссылки блочными */
 color: #3f3836; /* Темно-серый */
 }

 #menu .uMenuRoot > li > ul ul a:hover {
 padding-left: 10px; /* Отступ слева при наведении */
 }

 /* Стрелки в подменю */
 #menu .uMenuRoot > li > ul i { 
 float: right;
 line-height: 22px; /* Вертикальное выравнивание */
 margin-right: 10px;
 font-size: 10px; /* Размер стрелки */
 color: #3f3836; /* Темно-серый */
 }

 /* Скрываем стрелки для элементов без подменю */
 #menu .uMenuRoot li > i {
 display: none;
 } 
 
/* Подчеркивание при наведении и для активной ссылки */
 #menu .uMenuRoot > li > a > span:after { 
 content: '';
 display: block;
 height: 1px; 
 width: 0; /* Ширина 0 по умолчанию */
 background: #ededed; /* Светло-серый цвет подчеркивания */
 position: absolute;
 bottom: -1px; /* Позиционирование подчеркивания */
 left: 0;
 transition: all 0.3s ease; /* Плавный переход ширины */
 }

 /* Меняем ширину подчеркивания при наведении и для активного пункта */
 #menu .uMenuRoot > li:hover > a > span:after,
 #menu .uMenuRoot > li > a.uMenuItemA > span:after { 
 width: 100%; 
 }
}


/* Адаптация стилей для экранов меньше 1279px */
@media (max-width: 1279px) {

 /* Общий контейнер */
 .cnt { 
 width: 920px; /* Уменьшаем ширину контейнера */
 }

 /* Шапка сайта */
 #header { 
 padding: 30px 0; /* Увеличиваем отступы в шапке */
 }

 #header.scroll { /* При прокрутке */
 padding: 7px 0; /* Уменьшаем отступы в шапке */
 }


 /* Логотип */
 .logo {
 margin-right: 50px; /* Уменьшаем отступ справа от логотипа */
 }

 /* Выпадающий блок профиля */
 .profile-body { 
 top: 60px; /* Изменяем положение сверху */
 }


 /* Меню */
 #menu {
 float: left;
 position: relative;
 padding-top: 5px; /* Уменьшаем отступ сверху */
 }

 /* Иконка меню (для мобильных устройств) */
span.menu-icon {
 display: block; 
 float: left; /* Размещаем слева */
 height: 46px; /* Размер иконки */
 width: 46px;
 text-align: center; /* Выравниваем иконку по центру */
 line-height: 47px; /* Вертикальное выравнивание текста */
 font-size: 20px; /* Размер иконки */
 cursor: pointer; /* Курсор в виде указателя */
 background: #ededed; /* Светло-серый фон */
 border-radius: 0;
 margin-left: 5px; /* Отступ слева */
 color: #fff; /* Белый текст */
 box-sizing: border-box;
 padding-left: 1px;
 transition: all 0.3s ease; /* Плавный переход */
}

 /* Иконка меню при наведении */
 span.menu-icon:hover {
 color: #3f3836; /* Темно-серый текст */
 background: #ededed; /* Светло-серый фон */
 }

 /* Мобильное меню (скрыто по умолчанию) */
 #menu > div {
 display: none; /* Скрываем меню по умолчанию */
 position: absolute;
 top: 59px; /* Положение сверху */
 left: 5px; /* Положение слева */
 width: 290px; /* Ширина меню */
 box-sizing: border-box; /* Учитываем отступы и границы в ширине */
 padding: 25px 30px; /* Отступы внутри меню */
 border-radius: 0;
 background: var(--light-bg);
 padding: 16px;
 border-radius: 12px;
 box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px;
 min-width: 200px; 
 }
 
/* Скрываем стрелки подменю */
 #menu .uMenuRoot li > a > i {
 display: none;
 }
 
 /* Основной список меню */
 #menu .uMenuRoot {
 list-style: none;
 margin: 0;
 padding: 0;
 }

 /* Элементы меню */
 #menu .uMenuRoot li {
 margin: 0;
 padding: 11px 0; /* Отступы */
 }

 /* Ссылки в меню */
 #menu .uMenuRoot a {
 color: #3f3836; /* Темно-серый цвет текста */
 }

 /* Стрелки для раскрытия подменю */
 #menu .uMenuRoot li > i { 
 float: right; 
 font-size: 12px; /* Размер стрелки */
 cursor: pointer; /* Курсор "указатель" */
 color: #3f3836; /* Темно-серый */
 }

 /* Подменю */
 #menu .uMenuRoot li ul { 
 padding: 0 0 0 20px; /* Отступы */
 margin: 10px 0 0; 
 list-style: none; /* Убираем маркеры */
 border-left: 1px solid #ededed; /* Разделитель слева */
 display: none; /* Скрываем подменю по умолчанию */
 }

 /* Убираем левый отступ у ссылок первого уровня */
 #menu .uMenuRoot > li > a { 
 padding-left: 0;
 }
 
 /* Слайдер */
 .slide {
 padding-bottom: 30px; 
 }

 .slide-right {
 width: 450px; /* Уменьшаем ширину */
 }

 .slide-price {
 top: 20px; /* Перемещаем метку цены вверх */
 }

 .slide-dots-right { /* Скрываем декоративные точки */
 display: none;
 }

 .slide-left {
 padding-top: 80px; /* Уменьшаем отступ сверху */
 }

 .slide-text-1 { /* Уменьшаем размер и высоту строки текста */
 font-size: 30px;
 line-height: 40px;
 }

 .slide-text-1:before { /* Скрываем декоративный элемент */
 display: none;
 }

 /* Кнопки навигации слайдера */
 .slider .owl-prev {
 left: 10px; /* Уменьшаем отступы от краев */
 }

 .slider .owl-next {
 right: 10px;
 }

 /* Заголовок в верхнем контейнере */
 .top-ct h3 {
 font-size: 13px;
 }

 /* Заголовок секции */
 .title h2 {
 font-size: 30px;
 }
 
promo-left {
 width: 400px; /* Уменьшаем ширину левой части промо-блока */
 }

 .promo-right {
 width: 450px; /* Уменьшаем ширину правой части промо-блока */
 padding-top: 0; /* Убираем верхний отступ */
 }

 /* Стили для секции (вероятно, с двумя колонками) */
 .t-section {
 margin-right: calc((100% - 920px) / 2 + 100px); /* Корректируем отступ справа для центрирования */
 }

 .t-section-left, /* Стили для левой и правой колонок секции */
 .t-section-right {
 float: none; /* Отменяем обтекание, чтобы колонки располагались друг под другом */
 width: 100%; /* Занимаем всю ширину контейнера */
 }

 .t-section-left .title {
 margin-top: 0; /* Убираем верхний отступ заголовка */
 }

 .t-section-left .title p { 
 padding-right: 150px; /* Уменьшаем правый отступ в параграфе заголовка */
 }

/* Правая колонка в секции t-section */
 .t-section-right {
 float: none; /* Убираем обтекание, элементы располагаются друг под другом */
 width: 100%; /* Занимаем всю доступную ширину */
 padding-top: 30px; /* Отступ сверху */
 }

 /* Максимальная ширина параграфов в навигации (nh) */
 .nh p {
 max-width: 470px;
 }

/* Основной контент */
 #content {
 float: none; /* Отменяем обтекание, контент занимает всю ширину */
 width: 100%; 
 }

 /* Сайдбар (боковая панель) */
 #sidebar {
 position: fixed; /* Фиксируем сайдбар */
 top: 0;
 left: -270px; /* Скрываем сайдбар слева по умолчанию */
 background: #fff; /* Белый фон */
 width: 270px; /* Ширина сайдбара */
 box-sizing: border-box;
 z-index: 1000; /* Уровень выше других элементов */
 height: 100%; /* Полная высота экрана */
 overflow-y: auto; /* Добавляем вертикальную прокрутку при необходимости */
 transition: all 0.3s ease; /* Плавный переход */
 }

 /* Блоки внутри сайдбара */
 #sidebar .block {
 margin-bottom: 0; /* Убираем нижний отступ */
 box-shadow: none; /* Убираем тень */
 border: 0; /* Убираем рамку */
 border-bottom: 1px solid #ededed; /* Добавляем нижний разделитель */
 }

 /* Открытый сайдбар */
 #sidebar.opened {
 left: 0; /* Показываем сайдбар */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Тень */
 }
 
/* Стрелка для открытия сайдбара */
.sidebar-arrow {
 display: block; /* Отображаем стрелку */
 position: fixed; /* Фиксируем позицию */
 top: 220px; /* Вертикальное положение */
 left: 0;
 z-index: 90; /* Отображаем поверх других элементов */
 height: 190px; /* Высота стрелки */
 line-height: 190px !important; /* Переопределение высоты строки для выравнивания текста */
 background: #ededed; /* Светло-серый фон */
 width: 42px; /* Ширина стрелки */
 border-radius: 0; /* Без скругления углов */
 text-align: center;
 cursor: pointer; /* Курсор в виде указателя */
 font-size: 18px; /* Размер значка/символа */
 color: #fff; /* Белый цвет текста */
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); /* Тень */
 transition: all 0.3s ease; /* Плавный переход */
}
 
/* Стрелка для открытия сайдбара при наведении */
 .sidebar-arrow:hover {
 background: #3f3836; /* Темно-серый фон */
 }

 /* Стрелка для открытия сайдбара в открытом состоянии */
 .sidebar-arrow.opened {
 left: 270px; /* Перемещаем стрелку вправо */
 }

 /* Блок с текстом в разделе "О компании" */
 .about-text {
 width: 500px; /* Уменьшаем ширину */
 }

 /* Блок с изображением в разделе "О компании" */
 .about-image {
 width: 350px; /* Уменьшаем ширину */
 }
} 


/* Адаптация стилей для экранов меньше 991px */
@media (max-width: 991px) {
 .cnt {
 width: 700px; /* Уменьшаем ширину контейнера */
 }

 /* Слайдер */
 .slide-right {
 width: 300px; /* Уменьшаем ширину */
 }

 .slide-price {
 top: 0; /* Изменяем положение метки цены */
 width: 90px; /* Уменьшаем размеры метки цены */
 height: 90px;
 line-height: 90px;
 font-size: 15px;
 }

 .slide-left {
 width: 350px; /* Уменьшаем ширину */
 padding-top: 30px; /* Уменьшаем отступ сверху */
 }

 .slide-text-1 { 
 font-size: 24px; /* Уменьшаем размер и высоту строки текста */
 line-height: 30px;
 }

 .slide-text-2 { 
 margin-top: 20px; /* Уменьшаем отступ сверху */
 font-size: 13px;
 line-height: 20px;
 }

/* Элементы списков товаров */
 .bestsallers .list-item,
 .gp-more-goods .list-item {
 width: 47.857142857%; /* Увеличиваем ширину элемента */
 margin-right: 4.285714285%; /* Увеличиваем отступ справа */
 }

 /* Убираем правый отступ у каждого второго элемента */
 .bestsallers .list-item:nth-child(2n),
 .gp-more-goods .list-item:nth-child(2n) {
 margin-right: 0;
 }

 /* Перенос на новую строку каждого нечётного элемента */
 .bestsallers .list-item:nth-child(2n + 1),
 .gp-more-goods .list-item:nth-child(2n + 1) {
 clear: left;
 }

 /* Левая часть промо-блока */
 .promo-left {
 float: none; /* Отменяем обтекание */
 width: 570px; /* Ширина промо-блока */
 margin: 0 auto 50px; /* Центрируем и добавляем отступ снизу */
 }

 /* Правая часть промо-блока */
 .promo-right {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Полная ширина */
 }

/* Кнопки навигации слайдера */
 .owl-section .owl-carousel .owl-nav button.owl-prev {
 left: -25px; /* Перемещаем кнопку "предыдущий" ближе */
 }

 .owl-section .owl-carousel .owl-nav button.owl-next {
 right: -25px; /* Перемещаем кнопку "следующий" ближе */
 }

 /* Колонки */
 .col6 {
 width: 30.428571428%; /* Увеличиваем ширину колонок */
 margin-right: 4.285714285%; 
 }

 /* Убираем отступ справа у каждой третьей колонки */
 .col6:nth-child(3n) {
 margin-right: 0;
 }

 /* Переносим первую колонку в каждой строке на новую строку */
 .col6:nth-child(3n + 1) {
 clear: left;
 }
 
 /* Секция с двумя колонками */
 .t-section {
 margin-right: calc((100% - 700px) / 2 + 100px); /* Корректируем отступ справа для центрирования */
 }
 
 /* Колонки */
 .col3 {
 width: 48.369565%; /* Увеличиваем ширину колонок */
 margin-right: 3.260869%;
 }

 /* Убираем правый отступ у каждой второй колонки */
 .col3:nth-child(2n) {
 margin-right: 0;
 }

 /* Переносим каждую первую колонку в новой строке на новую строку */
 .col3:nth-child(2n + 1) {
 clear: left;
 }

 /* Переопределяем стили для каждой третьей колонки */
 .col3:nth-child(3n) {
 margin-right: 3.260869%; /* Добавляем правый отступ */
 }

 .col3:nth-child(3n + 1) {
 clear: none; /* Отменяем clear:left для каждой первой колонки */
 }

/* Перенос первой col3 в новой строке на новую строку */
 .col3:nth-child(2n + 1) {
 clear: left; /* Отменяем обтекание слева */
 }

 /* Элементы навигации */
 .nh-left,
 .nh-right {
 float: none; /* Отменяем обтекание слева и справа */
 }
 
 /* Кнопка в правой части навигации */
 .nh-right .button { 
 line-height: 40px; /* Высота строки */
 height: 40px; /* Высота кнопки */
 font-size: 13px;
 }

 /* Колонки с шириной 48% */
 .col4 {
 width: 48.369565%; 
 margin-right: 3.260869%; /* Отступ справа */
 }

 /* Убираем отступ справа у каждой второй колонки */
 .col4:nth-child(2n) {
 margin-right: 0;
 }

 /* Переносим первую колонку в каждой строке на новую строку */
 .col4:nth-child(2n + 1) {
 clear: left;
 }

 /* Колонки */
 #content .col3 { /* Колонки внутри #content */
 width: 48%; /* Увеличиваем ширину колонок */
 margin-right: 4%; /* Отступ справа */
 }
 
 /* Колонки с классом col3 */
 #content .col3:nth-child(3n) { /* Каждая третья колонка */
 margin-right: 4%; /* Добавляем правый отступ */
 }

 #content .col3:nth-child(3n+1) { /* Каждая первая колонка в новой строке */
 clear: none; /* Убираем отмену обтекания */
 }

/* Колонки с классом col3 */
 #content .col3:nth-child(2n) { /* Каждая вторая колонка */
 margin-right: 0; /* Убираем отступ справа */
 }

 #content .col3:nth-child(2n + 1) { /* Каждая первая колонка в новой строке */
 clear: left; /* Отменяем обтекание слева */
 }
 
/* Обтекание элементов в контейнере */
 .c-left, .c-right {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Занимаем всю доступную ширину */
 }

 /* Текст в разделе "О компании" */
 .about-text {
 width: 100%; /* Занимаем всю доступную ширину */
 margin-bottom: 50px; /* Отступ снизу */
 }

 /* Изображение в разделе "О компании" */
 .about-image {
 width: 100%; /* Занимаем всю доступную ширину */
 }
 
/* Таблица заказов */
 #order-table thead {
 display: none; /* Скрываем заголовки таблицы */
 }

 #order-table tbody tr:first-child td {
 border-top: 0; /* Убираем верхнюю границу у первой строки */
 }

 #order-table tbody tr:nth-child(odd) { /* Чередуем фон строк */
 background: #fafafa; /* Светло-серый фон для нечетных строк */
 }
 
 /* Адаптация таблицы заказов */
 #order-table,
 #order-table table,
 #order-table tbody, 
 #order-table tr,
 #order-table td {
 display: block; /* Отображаем каждый элемент как блок */
 width: 100% !important; /* Переопределяем ширину */
 max-width: 100% !important;
 text-align: center; /* Выравниваем текст по центру */
 box-sizing: border-box; 
 border: none; /* Убираем границы */
 } 

/* Границы ячеек таблицы заказов */
 #order-table td {
 border-bottom: 1px dotted #ededed !important; /* Переопределяем нижнюю границу */
 }

 /* Последняя ячейка в строке */
 #order-table td:last-child {
 border-bottom: 2px solid #ededed !important; /* Двойная нижняя граница */
 }
 
 /* Поле ввода количества в таблице заказов */
 #order-table td.order-item-cnt input[type="text"] {
 width: 100%; /* Поле ввода занимает всю ширину ячейки */
 }
 
 /* Предпоследняя строка таблицы заказов */
 #order-table tr:nth-last-child(2) td:last-child { /* Последняя ячейка в предпоследней строке */
 border-bottom: 0 !important; /* Убираем нижнюю границу */
 }

 /* Внутренняя таблица заказов */
 #order-table table { 
 border: 1px solid #ededed; /* Светло-серая рамка вокруг таблицы */
 }
 
/* Строка с итоговой суммой в таблице заказов */
 #order-total-line {
 border-width: 2px; /* Увеличиваем ширину рамки */
 }

 /* Колонки на странице заказа */
 .order-page-cols > .col2 { 
 width: 100%; /* Колонка занимает всю ширину */
 margin-right: 0; /* Убираем правый отступ */
 float: none; /* Отменяем обтекание */
} 
}

/* Адаптация стилей для экранов меньше 767px */
@media (max-width: 767px) {
 /* ... (предыдущие стили) ... */

 #header.cart-opened .b-body {
 opacity: 1;
 right: -45px;
 top: 71px;
}
 /* Общий контейнер */
 .cnt {
 width: 500px; /* Уменьшаем ширину контейнера */
 }
.header-image {
 height: 170px;
}
 /* Слайдер */
 .slide-right, /* Отменяем обтекание и занимаем полную ширину */
 .slide-left {
 float: none;
 width: 100%;
 }
 
 /* Метка цены на слайде */
 .slide-price {
 width: 90px;
 height: 90px;
 line-height: 90px;
 font-size: 20px;
 }
 
 /* Слайдер */
 .slide-left { 
 float: none; /* Отменяем обтекание */
 width: 100%; /* Занимаем всю ширину */
 }

 /* Промо-блок */
 .promo-left {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Занимаем всю ширину */
 }
 .promo-sale {
 top: 0; /* Перемещаем метку "Sale" вверх */
 } 
 
 /* Кнопка в навигации */
 .nh .button {
 float: none; /* Отменяем обтекание */
 margin-top: 20px; /* Добавляем отступ сверху */
 display: block; /* Занимаем всю доступную ширину */
 }

 /* Кнопка товара */
 .g-body .g-button {
 opacity: 1; /* Делаем кнопку видимой */
 bottom: 10px; /* Положение снизу */
 display: none;
 }

 /* Скрытие элементов форума и таблицы */
 .gTableSubTop, /* Подзаголовок таблицы */
 .forumIcoTd, /* Иконка форума */
 .forumThreadTd, /* Количество тем */
 .forumPostTd, /* Количество постов */
 .forumLastPostTd, /* Последний пост */
 .threadIcoTd, /* Иконка темы */
 .threadAuthTd, /* Автор темы */
 .threadLastPostTd, /* Последний пост в теме */
 .threadPostTd, /* Количество постов в теме */
 .threadViewTd, /* Количество просмотров */
 .threadsDetails, /* Детали темы */
 .forumOnlineBar, /* Онлайн пользователи */
 .legendBlock, /* Легенда */
 .userRights, /* Права пользователя */
 .fFastNavTd, /* Быстрая навигация */
 .fFastSearchTd, /* Быстрый поиск */
 .forumNamesBar, /* Названия форума */
 #forum_filter, /* Фильтр форума */
 .postTdInfo, /* Информация о посте */
 .postBottom, /* Нижняя часть поста */
 #thread_search_form { /* Форма поиска по теме */
 display: none; /* Скрываем элементы */
 }
 
/* Отступы в левой части контейнера */
 .gDivLeft {
 padding-top: 10px; /* Добавляем отступ сверху */
 }

 /* Элементы таблицы постов */
 .postTdTop, /* Верхняя ячейка поста */
 .postTable, /* Таблица поста */
 .posttdMessage { /* Сообщение поста */
 display: block !important; /* Делаем элементы блочными */
 text-align: left; /* Выравниваем текст слева */
 width: auto !important; /* Устанавливаем автоматическую ширину */
 }

 /* Информация о пользователе в посте */
 .postUser {
 font-size: 16px;
 color: #7a7a7a; /* Серый цвет текста */
 }
 
 /* Колонки col2 и col3 */
 .col2, 
 .col3 {
 margin-right: 0; /* Убираем отступ справа */
 width: 100%; /* Занимаем всю ширину родительского контейнера */
 float: none; /* Отменяем обтекание, элементы располагаются друг под другом */
 }
 
 /* Колонки col2 и col3 */
 #content .col2, 
 #content .col3 {
 width: 100%; /* Занимаем всю ширину родительского контейнера */
 margin-right: 0; /* Убираем отступ справа */
 }

 /* Элементы списка товаров */
 #content .list-item {
 width: 100%;
 margin-right: 6%;
 }

 #content .list-item:nth-child(3n) { /* У каждой третьей колонки сохраняем отступ */
 margin-right: 6%;
 } 
 
 #content .list-item:nth-child(3n + 1) { /* Каждый первый элемент в каждой третьей строке */

 }
 
 #content .list-item:nth-child(2n) { /* Каждый второй элемент */

 }

 #content .list-item:nth-child(2n + 1) { /* Каждый первый элемент в новой строке */

 }

 /* Ячейки комментариев */
 .commTd1, /* Вероятно, ячейка с информацией о пользователе */
 .commTd2 { /* Вероятно, ячейка с текстом комментария */
 display: block;
 width: 100%; /* Занимаем всю ширину родительского контейнера */
 }

 /* Страница 404 */
 .er404 { /* Сообщение об ошибке */
 font-size: 200px; /* Уменьшаем размер шрифта */
 line-height: 200px; 
 margin-bottom: 20px;
 }

 .er404 span { /* Знак ошибки (цифры) */
 font-size: 170px; /* Уменьшаем размер шрифта */
 margin: 0 15px; /* Отступы слева и справа */
 }
 
/* Стрелка для открытия сайдбара */
 .sidebar-arrow {
 height: 100px; /* Увеличиваем высоту стрелки */
 line-height: 100px !important; /* Выравниваем текст по вертикали */
 }

 /* Главное изображение товара */
 .gp-img {
 float: none; /* Отменяем обтекание */

 margin-left: auto; /* Центрируем изображение */
 margin-right: auto;
 width: 100%; /* Занимаем всю ширину контейнера */
 margin-bottom: 50px; /* Отступ снизу */
 } 
 
/* Большое изображение товара */
 .gp-img-big, 
 .gp-img-big img {
 width: 100%; /* Занимаем всю ширину */
 }

 /* Информация о группе товаров */
 .gp-info {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Занимаем всю ширину */
 }

 /* Изображение в посте */
 .post-img {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Занимаем всю ширину */
 margin-bottom: 20px; /* Добавляем отступ снизу */
 }

/* Текстовая часть поста */
 .post-text {
 margin-left: 0; /* Убираем отступ слева */
 }

 /* Заголовок страницы продукта */
 .pp-title {
 font-size: 18px;
 line-height: 22px;
 }

 /* FAQ (Часто задаваемые вопросы) */
 .faq-left, 
 .faq-right {
 float: none; /* Отменяем обтекание, блоки друг под другом */
 width: 100%; /* Занимаем всю доступную ширину */
 }
 
 .faq-right {
 padding-top: 40px; /* Добавляем отступ сверху */
 }

 /* Опции товара */
 .gp-options label {
 margin-bottom: 3px; /* Уменьшаем отступ снизу */
 }
}


/* АДАПТАЦИЯ СТИЛЕЙ ДЛЯ ЭКРАНОВ МЕНЬШЕ 567px */
@media (max-width: 567px) {
.tprofile.opened .tprofile-body {
 align-content: center;
 opacity: 1;
 position: absolute;
 top: 70px;
 left: -145px;
}
 .cat-info h1 {
 text-align: center;
 padding-left: 35px;
 padding-right: 35px;
 font-size: 16px;
 }
 
 .goods-view-mode-list {
 display: none;
 }
 
 .goods-view-mode-grid {
 display: none;
 }

 .sort-panel {
 display: flex;
 justify-content: center;
 align-items: center;
}

.sort-panel-left {
 flex: 1;
 text-align: center;
}

.sort-panel-right {
 position: absolute;
 right: 25px;
}
 
 
 .title b {
 font-weight: 600; /* Устанавливаем вес шрифта */
}
 
 .title h2 {
 font-size: 24px; /* Устанавливаем размер шрифта */
 line-height: 30px; /* Устанавливаем высоту строки */
}

 .promo-text {
 font-size: 16px;
 font-weight: 600; /* Устанавливаем вес шрифта */
}
 
 .promo-timer.is-countdown {
 padding-bottom: 15px; /* Устанавливаем нижний отступ */
 
}
 
 .promo-timer {
 padding: 40px 0 45px 50px;
}
 
 
 /* Секция */
 .section {
 padding-top: 10px; 
 }

 /* Контейнер */
 .cnt {
 width: calc(100% - 33px);
 margin: 0px 10px 0px 15px; 
 }



 .logo {
 display: block;
 float: none; 
 text-align: center;
 margin: -20px auto 15px; 
 }

 span.menu-icon {
 margin-left: 0; 
 }

 #menu > div {
left: -55px;
 top: 70px;
 }

 #header.scroll {
 padding-top: 3px; 
 }

 #header.scroll .logo {
 display: none; 
 }

 /* Iframe */
 iframe {
 display: block; 
 width: 95%; 
 margin: 20px auto 25px auto; 
 border-radius: 10px; 
 box-shadow: 0 16px 16px rgba(0, 0, 0, 0.2), inset 0 4px 8px rgba(0, 0, 0, 0.1); 
 }

 /* Путь */
 #wrapper > div.path {
 font-size: 16px; 
 line-height: 28px; 
 }

 /* Информация о товаре */
 .gp-info {
 padding-left: 1vw; 
 padding-right: 1vw; 
 }

 h1.gp-name {
 line-height: 1.4; 
 font-size: 22px; 
 letter-spacing: 0.03em; 
 text-align: center; 
 margin-bottom: 10px; 
 padding-left: 35px;
 padding-right: 35px; 
 }

 .gp-price {
 font-size: 18px; 
 margin-bottom: 10px; 
 color: #ff0000; 
 line-height: 1.5; 
 text-align: left; 
 }

 /* Улучшение читаемости .gp-more */
 .gp-more {
 font-size: 16px; 
 line-height: 1.6; 
 }

 /* Блок с изображениями товара */
 .gp-img {
 margin-bottom: 20px;
 }

 .gp-more-goods {
 margin-top: 10px;
 }

 /* Заголовок .title2 */
 .title2 {
 text-align: center; 
 padding-bottom: 0px; 
 }

 /* Элементы списка товаров */
 .list-item {
 display: contents; 
 margin: 0 auto; 
 }

 .g-text { 
 text-align: center;
 margin-bottom: 10px;
 }
 

 /* Название товара */
 .g-name {
 font-size: inherit; 
 font-weight: inherit; 
 max-width: 80%; 
 display: inline-block; 
 margin: 20px auto 0 auto; 
 
 }

 .list-item .g-name {
 font-size: 17px; 
 letter-spacing: 0.03em; /* Увеличиваем межбуквенный интервал */
 font-weight: bold; 
 line-height: 20px;
 max-width: 95%;
 font-family: 'Roboto', sans-serif; /* Устанавливаем шрифт */
 }

 /* Контент товара */
 .g-body {
 max-width: 100%; 
 margin: 0 auto; 
 display: block;
 padding: 0px 0 0px 0; 
 }

 /* Левая и правая стрелки карусели */
 .owl-prev,
 .owl-next {
 color: #3F3836; 
 }

 /* Левая стрелка карусели */
 .owl-prev {
 left: 0px !important;
 }

 /* Правая стрелка карусели */
 .owl-next {
 right: 0px !important; 
 }
 
/* Выравнивание текста слайда по центру */
 .slide-text-1 {
 text-align: center; /* Выравниваем текст по центру */
 }

 
/* Увеличение шрифта для текста слайда */
 .slide-text-2 {
 font-size: 16px; /* Увеличиваем размер шрифта */
 text-align: center; /* Выравнивание текста по ширине */
 line-height: 1.55;
 }

 
 .promo-timer.is-countdown {
 padding-top: 15px; /* Устанавливаем верхний отступ */
}
 
 
 #footer {
 margin-top: 50px; /* Устанавливаем верхний отступ */
}
 
 .title {
 padding-bottom: 10px; /* Устанавливаем нижний отступ */
}

 .collf {
 font-size: 15px; /* Устанавливаем размер шрифта */
 text-align: center; /* Выравниваем текст по центру */
 line-height: inherit;
 }
 
 
 .promo-right {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 }

 .promo-right .title,
 .promo-right .promo-price,
 .promo-right .promo-text,
 .promo-right .promo-timer.is-countdown,
 .promo-right .button.color.big {
 width: 100%;
 }
 .title b {
 display: block;
 text-align: center;
 }

.title h2 {
 text-align: center;
 }

 .f-top.cnt.clr {
 padding-left: 20px;
 }

 .col3.v1 a, .col3.v2 a {
 font-size: 16px;
 line-height: 1.9;
}


}
 
/* КОНЕЦ БЛОКА ДЛЯ МОБИЛЬНЫХ */




/* Иконка в блоке */
.icon-block-icon {
 color: #e5351a; /* Ярко-красный цвет */
}

/* Футер */
footer#footer {
 margin-top: 100px; /* Отступ сверху от контента */
}

/* Параграфы внутри блока .avat */
.avat p {
 font-size: 15px;
 line-height: 24px;
 margin-bottom: 10px;
}

/* Стилизация заголовков внутри блока .avat */
.avat h3 {
 margin-top: 30px; /* Отступ сверху */
 line-height: 30px; /* Высота строки */
}

/* Стилизация ссылок внутри блока .avat */
.avat p a {
 font-weight: 600; /* Полужирный шрифт */
 border-bottom: 2px solid #219149; /* Зеленое подчеркивание */
}

/* Ссылки в блоке .avat */
.avat p a:hover { /* Ссылка при наведении */
 font-weight: 600; /* Полужирный */
 border-bottom: 2px solid #e5351a; /* Ярко-красное подчеркивание */
 color: #e5351a; /* Ярко-красный цвет текста */
}

.avat a:hover span { /* Элемент внутри ссылки при наведении */
 color: #e5351a; /* Ярко-красный цвет текста */
}

/* Ссылки в списке дополнительных характеристик товара */
.gp-more li a {
 color: #219149; /* Зеленый цвет */
 border-bottom: 2px solid; /* Подчеркивание того же цвета */
}

.gp-more li a:hover { /* При наведении */
 color: #e5351a; /* Ярко-красный цвет */
 border-bottom: 2px solid #e5351a; /* Ярко-красное подчеркивание */
}


/* Адаптация стилей для экранов больше 990px */
@media (min-width: 990px) {
 /* Текст в слайдере */
 .slide-text-1 {
 font-size: 34px; /* Увеличиваем размер шрифта */
 line-height: 42px; /* Увеличиваем высоту строки */
 font-weight: 600; /* Полужирный */
 text-transform: none; /* Отменяем преобразование в верхний регистр */
 }

 .slide-text-2 {
 margin-top: 40px; /* Увеличиваем отступы сверху и снизу */
 margin-bottom: 40px;
 }
}

/* Стили для кнопок внутри слайдера */
.slider .button {
 border-radius: 10px; /* Закругленные углы для кнопок */
}

/* Стили для изображений внутри блока .jop */
.jop img {
 max-width: 110px; /* Максимальная ширина изображения */
}

/* Стили для ссылок внутри заголовков (.title) */
.title a {
 border-bottom: 2px solid; /* Подчеркивание */
 color: #219149; /* Зеленый цвет */
}

/* Стили для блока .mans */
.mans {
 text-align: center; /* Выравнивание по центру */
}

/* Стили для изображений внутри блока .mans */
.mans img {
 max-width: 64px; /* Максимальная ширина изображения */
}

/* Стили для блока bats (вероятно, контейнер для двух блоков) */
.bats {
 max-width: 700px; /* Максимальная ширина */
 position: relative; /* Позиционирование для дочерних элементов */
 margin: 40px 0; /* Отступы сверху и снизу */
 font-size: 15px; /* Размер шрифта */
 color: #000; /* Черный цвет текста */
}

/* Стили для блоков внутри .bats (вероятно, левого и правого блоков) */
.lps, 
.rps {
 float: left;
 width: 40%; /* Ширина блока 40% от родителя */
}

/* Изображения внутри блока .bats */
.bats img {
 max-width: 24px !important; /* Максимальная ширина изображения */
 display: inline-block; /* Разрешаем тексту обтекать изображение */
 position: relative; 
 top: 6px; /* Вертикальное смещение */
 margin-right: 8px; /* Отступ справа */
}

/* Параграфы внутри блока .bats */
.bats p {
 font-weight: 600; /* Полужирный шрифт */
 margin-bottom: 20px; /* Отступ снизу */
}

/* Ссылки внутри блока .bats */
.bats a {
 display: block; /* Делаем ссылку блочным элементом */
 margin-bottom: 5px; /* Отступ снизу */
 color: #000; /* Черный цвет текста */
 font-weight: 500; /* Средний вес шрифта */
 font-size: 15px;
}

/* Ссылки внутри блока .bats при наведении */
.bats a:hover { 
 color: #f00; /* Красный цвет текста при наведении */
}
/* Псевдоэлемент для фона блока .bats */
.bats::after {
 content: "";
 background-image: url(https://vitogarm.com/ns/q4.png); /* Фоновое изображение */
 width: 180px;
 height: 180px;
 position: absolute;
 top: 10px; /* Положение сверху */
 right: 0; /* Положение справа */
 background-size: cover; /* Растягиваем изображение на всю область */
}
/* Стили для ссылок внутри блоков v1 и v2 */
.v1 a, 
.v2 a {
 display: block; /* Делаем ссылку блочным элементом */
 font-size: 13px; /* Размер шрифта */
 margin-bottom: 6px; /* Отступ снизу */
}

/* Изображения внутри ссылок блока v1 */
.v1 a img {
 max-width: 24px; /* Максимальная ширина изображения */
 display: inline-block; /* Разрешаем тексту обтекать изображение */
 position: relative;
 top: 6px; /* Вертикальное смещение */
 margin-right: 8px; /* Отступ справа */
}


/* Адаптация стилей для экранов больше или равно 990px */
@media (min-width: 990px) {
 .f-top .col3 {
 width: 25%; /* Устанавливаем ширину колонки в 25% */
 }
}


/* Адаптация стилей для экранов от 990px и шире */
@media (min-width: 990px) {
 /* Левая колонка */
 .collf {
 float: left; /* Выравнивание по левому краю */
 }

 /* Правая колонка */
 .colrf {
 float: right; /* Выравнивание по правому краю */
 }
}

/* Верхняя часть футера */
.f-top {
 position: relative; /* Позиционирование для псевдоэлемента */
}

/* Псевдоэлемент для фона в верхней части футера */
.f-top::after { 
 content: "";
 background-image: url(https://vitogarm.com/img/new_logo.png); /* Фоновое изображение */
 width: 180px;
 height: 180px;
 position: absolute;
 top: 40px; /* Положение сверху */
 right: 0; /* Положение справа */
 background-size: cover; /* Растягиваем изображение на всю область */
}

/* Колонка, выровненная по левому краю */
.collf {
 padding-top: 10px; /* Отступ сверху */
}

/* Верхняя часть футера */
.f-top {
 padding-top: 60px; /* Отступ сверху */
 padding-bottom: 10px; /* Отступ снизу */
}

/* Футер */
#footer {
 background: #fbfbfb; /* Светло-серый фон */
 color: #000000; /* Чёрный цвет текста */
}

/* Ссылки в футере */
#footer a {
 color: #000; /* Чёрный цвет текста */
}

/* Стили для футера */
.f-copy { /* Блок с копирайтом */
 padding: 25px 0; /* Отступы сверху и снизу */
 border-top: 1px solid #d9d9d9; /* Разделительная линия */
}

/* Стили для заголовка внутри блока v2 */
.v2 h3 {
 font-size: 16px;
 margin-bottom: 10px; /* Отступ снизу */
}

/* Адаптация стилей для экранов меньше 990px */
@media (max-width: 990px) {
 .collf { /* Возможно, это левая колонка */
 margin-bottom: 20px; /* Отступ снизу */
 }

 /* Скрываем фоновые изображения для .f-top и .bats */
 .f-top::after, 
 .bats::after {
 display: none;
 }

 /* Блоки внутри .bats (возможно, колонки) */
 .lps, 
 .rps {
 float: none; /* Отменяем обтекание */
 width: 100%; /* Каждый блок занимает всю ширину */
 }
}


/* Адаптация стилей для экранов от 990px и шире */
@media (min-width: 990px) {

.slide-right img {
 width: 80%;
 display: flex !important; /* Используем Flexbox для центрирования */
 justify-content: center; /* Горизонтальное центрирование */
 align-items: center; /* Вертикальное центрирование */
 height: auto; /* Автоматическая высота */
 object-fit: contain; /* Сохраняем пропорции изображения */
 margin: 0 auto; /* Центрируем изображение */
 border-radius: 0; /* Убираем скругление углов */
 box-shadow: none; /* Убираем тень */
 /* background: #f6f6f6; */
 /* box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff; */
 transition: all .3s ease; /* Плавный переход при изменении свойств */ 

}
.slide-right img:hover{
 transform: scale(1.02);

}
.slide-right img:active:hover{
 transform: scale(0.98);

}

/* Ссылка в правой части слайда */
 .slide-right a {
 width: 500px; /* Ширина ссылки */
 height: 500px; /* Высота ссылки */
 background: #fff; /* Белый фон */
 border-radius: 50%; /* Круглая форма */
 display: flex; /* Используем Flexbox для центрирования */
 float: right; /* Выравнивание по правому краю */
 margin-right: 70px; /* Отступ справа */
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 transition: all .3s ease; /* Плавный переход при изменении свойств */
 }
}
.slide-right a:hover{
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);

}
.slide-right a:active:hover{
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);

}
/* Адаптация стилей для экранов меньше 990px */
@media (max-width: 990px) {
 /* Ссылка в правой части слайда */
 .slide-right a { 
 width: 270px; /* Уменьшаем размер ссылки */
 height: 270px;
 display: flex; /* Используем Flexbox для центрирования */
 justify-content: center; 
 margin: 0 auto; /* Центрируем */
 border-radius: 50%;
 background: #fff; /* Белый фон */
 }

 /* Изображение в правой части слайда */
 .slide-right img {
 width: 80%; /* Занимает 80% ширины родительского блока */
 display: flex !important; /* Используем Flexbox для центрирования (переопределение) */
 justify-content: center;
 align-items: center;
 height: auto; /* Автоматическая высота */
 object-fit: contain; /* Сохраняем пропорции */
 margin: 0 auto;
 border-radius: 0; /* Прямоугольная форма */
 box-shadow: none; /* Убираем тень */
 }
}

/* Адаптация стилей для экранов от 990px и шире */
@media (min-width: 990px) {
 .post-image img {
 height: 200px; /* Фиксируем высоту изображения */
 object-fit: contain; /* Сохраняем пропорции изображения, заполняя доступное пространство */
 }
}

/* Описания для метода доставки #3 и таблицы способов оплаты */
div#delivery-descr-3, 
table#payments-list {
 font-size: 15px;
}

/* Ссылки в описаниях оплаты и доставки */
#payments-list a span, 
div#delivery-descr-3 a span {
 color: #219149; /* Зеленый цвет */
 font-weight: 600; /* Полужирный */
 border-bottom: 2px solid; /* Подчеркивание */
}

/* Элемент с классом cwax */
span.cwax {
 color: #219149; /* Зеленый цвет */
 border-bottom: solid 2px; /* Подчеркивание */
 font-weight: 600; /* Полужирный */
}

/* Ссылки в форме оформления заказа */
form#checkout-form a {
 color: #219149; /* Зеленый цвет */
 font-weight: 600; /* Полужирный */
}

/* Изображения в блоке xsa */
.xsa img {
 max-width: none !important; /* Отменяем максимальную ширину */
}

/* Стили для параграфов в теле документа */
body p {
 margin-bottom: 10px; /* Отступ снизу */
 font-size: 15px; /* Размер шрифта */
}

/* Центрирование изображений в блоке .g-img */
.g-img img {
 margin: 0 auto; /* Автоматические отступы по бокам для центрирования */
 transition: all 0.3s ease;
}
.g-img img:hover {
 transform: scale(1.05);
}
/* Кнопка light-btn в блоке xw-plain */
.xw-plain .light-btn {
 background: #219149 !important; /* Зелёный фон */
 border: 0; /* Убираем границу */
}

/* Ссылки в блоке myWinCont */
.myWinCont a.noun:link,
.myWinCont a.noun:visited,
.myWinCont a:link,
.myWinCont a:visited {
 text-decoration: none; /* Убираем подчёркивание */
 color: #219149; /* Зелёный цвет */
}

/* Элементы внутри списка изображений #image-list */
#image-list .belt {
 position: relative !important; /* Переопределение позиционирования */
 left: 0; /* Положение слева */
 top: 0; /* Положение сверху */
}

#image-list .inner {
 min-height: 200px; /* Минимальная высота */
}

#image-list .inner .img-controls {
 right: 0; /* Положение справа */
 overflow: visible !important; /* Переопределение видимости */
 z-index: 99999 !important; /* Переопределение z-index */
}

/* Скругление углов кнопок */
.button,
.g-body:hover .g-button,
input#order-button,
#order-but-recalc,
span#go-top,
.mf-button button,
#shop-page-more button,
span.menu-icon {
 border-radius: 10px !important; /* Закругленные углы */
}

/* Положение кнопки при наведении на товар */
.g-body:hover .g-button {
 bottom: -10px; /* Смещение кнопки вверх при наведении */
}

.g-body .g-button { /* Положение кнопки без наведения (исходное положение) */
 bottom: -10px; 
 display: none;
}

/* Стили изображений в контенте и секциях */
#content img, 
.section img {
 max-width: 100%; /* Максимальная ширина изображения */
 height: auto !important; /* Автоматическая высота */
}

/* Адаптация стилей меню для экранов меньше 1279px */
@media (max-width: 1279px) {
 /* ... (предыдущие стили) ... */

 #menu .uMenuRoot li {
 margin: 0;
 padding: 3px 0; /* Уменьшаем отступы */
 }

 #menu .uMenuRoot li ul {
 max-height: 200px; /* Ограничиваем высоту подменю */
 overflow: scroll; /* Добавляем прокрутку, если содержимое выходит за пределы */
 }
}

/* Изображения в блоке mans */
.mans img {
 max-width: 64px !important; /* Максимальная ширина изображения */
}

/* Изображения в блоке jop */
.jop img {
 max-width: 110px !important; /* Максимальная ширина изображения */
}

/* Ссылки в блоке top-ct */
a.top-ct {
 border-radius: 10px; /* Закругленные углы */
}

/* Спан внутри параграфов в body */
body p span {
 margin-bottom: 10px; 
 font-size: 15px; /* Размер шрифта */
 line-height: 20px; /* Межстрочный интервал */
 color: #000; /* Чёрный цвет */
 font-weight: 400; /* Обычный */
 font-family: 'Montserrat', sans-serif;
}

/* Таблица заказов и input type="button" */
#order-table,
#order-table *,
input[type="button"] {
 border-radius: 10px; /* Закругленные углы */
}

.otzivi {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Стили для экранов больше 567px */
@media (min-width: 568px) {
 h1.gp-name {
 line-height: 1.4;
 font-size: 20px;
 text-align: left;
 margin-bottom: 10px;
 letter-spacing: 0.03em; /* Увеличение межбуквенного интервала */
 }

 .gp-price {
 margin-bottom: 9px; /* Отступ снизу */
 }
 
 
 }
.slide-text-2-hov{
 transition: all .3s ease; /* Плавный переход при изменении свойств */ 
}
.slide-text-2-hov:hover{
 color: #219149;
}
.left-otzivi{
width: 150px; 
height: 150px;
text-align: center;
}
.btn_otzivi{
margin-top: 35px;
margin-left: 195px;
}
.btn_otzivi_1{
margin-top: 135px;
margin-left: 195px;
}
.otzivi_off{
flex: 1 1 45%; 
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 12px;
padding: 20px;
display: flex; 
gap: 20px;
max-width: 500px; 
min-width: 300px; 
}


@media (max-width: 768px) {
 .slide .cnt {
 flex-direction: column;
 align-items: center;
 }

 .slide-left, .slide-right {
 width: 100% !important;
 text-align: center;
 }

 .slide-text-2 p {
 font-size: 1em !important;
 }

 .slide-price {
 font-size: 1.2em;
 /* margin: 10px 0;*/
 }
 
 .otzivi > div {
 flex-direction: column;
 max-width: 100% !important;
 margin: 0 10px;
 gap: 0px;
 }

 .otzivi img {
 width: 100px !important;
 height: 100px !important;
 margin: 0 auto;
 }

 .otzivi .check-review-btn_1 {
 display: block;
 margin: 20px auto 0 auto !important;
 }

 .otzivi div[style*="padding-top: 78.5px"] {
 padding-top: 0px !important;
 }
 .left-otzivi{
width: auto; 
height: auto;
}
 .btn_otzivi{
 margin-top: auto;
 margin-left: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 10px;
}
 .btn_otzivi_1{
 margin-top: auto;
 margin-left: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 10px;
}
 .otzivi_off{ 
gap: 0px;
}
 }

:root {
 --green: #219149;
 --light-bg: #F6F6F6;
 --dark-text: #3F3836;
 --glass-bg: rgba(246, 246, 246, 0.55);
 --glass-border: rgba(255, 255, 255, 0.3);
}

/* Глазморфизм-хедер */
#header {
 position: fixed;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 width: 70%;
 background: var(--frost-bg);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
 border-radius: 24px;
 border: 1px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 0px;
 z-index: 1000;
}

/* Контейнер */
#header .cnt {
 align-items: center;
 justify-content: space-between;
 padding: 10px 32px;
 flex-wrap: wrap;
}

/* Логотип */
.logo {
 font-size: 28px;
 font-weight: 700;
 font-family: 'Segoe UI', sans-serif;
 text-decoration: none;
}
.logo span {
 color: var(--green);
}
.logo {
 color: var(--dark-text);
}

/* Меню */
#menu {
 display: flex;
 gap: 28px;
 align-items: center;
 font-family: 'Segoe UI', sans-serif;
 font-size: 15px;
 color: var(--dark-text);
}
#menu a {
 font-size: 15px;
 color: var(--dark-text);
 text-decoration: none;
 position: relative;
 padding: 4px 0;
 transition: color 0.3s;
}
#menu a:hover {
 color: var(--green);
}
#menu a.active::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -4px;
 width: 100%;
 height: 2px;
 background: var(--green);
}

/* Иконки */
.search-icon,
.tprofile-icon {
 font-size: 20px;
 color: var(--dark-text);
 margin-left: 20px;
 cursor: pointer;
 transition: color 0.2s ease;
}
.search-icon:hover,
.tprofile-icon:hover {
 color: var(--green);
}

/* Поиск */
#s-form {
 position: absolute;
 top: 70px;
 right: 32px;
 display: none;
 background: var(--light-bg);
 border-radius: 12px;
 padding: 12px;
 box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
#s-form input {
 border: none;
 outline: none;
 padding: 8px 12px;
 font-size: 14px;
 width: 200px;
 border-radius: 6px;
 margin-right: 8px;
}
#s-form .s-button {
 background-color: var(--green);
 border: none;
 color: white;
 padding: 8px 10px;
 border-radius: 6px;
 cursor: pointer;
}
#s-form .s-close {
 margin-left: 10px;
 cursor: pointer;
 color: var(--dark-text);
}

/* Профиль */
.tprofile {
 position: relative;
}
.tprofile-body {
position: absolute;

 right: 0;
 background: var(--light-bg);
 padding: 16px;
 border-radius: 12px;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
 display: none;
 min-width: 200px;
}
.tprofile.opened .tprofile-body {
 display: block;
}
.tprofile-name {
 font-size: 14px;
 margin: 8px 0;
 color: var(--dark-text);
}
.tprofile-links a {
 color: var(--green);
 text-decoration: none;
 font-size: 14px;
}
.tprofile-ava {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 object-fit: cover;
}

/* Корзина с кружком (если у тебя отдельный блок $BASKET$ вставляется с кружком, то оформи внутри него аналогично) */
.basket-icon {
 position: relative;
}
.basket-icon .badge {
 position: absolute;
 top: -6px;
 right: -6px;
 background: var(--green);
 color: white;
 font-size: 11px;
 padding: 2px 6px;
 border-radius: 50%;
}

#header.hidden {
opacity: 0;
 transform: translateY(-40px) translateX(-50%) scale(0.98) rotateX(2deg);
 box-shadow: none;
 pointer-events: none;
 background: rgba(246, 246, 246, 0.2);
 transition: transform 0.6s ease, opacity 0.6s ease, background 0.6s ease;
}
.circle-bg {
 position: absolute;
 width: 400px;
 height: 400px;
 border-radius: 50%;
 background: radial-gradient(circle at center, rgba(26, 141, 67, 0.4) 0%, rgba(26, 141, 67, 0.2) 35%, rgba(26, 141, 67, 0.05) 70%, rgba(26, 141, 67, 0) 100%);
 filter: blur(2px);
 z-index: 0;
 top: 45%;
 left: 22%;
 transform: translate(-50%, -50%);
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 z-index: 0;
}
.circle-bg.second {
 width: 250px;
 height: 250px;
 top: 75%;
 left: 75%;
 border-radius: 50%;
 background: radial-gradient(circle at center, rgba(26, 141, 67, 0.4) 0%, rgba(26, 141, 67, 0.2) 35%, rgba(26, 141, 67, 0.05) 70%, rgba(26, 141, 67, 0) 100%);
 filter: blur(2px);
 z-index: 0;
 transform: translate(-50%, -50%);
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 z-index: 0;
 position: absolute;
}
.circle-bg.third {
width: 250px;
 height: 250px;
 top: 75%;
 left: 195%;
 border-radius: 50%;
 background: radial-gradient(circle at center, rgba(26, 141, 67, 0.4) 0%, rgba(26, 141, 67, 0.2) 35%, rgba(26, 141, 67, 0.05) 70%, rgba(26, 141, 67, 0) 100%);
 filter: blur(2px);
 z-index: 0;
 transform: translate(-50%, -50%);
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
 z-index: 0;
 position: absolute;
}
@media (max-width: 991px) {
.circle-bg {
 width: 200px;
 height: 200px;
 top: 50%;
 left: 25%;
}
.circle-bg.second {
 width: 150px;
 height: 150px;
 top: 80%;
 left: 80%;
 }
.circle-bg.third {
 width: 150px;
 height: 150px;
 top: 125%;
 left: 80%;
}
}

.review-card {
 background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
 border: 1px solid rgba(0,0,0,0.05);
 border-radius: 16px;
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 15px;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
 }

 .reviews_1 {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
 gap: 28px;
 padding: 10px 10px;
 max-width: 1200px;
 margin: 0 auto;
 }
.review-card:hover {
 transform: translateY(-5px) scale(1.03);
 cursor: pointer;
}
 .review-img {
 width: 150px;
 height: 150px;
 margin: 0 auto;
 text-align: center;
 }

 .review-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border: 2px solid #3F3836;
 border-radius: 50%;
 box-shadow: 0 12px 14px rgba(0, 0, 0, 0.15);
 }

 .review-header {
 text-align: center;
 font-weight: bold;
 font-size: 18px;
 }

 .review-text {
 font-size: 16px;
 color: #333;
 line-height: 1.5;
flex-grow: 1;
font-style: italic;
 }

 .review-text strong {
 font-weight: bold;
 }

 .check-review-btn {
 margin: 30px auto;
 background-color: #3F3836;
 color: white;
 padding: 10px 25px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 16px;
 display: block;
 }

 .check-review-btn:hover {
 background-color: #2f2a28;
 }

 .hidden {
 display: none;
 }
.reviews {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 28px;
 padding: 10px 10px;
 max-width: 1200px;
 margin: 0 auto;
 }
.check-review-btn_1 {
 background-color: #219149; /* Зелёный фирменный */
 color: #fff; /* Белый текст */
 font-weight: 600; /* Полужирный текст */
 padding: 0px 20px; /* Внутренние отступы */
 border: none; /* Без рамки */
 border-radius: 8px; /* Скруглённые углы */
 font-size: 14px; /* Размер текста */
 cursor: pointer; /* Курсор при наведении */
 transition: background-color 0.3s ease, transform 0.2s ease;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Мягкая тень */
}

.check-review-btn_1:hover {
 background-color: #1b7e3e; /* Темнее при наведении */
 transform: translateY(-2px); /* Лёгкое поднятие */
}

.check-review-btn_1:active {
 transform: translateY(0); /* Возврат при нажатии */
}
/* Модальное окно */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
 display: block;
 max-width: 90%;
 max-height: 80%;
 margin: 5% auto;
 border-radius: 10px;
}

.close {
 position: absolute;
 top: 15px;
 right: 30px;
 font-size: 40px;
 color: white;
 cursor: pointer;
}
.catalog_block {
 padding: 20px;
 background: #ffffff;
 position: relative;
}

.carousel-container {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 max-width: 100%;
 margin: 0 auto;
}

.carousel-wrapper {
 overflow-x: auto;
 white-space: nowrap;
 padding: 10px 0;
 scroll-behavior: smooth;
 flex: 1;
 scrollbar-width: none;
 -ms-overflow-style: none;
 max-width: 1110px;
 margin: 0 auto;
 overflow: hidden;
 padding: 15px 0px; /*добавили отступы слева и справа */
 padding-right: 0;
 box-sizing: content-box;
 overflow: hidden;
}
.products_carousel::after {
 content: '';
 display: block;
 width: 5px; /*пространство для тени последнего элемента*/
 flex-shrink: 0;
}
.products_carousel .product:last-child {
 margin-right: 5px; /*вместо внешнего отступа у всей обёртки*/
}

.products_carousel {
 display: flex;
 gap: 0px;
 padding: 0;
 margin: 0;
 list-style: none;
}

.product {
 flex: 0 0 auto;
 width: 170px;
 background: #fff;
 border-radius: 6px;
 text-align: center;
 padding: 10px;
 transition: 0.3s ease;
 white-space: normal; /* Разрешает перенос строк */
 word-wrap: break-word; /* Переносит слова, которые не помещаются */
 word-break: break-word; /* Разбивает длинные слова */
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
margin: 0 10px;
}

.product:hover {
}
.product img {
 max-width: 100%;
 height: auto;
 border-radius: 6px;
 transition: transform 0.3s ease;
}

.product:hover img {
 transform: scale(1.05);
}

.product_name {
 font-size: 14px;
 font-weight: bold;
 color: #333;
 margin: 10px 0 5px;
}

.product_price {
 color: #28a745;
 font-weight: bold;
 font-size: 16px;
 margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

.product a {
 text-decoration: none;
 color: inherit;
 display: block;
 transition: all 0.2s ease-in-out;
}

.carousel-btn {
background: radial-gradient(circle at center, rgb(29 152 73) 0%, rgb(26 141 67 / 52%) 100%, rgb(0 0 0 / 5%) 100%, rgb(26 141 67 / 0%) 100%); color: fffff;
 font-size: 24px;
 cursor: pointer;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 1;
 border-radius: 70%;
 transition: all 0.3s ease;
 box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 
 inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* тень снизу для глубины */
}
.product:active:hover img{
 transform: scale(1);
 transition: transform 0.3s ease;
}
.product:active:hover{
 transform: scale(0.95); 
 transition: transform 0.3s ease;
}
.carousel-btn.left {
 left: 0px;
}

.carousel-btn.right {
 right: 0px;
}

.carousel-btn:hover {
 background: #1B7E3E;
 background: radial-gradient(circle at center, rgb(29 152 73) 0%, rgb(26 141 67 / 25%) 100%, rgb(0 0 0 / 5%) 100%, rgb(26 141 67 / 0%) 100%);
transform: translateY(-50%) scale(1.05); /* Эффект поднятия */
}

.carousel-btn:active {
 transform: translateY(-50%) scale(0.95); /* Эффект нажатия */
}

.slide-text-1_green {
 font-weight: 600; /* Полужирный */
 color: #219149; /* Зелёный */
 position: static;
}
@media (max-width: 768px) {
 .reviews_1 {
 max-width: 500px;
 }
 
 
/* ================================================================ */
/* === НОВЫЕ СТИЛИ ДЛЯ УВЕЛИЧЕНИЯ ИЗОБРАЖЕНИЙ НА МОБИЛЬНЫХ === */
/* === Добавлено для улучшения видимости товаров на смартфонах === */
/* ================================================================ */

@media (max-width: 567px) {
 /* Адаптивный размер изображений товаров в каталоге */
 .g-img img,
 .list-item img,
 .g-img-link img,
 .g-body img,
 .list-item .g-img img,
 .g-body .g-img img {
 width: calc(100vw - 244px) !important;
 height: calc(100vw - 60px) !important;
 max-width: 360px !important;
 max-height: 360px !important;
 min-width: 280px !important;
 min-height: 280px !important;
 object-fit: cover;
 margin: 0 auto !important;
 display: block !important;
 /* border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
 }
 
 /* Контейнер для изображения - ЦЕНТРИРОВАНИЕ */
 .g-img,
 .g-img-link {
 width: 100% !important;
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 padding: 0 !important;
 margin: 0 auto 0px !important;
 box-sizing: border-box;
 }
 
 /* Карточка товара - ЦЕНТРИРОВАНИЕ */
 .list-item,
 .g-body {
 width: 100% !important;
 margin: 0 auto 0px !important;
 /*padding: 10px !important;*/
 box-sizing: border-box !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 }
 
 /* Оптимизация загрузки изображений */
 .g-img img,
 .list-item img {
 loading: lazy;
 will-change: transform;
 }
 
 /* Улучшаем отображение текста под изображением */
 .g-name_1,
 .g-name {
 font-size: 16px !important;
 line-height: 1.4 !important;
 margin-top: 0px !important;
 padding: 0 10px !important;
 font-weight: 400 !important;
 text-align: center !important;
 }
 
 .g-price_1,
 .g-price {
 font-size: 20px !important;
 font-weight: bold !important;
 color: #219149 !important;
 margin-top: 8px !important;
 text-align: center !important;
 }
 
 /* Убираем лишние отступы и центрируем текст */
 .g-text {
 padding: 0 !important;
 width: 100% !important;
 text-align: center !important;
 }
 
 /* Убираем float и центрируем всё содержимое */
 .list-item *,
 .g-body *,
 .g-img * {
 float: none !important;
 margin-left: auto !important;
 margin-right: auto !important;
 }
}

 /* Адаптивные стили для названий товаров на смартфонах */
@media (max-width: 567px) {
 .g-name_1 {
 max-width: 75%; /* 1. Ограничиваем ширину, чтобы текст не прилипал к краям */
 margin-left: auto; /* 2. Центрируем сам блок по горизонтали */
 margin-right: auto; /* 2. Центрируем сам блок по горизонтали */
 display: block; /* Это нужно для того, чтобы отступы сработали */
 text-wrap: balance;
 text-align: center; /* 3. Центрируем текст внутри этого блока */
 
 }

}
 
 
/* === КОНЕЦ НОВЫХ СТИЛЕЙ ДЛЯ МОБИЛЬНЫХ === */