/* ROLL — strona główna (wzorzec strony-projekt-11-glowna-prosta-v2, 2026-10-11).
   Układ OceanWP „full-screen" (bez kontenera) — sekcje na całą szerokość,
   treść w .roll-home__wrap (max 1160 px). */

.roll-site.roll-home {
	max-width: none;
	padding: 0;
	overflow-x: hidden;
}

.roll-home__wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.roll-home__sec {
	padding: 64px 0;
	background: #fff;
}

.roll-home__sec--alt {
	background: #f5f5f5;
}

.roll-home__sec--dark {
	background: #16191c;
	color: #fff;
}

.roll-home__center {
	align-items: center;
}

.roll-home__mt54 {
	margin-top: 54px !important;
}

.roll-home__mt22 {
	margin: 22px 0 0;
}

.roll-site .roll-home__mb6 {
	display: block;
	margin-bottom: 6px;
}

.roll-site .roll-home__mb0 {
	margin-bottom: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.roll-home {
	--hero-h: clamp(430px, min(48.8vw, calc(100vh - 130px)), 700px);
}

.roll-home__mpic {
	display: none;
}

.roll-home__hero {
	position: relative;
	height: var(--hero-h);
	background: #dce4f0 center 70% / cover no-repeat;
}

.roll-home__hero-in {
	position: relative;
	height: 100%;
}

.roll-home__search {
	position: absolute;
	left: 24px;
	top: 34px;
	width: 420px;
	max-width: calc(100% - 48px);
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	box-sizing: border-box;
	z-index: 2;
}

.roll-home__search b {
	display: block;
	margin-bottom: 10px;
	color: #1a1a1a;
	font-size: 15px;
}

.roll-home__txs {
	position: absolute;
	right: 24px;
	top: 34px;
	width: 52%;
	height: 230px;
	text-align: right;
}

.roll-home__m {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateX(110px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}

.roll-home__m.on {
	opacity: 1;
	transform: none;
}

.roll-home__m.off {
	opacity: 0;
	transform: translateX(-110px);
}

.roll-home__m small {
	display: block;
	margin-bottom: 6px;
	color: #3a3f55;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4em;
	white-space: pre;
}

.roll-site .roll-home__h {
	margin: 0 0 8px;
	color: #c60000;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
}

.roll-site .roll-home__sub {
	margin: 0;
	color: #c01a1a;
	font-size: 22px;
	font-weight: 600;
}

.roll-home__bars {
	position: absolute;
	right: 0;
	top: 176px;
	display: flex;
	gap: 8px;
}

.roll-home__bars button {
	position: relative;
	width: 34px;
	height: 4px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.18);
	cursor: pointer;
	overflow: hidden;
	min-height: 0;
}

.roll-home__bars button::before {
	content: "";
	position: absolute;
	inset: -8px 0;
}

.roll-home__bars button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #c60000;
	transform: scaleX(0);
	transform-origin: left;
}

.roll-home__bars button.on::after {
	transform: scaleX(1);
	transition: transform 5.5s linear;
}

/* --- Klamka ---------------------------------------------------------------- */

.roll-home__klam {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 40px;
	align-items: center;
}

.roll-site .roll-home__klam-h {
	margin: 0 0 10px;
	color: #c60000;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.3px;
}

.roll-home__klam img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Pasy ze zdjęciem: style w site.css (wspólne dla całej strony, 2026-10-15) --- */

/* --- Liczby, kafle ---------------------------------------------------------- */

.roll-home__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	text-align: center;
}

.roll-home__stats b {
	display: block;
	color: #c60000;
	font-size: 44px;
	line-height: 1.1;
}

.roll-home__stats span {
	color: #595959;
	font-size: 15px;
}

.roll-home__grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 26px;
}

.roll-home__grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.roll-home__tile {
	display: block;
	padding: 26px 24px;
}

.roll-site .roll-home__tile p {
	margin: 0;
	color: #595959;
	font-size: 15px;
}

.roll-site a.roll-home__tile--link,
.roll-site a.roll-home__press {
	color: #1a1a1a;
	text-decoration: none !important;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.roll-site a.roll-home__tile--link:hover,
.roll-site a.roll-home__press:hover {
	border-color: #c60000;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.roll-home__press {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.roll-home__press-img {
	min-height: 200px;
	border-right: 1px solid #e6e6e6;
	background: #fff center top / cover no-repeat;
}

.roll-home__press-h {
	display: block;
	color: #1a1a1a;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

/* --- Program lojalnościowy --------------------------------------------------- */

.roll-home__steps {
	display: grid;
	gap: 12px;
}

.roll-home__step {
	padding: 22px 24px;
}

.roll-home__step span {
	display: block;
	margin-bottom: 6px;
	color: #c60000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.roll-home__step b {
	color: #1a1a1a;
}

/* --- Film -------------------------------------------------------------------- */

.roll-site .roll-home__eyebrow-dark {
	color: #ff6b6b;
}

.roll-site .roll-home__white {
	color: #fff;
}

.roll-site .roll-home__lead-dark {
	color: #c9ced3;
}

.roll-home__video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background: #333 center / cover no-repeat;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.roll-home__video::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 55%);
}

.roll-home__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	background: #c60000;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
	transition: transform 0.2s;
}

.roll-home__play::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 19px;
	border-left: 18px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}

.roll-home__video:hover .roll-home__play {
	transform: scale(1.08);
}

.roll-home__vlabel {
	position: absolute;
	left: 16px;
	bottom: 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

/* --- Partnerzy --------------------------------------------------------------- */

.roll-home__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
}

.roll-home__pl {
	display: grid;
	place-items: center;
	width: 170px;
	height: 90px;
	padding: 10px 14px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* Loga w kolorze (decyzja właściciela 2026-10-12 — jak na dawnej stronie, bez szarości). */
.roll-home__pl:hover {
	border-color: #c60000;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.roll-home__pl img {
	display: block;
	max-width: 100%;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Aktualności (zatwierdzony blok) w sekcji strony ------------------------- */

.roll-home__news .roll-site.roll-news-home {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* --- Opinie ------------------------------------------------------------------ */

.roll-home__op {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: center;
}

.roll-home__opb {
	display: grid;
	justify-items: center;
	align-content: center;
}

.roll-site .roll-home__opb .roll-site__btn {
	min-width: 260px;
	text-align: center;
}

.roll-home .roll-site__cta {
	margin-top: 0;
}

/* --- Wjazd elementów przy przewijaniu (tylko gdy JS działa i bez reduced-motion) */

.roll-home.js-rv .rv {
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.roll-home.js-rv .rv.r {
	transform: translateX(60px);
}

.roll-home.js-rv .rv.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.roll-home.js-rv .rv {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Bez wjazdu tekstu z boku; pasek postępu wypełnia się dalej (powolny, spokojny ruch —
	   prośba właściciela 2026-10-12: „nie widać paska postępu”). */
	.roll-home__m {
		transition: none;
	}
}

/* --- Telefon / tablet -------------------------------------------------------- */

@media (max-width: 860px) {
	.roll-home__mpic {
		display: block;
		height: 54vw;
		min-height: 210px;
		background: #dce4f0 center / cover no-repeat;
	}

	.roll-home__hero {
		height: auto;
		background-image: none !important;
		background: #fff;
	}

	.roll-home__hero-in {
		height: auto;
		padding: 0;
	}

	.roll-home__search {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		max-width: none;
		margin: 14px 16px 0;
	}

	.roll-home__txs {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		height: 190px;
		padding: 22px 24px 0;
		text-align: left;
	}

	.roll-home__m {
		inset: 22px 24px 0;
	}

	.roll-site .roll-home__h {
		font-size: 30px;
		white-space: normal;
	}

	.roll-site .roll-home__sub {
		font-size: 18px;
	}

	.roll-home__m small {
		font-size: 11px;
	}

	.roll-home__bars {
		top: auto;
		right: 24px;
		bottom: 12px;
	}

	.roll-home__sec {
		padding: 44px 0;
	}

	.roll-home__wrap {
		padding: 0 16px;
	}

	.roll-home__klam,
	.roll-home__op,
	.roll-home__grid2,
	.roll-home__grid4,
	.roll-home__stats {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.roll-site .roll-home__klam-h {
		font-size: 28px;
	}

	.roll-home__stats b {
		font-size: 36px;
	}

	/* Ramki na pasach ze zdjęciem i kafle z ikoną na telefonie — wspólne dla całej strony,
	   w site.css (sekcja „Telefon: wspólne motywy”, 2026-10-15). */
	.roll-home__grid4 {
		gap: 12px;
		margin-top: 20px;
	}

	.roll-home__press {
		grid-template-columns: 1fr;
	}

	.roll-home__press-img {
		min-height: 180px;
		border-right: 0;
		border-bottom: 1px solid #e6e6e6;
	}

	.roll-home__pl {
		width: calc(50% - 8px);
	}

	.roll-home.js-rv .rv,
	.roll-home.js-rv .rv.r {
		transform: translateY(30px);
	}

	.roll-home__opb {
		justify-items: start;
	}
}

/* Napisy-linki „… →" w kafelkach (span w linku — kolor jak w makiecie). */
.roll-home .roll-pg__more {
	display: inline-block;
	margin-top: 12px;
	color: #c60000;
	font-weight: 700;
	font-size: 15px;
}

.roll-home .roll-pg__more::after {
	content: " \2192";
}

.roll-home .roll-site--strip {
	max-width: 1160px;
}

/* Strony dla klientów zagranicznych (/en/, Roll_Site_Intl) — ten sam szablon co strona główna. */
.roll-intl a.roll-pg__card {
	display: block;
	color: inherit;
	text-decoration: none;
}
.roll-intl a.roll-pg__card:hover .roll-site__h3 {
	color: #c60000;
}
.roll-intl__list {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.7;
}
.roll-intl__list a {
	color: inherit;
}
.roll-intl__count {
	font-size: 15px;
	font-weight: 400;
	color: #595959;
}
.roll-intl .roll-site__eyebrow a {
	color: inherit;
	text-decoration: none;
}
.roll-intl .roll-shop {
	margin-top: 18px;
}