/* SF Videó ajánló oldalak — a kirakat stílusához igazodó, önálló kártyarács. */

.sf-video {
	--sf-video-keret: rgba( 0, 0, 0, .1 );
	--sf-video-halvany: rgba( 0, 0, 0, .6 );
	--sf-video-kiemelt: #1f7a4d;
	margin: 0 0 2.5rem;
}

@media ( prefers-color-scheme: dark ) {
	.sf-video {
		--sf-video-keret: rgba( 255, 255, 255, .16 );
		--sf-video-halvany: rgba( 255, 255, 255, .66 );
		--sf-video-kiemelt: #5fc08d;
	}
}

/* ── kedvezmény: fekete sáv, felpörgő számmal ──
   A mozgás betöltéskor egyszer fut le; a szám pörgetése az sf-video.js-ben van. */
.sf-video-kupon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 1.5rem;
	padding: 16px 24px 18px;
	border-radius: 8px;
	background: #16161a;
	color: #fff;
	overflow: hidden;
	animation: sfVideoBe .45s ease both;
}

.sf-video-kupon-szam {
	font: 700 48px/1 "Jost", sans-serif;
	letter-spacing: -.03em;
	min-width: 3.1ch;
	font-variant-numeric: tabular-nums;
}

.sf-video-kupon-szam i {
	font-style: normal;
	color: #3fd07f;
}

.sf-video-kupon-szoveg {
	display: flex;
	flex-direction: column;
	gap: 5px;
	animation: sfVideoSzoveg .45s ease 1.2s both;
}

.sf-video-kupon-cim {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 16px/1.2 "Jost", sans-serif;
	color: #fff;
}

.sf-video-kupon-alcim {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: #c6c9cf;
}

.sf-video-pipa {
	width: 22px;
	height: 22px;
	flex: none;
}

.sf-video-pipa circle,
.sf-video-pipa path {
	fill: none;
	stroke: #3fd07f;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sf-video-pipa circle {
	stroke-width: 2.2;
	stroke-dasharray: 63;
	animation: sfVideoKor .5s ease 1.25s both;
}

.sf-video-pipa path {
	stroke-width: 2.6;
	stroke-dasharray: 14;
	animation: sfVideoPipa .35s ease 1.6s both;
}

.sf-video-kupon-csik {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #3fd07f;
	transform-origin: left;
	animation: sfVideoCsik 1.1s cubic-bezier( .3, .6, .3, 1 ) .2s both;
}

@keyframes sfVideoBe { from { opacity: 0; transform: translateY( -8px ); } }
@keyframes sfVideoSzoveg { from { opacity: 0; transform: translateX( 10px ); } }
@keyframes sfVideoKor { from { stroke-dashoffset: 63; } }
@keyframes sfVideoPipa { from { stroke-dashoffset: 14; } }
@keyframes sfVideoCsik { from { transform: scaleX( 0 ); } }

@media ( prefers-reduced-motion: reduce ) {
	.sf-video-kupon,
	.sf-video-kupon * {
		animation: none !important;
	}
}

.sf-video-bevezeto {
	margin: 0 0 1.5rem;
	max-width: 65ch;
}

.sf-video-bevezeto p {
	margin: 0;
}

/* ── rács ── */
.sf-video-racs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
}

.sf-video-kartya {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	border: 1px solid var( --sf-video-keret );
	padding: .9rem;
	margin: 0;
}

.sf-video-kepkeret {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.sf-video-kep {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.sf-video-nincskep {
	background: var( --sf-video-keret );
}

.sf-video-szoveg {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	flex: 1;
}

.sf-video-nev {
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.sf-video-leiras {
	margin: 0;
	font-size: .88em;
	line-height: 1.45;
	color: var( --sf-video-halvany );
}

.sf-video-ar {
	margin: .2rem 0 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── értékelés ── */
.sf-video-ertekeles {
	display: flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
}

.sf-video-ertekeles .star-rating {
	float: none;
	margin: 0;
	font-size: .9em;
}

.sf-video-ertekeles-db {
	font-size: .8em;
	color: var( --sf-video-halvany );
}

/* ── kiszerelés-választó ──
   A főoldali gyorsnézet chipjeit használjuk (.sf-swatch / .sf-swatch-pill),
   így a két felület pontosan egyformán néz ki. */
.sf-video-valaszto {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.sf-video-valaszto-cimke {
	font-size: .7em;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --sf-video-halvany );
}

/* ── gombok: a gyorsnézet „Kosárba teszem" gombjának megjelenése ── */
.sf-video-gomb,
.sf-video-mind {
	font-family: "Jost", sans-serif;
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 14px;
	border: 0;
	border-radius: 6px;
	background: var( --sf-ink, #16161a );
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}

.sf-video-gomb:hover:not( [disabled] ),
.sf-video-mind:hover:not( [disabled] ) {
	background: #000;
}

.sf-video-gomb[disabled],
.sf-video-mind[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.sf-video-gomb.sf-video-kesz {
	background: #1f7a44;
}

.sf-video-gomb.sf-video-kesz::before {
	content: "✓ ";
}

.sf-video-elfogyott {
	opacity: .55;
}

.sf-video-uzenet {
	margin: 0;
	font-size: .82em;
	min-height: 1.1em;
	color: var( --sf-video-halvany );
}

.sf-video-uzenet.sf-video-hiba {
	color: #b3341c;
}

/* ── lábjegyzet ── */
.sf-video-labjegyzet {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.sf-video-kosarlink {
	font-weight: 600;
}

/* ── mobil: tömör kártyák, hogy az első képernyőn már termék legyen ──
   Kép balra, név, értékelés és ár mellette; a kiszerelés és a gomb alul, teljes szélességben. */
@media ( max-width: 540px ) {
	.sf-video-kupon {
		display: flex;
		border-radius: 0;
		margin: 0 calc( 50% - 50vw ) 1rem;
		padding-left: max( 24px, calc( 50vw - 50% ) );
	}

	.sf-video-bevezeto {
		font-size: 13.5px;
		color: var( --sf-video-halvany );
		margin-bottom: 1rem;
	}

	.sf-video-racs {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sf-video-kartya {
		display: grid;
		grid-template-columns: 92px 1fr;
		align-items: center;
		gap: 8px 12px;
		padding: 12px;
	}

	.sf-video-kepkeret {
		width: 92px;
		height: 92px;
	}

	.sf-video-szoveg {
		gap: .25rem;
	}

	.sf-video-nev {
		font-size: 15px;
		line-height: 1.25;
	}

	.sf-video-leiras,
	.sf-video-valaszto-cimke {
		display: none;
	}

	.sf-video-ar {
		margin: 0;
		font-size: 16px;
	}

	.sf-video-valaszto,
	.sf-video-gomb,
	.sf-video-uzenet {
		grid-column: 1 / -1;
	}

	.sf-video-valaszto .sf-swatch {
		gap: 6px;
	}

	.sf-video-valaszto .sf-swatch-pill {
		padding: 5px 10px;
		font-size: 12.5px;
	}

	.sf-video-gomb {
		padding: 11px;
	}

	.sf-video-uzenet {
		min-height: 0;
	}

	.sf-video-uzenet:empty {
		display: none;
	}
}

/* ── a videós céloldal fejléce mobilon: kereső nélkül, kisebb cím ──
   A hirdetésből érkező látogató itt a videó termékeit keresi, nem a teljes kínálatot. */
@media ( max-width: 767px ) {
	.sf-video-oldal .sf-header .sf-search {
		display: none;
	}

	.sf-video-oldal .sf-header .sf-header-in {
		padding-top: 8px;
		padding-bottom: 8px;
		min-height: 0;
		height: auto;
	}

	.sf-video-oldal .sf-cutbar {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.sf-video-oldal main [class*="ct-container"] {
		--theme-content-vertical-spacing: 12px;
	}

	.sf-video-oldal .ct-container-full {
		padding-top: 14px;
	}

	/* a Blocksy a címblokk alá változóból tesz 40px-et, ezt csak így lehet felülírni */
	.sf-video-oldal .hero-section {
		margin-bottom: 0 !important;
	}

	.sf-video-oldal .page-header,
	.sf-video-oldal .entry-header {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.sf-video-oldal h1.page-title {
		font-size: 25px;
		line-height: 1.15;
		margin: 14px 0 12px;
	}
}