/* ============================================================
   Каталог Fabech Bazaar: сайдбар фильтров + ровная сетка.
   Своя разметка (.mm-catalog) — тема не вмешивается.
   ============================================================ */

.mm-catalog { max-width: 1440px; margin: 0 auto; padding: 0 24px 64px; }

.mm-catalog__crumbs { padding: 16px 0; font-size: 12px; color: var(--mm-text-muted, #6b6b66); }
.mm-catalog__crumbs a { color: inherit; text-decoration: none; }

.mm-catalog__head { padding: 8px 0 22px; }
.mm-catalog__title {
	margin: 0 0 6px; font-family: var(--mm-font-display, Georgia, serif);
	font-size: 30px; font-weight: 400; color: #1a1a1a;
}
.mm-catalog__desc { font-size: 13px; color: var(--mm-text-muted, #6b6b66); max-width: 720px; }

/* --- Раскладка --- */
.mm-catalog__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }

/* --- Сайдбар --- */
.mm-catalog__sidebar { position: sticky; top: 20px; }
.mm-catalog__filters-close { display: none; }

.mm-filter { margin-bottom: 26px; }
.mm-filter__title {
	margin: 0 0 10px; font-size: 11px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: #1a1a1a;
}
.mm-filter__list { list-style: none; margin: 0; padding: 0; }
.mm-filter__list li { margin-bottom: 7px; }
.mm-filter__list a,
.mm-filter__list label {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	font-size: 13px; color: #3a3a3a; text-decoration: none; cursor: pointer;
}
.mm-filter__list a:hover { color: var(--mm-accent, #4E0000); }
.mm-filter__list a.is-active { color: var(--mm-accent, #4E0000); font-weight: 600; }
.mm-filter__count { font-size: 11px; color: var(--mm-text-muted, #6b6b66); }

/* Свотчи цвета */
.mm-filter__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-filter__swatch {
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--mm-border, #e6dfdb); cursor: pointer; position: relative;
}
.mm-filter__swatch.is-active { box-shadow: 0 0 0 2px #1a1a1a; }

/* Размеры плитками */
.mm-filter__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-filter__size {
	min-width: 40px; padding: 7px 8px; text-align: center;
	border: 1px solid var(--mm-border, #e6dfdb); font-size: 12px;
	color: #1a1a1a; text-decoration: none;
}
.mm-filter__size:hover { border-color: #1a1a1a; }
.mm-filter__size.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* --- Панель над сеткой --- */
.mm-catalog__toolbar {
	display: flex; align-items: center; gap: 16px;
	padding-bottom: 16px; border-bottom: 1px solid var(--mm-border, #e6dfdb); margin-bottom: 22px;
}
.mm-catalog__count { font-size: 13px; color: var(--mm-text-muted, #6b6b66); }
.mm-catalog__sort { margin-left: auto; }
.mm-catalog__sort select {
	height: 38px; border: 1px solid var(--mm-border, #e6dfdb); background: #fff;
	padding: 0 10px; font-size: 13px; border-radius: 0;
}
.mm-catalog__filters-toggle { display: none; }

/* --- Сетка: ровная, фото 3:4 --- */
.mm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }

.mm-card { position: relative; }
.mm-card__link { display: block; text-decoration: none; color: inherit; }

.mm-card__media {
	position: relative; aspect-ratio: 3 / 4; overflow: hidden;
	background: var(--mm-surface, #f7f4f2); margin-bottom: 10px;
}
.mm-card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: opacity .35s ease;
}
/* Второе фото лежит ПОВЕРХ первого и проявляется при наведении.
   Без absolute оно рисовалось отдельным блоком под карточкой —
   отсюда «дубль» и пустое место в сетке. */
.mm-card__media { position: relative; display: block; overflow: hidden; background: #f7f4f2; }
.mm-card__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mm-card__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.mm-card:hover .mm-card__img--hover { opacity: 1; }

.mm-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.mm-card__badge {
	padding: 4px 8px; font-size: 10px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
	background: #1a1a1a; align-self: flex-start;
}
.mm-card__badge--sale { background: var(--mm-accent, #4E0000); }
.mm-card__badge--out  { background: #6b6b66; }

.mm-card__info { text-align: left; }
.mm-card__brand {
	display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--mm-text-muted, #6b6b66); margin-bottom: 3px;
}
.mm-card__title {
	margin: 0 0 5px; font-size: 13px; font-weight: 400; line-height: 1.4; color: #1a1a1a;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.8em;
}
.mm-card__price { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.mm-card__price del { font-weight: 400; opacity: .5; font-size: 12px; margin-right: 6px; }
.mm-card__price ins { text-decoration: none; color: var(--mm-accent, #4E0000); }

/* --- Пусто --- */
.mm-catalog__empty { padding: 60px 0; text-align: center; color: var(--mm-text-muted, #6b6b66); }

/* --- Пагинация --- */
.mm-catalog .woocommerce-pagination { margin-top: 44px; text-align: center; }
.mm-catalog .woocommerce-pagination ul { display: inline-flex; gap: 4px; list-style: none; padding: 0; border: 0 !important; }
.mm-catalog .woocommerce-pagination li { border: 0 !important; }
.mm-catalog .woocommerce-pagination a,
.mm-catalog .woocommerce-pagination span {
	display: flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px;
	border: 1px solid var(--mm-border, #e6dfdb); font-size: 13px; color: #1a1a1a;
	text-decoration: none;
}
.mm-catalog .woocommerce-pagination .current { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* --- Адаптив --- */
@media (max-width: 1200px) { .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 900px) {
	.mm-catalog__body { grid-template-columns: 1fr; gap: 0; }
	.mm-catalog__filters-toggle {
		display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
		border: 1px solid #1a1a1a; background: #fff; font-size: 12px;
		letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
	}
	.mm-catalog__sidebar {
		position: fixed; inset: 0 auto 0 0; z-index: 9999;
		width: 300px; max-width: 88vw; background: #fff;
		padding: 56px 20px 20px; overflow-y: auto;
		transform: translateX(-100%); transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(0,0,0,.15);
	}
	.mm-catalog__sidebar.is-open { transform: none; }
	.mm-catalog__filters-close {
		display: block; position: absolute; top: 14px; right: 14px;
		width: 34px; height: 34px; border: 0; background: none; font-size: 18px; cursor: pointer;
	}
}

@media (max-width: 600px) {
	.mm-catalog { padding: 0 12px 40px; }
	.mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
	.mm-catalog__title { font-size: 22px; }
}

/* --- Фильтр цены: два ровных поля --- */
.mm-filter--price .mm-filter__price-row {
	display: flex; align-items: center; gap: 8px;
}
.mm-filter--price input[type="number"],
.mm-filter--price input[type="text"] {
	width: 100% !important; min-width: 0 !important; max-width: none !important;
	height: 38px !important; padding: 0 10px !important; margin: 0 !important;
	border: 1px solid var(--mm-border, #e6dfdb) !important;
	background: #fff !important; border-radius: 0 !important;
	font-size: 13px !important; text-align: left !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
}
.mm-filter--price input::-webkit-outer-spin-button,
.mm-filter--price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-filter--price .mm-filter__price-sep { color: var(--mm-text-muted, #6b6b66); flex-shrink: 0; }
.mm-filter--price .mm-btn,
.mm-filter--price button {
	width: 100%; height: 38px; margin-top: 10px;
	border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.mm-filter--price button:hover { background: #1a1a1a; color: #fff; }

/* Ползунок цены WooCommerce, если используется */
.mm-catalog .price_slider_wrapper { padding-top: 6px; }
.mm-catalog .price_slider_amount .button { float: none !important; width: 100%; }
.mm-catalog .price_slider_amount .price_label { display: block; margin-bottom: 8px; font-size: 12px; }

/* --- Чипсы активных фильтров --- */
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.mm-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 10px; border: 1px solid var(--mm-border, #e6dfdb);
	background: var(--mm-surface, #f7f4f2);
	font-size: 12px; color: #1a1a1a; text-decoration: none; border-radius: 15px;
}
.mm-chip:hover { border-color: #1a1a1a; }
.mm-chip__x { font-size: 10px; color: var(--mm-text-muted, #6b6b66); }
.mm-chips__reset {
	font-size: 12px; color: var(--mm-accent, #4E0000);
	text-decoration: underline; margin-left: 4px;
}

/* Мобильный грид: minmax(0,1fr) — иначе 1fr не ужимается меньше
   контента и фото распирают колонки за край экрана. */
.mm-catalog, .mm-grid { max-width: 100%; min-width: 0; }
ul.mm-grid, .mm-grid { box-sizing: border-box; }
.mm-grid > li, .mm-card { min-width: 0; max-width: 100%; }
.mm-card img { max-width: 100%; }
@media (max-width: 700px) {
	.mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 10px !important; }
	/* Контенту нужен воздух: 16px по бокам, сетка на всю ширину контейнера */
	.mm-catalog { padding: 0 16px 40px !important; }
	.mm-catalog__crumbs { padding: 14px 0 10px; }
	.mm-catalog__head { padding: 4px 0 16px; }
}

/* Мобильный распиратель на 457px: select сортировки не сжимается
   флексом (min-width:auto — умолчание), тулбар выталкивает страницу.
   Страхуем и пагинацию с крошками. */
/* Тулбар: [Фільтри] [счётчик] [сортировка]. На мобиле — сеткой:
   кнопка и сортировка в строке, счётчик отдельной строкой. */
.mm-catalog__toolbar select,
.mm-catalog__toolbar .orderby { min-width: 0; max-width: 100%; width: auto; }
@media (max-width: 700px) {
	.mm-catalog__toolbar {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px 12px;
		align-items: center;
	}
	.mm-catalog__toolbar select { width: 100%; }
	.mm-catalog__count { grid-column: 1 / -1; order: 3; font-size: 12px; }
}
.woocommerce-pagination, .mm-catalog__crumbs { max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
	.mm-catalog__toolbar { gap: 10px; }
	.mm-catalog__toolbar select { font-size: 13px; }
}

/* Товары без наличия: приглушаем фото, чтобы выделялись из наличных */
.mm-card.outofstock .mm-card__media { opacity: .55; filter: grayscale(.3); }
.mm-card.outofstock .mm-card__img--hover { display: none; }
.mm-card__badge--out { background: #2d2d2d; color: #fff; }