/* Верхний уровень /catalog/ (список всех категорий) — вёрстки под эту страницу не было
   (см. правку 12 в spreadsheet), полей для сравнения с Figma тоже нет. Стилизовано под
   общую систему смдекора (Rubik, #31302E/#F3CB07, плоские карточки с бордером — как в
   cafe-chairs.css/.product-card, без box-shadow: этот приём нигде на сайте не используется).
   Разметка каталога (bx_catalog_tile/tohuchwu-catalog-section-cont) — родная разметка
   компонента bitrix:catalog.section.list (VIEW_MODE=TILE), не переопределялась.

   !important ниже не для красоты: два родных .default/style.css компонента
   (NewCatalog + вложенный catalog.section.list/.default) сами добавляют себя в <head>
   ПОСЛЕ этого файла (через $this->addExternalCss в ядре) и жёстко задают
   .bx_catalog_tile_ul li{float:left;width:12.5%} и .bx_catalog_tile_img{height:180px} —
   при равной специфичности порядок в каскаде побеждает их, а не нас. */

/* Тот же родной sections.php (см. выше) грузит и /bitrix/css/main/bootstrap.css — единственная
   страница сайта, где он вообще подключается (у остальных /catalog/* своя вёрстка "с нуля" без
   Bootstrap). Его .container{width:1170px} (при ширине экрана ≥1200px) "протекает" на любой
   .container на странице, включая общий футер (footer.php), которому reset.css задаёт
   max-width:1570px — из-за этого на широких экранах .footer-left и .footer-right не помещаются
   в 1170px, .footer-right переносится под .footer-left, а разделитель между ними обрывается на
   высоте footer-left. Возвращаем футеру его обычную (как на остальных страницах) ширину. */
footer.footer .container {
	width: auto;
}

.catalog-sections {
	padding: 50px 0 90px;
}

.catalog-sections .catalog-tochukwu-h.cat-main-page {
	margin: 0 0 16px;
	color: #31302E;
	font-family: Rubik;
	font-size: 44px;
	font-weight: 400;
	letter-spacing: 8.8px;
	text-transform: uppercase;
	text-align: center;
}

.catalog-sections .cat-main-page-desc {
	margin: 0 0 50px;
	color: #75746F;
	font-family: Rubik;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1px;
	text-align: center;
}

.catalog-sections .bx_catalog_tile {
	width: 100%;
}

.catalog-sections .tohuchwu-catalog-section-cont {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalog-sections .tohuchwu-catalog-section-cont li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.catalog-sections .tohuchwu-catalog-section-cont li:before,
.catalog-sections .tohuchwu-catalog-section-cont li:nth-child(8n+1) {
	content: none;
	clear: none !important;
}

.catalog-sections .bx_catalog_tile_img {
	display: block !important;
	position: static !important;
	overflow: visible !important;
	margin: 0 !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 8 / 5;
	border-radius: 10px !important;
	border: 1px solid #D9D9D9;
	background-color: #fff;
	background-position: center;
	background-size: cover !important;
	background-repeat: no-repeat;
	filter: none !important;
	transition: .3s ease-out;
}

.catalog-sections a.bx_catalog_tile_img:hover {
	border-color: #F3CB07;
}

.catalog-sections .bx_catalog_tile_title {
	display: block !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	text-align: center;
}

.catalog-sections .bx_catalog_tile_title a {
	color: #31302E !important;
	font-family: Rubik !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	transition: .3s ease-out;
}

.catalog-sections .bx_catalog_tile_title a:hover {
	color: #F3CB07;
}

.catalog-sections .catalog-seo-text {
	max-width: 1170px;
	margin: 60px auto 0;
	padding: 40px 0 0;
	border-top: 1px solid #D9D9D9;
	color: #75746F;
	font-family: Rubik;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
}

.catalog-sections .catalog-seo-text h2 {
	margin: 0 0 15px;
	color: #31302E;
	font-family: Rubik;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .5px;
}

.catalog-sections .catalog-seo-text p {
	margin: 0 0 15px;
}

.catalog-sections .catalog-seo-text p:last-child {
	margin-bottom: 0;
}

.catalog-sections .catalog-seo-text a {
	color: #31302E;
	text-decoration: underline;
}

.catalog-sections .catalog-seo-text a:hover {
	color: #F3CB07;
}

@media (max-width: 1300px) {
	.catalog-sections .catalog-tochukwu-h.cat-main-page {
		font-size: 40px;
		letter-spacing: 8px;
	}

	.catalog-sections .cat-main-page-desc {
		margin-bottom: 40px;
	}

	.catalog-sections .tohuchwu-catalog-section-cont {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 20px;
	}

	.catalog-sections .bx_catalog_tile_title a {
		font-size: 14px;
		letter-spacing: 1.2px;
	}
}

@media (max-width: 926px) {
	.catalog-sections {
		padding: 24px 0 50px;
	}

	.catalog-sections .catalog-tochukwu-h.cat-main-page {
		margin-bottom: 8px;
		font-size: 16px;
		letter-spacing: 3.2px;
	}

	.catalog-sections .cat-main-page-desc {
		margin-bottom: 24px;
		font-size: 12px;
		letter-spacing: .6px;
	}

	.catalog-sections .tohuchwu-catalog-section-cont {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.catalog-sections .bx_catalog_tile_img {
		border-radius: 5px;
	}

	.catalog-sections .bx_catalog_tile_title {
		margin-top: 8px;
	}

	.catalog-sections .bx_catalog_tile_title a {
		font-size: 11px;
		letter-spacing: .8px;
	}

	.catalog-sections .catalog-seo-text {
		margin-top: 30px;
		padding-top: 24px;
		font-size: 13px;
	}

	.catalog-sections .catalog-seo-text h2 {
		font-size: 18px;
	}
}

/* ============================================================================
   Row 11 (правки по сайту smdekor.xlsx): /catalog/ копирует визуал блока
   "Мебель для кафе и ресторанов" с главной — мозаика категорий .cafe-furniture.
   Разметку даёт override шаблона catalog.section.list (.cafe-furniture__card).
   home.css на /catalog/ не грузится, поэтому классы описаны здесь.

   Настоящая раскладка главной (замерено): 2 колонки, В КАЖДОЙ 1 высокая + 2 широкие
   карточки (высокие "стулья"/"свет" — по диагонали), а перепад высот дают САМИ
   картинки (стулья 700x900 вертикальные, диваны/кресла/подстолья/столешницы ~700x350
   широкие). Поэтому:
   - для 5 категорий, что есть и на главной, шаблон отдаёт РОДНЫЕ картинки главной
     (.is-native) — self-contained серые плашки натурального соотношения, "стулья"
     получаются высокими, как на главной;
   - для остальных разделов — их собственные прозрачные вырезки (.is-cutout) в серой
     плашке с полями, соотношение 7/5 (широкие).
   Раскладка — настоящая masonry через CSS-колонки (columns:2): карточки не режутся
   (break-inside:avoid) и сами перетекают по колонкам с учётом разной высоты, без
   жёсткого "слева большая / справа маленькая".
   ========================================================================= */
.catalog-cafe-furniture {
	margin-top: 10px;
}
/* Раскладка "как на главной" (правки по сайту smdekor.xlsx): вместо равных квадратов —
   мозаика на CSS-grid (те же пропорции колонок 52/48, что и у блока на главной). Позиции
   карточек и класс .is-large (крупная, на 2 строки) задаёт шаблон инлайном. Раньше тут был
   columns:2 (multicolumn) — он не умеет "крупный на 2 строки". */
.catalog-cafe-furniture .cafe-furniture__cards {
	display: grid;
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	align-items: stretch;
	column-gap: 20px;
	/* row-gap 30px, как в блоке .cafe-furniture на главной (было 40px) — "везде как на главной". */
	row-gap: 30px;
}
.catalog-cafe-furniture .cafe-furniture__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: #31302E;
	text-align: center;
	min-width: 0;
	min-height: 0;
}
/* Крупная карточка: растянута на 2 строки грида; картинка заполняет всю доступную высоту
   (object-fit:cover — как хиро-фото на главной, у которых высота = сумме двух маленьких рядом). */
.catalog-cafe-furniture .cafe-furniture__card.is-large .cafe-furniture__card-img {
	aspect-ratio: auto;
	flex: 1 1 0;
	min-height: 0;
}
.catalog-cafe-furniture .cafe-furniture__card.is-large .cafe-furniture__card-img.is-native img {
	height: 100%;
	object-fit: cover;
}
.catalog-cafe-furniture .cafe-furniture__card.is-large .cafe-furniture__card-img.is-cutout {
	aspect-ratio: auto;
	height: 100%;
}
.catalog-cafe-furniture .cafe-furniture__card-img {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 26px;
	/* Рамка вокруг картинок разделов (Алина): 1px #D9D9D9 через OUTLINE, а не border — border
	   увеличил бы бокс на 2px и высоты плиток "поплыли" бы. outline на размер не влияет; offset
	   -1px рисует линию по внутреннему краю и следует скруглению 10px. overflow:hidden обрезает
	   только детей (картинку), собственный outline контейнера не трогает. */
	outline: 1px solid #D9D9D9;
	outline-offset: -1px;
}
/* Safari (в отличие от Chrome/Firefox/WebKit-Playwright) в этой flex-раскладке ИГНОРИРУЕТ
   aspect-ratio:1/1 на .cafe-furniture__card-img и берёт высоту по картинке — ландшафтные фото
   разделов делали плитку прямоугольной, а не квадратной (замечание Алины 2026-08-24). Форсим
   квадрат неубиваемым приёмом padding-bottom:100% (работает во всех браузерах), картинку кладём
   absolute поверх, чтобы она не задавала высоту контейнера. Только НЕ-крупные плитки — у крупных
   (.is-large) своя вертикальная высота (grid-row span + flex-grow), их не трогаем.
   Итог для подготовки фото: маленькие плитки — квадрат (object-fit:contain, не режет), крупные —
   вертикаль ~1:2.2 (object-fit:cover). */
.catalog-cafe-furniture .cafe-furniture__card:not(.is-large) .cafe-furniture__card-img {
	aspect-ratio: auto;
	position: relative;
	height: 0;
	/* "Везде как на главной" (Алина/Борис 2026-08-24): мелкие плитки — ГОРИЗОНТАЛЬНЫЕ ~2:1
	   (как в блоке "Мебель для кафе" на главной), а не квадрат. padding-bottom:50% = ширина:высота
	   2:1. Крупные (.is-large) занимают 2 ряда → становятся вертикальными автоматически, как на
	   главной. padding-bottom-приём вместо aspect-ratio — из-за бага Safari (см. Gotcha 4). */
	padding-bottom: 50%;
}
.catalog-cafe-furniture .cafe-furniture__card:not(.is-large) .cafe-furniture__card-img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Row 8 (правки по сайту smdekor.xlsx): «поплыли высоты» — карточки были разной высоты, т.к.
   .is-native показывались в натуральных пропорциях (height:auto), а фото разделов разнокалиберные
   (у "стульев" вертикальное, у других широкие/квадратные), из-за чего колонки уезжали. Приводим
   ВСЕ превью к единому квадрату 1:1: родные фото — object-fit:cover (заполняют, обрезаясь по краям),
   вырезки — contain в серой плашке. Так все карточки одной высоты, мозаика ровная.
   (Окончательно нормализуется, когда зальём новые единые фото разделов из Google Drive при
   переносе в CMS — тогда и обрезка cover будет по нормальным кадрам.) */
.catalog-cafe-furniture .cafe-furniture__card-img.is-native {
	aspect-ratio: 1 / 1;
	/* Фото разделов — студийная съёмка на белом фоне; белая подложка делает letterbox от
	   object-fit:contain незаметным (края фото сливаются с плашкой). */
	background-color: #fff;
}
.catalog-cafe-furniture .cafe-furniture__card-img.is-native img {
	display: block;
	width: 100%;
	height: 100%;
	/* Row (правки по сайту smdekor.xlsx): было object-fit:cover — при неквадратных фото оно
	   слегка ОБРЕЗАЛО картинку по краям. contain вписывает фото целиком, без обрезки; высота
	   карточек остаётся ровной за счёт квадратного контейнера (aspect-ratio:1/1) выше. */
	object-fit: contain;
	transition: transform .4s ease-out;
}
/* Картинки разделов: прозрачные широкие вырезки — в серую плашку с полями. Тот же квадрат 1:1,
   чтобы высота совпадала с родными фото. */
.catalog-cafe-furniture .cafe-furniture__card-img.is-cutout {
	background-color: #EFEFEF;
	aspect-ratio: 1 / 1;
}
.catalog-cafe-furniture .cafe-furniture__card-img.is-cutout img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 30px;
	box-sizing: border-box;
	transition: transform .4s ease-out;
}
.catalog-cafe-furniture .cafe-furniture__card:hover .cafe-furniture__card-img img {
	transform: scale(1.04);
}
.catalog-cafe-furniture .cafe-furniture__card h3 {
	text-align: center;
	color: #31302E;
	font-family: Rubik;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 6px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.catalog-cafe-furniture .cafe-furniture__card p {
	text-align: center;
	color: #31302E;
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 4.8px;
	font-family: "Circe W08 Extra Light";
	margin: 0 auto;
	max-width: 560px;
}

@media (max-width: 1300px) {
	.catalog-cafe-furniture .cafe-furniture__card {
		margin-bottom: 30px;
	}
	.catalog-cafe-furniture .cafe-furniture__card-img {
		margin-bottom: 20px;
	}
	.catalog-cafe-furniture .cafe-furniture__card p {
		font-size: 15px;
		letter-spacing: 3px;
	}
}

@media (max-width: 1250px) {
	.catalog-cafe-furniture .cafe-furniture__card h3 {
		font-size: 20px;
		letter-spacing: 4px;
	}
}

@media (max-width: 926px) {
	/* Мозаика 2-в-ряд — только на десктопе; на мобильном карточки идут друг под другом
	   (как блок "Мебель для кафе" на главной), крупная превращается в обычный квадрат. */
	.catalog-cafe-furniture .cafe-furniture__cards {
		display: block;
	}
	.catalog-cafe-furniture .cafe-furniture__card.is-large .cafe-furniture__card-img {
		aspect-ratio: 1 / 1;
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		height: auto;
	}
	.catalog-cafe-furniture .cafe-furniture__card.is-large .cafe-furniture__card-img.is-native img {
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}
	.catalog-cafe-furniture .cafe-furniture__card {
		margin-bottom: 20px;
	}
	.catalog-cafe-furniture .cafe-furniture__card-img {
		border-radius: 5px;
		margin-bottom: 9px;
	}
	.catalog-cafe-furniture .cafe-furniture__card-img.is-cutout img {
		padding: 16px;
	}
	.catalog-cafe-furniture .cafe-furniture__card h3 {
		font-size: 12px;
		letter-spacing: 2.4px;
		margin-bottom: 4px;
	}
	.catalog-cafe-furniture .cafe-furniture__card p {
		font-size: 12px;
		letter-spacing: 2px;
	}
}