/* Главная */

/* Шапка поверх первого экрана (десктоп) */
@media (min-width: 1024px) {
	/* В самом верху — прозрачная шапка без размытия; цвет текста задаёт тон фона (header.js) */
	.header-over .site-header:not(.is-compact) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.header-over .h-hero { margin-top: calc(var(--header-h) * -1); }
	/* Компактная шапка выше на 14px с margin-bottom: -14px; отрицательные отступы схлопываются — компенсируем */
	.header-over:has(.site-header.is-compact) .h-hero { margin-top: calc((var(--header-h) + 14px) * -1); }
}
.site-header { transition: background var(--t) var(--ease), color var(--t) var(--ease), margin-bottom var(--t) var(--ease); }

/* 1. Hero */
.h-hero { position: relative; height: 800px; display: flex; align-items: flex-end; padding: 20px; overflow: hidden; color: var(--c-white); }
.h-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 47.75%, rgba(0, 0, 0, .2)); pointer-events: none; }
.h-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.h-hero__title { white-space: nowrap; }
.h-hero__title { font-family: var(--f-head); font-weight: 300; font-size: 34px; line-height: 1.2; }
.h-hero__lead { font-size: 14px; line-height: 1.4; font-weight: 300; }

/* 2. Две категории */
.h-cats { display: flex; }
.h-cats__i { position: relative; flex: 1 1 0; height: 800px; display: flex; align-items: flex-end; padding: 0 20px 20px; overflow: hidden; color: var(--c-white); }
.h-cats__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.h-cats__i:hover .h-cats__img { transform: scale(1.03); }
.h-cats__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; font-weight: 300; }
.h-cats__title { font-family: var(--f-head); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.h-cats__link { font-size: 14px; line-height: 1.2; text-decoration: underline; text-underline-position: from-font; white-space: nowrap; }

/* 3. Коллекции */


/* 5. Мозаика */
.h-mosaic { position: relative; height: 900px; background: #2e2c2c; overflow: hidden; }
/* width: max-content обязателен: без него Safari ужимает абсолютный ряд до половины экрана и сдвигает мозаику вправо */
.h-mosaic__row { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); display: flex; gap: 10px; }
.h-mosaic__row--top { top: -340px; }
.h-mosaic__row--mid { top: 190px; }
.h-mosaic__row--bottom { top: 720px; }
.h-mosaic__tile { flex: none; width: 980px; height: 520px; border-radius: 20px; object-fit: cover; }
.h-mosaic__center { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center; border-radius: 20px; overflow: hidden; }
.h-mosaic__center .h-mosaic__tile { display: block; transition: transform 1s var(--ease); }
.h-mosaic__center:hover .h-mosaic__tile { transform: scale(1.02); }
.h-mosaic__text {
	position: absolute; left: 0; right: 0; bottom: 20px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	padding-inline: 300px; text-align: center; color: var(--c-white); font-weight: 300;
}
.h-mosaic__title { font-family: var(--f-head); font-size: 34px; line-height: 1.2; }
.h-mosaic__lead { font-size: 12px; line-height: 1.2; }

/* 6. Сервис */


/* 7. О бренде */
.h-about { position: relative; height: 800px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: var(--c-white); overflow: hidden; }
.h-about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-about__img[data-about-bg] { opacity: 0; transition: opacity .9s var(--ease); }
.h-about__img[data-about-bg].is-active { opacity: 1; }
.h-about > :not(.h-about__img) { position: relative; }
.h-about__label { font-family: var(--f-head); font-weight: 300; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.h-about__logo svg { width: 131px; height: 55px; }
.h-about__bottom { display: flex; flex-direction: column; gap: 40px; }
.h-about__link { align-self: flex-start; font-size: 14px; line-height: 1.2; font-weight: 300; text-decoration: underline; text-underline-position: from-font; }
.h-about__bar { height: 4px; background: rgba(241, 241, 241, .1); position: relative; }
.h-about__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / var(--n)); background: var(--c-white); transition: transform .6s var(--ease); }
.h-about__items { display: flex; font-weight: 300; }
.h-about__item { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; padding-right: 40px; opacity: .7; transition: opacity var(--t) var(--ease); cursor: pointer; }
.h-about__item.is-active { opacity: 1; }
.h-about__title { font-family: var(--f-head); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.h-about__text { font-size: 12px; line-height: 1.2; max-width: 260px; }

/* 8. Статьи */
.h-news { border-radius: 0; background: var(--c-white); }
.h-news .related__all { text-decoration: underline; text-underline-position: from-font; }

/* 9. Отзывы */
.h-rev { background: var(--c-white); padding: 80px 0; display: flex; flex-direction: column; gap: 40px; overflow: hidden; }
.h-rev__head { display: flex; flex-direction: column; gap: 10px; }
.h-rev__label { font-family: var(--f-head); font-weight: 300; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.h-rev__label .eyebrow__dot { display: none; }
.h-rev__title { font-family: var(--f-head); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.03em; color: #3d3d3d; margin-bottom: 30px; }
.h-rev__track { display: flex; gap: 16px; padding-left: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: var(--gutter); }
.h-rev__track::-webkit-scrollbar { display: none; }
.h-rev__card {
	flex: 0 0 360px; height: 240px; scroll-snap-align: start;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 24px; border-radius: 32px; background: #f7f7f7;
}
.h-rev__card:last-child { margin-right: var(--gutter); }
.h-rev__text { font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: -.03em; color: #3d3d3d; }
.h-rev__foot { display: flex; align-items: center; justify-content: space-between; }
.h-rev__date { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 100px; background: var(--c-white); font-size: 12px; line-height: 16px; letter-spacing: -.03em; color: #3d3d3d; }
.h-rev__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.h-rev__next { width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent); color: var(--c-white); display: flex; align-items: center; justify-content: center; transition: background var(--t) var(--ease); }
.h-rev__next:hover { background: #c2621f; }
.h-rev__nav { display: none; }

/* 10. Остались вопросы */
.h-cta { position: relative; height: 800px; display: flex; align-items: center; justify-content: center; color: var(--c-white); overflow: hidden; }
.h-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-cta__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; font-weight: 300; }
.h-cta__title { font-family: var(--f-head); font-weight: 300; font-size: 34px; line-height: 1.2; }
.h-cta__link { font-size: 14px; line-height: 1.2; text-decoration: underline; text-underline-position: from-font; }
.h-cta__link:hover, .h-about__link:hover, .h-cats__i:hover .h-cats__link { opacity: .8; }

/* ---------- Мобилка ---------- */
@media (max-width: 1023px) {
	.h-hero { height: 600px; }
	.h-hero__title { font-size: 26px; white-space: normal; }

	.h-cats { flex-direction: column; }
	.h-cats__i { flex: none; height: 400px; }
	.h-hero__lead br { display: none; }
	.h-news .related__title { font-size: 28px; }
	.h-cats__link { display: none; }


	.h-mosaic { height: 900px; transform-origin: top center; }
	.h-mosaic { height: 450px; }
	.h-mosaic__row { transform: translateX(-50%) scale(.5); transform-origin: top center; }
	.h-mosaic__row--top { top: -170px; }
	.h-mosaic__row--mid { top: 95px; }
	.h-mosaic__row--bottom { top: 360px; }
	.h-mosaic__text { padding-inline: 220px; }
	.h-mosaic__title { font-size: 56px; }
	.h-mosaic__lead { font-size: 22px; }


	.h-about { height: 700px; }
	.h-about__logo { display: none; }
	.h-about__items { position: relative; }
	.h-about__item { display: none; padding-right: 0; }
	.h-about__item.is-active { display: flex; }
	.h-about__title { text-transform: uppercase; }

	.h-news { padding: 60px var(--gutter); }
	.h-news .related__grid > :nth-child(3) { display: none; }

	.h-rev { padding: 60px 0; gap: 24px; }
	.h-rev__label { font-family: var(--f-sans); font-size: 14px; font-weight: 500; }
	.h-rev__label .eyebrow__dot { display: block; }
	.h-rev__title { font-size: 34px; margin-bottom: 20px; }
	.h-rev__track { padding-inline: var(--gutter); }
	.h-rev__card { flex-basis: 100%; height: 240px; }
	.h-rev__card:last-child { margin-right: 0; }
	.h-rev__nav { display: flex; }

	.h-cta { height: 520px; }
}