/* ================================================================
   Каталог на телефоне: кнопка «Фильтр», быстрые чипсы и сетка товаров по 2 в ряд.
   На десктопе ничего не меняется — все правила внутри max-width:767px.
   Кнопку фильтра вставляет js/mobile_filter.js (подключён из catalog.php).
   ================================================================ */

/* JS строит кнопку и чипсы на любой ширине, поэтому по умолчанию прячем и то и другое.
   Показываются они только внутри max-width:767px ниже. Без этой строки для .mf-chips
   ряд чипсов вываливался на десктопе сплошным текстом над фильтром. */
.mf-toggle,.mf-chips{display:none}

@media (max-width:767px){

	/* порядок на телефоне: кнопка «Фильтр» -> панель фильтра -> заголовок и товары.
	   Всё остальное (статьи каталога, распорки clear:both) уезжает в конец —
	   иначе при flex они с order:0 всплывают наверх. */
	#catalog-container > .row{
		display:-ms-flexbox;display:flex;
		-ms-flex-direction:column;flex-direction:column;
	}
	#catalog-container > .row > *{-ms-flex-order:6;order:6}
	#catalog-container > .row > .mf-toggle{-ms-flex-order:1;order:1}
	#catalog-container > .row > .mf-chips{-ms-flex-order:2;order:2}
	#catalog-container > .row > .sidebar_small{-ms-flex-order:3;order:3}
	#catalog-container > .row > #catalog-container-output{-ms-flex-order:4;order:4}

	.mf-toggle{
		display:block;width:auto;
		margin:0 15px 18px;padding:14px 18px;
		background:#fff;border:1px solid #d8d8d8;border-radius:10px;
		font-size:15px;font-weight:600;color:#3a3a3a;text-align:left;
		letter-spacing:.02em;cursor:pointer;
		position:relative;
	}
	.mf-toggle:after{
		content:'';position:absolute;right:20px;top:50%;
		width:9px;height:9px;margin-top:-6px;
		border-right:2px solid #7d94a3;border-bottom:2px solid #7d94a3;
		-webkit-transform:rotate(45deg);transform:rotate(45deg);
	}
	.mf-toggle.mf-open:after{
		margin-top:-2px;
		-webkit-transform:rotate(225deg);transform:rotate(225deg);
	}
	.mf-toggle .mf-count{
		display:inline-block;margin-left:8px;padding:1px 8px;
		background:#7d94a3;color:#fff;border-radius:999px;
		font-size:12px;font-weight:600;
	}

	/* свёрнутое состояние: сам блок фильтра скрыт */
	.sidebar_small.mf-collapsed{display:none}

	/* развёрнутый — с рамкой, чтобы было видно границы панели */
	.sidebar_small.mf-expanded{
		border:1px solid #e6e6e6;border-radius:10px;
		padding:6px 14px 14px;margin:0 0 22px;
	}

	/* ---------- быстрые чипсы над товарами (js/mobile_filter.js) ---------- */
	.mf-chips{
		display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;
		gap:7px;margin:0 15px 18px;
	}
	.mf-chip{
		display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:6px;
		border:1px solid #dcdcdc;background:#fff;color:#3a3a3a;
		padding:7px 13px;border-radius:999px;font-size:13px;line-height:1.2;
		text-decoration:none;white-space:nowrap;
	}
	.mf-chip:hover,.mf-chip:focus{color:#3a3a3a;text-decoration:none}
	.mf-chip-cnt{color:#aaa;font-size:12px}
	.mf-chip-on{background:#4d6675;border-color:#4d6675;color:#fff}
	.mf-chip-on:hover,.mf-chip-on:focus{color:#fff}
	.mf-chip-on .mf-chip-cnt{color:rgba(255,255,255,.7)}
	/* у активного чипса — крестик: повторный клик снимает фильтр */
	.mf-chip-on:after{content:'\00d7';font-size:15px;line-height:1;opacity:.8}

	/* ---------- карточки товаров по 2 в ряд ---------- */
	.color_scheme .product_listing__main{margin-left:-6px;margin-right:-6px}
	.color_scheme .product_listing__main > .col-sm-4{
		width:50%;float:left;padding-left:6px;padding-right:6px;
	}
	/* левая карточка каждого ряда сбрасывает обтекание — ряды не слипаются,
	   если у соседей названия разной высоты */
	.color_scheme .product_listing__main > .col-sm-4:nth-child(odd){clear:both}

	/* внутри карточки картинка и текст на всю ширину (по умолчанию было 80% по центру) */
	.color_scheme .product_listing__main .product_img,
	.color_scheme .product_listing__main .product_info{
		width:100%;margin:0;
	}
	.color_scheme .product_listing__main .product_name{font-size:13px;line-height:1.35}
	.color_scheme .product_listing__main .product_info p{font-size:12px}
	.color_scheme .product_listing__main .product_price .money{font-size:15px}
	/* Бейджи «новинка»/«наличие»: nowrap обязателен — в кружок 40px слово «новинка»
	   переносится, и хвост «а» падает ниже кружка (line-height двигает вторую строку). */
	.color_scheme .product_listing__main .product_badge{
		width:40px;height:40px;line-height:36px;font-size:7px;
		white-space:nowrap;
	}

	/* ---------- низ карточки: только иконки ----------
	   Подпись «В корзину» на половинной карточке не помещается и залезает под лупу
	   (.catalog-item-zoom на мобиле position:absolute; right:24px — style02.css).
	   Прячем текст через font-size:0, иконке размер возвращаем. */
	.color_scheme .product_listing__main .product_links .add_to_cart_form a{
		font-size:0;
	}
	.color_scheme .product_listing__main .product_links a i,
	.color_scheme .product_listing__main .product_links .catalog-item-zoom i{
		font-size:17px;
	}
	.color_scheme .product_listing__main .product_links{
		padding-top:4px;
	}
}