/* ==========================================================================
   GardenArt — собственные стили поверх шаблона Аспро: Next
   Подключается последним из header.php, поэтому перебивает стили решения
   без !important. Лежит только в копии шаблона: живой сайт не затрагивает.
   ========================================================================== */

/* --- Левое меню каталога --------------------------------------------------
   Числа — количество товаров в разделе вместе с подразделами.
   Шрифт плотнее, чем в поставке Аспро: так список читается с одного взгляда.
   -------------------------------------------------------------------------- */

.catalog_block .menu > li > a .name {
	font-weight: 600;
}

.catalog_block .dropdown a.section span,
.catalog_block .dropdown a.section1 span {
	font-weight: 500;
}

.catalog_block .ga-count {
	float: right;
	margin-right: 18px;
	font-size: 12px;
	font-weight: 600;
	color: #A29A90;
	line-height: inherit;
}

.catalog_block li:hover > a > .ga-count,
.catalog_block li.current > a > .ga-count {
	color: #D17834;
}

/* у подразделов стрелки-раскрывашки нет — число можно прижать к краю */
.catalog_block .dropdown .ga-count {
	margin-right: 0;
}

/* --- Меню каталога едет вместе со страницей --------------------------------
   На главной левая колонка короткая, а страница длинная: пролистав до товаров,
   человек терял каталог из виду и возвращался наверх. Прикрепляем меню к
   экрану — оно едет рядом и всегда под рукой.

   Только с ширины 992 px: на телефоне левой колонки нет, там своя шапка.

   Высоту не ограничиваем и прокрутку внутри блока не включаем: у блока
   появлялась своя полоса прокрутки со стрелками, и они мигали при наведении.
   Разделов четыре, в экран помещаются с запасом.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.front .left_block .menu_top_block.catalog_block {
		position: sticky;
		top: 20px;
	}
}

/* --- Оранжевая полоса: меню и поиск в одном ряду --------------------------
   Поиск переехал сюда из белой строки — как в макете и на kwa.ru.
   Меню Аспро умеет само убирать лишние пункты в «ещё», поэтому места ему
   отдаём столько, сколько останется после поиска.
   -------------------------------------------------------------------------- */

.ga-menu-flex {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ga-menu-flex .menu-only {
	flex: 1 1 auto;
	min-width: 0;
}

.ga-search-inbar {
	flex: 0 0 340px;
	max-width: 340px;
}

.ga-search-inbar .search-wrapper form.search {
	display: flex;
	align-items: center;
	height: 38px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.ga-search-inbar .search-input-div {
	flex: 1 1 auto;
	min-width: 0;
}

.ga-search-inbar input.search-input {
	width: 100%;
	height: 38px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	outline: none;
}

.ga-search-inbar .search-button-div {
	flex: 0 0 auto;
}

.ga-search-inbar .btn-search {
	width: 44px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
}

/* на узких экранах поиску места нет — там работает мобильная шапка */
@media (max-width: 1199px) {
	.ga-search-inbar { flex-basis: 250px; max-width: 250px; }
}
@media (max-width: 991px) {
	.ga-search-inbar { display: none; }
}

/* --- Поиск в полосе: правим кнопку ----------------------------------------
   У Аспро внутри формы поиска два элемента: лупа и крестик «закрыть».
   Крестик нужен только выпадающему поиску — здесь он лишний, прячем.
   Лупу рисуем свою, чтобы не зависеть от спрайта иконок решения.
   -------------------------------------------------------------------------- */

.ga-search-inbar .close-block,
.ga-search-inbar .btn-search i.svg {
	display: none;
}

.ga-search-inbar .btn-search {
	background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A322B' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>") no-repeat center;
	background-size: 18px 18px;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s;
}

.ga-search-inbar .btn-search:hover {
	opacity: 1;
}

/* --- Шоу-рум в шапке ------------------------------------------------------
   Белая строка после переезда поиска опустела. Кладём туда то, что ищут глазами перед покупкой мебели: где посмотреть вживую и когда.
   -------------------------------------------------------------------------- */

.ga-showroom {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-left: 30px;
	padding-top: 4px;
	max-width: 370px;
}

.ga-showroom::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	margin-top: 2px;
	background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D17834' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6v10H3z'/><path d='M9 20v-6h6v6'/></svg>") no-repeat center;
	background-size: 20px 20px;
}

.ga-showroom__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 2px;
}

.ga-showroom__addr,
.ga-showroom__time {
	font-size: 12px;
	line-height: 1.4;
	color: #7A756D;
}

.ga-showroom__addr { margin-bottom: 1px; }

/* включаемые области Аспро выводят абзацы — убираем их отступы */
.ga-showroom p {
	margin: 0;
}

@media (max-width: 1199px) {
	.ga-showroom { display: none; }
}

/* --- Карта с адресом на главной -------------------------------------------
   В поставке карта 559 px высотой и вместе с колонкой адреса занимает почти
   весь экран. Магазин один, разглядывать карту на главной незачем: человеку
   достаточно понять «под Минском» и увидеть телефон. Делаем полосу пониже.

   Бьём ровно в тот класс, которым тема задаёт высоту, и только внутри блока
   на главной. Ловить карту по общему признаку «в классе есть map» нельзя:
   так под правило попадают кнопки масштаба, переключатель слоёв и копирайт
   самой Яндекс-карты, и блок разваливается.
   -------------------------------------------------------------------------- */

/* !important здесь по делу: высоту карте проставляет скрипт прямо в элемент,
   а такая запись сильнее обычного правила. Селекторы узкие — только карта
   внутри блока на главной, так что побочных эффектов нет. */

.front_map_wrapper .module-contacts-map-layout .map {
	height: 360px !important;
}

.front_map_wrapper .contacts_map {
	min-height: 360px !important;
}

/* --- Баннер на главной: вписываем целиком ----------------------------------
   Тема вешает на верхний баннер эффект параллакса: обёртка wrap_plaxy
   получает жёсткую высоту, равную высоте исходного файла, а картинка внутри
   масштабируется и её края уходят за пределы блока — надпись на баннере
   обрезается по бокам. Для магазина это вредный эффект: баннер несёт текст
   и кнопку, их нельзя терять. Отключаем — картинка вписывается по ширине,
   высота считается сама из пропорций.

   !important нужен потому, что размеры и сдвиг проставляет скрипт прямо
   в элемент, а такая запись сильнее обычного правила.
   -------------------------------------------------------------------------- */

/* ПРАВКА ОТМЕНЕНА. Первая попытка сбрасывала у картинки top/left/transform —
   а именно ими скрипт параллакса её и позиционирует. Фото уезжало за пределы
   блока, оставалась пустая подложка. Обрезку баннера будем убирать не здесь,
   а в настройках темы, где эффект параллакса включается. */

/* --- Выпадающее меню каталога плиткой --------------------------------------
   Панель во всю ширину страницы, внутри — плитки подразделов по шесть в ряд:
   картинка сверху, название снизу. Человек попадает на нужную полку одним
   движением, без всплывающего второго уровня.
   -------------------------------------------------------------------------- */

/* Панель фиксированной ширины, а не «от края до края»: растяжка через
   left/right давала ширину больше экрана и горизонтальную прокрутку.
   Штатный список остаётся в разметке, но не показывается — так правка
   шаблона обратима одной строкой. */
.dropdown-menu:has(> .ga-mega) {
	left: 0;
	right: auto;
	width: min(1120px, calc(100vw - 60px));
	min-width: 0;
	max-width: none;
	max-height: none;
	padding: 18px 20px 20px;
	overflow: hidden;
	box-sizing: border-box;
}

.dropdown-menu:has(> .ga-mega) > .customScrollbar,
.dropdown-menu:has(> .ga-mega) > .menu-navigation {
	display: none;
}

.ga-mega {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: none;
	box-sizing: border-box;
}

.ga-mega__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ga-mega__item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 12px 8px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	text-align: center;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ga-mega__item > a:hover {
	background: #fff;
	border-color: #E8E4DC;
	box-shadow: 0 6px 18px rgba(58, 50, 43, .12);
}

/* фиксированная высота картинки — иначе плитки в ряду разъезжаются
   по вертикали из-за разных пропорций фотографий */
.ga-mega__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	width: 100%;
}

.ga-mega__img img {
	max-height: 72px;
	max-width: 100%;
	width: auto;
	mix-blend-mode: multiply;
}

/* длинные названия обрезаем двумя строками: одно «Стулья, Столы, Кресла
   Садовые и Уличные» иначе задирает высоту всему ряду */
.ga-mega__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: #3A322B;
}

.ga-mega__item > a:hover .ga-mega__name {
	color: #B4621F;
}

/* --- Кнопка покупки в списке товаров --------------------------------------
   В поставке блок с кнопкой лежит поверх карточки и всплывает при наведении.
   На телефоне наведения нет вовсе, а на компьютере человек должен догадаться
   поводить мышью, чтобы увидеть «Купить». Ставим кнопку в поток — под цену,
   всегда на виду. Карточки станут выше, зато покупка в один клик из списка.
   -------------------------------------------------------------------------- */

.catalog_item_wrapp .footer_button {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	margin-top: 12px;
}

.catalog_item_wrapp .counter_wrapp,
.catalog_item_wrapp .button_block {
	visibility: visible;
}

/* --- Ровный ряд карточек в каталоге ---------------------------------------
   Названия у товаров разной длины, артикул заполнен не у всех — из-за этого
   цена и кнопка в соседних карточках оказывались на разной высоте, и ряд
   выглядел рваным. Растягиваем карточку на всю высоту ячейки и прижимаем
   цену с кнопкой к низу: теперь глаз идёт по одной линии и сравнивает цены,
   а не ищет их взглядом.
   -------------------------------------------------------------------------- */

.catalog_item_wrapp {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.catalog_item_wrapp .catalog_item,
.catalog_item_wrapp .catalog_item > div {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.catalog_item_wrapp .item_info {
	flex: 1 1 auto;
}

.catalog_item_wrapp .item_info--bottom_block {
	margin-top: auto;
}

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

.ga-detail-info p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #4E4740;
}

.ga-detail-info p:last-child {
	margin-bottom: 0;
}

.ga-detail-info b {
	font-weight: 600;
	color: var(--ga-text, #3A322B);
}

.ga-detail-info a {
	color: #B4621F;
	border-bottom: 1px solid rgba(180, 98, 31, .35);
}

.ga-detail-info a:hover {
	border-bottom-color: #B4621F;
}

/* --- Плитки категорий на главной -----------------------------------------
   В поставке Аспро это плоская сетка: прозрачный фон и тонкие серые линии
   между ячейками — плитки сливаются с фоном страницы. Делаем из них
   карточки: белый фон, скругление, лёгкая тень, подъём при наведении.
   На широком экране жёстко ставим четыре в ряд: категорий восемь, значит
   получаются два ровных ряда. По умолчанию тема ставит пять — оставался
   висячий хвост из трёх.
   -------------------------------------------------------------------------- */

.sections_wrapper .list.items .row > [class*="col-"] {
	padding: 9px;
	display: flex;
}

@media (min-width: 1200px) {
	.sections_wrapper .list.items .row > [class*="col-"] {
		width: 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Плитка залита серым, страница белая — за счёт этого сетка читается как
   набор отдельных карточек даже без рамок. При наведении карточка
   «загорается»: фон становится белым, появляется тень, и она чуть
   всплывает над серыми соседями. */

.sections_wrapper .list.items .item {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	background: #F2F1EE;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 18px 16px 20px;
	box-shadow: none;
	transition: background .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.sections_wrapper .list.items .item:hover {
	background: #fff;
	border-color: #E8E4DC;
	box-shadow: 0 10px 26px rgba(58, 50, 43, .14);
	transform: translateY(-4px);
}

/* картинка чуть подрастает вместе с карточкой — движение подсказывает,
   что плитка кликабельна */
.sections_wrapper .list.items .item .img {
	overflow: hidden;
	border-radius: 6px;
}

/* Фотографии разделов — с залитым белым фоном, а не прозрачные, поэтому
   на серой плитке они выглядели белыми прямоугольниками. Режим multiply
   гасит белое в цвет подложки: на серой карточке картинка садится на фон,
   на белой (при наведении) остаётся как есть. */
.sections_wrapper .list.items .item .img img {
	transition: transform .3s ease;
	mix-blend-mode: multiply;
	background: transparent;
}

.sections_wrapper .list.items .item:hover .img img {
	transform: scale(1.05);
}

/* название прижимаем к низу карточки: у категорий разной длины подписи
   иначе прыгают по вертикали */
.sections_wrapper .list.items .item .name {
	margin-top: auto;
	padding-top: 12px;
}

.sections_wrapper .list.items .item .name a {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.sections_wrapper .list.items .item:hover .name a {
	color: #B4621F;
}

.ga-detail-note {
	padding-top: 8px;
	border-top: 1px solid #E6E2D9;
	font-size: 12px;
	color: #8A837A;
}