/* Hair Hungary v2 - aloldalak (2. szakasz, 2026-10-02).
   Az 1. szakasz fejlec/lablec/fooldal-designjanak kiterjesztese a regi markupu aloldalakra.
   A regi marka-CSS @layer retegekben all; ez a lap retegen kivul van, ezert annak normal
   szabalyait felulirja. Az !important csak ott all, ahol a tartalomban inline stilus vagy
   a regi oldalankenti <style> blokk (pl. a cimsav hatterkepe) !important-tal irna felul.
   Hatokor: body.hhx-al = HH-aloldal v2 fejleccel (a fooldal NEM). */

/* ---------- Morzsamenu ---------- */
.hhx-morzsa { background: var(--hhx-alt); padding: 14px var(--hhx-gutter) 0; font-family: var(--hhx-font); }
.hhx-morzsa ol { display: flex; flex-wrap: wrap; align-items: center; max-width: var(--hhx-oldal, 980px); margin: 0 auto; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--hhx-muted); }
.hhx-morzsa li { display: inline-flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hhx-morzsa li + li::before { content: "\203A"; margin: 0 8px; color: #8a8170; }
.hhx-morzsa a { display: inline-flex; align-items: center; min-height: 32px; color: var(--hhx-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.hhx-morzsa a:hover { color: var(--hhx-gold-dark); }
.hhx-morzsa [aria-current="page"] { color: var(--hhx-ink); }
@media (max-width: 599px) {
	.hhx-morzsa li:last-child { max-width: 100%; }
	.hhx-morzsa li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 2 * var(--hhx-gutter)); }
}

/* ---------- Oldalcim (H1-sav) ---------- */
body.hhx-al h1.cikk_title, body.hhx-al .hhx-cimsav {
	display: block !important; position: relative; float: none !important; width: 100% !important; max-width: none !important;
	height: auto !important; min-height: 0 !important; margin: 0 !important;
	padding: 12px max(var(--hhx-gutter), calc((100% - var(--hhx-oldal, 980px)) / 2)) 36px !important;
	background: var(--hhx-alt) none !important; border: 0 !important; box-shadow: none !important;
	color: var(--hhx-ink) !important; font-family: var(--hhx-font) !important; font-size: 30px !important; font-weight: 700 !important;
	line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; text-align: left !important; text-shadow: none !important;
}
body.hhx-al h1.cikk_title::before, body.hhx-al h1.cikk_title::after { display: none !important; content: none !important; }
body.hhx-al h1.cikk_title span, body.hhx-al h1.blog_title span {
	display: inline; position: static !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important;
	color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; transform: none !important; opacity: 1 !important;
}
/* blogcikk: a cim a cikk olvasooszlopaban all, a sav hattere a teljes szelessegig er (kilogas nelkul) */
body.hhx-al h1.blog_title {
	display: block !important; float: none !important; width: auto !important; margin: 0 0 28px !important; padding: 12px 0 36px !important;
	background: var(--hhx-alt) !important; box-shadow: 0 0 0 100vmax var(--hhx-alt) !important; clip-path: inset(0 -100vmax) !important; border: 0 !important;
	color: var(--hhx-ink) !important; font-family: var(--hhx-font) !important; font-size: 30px !important; font-weight: 700 !important;
	line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; text-align: left !important;
}
@media (min-width: 768px) {
	body.hhx-al h1.cikk_title, body.hhx-al .hhx-cimsav, body.hhx-al h1.blog_title { font-size: 40px !important; padding-bottom: 44px !important; }
}
/* az ar- es megyeoldal sajat "Egy eletre szol" vizjeles cimsavja es dupla morzsaja */
body.hhx-al.hh-page-prices .cikk_title, body.hhx-al.hh-page-county .cikk_title { overflow: hidden; }
body.hhx-al .hh-breadcrumb { display: none !important; }

/* ---------- Tipografia a tartalomban ---------- */
body.hhx-al #content, body.hhx-al .blogcikkk {
	font-family: var(--hhx-font); color: var(--hhx-ink);
}
body.hhx-al #content :is(p, li, td, th, blockquote, dd, dt):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) {
	font-family: var(--hhx-font) !important; font-size: 17px; line-height: 1.65; font-weight: 400; letter-spacing: normal; text-align: left !important;
}
body.hhx-al #content :is(p, li):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { color: #3b3731; }
body.hhx-al #content span[style*="font-family"]:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *), body.hhx-al #content font:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-family: inherit !important; }
body.hhx-al #content :is(p, li) span[style*="font-size"]:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-size: inherit !important; }
body.hhx-al #content span[style*="color: rgb(0, 0, 0)"], body.hhx-al #content span[style*="color:#000"] { color: inherit !important; }
/* sotet hatteru szakaszok (kampanyoldalak sajat, jovahagyott designja): csak a betucsalad egysegesul */
body.hhx-al #content :is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) :is(p, li, a, span) { font-family: var(--hhx-font) !important; }
/* olvasooszlop: a hosszu bekezdesek ne legyenek szelesebbek ~80 karakternel */
body.hhx-al #content :is(p, ul:not([class]), ol:not([class])):not(:is(.egyedi_cikk, .hh-landing, .landing-lgbtq, .dht-container, .kapcs, [class*="col-"]) *) { max-width: 760px; }
body.hhx-al #content .hivas p, body.hhx-al #content form p,
body.hhx-al #content :is(.egyedi_cikk, .hh-landing, .landing-lgbtq, .dht-container, .kapcs, [class*="col-"]) :is(p, ul, ol) { max-width: none; }
body.hhx-al .blogcikkk, body.hhx-al #cikk.blogcikkk { padding-top: 0 !important; margin-top: 0 !important; }
body.hhx-al #content strong, body.hhx-al #content b { font-weight: 700; color: inherit; }
body.hhx-al #content big { font-size: 1.1em; }

body.hhx-al #content :is(h2, h3, h4:not(.panel-title)):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) {
	font-family: var(--hhx-font) !important; font-weight: 700 !important; color: var(--hhx-ink) !important;
	letter-spacing: normal !important; text-transform: none !important; text-align: left !important; text-shadow: none !important;
	border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: none !important;
}
body.hhx-al #content h2:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-size: 26px !important; line-height: 1.25 !important; margin: 40px 0 14px !important; }
body.hhx-al #content h3:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-size: 20px !important; line-height: 1.35 !important; margin: 28px 0 10px !important; }
body.hhx-al #content h4:not(.panel-title):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-size: 18px !important; line-height: 1.4 !important; margin: 24px 0 8px !important; }
body.hhx-al #content :is(h2, h3) :is(span, strong):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) {
	font-size: inherit !important; font-weight: inherit !important; color: inherit !important; font-family: inherit !important; letter-spacing: inherit !important;
}
body.hhx-al #content h2:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *)::before, body.hhx-al #content h2:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *)::after { display: none !important; }
@media (min-width: 768px) {
	body.hhx-al #content h2:not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { font-size: 30px !important; }
}

/* linkek: sotet arany, alahuzott (a vilagos arany feher hatteren nem olvashato) */
body.hhx-al #content a:not([class]):not(:has(img)):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) {
	color: var(--hhx-gold-text) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
body.hhx-al #content a:not([class]):not(:has(img)):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *):hover { color: var(--hhx-gold-dark) !important; }

/* kepek: soha ne loljenek ki, maradjon az aranyuk (a szerver rogzitett width/height attributumot ad nekik) */
body.hhx-al #content img { max-width: 100%; }
body.hhx-al #content img[width][height]:not([style*="height"]) { height: auto; }
body.hhx-al .hhx-cimke { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--hhx-line); border-radius: 999px; background: #fff; color: var(--hhx-muted); font: 500 14px/1.2 var(--hhx-font); }
body.hhx-al #content p img, body.hhx-al #content li img, body.hhx-al .blogcikkk img,
body.hhx-al #content .haj_mid > img, body.hhx-al #content .triv_lista img { height: auto !important; }
body.hhx-al #content p > img, body.hhx-al .blogcikkk p > img { border-radius: var(--hhx-radius); }

/* ---------- Gombok ---------- */
body.hhx-al #content a.styled, body.hhx-al #content .hh-btn, body.hhx-al #content a.gal_tov, body.hhx-al #content a.team_button,
body.hhx-al #content .dht-btn, body.hhx-al a.cikk_back {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto !important; height: auto !important;
	min-height: 48px; margin: 8px 8px 8px 0 !important; padding: 12px 24px !important; position: relative !important;
	border: 2px solid var(--hhx-gold-text) !important; border-radius: var(--hhx-radius) !important; background: var(--hhx-gold-text) !important;
	color: #fff !important; font-family: var(--hhx-font) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; text-align: center !important; box-shadow: none !important;
	float: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
}
body.hhx-al #content a.styled::before, body.hhx-al #content a.styled::after, body.hhx-al #content a.gal_tov::before, body.hhx-al #content a.gal_tov::after,
body.hhx-al a.cikk_back::before, body.hhx-al a.cikk_back::after { display: none !important; content: none !important; }
body.hhx-al #content a.styled:hover, body.hhx-al #content .hh-btn:hover, body.hhx-al #content a.gal_tov:hover, body.hhx-al #content a.team_button:hover, body.hhx-al #content .dht-btn:hover {
	background: var(--hhx-gold-dark) !important; border-color: var(--hhx-gold-dark) !important; color: #fff !important;
}
body.hhx-al a.cikk_back, body.hhx-al #content .hh-btn-outline, body.hhx-al #content .hh-btn-secondary {
	background: #fff !important; color: var(--hhx-ink) !important; border-color: var(--hhx-ink) !important;
}
body.hhx-al a.cikk_back:hover, body.hhx-al #content .hh-btn-outline:hover, body.hhx-al #content .hh-btn-secondary:hover { background: var(--hhx-ink) !important; color: #fff !important; }
body.hhx-al #content a.styled span, body.hhx-al #content a.gal_tov span { position: static !important; color: inherit !important; transform: none !important; }

/* ---------- Harmonika (GYIK, arak) ---------- */
body.hhx-al #content .panel-group { margin: 0 0 24px; }
body.hhx-al #content .panel { border: 0 !important; border-bottom: 1px solid var(--hhx-line) !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; margin: 0 !important; }
body.hhx-al #content .panel-heading { padding: 0 !important; background: none !important; border: 0 !important; }
body.hhx-al #content h4.panel-title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.hhx-al #content .panel-title a {
	display: flex !important; align-items: center; min-height: 52px; padding: 12px 44px 12px 0 !important; position: relative;
	font-family: var(--hhx-font) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important;
	color: var(--hhx-ink) !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; text-align: left !important; background: none !important;
}
body.hhx-al #content .panel-title a::before { display: none !important; }
body.hhx-al #content .panel-title a::after {
	content: "" !important; display: block !important; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid var(--hhx-gold-text); border-bottom: 2px solid var(--hhx-gold-text); transform: rotate(45deg); transition: transform .2s; background: none !important;
}
body.hhx-al #content .panel-title a:not(.collapsed)::after { transform: rotate(-135deg); margin-top: -2px; }
body.hhx-al #content .panel-title a:hover { color: var(--hhx-gold-text) !important; }
body.hhx-al #content .panel-body { padding: 0 0 16px !important; border: 0 !important; }

/* ---------- Tablazatok ---------- */
body.hhx-al #content table { max-width: 100%; border-collapse: collapse; }
body.hhx-al #content td, body.hhx-al #content th { font-size: 16px; }

/* ---------- Tudastar: cimkek, kartyak ---------- */
body.hhx-al .cimke_lista { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
body.hhx-al .cimke_lista a {
	display: inline-flex !important; align-items: center; min-height: 36px; margin: 0 !important; padding: 6px 14px !important;
	border: 1px solid var(--hhx-line) !important; border-radius: 999px !important; background: #fff !important;
	color: var(--hhx-ink) !important; font: 500 14px/1.2 var(--hhx-font) !important; text-transform: none !important; text-decoration: none !important; letter-spacing: normal !important;
}
body.hhx-al .cimke_lista a:hover { border-color: var(--hhx-gold-text) !important; color: var(--hhx-gold-text) !important; }

/* ---------- Visszahivo blokk (kozponti, a fooldallal azonos megjelenes) ---------- */
body.hhx-al .hivas { display: block; width: 100%; max-width: none; margin: 0; padding: 48px var(--hhx-gutter); background: var(--hhx-alt); font-size: 16px; float: none; clear: both; }
body.hhx-al .hivas .cont {
	width: auto; max-width: 880px; margin: 0 auto; padding: 24px 18px; float: none; font-size: 16px;
	background: #fff; border: 1px solid var(--hhx-line); border-radius: var(--hhx-radius);
}
@media (min-width: 768px) { body.hhx-al .hivas .cont { padding: 40px; } }
body.hhx-al .hivas .text { width: auto; float: none; margin: 0 0 20px; padding: 0; }
body.hhx-al .hivas .text p { margin: 0; font-family: var(--hhx-font); font-size: 17px; line-height: 1.6; color: var(--hhx-muted); text-align: left; text-transform: none; }
body.hhx-al .hivas .text p span {
	display: block; margin: 0 0 8px; font-family: var(--hhx-font); font-size: 28px; line-height: 1.25; font-weight: 700;
	color: var(--hhx-ink); text-transform: none; letter-spacing: normal; text-align: left;
}
body.hhx-al .hivas form { display: grid; grid-template-columns: 1fr; gap: 16px; width: auto; margin: 0; padding: 0; font-size: 16px; float: none; align-items: end; }
@media (min-width: 640px) {
	body.hhx-al .hivas form { grid-template-columns: repeat(6, 1fr); }
	body.hhx-al .hivas form > p.col-sm-6 { grid-column: span 3; }
	body.hhx-al .hivas form > p.col-sm-4 { grid-column: span 2; }
}
body.hhx-al .hivas form > p {
	display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; width: auto; margin: 0; padding: 0; float: none; min-height: 0; position: relative;
}
body.hhx-al .hivas form > p::before, body.hhx-al .hivas form > p::after { display: none; content: none; }
body.hhx-al .hivas form > p label {
	position: static; display: block; margin: 0; padding: 0; transform: none; opacity: 1; visibility: visible;
	font-family: var(--hhx-font); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--hhx-ink); text-align: left; pointer-events: auto;
}
body.hhx-al .hivas input[type="text"], body.hhx-al .hivas input[type="email"], body.hhx-al .hivas input[type="tel"], body.hhx-al .hivas select {
	display: block; width: 100%; height: auto; min-height: 48px; margin: 0; padding: 10px 12px; position: static;
	border: 1px solid #a99d86; border-radius: 6px; background: #fff; color: var(--hhx-ink);
	font-family: var(--hhx-font); font-size: 16px; line-height: 1.4; box-shadow: none; text-align: left;
}
body.hhx-al .hivas input::placeholder { color: #6b6458; opacity: 1; }
body.hhx-al .hivas input:focus-visible, body.hhx-al .hivas select:focus-visible { outline: 3px solid var(--hhx-gold-text); outline-offset: 1px; border-color: var(--hhx-gold-text); }
body.hhx-al .hivas select { appearance: auto; -webkit-appearance: menulist; padding-right: 8px; cursor: pointer; }
body.hhx-al .hivas .csekk_pipa { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; float: none; position: static; width: auto; }
body.hhx-al .hivas .csekk_pipa > div { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 0; background: none; box-shadow: none; padding: 0; }
body.hhx-al .hivas .csekk_pipa input[type="checkbox"] {
	position: static; display: block; width: 22px; height: 22px; margin: 0; opacity: 1; visibility: visible; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--hhx-gold-text); cursor: pointer;
}
body.hhx-al .hivas .csekk_pipa > div span { display: none; }
body.hhx-al .hivas .csekk_pipa p { margin: 0; font-family: var(--hhx-font); font-size: 15px; line-height: 1.5; color: var(--hhx-ink); text-align: left; }
body.hhx-al .hivas .csekk_pipa p a { color: var(--hhx-gold-text); text-decoration: underline; }
body.hhx-al .hivas form button {
	grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-height: 48px; margin: 4px 0 0; padding: 12px 28px; position: relative; overflow: hidden; float: none;
	border: 0; border-radius: var(--hhx-radius); background: var(--hhx-gold-text); color: #fff;
	font-family: var(--hhx-font); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; cursor: pointer; box-shadow: none;
}
body.hhx-al .hivas form button:hover { background: var(--hhx-gold-dark); }
body.hhx-al .hivas form button::before, body.hhx-al .hivas form button::after,
body.hhx-al .hivas form button span::before, body.hhx-al .hivas form button span::after { display: none; content: none; }
body.hhx-al .hivas form button span { position: static; transform: none; color: inherit; font: inherit; }
@media (max-width: 479px) { body.hhx-al .hivas form button { width: 100%; justify-self: stretch; } }

/* ---------- Kapcsolat: adatok es terkep ket oszlopban, a cim a teljes savban ---------- */
body.hhx-al .kapcs {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; position: static; float: none;
	width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0 max(var(--hhx-gutter), calc((100% - var(--hhx-oldal, 980px)) / 2)) 48px; background: none;
}
body.hhx-al .kapcs .kapcs_cikk, body.hhx-al .kapcs .kapcs_cikk > .cont { display: contents; }
body.hhx-al .kapcs h1.blog_title { grid-column: 1 / -1; margin: 0 0 8px !important; }
body.hhx-al .kapcs .kapcs_cikk ul { grid-column: 1; margin: 0; padding: 0; list-style: none; position: static; width: auto; }
body.hhx-al .kapcs .kapcs_cikk li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hhx-line); list-style: none; }
body.hhx-al .kapcs .kapcs_cikk li::before { display: none; }
body.hhx-al .kapcs .kapcs_cikk li p { margin: 0; }
body.hhx-al .kapcs .kapcs_cikk li strong { display: inline-block; min-width: 130px; margin-right: 8px; color: var(--hhx-ink); }
body.hhx-al .kapcs .kapcs_cikk .cont > p { display: none; }
body.hhx-al .kapcs #map_container { grid-column: 1; position: static !important; width: auto !important; height: auto !important; margin: 0; padding: 0; float: none; }
body.hhx-al .kapcs #map { position: static !important; width: 100% !important; height: auto !important; }
body.hhx-al .kapcs #map iframe { display: block !important; width: 100% !important; height: 380px !important; margin: 0 !important; border-radius: var(--hhx-radius); }
@media (min-width: 900px) {
	body.hhx-al .kapcs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	body.hhx-al .kapcs #map_container { grid-column: 2; grid-row: 2 / span 3; }
	body.hhx-al .kapcs #map iframe { height: 440px !important; }
}

/* ---------- Tudastar-lista: kartyak kep + cim + "Elolvasom" ---------- */
body.hhx-al .blog {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; float: none; width: auto; max-width: var(--hhx-max);
	margin: 0 auto; padding: 40px var(--hhx-gutter) 48px;
}
@media (min-width: 640px) { body.hhx-al .blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.hhx-al .blog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.hhx-al .blog > a {
	display: flex !important; flex-direction: column; position: relative; float: none !important; width: auto !important; max-width: none !important;
	height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden;
	border: 1px solid var(--hhx-line); border-radius: var(--hhx-radius); background: #fff !important; color: var(--hhx-ink) !important; text-decoration: none !important;
}
body.hhx-al .blog > a::before, body.hhx-al .blog > a::after, body.hhx-al .blog > a .cont::before, body.hhx-al .blog > a .cont::after { display: none !important; content: none !important; }
body.hhx-al .blog > a img {
	position: static !important; display: block; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover;
	transform: none !important; opacity: 1 !important; filter: none !important; border-radius: 0; margin: 0 !important;
}
body.hhx-al .blog > a .cont {
	position: static !important; display: flex !important; flex-direction: column; gap: 10px; flex: 1 1 auto; width: auto !important; height: auto !important;
	margin: 0 !important; padding: 16px 18px 20px !important; background: none !important; transform: none !important; opacity: 1 !important; text-align: left !important;
}
body.hhx-al #content .blog > a h3 { margin: 0 !important; font-size: 19px !important; line-height: 1.35 !important; }
body.hhx-al .blog > a i { margin: auto 0 0 !important; padding: 0 !important; font-family: var(--hhx-font); font-style: normal; font-size: 15px; font-weight: 600; color: var(--hhx-gold-text); text-transform: none; }
body.hhx-al .blog > a i::after { content: " \2192"; }
body.hhx-al .blog > a:hover h3, body.hhx-al .blog > a:focus-visible h3 { color: var(--hhx-gold-text) !important; text-decoration: underline; }
/* msg 8210 (2026-10-02): a regi style.css az "Elolvasom" <i> elemet abszolut pozicioval (display: table, height: 23px)
   tette a kartyara, ezert a link a kartya also szelere csuszott, kilogott es nem a cim bal szelehez igazodott.
   Itt normal folyasba kerul: a .cont oszlop aljara (margin-top: auto), a cimmel azonos bal szellel, a .cont also
   belso tere (20 px) alatt; a kartyak egy sorban azonos magasak (racs, stretch). */
body.hhx-al .blog > a .cont i {
	position: static !important; inset: auto !important; display: block !important; align-self: flex-start !important;
	width: auto !important; height: auto !important; margin: auto 0 0 !important; padding: 0 !important;
	transform: none !important; text-indent: 0 !important; line-height: 1.4 !important;
}

/* ---------- Teljes szelessegu regi szakaszok (egyedi cikkoldalak): a szoveg a 1200 px-es racs szelehez igazodik,
   a kepek tovabbra is a kepernyo szeleig ernek (a regi elrendezes nezetszelesseghez kotott) ---------- */
body.hhx-al .egyedi_cikk :is(.haj_top, .haj_mid, .haj_bot, .top, .mid, .triv_lista, .orvos) > .left { box-sizing: border-box !important; padding-left: max(0px, calc(50vw - 615px)) !important; }
body.hhx-al .egyedi_cikk :is(.haj_top, .haj_mid, .haj_bot, .top, .mid, .triv_lista, .orvos) > .right { box-sizing: border-box !important; padding-right: max(0px, calc(50vw - 615px)) !important; }
body.hhx-al .egyedi_cikk .haj_ult { margin-top: 0 !important; }
body.hhx-al .egyedi_cikk :is(.haj_top, .haj_mid) { padding-top: 48px !important; }
@media (max-width: 767px) {
	body.hhx-al .egyedi_cikk :is(.haj_top, .haj_mid, .top) { padding-top: 28px !important; }
}
/* I-PRF oldalpar: a .lista ul 100% + 20 px jobb margo miatt 10 px-et kilogott (regi hiba) */
body.hhx-al #content .egyedi_cikk .lista > ul { max-width: calc(100% - 20px); }

/* ---------- Mobil kilogas ellen: beagyazasok es tordelhetetlen szovegek ---------- */
body.hhx-al #content :is(p, li, td, th, a, span, h2, h3, h4, blockquote) { overflow-wrap: break-word; }
body.hhx-al #content iframe { max-width: 100%; }
body.hhx-al #content iframe:is([src*="youtube"], [src*="vimeo"], [data-src*="youtube"]) { height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
	body.hhx-al #content p img, body.hhx-al #content li img { margin-left: 0 !important; margin-right: 0 !important; float: none !important; }
}
@media (max-width: 767px) {
	/* a regi ketoszlopos (display: table) szakaszok mobilon egymas ala kerulnek, egyik doboz sem szelesebb a kepernyonel */
	body.hhx-al .egyedi_cikk :is(.haj_top, .haj_mid, .haj_bot, .top, .mid, .triv_lista, .orvos) > :is(.left, .right) { display: block !important; width: auto !important; }
	body.hhx-al #content .egyedi_cikk :is(div, ul, ol, li, table, p),
	body.hhx-al #content :is(ul, ol, li) { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 767px) {
	body.hhx-al #content .hajcont :is(.list, .list2) > * { display: block !important; margin-right: 0 !important; }
	body.hhx-al #content :is(.short8, .short6), body.hhx-al #content :is(.short8, .short6) > ul { display: block !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
}

/* ---------- Vilagos arany szoveg feher hatteren nem olvashato: sotet arany / szovegszin ---------- */
body.hhx-al #content :is([style*="color:#c1a764"], [style*="color: #c1a764"], [style*="color:#C1A764"], [style*="color: #C1A764"], [style*="color:#a68d52"], [style*="color: #a68d52"]):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { color: var(--hhx-gold-text) !important; }
body.hhx-al #content :is(strong, b):not(:is([style*="background:#0e0e0e"], [style*="background:#171717"], .hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *):not([style*="color"]) { color: inherit !important; }
body.hhx-al #content :is(.hh-amount, .hh-eyebrow, .hh-role, .hh-price, .hh-time, .dht-eyebrow, .dht-price, .dht-price small, .dht-info-small):not(:is(.hh-section-dark, .hh-section-charcoal, .dht-section-dark, .dht-benefits, .tricho-timeline) *) { color: var(--hhx-gold-text) !important; }
/* blogcikk: a regi style.css retegben `.blogcikkk{padding-top:80px !important}` all; retegbeli !important-ot csak egy
   korabban deklaralt reteg !important-ja ir felul - a hhx-fokusz reteg a lap elejen deklaralt elso reteg (1. szakasz). */
@layer hhx-fokusz {
	body.hhx-al .blogcikkk { padding-top: 0 !important; }
}
@media (max-width: 767px) {
	/* a regi display: table listaelemek a hosszu (nemet) osszetett szavaktol kiszelesednenek */
	body.hhx-al #content li { display: block !important; }
	body.hhx-al #content :is(li, p, h2, h3) :is(strong, b) { overflow-wrap: anywhere; hyphens: auto; }
}
/* .hajcont listak: 100% szelesseg + jobb margo miatti kilogas (regi hiba) minden szelessegen */
body.hhx-al #content .hajcont :is(.list, .list2) > * { max-width: calc(100% - 42px); }

/* ===== 3. kor (2026-10-02): egyseges tartalmi kontener minden aloldalon =====
   Cel: minden tartalmi blokk a morzsamenuvel es a cimsavval azonos 980 px-es kontenerben all
   (bal/jobb szel = max(oldalmargo, (szelesseg - 980) / 2)); hatteres savok teljes szelessegben maradhatnak,
   de a tartalmuk a kontenerben. A regi markup (egyedi_cikk, sub_gal, kampanyoldalak) nezetszelesseghez
   kotott margoit, paddingjeit es fix szelessegeit nullazza; tartalom es sorrend nem valtozik.
   Miert a hhx-fokusz retegben, mindenhol !important-tal: a regi marka-CSS retegeiben !important margok/paddingek
   allnak (pl. .haj_bot, .szakall .bot), ezeket csak egy korabban deklaralt reteg !important-ja irja felul.
   A hhx-fokusz a lap elejen elsokent deklaralt reteg (1. szakasz), igy az itteni !important mindent felulir. */
@layer hhx-fokusz {

body.hhx-al { --hhx-k: 980px; }
body.hhx-al #content { overflow-x: clip !important; }

/* ---- A) gyokerek, amelyek a kontenerbe kerulnek (margoval) ---- */
body.hhx-al #content :is(#cikk, .sub_gal, div.blog, .cimke_lista, .hhx-galeria) {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important;
	margin-left: max(var(--hhx-gutter), calc((100% - var(--hhx-k)) / 2)) !important;
	margin-right: max(var(--hhx-gutter), calc((100% - var(--hhx-k)) / 2)) !important;
	padding-left: 0 !important; padding-right: 0 !important;
}
body.hhx-al #content a.cikk_back { margin-left: max(var(--hhx-gutter), calc((100% - var(--hhx-k)) / 2)) !important; }

/* ---- B) teljes szelessegu gyokerek (sajat hatteres savokkal): a kozvetlen gyerekek belso margoja a kontener ---- */
body.hhx-al #content :is(.egyedi_cikk, .gal_list) {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.hhx-al #content :is(.egyedi_cikk, .gal_list) > :not(h1, script, style, .hivas) {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important;
	margin-left: 0 !important; margin-right: 0 !important;
	padding-left: max(var(--hhx-gutter), calc((100% - var(--hhx-k)) / 2)) !important;
	padding-right: max(var(--hhx-gutter), calc((100% - var(--hhx-k)) / 2)) !important;
}

/* ---- C) regi szakasz-szintu elemek a gyokereken belul: nincs sajat vizszintes margo/padding, a kontener teljes szelesseget kapjak ---- */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.prf, .reg_ter, .haj_ult, .haj_top, .haj_mid, .haj_bot, .szakall, .miert, .triv, .triv_lista, .orvos,
	.hajcont, .rigen, .top, .mid, .bot, .lista, .para, .szoveges, .head, .short6, .short8, .img_cont, .team, .tud, .haj_ikon) {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important;
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* a szakaszok szoveg-, lista- es cimelemei: nincs regi behuzas */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.prf, .reg_ter, .haj_ult, .haj_top, .haj_mid, .haj_bot, .szakall, .miert, .triv, .triv_lista, .orvos,
	.hajcont, .rigen, .top, .mid, .bot, .lista, .para, .szoveges, .head, .left, .right, .team, .tud) > :is(p, h2, h3, h4, h5, h6, ul, ol, div:not([class])) {
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: auto !important;
}
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.lista, .bot, .mid, .left, .right) > :is(ul, ol) { display: block !important; }
/* a szakaszokon beluli kepek: nincs regi oldalso margo (pl. margin-right: 135px, margin-left: -74px) */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal) :is(.prf, .reg_ter, .haj_ult, .haj_top, .haj_mid, .haj_bot, .szakall, .miert, .triv, .triv_lista, .orvos,
	.hajcont, .rigen, .top, .mid, .bot, .lista, .left, .right) img:not([style*="float"], .alignleft, .alignright) {
	margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; height: auto !important;
}
/* a csapat-sav (hatterkepes) belso elemei a kontenerben */
body.hhx-al #content .egyedi_cikk .miert .team * { max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---- D) ket hasab (.left + .right / .left + kep): racs a kontener szelessegeben ---- */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.left, .right) {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important;
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; vertical-align: top !important;
}
@media (min-width: 768px) {
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(div, section):has(> .left):has(> .right, > img) {
		display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 48px !important; row-gap: 0 !important;
		align-items: start !important; text-align: left !important;
	}
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(div, section):has(> .left):has(> .right, > img) > :not(.left, .right, img) { grid-column: 1 / -1 !important; }
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(div, section):has(> .left):has(> .right, > img) > img { width: 100% !important; height: auto !important; margin: 0 !important; }
}
@media (max-width: 767px) {
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.left, .right) { display: block !important; }
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) :is(.left, .right) + :is(.left, .right, img) { margin-top: 24px !important; }
}

/* ---- E) kepsor-bekezdes (elotte/utana kepparok): egymas mellett, a kontenert kitoltve ---- */
body.hhx-al #content p:is(:has(> img + img), :has(> img ~ img)) {
	display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; align-items: flex-start !important; max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.hhx-al #content p:is(:has(> img + img), :has(> img ~ img)) > img {
	flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; border-radius: var(--hhx-radius) !important;
}
body.hhx-al #content p:is(:has(> img + img), :has(> img ~ img)) > br { display: none !important; }

/* ---- F) kiemelt (szurke) doboz: a kontener szelein, egyseges belso terrel ---- */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block {
	box-sizing: border-box !important; float: none !important; width: auto !important; max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important; padding: 24px 28px !important; border-radius: var(--hhx-radius) !important;
}
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block > :is(p, ul, ol, h2, h3, h4) { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; max-width: none !important; }
/* a szurke hatter regen a bekezdesen all (.prf .block p): a hatter a kontener szeleig er, a szoveg belso terrel */
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block:has(> p) { padding: 0 !important; }
body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block > p { padding: 24px 28px !important; border-radius: var(--hhx-radius) !important; }
@media (max-width: 767px) {
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block { padding: 20px 18px !important; }
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block:has(> p) { padding: 0 !important; }
	body.hhx-al #content :where(.egyedi_cikk, .sub_gal, #cikk) .block > p { padding: 20px 18px !important; }
}

/* ---- G) szovegbe uszo kepek: legfeljebb a hasab fele, mobilon a szoveg folott teljes szelessegben ---- */
body.hhx-al #content img:is([style*="float: right"], [style*="float:right"], .alignright) { max-width: min(50%, 480px) !important; height: auto !important; margin: 4px 0 16px 24px !important; }
body.hhx-al #content img:is([style*="float: left"], [style*="float:left"], .alignleft) { max-width: min(50%, 480px) !important; height: auto !important; margin: 4px 24px 16px 0 !important; }
@media (max-width: 767px) {
	body.hhx-al #content img:is([style*="float"], .alignright, .alignleft) { float: none !important; display: block !important; max-width: 100% !important; margin: 0 0 16px !important; }
}


/* ---- H) hatterkepes regi szakaszok (a regi oldal 1200-1330 px alatt maga is kepek nelkul mutatja oket):
   szeles kepernyon a diszkep a kontener egyik felebe kerul, a szoveg a masikba ---- */
@media (min-width: 1201px) {
	/* szakall: keposzlop balra a felsorolas mellett, kep jobbra a zaro blokk mellett */
	body.hhx-al #content .egyedi_cikk .szakall .top > ul { padding-left: 340px !important; background-position: left center !important; background-size: 300px auto !important; min-height: 375px; }
	body.hhx-al #content .egyedi_cikk .szakall .bot { padding-right: 490px !important; background-position: right center !important; background-size: 450px auto !important; min-height: 300px; }
}
@media (min-width: 1301px) {
	body.hhx-al #content .egyedi_cikk .hajcont .tud { background-size: calc(50% - 24px) auto !important; background-position: left top !important; }
	body.hhx-al #content .egyedi_cikk .hajcont .tud > .right { max-width: 50% !important; margin-left: auto !important; }
}
@media (min-width: 1331px) {
	/* Trivellini keszulek: a kep a kontener bal felen, a szoveg a jobb felen */
	body.hhx-al #content .egyedi_cikk .triv .top {
		background-color: #f3f3f3 !important; background-size: 1000px auto !important; background-position: -60px center !important; min-height: 340px;
		padding: 32px 32px 8px !important; border-radius: var(--hhx-radius) !important;
	}
	body.hhx-al #content .egyedi_cikk .triv .top > p { margin-left: 50% !important; max-width: 50% !important; }
	/* orvos-sav: a regihez hasonloan teljes szelessegu sav, a szoveg a kontener bal reszen */
	body.hhx-al #content .egyedi_cikk .triv .orvos {
		margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
		padding-left: calc(50vw - 50%) !important; padding-right: calc(50vw - 50%) !important;
	}
	body.hhx-al #content .egyedi_cikk .triv .orvos > p { max-width: 480px !important; text-align: left !important; }
}

/* a .triv regi -90 px-es felso margoja a felette allo rovid osszefoglalora csuszna */
body.hhx-al #content .egyedi_cikk > .triv { margin-top: 0 !important; }
/* Trivellini elotte/utana keposzlop + szoveg: ket hasab (a VORHER/NACHHER cimke a kep kozepen marad) */
@media (min-width: 768px) {
	body.hhx-al #content .egyedi_cikk .triv .mid { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 48px !important; align-items: start !important; }
	body.hhx-al #content .egyedi_cikk .triv .mid > :not(ul, .right) { grid-column: 1 / -1 !important; }
}
body.hhx-al #content .egyedi_cikk .triv .mid > ul { width: fit-content !important; max-width: 100% !important; }


/* ---- I) kampanyoldalak (hh-landing, dht-landing, TrichoLAB, videotar, barbershop): sajat, 1180 px-es belso kontenereik
   a 980 px-es kontenerhez igazodnak; a teljes szelessegu savok hattere marad, a tartalmuk a kontenerben ---- */
body.hhx-al #content :is(.tricho-wrap, .tricho-section-title, .faq-list, .hh-inner, .hh-section-head, .dht-container, .dht-section-head,
	.hh-video-hero-inner, .hh-video-grid, header.container.hero) {
	box-sizing: border-box !important; width: auto !important; max-width: none !important;
	margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* a #cikk kontenerbol kitoro teljes szelessegu savok (margin: calc(50% - 50vw)): a belso margo visszahozza a tartalmat a kontenerbe */
body.hhx-al #content #cikk :is(.hh-full, .dht-fullwidth, .hh-cta-band) {
	box-sizing: border-box !important; width: auto !important; max-width: none !important;
	position: relative !important; left: auto !important; right: auto !important; transform: none !important;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	padding-left: max(var(--hhx-gutter), calc(50vw - var(--hhx-k) / 2)) !important;
	padding-right: max(var(--hhx-gutter), calc(50vw - var(--hhx-k) / 2)) !important;
}
/* a szakaszcimek alatti bevezeto bekezdes a kontener szelessegeben (a szoveg igazitasa nem valtozik) */
body.hhx-al #content :is(.hh-section-head, .tricho-section-title, .dht-section-head) > :is(p, h2, h3) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* ket hasabos hero/split szakaszok (kep + szoveg): a szovegoszlopnak nincs sajat oldalso belso margoja, a hasabkozt a racs adja;
   egymas ala torve a szoveg a kontener szelen kezdodik */
body.hhx-al #content :is(.tricho-hero, .tricho-benefits-wide, .hh-hero-grid, .hh-feature-hero-grid, .dht-hero, .dht-split-section) { gap: 32px 48px !important; }
body.hhx-al #content :is(.tricho-hero-text, .tricho-benefits-text, .hh-hero-copy, .hh-feature-hero-grid > .hh-copy, .dht-hero-content, .dht-split-content, .dht-hero-inner, .dht-split-inner, .hh-cta-band-inner) {
	padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
body.hhx-al #content :is(.tricho-hero-image, .tricho-benefits-img) { padding-left: 0 !important; padding-right: 0 !important; }
/* a hero keposzlopa kitolti a sor magassagat (ne maradjon ures sav a kep alatt) */
@media (min-width: 768px) {
	body.hhx-al #content :is(.hh-hero-media, .hh-feature-hero-media, .dht-hero-image, .dht-split-image, .tricho-hero-image, .tricho-benefits-img) { align-self: stretch !important; min-height: 100%; }
	body.hhx-al #content :is(.hh-hero-media, .hh-feature-hero-media, .dht-hero-image, .dht-split-image, .tricho-hero-image, .tricho-benefits-img) > img {
		display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
	}
	/* a szukebb szovegoszlopban a hosszu, nem torheto (nbsp-s) cimek ne torjenek szotagon belul */
	body.hhx-al #content :is(.hh-hero-copy, .hh-copy, .dht-hero-inner, .dht-split-inner, .tricho-hero-text, .tricho-benefits-text) h2 { font-size: 26px !important; line-height: 1.25 !important; }
}
body.hhx-al #content .dht-infographic-wrap { margin-left: 0 !important; margin-right: 0 !important; }
body.hhx-al #content .dht-infographic { box-sizing: border-box !important; width: auto !important; max-width: min(100%, 500px) !important; margin-left: auto !important; margin-right: auto !important; }
body.hhx-al #content .hh-short-video { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* oldalszintu regi <style> blokkok (pl. mobilon `#cikk h2 { padding-left: 18px !important }`, a hozza tartozo dekor nelkul):
   a cimsorok a kontener szelen kezdodnek */
body.hhx-al #content :is(h2, h3, h4:not(.panel-title)):not(:is(.hhx-esetek, .blog, [class*="card"], .hh-reason, .hh-mini-card, details, blockquote, .hivas, .cont, .hh-video-card) *):not(:is(.egyedi_cikk, .gal_list) > *) {
	padding-left: 0 !important; padding-right: 0 !important;
}
/* kozepre igazitott zaro CTA-bekezdes es arkartya: a kontener szelessegeben (a szoveg kozepre zarva marad) */
body.hhx-al #content .hh-final-cta p { max-width: none !important; }
@media (max-width: 1023px) { body.hhx-al #content .dht-final-price { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } }
/* velemenykartyak (.short8 lista): a kartya a kontener szeleig er */
body.hhx-al #content .short8 > ul > li { padding-left: 0 !important; padding-right: 0 !important; }
/* szerzoi inline behuzas (style="margin-left: 55px") a bekezdeseken: a kontener szelen kezdodnek */
body.hhx-al #content #cikk p[style*="margin-left"] { margin-left: 0 !important; }
/* esetoldal (.sub_gal): galeria + leiras ket hasabban 1024 px folott, alatta egymas alatt, a kontener szelessegeben */
@media (min-width: 1024px) {
	body.hhx-al #content .sub_gal:has(> .left):has(> .right) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 48px !important; align-items: start !important; }
	body.hhx-al #content .sub_gal:has(> .left):has(> .right) > :not(.left, .right) { grid-column: 1 / -1 !important; }
}
@media (max-width: 1023px) {
	body.hhx-al #content .sub_gal > :is(.left, .right) { display: block !important; width: auto !important; }
	body.hhx-al #content .gal_list_slide { display: block !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
	body.hhx-al #content .dht-infographic { max-width: none !important; }
}
/* velemenykartya: mobilon ne legyen tablazatos kiszelesedes */
body.hhx-al #content .short8 .cont { display: block !important; box-sizing: border-box !important; max-width: 100% !important; }
@media (max-width: 767px) { body.hhx-al #content .short8 .cont { padding-left: 20px !important; padding-right: 20px !important; } }
body.hhx-al #content .hh-short-video { width: auto !important; }
/* mobilon a 2. szakasz a listaelemeket blokkra allitotta (a tablazatos kiszelesedes ellen): list-item-kent a felsorolasjel is megmarad */
@media (max-width: 767px) { body.hhx-al #content li { display: list-item !important; } }
/* galeriakartya: a cim a kartya belso margojaval egyvonalban (a 2. szakasz kozos H2-szabalya nullazta es felnagyitotta) */
body.hhx-al #content .hhx-esetek .hhx-eset-cim { padding: 14px 16px 4px !important; margin: 0 !important; font-size: 19px !important; line-height: 1.35 !important; }
/* karrier-urlap: a #cikk kontenerben, nem a kepernyo szeleig */
body.hhx-al #content #cikk form.hh-demo-form { box-sizing: border-box !important; width: auto !important; max-width: none !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; }
/* videotar: a szakaszok sajat 20 px-es oldalso belso margoja nelkul */
body.hhx-al #content .hh-video-page > :is(.hh-section, .hh-final-cta) { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }

} /* @layer hhx-fokusz */

/* ===== 4. kor (2026-10-02, msg 8179): egyseges ter a cimsav alatt, rovid osszefoglalo a kontenerben, nincs automatikus
   szoelvalasztas. A hhx-fokusz retegben (lasd a 3. kor magyarazatat). ===== */
@layer hhx-fokusz {

/* "Roviden / In short / Kurz gesagt" osszefoglalo a cimsav utan: a kontenerben, kiemelt dobozban */
body.hhx-al #content p.hh-roviden {
	box-sizing: border-box !important; max-width: none !important;
	margin: 32px max(var(--hhx-gutter), calc((100% - var(--hhx-k, 980px)) / 2)) 0 !important;
	padding: 18px 22px !important; background: var(--hhx-alt) !important; border-left: 3px solid var(--hhx-gold-text) !important; border-radius: var(--hhx-radius) !important;
}

/* a tartalom kezdete: egyseges 32 px (mobilon 24 px) a cimsav alatt, a regi 78-138 px-es felso margok/paddingek helyett */
body.hhx-al #content :is(.egyedi_cikk, #cikk, .sub_gal, .hhx-galeria, .kapcs) { padding-top: 32px !important; margin-top: 0 !important; }
/* a galeriaoldalon a cimsav a .gal_list-en belul all: utana ne maradjon a regi also ter */
body.hhx-al #content .gal_list { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; }
body.hhx-al #content .gal_list > h1 { margin-bottom: 0 !important; }
body.hhx-al #content :is(.gal_list > .filter_data, ul.filter_data) { margin-top: 0 !important; }
body.hhx-al #content div.blog { padding-top: 32px !important; }
body.hhx-al #content .gal_list > ul:not(.filter_data) { margin-top: 32px !important; }
/* a szakaszok elso cime ne hozza a 40 px-es felso margot a tartalom elejere */
body.hhx-al #content :is(.egyedi_cikk, #cikk) > :first-child :is(.left, .right, .top, .cont) > :is(h2, h3):first-child,
body.hhx-al #content :is(.egyedi_cikk, #cikk) > :first-child > :is(h2, h3):first-child,
body.hhx-al #content :is(.egyedi_cikk, #cikk) > :is(h2, h3):first-child { margin-top: 0 !important; }
body.hhx-al #content :is(.egyedi_cikk, #cikk, .sub_gal, .hhx-galeria) > :first-child,
body.hhx-al #content :is(.egyedi_cikk, #cikk, .sub_gal, .hhx-galeria) > :first-child > :first-child,
body.hhx-al #content :is(.egyedi_cikk, #cikk) > :first-child > :first-child > :first-child { margin-top: 0 !important; }
body.hhx-al #content .egyedi_cikk > :first-child:not(.haj_mid, .triv, .tricho-hero, .hh-roviden),
body.hhx-al #content .egyedi_cikk > :first-child:is(.haj_ult, .prf, .szakall, .miert, .hajcont, .reg_ter) > :first-child:not([style*="background"]) { padding-top: 0 !important; }
body.hhx-al #content .egyedi_cikk > .haj_ult:first-child > .haj_top:first-child { padding-top: 0 !important; }
body.hhx-al #content p.hh-roviden + :is(.egyedi_cikk, #cikk) { padding-top: 24px !important; }
/* ures bekezdesek (a regi CMS-bol) ne adjanak felesleges teret */
body.hhx-al #content p:empty { display: none !important; }
@media (max-width: 767px) {
	body.hhx-al #content :is(.egyedi_cikk, #cikk, .sub_gal, .hhx-galeria, .kapcs, div.blog) { padding-top: 24px !important; }
	body.hhx-al #content p.hh-roviden { margin-top: 24px !important; padding: 14px 16px !important; }
	body.hhx-al #content .gal_list > ul:not(.filter_data) { margin-top: 24px !important; }
}

/* mobilon ne legyen tulzott szoelvalasztas: csak a tenylegesen torhetetlen (hosszu) szavak tornek, kotojel nelkul */
body.hhx-al #content :is(p, li, h1, h2, h3, h4, td, th, strong, b, span, a, blockquote) { -webkit-hyphens: manual !important; hyphens: manual !important; }
@media (max-width: 767px) {
	body.hhx-al #content :is(li, p, h2, h3) :is(strong, b) { overflow-wrap: break-word !important; }
}


/* hatteres regi szakaszok a kontenerben: a szoveg ne tapadjon a doboz szelere (belso ter csak ott, ahol a regi CSS hatteret ad) */
body.hhx-al #content :is(.miert .team, .hajcont .para) { padding-left: 28px !important; padding-right: 28px !important; }
@media (min-width: 1201px) {
	body.hhx-al #content :is(.haj_ult > .haj_top, .haj_ult > .haj_mid, .reg_ter > .mid, .triv > .haj_mid) { padding-left: 32px !important; padding-right: 32px !important; border-radius: var(--hhx-radius) !important; }
}
@media (max-width: 1330px) {
	body.hhx-al #content .egyedi_cikk .triv .orvos { padding-left: 20px !important; padding-right: 20px !important; border-radius: var(--hhx-radius) !important; }
}
@media (max-width: 767px) {
	body.hhx-al #content :is(.miert .team, .hajcont .para) { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ===== msg 8202 (2026-10-02): esetoldalak (.sub_gal > .gal_list_slide + .right) =====
   1) Elotte-utana csuszka: a plan.js az .img_cont2 (utana) clip-path-jat allitja a range-input szerint, de a regi
      style.css az .img_cont1-et (elotte) tette abszolut, felso retegbe, a v2 "width: auto" pedig teljes szelesre
      nyujtotta, igy a vagas nem latszott. Itt az .img_cont1 az alsó, az .img_cont2 a felso (vagott) reteg;
      a fogantyutol balra az "utana", jobbra az "elotte" kep latszik, ezt cimke jelzi.
   2) Elrendezes: egy hasab, olvasasi szelesseg; sorrend: cim (H1 a cimsavban), nev + graftszam (H2), csuszka/keppar,
      belyegkepek, diagnozis es leiras, zonaabra, videok; utana a visszahivas-urlap (CTA). Tartalom nem valtozik. */
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) {
	--hhx-k: 760px; display: flex !important; flex-direction: column !important; gap: 0 !important;
}
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > :is(.left, .right) { display: contents !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .right > * { order: 4 !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .right > :is(h2, h3):first-child { order: 1 !important; margin: 0 0 20px !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .right > :is(h2, h3):first-child > br:first-child { display: none !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .before1_slide { order: 2 !important; align-self: stretch !important; width: 100% !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .elite-gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .elite-gallery > a { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .elite-gallery img { display: block !important; width: 100% !important; height: auto !important; border-radius: 4px !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > :not(.before1_slide) { order: 3 !important; margin: 12px 0 28px !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .before1_slide > img + img { margin-top: 12px !important; }
/* vezerlo nelkuli keppar (elotte + utana kep): asztalin egymas mellett */
@media (min-width: 768px) {
	body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .before1_slide:not(:has(> .before_slider_input)):has(> img + img) {
		display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important;
	}
	body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .left > .before1_slide > img + img { margin-top: 0 !important; }
}
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) .before1_slide img { display: block !important; width: 100% !important; height: auto !important; border-radius: var(--hhx-radius) !important; }
body.hhx-al #content div.sub_gal:has(> div.left.gal_list_slide) > .right iframe { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; border: 0 !important; }

.before1_slide:has(> .before_slider_input) { position: relative !important; overflow: hidden !important; border-radius: var(--hhx-radius) !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .img_cont { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .img_cont img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .img_cont1 { position: relative !important; z-index: 1 !important; inset: auto !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .img_cont2 { position: absolute !important; z-index: 2 !important; inset: 0 !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .before_slider_input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; z-index: 100 !important; cursor: ew-resize !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input) > .slider-button { z-index: 5 !important; pointer-events: none !important; }
body.hhx-al #content .before1_slide:has(> .before_slider_input)::before,
body.hhx-al #content .before1_slide:has(> .before_slider_input)::after {
	position: absolute; top: 12px; z-index: 6; padding: 4px 10px; border-radius: 4px; background: rgba(31, 29, 26, .72); color: #fff;
	font: 600 13px/1.3 var(--hhx-font); pointer-events: none;
}
body.hhx-al #content .before1_slide:has(> .before_slider_input)::before { content: "Utána"; left: 12px; }
body.hhx-al #content .before1_slide:has(> .before_slider_input)::after { content: "Előtte"; right: 12px; }
html[lang^="en"] body.hhx-al #content .before1_slide:has(> .before_slider_input)::before { content: "After"; }
html[lang^="en"] body.hhx-al #content .before1_slide:has(> .before_slider_input)::after { content: "Before"; }
html[lang^="de"] body.hhx-al #content .before1_slide:has(> .before_slider_input)::before { content: "Nachher"; }
html[lang^="de"] body.hhx-al #content .before1_slide:has(> .before_slider_input)::after { content: "Vorher"; }

/* ===== msg 8209 (2026-10-02): olvashatosag (WCAG AA) a sotet es arany hatteru elemeken =====
   Ok: a 2. szakasz tipografiai szabalyai (h2/h3: var(--hhx-ink) !important, p/li: #3b3731, linkek: arany) minden
   tartalmi szovegre sotet szint adnak, kiveve a felsorolt sotet szakaszokat; a TrichoLAB "Hogyan nez ki a gyakorlatban?"
   szakasza (.tricho-timeline, #3c3c3c hatter) nem volt a listan. A lista bovult; itt a sotet szakaszok arany
   szemoldokcimkei, jelvenyei es a sotet gombok szovegszine kap AA-szintu erteket a v2 palettabol. */
body.hhx-al #content .tricho-timeline :is(.tricho-section-title h2, .tricho-section-title p, .timeline-item h3, .timeline-item p) { color: #fff !important; }
body.hhx-al #content :is(.tricho-timeline .tricho-section-title > span, .hh-section-dark .hh-eyebrow, .hh-section-charcoal .hh-eyebrow,
	.hh-section-dark details > summary, .hh-section-charcoal details > summary) { color: #e3d0a0 !important; }
body.hhx-al #content .tricho-timeline .timeline-item > span { background: var(--hhx-gold-text) !important; color: #fff !important; }
/* sotet hatteru gombok: a v2 linkszin (arany) helyett feher szoveg */
body.hhx-al #content .triv .orvos p a:not([class]) { color: #fff !important; }
body.hhx-al #content :is(a.styled, a.gal_tov, a.team_button, .hh-btn) span[style*="color"] { color: inherit !important; }
/* regi arany (#c1a764 / #b99a54) hatteru gombok, kepfeliratok, jelvenyek feher szoveggel (2,3-2,7:1): a v2 sotet aranya (5,6:1) */
body.hhx-al #content :is(a.ter_link, .gal_capt, div.skype, .tricho-wrap .process-step > p > span) { background-color: var(--hhx-gold-text) !important; }
body.hhx-al #content :is(a.ter_link, .gal_capt, div.skype) { color: #fff !important; }
/* vilagos hatteren arany szoveg (2,1-2,7:1): a v2 sotet aranya */
body.hhx-al #content .haj_mid a span { color: inherit !important; }
body.hhx-al #content .haj_mid :is(p, strong) > span:not([class]) { color: var(--hhx-gold-text) !important; }
body.hhx-al #content :is(.tricho-section-title > span, .tricho-split .eyebrow, .tricho-benefits-text .eyebrow, .tricho-wrap blockquote cite, .tricho-wrap .eyebrow, .tricho-wrap p > span:only-child):not(.tricho-timeline *, .process-step *) { color: var(--hhx-gold-text) !important; }
body.hhx-al #content .compare-box.digital :is(li, p, h3) { color: var(--hhx-ink) !important; }

/* TrichoLAB "Mit erzekel ebbol a paciens?" sav: a fekvo foto nem nyulik a magas szovegoszlop melle
   (cover-vagas helyett a kep a sajat aranyaban, fuggolegesen kozepen) */
body.hhx-al #content .tricho-benefits-wide > .tricho-benefits-img { align-self: center !important; min-height: 0 !important; height: auto !important; }
body.hhx-al #content .tricho-benefits-wide > .tricho-benefits-img > img { height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }


/* ===== msg 8212 (2026-10-02): csapatoldal-kartyak (ul.csapat_list10 > li > img + b + span) =====
   Ok: egyes kartyakon a portre es a nev kozott egy &nbsp; szovegcsomopont all (a tobbin sima szokoz), ez az
   inline-block li-ben kulon sort nyit (~28 px), ezert az a nev lejjebb kerul; a sorok inline-block alapvonalra
   igazodnak. Itt a li betumerete 0 (a koztes szokoz/&nbsp; nem foglal helyet), a portre blokk, a nev es a beosztas
   kifejezett meretet es egyseges terkozt kap, a kartyak a sor tetejere igazodnak. Tartalom nem valtozik. */
body.hhx-al #content ul.csapat_list10 > li { font-size: 0 !important; line-height: 0 !important; vertical-align: top !important; }
body.hhx-al #content ul.csapat_list10 > li > img { display: block !important; margin: 0 auto !important; }
body.hhx-al #content ul.csapat_list10 > li > b { font-size: 18px !important; line-height: 1.3 !important; margin: 14px auto 2px !important; }
body.hhx-al #content ul.csapat_list10 > li > span,
body.hhx-al #content ul.csapat_list10 > li > span span { font-size: 14px !important; line-height: 1.4 !important; }


/* ===== msg 8211 (2026-10-02): regi ikonos elonyblokk (.haj_ikon > ul > li > img + span) =====
   Ok: a regi style.css a li-t display: table + float: left + width: 50% + height: 150px, a kepet float: left alakban
   rendezte; a v2 max-width: 100% a tablas li-ben ~10 px-re zsugoritotta az ikont, a fix magassagu lebego li-k pedig
   a hosszabb szovegnel egymas ala/melle csusztak (cikcakk, ures foltok). Itt rendezett racs: 1024 px-tol 2 oszlop,
   alatta 1; elemenkent ikon (eredeti 1:1 arany, 150 / 120 / 96 px) + balra zart szoveg; 600 px alatt az ikon a szoveg felett. */
body.hhx-al #content .haj_ikon { display: block !important; width: auto !important; margin: 32px 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.hhx-al #content .haj_ikon > ul {
	display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px 48px !important;
	width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.hhx-al #content .haj_ikon > ul > li {
	display: grid !important; grid-template-columns: 96px minmax(0, 1fr) !important; column-gap: 20px !important; align-items: center !important;
	float: none !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.hhx-al #content .haj_ikon > ul > li::before { content: none !important; display: none !important; }
body.hhx-al #content .haj_ikon > ul > li > img {
	float: none !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important;
	aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important;
}
body.hhx-al #content .haj_ikon > ul > li > span { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
@media (max-width: 599px) {
	body.hhx-al #content .haj_ikon > ul > li { grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px !important; }
	body.hhx-al #content .haj_ikon > ul > li > img { width: 96px !important; }
}
@media (min-width: 768px) {
	body.hhx-al #content .haj_ikon > ul > li { grid-template-columns: 120px minmax(0, 1fr) !important; column-gap: 24px !important; }
}
@media (min-width: 1024px) {
	body.hhx-al #content .haj_ikon > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
	body.hhx-al #content .haj_ikon > ul > li { grid-template-columns: 150px minmax(0, 1fr) !important; }
}

} /* @layer hhx-fokusz */