/* ==========================================================
   ROBERTO & FRANCO V4.4.2
   ========================================================== */

.rf-v441-section {

	position: relative;

	left: 50%;

	width: 100vw;

	max-width: 100vw;

	margin-left: -50vw;

	overflow: hidden;

	background: #f6f2e8;

}


/* ==========================================================
   GRID
   ========================================================== */

.rf-v441-grid {

	display: grid;

	grid-template-columns:
		21.5%
		19.625%
		19.625%
		19.625%
		19.625%;

	grid-template-rows:
		repeat(
			2,
			clamp(315px, 36vh, 340px)
		);

	width: 100%;

}


/* ==========================================================
   POZYCJE
   ========================================================== */

.rf-v441-intro {
	grid-column: 1;
	grid-row: 1 / 3;
}

.rf-v441-photo-1 {
	grid-column: 2;
	grid-row: 1;
}

.rf-v441-copy-1 {
	grid-column: 3;
	grid-row: 1;
}

.rf-v441-photo-2 {
	grid-column: 4;
	grid-row: 1;
}

.rf-v441-copy-2 {
	grid-column: 5;
	grid-row: 1;
}

.rf-v441-copy-3 {
	grid-column: 2;
	grid-row: 2;
}

.rf-v441-photo-3 {
	grid-column: 3;
	grid-row: 2;
}

.rf-v441-copy-4 {
	grid-column: 4;
	grid-row: 2;
}

.rf-v441-photo-4 {
	grid-column: 5;
	grid-row: 2;
}


/* ==========================================================
   INTRO
   ========================================================== */

.rf-v441-intro {

	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: flex-start;

	padding:
		clamp(34px, 4vh, 50px)
		clamp(32px, 3vw, 62px);

	overflow: hidden;

	background:

		radial-gradient(
			circle at 0% 100%,
			rgba(193,160,79,.16) 0%,
			rgba(193,160,79,.16) 19%,
			transparent 19.5%
		),

		radial-gradient(
			circle at 100% 0%,
			rgba(93,113,60,.08) 0%,
			rgba(93,113,60,.08) 18%,
			transparent 18.5%
		),

		linear-gradient(
			140deg,
			#fffefa 0%,
			#faf7ef 48%,
			#efe8d9 100%
		);

}


.rf-v441-intro:after {

	content: "";

	position: absolute;

	inset: 0;

	pointer-events: none;

	opacity: .12;

	background:

		repeating-linear-gradient(
			45deg,
			rgba(70,64,50,.03) 0,
			rgba(70,64,50,.03) 1px,
			transparent 1px,
			transparent 6px
		);

}


/* ==========================================================
   PODCIĄGNIĘCIE TREŚCI LEWEGO PANELU O 22 PX
   Bazylia pozostaje dokładnie na swoim miejscu
   ========================================================== */

.rf-v441-intro-label,
.rf-v441-intro-line,
.rf-v441-intro h2,
.rf-v441-intro-subtitle,
.rf-v441-intro-button,
.rf-v441-signature,
.rf-v441-flag {

	position: relative;

	top: -22px;

}


/* ==========================================================
   BAZYLIA INTRO
   ========================================================== */

.rf-v441-basil-intro {

	position: absolute;

	z-index: 2;

	left: -70px;

	bottom: -55px;

	width: 270px;

	height: auto;

	opacity: .98;

	transform:
		rotate(-11deg);

	pointer-events: none;

	filter:
		drop-shadow(
			0 10px 15px rgba(42,61,28,.15)
		);

}


/* ==========================================================
   INTRO LABEL
   ========================================================== */

.rf-v441-intro-label {

	z-index: 5;

	max-width: 230px;

	font-size: 12.5px;

	font-weight: 600;

	line-height: 1.55;

	letter-spacing: 3.1px;

	color: #34362e;

	margin-bottom: 12px;

}


/* ==========================================================
   INTRO LINE
   ========================================================== */

.rf-v441-intro-line {

	z-index: 5;

	width: 104px;

	height: 2px;

	margin-bottom: 27px;

	background:

		linear-gradient(
			to right,
			#94701e,
			#d2b35a
		);

}


/* ==========================================================
   INTRO TITLE
   ========================================================== */

.rf-v441-intro h2 {

	z-index: 5;

	margin: 0;

	font-family:
		var(--wd-title-font, Georgia, serif);

	font-size:
		clamp(47px, calc(3.5vw - 1px), 70px);

	font-weight: 400;

	line-height: .91;

	color: #23251f;

}


.rf-v441-intro h2 span {

	display: block;

	font-style: italic;

	font-size: .89em;

	color: #686c5e;

	margin:
		4px 0;

}


/* ==========================================================
   INTRO SUBTITLE
   ========================================================== */

.rf-v441-intro-subtitle {

	z-index: 5;

	margin-top:
		clamp(25px, 3vh, 37px);

	font-size: 11px;

	line-height: 1.9;

	letter-spacing: 4.5px;

	color: #65675e;

}


/* ==========================================================
   INTRO BUTTON
   ========================================================== */

.rf-v441-intro-button {

	z-index: 5;

	display: flex;

	align-items: center;

	justify-content: space-between;

	width: 235px;

	margin-top:
		clamp(25px, 3vh, 35px);

	padding:
		13px 17px;

	border:
		1px solid #b08b34;

	color: #292a25;

	background:
		rgba(255,255,255,.28);

	font-size: 10px;

	font-weight: 600;

	line-height: 1.45;

	letter-spacing: 1.5px;

	text-decoration: none;

	transition: .25s ease;

}


.rf-v441-intro-button b {

	font-size: 20px;

	font-weight: 300;

}


.rf-v441-intro-button:hover {

	color: #fff;

	background: #20241b;

	transform:
		translateY(-2px);

}


/* ==========================================================
   SIGNATURE
   ========================================================== */

.rf-v441-signature {

	z-index: 5;

	margin-top:
		clamp(24px, 3vh, 35px);

	font-family:
		var(--wd-title-font, Georgia, serif);

	font-size: 21px;

	font-style: italic;

	color: #b88f2f;

	transform:
		rotate(-4deg);

}


/* ==========================================================
   FLAG
   ========================================================== */

.rf-v441-flag {

	z-index: 5;

	display: flex;

	width: 105px;

	height: 3px;

	margin-top: 13px;

}


.rf-v441-flag span {
	flex: 1;
}


.rf-v441-flag span:nth-child(1) {
	background: #16854a;
}


.rf-v441-flag span:nth-child(2) {
	background: #fff;
}


.rf-v441-flag span:nth-child(3) {
	background: #ce2c37;
}


/* ==========================================================
   PHOTO TILE
   ========================================================== */

.rf-v441-photo {

	position: relative;

	display: block;

	overflow: hidden;

	text-decoration: none;

	isolation: isolate;

}


.rf-v441-photo:before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 0;

	background:

		radial-gradient(
			circle at 25% 20%,
			rgba(255,255,255,.95) 0%,
			rgba(255,255,255,.28) 32%,
			transparent 55%
		);

	pointer-events: none;

}


/* ==========================================================
   CLASSIC
   ========================================================== */

.rf-v441-classic {

	background:

		radial-gradient(
			circle at 104% 104%,
			rgba(187,149,65,.15) 0,
			rgba(187,149,65,.15) 28%,
			transparent 28.5%
		),

		linear-gradient(
			145deg,
			#fffefa 0%,
			#f7f3eb 55%,
			#e9e2d5 100%
		);

}


/* ==========================================================
   INTEGRALE
   ========================================================== */

.rf-v441-integrale {

	background:

		radial-gradient(
			circle at 102% 103%,
			rgba(193,152,67,.25) 0,
			rgba(193,152,67,.25) 28%,
			transparent 28.5%
		),

		linear-gradient(
			145deg,
			#fffdf8 0%,
			#f4e9d4 53%,
			#e4d0a9 100%
		);

}


/* ==========================================================
   GLUTENFREE
   ========================================================== */

.rf-v441-glutenfree {

	background:

		radial-gradient(
			circle at 100% 0%,
			rgba(98,133,59,.25) 0,
			rgba(98,133,59,.25) 29%,
			transparent 29.5%
		),

		linear-gradient(
			145deg,
			#fffefa 0%,
			#f1f5e8 54%,
			#dbe5ce 100%
		);

}


/* ==========================================================
   NERO
   ========================================================== */

.rf-v441-nero {

	background:

		radial-gradient(
			circle at 88% 85%,
			rgba(35,35,32,.15) 0,
			rgba(35,35,32,.15) 5%,
			transparent 5.5%
		),

		radial-gradient(
			circle at 80% 75%,
			rgba(35,35,32,.08) 0,
			rgba(35,35,32,.08) 3%,
			transparent 3.5%
		),

		linear-gradient(
			145deg,
			#fdfdf9 0%,
			#e9e9e3 52%,
			#cfcfc8 100%
		);

}


/* ==========================================================
   DEKORACJE
   ========================================================== */

.rf-v441-decoration {

	position: absolute;

	z-index: 1;

	pointer-events: none;

}


/* ==========================================================
   DEKORACJA Z KATEGORII WOOCOMMERCE
   ========================================================== */

.rf-v441-category-decoration {

	right: -34px;

	left: auto;

	top: -26px;

	bottom: auto;

	width: 160px;
	max-height: 145px;

	object-fit: contain;

	opacity: .50;

	transform:
		rotate(8deg);

	filter:
		drop-shadow(
			0 5px 10px rgba(50,50,35,.06)
		);

}



/* ==========================================================
   DEKORACJA Z KATEGORII - zachowanie zatwierdzonego układu
   ========================================================== */

.rf-v441-category-decoration-basil {
	right: -38px;
	left: auto;
	top: -28px;
	bottom: auto;
	width: 165px;
	max-height: none;
	opacity: .43;
	transform: rotate(16deg);
}

.rf-v441-category-decoration-wheat {
	right: -38px;
	left: auto;
	top: -28px;
	bottom: auto;
	width: 132px;
	max-height: none;
	opacity: .62;
	transform: rotate(188deg);
}

.rf-v441-category-decoration-ink {
	right: -38px;
	left: auto;
	top: -28px;
	bottom: auto;
	width: 145px;
	max-height: none;
	opacity: .38;
	transform: rotate(-11deg);
}

.rf-v441-category-decoration-olive {
	right: -46px;
	left: auto;
	top: -18px;
	bottom: auto;
	width: 185px;
	max-height: none;
	opacity: .52;
	transform: rotate(10deg);
}

.rf-v441-category-decoration-flavour {
	right: -28px;
	left: auto;
	top: -30px;
	bottom: auto;
	width: 132px;
	max-height: none;
	opacity: .48;
	transform: rotate(8deg);
}


/* BAZYLIA PRODUKTOWA */

.rf-v441-basil-product {

	right: -38px;

	top: -28px;

	width: 165px;

	opacity: .43;

	transform:
		rotate(16deg);

}


/* ==========================================================
   KŁOSY
   ========================================================== */

.rf-v441-wheat {

	right: -38px;

	left: auto;

	top: -28px;

	bottom: auto;

	width: 132px;

	opacity: .62;

	transform:
		rotate(188deg);

	filter:
		drop-shadow(
			0 6px 10px rgba(100,70,25,.08)
		);

}


/* ==========================================================
   ATRAMENT
   ========================================================== */

.rf-v441-ink {

	right: -38px;

	left: auto;

	top: -28px;

	bottom: auto;

	width: 145px;

	opacity: .38;

	transform:
		rotate(-11deg);

	filter:
		drop-shadow(
			0 5px 10px rgba(0,0,0,.06)
		);

}


/* ==========================================================
   GAŁĄZKA OLIWNA
   ========================================================== */

.rf-v441-olive {

	right: -46px;

	left: auto;

	top: -18px;

	bottom: auto;

	width: 185px;

	opacity: .52;

	transform:
		rotate(10deg);

	filter:
		drop-shadow(
			0 5px 10px rgba(45,55,28,.07)
		);

}


/* ==========================================================
   SMAKOWE - CYTRYNA
   ========================================================== */

.rf-v441-flavour {

	right: -28px;

	left: auto;

	top: -30px;

	bottom: auto;

	width: 132px;

	opacity: .48;

	transform:
		rotate(8deg);

	filter:
		drop-shadow(
			0 5px 10px rgba(90,70,20,.06)
		);

}


/* ==========================================================
   BADGE
   ========================================================== */

.rf-v441-badge {

	position: absolute;

	z-index: 8;

	right: 16px;

	top: 16px;

	padding:
		7px 11px;

	background:
		rgba(255,255,250,.88);

	border:
		1px solid rgba(175,142,60,.22);

	font-size: 7.5px;

	font-weight: 600;

	letter-spacing: 2.7px;

	color: #615e49;

}


/* ==========================================================
   PRODUCT VISUAL
   ========================================================== */

.rf-v441-visual {

	position: absolute;

	inset: 0;

	z-index: 3;

	transform:
		translateY(1%);

	transition:
		transform .42s ease;

}


.rf-v441-photo:hover .rf-v441-visual {

	transform:
		translateY(1%)
		scale(1.035);

}


/* ==========================================================
   PACZKA
   ========================================================== */

.rf-v441-pack {

	position: absolute;

	left: -3%;

	top: 50%;

	width: 70%;

	height: 108%;

	transform:
		translateY(-50%);

	object-fit: contain;

	filter:
		drop-shadow(
			0 12px 16px rgba(0,0,0,.10)
		);

}


/* ==========================================================
   NUDO
   ========================================================== */

.rf-v441-nudo {

	position: absolute;

	object-fit: contain;

	filter:
		drop-shadow(
			0 7px 10px rgba(0,0,0,.07)
		);

}


/* KRÓTKIE / PACCHERI */

.rf-v441-nudo-square .rf-v441-pack {

	left: -4%;

	width: 69%;

}


.rf-v441-nudo-square .rf-v441-nudo {

	right: -6%;

	bottom: 0;

	width: 54%;

	height: 67%;

}


/* PIONOWE */

.rf-v441-nudo-portrait .rf-v441-pack {

	left: -3%;

	width: 68%;

}


.rf-v441-nudo-portrait .rf-v441-nudo {

	right: 1%;

	bottom: -1%;

	width: 38%;

	height: 91%;

}


/* POZIOME */

.rf-v441-nudo-landscape .rf-v441-pack {

	left: -3%;

	width: 68%;

}


.rf-v441-nudo-landscape .rf-v441-nudo {

	right: -4%;

	bottom: 3%;

	width: 58%;

	height: 48%;

}


/* BRAK NUDO */

.rf-v441-no-nudo .rf-v441-pack {

	left: 50%;

	top: 50%;

	width: 90%;

	height: 108%;

	transform:
		translate(-50%, -50%);

}


/* ==========================================================
   COPY
   ========================================================== */

.rf-v441-copy {

	position: relative;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	justify-content: center;

	padding:
		clamp(26px, 2.2vw, 42px);

	overflow: hidden;

}


/* ==========================================================
   PODCIĄGNIĘCIE TREŚCI KAFELKÓW O 11 PX
   Tło kafla pozostaje bez zmian
   ========================================================== */

.rf-v441-copy > .rf-v441-copy-label,
.rf-v441-copy > .rf-v441-copy-line,
.rf-v441-copy > h3,
.rf-v441-copy > p,
.rf-v441-copy > .rf-v441-button {

	position: relative;

	top: -11px;

}


/* ==========================================================
   DARK
   ========================================================== */

.rf-v441-dark {

	background:

		radial-gradient(
			circle at 105% 105%,
			rgba(177,146,67,.18) 0,
			rgba(177,146,67,.18) 28%,
			transparent 28.5%
		),

		linear-gradient(
			135deg,
			#10130f 0%,
			#192016 48%,
			#293220 100%
		);

	color: #fff;

}


/* ==========================================================
   LIGHT
   ========================================================== */

.rf-v441-light {

	background:

		radial-gradient(
			circle at 102% 103%,
			rgba(187,150,65,.20) 0,
			rgba(187,150,65,.20) 28%,
			transparent 28.5%
		),

		linear-gradient(
			145deg,
			#fffefa 0%,
			#f7f3e9 53%,
			#e9deca 100%
		);

	color: #292a25;

}


/* ==========================================================
   COPY LABEL
   ========================================================== */

.rf-v441-copy-label {

	z-index: 3;

	font-size: 8.5px;

	font-weight: 600;

	letter-spacing: 4.5px;

	color: #c1a24c;

	line-height: 1.35;

}


/* ==========================================================
   GOLD LINE
   ========================================================== */

.rf-v441-copy-line {

	z-index: 3;

	width: 52px;

	height: 2px;

	margin:
		11px 0
		16px;

	background:

		linear-gradient(
			to right,
			#997321,
			#d5b85e
		);

}


/* ==========================================================
   TITLE
   ========================================================== */

.rf-v441-copy h3 {

	z-index: 3;

	margin:
		0 0 12px;

	max-width: 345px;

	font-family:
		var(--wd-title-font, Georgia, serif);

	font-size:
		clamp(21px, 1.55vw, 29px);

	font-weight: 400;

	line-height: 1.08;

}


.rf-v441-title-medium {

	font-size:
		clamp(19px, 1.43vw, 27px) !important;

}


.rf-v441-title-long {

	font-size:
		clamp(18px, 1.32vw, 25px) !important;

}


.rf-v441-dark h3 {
	color: #fff;
}


.rf-v441-light h3 {
	color: #292a25;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.rf-v441-copy p {

	z-index: 3;

	margin: 0;

	max-width: 315px;

	font-size: 11.5px;

	line-height: 1.55;

	display: -webkit-box;

	-webkit-line-clamp: 3;

	-webkit-box-orient: vertical;

	overflow: hidden;

}


.rf-v441-dark p {
	color: #c4c7bf;
}


.rf-v441-light p {
	color: #62645c;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.rf-v441-button {

	z-index: 3;

	display: inline-flex;

	align-items: center;

	justify-content: space-between;

	gap: 22px;

	min-width: 175px;

	margin-top:
		clamp(16px, 2vh, 23px);

	padding:
		11px 15px;

	border:
		1px solid #b38d35;

	background:
		transparent;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: 1.5px;

	text-decoration: none;

	transition:
		.25s ease;

}


.rf-v441-dark .rf-v441-button {
	color: #fff;
}


.rf-v441-light .rf-v441-button {
	color: #292a25;
}


.rf-v441-button span {

	font-size: 17px;

	font-weight: 300;

}


.rf-v441-button:hover {

	color: #fff !important;

	background: #ac8732;

	transform:
		translateY(-2px);

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1200px) {

	.rf-v441-grid {

		grid-template-columns:
			1fr
			1fr;

		grid-template-rows:
			auto;

	}


	.rf-v441-intro {

		grid-column: 1 / 3;

		grid-row: auto;

		min-height: 410px;

	}


	.rf-v441-photo-1,
	.rf-v441-copy-1,
	.rf-v441-photo-2,
	.rf-v441-copy-2,
	.rf-v441-copy-3,
	.rf-v441-photo-3,
	.rf-v441-copy-4,
	.rf-v441-photo-4 {

		grid-column: auto;

		grid-row: auto;

		min-height: 350px;

	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

	.rf-v441-grid {

		display: block;

	}


	.rf-v441-intro {

		min-height: 480px;

		padding:
			45px 30px;

	}


	.rf-v441-intro h2 {

		font-size: 50px;

	}


	.rf-v441-photo {

		height: 400px;

	}


	.rf-v441-copy {

		min-height: 310px;

		padding:
			34px 30px;

	}


	.rf-v441-copy h3 {

		font-size: 25px;

	}


	.rf-v441-title-medium {

		font-size:
			23px !important;

	}


	.rf-v441-title-long {

		font-size:
			21px !important;

	}


	.rf-v441-wheat {

		width: 110px;

		left: auto;

		right: -30px;

		top: -22px;

		bottom: auto;

	}


	.rf-v441-ink {

		width: 125px;

		left: auto;

		right: -30px;

		top: -22px;

		bottom: auto;

	}


	.rf-v441-category-decoration {

		width: 130px;
		max-height: 118px;

		right: -28px;
		top: -22px;

	}


	.rf-v441-olive {

		width: 150px;

		right: -38px;

		top: -15px;

	}


	.rf-v441-flavour {

		width: 108px;

		right: -24px;

		top: -22px;

	}


	.rf-v441-basil-intro {

		width: 215px;

	}


	/* Na telefonie delikatniej podciągamy panel główny */

	.rf-v441-intro-label,
	.rf-v441-intro-line,
	.rf-v441-intro h2,
	.rf-v441-intro-subtitle,
	.rf-v441-intro-button,
	.rf-v441-signature,
	.rf-v441-flag {

		top: -12px;

	}


	/* Na telefonie kafelki również trochę mniej */

	.rf-v441-copy > .rf-v441-copy-label,
	.rf-v441-copy > .rf-v441-copy-line,
	.rf-v441-copy > h3,
	.rf-v441-copy > p,
	.rf-v441-copy > .rf-v441-button {

		top: -7px;

	}

}