/* ==========================================================================
   motion.css — Beúszás görgetésre és az akciós becsúszó doboz.
   A beúszás CSAK a data-reveal jelölésű elemre hat, és a jelölést a
   motion.js teszi fel. JavaScript nélkül ezért semmi nem rejtett. A
   prefers-reduced-motion esetet a base.css globális szabálya nullázza (a
   script akkor el sem indul).
   MÉRT a mintaoldalon (taurus3.unas.hu, AOS 3.0): fade-up, 24 px, 600 ms,
   szomszédos elemek 80 ms-os csúszással. Az átmenet transformon és
   opacityn megy, tehát nem okoz újratördelést.
   NULLA ÜRES SOR. Tabulátor behúzás.
   ========================================================================== */
.vls-js .main,
.vls-js .ftr {
	overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
	.vls-js .main .sect:not([data-reveal]):not([data-reveal-root]),
	.vls-js .ftr__col:not([data-reveal]) {
		opacity: 0;
		animation: vls-reveal-safety 1ms 3s forwards;
	}
}
@keyframes vls-reveal-safety {
	to {
		opacity: 1;
	}
}
/* A BEUSZAS IDEJE ES GORBEJE VALTOZOBAN all, mert mas blokknak is szuksege
   van rajuk: ha egy elem SAJAT atmenetet is kap (peldaul a kategoria-csempe
   arnyeka hoverre), annak a szabalynak az egesz `transition` listat ujra ki
   kell irnia, kulonben a rovidites elveszi a beuszast. Igy a 400 ms nem
   masolodik ket fajlba, tehat nem tud szettartani. */
.vls-js [data-reveal] {
	--reveal-dur: 400ms;
	--reveal-ease: ease-out;
	opacity: 0;
	transition:
		opacity var(--reveal-dur) var(--reveal-ease),
		transform var(--reveal-dur) var(--reveal-ease);
	transition-delay: var(--reveal-delay, 0ms);
}
.vls-js.vls-prep [data-reveal] {
	transition: none;
}
.vls-js [data-reveal="fade-up"] {
	transform: translate3d(0, 100px, 0);
}
.vls-js [data-reveal="fade-left"] {
	transform: translate3d(100px, 0, 0);
}
.vls-js [data-reveal="fade-right"] {
	transform: translate3d(-100px, 0, 0);
}
.vls-js [data-reveal="zoom-in-up"] {
	transform: translate3d(0, 100px, 0) scale(0.6);
}
.vls-js [data-reveal="zoom-in-left"] {
	transform: translate3d(100px, 0, 0) scale(0.6);
}
.vls-js [data-reveal="zoom-in-right"] {
	transform: translate3d(-100px, 0, 0) scale(0.6);
}
.vls-js [data-reveal][data-reveal-in] {
	opacity: 1;
	transform: none;
}
.promo {
	position: fixed;
	left: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 60;
	width: min(340px, calc(100vw - 2 * var(--sp-4)));
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-lg);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 400ms var(--ease),
		transform 400ms var(--ease);
}
.promo.is-open {
	opacity: 1;
	transform: none;
}
@media (max-width: 767px) {
	.promo {
		left: var(--sp-3);
		bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
		width: calc(100vw - 2 * var(--sp-3));
		padding: var(--sp-4);
	}
	.single-product .promo {
		bottom: calc(88px + var(--sp-3) + env(safe-area-inset-bottom));
	}
}
.promo__close {
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	background: transparent;
	color: var(--c-text-soft);
	cursor: pointer;
}
.promo__close:hover,
.promo__close:focus-visible {
	background: var(--c-primary-wash);
	color: var(--c-primary-aa);
}
.promo__close svg {
	width: 18px;
	height: 18px;
}
.promo__eyebrow {
	display: inline-block;
	margin: 0 0 var(--sp-2);
	padding: 2px var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--c-sale-wash);
	color: var(--c-sale);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.promo__title {
	margin: 0 var(--sp-8) var(--sp-2) 0;
	font-size: var(--fs-lg);
	font-weight: 900;
	line-height: 1.25;
	color: var(--c-text);
	text-wrap: balance;
}
.promo__text {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--c-text-soft);
}
.promo__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	width: 100%;
	margin: 0 0 var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border: 1px dashed var(--c-primary-aa);
	border-radius: var(--r-sm);
	background: var(--c-primary-wash);
	color: var(--c-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.promo__code code {
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.promo__code span {
	font-size: var(--fs-xs);
	color: var(--c-primary-aa);
}
.promo__cta {
	width: 100%;
}