/* =========================================================
   ÖLELÉSTERÁPIA – DANA  ·  Arculat: „Meleg Ölelés" (V03)
   Zsályazöld · Meleg barack · Mézarany · Krém · Meleg barna
   Montserrat (címsorok) + Lora (folyószöveg)
   ========================================================= */

:root {
	/* Színek */
	--zold:        #7E9B76;   /* elsődleges – zsályazöld */
	--zold-melyebb:#5E7857;
	--zold-halvany:#EAF0E6;
	/* Erősebb zöld jelenlét (2026-07-13): a zöld a gyógyítás színe, a bézs csak papír.
	   Ezek adják a zöld szekciósávokat, a zöld dobozokat és a mély zöld láblécet. */
	--zold-papir:  #F1F5EE;   /* halvány zöld „papír” – szekciósávok, dobozok */
	--zold-sotet:  #3E5138;   /* mély zsálya – lábléc, sötét felületek */
	--vonal-zold:  #D7E1D1;   /* zöldes vonal a bézs helyett */
	--barack:      #F2C6A8;   /* másodlagos – meleg barack */
	--barack-halv: #FBEDE2;
	--arany:       #E0B36A;   /* akcentus – mézarany */
	--arany-melyebb:#C79746;
	--krem:        #FDF8F2;   /* háttér */
	--krem-melyebb:#F6EEE3;
	--barna:       #3A3128;   /* szöveg */
	--barna-halv:  #6E6255;
	--feher:       #FFFFFF;
	--vonal:       #E9DECF;

	/* Tipográfia */
	--cim: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--szoveg: 'Lora', Georgia, 'Times New Roman', serif;

	/* Ritmus */
	--max: 1200px;
	--max-szuk: 760px;
	--sugar: 18px;
	--sugar-nagy: 32px;
	--arnyek: 0 18px 50px -24px rgba(58, 49, 40, 0.35);
	--arnyek-lagy: 0 10px 30px -18px rgba(58, 49, 40, 0.28);
	--atmenet: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	--szakasz: clamp(4rem, 9vw, 8rem);
}

/* --------- Akadálymentesség --------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; position: absolute !important;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--zold); color: #fff;
	padding: 0.8rem 1.4rem; border-radius: 0 0 12px 0;
	font-family: var(--cim); font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--arany); outline-offset: 2px; border-radius: 4px; }

/* --------- Alap --------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0;
	max-width: 100%;
	font-family: var(--szoveg);
	font-size: 1.075rem;
	line-height: 1.75;
	color: var(--barna);
	background-color: var(--krem);
	background-image:
		radial-gradient(1100px 620px at 88% -8%, rgba(126, 155, 118, 0.22), transparent 62%),
		radial-gradient(950px 520px at -12% 12%, rgba(126, 155, 118, 0.20), transparent 58%),
		radial-gradient(800px 500px at 50% 108%, rgba(94, 120, 87, 0.14), transparent 60%),
		radial-gradient(700px 420px at 15% 55%, rgba(224, 179, 106, 0.08), transparent 60%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--zold-melyebb); text-decoration: none; transition: color var(--atmenet); }
a:hover { color: var(--arany-melyebb); }

::selection { background: var(--barack); color: var(--barna); }

/* --------- Tipográfia --------- */
h1, h2, h3, h4, h5 {
	font-family: var(--cim);
	font-weight: 600;
	line-height: 1.15;
	color: var(--barna);
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1.2em; }

.eyebrow {
	font-family: var(--cim);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--arany-melyebb);
	margin: 0 0 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.eyebrow::before {
	content: "";
	width: 28px; height: 2px;
	background: var(--arany);
	display: inline-block;
}

.lead {
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	line-height: 1.6;
	color: var(--barna-halv);
	font-style: italic;
}

/* --------- Elrendezés --------- */
.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.wrap--szuk { width: min(100% - 2.5rem, var(--max-szuk)); margin-inline: auto; }
.section { padding-block: var(--szakasz); position: relative; }
/* Zöld szekciósáv – ez adja az oldal zöld ritmusát a végig-bézs helyett.
   Teljes szélességű, halvány zsálya „papír”, finom zöld vonallal keretezve. */
.section--zold {
	background: var(--zold-papir);
	border-block: 1px solid var(--vonal-zold);
}
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

/* --------- Gombok --------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--cim);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.95rem 1.9rem;
	border-radius: 100px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--atmenet), box-shadow var(--atmenet), background var(--atmenet), color var(--atmenet);
	line-height: 1;
	text-align: center;
}
/* Az elsődleges gomb MARAD ARANY (Lali kérése, 2026-07-13): a zöld felületeken és a
   zöld dobozok között az arany gomb az, ami kiugrik – ez a hívó szín. A zöld a
   szerkezeté (sávok, dobozok, lábléc), az arany a cselekvésé. */
.btn--primary {
	background: var(--arany);
	color: var(--barna);
	box-shadow: 0 12px 26px -12px rgba(199, 151, 70, 0.75);
}
.btn--primary:hover {
	background: var(--arany-melyebb);
	color: var(--feher);
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -14px rgba(199, 151, 70, 0.85);
}
.btn--ghost {
	background: transparent;
	color: var(--zold-melyebb);
	border-color: var(--zold);
}
.btn--ghost:hover {
	background: var(--zold);
	color: var(--feher);
	transform: translateY(-3px);
}
.btn--light {
	background: var(--feher);
	color: var(--barna);
	box-shadow: var(--arnyek-lagy);
}
.btn--light:hover { transform: translateY(-3px); color: var(--zold-melyebb); }

/* =========================================================
   FEJLÉC
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(253, 248, 242, 0.82);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--atmenet), box-shadow var(--atmenet);
}
.site-header.is-scrolled {
	border-bottom-color: var(--vonal-zold);
	box-shadow: 0 6px 24px -20px rgba(58, 49, 40, 0.5);
}
.header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	min-height: 78px;
}
.brand {
	font-family: var(--cim);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--barna);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}
.brand:hover { color: var(--barna); }
.brand__mark {
	width: 54px; height: 54px;
	display: inline-grid; place-items: center;
	color: var(--zold);
	flex: none;
}
.brand__mark img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}
.brand__name { line-height: 1; }
.brand__name small {
	display: block;
	font-family: var(--szoveg);
	font-style: italic;
	font-weight: 400;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arany-melyebb);
	margin-top: 3px;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0; padding: 0;
}
.nav__list a {
	font-family: var(--cim);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--barna);
	padding: 0.5rem 0.9rem;
	border-radius: 100px;
	position: relative;
	transition: color var(--atmenet), background var(--atmenet);
}
.nav__list a:hover,
.nav__list .current-menu-item > a { color: var(--zold-melyebb); background: var(--zold-halvany); }

.header__cta { display: flex; align-items: center; gap: 0.75rem; }

.header__cart {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none;
	color: var(--barna); border-radius: 50%;
	transition: background var(--atmenet), color var(--atmenet);
}
.header__cart:hover { background: var(--zold-halvany); color: var(--zold-melyebb); }
.header__cart-count {
	position: absolute; top: 2px; right: 2px;
	min-width: 1.15em; height: 1.15em; padding: 0 0.25em;
	display: grid; place-items: center;
	background: var(--arany-melyebb); color: var(--feher);
	border-radius: 50%; font-family: var(--cim); font-size: 0.68rem; font-weight: 700;
	line-height: 1;
}

/* A mobilmenübe ágyazott foglalás-gomb csak mobilon látszik (desktopon a header__cta gombja jelenik meg) */
.site-nav > .btn { display: none; }

.nav-toggle {
	display: none;
	flex: none;
	background: none; border: 0;
	width: 46px; height: 46px;
	cursor: pointer;
	color: var(--barna);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: ""; display: block;
	width: 24px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.3s;
	margin-inline: auto;
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after { transform: translateY(5px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: rotate(-45deg) translateY(-2px); }

/* =========================================================
   HERO
   ========================================================= */
/* Hero – erősebb zöld atmoszféra: zöld derengés a szekció mögött, nem csak a body foltjai. */
.hero {
	padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 7vw, 7rem);
	position: relative;
	background:
		radial-gradient(900px 620px at 78% 8%, rgba(126, 155, 118, 0.34), transparent 62%),
		radial-gradient(700px 480px at 4% 88%, rgba(94, 120, 87, 0.22), transparent 60%),
		linear-gradient(180deg, var(--zold-papir) 0%, rgba(241, 245, 238, 0) 78%);
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.hero__title { margin-bottom: 0.5em; }
.hero__title em {
	font-family: var(--szoveg);
	font-style: italic;
	font-weight: 500;
	color: var(--zold-melyebb);
}
.hero__text { max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.6rem; }
.hero__badge {
	display: flex; align-items: center; gap: 0.6rem;
	font-family: var(--cim); font-size: 0.85rem; font-weight: 500;
	color: var(--barna-halv);
}
.hero__badge svg { color: var(--zold); flex: none; }

/* Hero kép – organikus forma */
.hero__media { position: relative; }
.hero__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 52% 48% 46% 54% / 40% 42% 58% 60%;
	box-shadow: var(--arnyek);
	position: relative;
	z-index: 2;
}
.hero__media::before {
	content: "";
	position: absolute;
	inset: -6% -8% -10% -4%;
	background: linear-gradient(140deg, var(--zold) 0%, var(--zold-melyebb) 70%, var(--arany) 100%);
	border-radius: 46% 54% 52% 48% / 46% 40% 60% 54%;
	opacity: 0.62;
	z-index: 1;
	animation: blob 16s ease-in-out infinite;
}
.hero__chip {
	position: absolute;
	z-index: 3;
	background: var(--feher);
	border: 1px solid var(--vonal-zold);
	border-radius: 20px;
	padding: 0.9rem 1.1rem;
	box-shadow: var(--arnyek-lagy);
	display: flex; align-items: center; gap: 0.7rem;
	font-family: var(--cim); font-weight: 600; font-size: 0.85rem;
	max-width: 230px;
}
.hero__chip small { display: block; font-weight: 400; font-family: var(--szoveg); font-style: italic; color: var(--barna-halv); font-size: 0.8rem; }
.hero__chip--tl { top: 8%; left: -4%; }
.hero__chip--br { bottom: 8%; right: -2%; }
.hero__chip-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--zold-halvany); color: var(--zold-melyebb); display: grid; place-items: center; flex: none; }

@keyframes blob {
	0%, 100% { border-radius: 46% 54% 52% 48% / 46% 40% 60% 54%; }
	33% { border-radius: 58% 42% 40% 60% / 52% 56% 44% 48%; }
	66% { border-radius: 42% 58% 60% 40% / 42% 48% 52% 58%; }
}

/* =========================================================
   ÁLTALÁNOS SZEKCIÓ-ELEMEK
   ========================================================= */
.section-head { max-width: 620px; margin-bottom: 3.2rem; }
.section-head.center { margin-inline: auto; }

/* Hullámos / ív elválasztó felület */
/* A halvány sáv is zöld lett (volt: krém) – minden aloldalon megjelenik. */
.soft-band {
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar-nagy);
}
/* Zöld sáv – ugyanaz a felület, mint a hírlevél CTA-blokké („Bátorítás minden napra”).
   A zöldet szélesebb körben visszük végig az oldalon (2026-07-13), hogy a férfi
   látogatóknak is megszólító legyen a felület. A benne lévő fehér lépés-kártyák
   kontrasztja jó marad, csak a sávra írt szövegeket kell krémre váltani. */
.soft-band--zold {
	background: linear-gradient(135deg, var(--zold) 0%, var(--zold-melyebb) 100%);
	color: var(--krem);
}
.soft-band--zold h2,
.soft-band--zold h3,
.soft-band--zold strong { color: var(--krem); }
.soft-band--zold p { color: rgba(253,248,242,0.88); }
.soft-band--zold .eyebrow { color: var(--arany); }
.soft-band--zold .eyebrow::before { background: var(--arany); }
.soft-band--zold a:not(.btn) { color: var(--feher); text-decoration: underline; text-decoration-color: var(--arany); text-underline-offset: 3px; }
/* A fehér kártyákon belül marad a sötét szöveg */
.soft-band--zold .step h3 { color: var(--barna); }
.soft-band--zold .step p { color: var(--barna-halv); }
.soft-band--zold .step__num { background: var(--arany); color: var(--barna); }
/* A sávon belüli „Írj nekem” gomb világos hátéren jól olvasható maradjon */
.soft-band--zold .btn--ghost { border-color: var(--krem); color: var(--krem); }
.soft-band--zold .btn--ghost:hover { background: var(--krem); color: var(--barna); }

/* „Kinek való" – felsorolás kártyák */
.feel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2rem;
	margin-top: 2.5rem;
}
/* „Kinek való” csempék – zöld dobozok, zöld bal peremmel (négyszögletű, zöld). */
.feel {
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-left: 4px solid var(--zold);
	border-radius: var(--sugar);
	padding: 1.6rem 1.5rem;
	transition: transform var(--atmenet), box-shadow var(--atmenet), background var(--atmenet);
}
.feel:hover { background: var(--zold-halvany); }
.feel:hover { transform: translateY(-5px); box-shadow: var(--arnyek-lagy); }
/* A .feel fehér csempe mindig a saját (sötét) szövegszínét használja, még akkor is,
   ha egy .cta-band (alapból sötét hátterű, világos szövegű) sávba van ágyazva –
   ezért nagyobb specifikusságú szelektor kell, mint a ".cta-band p". */
.feel .feel__q { font-family: var(--cim); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--barna); }
.feel .feel__a { margin: 0; font-size: 0.98rem; color: var(--barna-halv); }

/* =========================================================
   SZOLGÁLTATÁSOK – kártyák
   ========================================================= */
.services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.6rem;
}
/* Négy kártya (főoldal): 2×2 elrendezés, hogy ne préselődjenek egy sorba. */
@media (min-width: 900px) {
	.services--negy { grid-template-columns: repeat(2, 1fr); }
}

/* Szolgáltatás-csoportok (Szolgáltatások oldal: ölelésterápia / coaching / masszázs) */
/* A ragadós fejléc ne takarja el a szekció címét, ha horgonyra ugrunk
   (a főoldali „Hosszak és árak” linkek ide, #olelesterapia / #coaching-ra visznek). */
.svc-group { scroll-margin-top: 110px; }
.svc-group--kov { margin-top: clamp(2.6rem, 5vw, 4rem); }
.svc-group__head { margin-bottom: 1.6rem; }
.svc-group__head h2 { margin-bottom: 0.4rem; }
.svc-group__head p {
	color: var(--barna-halv);
	max-width: 68ch;
	margin: 0;
}
.svc {
	background: var(--feher);
	border-radius: var(--sugar-nagy);
	padding: 2.2rem 2rem;
	border: 1px solid var(--vonal-zold);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.svc::after {
	content: "";
	position: absolute;
	top: -40px; right: -40px;
	width: 130px; height: 130px;
	border-radius: 50%;
	background: var(--zold-halvany);
	opacity: 0.7;
	transition: transform var(--atmenet);
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--arnyek); }
.svc:hover::after { transform: scale(1.3); }
.svc__ico {
	width: 58px; height: 58px;
	border-radius: 18px;
	/* Zöld dominancia (2026-07-13): a zsályazöld férfias-semlegesebb, mint a barack. */
	background: linear-gradient(135deg, var(--zold-halvany), var(--zold));
	color: var(--feher);
	display: grid; place-items: center;
	position: relative; z-index: 1;
	margin-bottom: 1.4rem;
}
.svc__title { position: relative; z-index: 1; margin-bottom: 0.5rem; }
.svc__meta {
	position: relative; z-index: 1;
	font-family: var(--cim); font-size: 0.82rem; font-weight: 500;
	color: var(--barna-halv);
	display: flex; align-items: center; gap: 0.5rem;
	margin-bottom: 1rem;
}
.svc__desc { position: relative; z-index: 1; font-size: 0.99rem; color: var(--barna-halv); flex: 1; }
.svc__foot {
	position: relative; z-index: 1;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem; padding-top: 1.2rem;
	border-top: 1px solid var(--vonal);
}
.svc__price { font-family: var(--cim); font-weight: 700; font-size: 1.25rem; color: var(--barna); }
.svc__price small { font-weight: 400; font-size: 0.8rem; color: var(--barna-halv); }
.svc__price.is-tbd { font-size: 1rem; color: var(--arany-melyebb); font-weight: 600; }
.svc__link { font-family: var(--cim); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.svc__link svg { transition: transform var(--atmenet); }
.svc:hover .svc__link svg { transform: translateX(4px); }

/* =========================================================
   FOLYAMAT (2 lépés)
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 2.5rem; counter-reset: step; }
.step { position: relative; padding: 2rem 1.8rem; background: var(--feher); border-radius: var(--sugar); border: 1px solid var(--vonal-zold); }
.step__num {
	counter-increment: step;
	font-family: var(--cim); font-weight: 700; font-size: 1.1rem;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--zold); color: var(--feher);
	display: grid; place-items: center;
	margin-bottom: 1.1rem;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.2rem; }
.step p { margin: 0; color: var(--barna-halv); font-size: 0.98rem; }

/* =========================================================
   RÓLAM / SPLIT
   ========================================================= */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sugar-nagy);
	box-shadow: var(--arnyek);
}
.split__media--round img { border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; }
.split__frame {
	position: absolute; inset: 14px -14px -14px 14px;
	border: 2px solid var(--arany);
	border-radius: var(--sugar-nagy);
	z-index: -1;
	opacity: 0.6;
}
.quote-badge {
	position: absolute; bottom: 6%; left: -18px;
	background: var(--zold); color: var(--feher);
	font-family: var(--szoveg); font-style: italic;
	padding: 1rem 1.3rem; border-radius: 16px;
	max-width: 250px; box-shadow: var(--arnyek-lagy);
	font-size: 0.95rem; line-height: 1.5;
}

.prose p { margin-bottom: 1.2em; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 0; list-style: none; margin: 1.4em 0; display: grid; gap: 0.7rem; }
.prose ul li { position: relative; padding-left: 2rem; color: var(--barna-halv); }
.prose ul li::before {
	content: "";
	position: absolute; left: 0; top: 0.55em;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--zold);
	box-shadow: 0 0 0 4px var(--zold-halvany);
}

/* Aláhúzott kiemelés */
.mark { background: linear-gradient(180deg, transparent 62%, var(--barack) 62%); padding: 0 0.1em; }

/* Cikk végi CTA-gombok (blogbejegyzések) */
.cikk-cta {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 0.8rem;
	margin: 2.5rem 0 0;
	padding: 1.8rem;
	background: var(--krem-melyebb);
	border-radius: var(--sugar);
}
.cikk-cta .btn { width: 100%; justify-content: center; text-align: center; }
@media (min-width: 620px) {
	.cikk-cta .btn { width: auto; }
}

/* Végzettség / oklevél blokk (Rólam) */
.cert { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cert__media { margin: 0; }
.cert__media img {
	width: 100%; height: auto; display: block;
	border-radius: var(--sugar);
	box-shadow: var(--arnyek);
}
.cert__body h2 { margin-top: 0.3rem; }
.cert__body p { color: var(--barna-halv); }
@media (max-width: 760px) {
	.cert { grid-template-columns: 1fr; }
	.cert__media { max-width: 300px; margin-inline: auto; }
	.reviews { grid-template-columns: 1fr; }
}

/* Számozott szabályzat-lista (Tréning szabályai) */
.rules { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: szabaly; display: grid; gap: 1.6rem; }
.rules > li {
	counter-increment: szabaly;
	position: relative;
	padding-left: 3.6rem;
}
.rules > li::before {
	content: counter(szabaly);
	position: absolute; left: 0; top: 0.1em;
	width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--zold-halvany);
	color: var(--zold-melyebb);
	font-family: var(--cim);
	font-weight: 600;
	font-size: 0.95rem;
}
.rules > li h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.rules > li p { margin-bottom: 0.7em; color: var(--barna-halv); }
.rules > li p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
	.rules > li { padding-left: 3rem; }
	.rules > li::before { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
}

/* =========================================================
   HANGANYAG-KÁRTYA (Hanganyagok oldal)
   ========================================================= */
.audio-card {
	display: grid; grid-template-columns: 260px 1fr; gap: 0;
	background: var(--feher); border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar-nagy); overflow: hidden;
	box-shadow: var(--arnyek-lagy);
}
.audio-card + .audio-card { margin-top: 1.8rem; }
.audio-card__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.audio-card__body { padding: clamp(1.6rem, 3vw, 2.4rem); }
.audio-card__meta { font-family: var(--cim); font-size: 0.82rem; color: var(--barna-halv); margin: 0 0 0.3rem; }
.audio-card h3 { margin: 0 0 0.6rem; }
.audio-card audio { width: 100%; margin-top: 1rem; accent-color: var(--zold); border-radius: 100px; }
/* Poszteres hanganyagok: a borítón rajta van a cím és a Dana-jel, ezért NEM
   vághatjuk körbe (object-fit: cover) – a saját, álló arányában marad. */
.audio-card--poszter .audio-card__img {
	height: auto; min-height: 0; align-self: start;
	aspect-ratio: 1 / 1.414; background: var(--krem);
}
@media (max-width: 640px) {
	.audio-card { grid-template-columns: 1fr; }
	.audio-card__img { min-height: 200px; }
	.audio-card--poszter .audio-card__img { min-height: 0; }
}

/* =========================================================
   PIPÁS LISTA (Információ oldal – "Miben segít", "Hatások")
   ========================================================= */
.check-grid {
	list-style: none; padding: 0; margin: 2rem 0 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem;
}
.check-grid > li { display: flex; gap: 0.8rem; align-items: flex-start; }
.check-grid > li svg { flex: none; margin-top: 0.2em; color: var(--zold); }
.check-grid > li strong { font-family: var(--cim); color: var(--barna); }
@media (max-width: 700px) {
	.check-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   BLOG
   ========================================================= */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; }
.card {
	background: var(--feher);
	border-radius: var(--sugar-nagy);
	overflow: hidden;
	border: 1px solid var(--vonal-zold);
	display: flex; flex-direction: column;
	transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--arnyek); }
.card__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--zold-halvany); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--atmenet); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-family: var(--cim); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zold-melyebb); margin-bottom: 0.7rem; }
.card__title { font-size: 1.25rem; margin-bottom: 0.6rem; }
.card__title a { color: var(--barna); }
.card__title a:hover { color: var(--zold-melyebb); }
.card__excerpt { color: var(--barna-halv); font-size: 0.97rem; flex: 1; margin-bottom: 1.2rem; }
/* Hangváltozat-jelölés a kivonat alatt (csak ahol van felvétel a cikkben) */
.card__hang {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: 14px;
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.1rem;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--barna-halv);
}
.card__hang strong { color: var(--barna); font-weight: 600; }
.card__hang-ikon { flex: none; font-size: 1.05rem; line-height: 1.25; }

.card__more { font-family: var(--cim); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.card__more svg { transition: transform var(--atmenet); }
.card:hover .card__more svg { transform: translateX(4px); }

/* =========================================================
   VÉLEMÉNYEK
   ========================================================= */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; align-items: start; }
.review {
	background: var(--feher);
	border-radius: var(--sugar-nagy);
	padding: 2rem 1.9rem;
	border: 1px solid var(--vonal-zold);
	border-top: 4px solid var(--zold);
	position: relative;
}
.review__stars { color: var(--arany); letter-spacing: 2px; margin-bottom: 0.9rem; font-size: 1rem; }
.review__text { font-family: var(--szoveg); font-style: italic; font-size: 1.05rem; color: var(--barna); margin-bottom: 1.3rem; }
.review__who { font-family: var(--cim); font-weight: 600; font-size: 0.9rem; }
.review__who small { display: block; font-weight: 400; font-family: var(--szoveg); font-style: normal; color: var(--barna-halv); }
.review__mark { position: absolute; top: 1.2rem; right: 1.5rem; font-family: var(--szoveg); font-size: 3.5rem; line-height: 1; color: var(--zold-halvany); }

/* =========================================================
   HÍRLEVÉL / CTA sáv
   ========================================================= */
.cta-band {
	background: linear-gradient(135deg, var(--zold) 0%, var(--zold-melyebb) 100%);
	color: var(--krem);
	border-radius: var(--sugar-nagy);
	padding: clamp(2.5rem, 5vw, 4rem);
	position: relative;
	overflow: hidden;
}
.cta-band::before, .cta-band::after {
	content: ""; position: absolute; border-radius: 50%;
	background: rgba(255,255,255,0.08);
}
.cta-band::before { width: 320px; height: 320px; top: -120px; right: -80px; }
.cta-band::after { width: 200px; height: 200px; bottom: -100px; left: 10%; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--feher); }
.cta-band p { color: rgba(253, 248, 242, 0.9); }
.cta-band .eyebrow { color: var(--arany); }
.cta-band .eyebrow::before { background: var(--arany); }

.newsletter-form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; max-width: 520px; align-items: flex-start; }
.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
	flex: 1; min-width: 220px;
	padding: 0.95rem 1.3rem;
	border-radius: 100px; border: 0;
	font-family: var(--szoveg); font-size: 1rem;
	background: var(--krem); color: var(--barna);
}
.newsletter-form input::placeholder { color: var(--barna-halv); }
.newsletter-note { font-size: 0.82rem; color: rgba(253,248,242,0.75); margin-top: 0.9rem; }

.gdpr-check {
	display: flex; align-items: flex-start; gap: 0.6rem;
	flex-basis: 100%; width: 100%;
	font-size: 0.85rem; line-height: 1.4;
	color: var(--barna-halv);
}
.gdpr-check input[type="checkbox"] { margin-top: 0.25em; flex: none; width: 1.1em; height: 1.1em; accent-color: var(--zold); }
.gdpr-check a { color: var(--zold-melyebb); text-decoration: underline; }
/* Sötét hátterű .cta-band-en (pl. főoldali hírlevél-sáv) világos szöveg/link kell. */
.cta-band .gdpr-check { color: rgba(253,248,242,0.85); }
.cta-band .gdpr-check a { color: var(--feher); }

/* =========================================================
   OLDAL-FEJLÉC (belső oldalak)
   ========================================================= */
/* Aloldali fejléc – erősebb zöld sáv, hogy minden aloldal határozottan zölddel nyisson. */
.page-hero {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.8rem, 4vw, 3rem);
	text-align: center;
	background:
		radial-gradient(760px 380px at 50% 0%, rgba(126, 155, 118, 0.38), transparent 68%),
		linear-gradient(180deg, #DFE9D9 0%, var(--zold-halvany) 45%, rgba(241, 245, 238, 0) 100%);
	border-bottom: 1px solid var(--vonal-zold);
}
.page-hero .eyebrow { justify-content: center; }
.page-hero p { max-width: 60ch; margin-inline: auto; color: var(--barna-halv); }
.breadcrumbs { font-family: var(--cim); font-size: 0.8rem; color: var(--barna-halv); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--barna-halv); }

/* Egyedi bejegyzés */
.single-hero { text-align: center; padding-block: clamp(2rem, 5vw, 4rem) 1rem; }
.single-hero .post-meta { font-family: var(--cim); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--arany-melyebb); margin-bottom: 1rem; }
.single-cover { width: min(100% - 2.5rem, 1000px); margin: 2rem auto 0; }
.single-cover img { width: 100%; border-radius: var(--sugar-nagy); box-shadow: var(--arnyek); aspect-ratio: 16/8; object-fit: cover; }
.entry-content { font-size: 1.12rem; line-height: 1.85; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content img { border-radius: var(--sugar); margin: 1.6em 0; box-shadow: var(--arnyek-lagy); }
.entry-content blockquote {
	margin: 1.8em 0; padding: 1.2em 1.6em;
	border-left: 4px solid var(--arany);
	background: var(--krem-melyebb);
	border-radius: 0 var(--sugar) var(--sugar) 0;
	font-style: italic;
}
.entry-content a { text-decoration: underline; text-decoration-color: var(--zold); text-underline-offset: 3px; }

.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; }
.post-nav a { font-family: var(--cim); font-weight: 600; font-size: 0.9rem; }

/* Pagináció */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers {
	font-family: var(--cim); font-weight: 600; font-size: 0.95rem;
	min-width: 44px; height: 44px; padding: 0 0.8rem;
	display: inline-grid; place-items: center;
	border-radius: 100px; border: 1px solid var(--vonal);
	color: var(--barna); background: var(--feher);
}
.pagination .page-numbers.current { background: var(--zold); color: var(--feher); border-color: var(--zold); }
.pagination a.page-numbers:hover { border-color: var(--zold); color: var(--zold-melyebb); }

/* =========================================================
   LÁBLÉC
   ========================================================= */
/* Lábléc: mély zsályazöld (volt: barna) – a legnagyobb egybefüggő felület, ez húzza
   a leginkább zöld irányba az összképet. */
.site-footer {
	background: linear-gradient(160deg, var(--zold-melyebb) 0%, var(--zold-sotet) 70%);
	color: var(--krem-melyebb);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	margin-top: var(--szakasz);
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__brand .brand { color: var(--krem); }
.footer__brand .brand__mark { color: var(--barack); }
.footer__brand p { color: rgba(253,248,242,0.7); font-size: 0.98rem; max-width: 34ch; margin-top: 1rem; }
.footer__col h4 { color: var(--feher); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__col a { color: rgba(253,248,242,0.78); font-size: 0.98rem; }
.footer__col a:hover { color: var(--barack); }
.footer__social { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.footer__social a {
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255,255,255,0.1); color: var(--krem);
	display: grid; place-items: center;
	transition: background var(--atmenet), transform var(--atmenet);
}
.footer__social a:hover { background: var(--barack); color: var(--barna); transform: translateY(-3px); }
/* Német nyelvű érdeklődés jelzése a láblécben */
.footer__deutsch {
	display: flex; align-items: center; justify-content: center;
	gap: 0.6rem; flex-wrap: wrap;
	margin-top: 2.4rem; padding-top: 1.6rem;
	border-top: 1px solid rgba(253,248,242,0.12);
	font-family: var(--cim); font-size: 0.9rem;
	color: rgba(253,248,242,0.75); text-align: center;
}
.footer__zaszlo { display: inline-flex; line-height: 0; border-radius: 2px; overflow: hidden; }

.footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; flex-wrap: wrap;
	padding-top: 2rem;
	font-size: 0.85rem; color: rgba(253,248,242,0.6);
	font-family: var(--cim);
}
.footer__bottom a { color: rgba(253,248,242,0.7); }

.footer__partners {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 0.7rem 1rem; padding-top: 1.5rem;
}
.footer__partners-cim {
	font-family: var(--cim); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: rgba(253,248,242,0.55); margin: 0;
}
.partner-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.partner-chip {
	display: inline-flex; align-items: center; gap: 0.6rem;
	background: var(--krem); border-radius: 100px;
	padding: 0.4rem 0.9rem 0.4rem 0.6rem;
	transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.partner-chip:hover { transform: translateY(-2px); box-shadow: var(--arnyek-lagy); }
.partner-chip img { height: 18px; width: auto; flex: none; }
.partner-chip span { font-size: 0.78rem; color: var(--barna-halv); white-space: nowrap; }

/* =========================================================
   POP-UP (hírlevél)
   ========================================================= */
.popup-overlay {
	position: fixed; inset: 0; z-index: 999;
	background: rgba(58, 49, 40, 0.5);
	backdrop-filter: blur(4px);
	display: grid; place-items: center;
	padding: 1.5rem;
	opacity: 0; visibility: hidden;
	transition: opacity 0.4s, visibility 0.4s;
}
.popup-overlay.is-open { opacity: 1; visibility: visible; }
.popup {
	background: var(--krem);
	border-radius: var(--sugar-nagy);
	max-width: 460px; width: 100%;
	max-height: min(640px, 90vh);
	overflow-y: auto;
	padding: 2.6rem 2.4rem;
	position: relative;
	box-shadow: 0 40px 80px -30px rgba(58,49,40,0.6);
	transform: translateY(20px) scale(0.98);
	transition: transform 0.4s var(--atmenet);
	text-align: center;
}
.popup-overlay.is-open .popup { transform: translateY(0) scale(1); }
.popup__gift { width: 64px; height: 64px; border-radius: 50%; background: var(--zold-halvany); color: var(--zold-melyebb); display: grid; place-items: center; margin: 0 auto 1.2rem; }
.popup h3 { font-size: 1.5rem; }
.popup p { color: var(--barna-halv); font-size: 0.98rem; }
.popup__close {
	position: absolute; top: 1rem; right: 1rem;
	width: 38px; height: 38px; border-radius: 50%;
	border: 0; background: var(--krem-melyebb); color: var(--barna);
	cursor: pointer; font-size: 1.2rem; line-height: 1;
	display: grid; place-items: center;
	transition: background var(--atmenet);
}
.popup__close:hover { background: var(--barack); }
.popup .newsletter-form { flex-direction: column; margin-inline: auto; }
.popup .newsletter-form input[type="email"],
.popup .newsletter-form input[type="text"] { background: var(--feher); border: 1px solid var(--vonal); width: 100%; }
.popup .btn { width: 100%; justify-content: center; }
.popup__mini { font-size: 0.78rem; color: var(--barna-halv); margin-top: 0.8rem; }

/* =========================================================
   BELÉPŐ ANIMÁCIÓ (staggered reveal)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONZÍV
   ========================================================= */
@media (max-width: 980px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__media { max-width: 460px; margin-inline: auto; order: -1; }
	.split, .split--flip .split__media { grid-template-columns: 1fr; }
	.split--flip .split__media { order: 0; }
	.split__media { max-width: 500px; margin-inline: auto; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.header__inner { gap: 0.6rem; }
	.nav { display: none; }
	.header__cta { display: none !important; }
	.nav-toggle { display: block !important; margin-left: auto; }
	.site-nav {
		position: fixed; inset: var(--header-h, 78px) 0 auto 0;
		background: var(--krem);
		border-bottom: 1px solid var(--vonal);
		padding: 1rem 1.25rem 1.5rem;
		display: none;
		box-shadow: var(--arnyek);
		max-height: calc(100vh - var(--header-h, 78px)); overflow-y: auto;
	}
	body.nav-open .site-nav { display: block; }
	body.nav-open .nav { display: block; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
	.nav__list a { padding: 0.85rem 1rem; font-size: 1.05rem; }
	.site-nav .btn { display: inline-flex; width: 100%; justify-content: center; margin-top: 0.8rem; }
	body.nav-open { overflow: hidden; }
	.footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.footer__bottom { flex-direction: column; text-align: center; }
	.hero__chip--tl { left: 0; }
	.hero__chip--br { right: 0; }
	.footer__partners { flex-direction: column; align-items: flex-start; }
	.partner-chips { flex-direction: column; align-items: stretch; width: 100%; }
	.partner-chip {
		flex-direction: column;
		align-items: flex-start;
		border-radius: var(--sugar);
		padding: 0.9rem 1rem;
		gap: 0.5rem;
	}
	.partner-chip span { white-space: normal; }
}

@media (max-width: 480px) {
	body { font-size: 1.02rem; }
	.hero__chip { display: none; }
	.svc, .review { padding: 1.7rem 1.5rem; }
	.hero { padding-block: 2rem 2.5rem; }
	.hero__media { max-width: 240px; }
	.hero__media img { aspect-ratio: 1 / 1.05; }
	.product-single .split__media { max-width: 240px; }
	.product-single .split__media img { aspect-ratio: 1 / 1.05; }
	.popup-overlay { padding: 1rem; }
	.popup { padding: 2rem 1.5rem; max-height: 85vh; }
	.popup__gift { width: 52px; height: 52px; margin-bottom: 0.9rem; }
	.popup h3 { font-size: 1.3rem; }
}

@media (max-width: 400px) {
	.brand__name { font-size: 0.92em; }
}

/* =========================================================
   WOOCOMMERCE – termékoldal (klasszikus) + Kosár/Pénztár
   (WooCommerce Blocks, React-alapú – .wc-block-* osztályok)
   A V03 arculathoz igazítva. Nem lett vizuálisan böngészőben
   ellenőrizve (nincs böngésző-elérés) – éles QA szükséges!
   ========================================================= */
.woocommerce, .wc-block-cart, .wc-block-checkout, .wc-block-components-totals-wrapper {
	font-family: var(--szoveg);
	color: var(--barna);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4,
.wc-block-components-totals-item__label,
.wc-block-cart-item__product-name,
.wc-block-components-product-name,
.wc-block-components-panel__button,
.wc-block-checkout__title {
	font-family: var(--cim);
}

/* Gombok (kosárba, pénztár, rendelés leadása) */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.wp-block-button__link {
	background: var(--zold) !important;
	color: var(--feher) !important;
	border-radius: 100px !important;
	border: none !important;
	font-family: var(--cim) !important;
	font-weight: 600 !important;
	text-transform: none !important;
	box-shadow: none !important;
	padding: 0.85rem 1.6rem !important;
	transition: background var(--atmenet), transform var(--atmenet);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover {
	background: var(--zold-melyebb) !important;
	transform: translateY(-2px);
}
.single_add_to_cart_button,
.wc-block-cart__submit-container .wc-block-components-button {
	background: var(--arany) !important;
	color: var(--barna) !important;
}
.single_add_to_cart_button:hover {
	background: var(--arany-melyebb) !important;
}
/* "Tovább a pénztárhoz" – ne feszüljön teljes szélességre, álljon jobbra, mérsékelt méretben */
.wc-block-cart__submit-container {
	display: flex; justify-content: flex-end;
	width: auto !important; margin-top: 1.2rem;
}
.wc-block-cart__submit-container .wc-block-components-button {
	width: auto !important;
	max-width: 100%;
	padding: 0.8rem 2rem !important;
	font-size: 0.95rem !important;
}
@media (max-width: 600px) {
	.wc-block-cart__submit-container { justify-content: stretch; }
	.wc-block-cart__submit-container .wc-block-components-button { width: 100% !important; }
}

/* Árak */
.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
	color: var(--barna);
	font-weight: 600;
}
.price ins { color: var(--zold-melyebb); }

/* Form mezők – klasszikus WC (nincs lebegő címke, szabadon paddelhető) */
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.quantity input.qty {
	border-radius: 14px !important;
	border: 1px solid var(--vonal) !important;
	background: var(--krem) !important;
	font-family: var(--szoveg) !important;
	padding: 0.7rem 1rem !important;
	color: var(--barna) !important;
}
.quantity input.qty { text-align: center; }

/* Form mezők – WC Blocks pénztár (lebegő címke a mezőn belül).
   FONTOS: a paddingot NEM írjuk felül közvetlenül az <input>-on, mert az
   a lebegő címke pozicionálását törné (szöveg a címkére csúszna) –
   csak a külső konténer keretét/hátterét/sarokgörbületét stílusozzuk. */
.wc-block-components-text-input,
.wc-block-components-textarea {
	border-radius: 14px !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea textarea,
.wc-block-components-select select {
	font-family: var(--szoveg) !important;
	color: var(--barna) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
	font-family: var(--szoveg) !important;
}

/* Kosár/Pénztár konténerek */
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-sidebar,
.wc-block-components-panel {
	background: var(--feher);
	border-radius: var(--sugar);
	border: 1px solid var(--vonal);
	padding: 1.5rem;
}
.wc-block-cart-item, .cart_item { border-color: var(--vonal); }

/* Értesítések (siker/hiba) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--sugar) !important;
	font-family: var(--szoveg) !important;
	border-top-color: var(--zold) !important;
}
.woocommerce-message::before { color: var(--zold-melyebb) !important; }

/* Klasszikus termékoldal galéria/meta finomítás */
.product_meta, .product_meta a { color: var(--barna-halv); }
.woocommerce-product-gallery img { border-radius: var(--sugar-nagy); }

/* =========================================================
   EGYEDI TERMÉKOLDAL (single-product.php)
   ========================================================= */
.product-single__price {
	font-family: var(--cim); font-size: 1.7rem; font-weight: 700;
	color: var(--arany-melyebb); margin: 0.3rem 0 1.2rem;
}
.product-single__desc { margin-bottom: 1.6rem; }

/* Hossz-váltó a termékoldalon (60/90 perc, coaching 60 / online 30).
   Külön termékek, ezért egymásról csak így érhetők el. */
.valtozat { margin-bottom: 1.6rem; }
.valtozat__cim {
	font-family: var(--cim); font-size: 0.86rem; font-weight: 600;
	color: var(--barna-halv); margin: 0 0 0.6rem;
}
.valtozat__lista { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.valtozat__elem {
	display: flex; flex-direction: column; gap: 0.15rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--vonal-zold); border-radius: var(--sugar);
	background: var(--feher); color: var(--barna);
	text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.valtozat__elem strong { font-family: var(--cim); font-size: 0.94rem; font-weight: 600; }
.valtozat__ar { font-size: 0.9rem; color: var(--barna-halv); }
.valtozat__ar .amount { font-weight: 600; color: var(--arany-melyebb); }
a.valtozat__elem:hover {
	border-color: var(--zold); background: var(--zold-halvany);
	transform: translateY(-1px);
}
.valtozat__elem.is-aktiv {
	border-color: var(--zold); border-width: 2px;
	background: var(--zold-halvany); cursor: default;
}
/* Fizetési mód választó a termékoldalon (variálható termék: egy összeg / 2 részlet).
   Kártyás rádiógombok, mert a fizetési konstrukció maga a döntés – legördülőben
   a második opció magyarázata nem férne el. */
.fizetes { margin-bottom: 1.3rem; display: grid; gap: 0.7rem; }
.fizetes__cim {
	font-family: var(--cim); font-size: 0.86rem; font-weight: 600;
	color: var(--barna-halv); margin: 0;
}
.fizetes__opcio {
	display: grid; grid-template-columns: auto 1fr; align-items: baseline;
	column-gap: 0.55rem; cursor: pointer;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--vonal-zold); border-radius: var(--sugar);
	background: var(--feher);
	transition: border-color 0.2s, background 0.2s;
}
.fizetes__opcio:hover { border-color: var(--zold); background: var(--zold-halvany); }
.fizetes__opcio.is-aktiv {
	border-color: var(--zold); border-width: 2px; padding: calc(0.9rem - 1px) calc(1.1rem - 1px);
	background: var(--zold-halvany);
}
.fizetes__opcio input { accent-color: var(--zold-melyebb); }
.fizetes__fej {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.fizetes__fej strong { font-family: var(--cim); font-size: 1rem; font-weight: 600; }
.fizetes__ar { margin-left: auto; font-weight: 700; color: var(--arany-melyebb); }
.fizetes__leiras {
	grid-column: 2; margin-top: 0.4rem;
	font-size: 0.9rem; line-height: 1.55; color: var(--barna-halv);
}

.product-single__form { margin-bottom: 1.4rem; }
.product-single__buy {
	width: 100%; justify-content: center;
	font-size: 1.05rem; padding: 1rem 1.8rem;
}
.product-single__kerdes {
	margin: -0.6rem 0 1.4rem; text-align: center;
	font-size: 0.94rem; color: var(--barna-halv);
}
.product-single__kerdes a { color: var(--zold-melyebb); font-weight: 600; }

.product-single__trust {
	display: flex; align-items: flex-start; gap: 0.9rem;
	background: var(--zold-halvany);
	border: 1px solid var(--zold);
	border-radius: var(--sugar);
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.4rem;
}
.product-single__trust-ico {
	flex: none; width: 38px; height: 38px;
	display: grid; place-items: center;
	background: var(--feher); color: var(--zold-melyebb);
	border-radius: 50%;
}
.product-single__trust span:last-child {
	font-size: 0.92rem; line-height: 1.5; color: var(--zold-melyebb);
}
.product-single__trust strong { font-family: var(--cim); color: var(--barna); }
.product-single__back {
	display: inline-block; font-family: var(--cim); font-size: 0.9rem;
	color: var(--barna-halv);
}
.product-single__back:hover { color: var(--zold-melyebb); }

.product-single__video {
	max-width: 100%; max-height: 70vh; border-radius: 20px; box-shadow: 0 20px 50px -20px rgba(58,49,40,0.35);
	background: var(--barna); display: block; margin: 0 auto;
}

/* =========================================================
   BELELAPOZÓ (munkafüzet-előnézet a termékoldalon) – 2026-07-30
   Öt oldalkép egymáson, csak az aktív látszik. A színpad fix
   képarányt tart (900:1273), így lapozáskor nem ugrik a szekció.
   ========================================================= */
.lapozo { margin-top: 0.5rem; }

.lapozo__szinpad {
	position: relative;
	aspect-ratio: 900 / 1273;
	max-width: 520px;
	margin: 0 auto;
	border-radius: 14px;
	background: var(--krem-melyebb);
	box-shadow: 0 22px 55px -26px rgba(58, 49, 40, 0.55);
	overflow: hidden;
}
.lapozo__lap {
	position: absolute; inset: 0;
	margin: 0;
	opacity: 0; visibility: hidden;
	transition: opacity var(--atmenet);
}
.lapozo__lap.is-aktiv { opacity: 1; visibility: visible; }
.lapozo__lap img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}

.lapozo__nyil {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid var(--vonal);
	background: rgba(255, 255, 255, 0.92);
	color: var(--barna); cursor: pointer;
	box-shadow: var(--arnyek-lagy);
	transition: background var(--atmenet), color var(--atmenet);
}
.lapozo__nyil:hover { background: var(--zold); color: var(--feher); border-color: var(--zold); }
.lapozo__nyil--elozo { left: 0.6rem; }
.lapozo__nyil--kovetkezo { right: 0.6rem; }
.lapozo__nyil[disabled] { opacity: 0.35; cursor: default; }
.lapozo__nyil[disabled]:hover { background: rgba(255, 255, 255, 0.92); color: var(--barna); border-color: var(--vonal); }

.lapozo__allas {
	margin: 1rem 0 0.6rem;
	text-align: center;
	font-family: var(--cim); font-size: 0.9rem;
	color: var(--barna-halv);
}
.lapozo__pottyok { display: flex; justify-content: center; gap: 0.5rem; }
.lapozo__potty {
	width: 10px; height: 10px; padding: 0; border-radius: 50%;
	border: 1px solid var(--vonal-zold); background: var(--feher);
	cursor: pointer; transition: background var(--atmenet), transform var(--atmenet);
}
.lapozo__potty.is-aktiv { background: var(--zold); border-color: var(--zold); transform: scale(1.25); }

.lapozo__zaras { margin-top: 2rem; }
.lapozo__zaras p { color: var(--barna-halv); font-size: 0.98rem; margin-bottom: 1.1rem; }

/* Nagyítás – teljes képernyős nézet, ugyanazokkal a lapokkal */
.lapozo-nagyito {
	position: fixed; inset: 0; z-index: 200;
	display: none; place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(38, 32, 26, 0.9);
	backdrop-filter: blur(3px);
}
.lapozo-nagyito.is-open { display: grid; }
.lapozo-nagyito img {
	max-width: min(100%, 780px); max-height: 92vh;
	border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
	background: var(--feher);
}
.lapozo-nagyito__zar {
	position: absolute; top: 1rem; right: 1rem;
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 0; background: rgba(255, 255, 255, 0.9); color: var(--barna);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
}

@media (max-width: 560px) {
	.lapozo__szinpad { max-width: 100%; }
	.lapozo__nyil { width: 38px; height: 38px; }
	.lapozo__nyil--elozo { left: 0.3rem; }
	.lapozo__nyil--kovetkezo { right: 0.3rem; }
}

/* =========================================================
   KÖSZÖNŐ OLDAL (hírlevél-feliratkozás után)  – 2026-07-13
   ========================================================= */
.koszonom-hero {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
	text-align: center;
	background:
		radial-gradient(760px 420px at 50% 0%, rgba(126, 155, 118, 0.4), transparent 68%),
		linear-gradient(180deg, #DFE9D9 0%, var(--zold-halvany) 45%, rgba(241, 245, 238, 0) 100%);
	border-bottom: 1px solid var(--vonal-zold);
}
.koszonom-pipa {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--zold); color: var(--feher);
	display: grid; place-items: center;
	margin: 0 auto 1.6rem;
	box-shadow: 0 16px 34px -14px rgba(94, 120, 87, 0.9);
}
.koszonom-tipp {
	display: flex; align-items: flex-start; gap: 0.7rem;
	width: fit-content; max-width: 58ch;
	margin: 0 auto; text-align: left;
	background: var(--feher); border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar); padding: 1rem 1.25rem;
	font-size: 0.95rem; line-height: 1.6; color: var(--barna-halv);
}
.koszonom-tipp svg { flex: none; margin-top: 0.3em; color: var(--zold-melyebb); }
.koszonom-tipp span { min-width: 0; }   /* a szöveg egyben tördelődjön, ne csússzon szét */
.koszonom-tipp strong { color: var(--barna); }

/* Ajánlat (kiadvány) */
.ajanlat {
	display: grid; grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
	background: var(--feher);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar-nagy);
	padding: clamp(1.6rem, 4vw, 3rem);
	box-shadow: var(--arnyek);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.ajanlat__media img { border-radius: var(--sugar); box-shadow: var(--arnyek-lagy); }
.ajanlat__lista { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: 0.7rem; }
.ajanlat__lista li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--barna-halv); }
.ajanlat__lista svg { flex: none; margin-top: 0.25em; color: var(--zold); }

/* Feliratkozói ár indoklása (a köszönő oldalon, a visszaszámláló fölött) */
.ajanlat__indok {
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar);
	padding: 1rem 1.2rem;
	margin: 0 0 1.4rem;
	color: var(--barna-halv);
	font-size: 0.95rem;
}
.ajanlat__indok strong { color: var(--zold-melyebb); }

/* Visszaszámláló */
.visszaszamlalo {
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.6rem;
	text-align: center;
}
.visszaszamlalo__cim {
	margin: 0 0 0.7rem;
	font-family: var(--cim); font-size: 0.82rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--zold-melyebb);
}
.visszaszamlalo__ora { display: flex; justify-content: center; gap: 0.7rem; }
.visszaszamlalo__ora span {
	background: var(--feher); border: 1px solid var(--vonal-zold);
	border-radius: 12px; padding: 0.6rem 0.9rem; min-width: 74px;
}
.visszaszamlalo__ora b {
	display: block; font-family: var(--cim); font-size: 1.7rem;
	font-variant-numeric: tabular-nums; color: var(--barna); line-height: 1.1;
}
.visszaszamlalo__ora small { font-family: var(--cim); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--barna-halv); }
.visszaszamlalo__lejart { margin: 0; font-size: 0.95rem; color: var(--barna-halv); }

/* Ár + gomb */
.ajanlat__ar { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.2rem; }
.ajanlat__ar-regi { color: var(--barna-halv); text-decoration: line-through; font-size: 1.05rem; }
.ajanlat__ar-uj { font-family: var(--cim); font-weight: 700; font-size: 2rem; color: var(--zold-melyebb); }
.btn--nagy { padding: 1.15rem 2.4rem; font-size: 1.05rem; }
.ajanlat__biztos { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--barna-halv); }

@media (max-width: 860px) {
	.ajanlat { grid-template-columns: 1fr; }
	.ajanlat__media { max-width: 380px; margin-inline: auto; }
	.visszaszamlalo__ora span { min-width: 64px; padding: 0.5rem 0.6rem; }
}

/* ===================== CSOPORTOS WORKSHOP (Kapcsolat oldal) =====================
   Zsuzsa 2026-07-25: érdeklődésmérő csempe az elérhetőségek alatt. */
.workshop {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar);
	padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
.workshop__media img {
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: calc(var(--sugar) - 8px);
	display: block;
}
.workshop__body h2 { margin: 0.2rem 0 0.8rem; }
.workshop__body p { color: var(--barna-halv); }
.workshop__kiemelt { color: var(--barna) !important; font-weight: 500; }

.workshop__valasz {
	background: var(--feher);
	border: 1px solid var(--vonal-zold);
	border-radius: 14px;
	padding: 1rem 1.2rem;
	margin-top: 1.2rem;
	color: var(--barna) !important;
}

/* Név + telefon + e-mail egy sorban, alatta a rövid üzenet, a GDPR és a gomb. */
.workshop__urlap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
	margin-top: 1.4rem;
}
.workshop__urlap-teljes { grid-column: 1 / -1; }
.workshop__urlap label:not(.gdpr-check) {
	display: grid;
	gap: 0.4rem;
	font-family: var(--cim);
	font-size: 0.85rem;
	font-weight: 500;
}
.workshop__urlap input[type="text"],
.workshop__urlap input[type="email"],
.workshop__urlap input[type="tel"],
.workshop__urlap textarea {
	padding: 0.8rem 1.05rem;
	border-radius: 14px;
	border: 1px solid var(--vonal-zold);
	font-family: var(--szoveg);
	font-size: 1rem;
	background: var(--feher);
	width: 100%;
}
.workshop__urlap textarea { resize: vertical; }

@media (max-width: 860px) {
	.workshop { grid-template-columns: 1fr; }
	.workshop__media img { max-height: 280px; }
	.workshop__urlap { grid-template-columns: 1fr; }
}

/* =========================================================
   EXKLUZÍV PROGRAM (Szolgáltatások oldal, 7. ajánlat)
   Zsuzsa 2026-07-26. Szándékosan NEM a .svc csempe stílusát kapja:
   a 300 000 Ft-os prémium programnak ki kell emelkednie a hatos rácsból,
   ezért széles, arany szegélyű blokk. =========================== */
.premium {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
	background: linear-gradient(160deg, var(--feher), var(--krem-melyebb));
	border: 1px solid var(--arany);
	border-radius: var(--sugar-nagy);
	padding: clamp(1.5rem, 3.5vw, 2.8rem);
	box-shadow: var(--arnyek-lagy);
	position: relative;
	overflow: hidden;
	scroll-margin-top: 110px;
}
/* Vékony arany csík a blokk tetején – ez adja a „prémium” jelzést. */
.premium::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--arany), var(--barack), var(--arany));
}
.premium__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sugar);
	box-shadow: var(--arnyek-lagy);
}
.premium__body h2,
.premium__body h3 { margin: 0.2rem 0 0.9rem; }
/* Főoldali teaser: ott h3 a cím (a szekció h2-je a „Amiben együtt dolgozhatunk"),
   de a prémium blokknak vizuálisan h2-súlyúnak kell maradnia. */
.premium--teaser { margin-top: clamp(2rem, 4vw, 3rem); }
.premium--teaser .premium__body h3 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.2; }
.premium__body p { color: var(--barna-halv); }
.premium__lead {
	font-size: 1.1rem;
	color: var(--barna) !important;
	font-weight: 500;
}
/* Két gomb (Megvásárlom + Kérdésem van) egy csoportban, hogy az ár és a
   gombpár között legyen a törés, ne a két gomb között. */
.premium__gombok { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.premium__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--vonal);
}
.premium__foot .svc__price { font-size: 1.55rem; color: var(--arany-melyebb); }

/* A két pillér (9 alkalom coaching + 2 alkalom somatic) */
.pillerek {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.6rem;
}
.piller {
	background: var(--feher);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar-nagy);
	padding: clamp(1.5rem, 3vw, 2.2rem);
}
/* A záró (testi) pillér zöld papíron – vizuálisan is más minőség, mint a fejmunka. */
.piller--zaro { background: var(--zold-papir); }
.piller__cimke {
	font-family: var(--cim);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arany-melyebb);
	margin: 0 0 0.5rem;
}
.piller h4 { font-size: 1.18rem; margin: 0 0 0.7rem; }
.piller p { color: var(--barna-halv); margin: 0; }
.piller .ajanlat__lista { margin-bottom: 0; }

.premium__miert {
	margin-top: 1.6rem;
	background: var(--zold-papir);
	border: 1px solid var(--vonal-zold);
	border-radius: var(--sugar-nagy);
	padding: clamp(1.5rem, 3vw, 2.2rem);
}
.premium__miert h4 { font-size: 1.15rem; margin: 0 0 0.7rem; }
.premium__miert p { color: var(--barna-halv); margin: 0; }
.premium__miert-cta { margin-top: 1rem !important; }

/* A valódi szoba fotója a foglalás menete alatt (Zsuzsa 2026-07-26) */
.szoba {
	margin: 2.6rem auto 0;
	max-width: 460px;
	text-align: center;
}
.szoba img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sugar);
	box-shadow: var(--arnyek);
}
.szoba figcaption {
	margin-top: 0.85rem;
	font-family: var(--cim);
	font-size: 0.9rem;
	/* A fotó a zöld foglalás-sávban ül, ahol a szöveg világos – ezért örököljük
	   a sáv színét, nem a sötét --barna-halv-ot (különben olvashatatlan). */
	color: inherit;
	opacity: 0.88;
}

/* A köszönő oldalon a visszaszámláló lejártakor a kedvezményes blokkok eltűnnek.
   A [hidden] a böngésző alap-stíluslapjából jön, azt viszont a .ajanlat__ar
   display:flex-e felülírná – ezért kell ez a szerzői szabály. */
.ajanlat__ar[hidden],
.ajanlat__indok[hidden] { display: none; }

@media (max-width: 860px) {
	.premium { grid-template-columns: 1fr; }
	.premium__media { max-width: 420px; margin-inline: auto; }
	.premium__foot { justify-content: flex-start; }
}
