/**
 * Eloria UI fixes
 * Подключается после css/style.css темы, поэтому перебивает её правила
 * без !important. Бургер-меню темы включается на 1025px — всё, что касается
 * десктопной шапки, живёт в блоках от 1026px.
 */

/* --- Шапка: мельче текст, меню по центру полосы --- */
@media screen and (min-width: 1026px) {
	.header .wr {
		height: 56px;
		position: relative;
	}

	.logo img {
		width: 78px;
	}

	.header .header_right {
		flex: 1;
		justify-content: flex-end;
	}

	.header .header_right .menu li a {
		font-size: 14px;
		white-space: nowrap;
	}

	.header .header_right .menu li + li {
		margin-left: 22px;
	}

	.header .header_phone,
	.header .header_right .header_phone {
		font-size: 15px;
		margin-right: 20px;
		white-space: nowrap;
	}

	/* Мессенджеры компактнее и плотнее друг к другу и к телефону. */
	.header .socials_wr {
		margin-right: 10px;
		gap: 2px;
	}

	.header .header_actions .socials_wr a {
		width: 26px;
		height: 26px;
		margin-left: 0;
	}

	.header .header_actions .socials_wr a svg {
		width: 16px;
		height: 16px;
	}

	.header .header_actions {
		margin-left: 20px;
	}

	.header .header_actions > a:not(.header_phone) {
		width: 34px;
		height: 34px;
	}

	.header .header_actions > a:not(.header_phone) svg {
		width: 21px;
		height: 21px;
	}
}

/* Меню по центру полосы. Ниже 1250px по центру оно упирается в телефон,
   поэтому там остаётся обычная раскладка темы — меню прижато к действиям. */
@media screen and (min-width: 1251px) {
	.header .header_right .mobile_menu {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

/* Узкий десктоп: до бургер-меню темы (1025px) логотип и пункты почти смыкаются. */
@media screen and (min-width: 1026px) and (max-width: 1599px) {
	.header .header_right .menu li a {
		font-size: 13px;
	}

	.header .header_right .menu li + li {
		margin-left: 16px;
	}

	.header .header_phone,
	.header .header_right .header_phone {
		font-size: 14px;
		margin-right: 12px;
	}

	.header .socials_wr {
		display: none;
	}

	.header .header_actions {
		margin-left: 12px;
	}
}

/* Мобильная шапка: мессенджеры убраны, ссылки на них остаются в подвале. */
@media screen and (max-width: 1025px) {
	.header .socials_wr {
		display: none;
	}
}

/* --- Баннер главной: ниже на высоту заголовка, чтобы он попадал на первый экран --- */
@media screen and (min-width: 1026px) {
	/* Высота ограничена шириной кадра (40vw = 1/2.5): иначе `object-fit:cover`
	   режет баннер по бокам и съедает надпись, вшитую в картинку. */
	.main_slider .item .box {
		height: min(calc(100vh - 320px), calc(40vw - 44px));
		min-height: 320px;
		max-height: 700px;
	}

	/* Отступы вокруг заголовка под баннером одинаковые сверху и снизу. */
	.main_slider + .section_pad,
	.main_slider + .section_pad + .section_pad {
		margin-top: 64px;
	}
}

/* Стрелки слайдера убраны, вместо них точки поверх баннера. */
.main_slider .slider_arrow {
	display: none;
}

@media screen and (min-width: 1026px) {
	.main_slider .slick-dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 26px;
		z-index: 20;
		margin: 0;
	}

	.main_slider .slick-dots li button {
		background: rgba(255, 255, 255, 0.7);
	}

	.main_slider .slick-dots li.slick-active button {
		background: #bb5ca1;
	}
}

/* --- Картинки внутри текстовых страниц: баннер не занимает весь экран --- */
.article p img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 560px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.article p img {
		max-height: 320px;
	}
}

/* --- Галерея вариативного товара: все фото выбранной формы сразу, без листалки --- */
.thumbnails_slider.eloria_static {
	display: flex;
}

.thumbnails_slider.eloria_static > .img_wr.eloria_hidden {
	display: none;
}

@media screen and (min-width: 1026px) {
	.thumbnails_slider.eloria_static {
		flex-direction: column;
		gap: 12px;
		align-self: stretch;
		overflow: hidden;
	}

	/* Миниатюры делят высоту главного фото и не вылезают за него. */
	.thumbnails_slider.eloria_static > .img_wr {
		flex: 0 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.thumbnails_slider.eloria_static > .img_wr > div,
	.thumbnails_slider.eloria_static > .img_wr a,
	.thumbnails_slider.eloria_static > .img_wr picture {
		display: block;
		height: 100%;
	}

	.thumbnails_slider.eloria_static > .img_wr img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

@media screen and (max-width: 1025px) {
	.thumbnails_slider.eloria_static {
		flex-direction: row;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.thumbnails_slider.eloria_static > .img_wr {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}
}

/* --- Карточка каталога: «Подробнее» + «В корзину» со счётчиком --- */
.product_listing .product .box {
	flex-direction: column;
	gap: 12px;
}

.product_listing .product .box > a {
	z-index: 1;
}

.product_listing .product .box .btn_wr,
.eloria_cart_add,
.eloria_cart_qty {
	position: relative;
	z-index: 2;
}

/* Список форм должен раскрываться на всю карточку, поэтому точкой отсчёта
   для него остаётся .box, а сама обёртка кнопки не позиционируется. */
.eloria_cart {
	position: static;
	display: flex;
	justify-content: center;
	min-height: 44px;
}

.eloria_cart_add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 180px;
	height: 44px;
	padding: 0 22px;
	border: none;
	background: #bb5ca1;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease-in-out;
}

.eloria_cart_add:hover {
	background: #a34c8b;
}

.eloria_cart_add svg {
	display: none;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.eloria_cart_qty {
	display: none;
	align-items: center;
	justify-content: space-between;
	min-width: 180px;
	height: 44px;
	padding: 0 6px;
	background: #fff;
	border: 1px solid #bb5ca1;
}

/* Товар без форм: кнопка сама превращается в счётчик. */
.eloria_cart.is_incart > .eloria_cart_qty {
	display: flex;
}

.eloria_cart.is_incart > .eloria_cart_add {
	display: none;
}

/* Строка списка форм: выбранная форма становится счётчиком на своём месте,
   остальные формы остаются доступными — можно набрать несколько форм сразу. */
.eloria_cart_row {
	position: relative;
	flex: 0 0 auto;
}

.eloria_cart_row .eloria_cart_qty {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0 2px 0 8px;
	gap: 4px;
}

.eloria_cart_row .eloria_cart_step {
	width: 28px;
	height: 30px;
	font-size: 19px;
}

.eloria_cart_row .eloria_cart_num {
	min-width: 20px;
	font-size: 14px;
}

.eloria_cart_qty_label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #626262;
	text-align: left;
}

.eloria_cart_qty_ctrl {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.eloria_cart_row.is_incart .eloria_cart_form {
	display: none;
}

.eloria_cart_row.is_incart .eloria_cart_qty {
	display: flex;
}

/* Сколько единиц этого товара уже в корзине. */
.eloria_cart_add {
	position: relative;
}

.eloria_cart_badge {
	display: none;
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 11px;
	background: #091A3D;
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	text-align: center;
}

.eloria_cart.has_items .eloria_cart_badge {
	display: block;
}

.eloria_cart_done {
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 8px;
	border: none;
	background: transparent;
	color: #bb5ca1;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.eloria_cart_step {
	width: 38px;
	height: 38px;
	border: none;
	background: transparent;
	color: #bb5ca1;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.eloria_cart_step:hover {
	color: #a34c8b;
}

.eloria_cart > .eloria_cart_qty .eloria_cart_qty_ctrl {
	flex: 1 1 auto;
	justify-content: space-between;
}

.eloria_cart_num {
	font-size: 15px;
	font-weight: 600;
	color: #313131;
	min-width: 28px;
	text-align: center;
}

/* Во время запроса блок только перестаёт принимать клики: гасить его целиком
   нельзя — сквозь полупрозрачную панель проступает кнопка «Подробнее». */
/* Во время запроса блок НЕ отключаем: с `pointer-events:none` следующий клик
   проваливался на ссылку карточки и уводил покупателя со страницы. */
.eloria_cart.is_busy .eloria_cart_num {
	opacity: 0.55;
}

/* Выбор формы выпуска ложится поверх карточки и не меняет её высоту. */
.eloria_cart_forms {
	display: none;
	position: absolute;
	inset: 10px;
	z-index: 4;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.96);
}

.eloria_cart.is_forms .eloria_cart_forms {
	display: flex;
}

/* Пока открыт список форм, «Подробнее» не нужна: сквозь панель она проступала
   при каждом обновлении счётчика. */
.product_listing .product .box.is_open .btn_wr {
	visibility: hidden;
}

.eloria_cart_form {
	width: 100%;
	height: 38px;
	padding: 9px 10px;
	border: 1px solid #cecece;
	background: #fff;
	color: #313131;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	line-height: 1.25;
	cursor: pointer;
	transition: All 0.2s ease-in-out;
}

.eloria_cart_form:hover {
	border-color: #bb5ca1;
	color: #bb5ca1;
}

/* Пустой оверлей не должен перехватывать клики по невидимой карточке. */
@media screen and (min-width: 1026px) {
	.product_listing .product .box {
		pointer-events: none;
	}

	/* Показываем оверлей по наведению на всю карточку: сам .box кликов не
	   получает, пока курсор не над карточкой, поэтому его :hover ненадёжен. */
	.product_listing .product:hover .box,
	.product_listing .product .box.is_open {
		opacity: 1;
		pointer-events: auto;
	}
}

/* На тач-экранах наведения нет: кнопка живёт в углу картинки и ничего не раздувает. */
@media screen and (max-width: 1025px) {
	.product_listing .product .box {
		opacity: 1;
		background: transparent;
		pointer-events: none;
	}

	.product_listing .product .box .btn_wr {
		display: none;
	}

	.product_listing .product .box > a {
		pointer-events: auto;
	}

	.product_listing .product .eloria_cart {
		min-height: 0;
	}

	.eloria_cart > .eloria_cart_add,
	.eloria_cart > .eloria_cart_qty {
		position: absolute;
		right: 8px;
		top: 8px;
		pointer-events: auto;
	}

	.eloria_cart_add {
		min-width: 0;
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(49, 49, 49, 0.18);
	}

	.eloria_cart_add span {
		display: none;
	}

	.eloria_cart_add svg {
		display: block;
	}

	.eloria_cart > .eloria_cart_qty {
		min-width: 0;
		width: 112px;
		height: 40px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(49, 49, 49, 0.18);
	}

	.eloria_cart_step {
		width: 32px;
		height: 32px;
		font-size: 20px;
	}

	.eloria_cart_row .eloria_cart_qty {
		height: 40px;
	}

	.eloria_cart_qty_label {
		font-size: 11px;
	}

	.eloria_cart_form {
		height: 40px;
	}

	.eloria_cart_forms {
		pointer-events: auto;
	}
}

/* --- Поиск: поле унаследовало размер заголовка .title_1 (36-44px) и занимало
       пол-экрана. Здесь у него свой размер, не задевая заголовки страниц. --- */
.search_box {
	padding: 26px 0;
}

.search_box .search_form .input_wr input.search_field {
	font-size: 22px;
	line-height: 1.3;
	padding: 10px 0;
}

/* На ≤1024px тема жёстко держит 16px для всех полей (`!important`, чтобы iOS
   не зумил при фокусе) — размер там не трогаем, только высоту блока. */
@media screen and (max-width: 768px) {
	.search_box {
		padding: 18px 0;
	}

	.search_box .search_form .input_wr input.search_field {
		padding: 8px 0;
	}
}

/* Мобильная обложка баннера квадратная — резервируем под неё место, чтобы
   страница не прыгала при загрузке (десктоп рисует картинку фоном и не задет). */
@media screen and (max-width: 1025px) {
	.main_slider .item .img_wr {
		aspect-ratio: 1 / 1;
	}
}

/* Узкое окно на десктопе (широкая картинка, но ширина < 1025px): тема делает
   .box абсолютным, и слайду неоткуда взять высоту — он схлопывается в пиксель.
   Мобильной вёрстке правило не мешает: там квадратная обложка выше 40vw. */
@media screen and (max-width: 1025px) {
	.main_slider .item {
		min-height: 40vw;
	}
}

/* --- Мобильная шапка: логотип слева, бургер крайним справа за корзиной --- */
@media screen and (max-width: 1025px) {
	.header .logo {
		order: 1;
		margin-right: auto;
	}

	.header .header_right {
		order: 2;
	}

	.header .mmenu {
		order: 3;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0 0 0 10px;
		background: #bb5ca1;
		border-radius: 50%;
	}

	.header .mmenu span,
	.header .mmenu span:before,
	.header .mmenu span:after {
		background: #fff;
	}

	.header .mmenu span {
		width: 18px;
		left: 50%;
		margin-left: -9px;
	}

	.header .mmenu span:before {
		top: -6px;
	}

	.header .mmenu span:after {
		top: 6px;
	}
}

/* Кнопка «Смотреть все» под подборкой товаров на главной: ведёт в каталог. */
.top_products_more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

@media (max-width: 640px) {
	.top_products_more {
		margin-top: 24px;
	}

	.top_products_more .btn {
		width: 100%;
		text-align: center;
		padding: 0 20px;
	}
}

/* Плашка «Нет в наличии» в карточке каталога, поверх фото. */
.product_listing .product .img_wr {
	position: relative;
}

.eloria_oos_badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: #7a7a7a;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	pointer-events: none;
}

.product_listing .product.outofstock .img_wr img {
	opacity: 0.55;
}