/* =============================================================
   Основной шаблон STAX Headphones (Bitrix)
   Базовые стили темы-образца подключаются первым импортом,
   далее — адаптация под Bitrix и собственные компоненты.
   ============================================================= */
@import url("css/theme.css");

/* -------------------------------------------------------------
   Изображения: в шаблоне не используется JS-ленивая загрузка,
   поэтому отключаем скрытие .lazyload из темы.
   ------------------------------------------------------------- */
.lazyload,
.lazyloading {
	opacity: 1 !important;
}

/* -------------------------------------------------------------
   Слайдшоу: лёгкий слайдер на CSS + JS (без slick)
   ------------------------------------------------------------- */
.slideshow {
	position: relative;
}

.slideshow .slideshow__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity .7s cubic-bezier(.44, .13, .48, .87),
	visibility .7s cubic-bezier(.44, .13, .48, .87);
}

.slideshow .slideshow__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.slideshow .slideshow__image {
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}


.slideshow .slideshow__link {
	z-index: 2;
}

.slideshow .slideshow__slide.is-active .slideshow__text-content {
	transform: translateY(-50%);
	opacity: 1;
}

/* Индикатор загрузки из темы (спиннер вокруг текста слайда).
   В оригинале он гасится правилом .slick-initialized .slideshow__text-content:after,
   а у нас класс slick не используется — отключаем спиннер явно. */
.slideshow .slideshow__text-content:after {
	content: none;
	opacity: 0;
	visibility: hidden;
	animation: none;
}

.slideshow__dots {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slideshow__dots li {
	margin: 0 5px;
}

.slideshow__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	font-size: 0;
	cursor: pointer;
	border: 0;
	border-radius: 50%;
	background: #fff;
	opacity: .35;
	transition: opacity .2s;
}

.slideshow__dots li.is-active button {
	opacity: .9;
}

/* Кнопка паузы слайдшоу (a11y).
   Стили НЕ переопределяем: в теме она скрыта классом .visually-hidden
   и появляется только при получении фокуса с клавиатуры — см. правило
   .slideshow__pause:focus { clip: auto; width: auto; ... } в css/theme.css.
   Свои правила здесь ломали бы этот механизм (специфичность .slideshow__pause
   перекрывала бы .visually-hidden, и кнопка висела бы поверх слайда всегда). */

/* -------------------------------------------------------------
   Выпадающее меню в шапке (управляется классом из main.js)
   ------------------------------------------------------------- */
.site-nav--active-dropdown .site-nav__dropdown {
	display: block;
}

.site-nav__childlist-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.site-nav__childlist-item {
	padding: 0 15px;
	text-align: left;
}

/* -------------------------------------------------------------
   Отзывы (Testimonials)
   В образце slick выстраивает все три отзыва в один ряд
   (на узком экране — по одному), точек и автопрокрутки нет.
   Поэтому JS не нужен: раскладка выполняется CSS.
   ------------------------------------------------------------- */
.quotes-slider {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.quotes-slider .quotes__slide {
	flex: 0 0 33.33333%;
	max-width: 33.33333%;
	padding: 0 15px;
	box-sizing: border-box;
}

@media only screen and (max-width: 749px) {
	.quotes-slider .quotes__slide {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.quotes-slider .quotes__slide + .quotes__slide {
		margin-top: 35px;
	}
}

/* -------------------------------------------------------------
   Выдвижная панель поиска
   ------------------------------------------------------------- */
/* Панель поиска: позиционирование задаёт тема (.drawer--top + transform),
   высоту и top скрипт выставляет от шапки; здесь только гарантия фиксации
   поверх страницы и видимости при открытом drawer. */
#SearchDrawer {
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 9;
	background: #fafafa;
}

body.js-drawer-open-top #SearchDrawer {
	display: block;
}

#SearchDrawer .search-bar__table {
	display: table;
	width: 100%;
}

#SearchDrawer .search-bar__table-cell {
	display: table-cell;
	vertical-align: middle;
}

/* -------------------------------------------------------------
   Служебные элементы Bitrix
   ------------------------------------------------------------- */
#panel {
	position: relative;
	z-index: 10000;
}

.page-container {
	min-height: 300px;
}

/* Пустые включаемые области не должны влиять на отступы */
.index-section--flush > div:empty {
	display: none;
}

/* -------------------------------------------------------------
   Страница коллекции (раздел каталога, шаблон catalog.section/collection)
   ------------------------------------------------------------- */

/*
 * В тулбаре коллекции по требованию заказчика остался только счётчик
 * товаров — центрируем его (в теме он «прижат» влево из-за flex-раскладки).
 */
.collection-header .filters-toolbar__item--count {
	margin: 0 auto;
}

/*
 * Сетка товаров: в теме у .grid--view-items стоит overflow:auto — при
 * отрицательном отступе .grid{margin-left:-30px} это даёт собственную
 * горизонтальную полосу прокрутки у блока. Обтекание и так сбрасывается
 * правилом .grid:after{clear:both}, поэтому прокрутка не нужна.
 */
.grid--view-items {
	overflow: visible;
}

/* -------------------------------------------------------------
   Детальная страница товара (шаблон catalog.element/product)
   ------------------------------------------------------------- */

/* Главное изображение галереи */
.product-single__photo-image {
	display: block;
	width: 100%;
	height: auto;
}

.product-single__no-photo {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: #3d4246;
}

/* Миниатюры: кликабельны, активная выделяется рамкой (.active-thumb из темы) */
.product-single__thumbnail {
	cursor: pointer;
}

/*
 * Миниатюры галереи: в образце ровно четыре плитки в ряд, остальные
 * переносятся на следующую строку. Тема выстраивает их inline-block
 * с фиксированной шириной, поэтому раскладываем через flex.
 */
.product-single__thumbnails {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}

.product-single__thumbnails-item {
	width: 25%;
	max-width: none;
	padding: 0 5px 10px;
	float: none;
}

/* Превью занимает всю ширину плитки (четверть колонки с фото) */
.product-single__thumbnail {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.product-single__thumbnail-image {
	width: 100%;
	height: auto;
}

/* Зум главного изображения при наведении (как в теме-образце) */
.product-single__photo-image {
	transition: transform .25s ease;
	will-change: transform;
}

.product-single__photo.is-zoomed .product-single__photo-image {
	transform: scale(2);
}

/* Увеличение не должно выходить за границы блока */
.product-single__photo.js-zoom-enabled {
	overflow: hidden;
	cursor: zoom-in;
}

/* -------------------------------------------------------------
   Картинки внутри описания товара
   ------------------------------------------------------------- */

/* Обёртка центрирует изображение по горизонтали, как в образце */
.product-description__figure {
	display: block;
	margin: 22px auto;
	max-width: 100%;
	text-align: center;
}

/* Если пропорция известна, figure работает как ratio-box (padding-top задан инлайном) */
.product-description__figure[style*="padding-top"] {
	position: relative;
	height: 0;
	overflow: hidden;
}

.product-description__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.product-description__figure[style*="padding-top"] .product-description__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -------------------------------------------------------------
   Детальная страница новости (шаблон news.detail/stax)
   ------------------------------------------------------------- */

/* В теме у .article__date нижний отступ 22px — на странице новости он лишний,
   дата стоит вплотную к картинке */
.article__date--single {
	margin-bottom: 0;
}

/* Кнопка «Вернуться к новостям» внизу новости (оформление как у карточки товара) */
.article__back-wrapper {
	margin: 35px 0 55px;
	text-align: center;
}

/* Оформление — полностью как у кнопки «Вернуться обратно» на странице товара:
   штатные классы темы (btn btn--secondary btn--small) + те же правила иконки */
.article__back .icon-arrow-left {
	margin-right: 8px;
	vertical-align: middle;
}

/* -------------------------------------------------------------
   Кнопка «Вернуться обратно» (внизу страницы товара)
   ------------------------------------------------------------- */

/* Оформление — штатное для темы (.btn.btn--secondary.btn--small),
   как у кнопок на главной; здесь только центрирование и иконка */
.product-single__back-wrapper {
	margin: 100px 0 55px;
	text-align: center;
}

.product-single__back .icon-arrow-left {
	margin-right: 8px;
	vertical-align: middle;
}

/* Подпись «Ориентировочная цена» перед значением (и в карточке, и на странице) */
.product-single__price-label,
.product-price__label {
	margin-right: 4px;
}

/* Значение цены — обычного начертания, как в образце */
.product-single__price .product-price__price {
	font-weight: 400;
}

/* Кнопка «Где купить»: на всю ширину колонки, но не шире 286px */
.product-single .product-form__cart-submit {
	width: 100%;
	max-width: 286px;
}

.product-single .product-form__item--submit {
	margin-bottom: 15px;
}

/* Таблица характеристик */
.product-single__specs {
	margin-top: 35px;
}

.product-single__specs-title {
	margin-bottom: 10px;
}

.product-single__specs-table {
	width: 100%;
	border-collapse: collapse;
}

.product-single__specs-table th,
.product-single__specs-table td {
	padding: 10px 0;
	border-bottom: 1px solid #e8e9eb;
	text-align: left;
	vertical-align: top;
}

.product-single__specs-table th {
	width: 45%;
	padding-right: 15px;
	font-weight: 400;
	color: #3d4246;
}

/* Раздел без изображения: вместо баннера — нейтральная подложка */
.collection-hero--no-image {
	background-color: #f7f7f7;
}

.collection-hero--no-image .collection-hero__title {
	color: #282326;
}

/* Сообщение о пустой коллекции */
.collection-empty {
	margin: 0 0 55px;
	color: #3d4246;
}

/* Постраничная навигация под сеткой товаров */
.collection-pagination {
	margin-bottom: 55px;
}

/* -------------------------------------------------------------
   Плашка согласия на обработку персональных данных и cookie
   (разметка — footer.php, поведение — initCookieConsent в js/main.js)
   ------------------------------------------------------------- */
.cookie-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: #fff;
	color: #3d4246;
	border-top: 1px solid #282326;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
}

.cookie-consent[hidden] {
	display: none;
}

.cookie-consent__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.cookie-consent__text {
	margin: 0;
	max-width: 900px;
	font-size: .85714em;
	line-height: 1.5;
}

/* Подчёркнутая ссылка на политику конфиденциальности */
.cookie-consent__link {
	color: #282326;
	text-decoration: underline;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus {
	color: #7b0f66;
}

.cookie-consent__button {
	flex: 0 0 auto;
	margin: 0;
}

@media only screen and (max-width: 749px) {
	.cookie-consent__inner {
		display: block;
		text-align: center;
	}

	.cookie-consent__button {
		margin-top: 12px;
	}
}