/* ============================================================
   Miody z Wawra — wersja ulepszona (3D)
   ============================================================ */

:root {
	--honey-1: #ffcf3f;
	--honey-2: #f6a821;
	--honey-3: #e07b17;
	--amber-deep: #a8560a;
	--cream: #fff7e6;
	--ink: #2c1c07;
	--ink-soft: #5c4620;
	--glass: rgba(255, 248, 233, 0.72);
	--glass-brd: rgba(255, 255, 255, 0.55);
	--shadow: 0 18px 45px -18px rgba(120, 70, 0, 0.55);
	--radius: 20px;
	--maxw: 1120px;
	--nav-h: 64px;
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* both html and body, otherwise the value just propagates to the viewport
	   and nothing is actually clipped */
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	color: var(--ink);
	background: #fbe9c4;
	overflow-x: hidden;
	line-height: 1.6;
}

h1, h2, h3, .logo, .section-kicker {
	font-family: "Fraunces", "Lora", serif;
}

a { color: inherit; }

/* ---------- 3D canvas ---------- */
#webgl {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	display: block;
}

/* ---------- LOADER ---------- */
#loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 35%, #ffd764, #f2a52a 55%, #d97b12);
	transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; width: min(320px, 80vw); }
.loader-title {
	font-family: "Fraunces", serif;
	font-size: 2rem;
	color: #3a2405;
	margin: 22px 0 18px;
	letter-spacing: 0.5px;
}
.loader-bar {
	height: 10px;
	border-radius: 20px;
	background: rgba(58, 36, 5, 0.18);
	overflow: hidden;
}
.loader-bar-fill {
	height: 100%;
	width: 0%;
	border-radius: 20px;
	background: linear-gradient(90deg, #fff3cf, #b85e0a);
	transition: width 0.25s ease;
}
.loader-text { margin-top: 12px; color: #4a2e07; font-size: 0.95rem; }

.loader-bee {
	position: relative;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	animation: beeHover 1.4s ease-in-out infinite;
}
.loader-bee .body {
	position: absolute;
	left: 15px; top: 20px;
	width: 40px; height: 30px;
	border-radius: 50%;
	background: repeating-linear-gradient(50deg, #2c1c07 0 6px, #ffc22e 6px 12px);
	box-shadow: inset -4px -4px 8px rgba(0,0,0,.3);
}
.loader-bee .wing {
	position: absolute;
	top: 6px;
	width: 26px; height: 22px;
	background: rgba(255,255,255,.75);
	border-radius: 50% 50% 50% 10%;
	transform-origin: bottom center;
}
.loader-bee .wing-l { left: 12px; animation: flap 0.14s ease-in-out infinite alternate; }
.loader-bee .wing-r { right: 12px; transform: scaleX(-1); animation: flap 0.14s ease-in-out infinite alternate; }
@keyframes flap { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
.loader-bee .wing-r { animation-name: flapR; }
@keyframes flapR { from { transform: scaleX(-1) rotate(-18deg); } to { transform: scaleX(-1) rotate(22deg); } }
@keyframes beeHover { 0%,100% { transform: translateY(0) rotate(-4deg);} 50% { transform: translateY(-10px) rotate(4deg);} }

/* ---------- FLIGHT PROGRESS ---------- */
#flightProgress {
	position: fixed;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	height: 46vh;
	width: 34px;
	z-index: 30;
	pointer-events: none;
}
.flight-track {
	position: absolute;
	left: 50%;
	top: 0; bottom: 0;
	width: 3px;
	transform: translateX(-50%);
	background: repeating-linear-gradient(to bottom, rgba(120,70,0,.45) 0 6px, transparent 6px 14px);
	border-radius: 2px;
}
.flight-bee {
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
	transition: top 0.15s linear;
}
@media (max-width: 720px) { #flightProgress { display: none; } }

/* ---------- HEADER ---------- */
#header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: var(--nav-h);
	z-index: 40;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0 clamp(14px, 4vw, 40px);
	background: rgba(255, 244, 220, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255,255,255,.4);
	transition: background 0.4s ease, box-shadow 0.4s ease;
}
#header.scrolled { background: rgba(255, 244, 220, 0.9); box-shadow: 0 6px 24px -12px rgba(120,70,0,.5); }
nav { display: flex; align-items: center; gap: 26px; flex: 1; }
.logo {
	font-weight: 800;
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.logo-mark { font-size: 1.4rem; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links .link {
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 999px;
	font-family: "Fraunces", serif;
	font-weight: 500;
	position: relative;
	transition: color 0.25s, background 0.25s;
}
.nav-links .link::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 4px;
	height: 2px;
	background: var(--honey-3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.nav-links .link:hover { color: var(--amber-deep); }
.nav-links .link:hover::after { transform: scaleX(1); }

#infoNavBar { display: flex; align-items: center; gap: 6px; }
#infoNavBar .element {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--honey-1), var(--honey-2));
	color: var(--ink);
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: 0 6px 14px -8px rgba(160,90,0,.7);
	transition: transform 0.2s ease;
}
#infoNavBar .element:hover { transform: translateY(-2px); }
#account { padding: 8px 12px; }

.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn .line { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; transition: all .4s cubic-bezier(.9,0,.33,1); }
.menu-btn.open .line1 { transform: translateY(7px) rotate(45deg); }
.menu-btn.open .line2 { opacity: 0; }
.menu-btn.open .line3 { transform: translateY(-7px) rotate(-45deg); }

/* ---------- LAYOUT / SECTIONS ---------- */
main { position: relative; z-index: 10; }
.section {
	position: relative;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(70px, 12vh, 150px) clamp(18px, 5vw, 40px);
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 6vh, 70px); }
.section-kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--amber-deep);
	background: rgba(255,255,255,.6);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.section h2 {
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 1.05;
	margin: 0 0 14px;
	color: var(--ink);
	font-weight: 800;
}
.section-lead { font-size: 1.12rem; color: var(--ink-soft); margin: 0; }

/* Frosted panel look for content sitting over the 3D scene */
.panel {
	background: var(--glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* ---------- BUTTONS ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-family: "Fraunces", serif;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: 999px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
}
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-primary {
	background: linear-gradient(135deg, var(--honey-1), var(--honey-3));
	color: #40270a;
	box-shadow: 0 12px 24px -12px rgba(200,110,0,.9);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -12px rgba(200,110,0,.9); }
.btn-ghost {
	background: rgba(255,255,255,.5);
	border-color: var(--honey-3);
	color: var(--amber-deep);
}
.btn-ghost:hover { background: #fff; transform: translateY(-3px); }

/* ---------- HERO ---------- */
.section-hero {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 900px;
}
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--amber-deep);
	margin-bottom: 10px;
}
.hero-title {
	font-size: clamp(3.4rem, 13vw, 9rem);
	line-height: 0.92;
	margin: 0 0 22px;
	font-weight: 900;
	color: var(--ink);
	text-shadow: 0 6px 30px rgba(255,255,255,.6);
}
.hero-title span {
	background: linear-gradient(120deg, var(--honey-2), var(--amber-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-sub { font-size: 1.2rem; color: var(--ink-soft); max-width: 560px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.scroll-hint {
	position: absolute;
	bottom: 26px; left: 50%;
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft);
	animation: floaty 2.4s ease-in-out infinite;
}
.mouse { width: 24px; height: 40px; border: 2px solid var(--ink-soft); border-radius: 14px; display: flex; justify-content: center; padding-top: 6px; }
.wheel { width: 4px; height: 8px; border-radius: 3px; background: var(--ink-soft); animation: wheel 1.6s infinite; }
@keyframes wheel { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
@keyframes floaty { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ---------- PRODUCTS ---------- */
.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
	perspective: 1400px;
}
.product {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	padding: 26px 22px 22px;
	background: var(--glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transform-style: preserve-3d;
	transition: box-shadow 0.3s ease;
	overflow: hidden;
}
.product-glow {
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(255,210,90,.55), transparent 45%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.product:hover .product-glow { opacity: 1; }
.product-img {
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transform: translateZ(40px);
}
.product-img img { max-width: 90%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(150,90,0,.4)); transition: transform 0.4s ease; }
.product:hover .product-img img { transform: scale(1.08) rotate(-3deg); }
.product h3 { margin: 0 0 6px; font-size: 1.3rem; transform: translateZ(28px); }
.product-desc { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.98rem; transform: translateZ(20px); }
.product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; transform: translateZ(24px); }
.price { font-family: "Fraunces", serif; font-weight: 800; font-size: 1.35rem; color: var(--amber-deep); }
.products-all { display: flex; justify-content: flex-end; margin-top: 26px; }

/* ---------- TILES (pasieka) ---------- */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
	perspective: 1600px;
}
.tile { height: 360px; perspective: 1200px; }
.tile-inner {
	position: relative;
	width: 100%; height: 100%;
	transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
	transform-style: preserve-3d;
}
.tile:hover .tile-inner { transform: rotateY(180deg); }
.tile-front, .tile-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-radius: var(--radius);
	background: var(--glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-brd);
	box-shadow: var(--shadow);
	text-align: center;
}
.tile-back { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(255,220,140,.92), rgba(246,168,33,.92)); }
.tile-back p { font-size: 1.1rem; color: #3a2405; }
.tile-icon { width: 92px; height: 92px; margin-bottom: 10px; }
.tile .count { font-family: "Fraunces", serif; font-size: 3.6rem; font-weight: 900; margin: 4px 0 0; color: var(--amber-deep); line-height: 1; }
.tile-front p { margin: 4px 0 0; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- ABOUT ---------- */
.about { display: flex; flex-direction: column; gap: clamp(30px, 6vh, 70px); }
.about-row {
	display: flex;
	align-items: center;
	gap: clamp(22px, 5vw, 60px);
}
.about-row.reverse { flex-direction: row-reverse; }
.about-img {
	flex: 0 0 clamp(220px, 34vw, 340px);
	height: clamp(220px, 34vw, 340px);
	border-radius: var(--radius);
	overflow: hidden;
	border: 4px solid rgba(255,255,255,.7);
	box-shadow: var(--shadow);
	transform: rotate(-2deg);
	transition: transform 0.5s ease;
}
.about-row.reverse .about-img { transform: rotate(2deg); }
.about-img:hover { transform: rotate(0) scale(1.03); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text {
	flex: 1;
	font-size: 1.2rem;
	background: var(--glass);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	padding: 28px 30px;
	box-shadow: var(--shadow);
}
.about-text p { margin: 0; }
.hl { color: var(--amber-deep); font-weight: 700; }

/* ---------- PRODUCTION STEPS ---------- */
.steps { display: flex; flex-direction: column; gap: clamp(26px, 5vh, 54px); }
.step {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 30px;
	align-items: stretch;
	background: var(--glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
	transition: transform 0.4s ease;
}
.step:nth-child(even) { grid-template-columns: 1fr 300px; }
.step:nth-child(even) .step-media { order: 2; }
.step:hover { transform: translateY(-6px) scale(1.01); }
.step-media { position: relative; min-height: 240px; overflow: hidden; }
.step-media img, .step-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step-body { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.step-num {
	position: absolute;
	top: 10px; left: 14px;
	font-family: "Fraunces", serif;
	font-size: 5rem;
	font-weight: 900;
	line-height: 1;
	color: rgba(255,255,255,.9);
	text-shadow: 0 4px 16px rgba(160,90,0,.6);
	z-index: 2;
	pointer-events: none;
}
.step:nth-child(even) .step-num { left: auto; right: 14px; }
.step-body h3 { font-size: 1.6rem; margin: 0 0 10px; color: var(--ink); }
.step-body p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- CTA ---------- */
.section-cta { text-align: center; }
.cta-card {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 70px);
	border-radius: 28px;
	background: linear-gradient(150deg, rgba(255,220,140,.95), rgba(224,123,23,.95));
	box-shadow: var(--shadow);
	border: 1px solid rgba(255,255,255,.5);
}
.cta-card h2 { color: #3a2405; margin-top: 0; }
.cta-card p { color: #4a2e07; font-size: 1.15rem; margin-bottom: 26px; }

/* ---------- FOOTER ---------- */
footer {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 26px 16px;
	background: rgba(44, 28, 7, 0.9);
	color: #ffdd93;
	font-size: 0.95rem;
}

/* ---------- COOKIES ---------- */
#infoCookies {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 140%);
	max-width: min(560px, 92vw);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	background: rgba(44, 28, 7, 0.95);
	color: #fff5df;
	border-radius: 16px;
	box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
	z-index: 200;
	transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
#infoCookies.show { transform: translate(-50%, 0); }
.cookies-text { font-size: 0.95rem; }
#acceptCookies {
	flex-shrink: 0;
	border: 0;
	padding: 10px 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--honey-1), var(--honey-3));
	color: #40270a;
	font-weight: 700;
	cursor: pointer;
	font-family: "Fraunces", serif;
}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-up {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-70px); }
.reveal-right { transform: translateX(70px); }
.reveal-up { transform: translateY(60px) scale(.98); }
.reveal.in, .reveal-left.in, .reveal-right.in, .reveal-up.in {
	opacity: 1;
	transform: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
	.step, .step:nth-child(even) { grid-template-columns: 1fr; }
	.step:nth-child(even) .step-media { order: 0; }
	.step-media { min-height: 200px; }
	.about-row, .about-row.reverse { flex-direction: column; text-align: center; }
	.about-img { transform: rotate(0); }
}

@media (max-width: 768px) {
	/* No sideways reveal on phones: an element waiting at translateX(70px) is
	   70px wider than the screen, and `overflow-x` on <body> alone doesn't clip
	   it (that value propagates to the viewport instead), so the whole page
	   could be dragged left and right. Vertical reveals read better here anyway. */
	.reveal-left, .reveal-right { transform: translateY(36px); }

	.menu-btn { display: block; order: 3; margin-left: auto; }
	.nav-links {
		position: fixed;
		top: var(--nav-h); right: 0;
		width: min(260px, 80vw);
		height: calc(100vh - var(--nav-h));
		height: calc(100dvh - var(--nav-h));
		flex-direction: column;
		gap: 6px;
		padding: 22px;
		background: rgba(255, 244, 220, 0.97);
		backdrop-filter: blur(14px);
		transform: translateX(110%);
		transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
		box-shadow: -10px 0 30px -12px rgba(120,70,0,.5);
	}
	.nav-links.open { transform: translateX(0); }
	.nav-links .link { font-size: 1.15rem; }
	#infoNavBar .amount { display: none; }
	nav { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; scroll-behavior: auto; }
	.reveal, .reveal-left, .reveal-right, .reveal-up { opacity: 1; transform: none; }
}

/* ---------- 3D shop: hint + add-to-cart toast ---------- */
.shop3d-hint {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 520px;
	margin: 8px auto 0;
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--glass);
	border: 1px solid var(--glass-brd);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow);
	color: var(--ink-soft);
	font-weight: 600;
	text-align: left;
}
.shop3d-arrow {
	font-size: 1.6rem;
	color: var(--honey-3);
	animation: shopNudge 1.6s ease-in-out infinite;
}
@keyframes shopNudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-8px); }
}

#cartToast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translate(-50%, 24px);
	z-index: 1200;
	padding: 14px 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--honey-1), var(--honey-3));
	color: var(--ink);
	font-family: "Fraunces", serif;
	font-weight: 700;
	box-shadow: 0 18px 40px -12px rgba(120, 70, 0, 0.7);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
#cartToast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* both sit at the bottom centre — lift the toast over the cookie bar while it
   is still on screen (the toast is appended to <body>, after #infoCookies) */
#infoCookies.show ~ #cartToast { bottom: 130px; }

/* ---------- PRODUCTS: fly toward each static 3D jar; card slides in ---------- */
.section-products {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
.section-products > .section-head {
	padding: clamp(70px, 12vh, 140px) 20px 0;
}
/* each block is just a scroll spacer; its card is a fixed overlay */
.product-reveal { min-height: 85vh; }
.product-reveal[data-product="0"] { min-height: 95vh; }  /* a beat of flight after the hero */
.product-reveal[data-product="2"] { min-height: 80vh; }  /* a little breather before "Nasza Pasieka" */

.pr-card {
	position: fixed;
	top: 50%;
	width: min(40vw, 500px);
	padding: clamp(24px, 2.6vw, 40px);
	background: var(--cream);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: left;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}
.product-reveal.text-right .pr-card { right: clamp(16px, 4vw, 64px); transform: translate(calc(100% + 90px), -50%); }
.product-reveal.text-left .pr-card { left: clamp(16px, 4vw, 64px); transform: translate(calc(-100% - 90px), -50%); }
.product-reveal.text-right .pr-card.in,
.product-reveal.text-left .pr-card.in {
	transform: translate(0, -50%);
	opacity: 1;
	pointer-events: auto;
}
.pr-media {
	width: 100%;
	max-width: 320px;
	height: 210px;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 12px; }
.pr-desc { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 22px; }
.pr-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pr-price { font-family: "Fraunces", serif; font-weight: 800; font-size: 1.6rem; color: var(--amber-deep); }
/* the desktop card is tight, so it keeps the short label; phones swap it below */
.buy-long { display: none; }

/* desktop keeps the sliding product cards, so the flight hint never appears
   there — the phone block below is what switches it on */
#flyHint { display: none; }

/* ---------- PHONES: no cards — just the 3D jar the bee flies up to, its name
              on top, price + "Dodaj do koszyka" at the bottom ---------- */
@media (max-width: 768px) {
	/* Taller scroll spacers: the flight is keyed to these — the bee draws level
	   with jar i at the middle of block i — so a block has to carry the long
	   run-in to its jar AND the turn away toward the next one without either
	   feeling rushed. Keep them close to each other in height: the flight speed
	   follows the ratio of block height to the distance between two jars, and
	   an odd one out shows up as the flight speeding up or slowing down. */
	.product-reveal { min-height: 120vh; }
	.product-reveal[data-product="0"] { min-height: 130vh; }
	.product-reveal[data-product="2"] { min-height: 115vh; }
	/* Just enough room after the last jar for its price and button to clear the
	   screen before "Poznaj naszą pasiekę" comes up behind them. It used to be
	   95vh, which was a whole screen of empty meadow with nothing to read. */
	.section-products { padding-bottom: 30vh; }

	/* The card becomes a transparent full-screen overlay for the two labels.
	   Height is dvh, not vh/bottom:0 — on a phone the address bar makes the
	   layout viewport taller than what you can actually see, so anything pinned
	   to the bottom ends up under the browser chrome. dvh tracks the visible
	   area; the vh line above it is the fallback for older browsers. */
	.pr-card,
	.product-reveal.text-right .pr-card,
	.product-reveal.text-left .pr-card {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		height: 100vh;
		height: 100dvh;
		width: auto;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		text-align: center;
		transform: none;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}
	.product-reveal.text-right .pr-card.in,
	.product-reveal.text-left .pr-card.in {
		transform: none;
		opacity: 1;
		pointer-events: none;   /* clicks fall through to the 3D jar */
	}

	/* the photo + description belong to the desktop card only */
	.pr-media,
	.pr-desc { display: none; }

	.pr-card h3 {
		position: absolute;
		top: calc(var(--nav-h) + 14px + env(safe-area-inset-top, 0px));
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		max-width: 92vw;
		margin: 0;
		padding: 10px 22px;
		font-size: clamp(1.35rem, 6.4vw, 2rem);
		line-height: 1.15;
		border-radius: 999px;
		background: var(--glass);
		border: 1px solid var(--glass-brd);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: var(--shadow);
	}

	.pr-foot {
		position: absolute;
		left: 50%;
		bottom: calc(22px + env(safe-area-inset-bottom, 0px));
		transform: translateX(-50%);
		width: min(88vw, 400px);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		/* The card is a full-screen fixed overlay that is merely transparent when
		   its jar is not the one in front of you — so re-enabling clicks here
		   unconditionally left three invisible "Dodaj do koszyka" buttons stacked
		   across the bottom of every screen of the site, hero and footer included.
		   Only the jar you have actually flown up to is buyable. */
		pointer-events: none;
	}
	.pr-card.in .pr-foot { pointer-events: auto; }
	.pr-price {
		font-size: 1.7rem;
		padding: 6px 22px;
		border-radius: 999px;
		background: var(--glass);
		border: 1px solid var(--glass-brd);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: var(--shadow);
	}
	.pr-foot .btn {
		width: 100%;
		justify-content: center;
		font-size: 1.05rem;
		padding: 15px 26px;
	}
	.buy-long { display: inline; }
	.buy-short { display: none; }

	/* keep the confirmation toast clear of the button */
	#cartToast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

	/* the "keep scrolling" pill — takes the price and button's place at the
	   bottom of the screen whenever no jar's label is up (see scene.js) */
	#flyHint {
		display: flex;
		position: fixed;
		left: 50%;
		bottom: calc(34px + env(safe-area-inset-bottom, 0px));
		transform: translateX(-50%);
		z-index: 5;
		flex-direction: column;
		align-items: center;
		gap: 9px;
		padding: 11px 24px 13px;
		border-radius: 999px;
		background: var(--glass);
		border: 1px solid var(--glass-brd);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: var(--shadow);
		color: var(--ink-soft);
		font-size: 0.72rem;
		letter-spacing: 2px;
		text-transform: uppercase;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.45s ease;
	}
	#flyHint.in { opacity: 1; }
	.fly-chev {
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		animation: flyChev 1.7s ease-in-out infinite;
	}
	@keyframes flyChev {
		0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.4; }
		50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 1; }
	}
}

/* Short phone screens (address bar showing, small handsets): tighten the name
   pill and the price/button block so the jar keeps a usable band in between.
   scene.js reads the gap these leave and sizes the jar to match. */
@media (max-width: 768px) and (max-height: 720px) {
	.pr-card h3 {
		font-size: clamp(1.1rem, 5.4vw, 1.5rem);
		padding: 7px 16px;
		top: calc(var(--nav-h) + 8px + env(safe-area-inset-top, 0px));
	}
	.pr-price { font-size: 1.35rem; padding: 4px 18px; }
	.pr-foot {
		gap: 8px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
	.pr-foot .btn { padding: 12px 20px; font-size: 1rem; }
	#cartToast { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- hero title replaced by the 3D one (keep box for layout + SEO) ---------- */
.hero-title,
.hero-title span {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	background: none !important;
	text-shadow: none !important;
}

/* ---------- PHONES: hero — reserve a real gap for the 3D words ----------
   scene.js drops the 3D "Miody z Wawra" exactly into this (invisible) box, so
   the box has to be tall enough that the eyebrow above and the intro below
   never sit on top of the title. */
@media (max-width: 768px) {
	.section-hero {
		padding-top: calc(var(--nav-h) + 18px);
		padding-bottom: 96px;
	}
	.eyebrow {
		font-size: 0.72rem;
		letter-spacing: 2.5px;
		margin-bottom: 18px;
	}
	.hero-title {
		min-height: 20vh;
		margin: 0 0 30px;
	}
	.hero-sub {
		font-size: 1.05rem;
		margin-bottom: 26px;
	}
	.scroll-hint { bottom: 18px; font-size: 0.7rem; }
}

/* ============================================================
   ASP.NET INTEGRATION
   Bits that only exist once the page is served by the shop:
   the account menu view component in the header, links inside
   the product cards and the link to the full shop.
   ============================================================ */

/* --- account menu (UserName view component) --- */
#accountContainer { position: relative; display: flex; align-items: center; }
#accountContainer > #accountInfo { display: none; }
#accountContainer:hover > #accountInfo,
#accountContainer:focus-within > #accountInfo {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 190px;
	padding: 8px;
	border-radius: 14px;
	background: rgba(255, 244, 220, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: 0 14px 30px -14px rgba(120,70,0,.65);
	z-index: 50;
}
#accountInfo a {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
#accountInfo a:hover { background: var(--honey-1); color: var(--amber-deep); }

/* --- the card photo and title link through to the product page --- */
.pr-card h3 a,
.pr-media a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.pr-media a { width: 100%; height: 100%; display: grid; place-items: center; }
.pr-card h3 a:hover { color: var(--amber-deep); }

/* --- "Zobacz wszystkie produkty" under the three jars ---
   (own name: .products-all is already taken by the old grid shop above) --- */
.shop-all-link {
	position: relative;
	z-index: 12;
	text-align: center;
	margin-top: clamp(40px, 8vh, 90px);
	padding: 0 20px clamp(30px, 6vh, 70px);
}