/*
 * Strona główna: slider (.hero), wyszukiwarka (.home-search, .home-popular), siatki (.home-grid),
 * taby "Solit Store" (.home-tabs), opinie, marki. Desktop od 64rem, tablet od 48rem.
 * Ruch: tylko transform i opacity; czasy z tokens.css (--dur*, --ease-*), "ogranicz ruch" wyłącza animacje.
 */

:root { --home-gap: clamp(3rem, 6vw, 6.5rem); }

/* Odsłanianie sekcji przy przewijaniu (klasę .is-in dodaje home.js). Bez JS wszystko jest widoczne. */
@media (scripting: enabled) {
	[data-reveal] {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
		transition: opacity var(--dur-slow) ease, transform calc(var(--dur-slow) * 1.8) var(--ease-out);
	}

	[data-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	.home-grid:not(.is-in) .home-grid__item { opacity: 0; }
}

/* ---------- Slider ---------- */

.hero {
	--hero-h: clamp(28rem, 39.6vw, 47.5rem);

	position: relative;
	z-index: 2; /* Zdjęcia nachodzą na sekcję wyszukiwarki poniżej. */
	overflow-x: clip;
	overflow-y: visible;
	background: var(--color-background);
	touch-action: pan-y;
}

.hero__track { display: grid; }

.hero__slide {
	position: relative;
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	min-height: var(--hero-h);
	visibility: hidden;
	opacity: 0;
	transition: opacity calc(var(--dur-slow) * 1.4) ease, visibility 0s linear calc(var(--dur-slow) * 1.4);
}

.hero__slide.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	transition: opacity calc(var(--dur-slow) * 1.4) ease, visibility 0s;
}

.hero__media {
	position: absolute;
	top: 0;
	bottom: calc(var(--hero-overlap, 0px) * -1);
	width: 40%;
}

.hero__media--left { left: 0; }
.hero__media--right { right: 0; }
.hero__slide:is(.hero__slide--right, .hero__slide--left) .hero__media { width: 52%; }

.hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	will-change: transform;
}

.hero__media--left .hero__img { object-position: left bottom; transform-origin: 0% 85%; }
.hero__media--right .hero__img { object-position: right bottom; transform-origin: 100% 85%; }

.hero__copy {
	position: relative;
	z-index: 1;
	padding-inline: var(--page-pad);
	text-align: center;
}

.hero__slide--right .hero__copy { margin-left: 58%; padding-inline: 0 var(--page-pad); text-align: left; }
.hero__slide--right { justify-content: flex-start; }
.hero__slide--left .hero__copy { margin-right: auto; margin-left: 22%; padding-inline: 0; text-align: left; }
.hero__slide--left { justify-content: flex-start; }

/* H1 pierwszego slajdu i akapity pozostałych wyglądają tak samo (nadpisanie globalnego h1). */
.hero__title {
	max-width: 8em;
	margin: 0 auto 1.5rem;
	font: 600 var(--fs-display) / 1.05 var(--font-heading);
	text-align: inherit;
	text-wrap: balance;
}

.hero__slide:is(.hero__slide--right, .hero__slide--left) .hero__title { margin-inline: 0; }

/* Wjazd przy odsłonięciu slajdu: zdjęcia z boków z lekkim obrotem, tekst od dołu. */
@keyframes hero-in-left {
	from { transform: translate3d(-16%, 0, 0) rotate(-9deg); }
}

@keyframes hero-in-right {
	from { transform: translate3d(16%, 0, 0) rotate(9deg); }
}

@keyframes hero-copy-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.25rem, 0);
	}
}

.hero__slide.is-active .hero__media--left .hero__img { animation: hero-in-left calc(var(--dur-slow) * 2.2) var(--ease-out) both; }
.hero__slide.is-active .hero__media--right .hero__img { animation: hero-in-right calc(var(--dur-slow) * 2.2) var(--ease-out) 0.08s both; }
.hero__slide.is-active .hero__title { animation: hero-copy-in calc(var(--dur-slow) * 1.6) var(--ease-out) 0.2s both; }
.hero__slide.is-active .hero__button { animation: hero-copy-in calc(var(--dur-slow) * 1.6) var(--ease-out) 0.34s both; }

.hero__controls {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
}

.hero__dots { display: flex; }

/* Pin: cienka belka, aktywna dłuższa i pełna. */
.hero__dot {
	position: relative;
	width: 2rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.375rem;
	left: 0.375rem;
	height: 3px;
	border-radius: 2px;
	background: var(--color-text-strong);
	opacity: 0.22;
	transform: translateY(-50%);
	transition: opacity var(--dur) ease, left var(--dur-slow) var(--ease-out), right var(--dur-slow) var(--ease-out);
}

.hero__dot:hover::before { opacity: 0.5; }
.hero__dot.is-active::before { right: 0; left: 0; opacity: 1; }
.hero__dot:focus-visible { outline: 2px solid var(--color-text-strong); outline-offset: -2px; }

/*
 * Tablet (768–1023 px): układ desktopowy; wysokość (36vw + nachodzenie) odpowiada proporcjom zdjęć z szerokością 50%, więc zdjęcie
 * sięga górnej krawędzi slidera (bez widocznej, ściętej góry). Węższe pasy zdjęć i tekst, który mieści się obok zdjęcia.
 */
@media (min-width: 48rem) and (max-width: 63.999rem) {
	.hero { --hero-h: 36vw; }

	.hero__media { width: 36%; }
	.hero__slide:is(.hero__slide--right, .hero__slide--left) .hero__media { width: 50%; }

	.hero__title { font-size: calc(var(--fs-display) * 0.85); }
	.hero__copy { max-width: 30%; padding-inline: 0; }
	.hero__slide--right .hero__copy { max-width: 38%; margin-left: 56%; }
	.hero__slide--left .hero__copy { max-width: 38%; margin-left: var(--page-pad); }
}

@media (max-width: 47.999rem) {
	.hero { z-index: 2; }

	/* Kolejność: zdjęcia "nad tekstem", tekst, zdjęcia "pod tekstem" (pozycja, szerokość i przesunięcie z pól slajdu). */
	/*
	 * Wszystkie slajdy mają tę samą wysokość (--hero-h-m z pola „Wysokość slidera – mobile”).
	 * Zdjęcia dzielą wolne miejsce nad i pod tekstem i skalują się do niego (contain), więc nic się nie rozjeżdża.
	 */
	.hero__slide {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		height: var(--hero-h-m, 135vw);
		min-height: 0;
		padding-block: 1.5rem 3rem;
	}

	.hero__media {
		position: relative;
		inset: auto;
		order: 1;
		flex: 1 1 0;
		min-height: 0;
		width: var(--m-w, 64%) !important;
		margin-top: var(--m-y, 0);
	}

	.hero__media--bottom { order: 3; margin-bottom: calc(var(--hero-overlap-m, 0px) * -1); }
	.hero__media--align-left { align-self: flex-start; --ox: left; }
	.hero__media--align-center { align-self: center; --ox: center; }
	.hero__media--align-right { align-self: flex-end; --ox: right; }

	.hero__img { object-position: var(--ox, center) top; }
	.hero__media--bottom .hero__img { object-position: var(--ox, center) bottom; }

	.hero__copy,
	.hero__slide:is(.hero__slide--right, .hero__slide--left) .hero__copy {
		flex: none;
		order: 2;
		margin: 1.25rem 0;
		padding-inline: var(--page-pad);
		text-align: center;
	}

	.hero__slide:is(.hero__slide--right, .hero__slide--left) .hero__title { margin-inline: auto; }

	/* Zdjęcie "pod tekstem" stoi na dole slidera i nachodzi na sekcję poniżej. */
	.hero__slide:has(.hero__media--bottom) { padding-bottom: 0; }
}

/* ---------- Wyszukiwarka ---------- */

.home-search {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: var(--color-text-strong);
	color: var(--color-background);
}

/* Tło z paralaksą: zdjęcie jest wyższe o 15% z góry i z dołu, home.js przesuwa je (transform) przy przewijaniu. */
.home-search__bg {
	position: absolute;
	top: -15%;
	left: 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
	will-change: transform;
}

.home-search__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 5rem);
	text-align: center;
}

@media (max-width: 47.999rem) {
	.home-search {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 350px;
	}

	.home-search__inner { padding-top: calc(2.5rem + var(--hero-overlap-m, 0px)); }
}

.home-search__title {
	color: inherit;
	font: 500 var(--fs-h1) / 1.1 var(--font-heading);
}

.home-search__text {
	max-width: 22rem;
	margin: 0.75rem 0 0;
	color: color-mix(in srgb, var(--color-background) 85%, transparent);
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
}

.home-search__form {
	position: relative;
	width: min(100%, 26rem);
	margin-top: 1.5rem;
	border-bottom: 1px solid currentColor;
}

.home-search__form:focus-within { outline: 2px solid currentColor; outline-offset: 4px; }
.home-search__form .icon { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.home-search__input {
	width: 100%;
	padding: 0.5rem 0 0.5rem 1.75rem;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: none;
	color: inherit;
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.home-search__input::placeholder { color: color-mix(in srgb, var(--color-background) 75%, transparent); opacity: 1; }
.home-search__input::-webkit-search-cancel-button { display: none; }

/* Wybrane modele pod wyszukiwarką */
.home-popular { padding-block: 1.5rem; }

.home-popular__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.home-popular__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--color-text-strong);
	font: 300 var(--fs-sm) / 1.3 var(--font-body);
	text-decoration: none;
}

.home-popular__list > li { flex: 0 1 auto; min-width: 0; }

.home-popular__thumb { display: block; flex: none; width: 2.75rem; height: auto; mix-blend-mode: multiply; }

.home-popular__arrow {
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
	mask: url("../img/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--dur) var(--ease-out);
}

.home-popular__link:hover .home-popular__arrow { transform: translateX(0.25rem); }

@media (max-width: 63.999rem) {
	.home-popular { display: none; }
}

/* ---------- Siatki produktów ---------- */

.home-grid {
	--label-w: clamp(7.5rem, 12.5vw, 15rem);

	display: grid;
	grid-template-columns: var(--label-w) minmax(0, 1fr);
	column-gap: clamp(1rem, 2vw, 2rem);
	margin-top: var(--home-gap);
}

.home-grid__title { align-self: start; }

.home-grid__title span {
	display: block;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-text-strong);
	color: var(--color-text-strong);
}

.home-grid__all {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.375rem;
	margin-bottom: 1rem;
	color: var(--color-text-strong);
	line-height: 1;
	text-decoration: none;
}

.home-grid__all-text { padding-bottom: 0.125rem; }

.home-grid__arrow {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: -0.125rem; /* Środek strzałki na wysokości środka liter. */
	background: currentColor;
	-webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
	mask: url("../img/arrow-right.svg") center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform var(--dur) var(--ease-out);
}

.home-grid__all:hover .home-grid__arrow { transform: translateY(0.25rem) rotate(90deg); }

.home-grid__more { display: none; margin: 1.5rem auto 0; }

.home-grid.is-in .home-grid__item {
	animation: card-in var(--dur-slow) var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 70ms + 150ms);
}

/*
 * Tablet i mobile: poziomy, przewijany rząd kart. Widać --cards kart naraz (karta „wystaje” z prawej strony):
 * 1,75 na 375 px i coraz więcej na szerszych ekranach.
 */
@media (max-width: 63.999rem) {
	.home-grid {
		--cards: 3.5;

		display: block;
		margin-top: calc(var(--home-gap) * 0.75);
	}

	.home-grid__title { margin-bottom: 1.25rem; }

	.home-grid .home-grid__list {
		display: flex;
		gap: 0.375rem;
		margin-inline: calc(var(--page-pad) * -1);
		padding-inline: var(--page-pad);
		overflow-x: auto;
		scroll-padding-inline: var(--page-pad);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.home-grid__item {
		flex: 0 0 calc((100vw - var(--page-pad)) / var(--cards) - 0.25rem);
		scroll-snap-align: start;
	}
}

@media (max-width: 47.999rem) {
	.home-grid { --cards: 3.25; margin-top: 4rem; }

	/* Kreska pod tytułem: 80% szerokości ekranu. */
	.home-grid__title span { width: min(80vw, 100%); }

	.home-grid__all { display: none; }
	.home-grid__more { display: flex; width: fit-content; }

	/* Rozmiary z projektu: nazwa 12 px, cena 14 px. */
	.home-grid .product-card__name { font-size: 0.75rem; }
	.home-grid .product-card__price { color: var(--color-text-strong); font-size: 0.875rem; font-weight: 400; } /* Archivo Regular 14, #171717 */
}

@media (max-width: 39.999rem) { .home-grid { --cards: 2.5; } }
@media (max-width: 29.999rem) { .home-grid { --cards: 1.75; } }

/* ---------- Taby "Solit Store" ---------- */

.home-tabs { margin-top: var(--home-gap); }

.home-tabs__box {
	position: relative;
	display: grid;
	grid-template-columns: clamp(9rem, 17vw, 21rem) minmax(0, 1fr);
	min-height: clamp(26rem, 40vw, 46rem);
	overflow: hidden;
	background: var(--color-text-strong);
	color: var(--color-background);
}

.home-tabs__nav { padding: clamp(1.25rem, 3vw, 3.5rem); padding-right: 0; }

.home-tabs__title {
	color: var(--color-background);
	font: 400 var(--fs-h2) / normal var(--font-heading); /* Barlow Condensed Regular, 36 px na desktopie, biały */
}

.home-tabs__title span {
	display: block;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid currentColor;
}

.home-tabs__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1.25rem;
}

.home-tabs__tab {
	position: relative;
	width: fit-content;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: color-mix(in srgb, var(--color-background) 42%, transparent);
	font: 300 var(--fs-sm) / 1.4 var(--font-body);
	text-align: left;
	cursor: pointer;
	transition: color var(--dur) ease, transform var(--dur) var(--ease-out);
}

.home-tabs__tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-slow) var(--ease-out);
}

.home-tabs__tab:hover { color: color-mix(in srgb, var(--color-background) 80%, transparent); }
.home-tabs__tab.is-active { color: var(--color-background); transform: translateX(0.375rem); }
.home-tabs__tab.is-active::after { transform: none; }
.home-tabs__tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.home-tabs__stage {
	position: relative;
	display: grid;
	min-width: 0;
}

.home-tabs__panel {
	display: grid;
	grid-area: 1 / 1;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) ease, visibility 0s linear var(--dur);
}

.home-tabs__panel.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity var(--dur) ease, visibility 0s;
}

.home-tabs__media { position: relative; min-height: 100%; overflow: hidden; }

.home-tabs__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--x, 50%) var(--y, 0%);
	scale: var(--zoom, 1); /* Osobna właściwość, więc nie koliduje z animacją transform. */
	transform-origin: var(--x, 50%) var(--y, 0%);
	will-change: transform;
}

.home-tabs__copy {
	align-self: center;
	max-width: 25rem;
	padding: 2rem clamp(1.25rem, 4vw, 5rem) 2rem clamp(1rem, 3vw, 4rem);
}

.home-tabs__heading {
	margin: 0 0 0.75rem;
	color: inherit;
	font: 400 var(--fs-lg) / 1.35 var(--font-body);
}

.home-tabs__text {
	margin: 0;
	color: color-mix(in srgb, var(--color-background) 72%, transparent);
	font: 300 var(--fs-sm) / 1.65 var(--font-body);
}

.home-tabs__logo {
	position: absolute;
	top: clamp(1rem, 2.5vw, 2.5rem);
	right: clamp(1rem, 3vw, 3.5rem);
	z-index: 2;
	width: clamp(3.5rem, 6vw, 7rem);
	height: auto;
	filter: brightness(0) invert(1);
	pointer-events: none;
}

.home-tabs__arrows {
	position: absolute;
	right: clamp(1rem, 3vw, 3.5rem);
	bottom: clamp(1rem, 2.5vw, 2.5rem);
	z-index: 2;
	display: flex;
	gap: 0.5rem;
}

.home-tabs__arrow {
	width: 2rem;
	height: 2rem;
	border: 1px solid color-mix(in srgb, var(--color-background) 55%, transparent);
	background: none;
	color: var(--color-background);
	cursor: pointer;
	transition: background-color var(--dur) ease, color var(--dur) ease;
}

.home-tabs__arrow::before {
	content: "";
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
	mask: url("../img/arrow-right.svg") center / contain no-repeat;
}

.home-tabs__arrow--prev::before { transform: scaleX(-1); }
.home-tabs__arrow:hover { background: var(--color-background); color: var(--color-text-strong); }
.home-tabs__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Reveal: zdjęcie odsłania się "kurtyną" ze skalowaniem (kierunek zależy od przejścia), tekst wjeżdża kaskadowo. */
@keyframes tab-media-next {
	from { clip-path: inset(0 0 0 100%); }
}

@keyframes tab-media-prev {
	from { clip-path: inset(0 100% 0 0); }
}

@keyframes tab-img-in {
	from { transform: scale(1.14); }
}

@keyframes tab-copy-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.25rem, 0);
	}
}

@keyframes tab-in {
	from {
		opacity: 0;
		transform: translate3d(-0.75rem, 0, 0);
	}
}

.home-tabs.is-in .home-tabs__panel.is-active .home-tabs__media { animation: tab-media-next calc(var(--dur-slow) * 1.8) var(--ease-in-out) both; }
.home-tabs.is-in[data-dir="prev"] .home-tabs__panel.is-active .home-tabs__media { animation-name: tab-media-prev; }
.home-tabs.is-in .home-tabs__panel.is-active .home-tabs__img { animation: tab-img-in calc(var(--dur-slow) * 3) var(--ease-out) both; }
.home-tabs.is-in .home-tabs__panel.is-active .home-tabs__heading { animation: tab-copy-in calc(var(--dur-slow) * 1.6) var(--ease-out) 0.3s both; }
.home-tabs.is-in .home-tabs__panel.is-active .home-tabs__text { animation: tab-copy-in calc(var(--dur-slow) * 1.6) var(--ease-out) 0.42s both; }
.home-tabs.is-in .home-tabs__tab { animation: tab-in calc(var(--dur-slow) * 1.4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }

/*
 * Desktop i tablet (od 768 px): ustawienia zdjęć z pól tabu (ACF):
 *  - "Obszar": kolumna obok napisów (domyślnie) albo cały kafelek – zdjęcie sięga lewej krawędzi, pod napisami;
 *  - "Dopasowanie": wypełnij (cover) albo w całości (contain, bez przycinania);
 *  - odstęp od góry / dołu w px (np. stopy 20 px nad dolną krawędzią).
 * Zdjęcie wygasza się i lekko wsuwa poziomo (kierunek zależy od przejścia), tekst wjeżdża z prawej. Mobile: bez zmian (cover).
 */
@media (min-width: 48rem) {
	.home-tabs__box { --nav-w: clamp(9rem, 17vw, 21rem); }

	/* Napisy po lewej niżej o 64 px, tekst po prawej przy dolnej krawędzi z marginesem. */
	.home-tabs__nav {
		position: relative;
		z-index: 3;
		padding-top: calc(clamp(1.25rem, 3vw, 3.5rem) + 64px);
	}

	.home-tabs__copy {
		grid-column: 2;
		align-self: end;
		padding-bottom: clamp(2rem, 4.5vw, 5rem);
	}

	.home-tabs__img {
		top: var(--pt, 0px);
		bottom: auto;
		height: calc(100% - var(--pt, 0px) - var(--pb, 0px));
		object-fit: var(--fit, cover);
	}

	/*
	 * Pozycja swobodna: kafelek 1800 × 750 (2,4 : 1), a zdjęcie leży absolutnie, w jednostkach
	 * szerokości kafelka (cqw) – skaluje się razem z nim. Zdjęcie może wystawać (np. stopy pod dolną krawędzią).
	 */
	.home-tabs__box {
		container-type: inline-size;
		overflow-x: clip;
		overflow-y: visible;
	}

	.home-tabs__box:has([data-area="abs"]) {
		aspect-ratio: 1800 / 750; /* 750 px wysokości przy kontenerze 1800 px */
		min-height: 24rem;
	}

	.home-tabs__stage { position: static; }
	.home-tabs__copy { position: relative; z-index: 1; }

	.home-tabs__panel[data-area="abs"] .home-tabs__media {
		position: absolute;
		inset: 0;
		min-height: 0;
		overflow: visible;
	}

	.home-tabs__panel[data-area="abs"] .home-tabs__img {
		top: calc(var(--t, 0) * 1cqw);
		right: auto;
		bottom: auto;
		left: calc(var(--l, 0) * 1cqw);
		width: calc(var(--w, 60) * 1cqw);
		height: auto;
		object-fit: fill;
	}

	/* Bez przybliżania zdjęcia przy odsłonięciu – wystające zdjęcie nie wychodzi poza swoje miejsce. */
	.home-tabs.is-in .home-tabs__panel[data-area="abs"].is-active .home-tabs__img { animation: none; }

	/* Cały kafelek: od lewej krawędzi kafelka (pod napisami) do końca kolumny zdjęcia. */
	.home-tabs__panel[data-area="full"] .home-tabs__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--nav-w) * -1);
		width: calc(var(--nav-w) + 100% * 1.4 / 2.4);
	}

	/* Reveal zdjęcia: samo wygaszenie + lekkie wsunięcie (bez maski clip-path, która ucinała rogi wystających zdjęć). */
	@keyframes tab-slide-next {
		from {
			opacity: 0;
			transform: translate3d(3%, 0, 0);
		}
	}

	@keyframes tab-slide-prev {
		from {
			opacity: 0;
			transform: translate3d(-3%, 0, 0);
		}
	}

	@keyframes tab-copy-slide {
		from {
			opacity: 0;
			transform: translate3d(2rem, 0, 0);
		}
	}

	.home-tabs.is-in .home-tabs__panel.is-active .home-tabs__media { animation-name: tab-slide-next; }
	.home-tabs.is-in[data-dir="prev"] .home-tabs__panel.is-active .home-tabs__media { animation-name: tab-slide-prev; }
	.home-tabs.is-in .home-tabs__panel.is-active :is(.home-tabs__heading, .home-tabs__text) { animation-name: tab-copy-slide; }
}

@media (max-width: 47.999rem) {
	.home-tabs { padding-inline: 0; }

	.home-tabs__box { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.home-tabs__nav { padding: 1.25rem var(--page-pad) 1rem; }
	/* Linia pod napisem wychodzi tylko kawałek poza tekst; logo stoi po prawej na wysokości napisu. */
	.home-tabs__title span { display: inline-block; padding-right: 1.5rem; }

	/* Mobile: bez przewijanej listy haseł – panele przełączają strzałki i przeciągnięcie. */
	.home-tabs__list { display: none; }
	.home-tabs__nav { padding-bottom: 0.25rem; }

	.home-tabs__stage { touch-action: pan-y; }
	.home-tabs__panel { grid-template-columns: minmax(0, 1fr); align-content: start; }
	.home-tabs__media { min-height: 0; aspect-ratio: 4 / 3; }
	.home-tabs__img { object-position: var(--mx, 50%) var(--my, 0%); transform-origin: var(--mx, 50%) var(--my, 0%); }
	/* Mobile: tekst u góry, zdjęcie pod nim; strzałki pod zdjęciem. */
	.home-tabs__stage { padding-bottom: 4rem; }
	.home-tabs__copy { order: -1; max-width: none; padding: 1.5rem var(--page-pad) 1.5rem; }
	.home-tabs__logo { top: 1rem; right: var(--page-pad); width: 3.5rem; }
	.home-tabs__arrows { right: var(--page-pad); bottom: 1.25rem; }
}

/* ---------- Opinie, marki ---------- */

.home-reviews { margin-top: var(--home-gap); }

.home-reviews__hint {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--color-border);
	color: var(--color-muted);
	text-align: center;
}

.home-brands {
	margin-block: var(--home-gap);
	text-align: center;
}

/*
 * Desktop: 128 px od logotypów do zdjęcia wystającego nad newsletter (97 px nad ciemnym blokiem, footer.css).
 * Margines sekcji i stopki (132 px) zlewają się, więc liczy się większy z nich.
 */
@media (min-width: 64rem) {
	.home-brands { margin-bottom: calc(128px + 97px); }
}

.home-brands__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem clamp(2rem, 5vw, 6rem);
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.home-brands__item a { display: block; }

.home-brands__logo {
	display: block;
	width: auto;
	max-width: 9rem;
	height: clamp(1.75rem, 3vw, 3rem);
	object-fit: contain;
	transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease;
}

.home-brands__item a:hover .home-brands__logo { opacity: 0.7; transform: scale(1.06); }

@media (max-width: 47.999rem) {
	.home-brands__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 2.5rem;
		margin-inline: calc(var(--page-pad) * -1);
		padding-inline: var(--page-pad);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.home-brands__item { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide *,
	.home-tabs *,
	.home-grid__item { animation: none !important; }
}