/* ═══════════════════════════════════════════
   ROYSEN · Головна сторінка (Figma: Main)
   ═══════════════════════════════════════════ */

/* ─── Хіро ─── */
.hero{
	position:relative;
	height:756px;
	background:var(--ink);
	color:var(--cream);
	overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:bottom; }
.hero__bg::after{
	content:""; position:absolute; inset:0;
	background:rgba(17,17,17,.2);
}
/* внутрішній контейнер — якір для абсолютів (контент по загальній сітці) */
.hero__inner{ position:relative; height:100%; }
.hero__card{
	position:absolute; top:70px; right:var(--pad); z-index:2;
	width:231px; height:308px;
	border:2px solid var(--cream);
	display:flex; flex-direction:column; justify-content:flex-end;
	overflow:hidden; text-decoration:none;
}
.hero__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:bottom; }
.hero__card-caption{
	position:relative;
	background:var(--bg); color:var(--ink);
	font-size:14px; text-transform:uppercase; text-align:center;
	padding:16px 24px; line-height:1.35;
}
.hero__scroll{ color:var(--cream); top:auto; bottom:48px; right:44px; }
.hero__content{
	position:absolute; left:var(--pad); top:294px; z-index:2;
	width:680px;
	display:flex; flex-direction:column; align-items:flex-start;
}
/* Плашка над заголовком хіро прихована на прохання клієнта.
   НЕ прибираємо з шаблону: поле hero_label лишається в адмінці, тож
   повернути — це зняти цей рядок, а не правити розмітку. */
.hero__label{ display:none; }
.hero__title{ color:var(--cream); width:100%; }
.hero__text{
	margin-top:20px; font-size:14px; opacity:.7; max-width:640px;
}
.hero__btn{ margin-top:32px; min-width:254px; }

/* ─── Секції товарів ─── */
.fp-products{ padding:81px 0; }
.fp-products--preorder{
	background:var(--beige);
	padding:81px 0;
}
.fp-products .section-head{ margin-bottom:24px; }

/* ─── Категорії (шахматна сітка) ───
   Макет: нижні краї рядів рівні, високі плитки (3-тя і 4-та,
   зображення 429 проти 405) стирчать угору; другий ряд
   зсунутий вправо на 40px, його висока плитка торкається
   першого ряду (row-gap:0 + align-items:end). */
.fp-cats{ padding:48px 0 81px; }
.fp-cats__grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	column-gap:8px;
	align-items:end;
	width:min(calc(var(--container-max) + 80px), calc(100% - 16px));
	margin-inline:auto;
	padding-right:40px; /* резерв під зсув другого ряду */
}
.fp-cats__tile{
	display:flex; flex-direction:column;
	text-decoration:none;
	position:relative;
}
/* другий ряд — вправо на 40px */
.fp-cats__tile:nth-child(n+4){ transform:translateX(40px); }
.fp-cats__media{
	position:relative; display:block;
	aspect-ratio:456/405;
	background:var(--beige-50);
	overflow:hidden;
}
.fp-cats__tile:nth-child(3) .fp-cats__media,
.fp-cats__tile:nth-child(4) .fp-cats__media{ aspect-ratio:456/429; }
.fp-cats__media img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .5s ease;
}
.fp-cats__tile:hover .fp-cats__media img{ transform:scale(1.04); }
.fp-cats__bar{
	display:flex; align-items:center; justify-content:space-between;
	background:var(--bg);
	padding:20px 40px;
}
.fp-cats__name{ font-size:14px; text-transform:uppercase; }
.fp-cats__bar .r-arrow{ width:23px; height:9px; }
.fp-cats__bar .r-arrow path{ fill:var(--ink); }
.fp-cats__tile:hover .fp-cats__name{ text-decoration:underline; text-underline-offset:4px; }

/* ─── Instagram ─── */
.fp-insta{ padding:81px 0 105px; }
.fp-insta__grid{
	display:grid; grid-template-columns:repeat(4, 1fr);
	gap:8px;
}
.fp-insta__item{
	position:relative; display:block; overflow:hidden;
	aspect-ratio:330/379;
	background:var(--beige-50);
}
.fp-insta__item img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .5s ease;
}
.fp-insta__item:hover img{ transform:scale(1.04); }
.fp-insta__more{ margin-top:24px; text-align:center; }
.fp-insta__more a{
	display:inline-flex; align-items:center; gap:8px;
	font-size:14px; text-decoration:underline; text-underline-offset:3px;
}
.fp-insta__more svg{ width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.5; }

/* ─── Адаптація в діапазоні 1200–1920 ─── */
@media (max-width: 1440px){
	.hero__content{ top:260px; }
}
@media (min-width: 1680px){
	.hero{ height:820px; }
	.hero__content{ top:330px; }
}

/* ═══════════════════════════════════════════
   Адаптив головної (Figma: Main page mob 390)
   ═══════════════════════════════════════════ */

/* ─── ≤1199 · великий планшет ─── */
@media (max-width: 1199px){
	.hero{ height:660px; }
	.hero__content{ top:auto; bottom:72px; width:min(680px, 68%); }
	.hero__card{ top:56px; width:206px; height:274px; }
	.hero__scroll{ bottom:40px; right:24px; }

	.fp-products{ padding:64px 0; }
	.fp-products--preorder{ padding:64px 0; }
	.fp-cats{ padding:40px 0 64px; }
	.fp-cats__grid{ padding-right:24px; }
	.fp-cats__tile:nth-child(n+4){ transform:translateX(24px); }
	.fp-cats__bar{ padding:18px 24px; }
	.fp-insta{ padding:64px 0 80px; }
}

/* ─── ≤1023 · планшет ─── */
@media (max-width: 1023px){
	.hero{ height:620px; }
	.hero__content{ bottom:64px; width:min(600px, 74%); }
	.hero__card{ top:40px; width:186px; height:248px; }
	.hero__card-caption{ padding:14px 18px; }

	.fp-products .products-grid{ gap:8px; }
	.fp-cats__grid{ padding-right:20px; }
	.fp-cats__tile:nth-child(n+4){ transform:translateX(20px); }
	.fp-cats__name{ font-size:13px; }
	.fp-cats__bar{ padding:16px 20px; }
}

/* ─── ≤767 · мобільний макет ─── */
@media (max-width: 767px){
	/* Хіро: фото на весь екран, контент притиснутий донизу */
	/* Хіро на телефоні свідомо компактніший: увесь блок (плашка, заголовок,
	   опис, кнопка) з'їдав майже екран, а промо-картка ще й перекривала фото. */
	.hero{ height:clamp(400px, 112vw, 480px); }
	.hero__bg img{ object-position:center bottom; }
	.hero__content{
		left:var(--pad); right:var(--pad); width:auto;
		top:auto; bottom:32px;
	}
	.hero__title{ font-size:clamp(18px, 5.6vw, 24px); }
	.hero__text{ margin-top:10px; max-width:none; font-size:13px; line-height:1.45; }
	.hero__btn{ margin-top:16px; min-width:0; padding:13px 18px; font-size:12px; }
	/* Промо-картка — тільки на планшеті й ширше: на телефоні вона закривала
	   верхню третину фото і дублювала те, що й так є в «Передзамовленні». */
	.hero__card{ display:none; }
	/* «scroll →» — вертикально по лівому краю */
	.hero__scroll{
		display:block;
		left:10px; right:auto; top:24px; bottom:auto;
		writing-mode:vertical-rl; opacity:.7;
	}

	/* Ряди товарів */
	.fp-products{ padding:48px 0; }
	/* Тонка лінія між секціями — як у макеті. Після перестановки (категорії
	   тепер ПЕРЕД новинками) вішаємо її ЗВЕРХУ на новинки, а не знизу на
	   категорії: у категоріях .container обгортає лише заголовок, плитки
	   лежать окремо — лінія опинилась би між заголовком і плитками. */
	.fp-products--new{ padding-top:0; }
	.fp-products--new > .container{ padding-top:32px; border-top:1px solid var(--line); }
	.fp-products--preorder{ padding:56px 0; }

	/* Категорії: 2 в ряд, парні ряди зсунуті вправо, шахматка з макета */
	.fp-cats{ padding:24px 0 32px; }
	.fp-cats__grid{
		grid-template-columns:repeat(2, 1fr);
		column-gap:8px; row-gap:16px;
		align-items:stretch;
		width:calc(100% - var(--pad)); margin-inline:0;
		padding-right:0;
	}
	/* width:100% обов'язковий: Safari при aspect-ratio на flex-контейнері
	   всередині гріда рахує розмір плитки з висоти вмісту, а не з ширини
	   колонки — 3-й ряд виходив 137×218 замість 185×295 (у Chromium ок). */
	.fp-cats__tile{ aspect-ratio:185/295; width:100%; min-width:0; }
	.fp-cats__tile:nth-child(n+4){ transform:none; }
	.fp-cats__tile:nth-child(4n+3),
	.fp-cats__tile:nth-child(4n+4){ transform:translateX(var(--pad)); }
	.fp-cats__media,
	.fp-cats__tile:nth-child(3) .fp-cats__media,
	.fp-cats__tile:nth-child(4) .fp-cats__media{
		aspect-ratio:auto; flex:1 1 auto; min-height:0;
	}
	/* Фон смуги НЕ чіпаємо: у макеті вона #FFFAEE = колір полотна сторінки,
	   тобто зливається з фоном. У нас фон білий (рішення клієнта), тож
	   смуга лишається білою — співвідношення з макетом збережене. */
	.fp-cats__bar{ padding:12px; gap:12px; align-items:flex-end; }
	/* Шахматка ВИСОТ фото (макет 289:1963): у кожному ряду одне фото 249,
	   друге 227, високий бік чергується по діагоналі. Низькі слоти — позиції
	   4n+2 і 4n+3 (2-га непарного ряду, 1-ша парного). Задаємо через
	   min-height СМУГИ (68px = 12 + 2 рядки по 21.96 + 12), фото flex:1
	   добирає решту → 227. Якщо назва сама на 2 рядки — збігається; довга
	   назва на високому слоті просто переможе шахматку (текст не ріжеться). */
	.fp-cats__tile:nth-child(4n+2) .fp-cats__bar,
	.fp-cats__tile:nth-child(4n+3) .fp-cats__bar{ min-height:68px; }
	.fp-cats__name{ font-size:13px; line-height:1.25; }
	/* Стрілка стоїть на ОСТАННЬОМУ рядку назви, а не по центру блока
	   (у макеті 2-рядкові плитки мають svg 24×27 зі стрілкою внизу).
	   6.5px = (рядок 22px − стрілка 9px) / 2 — на 1-рядкових дає той самий
	   центр, що й раніше. */
	.fp-cats__bar .r-arrow{ margin-bottom:6.5px; }

	/* Instagram: 2 в ряд + кнопка внизу на всю ширину */
	.fp-insta{ padding:60px 0 56px; }
	.fp-insta__grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
	.fp-insta__more{ margin-top:24px; }
	.fp-insta__btn{ margin-top:24px; }
}