/* =============================================================================
   Celthera Labs — design rendszer
   -----------------------------------------------------------------------------
   Token-alapú. Minden érték itt fent van definiálva; a komponensek csak
   hivatkoznak rájuk. Ha a márka hangolódik, a :root blokkot kell átírni,
   nem a komponenseket.

   Elvek (Apple HIG webre fordítva):
   - A tartalom az úr. A keret visszahúzódik.
   - A hierarchiát méret és térköz adja, nem keret, árnyék vagy szín.
   - A szín funkció, nem dekoráció. Ez a paletta szándékosan monokróm.
   - Minden térköz 4 px-es rácson ül.
   - A mozgás gyors, rövid és visszafogott; a `prefers-reduced-motion` tiszteletben.
   ========================================================================== */

/* ---------- 1. Betűtípus ---------- */

@font-face {
	font-family: 'Celthera Display';
	src: url('../fonts/celthera-display-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Celthera Display';
	src: url('../fonts/celthera-display-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- 2. Tokenek ---------- */

:root {
	/* Tinta és felület. Hidegre hangolt szürkék — a klinikai fehér
	   termékfotókhoz a semleges szürke sárgásnak látszana mellettük. */
	--ct-ink:        #14161A;
	--ct-ink-2:      #3A3F47;
	--ct-ink-3:      #6B7280;
	--ct-line:       #E3E5E9;
	--ct-line-soft:  #EFF0F2;
	--ct-line-strong:#CDD2DA;
	--ct-surface:    #FFFFFF;
	--ct-surface-2:  #FAFAFA;
	--ct-surface-3:  #F4F5F6;

	/* Állapotszínek. Csak ezek színesek az egész oldalon, és csak
	   ott jelennek meg, ahol a szín információt hordoz. */
	--ct-danger:     #9B2C2C;
	--ct-success:    #2F6B4F;

	/* Betűcsaládok. A UI a rendszer betűjét használja: Apple eszközön ez
	   az SF Pro — vagyis szó szerint a HIG betűtípusa —, Windowson a Segoe.
	   Nincs letöltés, nincs elmozduló szöveg, natív renderelés. */
	--ct-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--ct-font-display: 'Celthera Display', 'Didot', 'Bodoni MT', 'Times New Roman', serif;

	/* Tipográfiai skála. A törzsszöveg 17 px — az SF ajánlott olvasóméret.
	   A display méretek folyékonyak: kis kijelzőn sem törnek meg. */
	--ct-t-xs:   0.8125rem;   /* 13 — meta, címke */
	--ct-t-sm:   0.9375rem;   /* 15 — másodlagos, gomb */
	--ct-t-base: 1.0625rem;   /* 17 — törzsszöveg */
	--ct-t-md:   1.1875rem;   /* 19 — bevezető */
	--ct-t-lg:   clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	--ct-t-xl:   clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
	--ct-t-2xl:  clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
	--ct-t-3xl:  clamp(2.75rem, 1.7rem + 4.4vw, 5rem);

	/* Térköz — 4 px-es rács. */
	--ct-s-1: 4px;   --ct-s-2: 8px;   --ct-s-3: 12px;  --ct-s-4: 16px;
	--ct-s-5: 24px;  --ct-s-6: 32px;  --ct-s-7: 48px;  --ct-s-8: 64px;
	--ct-s-9: 96px;  --ct-s-10: 128px;

	/* Forma és mozgás. */
	--ct-r-sm: 6px;
	--ct-r-md: 8px;
	--ct-r-lg: 12px;
	--ct-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--ct-dur: 200ms;

	/* Betűköz: a Didone nagy méretben szűkebb, kis méretben tágabb kell legyen. */
	--ct-track-display: -0.015em;
	--ct-track-caps: 0.16em;
}

/* Blocksy saját változóinak átkötése a rendszerre, hogy a téma
   komponensei is a mi tokenjeinket használják. */
:root {
	--theme-palette-color-1: var(--ct-ink);
	--theme-palette-color-2: var(--ct-ink-2);
	--theme-palette-color-3: var(--ct-ink-2);
	--theme-palette-color-4: var(--ct-ink);
	--theme-palette-color-5: var(--ct-line);
	--theme-palette-color-6: var(--ct-surface-2);
	--theme-palette-color-7: var(--ct-surface-3);
	--theme-palette-color-8: var(--ct-surface);
	--theme-text-color: var(--ct-ink-2);
	--theme-link-initial-color: var(--ct-ink);
	--theme-link-hover-color: var(--ct-ink-3);
	--theme-headings-color: var(--ct-ink);
	--theme-font-family: var(--ct-font-ui);
	--theme-font-size: var(--ct-t-base);
	--theme-line-height: 1.6;
	--theme-button-text-initial-color: #fff;
	--theme-button-background-initial-color: var(--ct-ink);
	--theme-button-background-hover-color: var(--ct-ink-2);
	--theme-button-border-radius: var(--ct-r-md);
	--theme-border-radius: var(--ct-r-md);
}

/* ---------- 3. Alap ---------- */

html { -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-base);
	line-height: 1.6;
	color: var(--ct-ink-2);
	background: var(--ct-surface-2);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--ct-ink); color: #fff; }

/* Fókuszgyűrű: mindig látható billentyűzetes navigációnál.
   HIG és WCAG egyaránt megköveteli — kivenni nem opció. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ct-ink);
	outline-offset: 3px;
	border-radius: var(--ct-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 4. Tipográfia ---------- */

h1, h2, h3, h4,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--ct-font-display);
	font-weight: 400;
	color: var(--ct-ink);
	letter-spacing: var(--ct-track-display);
	line-height: 1.12;
	text-wrap: balance;
}

h1, .page-title, .product_title { font-size: var(--ct-t-2xl); }
h2 { font-size: var(--ct-t-xl); }
h3 { font-size: var(--ct-t-lg); }
h4 { font-size: var(--ct-t-md); }

p { text-wrap: pretty; }

/* Bevezető bekezdés: az első bekezdés a címsor után nagyobb és halványabb.
   Ez adja a lélegzetet a hierarchiában, szín és keret nélkül. */
.ct-container h1 + p,
.entry-content > h1 + p { font-size: var(--ct-t-md); color: var(--ct-ink-2); }

/* Verzálos kísérőszöveg (kategória, meta, címke). */
.woocommerce-breadcrumb,
.posted_in,
.product_meta,
.wc-block-components-product-metadata,
.ct-meta {
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
}

/* Linkek: aláhúzás eltolással, nem szín. Monokróm rendszerben a szín
   nem tudja jelezni, hogy valami kattintható. */
.entry-content a:not(.wp-block-button__link):not(.button):not(.wc-block-grid__product-link),
.celthera-blocks a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--ct-line);
	transition: text-decoration-color var(--ct-dur) var(--ct-ease);
}
.entry-content a:not(.wc-block-grid__product-link):hover { text-decoration-color: var(--ct-ink); }

/* ---------- 5. Fejléc ---------- */

header[data-device] .ct-container,
.ct-header [data-row] > .ct-container { padding-block: var(--ct-s-4); }

.ct-header { background: var(--ct-surface); border-bottom: 1px solid var(--ct-line-soft); }

.site-branding .site-title { display: none; }
.site-logo-container img { height: clamp(30px, 3.2vw, 40px); width: auto; }

.header-menu-1 > li > a,
.ct-header nav a {
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-2);
	transition: color var(--ct-dur) var(--ct-ease);
}
.ct-header nav a:hover { color: var(--ct-ink); }

/* ---------- 6. Gombok ---------- */

.wp-block-button__link,
.button, button.button, input[type="submit"],
.wc-block-components-button,
.ff-btn, .ff-btn-submit {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--ct-r-md);
	border: 1px solid var(--ct-ink);
	background: var(--ct-ink);
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	transition: background var(--ct-dur) var(--ct-ease),
	            border-color var(--ct-dur) var(--ct-ease),
	            transform 120ms var(--ct-ease);
}

.wp-block-button__link:hover,
.button:hover, button.button:hover, input[type="submit"]:hover,
.wc-block-components-button:hover, .ff-btn:hover {
	background: var(--ct-ink-2);
	border-color: var(--ct-ink-2);
	color: #fff;
}

/* Lenyomás: 1 %-os visszahúzódás. Épp annyi, hogy érezhető legyen. */
.wp-block-button__link:active,
.button:active, .wc-block-components-button:active { transform: scale(0.99); }

/* Másodlagos gomb: hajszálkeret, tinta szöveg. */
.is-style-outline .wp-block-button__link,
.button.alt-secondary {
	background: transparent;
	color: var(--ct-ink);
	border-color: var(--ct-line);
}
.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	color: var(--ct-ink);
	border-color: var(--ct-ink);
}

/* ---------- 7. Űrlapmezők ---------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
select, textarea,
.wc-block-components-text-input input {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-base);
	color: var(--ct-ink);
	background: var(--ct-surface);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	padding: 12px 14px;
	transition: border-color var(--ct-dur) var(--ct-ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--ct-ink); }
::placeholder { color: var(--ct-ink-3); opacity: 1; }

label { font-size: var(--ct-t-sm); color: var(--ct-ink-2); }

/* ---------- 8. Boltrács és termékkártya ---------- */

.woocommerce ul.products { gap: var(--ct-s-7) var(--ct-s-5); }

ul.products li.product {
	background: transparent;
	border: 0;
	padding: 0;
	text-align: left;
}

ul.products li.product a img,
.wc-block-grid__product-image img {
	background: var(--ct-surface);
	border: 1px solid var(--ct-line-soft);
	border-radius: var(--ct-r-lg);
	transition: border-color var(--ct-dur) var(--ct-ease);
}
ul.products li.product:hover a img { border-color: var(--ct-line); }

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-md);
	line-height: 1.25;
	color: var(--ct-ink);
	margin: var(--ct-s-4) 0 var(--ct-s-1);
}

ul.products li.product .price,
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
	font-variant-numeric: tabular-nums;
}

/* A kártya gombja másodlagos: a képek és a nevek a főszereplők. */
ul.products li.product .button {
	background: transparent;
	color: var(--ct-ink);
	border-color: var(--ct-line);
	padding: 10px 18px;
	margin-top: var(--ct-s-3);
}
ul.products li.product .button:hover {
	background: var(--ct-ink);
	color: #fff;
	border-color: var(--ct-ink);
}

.woocommerce-result-count,
.woocommerce-ordering select {
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
}

/* ---------- 9. Termékoldal ---------- */

.single-product div.product .product_title { margin-bottom: var(--ct-s-4); }

.single-product div.product .price {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-md);
	color: var(--ct-ink);
	font-variant-numeric: tabular-nums;
}

.woocommerce-product-details__short-description {
	font-size: var(--ct-t-md);
	color: var(--ct-ink-2);
	margin-block: var(--ct-s-5);
}

.woocommerce-product-gallery img {
	border-radius: var(--ct-r-lg);
	background: var(--ct-surface);
}

/* Specifikációs táblázat: hajszálvonalak, tabuláris számok, semmi zebra. */
.celthera-specs {
	width: 100%;
	border: 0;                  /* a téma külső táblázatkeretének kiütése */
	border-collapse: collapse;
	margin: var(--ct-s-5) 0;
	font-size: var(--ct-t-sm);
	font-variant-numeric: tabular-nums;
}
.celthera-specs th,
.celthera-specs td {
	text-align: left;
	padding: var(--ct-s-3) 0;
	border: 0;
	border-bottom: 1px solid var(--ct-line-soft);
	vertical-align: top;
	background: transparent;
}
.celthera-specs tr:last-child th,
.celthera-specs tr:last-child td { border-bottom: 0; }
.celthera-specs th {
	width: 38%;
	font-weight: 400;
	color: var(--ct-ink-3);
	padding-right: var(--ct-s-5);
}
.celthera-specs td { color: var(--ct-ink); }

/* ---------- 10. Minőség / tárolás / jogi blokkok ---------- */

.celthera-blocks {
	margin-top: var(--ct-s-9);
	padding-top: var(--ct-s-7);
	border-top: 1px solid var(--ct-line);
}
.celthera-blocks h2 {
	font-size: var(--ct-t-xs);
	font-family: var(--ct-font-ui);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
	margin: var(--ct-s-7) 0 var(--ct-s-3);
}
.celthera-blocks h2:first-child { margin-top: 0; }
.celthera-blocks p {
	font-size: var(--ct-t-sm);
	line-height: 1.65;
	margin: 0 0 var(--ct-s-3);
	max-width: 68ch;
}

/* A jogi blokk nem apróbetűs rész. Ugyanakkora, mint a többi szöveg,
   csak elhatárolva — a „research use only" pozíció csak akkor véd,
   ha tényleg olvasható. */
.celthera-legal {
	padding: var(--ct-s-5);
	background: var(--ct-surface-3);
	border-radius: var(--ct-r-lg);
}
.celthera-legal p:first-child {
	font-weight: 600;
	color: var(--ct-ink);
	letter-spacing: 0.01em;
}

/* ---------- 11. Kosár és pénztár ---------- */

.wc-block-components-totals-item__value,
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

.wc-block-components-checkout-step__title,
.woocommerce-checkout h3 {
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-lg);
}

/* A pénztári vevői nyilatkozat kiemelése: ez nem apró jelölőnégyzet
   a lap alján, hanem a rendelés feltétele. */
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
	background: var(--ct-surface-3);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	padding: var(--ct-s-4);
}

/* ---------- 12. Lábléc ---------- */

footer.ct-footer {
	background: var(--ct-surface);
	border-top: 1px solid var(--ct-line-soft);
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-3);
}
footer.ct-footer a { color: var(--ct-ink-2); }

/* ---------- 13. Tartalomszélesség és mérték ---------- */

/* A tartalomterület maga veszi fel a téma konténerének szélességét.
   Enélkül a .entry-content teljes szélességű, és minden gyerekblokkot a
   WordPress „constrained" elrendezése húz be középre — a szűkebb
   szövegoszlop így beljebb kezdődik, mint a fölötte lévő címsor.
   Ha a konténer maga a helyén van, elég a gyerekeket balra zárni.
   A képlet a Blocksy sajátja: min(konténer, 90vw) — mobilon így megmarad
   az 5vw oldalmargó. */
.entry-content {
	max-width: min(
		var(--theme-normal-container-max-width, 1290px),
		var(--theme-container-width-base, 90vw)
	);
	margin-inline: auto;
}

/* Olvasható sorhossz. 68 karakter fölött a szem elveszti a sor elejét.
   A margin-inline:0 azért kell, mert a téma minden tartalmi blokkot
   automatikus margóval középre húz — a szűkebb bekezdés így elcsúszna
   a vele egy oszlopban álló címsorhoz képest. Az egymás alatti elemek
   BAL ÉLE közös kell legyen, különben a szöveg lépcsőzik. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > figure,
.entry-content > table {
	max-width: 68ch;
	/* A WordPress „constrained" elrendezése !important-tal középre húzza a
	   blokkokat (.is-layout-constrained). Nekünk balra zárt szövegoszlop
	   kell, a címsorokkal KÖZÖS bal éllel — enélkül a szöveg beljebb
	   kezdődik, mint a fölötte lévő cím, és a lap lépcsőzik. Ez az egyetlen
	   hely a rendszerben, ahol !important indokolt. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Címsor és az utána jövő bekezdés között szűkebb a hézag, mint a
   bekezdés és a KÖVETKEZŐ címsor között. Így a cím a saját szövegéhez
   tapad — ez adja a szakaszolást, nem elválasztó vonal. */
.entry-content > h2 { margin-block: var(--ct-s-8) var(--ct-s-4); }
.entry-content > h3 { margin-block: var(--ct-s-6) var(--ct-s-3); }
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

/* Oldalfejléc: a cím és a tartalom közti levegő. */
.page-header,
.entry-header { margin-bottom: var(--ct-s-7); }

/* Listák: a golyó kilóg a szövegoszlopból, hogy a sorkezdet egyvonalban
   maradjon a bekezdésekkel. */
.entry-content > ul,
.entry-content > ol { padding-left: 1.1em; }
.entry-content li { margin-bottom: var(--ct-s-2); }
.entry-content li::marker { color: var(--ct-ink-3); }

/* ---------- 14. Lander ---------- */

/* A főoldal címe maga a wordmark: nagy, tág betűközzel, középen.
   Egyetlen H1 az oldalon. */
body.home .page-title {
	font-family: var(--ct-font-display);
	font-weight: 400;
	font-size: var(--ct-t-3xl);
	letter-spacing: 0.18em;
	text-indent: 0.18em;        /* a tracking optikai kiegyenlítése */
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
	margin: 0;
	line-height: 1.05;
}
body.home .page-header,
body.home .ct-container > article > .page-header {
	text-align: center;
	margin-bottom: var(--ct-s-6);
}

/* A hero elemei egy csoportot alkotnak: szoros belső térközök, és utána
   egyetlen nagy szünet a következő szakaszig. Az egyenletes hézagok
   szétesőnek látszanak — a HIG szerint a közelség jelöli az összetartozást. */
body.home .entry-content > p {
	max-width: 60ch;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}
body.home .entry-content > .wp-block-buttons { margin-block: var(--ct-s-6); }
body.home .entry-content > p em { color: var(--ct-ink-3); font-size: var(--ct-t-sm); }

/* Szekciócímek a landeren. */
body.home .entry-content h2 {
	font-size: var(--ct-t-xl);
	text-align: center;
	margin: var(--ct-s-9) 0 var(--ct-s-7);
}
body.home .entry-content .wc-block-grid + h2 { margin-top: var(--ct-s-9); }

/* ---------- 15. Blokk-alapú termékrács (lander) ----------
   A WooCommerce „Newest products" blokk NEM a bolt ul.products jelöléseit
   használja, hanem a saját wc-block-grid osztályait. A 8. szakasz szabályai
   ezért nem érték el — a landeren középre zárt, félkövér, feltöltött gombos
   kártyák jelentek meg a boltban látható visszafogott kártyák helyett.
   Itt kötjük vissza a rácsot ugyanarra a nyelvre. */

/* A blokk saját rácsa flexbox `flex: 1 0 25%` + `max-width: 25%` alapon áll.
   Ez a modell nem ismeri a hézagot: négy darab 25 %-os elem plusz három
   hézag már túlcsordul, ezért a negyedik kártya új sorba esik. Rácsra
   váltunk, ahol a hézag a sávszélesség része — így pontosan annyi oszlop
   lesz, amennyit a blokk beállítása kér. */
/* Két osztály kell: a WooCommerce all-products.css ugyanilyen erős
   szelektorral írja elő a flexet, és később töltődik. */
.wc-block-grid ul.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(var(--ct-cols, 4), minmax(0, 1fr));
	gap: var(--ct-s-7) var(--ct-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wc-block-grid.has-1-columns ul.wc-block-grid__products { --ct-cols: 1; }
.wc-block-grid.has-2-columns ul.wc-block-grid__products { --ct-cols: 2; }
.wc-block-grid.has-3-columns ul.wc-block-grid__products { --ct-cols: 3; }
.wc-block-grid.has-4-columns ul.wc-block-grid__products { --ct-cols: 4; }
.wc-block-grid.has-5-columns ul.wc-block-grid__products { --ct-cols: 5; }
.wc-block-grid.has-6-columns ul.wc-block-grid__products { --ct-cols: 6; }

.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	max-width: none;
	width: auto;
	flex: initial;
	margin: 0;
	padding: 0;
}

.wc-block-grid__product-link { text-decoration: none; }

.wc-block-grid__product-image {
	margin: 0;
	display: block;
}
.wc-block-grid__product-image img {
	width: 100%;
	height: auto;
	background: var(--ct-surface);
	border: 1px solid var(--ct-line-soft);
	border-radius: var(--ct-r-lg);
	transition: border-color var(--ct-dur) var(--ct-ease);
}
.wc-block-grid__product:hover .wc-block-grid__product-image img { border-color: var(--ct-line); }

/* A wc-blocks.css `font-family: inherit`-et ír elő három osztályos
   szelektorral. Ezért itt is három osztály kell — különben a kártyacím
   a törzsbetűt örökli, és nem lesz Didone. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
	font-family: var(--ct-font-display);
	font-weight: 400;
	font-size: var(--ct-t-md);
	line-height: 1.25;
	color: var(--ct-ink);
	text-align: left;
	margin: var(--ct-s-4) 0 var(--ct-s-1);
	/* Két sorra fenntartott hely: enélkül a hosszabb nevű kártya lejjebb
	   tolja a saját árát és gombját, és a rács alja lépcsőzik. */
	min-height: 2.5em;
}

.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
	font-variant-numeric: tabular-nums;
	text-align: left;
	margin: 0;
}
.wc-block-grid__product-price del { color: var(--ct-ink-3); }

/* A gomb a kártya aljára kerül, így minden kártyán egy vonalban áll. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	margin-top: auto;
	padding-top: var(--ct-s-3);
	text-align: left;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	background: transparent;
	color: var(--ct-ink);
	border: 1px solid var(--ct-line);
	padding: 10px 18px;
	font-size: var(--ct-t-sm);
	font-weight: 500;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--ct-ink);
	color: #fff;
	border-color: var(--ct-ink);
}
.wc-block-grid__product-add-to-cart .added_to_cart { display: none; }

/* ---------- 16. Kosár ---------- */

/* A termékfotók fehér alapon fehérek. Keret nélkül a kosárban egyszerűen
   nem látszik, hogy van kép — üres hasábnak tűnik. */
.woocommerce-cart-form .product-thumbnail img,
.woocommerce-checkout-review-order .product-thumbnail img {
	border: 1px solid var(--ct-line-soft);
	border-radius: var(--ct-r-md);
	background: var(--ct-surface);
}

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	/* A Blocksy szaggatott elválasztót használ. Szaggatott vonal
	   ideiglenességet sugall — egy fizetési összesítőn ez rossz üzenet. */
	border-bottom: 1px solid var(--ct-line-soft);
	background: transparent;
	padding: var(--ct-s-4) var(--ct-s-3);
}
.woocommerce table.shop_table thead th {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
	border-bottom-color: var(--ct-line);
	padding-bottom: var(--ct-s-3);
}
.woocommerce table.shop_table td.product-name a {
	color: var(--ct-ink);
	text-decoration: none;
	font-weight: 500;
}
.woocommerce table.shop_table td.product-name a:hover { text-decoration: underline; }

/* Mennyiségléptető: egyetlen hajszálkeretes elem, nem három külön doboz. */
.woocommerce .quantity {
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	overflow: hidden;
	background: var(--ct-surface);
	display: inline-flex;
	align-items: stretch;
}
.woocommerce .quantity input.qty {
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Kupon: nem ez a fő művelet ezen az oldalon, ezért másodlagos. */
.woocommerce .coupon .button,
.woocommerce button[name="update_cart"] {
	background: transparent;
	color: var(--ct-ink);
	border: 1px solid var(--ct-line);
}
.woocommerce .coupon .button:hover,
.woocommerce button[name="update_cart"]:not(:disabled):hover {
	background: var(--ct-ink);
	color: #fff;
	border-color: var(--ct-ink);
}
.woocommerce button[name="update_cart"]:disabled { opacity: 0.4; }

/* Összesítő panel. */
.cart_totals,
.woocommerce-checkout-review-order {
	background: var(--ct-surface);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	padding: var(--ct-s-6);
}
.woocommerce .cart_totals h2,
.woocommerce .woocommerce-checkout-review-order h2,
.woocommerce #order_review_heading,
#order_review_heading {
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-lg);
	margin: 0 0 var(--ct-s-5);
}
.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
	border-bottom: 0;
	border-top: 1px solid var(--ct-line);
	padding-top: var(--ct-s-4);
	font-size: var(--ct-t-md);
	color: var(--ct-ink);
}
.woocommerce-shipping-destination,
.woocommerce-shipping-methods label { font-size: var(--ct-t-sm); }
.shipping-calculator-button { font-size: var(--ct-t-sm); }

.wc-proceed-to-checkout .checkout-button { display: block; width: 100%; text-align: center; }

/* ---------- 17. Pénztár ---------- */

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-lg);
	margin-bottom: var(--ct-s-5);
}

/* A csillag jelentése „kötelező", nem „hiba". Pirosan riasztásnak látszik,
   pedig még nem történt semmi. Semleges szürkével jelöljük. */
.woocommerce form .form-row .required,
.woocommerce abbr.required,
.ff-el-is-required.asterisk-right::after,
.ff-el-is-required.asterisk-left::before {
	color: var(--ct-ink-3);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row label { display: block; margin-bottom: var(--ct-s-2); }
.woocommerce form .form-row { margin-bottom: var(--ct-s-5); padding: 0; }

/* A legördülők a rendszer alap háttérszínét öröklik. Egy szürke mező
   letiltottnak látszik a mellette lévő fehér szövegmezők mellett. */
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection {
	background-color: var(--ct-surface);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	min-height: 48px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	color: var(--ct-ink);
}
.select2-dropdown {
	border-color: var(--ct-line);
	border-radius: var(--ct-r-md);
	overflow: hidden;
}

/* A vevői nyilatkozat nem apró jelölőnégyzet a lap alján, hanem a
   rendelés feltétele. Kap saját dobozt, közvetlenül a gomb fölött. */
.celthera-consent,
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
	background: var(--ct-surface-3);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	padding: var(--ct-s-4);
	margin-bottom: var(--ct-s-5);
}
.celthera-consent .form-row { margin: 0; padding: 0; }
.celthera-consent label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--ct-s-3);
	align-items: start;
	font-size: var(--ct-t-sm);
	line-height: 1.5;
	color: var(--ct-ink-2);
	cursor: pointer;
}
.celthera-consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ct-ink);
	flex: none;
}

/* Fizetési módok. */
#payment { background: transparent; border-radius: 0; }
#payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 var(--ct-s-5);
}
#payment ul.payment_methods li {
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	padding: var(--ct-s-4);
	margin-bottom: var(--ct-s-3);
	list-style: none;
	background: var(--ct-surface);
}
#payment ul.payment_methods li label { font-size: var(--ct-t-base); color: var(--ct-ink); }
#payment div.payment_box {
	background: var(--ct-surface-3);
	border-radius: var(--ct-r-md);
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
	margin: var(--ct-s-3) 0 0;
	padding: var(--ct-s-4);
}
#payment div.payment_box::before { display: none; }
#place_order { width: 100%; }

.woocommerce-privacy-policy-text { font-size: var(--ct-t-sm); color: var(--ct-ink-3); }

/* ---------- 18. Rendszerüzenetek ----------
   Ide fut ki az országkorlátozás visszajelzése is. Egy vevő, aki nem tud
   megrendelni valamit, a legrosszabb pillanatban találkozik ezzel a
   dobozzal — ezért olvashatónak és nyugodtnak kell lennie, nem riasztónak. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
	border: 1px solid var(--ct-line);
	border-left-width: 3px;
	border-radius: var(--ct-r-md);
	background: var(--ct-surface);
	color: var(--ct-ink-2);
	font-size: var(--ct-t-sm);
	line-height: 1.55;
	padding: var(--ct-s-4) var(--ct-s-5);
	margin-bottom: var(--ct-s-5);
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message { border-left-color: var(--ct-success); }
.woocommerce-info    { border-left-color: var(--ct-ink-3); }
.woocommerce-error   { border-left-color: var(--ct-danger); }
.woocommerce-error li { margin-bottom: var(--ct-s-2); }
.woocommerce-error li:last-child { margin-bottom: 0; }
.woocommerce-message .button {
	background: transparent;
	color: var(--ct-ink);
	border-color: var(--ct-line);
	padding: 8px 14px;
	font-size: var(--ct-t-xs);
}

/* ---------- 19. Lábléc ---------- */

.celthera-footer {
	background: var(--ct-surface);
	border-top: 1px solid var(--ct-line-soft);
	padding-block: var(--ct-s-8) var(--ct-s-6);
}

.celthera-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--ct-s-7) var(--ct-s-5);
	align-items: start;
}

.celthera-footer__wordmark {
	display: block;
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-md);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink);
	margin-bottom: var(--ct-s-3);
}
.celthera-footer__brand p {
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-3);
	line-height: 1.6;
	max-width: 42ch;
	margin: 0;
}

.celthera-footer__title {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
	margin: 0 0 var(--ct-s-4);
}
.celthera-footer__col ul { list-style: none; margin: 0; padding: 0; }
.celthera-footer__col li { margin-bottom: var(--ct-s-3); }
.celthera-footer__col a {
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
	text-decoration: none;
	transition: color var(--ct-dur) var(--ct-ease);
}
.celthera-footer__col a:hover { color: var(--ct-ink); text-decoration: underline; }

.celthera-footer__notice {
	margin: var(--ct-s-8) 0 0;
	padding-top: var(--ct-s-5);
	border-top: 1px solid var(--ct-line-soft);
	font-size: var(--ct-t-xs);
	line-height: 1.6;
	color: var(--ct-ink-3);
}
/* A vonal végigfut, a szöveg mégis olvasható hosszúságú marad. */
.celthera-footer__notice > span { display: block; max-width: 92ch; }

/* A téma copyright sávja a saját szekciónk alá simul. */
footer.ct-footer [data-row="bottom"] {
	background: var(--ct-surface);
	border-top: 1px solid var(--ct-line-soft);
}
footer.ct-footer .ct-footer-copyright p {
	font-size: var(--ct-t-xs);
	color: var(--ct-ink-3);
	margin: 0;
}

/* ---------- 20. Űrlapok (Fluent Forms) ---------- */

.fluentform .ff-el-input--label label {
	font-size: var(--ct-t-sm);
	font-weight: 500;
	color: var(--ct-ink-2);
	margin-bottom: var(--ct-s-2);
}
.fluentform .ff-el-form-control {
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-base);
	color: var(--ct-ink);
	background: var(--ct-surface);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color var(--ct-dur) var(--ct-ease);
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--ct-ink);
	box-shadow: none;
}
.fluentform .ff-el-group { margin-bottom: var(--ct-s-5); }
.fluentform .ff-el-form-check label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--ct-s-3);
	align-items: start;
	font-size: var(--ct-t-sm);
	line-height: 1.5;
}
.fluentform input[type="checkbox"] { accent-color: var(--ct-ink); width: 20px; height: 20px; }
.fluentform .ff-btn-submit { width: auto; min-width: 180px; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ct-danger); }
.fluentform .error-text { font-size: var(--ct-t-xs); color: var(--ct-danger); }

/* ---------- 21. Reszponzív ---------- */

@media (max-width: 999px) {
	/* A [class] azért kell, mert a médialekérdezés nem ad specificitást,
	   a .has-4-columns szabály viszont erősebb lenne. */
	.wc-block-grid[class] ul.wc-block-grid__products { --ct-cols: 3; }
	.celthera-footer__grid { grid-template-columns: 1fr 1fr; }
	.celthera-footer__brand { grid-column: 1 / -1; }
	.cart_totals,
	.woocommerce-checkout-review-order { padding: var(--ct-s-5); }
}

@media (max-width: 689px) {
	:root {
		/* Kis kijelzőn a nagy térközök nem levegőt adnak, hanem görgetést. */
		--ct-s-9: 64px;
		--ct-s-10: 80px;
	}

	body.home .page-title { letter-spacing: 0.1em; text-indent: 0.1em; }

	.celthera-footer__grid { grid-template-columns: 1fr; gap: var(--ct-s-6); }
	.celthera-footer { padding-block: var(--ct-s-7) var(--ct-s-6); }

	/* A Blocksy mobilon egy hasábra vált. Négyzetes termékfotóknál két
	   hasáb jobb: egy képernyőn két termék fér el, és a lista áttekinthető
	   marad ahelyett, hogy végtelen görgetéssé válna. */
	.woocommerce ul.products[class*="columns-"],
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.woocommerce ul.products { gap: var(--ct-s-6) var(--ct-s-4); }
	ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--ct-t-sm);
		min-height: 0;
	}
	.wc-block-grid[class] ul.wc-block-grid__products { --ct-cols: 2; }
	.wc-block-grid[class] .wc-block-grid__product .wc-block-grid__product-title { min-height: 0; }

	/* Táblázat helyett kártyák: a WooCommerce mobil nézete a sorokat
	   blokká töri, de a cellák címkéit nem igazítja. */
	.woocommerce table.shop_table td { padding: var(--ct-s-3) 0; }
	.woocommerce table.shop_table_responsive tr td::before { color: var(--ct-ink-3); font-weight: 500; }

	.celthera-blocks { margin-top: var(--ct-s-7); padding-top: var(--ct-s-6); }
	.entry-content > h2 { margin-block: var(--ct-s-7) var(--ct-s-4); }
}

/* ---------- 22. Nyomtatás ---------- */

@media print {
	.ct-header, .celthera-footer, footer.ct-footer, .ct-back-to-top { display: none; }
	body { background: #fff; font-size: 11pt; }
}

/* ---------- 23. Finomhangolás (v2.1) ---------- */

/* Bevezető bekezdés a tartalomoldalakon.
   A H1 után az első bekezdés nagyobb és lazább: ez vezeti be a lapot, és
   ettől nem kell külön „alcím" mező. A tartalmi oldalakról ezért levettük
   az oldalcímet ismétlő H2-t — a lap címe már ott van a fejlécben. */
body:not(.home) .entry-content > p:first-child {
	font-size: var(--ct-t-md);
	line-height: 1.55;
	color: var(--ct-ink-2);
	max-width: 60ch;
	margin-bottom: var(--ct-s-7);
}

/* A lander hero ritmusa. A tartalomból kikerültek a spacer blokkok:
   a térközt a rendszer adja, nem a szerkesztő. Így minden oldalon
   ugyanaz a ritmus, és egy térközváltoztatás egy helyen történik. */
body.home .page-header { padding-top: var(--ct-s-7); }
body.home .entry-content > p:first-of-type { margin-top: var(--ct-s-6); }
body.home .entry-content > .wp-block-buttons { margin-block: var(--ct-s-7) var(--ct-s-6); }
body.home .entry-content > p.has-small-font-size {
	font-size: var(--ct-t-xs);
	color: var(--ct-ink-3);
	margin-bottom: var(--ct-s-10);
}

/* Az utolsó szakasz és a lábléc közé is kell levegő. */
body.home .entry-content > :last-child { margin-bottom: var(--ct-s-7); }

/* ---------- 24. Archívum-fejléc és rendezés (v2.1.7) ---------- */

/* A Blocksy a bolt címét szűk, középre zárt hero-sávban jeleníti meg,
   50 px-es függőleges bélessel. Ettől a „Shop" cím középen áll, a
   termékrács viszont balra — két különböző bal él egy képernyőn.
   A hero-t ugyanarra a konténerre és bal élre húzzuk, mint a tartalmat. */
.hero-section .entry-header,
.hero-section .page-header {
	max-width: min(
		var(--theme-normal-container-max-width, 1290px),
		var(--theme-container-width-base, 90vw)
	);
	margin-inline: auto;
	text-align: left;
	margin-bottom: 0;
}

/* A Blocksy hero-ja 250 px minimum magasságú, 50 px béléssel — üres
   sávot hagy a cím körül. A béléshez saját változót használ; azt és a
   minimum magasságot ugyanazon az elemen kell átírni, ahol a téma is
   beállítja (innen a data-attribútumos szelektor). */
.hero-section[data-type] > [class*="ct-container"] {
	--container-padding: var(--ct-s-7) 0 0;
	min-height: 0;
}
body.home .hero-section[data-type] > [class*="ct-container"] {
	--container-padding: var(--ct-s-7) 0 var(--ct-s-5);
}
.hero-section .entry-header .page-title,
.hero-section .page-header .page-title { text-align: left; }

/* A főoldal hero-ja szándékosan középre zárt marad. */
body.home .hero-section .entry-header,
body.home .hero-section .page-header { text-align: center; }
body.home .hero-section .entry-header .page-title,
body.home .hero-section .page-header .page-title { text-align: center; }

/* Rendezés-legördülő: itt a verzálos, tág betűköz nem címke, hanem
   vezérlő felirata — és a magas betűköz miatt a szöveg kilógott a
   dobozból. A vezérlők a rendszer alap tipográfiáját használják. */
.woocommerce-ordering select,
.woocommerce-ordering select.orderby {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ct-t-sm);
	line-height: 1.2;
	height: auto;
	min-height: 44px;
	padding: 10px 36px 10px 14px;
}

.woocommerce-notices-wrapper:empty { display: none; }

/* A találatszám és a rendezés egy vonalban. */
.woocommerce .woocommerce-result-count { margin-bottom: 0; align-self: center; }

/* =============================================================================
   25. EDITORIAL RÉTEG (v3.0)
   -----------------------------------------------------------------------------
   Idáig a rendszer helyes volt, de semleges. Ez a réteg adja a karaktert.

   Amit egy jó stúdió csinál, és amit egy alaptéma nem:
   - Sorszámozott szakaszok. A lapnak dramaturgiája lesz, nem csak tartalma.
   - Kísérőszöveg (eyebrow) a címek fölött: megmondja, hol jársz, mielőtt
     elolvasnád a címet.
   - Hajszálvonalas rács. Nem keret: MÉRTÉK. A vonal azt mutatja, hogy a
     tartalom egy rendszerben áll.
   - Rövid, kicsi mozgás. Nem effekt, hanem az figyelemvezetés eszköze.
   ========================================================================== */

/* ---------- 25.1 Molekuláris háttér ---------- */

.ct-molecular-host {
	position: relative;
	isolation: isolate;
	/* A canvas ezekből olvassa a színét — nem a szkriptbe van égetve.
	   Így a sötét változat egyetlen változó-átírás, nem külön kódág. */
	--ct-molecule-ink: #14161A;
	--ct-molecule-strength: 1;
}
.ct-molecular-host > *:not(.ct-molecular) { position: relative; z-index: 1; }

.ct-molecular {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* NINCS CSS-maszk. A halványítást a canvas maga rajzolja (site.js,
   vignetta). Mobil GPU-n a maszkolt réteg egyszer rasztereződik, és a
   canvas rajzolásai nem érvénytelenítik — ettől úgy tűnt, mintha az
   animáció csak görgetés közben mozogna. */
.ct-molecular__canvas { display: block; }

body.home .site-main { position: relative; }

/* A hero szövege a hálón ÜL: halvány glória tartja el a kötésektől. */
body.home .hero-section .entry-header { position: relative; z-index: 1; }
body.home .page-title,
body.home .entry-content > p {
	text-shadow: 0 0 22px var(--ct-surface-2), 0 0 42px var(--ct-surface-2);
}

/* ---------- 25.2 Beúszás ---------- */

.ct-js .ct-reveal {
	opacity: 0;
	transform: translateY(12px);
}
.ct-js .ct-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity 400ms var(--ct-ease) var(--ct-reveal-delay, 0ms),
		transform 400ms var(--ct-ease) var(--ct-reveal-delay, 0ms);
}

/* Kártyák: nagyobb út és hosszabb ív, hogy a balról jobbra futó sorozat
   érzékelhető legyen. Szövegnél ez már sok volna — ott a rövid mozgás jó. */
.ct-js .ct-reveal--card { transform: translateY(14px); }
.ct-js .ct-reveal--card.is-revealed {
	transition:
		opacity 460ms var(--ct-ease) var(--ct-reveal-delay, 0ms),
		transform 460ms var(--ct-ease) var(--ct-reveal-delay, 0ms);
}

/* ---------- 25.3 Hero masthead ---------- */

/* Kísérőszöveg a wordmark fölött. A hero így nem egyetlen nagy szó,
   hanem egy fejléc: kategória, név, hitelesítés — ebben a sorrendben. */
.celthera-eyebrow {
	display: block;
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
	margin-bottom: var(--ct-s-6);
}
.celthera-eyebrow::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: var(--ct-line);
	margin: var(--ct-s-4) auto 0;
}

.celthera-hero-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ct-s-3) var(--ct-s-5);
	margin-top: var(--ct-s-5);
	font-size: var(--ct-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ct-ink-3);
}
.celthera-hero-meta span { white-space: nowrap; }
.celthera-hero-meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--ct-line);
	vertical-align: 0.35em;
	margin-right: var(--ct-s-5);
}

/* ---------- 25.4 Adatcsík ---------- */

/* Négy tény, hajszálvonallal elválasztva. Ez az a sáv, ahol egy
   laborvezető három másodperc alatt eldönti, komolyan vegyen-e minket. */
.celthera-datastrip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--ct-line);
	border-bottom: 1px solid var(--ct-line);
	margin: var(--ct-s-8) 0 var(--ct-s-9);
}
.celthera-datastrip__item {
	padding: var(--ct-s-6) var(--ct-s-5);
	border-left: 1px solid var(--ct-line-soft);
}
.celthera-datastrip__item:first-child { border-left: 0; padding-left: 0; }
.celthera-datastrip__value {
	display: block;
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-xl);
	line-height: 1;
	color: var(--ct-ink);
	font-variant-numeric: tabular-nums lining-nums;
	margin-bottom: var(--ct-s-3);
}
.celthera-datastrip__label {
	display: block;
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
	line-height: 1.5;
}

/* ---------- 25.5 Sorszámozott szakaszcímek ---------- */

body.home .entry-content { counter-reset: ct-section; }

.ct-section-title {
	position: relative;
	text-align: left !important;
	padding-top: var(--ct-s-5);
	border-top: 1px solid var(--ct-line);
	margin-bottom: var(--ct-s-8) !important;
}
.ct-section-title::before {
	counter-increment: ct-section;
	content: counter(ct-section, decimal-leading-zero);
	display: block;
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	color: var(--ct-ink-3);
	margin-bottom: var(--ct-s-4);
}

/* A szakaszcím alatti bevezető a cím jobb oldalára kerül: két hasáb,
   nem egy középre zárt oszlop. Ettől lesz szerkesztett a lap. */
.ct-section-intro {
	max-width: 54ch;
	font-size: var(--ct-t-md);
	color: var(--ct-ink-2);
	text-align: left !important;
	margin: calc(var(--ct-s-8) * -1 + var(--ct-s-2)) 0 var(--ct-s-8) !important;
}

/* ---------- 25.6 Lépések ---------- */

.celthera-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ct-s-6);
	margin: var(--ct-s-7) 0 var(--ct-s-10);
	counter-reset: ct-step;
}
.celthera-steps__item {
	padding-top: var(--ct-s-5);
	border-top: 1px solid var(--ct-line);
}
.celthera-steps__item::before {
	counter-increment: ct-step;
	content: counter(ct-step, decimal-leading-zero);
	display: block;
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	color: var(--ct-ink-3);
	margin-bottom: var(--ct-s-4);
}
.celthera-steps__title {
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-lg);
	color: var(--ct-ink);
	margin: 0 0 var(--ct-s-3);
	line-height: 1.15;
}
.celthera-steps__item p {
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
	margin: 0;
	line-height: 1.6;
}

/* ---------- 25.7 Termékkártya finomítás ---------- */

/* A kép egy hajszálkeretes kereten BELÜL nagyít rá — a keret nem mozdul.
   Ez a visszafogott változat; a kártya egészének megemelése (árnyék,
   elmozdulás) hangosabb, mint amit egy laborbolt elbír. */
ul.products li.product a img,
.wc-block-grid__product-image img {
	transition: transform 600ms var(--ct-ease), border-color var(--ct-dur) var(--ct-ease);
}

/* A will-change SZÁNDÉKOSAN nincs itt. Egy 15 termékes boltoldalon
   tizenöt külön GPU-réteget hozna létre; telefonon ez memórianyomás,
   amitől a böngésző mindent visszafog — a háttéranimációt is. A hover
   nagyítás will-change nélkül is sima. */
ul.products li.product > a,
.wc-block-grid__product-link {
	display: block;
	overflow: hidden;
	border-radius: var(--ct-r-lg);
}
ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.035); }

/* Sorszám a boltban: a kollekció katalógusként olvas. */
.woocommerce ul.products { counter-reset: ct-prod; }

/* A címnek két sor helye van fenntartva. Enélkül a hosszabb nevű
   terméknél lejjebb csúszik az ár és a kategória, és a rács sorai
   „lépcsőznek" — ez az a részlet, amitől egy rács amatőrnek látszik. */
ul.products li.product .woocommerce-loop-product__title { min-height: 3.9em; }
ul.products li.product .woocommerce-loop-product__title::before {
	counter-increment: ct-prod;
	content: counter(ct-prod, decimal-leading-zero);
	display: block;
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	color: var(--ct-ink-3);
	margin-bottom: var(--ct-s-2);
}

/* ---------- 25.8 Navigáció: aláhúzás-behúzás ---------- */

.ct-header nav a { position: relative; }
.ct-header nav > ul > li > a::after,
.header-menu-1 > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -4px;
	height: 1px;
	background: var(--ct-ink);
	transition: right 320ms var(--ct-ease);
}
.ct-header nav > ul > li > a:hover::after,
.header-menu-1 > li > a:hover::after { right: 0; }

/* ---------- 25.9 Gombok: nyíl ---------- */

.wp-block-button__link,
.woocommerce a.button.alt,
.single_add_to_cart_button { position: relative; }

/* A hero elsődleges gombja kap egy nyilat, ami hoverre kilép.
   Egyetlen mikro-interakció az egész oldalon, ahol tényleg számít. */
body.home .entry-content > .wp-block-buttons .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: var(--ct-s-3);
	transition: transform 320ms var(--ct-ease);
}
body.home .entry-content > .wp-block-buttons .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---------- 25.10 Reszponzív ---------- */

@media (max-width: 999px) {
	.celthera-datastrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.celthera-datastrip__item:nth-child(3) { border-left: 0; padding-left: 0; }
	.celthera-steps { grid-template-columns: 1fr; gap: var(--ct-s-5); }
}

@media (max-width: 689px) {
	.celthera-datastrip {
		grid-template-columns: 1fr;
		margin: var(--ct-s-7) 0 var(--ct-s-8);
	}
	.celthera-datastrip__item {
		border-left: 0;
		padding: var(--ct-s-5) 0;
		border-top: 1px solid var(--ct-line-soft);
	}
	.celthera-datastrip__item:first-child { border-top: 0; }
	.celthera-hero-meta { gap: var(--ct-s-2) var(--ct-s-4); font-size: 11px; }
	.celthera-hero-meta span + span::before { margin-right: var(--ct-s-4); }

}

/* =============================================================================
   26. SÖTÉT HERO
   -----------------------------------------------------------------------------
   Csak a főoldal felső sávja sötét: fejléc + wordmark + bevezető + gomb,
   pontosan az adatcsíkig. Alatta minden világos marad.

   MIÉRT NEM AZ EGÉSZ OLDAL:
   A 15 termékfotó fehér hátterű. Teljes dark mode-ban mindegyiket újra
   kellene renderelni, és a „klinikai laboratórium" pozíciótól is elmozdulna
   a márka. Egy sötét nyitósáv viszont pont azt adja, amiért a dark mode jó:
   a hálózat világít benne, és a lap első benyomása erős.

   KIKAPCSOLÁS: functions.php 15. szakasz — a `celthera_dark_hero` szűrő
   értékét kell false-ra állítani. Semmi mást nem kell átírni.
   ========================================================================== */

body.ct-hero-dark {
	--ct-hero-bg: #0E1013;
	--ct-hero-fg: #F5F6F7;
	--ct-hero-fg-2: rgba(255, 255, 255, 0.74);
	--ct-hero-fg-3: rgba(255, 255, 255, 0.48);
	--ct-hero-line: rgba(255, 255, 255, 0.16);
}

/* A hálózat világos vonalakkal rajzol, kissé visszafogva: fehér a sötéten
   optikailag erősebb, mint fekete a világoson. */
body.ct-hero-dark .ct-molecular-host {
	--ct-molecule-ink: #FFFFFF;
	--ct-molecule-strength: 0.78;
}

/* A sötét sáv. Magasságát a szkript írja a --ct-hero-zone változóba, de van
   CSS-ből jövő alapértéke is — JS nélkül sem csúszik szét a lap. */
body.ct-hero-dark .site-main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ct-hero-zone, min(78vh, 820px));
	background: var(--ct-hero-bg);
	z-index: 0;
}

/* --- Fejléc --- */

/* A Blocksy nem a fejlécre, hanem a SOROKRA teszi a hátteret
   ([data-row]). Ezért itt is a sorokat kell átfesteni — a fejléc elemen
   megadott szín alá kerülne. */
/* A [data-device] a fejlécen BELÜLI burkolón van, nem a header elemen —
   ezért a szelektor a .ct-header-en át megy le a sorokig. A Blocksy
   szabálya [data-header*="type-1"] .ct-header [data-row*="middle"], ezt
   kell felülmúlni. */
body.ct-hero-dark .ct-header [data-row],
body.ct-hero-dark header.ct-header,
body.ct-hero-dark .ct-header {
	background: var(--ct-hero-bg);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* A logó egyszínű fekete SVG: invertálva pontosan a fehér változatot adja.
   Nem kell külön fájlt cserélni, és nem tud kettéválni a két verzió. */
body.ct-hero-dark .site-logo-container img { filter: invert(1); }
body.ct-hero-dark .ct-header nav a,
body.ct-hero-dark .ct-header [data-row] a,
body.ct-hero-dark .ct-header .ct-toggle,
body.ct-hero-dark .ct-header svg { color: var(--ct-hero-fg-2); fill: currentColor; }
body.ct-hero-dark .ct-header nav a:hover { color: var(--ct-hero-fg); }
body.ct-hero-dark .ct-header nav > ul > li > a::after,
body.ct-hero-dark .header-menu-1 > li > a::after { background: var(--ct-hero-fg); }

/* A mobil kihúzható panel amúgy is sötét — ott ne invertáljuk a logót. */
body.ct-hero-dark .ct-panel .site-logo-container img { filter: none; }

/* --- Hero tipográfia --- */

body.ct-hero-dark .page-title {
	color: var(--ct-hero-fg);
	text-shadow: 0 0 28px rgba(14, 16, 19, 0.95), 0 0 70px rgba(14, 16, 19, 0.85);
}
body.ct-hero-dark .celthera-eyebrow { color: var(--ct-hero-fg-3); }
body.ct-hero-dark .celthera-eyebrow::after { background: var(--ct-hero-line); }
body.ct-hero-dark .celthera-hero-meta { color: var(--ct-hero-fg-3); }
body.ct-hero-dark .celthera-hero-meta span + span::before { background: rgba(255, 255, 255, 0.3); }

body.ct-hero-dark .entry-content > p.ct-lede {
	color: var(--ct-hero-fg-2);
	text-shadow: 0 0 24px rgba(14, 16, 19, 0.95);
}
body.ct-hero-dark .entry-content > p.has-small-font-size {
	color: var(--ct-hero-fg-3);
	text-shadow: 0 0 20px rgba(14, 16, 19, 0.9);
}

/* --- Hero gomb: invertálva --- */

body.ct-hero-dark .ct-hero-cta .wp-block-button__link {
	background: var(--ct-hero-fg);
	border-color: var(--ct-hero-fg);
	color: var(--ct-ink);
}
body.ct-hero-dark .ct-hero-cta .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ct-ink);
}

/* --- Fókuszgyűrű a sötét sávon --- */

body.ct-hero-dark .ct-header :focus-visible,
body.ct-hero-dark .ct-hero-cta :focus-visible { outline-color: var(--ct-hero-fg); }

/* =============================================================================
   27. GOMBÁRNYÉK, AMI KÖVETI A KURZORT
   -----------------------------------------------------------------------------
   MIÉRT ÍGY:

   A statikus hover-árnyék mindig ugyanonnan világít. Itt a FÉNYFORRÁS a
   kurzor: az árnyék mindig a mutatóval ÁTELLENES oldalra esik, és ahogy a
   kurzor körbejár a gombon, úgy fordul körbe az árnyék is. Ettől érzi a
   szem fizikai tárgynak a gombot, nem festett téglalapnak.

   HOGYAN:
   - A pozíciót a szkript írja --ct-lit-x / --ct-lit-y változóba (−1…1).
     Ezek NEM animáltak: azonnal követniük kell a kurzort, különben úszik.
   - Az árnyék ERŐSSÉGE viszont animált (--ct-lit-glow), így be- és
     kifakul. Ehhez kell a @property: enélkül egy egyéni tulajdonságot nem
     lehet átmenettel animálni.
   - Csak egérrel (hover: hover és pointer: fine). Érintőn nincs hover, ott
     az árnyék félrevezető lenne.
   ========================================================================== */

@property --ct-lit-glow {
	syntax: "<number>";
	initial-value: 0;
	inherits: false;
}

.ct-btn-live {
	--ct-lit-x: 0;
	--ct-lit-y: 0;
	--ct-lit-glow: 0;
	/* Az árnyék színe kontextusfüggő: sötét sávon fehér fény, világoson tinta. */
	--ct-lit-rgb: 20, 22, 26;
}

@media (hover: hover) and (pointer: fine) {
	.ct-btn-live {
		box-shadow:
			calc(var(--ct-lit-x) * -9px)
			calc(10px - var(--ct-lit-y) * 9px)
			28px -6px
			rgba(var(--ct-lit-rgb), calc(var(--ct-lit-glow) * 0.5)),
			calc(var(--ct-lit-x) * -3px)
			calc(3px - var(--ct-lit-y) * 3px)
			8px -4px
			rgba(var(--ct-lit-rgb), calc(var(--ct-lit-glow) * 0.3));
		transform: translateY(calc(var(--ct-lit-glow) * -1.5px));
		transition:
			--ct-lit-glow 240ms var(--ct-ease),
			transform 240ms var(--ct-ease),
			background var(--ct-dur) var(--ct-ease),
			border-color var(--ct-dur) var(--ct-ease),
			color var(--ct-dur) var(--ct-ease);
	}

	.ct-btn-live.is-hovering { --ct-lit-glow: 1; }

	/* Lenyomáskor a gomb visszaül a helyére: az árnyék összecsukódik.
	   Ez az a fél pillanat, ami visszajelzésnek számít. */
	.ct-btn-live:active {
		--ct-lit-glow: 0.35;
		transform: translateY(0) scale(0.99);
		transition-duration: 90ms;
	}
}

/* A sötét hero invertált gombja fehér fényt vet, nem tintaárnyékot. */
body.ct-hero-dark .ct-hero-cta .ct-btn-live { --ct-lit-rgb: 255, 255, 255; }

/* Csökkentett mozgás: az árnyék marad, de nem követ és nem emel. */
@media (prefers-reduced-motion: reduce) {
	.ct-btn-live { transform: none !important; transition: none !important; }
	.ct-btn-live.is-hovering {
		box-shadow: 0 6px 18px -8px rgba(var(--ct-lit-rgb), 0.4);
	}
}

/* =============================================================================
   28. FEJLÉC-ÁRNYÉK
   -----------------------------------------------------------------------------
   Próba. A rendszer alapelve az, hogy a hierarchiát méret és térköz adja,
   nem árnyék — ezért ez szándékosan a legkisebb adag, ami még elválasztja a
   fejlécet a tartalomtól: egy hajszálvékony felső él és egy nagyon lágy,
   szinte észrevehetetlen esés alatta. A korábbi keretvonal helyére lép, nem
   mellé — keret ÉS árnyék együtt már két megoldás ugyanarra a feladatra.

   KIVÉTEL: a sötét hero. Ott a fejléc és a hero ugyanolyan színű, egy
   fekete árnyék láthatatlan lenne, a hajszálvonal viszont működik.

   KIKAPCSOLÁS: --ct-header-shadow: none; a :root-on.
   ========================================================================== */

.ct-header {
	border-bottom: 0;
	box-shadow: var(--ct-header-shadow,
		0 1px 0 rgba(20, 22, 26, 0.04),
		0 10px 26px -16px rgba(20, 22, 26, 0.28));
}

/* Sötét sávon marad a hajszálvonal: ott az árnyék nem látszana. */
body.ct-hero-dark .ct-header {
	--ct-header-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   29. TERMÉKKÁRTYA: KERET ÉS KURZORT KÖVETŐ ÁRNYÉK
   -----------------------------------------------------------------------------
   Eddig a kártyának nem volt kerete — csak a termékfotó körül futott egy
   hajszálvonal, a név és az ár a lap hátterén ült. Most a KÁRTYA a doboz:
   a keret az egész egységet fogja össze, a képnek pedig már nincs saját
   kerete. Keret a kereten belül két megoldás lenne ugyanarra.

   A hover-árnyék ugyanabból a rendszerből jön, mint a gomboké: a KURZOR a
   fényforrás, az árnyék az átellenes oldalra esik. Ugyanazok a változók
   (--ct-lit-*), ugyanaz a delegált figyelő — a kártya és a rajta lévő gomb
   viszont KÜLÖN csatornán van, ezért ha a gomb fölé viszed az egeret, a
   kártya árnyéka is megmarad, és a gomb kap egy sajátot fölé.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
	background: var(--ct-surface);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	padding: var(--ct-s-4) var(--ct-s-4) var(--ct-s-5);
}

/* A képnek már nincs saját kerete — a kártyáé fogja körbe. */
.woocommerce ul.products li.product a img,
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image img {
	border: 0;
	border-radius: var(--ct-r-md);
}
.woocommerce ul.products li.product > a,
.wc-block-grid__product-link { border-radius: var(--ct-r-md); }

/* A rács hézaga szűkebb lehet: a keretek maguk is elválasztanak. */
.woocommerce ul.products { gap: var(--ct-s-5) var(--ct-s-4); }
.wc-block-grid ul.wc-block-grid__products { gap: var(--ct-s-5) var(--ct-s-4); }

.ct-card-live {
	--ct-lit-x: 0;
	--ct-lit-y: 0;
	--ct-lit-glow: 0;
	--ct-lit-rgb: 20, 22, 26;
}

@media (hover: hover) and (pointer: fine) {
	.ct-card-live {
		box-shadow:
			calc(var(--ct-lit-x) * -14px)
			calc(18px - var(--ct-lit-y) * 14px)
			42px -16px
			rgba(var(--ct-lit-rgb), calc(var(--ct-lit-glow) * 0.45)),
			calc(var(--ct-lit-x) * -5px)
			calc(6px - var(--ct-lit-y) * 5px)
			14px -8px
			rgba(var(--ct-lit-rgb), calc(var(--ct-lit-glow) * 0.24));
		transform: translateY(calc(var(--ct-lit-glow) * -2px));
		transition:
			--ct-lit-glow 280ms var(--ct-ease),
			transform 280ms var(--ct-ease),
			border-color 280ms var(--ct-ease);
	}

	.ct-card-live.is-hovering {
		--ct-lit-glow: 1;
		border-color: var(--ct-line-strong);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-card-live { transform: none !important; transition: none !important; }
	.ct-card-live.is-hovering {
		box-shadow: 0 8px 24px -14px rgba(var(--ct-lit-rgb), 0.45);
	}
}

@media (max-width: 689px) {
	.woocommerce ul.products li.product,
	.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
		padding: var(--ct-s-3) var(--ct-s-3) var(--ct-s-4);
	}
}

/* A kiemelt termékrács gombja automatikus margóval középre került, a bolt
   archívumában viszont balra zárt. Ugyanaz a kártya kétféle igazítással
   két külön oldalon — ez az a fajta apró következetlenség, ami összeséget
   rombol. Mindkét helyen balra zárt. */
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	margin-inline: 0 auto;
}

/* =============================================================================
   30. MOBIL: RÁCS, HAMBURGER, KIHÚZHATÓ MENÜ
   -----------------------------------------------------------------------------
   Három külön gond, egy helyen.

   1. RÁCS. A fix kéthasábos beállítás 320–360 px-es telefonon összepréseli
      a kártyákat: a keret és a belső térköz elveszi a helyet, a hosszú
      vegyületnevek pedig szétfeszítik. Fix hasábszám helyett auto-fill:
      a böngésző annyi hasábot rak, amennyi 150 px-enként elfér — nagyon
      keskeny kijelzőn magától egyhasábos lesz.

   2. HAMBURGER. A téma alapikonja három vonal, semmilyen karakter nélkül.
      Itt két hajszálvonal rajzolódik CSS-ből, és nyitáskor X-be fordul.

   3. KIHÚZHATÓ MENÜ. Alapból egy sima linklista volt. Most ugyanaz a
      nyelv, mint a lapon: Didone tételek, sorszámozva, hajszálvonallal
      elválasztva — a fejléc apró verzálisainak a nagy testvére.
   ========================================================================== */

/* ---------- 30.1 Hamburger ---------- */

.ct-header-trigger {
	position: relative;
	width: 44px;
	height: 44px;
	color: var(--ct-ink);
}
.ct-header-trigger svg { display: none; }
.ct-header-trigger::before,
.ct-header-trigger::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transform: translateX(-50%);
	transition:
		top 280ms var(--ct-ease),
		transform 280ms var(--ct-ease);
}
.ct-header-trigger::before { top: 18px; }
.ct-header-trigger::after  { top: 25px; }

.ct-header-trigger[aria-expanded="true"]::before {
	top: 21px;
	transform: translateX(-50%) rotate(45deg);
}
.ct-header-trigger[aria-expanded="true"]::after {
	top: 21px;
	transform: translateX(-50%) rotate(-45deg);
}

body.ct-hero-dark .ct-header-trigger { color: var(--ct-hero-fg-2); }

/* ---------- 30.2 Kihúzható menü ---------- */

/* A panel SÖTÉT marad — a Blocksy is annak szánta, és így rímel a
   főoldal sötét hero-sávjával. A saját tintánkra állítjuk, hogy ne a
   téma véletlen árnyalata legyen. A szelektor két osztályt használ,
   mert a téma szabálya [data-header] előtaggal erősebb volna. */
#offcanvas.ct-panel .ct-panel-inner {
	background: rgba(14, 16, 19, 0.98);
	max-width: min(420px, 88vw);
}
#offcanvas .ct-panel-actions { padding: var(--ct-s-4) var(--ct-s-5) 0; }
#offcanvas .ct-toggle-close {
	color: rgba(255, 255, 255, 0.55);
	background: transparent;
	border: 0;
}
#offcanvas .ct-toggle-close:hover { color: #fff; }
#offcanvas .ct-panel-content-inner { padding: var(--ct-s-6) var(--ct-s-6) var(--ct-s-8); }

#offcanvas .mobile-menu ul { list-style: none; margin: 0; padding: 0; }
#offcanvas .mobile-menu > ul { counter-reset: ct-nav; }
#offcanvas .mobile-menu li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
#offcanvas .mobile-menu li:first-child { border-top: 0; }

#offcanvas .mobile-menu a.ct-menu-link {
	display: flex;
	align-items: baseline;
	gap: var(--ct-s-4);
	padding: var(--ct-s-4) 0;
	font-family: var(--ct-font-display);
	font-size: clamp(1.5rem, 6.5vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--ct-track-display);
	text-transform: none;
	color: rgba(255, 255, 255, 0.92);
	transition: opacity var(--ct-dur) var(--ct-ease);
}
#offcanvas .mobile-menu a.ct-menu-link:active { opacity: 0.55; }

/* Sorszám a tételek előtt — ugyanaz a rendszer, mint a szakaszcímeknél. */
#offcanvas .mobile-menu > ul > li > a.ct-menu-link::before {
	counter-increment: ct-nav;
	content: counter( ct-nav, decimal-leading-zero );
	flex: none;
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	color: rgba(255, 255, 255, 0.42);
}

/* ---------- 30.3 Termékrács telefonon ---------- */

@media (max-width: 689px) {
	.woocommerce ul.products[class*="columns-"],
	ul.products[class*="columns-"],
	.wc-block-grid[class] ul.wc-block-grid__products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--ct-s-5) var(--ct-s-3);
	}

	.woocommerce ul.products li.product,
	.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
		/* min-width:0 nélkül egy hosszú, törhetetlen név kifeszíti a
		   rácssávot, és a szomszéd kártya alá csúszik. */
		min-width: 0;
		padding: var(--ct-s-3) var(--ct-s-3) var(--ct-s-4);
		/* A WooCommerce mobil szabálya 8 px jobb bélést tesz a kártyára,
		   amitől aszimmetrikus lett. Külön longhanddal zárjuk le. */
		padding-inline: var(--ct-s-3);
	}

	/* A vegyületnevek tele vannak kötőjellel és számmal; hagyjuk törni. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
		font-size: var(--ct-t-sm);
		line-height: 1.3;
		overflow-wrap: anywhere;
		hyphens: auto;
		margin-top: var(--ct-s-3);
	}

	/* Teljes szélességű gomb: keskeny kártyán sosem lóg ki, és nagyobb
	   a koppintási felület is. */
	.woocommerce ul.products li.product .button,
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
		display: block;
		width: 100%;
		padding: 11px 8px;
		font-size: var(--ct-t-xs);
		text-align: center;
	}
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart { width: 100%; }

	.woocommerce ul.products li.product .price,
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price { font-size: var(--ct-t-xs); }
}

/* =============================================================================
   31. KOSÁRBA TÉTEL, ÉRTESÍTÉSEK, MENÜ — JAVÍTÁSOK
   ========================================================================== */

/* ---------- 31.1 „Undo?" az eltávolítás után ----------
   A WooCommerce visszavonó linkje gombként öröklődött: tintafekete háttér
   ÉS tintafekete szöveg — vagyis olvashatatlan doboz. Másodlagos gombbá
   tesszük, mint a többi visszavonható műveletet. */

.woocommerce-message a:not(.button):not(.wp-block-button__link),
.woocommerce-info a:not(.button):not(.wp-block-button__link),
.woocommerce-error a:not(.button):not(.wp-block-button__link),
a.restore-item {
	display: inline-block;
	background: transparent;
	color: var(--ct-ink);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	padding: 8px 14px;
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
}
.woocommerce-message a:not(.button):hover,
a.restore-item:hover {
	background: var(--ct-ink);
	color: #fff;
	border-color: var(--ct-ink);
}

/* ---------- 31.2 Kosárba tétel állapotai ----------
   A téma alapból egy tömör, forgó NÉGYZETET rajzol a gombra — ez az a
   „random pörgő csík". Helyette gyűrű, és a felirat helyben marad. */

@keyframes ct-spin { to { transform: rotate(360deg); } }

.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce .single_add_to_cart_button.loading,
.wc-block-grid__product-add-to-cart .wp-block-button__link.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	opacity: 1;
}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce .single_add_to_cart_button.loading::after,
.wc-block-grid__product-add-to-cart .wp-block-button__link.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 -8px;
	background: none;
	border: 1.5px solid var(--ct-line);
	border-top-color: var(--ct-ink);
	border-radius: 50%;
	animation: ct-spin 620ms linear infinite;
	opacity: 1;
	transform-origin: center;
}

/* Siker: a gomb maga mondja meg, hogy megtörtént. */
.woocommerce a.button.ct-added,
.wc-block-grid__product-add-to-cart .wp-block-button__link.ct-added {
	position: relative;
	color: transparent !important;
	border-color: var(--ct-success);
	pointer-events: none;
}
.woocommerce a.button.ct-added::after,
.wc-block-grid__product-add-to-cart .wp-block-button__link.ct-added::after {
	content: "✓ Added";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--ct-success);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: none;
	border: 0;
	background: none;
	margin: 0;
	width: auto;
	height: auto;
}

/* A WooCommerce „View cart" utólinkje kikerül: a lap ne ugorjon meg
   utólag beszúrt elemtől. A visszajelzést a gomb és a fejléc adja. */
.added_to_cart { display: none !important; }

/* ---------- 31.3 Kosár a menüben ----------
   Eddig sehol nem látszott, hogy van-e valami a kosárban, és a kosár
   oldalra sem vezetett út a fejlécből. */

/* A számlálót középre igazítjuk és line-height:1-re fogjuk: alapállásban
   megnövelte a menüsor sormagasságát, és a „Cart" feljebb csúszott a
   többi menüpontnál. */
.ct-header .celthera-cart-item { display: flex; align-items: center; }
.celthera-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	line-height: 1;
}
.celthera-cart-count {
	display: inline-grid;
	place-items: center;
	line-height: 1;
	min-width: 1.55em;
	height: 1.55em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--ct-ink);
	color: #fff;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	transition: background var(--ct-dur) var(--ct-ease);
}
.celthera-cart-count[data-empty="1"] {
	background: transparent;
	color: var(--ct-ink-3);
	box-shadow: inset 0 0 0 1px var(--ct-line);
}
body.ct-hero-dark .ct-header .celthera-cart-count { background: #fff; color: var(--ct-ink); }
body.ct-hero-dark .ct-header .celthera-cart-count[data-empty="1"] {
	background: transparent;
	color: var(--ct-hero-fg-3);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
#offcanvas .celthera-cart-link { align-items: center; }
#offcanvas .celthera-cart-count {
	background: rgba(255,255,255,0.92);
	color: #0E1013;
	font-size: 0.42em;
}
#offcanvas .celthera-cart-count[data-empty="1"] {
	background: transparent;
	color: rgba(255,255,255,0.5);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* ---------- 31.4 Hamburger: két eltérő hosszúságú vonal ---------- */

.ct-header-trigger::before { width: 22px; }
.ct-header-trigger::after  { width: 14px; transition-property: top, transform, width; }
.ct-header-trigger:hover::after { width: 22px; }
.ct-header-trigger[aria-expanded="true"]::after { width: 22px; }

/* ---------- 31.5 A panel tételei lépcsőzve úsznak be ---------- */

@keyframes ct-panel-in {
	from { opacity: 0; transform: translateX(18px); }
	to   { opacity: 1; transform: none; }
}

#offcanvas.active .mobile-menu > ul > li,
#offcanvas.active .celthera-panel-mark,
#offcanvas.active .celthera-panel-note {
	animation: ct-panel-in 480ms var(--ct-ease) both;
}
#offcanvas.active .celthera-panel-mark { animation-delay: 40ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(1) { animation-delay: 90ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(2) { animation-delay: 140ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(3) { animation-delay: 190ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(4) { animation-delay: 240ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(5) { animation-delay: 290ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(6) { animation-delay: 340ms; }
#offcanvas.active .mobile-menu > ul > li:nth-child(n+7) { animation-delay: 390ms; }
#offcanvas.active .celthera-panel-note { animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
	#offcanvas.active .mobile-menu > ul > li,
	#offcanvas.active .celthera-panel-mark,
	#offcanvas.active .celthera-panel-note { animation: none; }
}

/* ---------- 31.6 Panel fejléc és lábjegyzet ---------- */

.celthera-panel-mark {
	display: block;
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-sm);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: var(--ct-s-6);
}
.celthera-panel-note {
	margin: var(--ct-s-8) 0 0;
	padding-top: var(--ct-s-5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--ct-t-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.42);
}

/* ---------- 31.7 404 ---------- */

.error404 .page-title { max-width: 20ch; }

/* =============================================================================
   32. UTOLSÓ SIMÍTÁSOK
   ========================================================================== */

/* A töltés alatt a felirat nem tűnt el teljesen: a téma
   -webkit-text-fill-color-t is állít, ami erősebb a color-nál. */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce a.button.ct-added,
.wc-block-grid__product-add-to-cart .wp-block-button__link.loading,
.wc-block-grid__product-add-to-cart .wp-block-button__link.ct-added {
	-webkit-text-fill-color: transparent;
}
.woocommerce a.button.ct-added::after { -webkit-text-fill-color: var(--ct-success); }
.woocommerce a.button.loading::after { -webkit-text-fill-color: initial; }

/* Hamburger: kör alakú hover-alátét és lépcsőzött vonalmozgás.
   A második vonal 40 ms-mal később indul — ettől lesz gesztus, nem kapcsoló. */
.ct-header-trigger {
	border-radius: 999px;
	transition: background var(--ct-dur) var(--ct-ease);
}
.ct-header-trigger:hover { background: var(--ct-surface-3); }
body.ct-hero-dark .ct-header-trigger:hover { background: rgba(255, 255, 255, 0.08); }
.ct-header-trigger::after { transition-delay: 40ms; }
.ct-header-trigger[aria-expanded="true"]::before { transition-delay: 40ms; }
.ct-header-trigger[aria-expanded="true"]::after { transition-delay: 0ms; }

/* A 404 kapjon kiutat, ne csak egy keresőmezőt. */
.error404 .page-title + p { max-width: 52ch; }

/* =============================================================================
   33. MOBIL HIBÁK — VALÓDI 393 PX-EN FELTÁRVA
   -----------------------------------------------------------------------------
   Ez a szakasz három olyan hibát javít, amit csak igazi telefonszélességen
   lehetett megfogni. 500 px-es ablakban egyik sem jelentkezett.
   ========================================================================== */

/* ---------- 33.1 A rács 480 px alatt szétesett ----------
   A WooCommerce all-products.css-ében van egy szabály:

       @media (max-width: 480px) {
         .wc-block-grid.has-4-columns .wc-block-grid__products { display: block }
       }

   Ez három osztály (0,3,0), a mi rácsszabályunk két osztály + egy elem
   (0,2,1) — vagyis 480 px ALATT a WooCommerce nyert, és a rács visszaesett
   blokk-elrendezésbe. Innen jött, hogy a kártyák egymás alá kerültek, és
   nem volt köztük térköz: blokk-elrendezésben a `gap` nem csinál semmit.

   Az attribútum-szelektor épp eggyel többet ér, így már mi nyerünk. */
@media (max-width: 689px) {
	.wc-block-grid[class] ul.wc-block-grid__products,
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
	}
}

/* ---------- 33.2 Beragadt hover érintőképernyőn ----------
   Érintésnél a :hover a koppintás UTÁN is ragad. A termékkártya gombja
   hoverre tintafeketére vált — így koppintás után fekete maradt, a töltő
   felirat pedig eltűnt róla. Ez volt a „harmadik, üres állapot".

   Minden színt váltó hover mostantól csak ott él, ahol van egér. */
@media (hover: none) {
	ul.products li.product .button:hover,
	.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
	.woocommerce .coupon .button:hover,
	.woocommerce button[name="update_cart"]:not(:disabled):hover,
	.woocommerce-message a:not(.button):hover,
	a.restore-item:hover,
	.is-style-outline .wp-block-button__link:hover {
		background: transparent;
		color: var(--ct-ink);
		border-color: var(--ct-line);
	}
	ul.products li.product:hover a img,
	.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: none; }
	.ct-header-trigger:hover { background: transparent; }
}

/* ---------- 33.3 A töltésjelző láthatatlan volt sötét gombon ----------
   A gyűrű feje tintafekete volt; egy tintafekete gombon ez nem látszik.
   A színt mostantól változó adja, és a tömör gombokon fehérre vált. */

.woocommerce a.button,
.woocommerce button.button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.single_add_to_cart_button {
	--ct-spin-track: var(--ct-line);
	--ct-spin-head: var(--ct-ink);
}

/* Tömör (elsődleges) gombok: világos gyűrű. */
.single_add_to_cart_button,
#place_order,
.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	--ct-spin-track: rgba(255, 255, 255, 0.32);
	--ct-spin-head: #fff;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce .single_add_to_cart_button.loading::after,
.wc-block-grid__product-add-to-cart .wp-block-button__link.loading::after {
	border-color: var(--ct-spin-track);
	border-top-color: var(--ct-spin-head);
}

/* Töltés közben a gomb ne váltson tömör feketére akkor sem, ha a hover
   beragadt: az állapot legyen egyértelműen „dolgozom", ne „kijelölve". */
.woocommerce a.button.loading,
.wc-block-grid__product-add-to-cart .wp-block-button__link.loading {
	background: var(--ct-surface);
	border-color: var(--ct-line);
	--ct-spin-track: var(--ct-line);
	--ct-spin-head: var(--ct-ink);
}
.woocommerce a.button.ct-added,
.wc-block-grid__product-add-to-cart .wp-block-button__link.ct-added {
	background: var(--ct-surface);
}

/* =============================================================================
   34. ÁTADÁS ELŐTTI ÁTNÉZÉS — UI/UX JAVÍTÁSOK
   -----------------------------------------------------------------------------
   Végigmentem minden folyamon valós 393 px-es szélességen és asztali méreten.
   Amit itt javítok, azt mind ott találtam, nem elméletben.
   ========================================================================== */

/* ---------- 34.1 Offcanvas: a hátlap fehér volt ----------
   A #offcanvas háttere átlátszatlan fehér: a sötét panel mellett maradó 47 px
   csík tömör fehér sávnak látszott, az oldal pedig teljesen eltűnt mögüle.
   Ettől nézett ki hibásnak a menü telefonon. Sötét, áttetsző hátlap kell,
   amin átdereng az oldal — így lesz belőle réteg, nem takarás. */
#offcanvas.ct-panel {
	background: rgba(10, 12, 15, 0.5);
	-webkit-backdrop-filter: saturate(120%) blur(3px);
	backdrop-filter: saturate(120%) blur(3px);
}

/* A panel keskenyebb: marad 15% koppintható hely a bezáráshoz.
   Régen 88vw volt — 393 px-en 47 px csík, amit alig lehet eltalálni. */
#offcanvas.ct-panel .ct-panel-inner {
	max-width: min(420px, 85vw);
	display: flex;
	flex-direction: column;
	box-shadow: -24px 0 60px rgba(10, 12, 15, 0.35);
}

/* A tartalom görgethető, ha a menü hosszabb a képernyőnél, és a lábjegyzet
   a panel aljára kerül — eddig a menü után lógott a levegőben. */
#offcanvas .ct-panel-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
#offcanvas .ct-panel-content-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom: calc(var(--ct-s-8) + env(safe-area-inset-bottom, 0px));
}
#offcanvas .celthera-panel-note { margin-top: auto; }

/* A bezáró gomb 32 px volt, benne egy 12 px-es ikon, és a 28 px magas
   sávból kilógott. 44 px-es koppintófelület, olvasható kontraszt. */
#offcanvas .ct-panel-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 60px;
	padding: var(--ct-s-2) var(--ct-s-3) 0 var(--ct-s-5);
}
#offcanvas .ct-toggle-close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--ct-dur) var(--ct-ease),
		background var(--ct-dur) var(--ct-ease);
}
#offcanvas .ct-toggle-close svg { width: 15px; height: 15px; }
#offcanvas .ct-toggle-close:hover,
#offcanvas .ct-toggle-close:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

/* ---------- 34.2 Hero kísérősor: 1 + 2 tördelés ----------
   393 px-en az első tétel egyedül maradt egy sorban, a másik kettő alatta —
   árva sor, ami véletlennek látszik. Telefonon egy hasáb, középre. */
@media (max-width: 600px) {
	.celthera-hero-meta {
		flex-direction: column;
		gap: var(--ct-s-2);
	}
}

/* ---------- 34.3 Lábléc ----------
   A rács négy hasábra volt osztva, de a Legal hasáb csak akkor jelenik meg,
   ha a jogi oldalak publikálva vannak. Addig egy üres negyed maradt a jobb
   szélen. A rács igazodjon a tényleges hasábszámhoz. */
@media (min-width: 900px) {
	.celthera-footer__grid {
		grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
	}
}
/* Rácselem alapból nem megy min-content alá — hosszú szöveg kilógatja a
   hasábot. Telefonon ettől futott ki a márkaszöveg a képernyő szélén. */
.celthera-footer__grid > * { min-width: 0; }

/* A láblécben a linkek 18 px magasak voltak — koppintani nehéz. */
@media (max-width: 899px) {
	.celthera-footer__col li { margin: 0; }
	.celthera-footer__col a {
		display: block;
		padding: 11px 0;
	}
}

/* ---------- 34.4 Kosár ----------
   A terméknév a konténer jobb széléig ért, a törlés ikon pedig 16 px-es
   célpont volt a képernyő szélén — pont az a gomb, amit nem szabad
   véletlenül eltalálni. */
@media (max-width: 767px) {
	.woocommerce table.shop_table td.product-name { padding-right: var(--ct-s-6); }
	.woocommerce table.shop_table td.product-remove { padding-right: 0; }
}
.woocommerce table.shop_table a.remove {
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--ct-ink-3);
	transition: color var(--ct-dur) var(--ct-ease),
		background var(--ct-dur) var(--ct-ease);
}
.woocommerce table.shop_table a.remove:hover,
.woocommerce table.shop_table a.remove:focus-visible {
	color: var(--ct-danger);
	background: var(--ct-surface-3);
}

/* A letiltott "Update cart" ugyanúgy nézett ki, mint az "Apply coupon" —
   két egyforma, teljes szélességű gomb, az egyik halványan. Törött
   felületnek olvasódott. Legyen látszatra is másodlagos. */
.woocommerce .actions .button[name="update_cart"],
.woocommerce .actions button[name="update_cart"] {
	background: transparent;
	border-color: transparent;
	color: var(--ct-ink-3);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: var(--ct-t-sm);
}
.woocommerce .actions .button[name="update_cart"]:disabled,
.woocommerce .actions button[name="update_cart"]:disabled {
	opacity: 0.4;
	text-decoration: none;
}
.woocommerce .actions .button[name="update_cart"]:not(:disabled):hover {
	background: transparent;
	color: var(--ct-ink);
}

/* Kosárösszesítő: a végösszeg és a mögötte álló áfa-megjegyzés egy sorba
   volt zsúfolva, a "27%)" pedig külön sorba tört a jobb szélen. */
.woocommerce .cart_totals .order-total td { text-align: right; }
.woocommerce .cart_totals .order-total .amount { display: inline-block; }
.woocommerce .cart_totals .order-total small,
.woocommerce .cart_totals .order-total .includes_tax {
	display: block;
	margin-top: var(--ct-s-1);
	font-size: var(--ct-t-xs);
	color: var(--ct-ink-3);
	white-space: normal;
}
.woocommerce .cart_totals th,
.woocommerce .cart_totals td { vertical-align: baseline; }

/* ---------- 34.5 Pénztár ----------
   40 px-es beviteli mezők telefonon: a hüvelykujj célpontja legalább 44 px.
   (A betűméret 17 px marad — 16 alatt az iOS ráközelítene a mezőre.) */
@media (max-width: 767px) {
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce-page form .form-row input.input-text,
	.woocommerce-page form .form-row select,
	.select2-container .select2-selection--single { min-height: 48px; }
	.woocommerce form .form-row textarea { min-height: 96px; }
}

/* A nyilatkozat jelölőnégyzete 18 px volt: a címke egészét kattinthatóvá
   tesszük, a négyzetet pedig felnagyítjuk. */
.celthera-consent__row label { cursor: pointer; }
.celthera-consent__row input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	accent-color: var(--ct-ink);
}

/* ---------- 34.7 Rendezés a shop archívumon ----------
   Telefonon eddig csak egy ↑↓ ikon jelezte, hogy ez rendezés. */
.celthera-sort-label {
	display: none;
	font-size: var(--ct-t-xs);
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
}
@media (max-width: 689px) {
	.celthera-sort-label {
		display: inline-block;
		margin-left: auto;
		align-self: center;
	}
	/* A Blocksy a legördülőre is margin-left:auto-t tesz. Két auto margó
	   elfelezi a szabad helyet, ezért állt a felirat a sor közepén, a
	   vezérlőtől 115 px-re. A címke és a gomb egy egység — egyben marad. */
	.woo-listing-top .woocommerce-ordering { margin-left: 0; }
}

/* ---------- 34.8 Specifikációs táblázat: komponens-csoportok ---------- */
.celthera-specs__group th {
	padding-top: var(--ct-s-5);
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 600;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink);
	border-bottom: 1px solid var(--ct-line-strong);
}
.celthera-specs__group:first-child th { padding-top: 0; }

/* ---------- 34.9 Süti-sáv ----------
   A bővítmény alapból élénkkék gombokat és egy "Powered by" jelvényt tesz ki.
   Ez az első felület, amit egy új látogató lát — nem lóghat ki a designból. */
.cookieadmin_law_container { font-family: var(--ct-font-ui) !important; }
.cookieadmin_law_container button,
.cookieadmin_law_container .cookieadmin_button {
	border-radius: var(--ct-r-sm) !important;
	font-family: var(--ct-font-ui) !important;
	font-size: var(--ct-t-sm) !important;
	letter-spacing: 0.01em !important;
	min-height: 44px !important;
	box-shadow: none !important;
}
.cookieadmin_law_container button[class*="accept"],
.cookieadmin_law_container button[id*="accept"] {
	background: var(--ct-ink) !important;
	border: 1px solid var(--ct-ink) !important;
	color: #fff !important;
}
/* Az elutasítás legyen ugyanolyan könnyen megtalálható, mint az elfogadás:
   azonos méret, azonos hangsúly, csak a kitöltés különbözik. Az EU-s
   gyakorlat ezt várja el, a bővítmény alapból kékkel kiabálta az egyiket. */
.cookieadmin_law_container button[class*="reject"],
.cookieadmin_law_container button[id*="reject"] {
	background: transparent !important;
	color: var(--ct-ink) !important;
	border: 1px solid var(--ct-ink) !important;
}
.cookieadmin_law_container button[class*="custom"],
.cookieadmin_law_container button[id*="custom"] {
	background: transparent !important;
	color: var(--ct-ink-3) !important;
	border: 1px solid transparent !important;
}
/* A gyártó saját hirdetése az ügyfél oldalán. */
.cookieadmin_law_container a[href*="cookieadmin"],
.cookieadmin_law_container [class*="powered"],
.cookieadmin_law_container [class*="branding"] { display: none !important; }

@media (max-width: 689px) {
	.cookieadmin_law_container.cookieadmin_box {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
	}
	/* A sáv 393 px-en a képernyő 44%-át vitte el, mert a három gomb
	   egymás alá került. A két döntés egy sorba kerül — egyforma
	   szélességgel, tehát az elutasítás nem lesz nehezebb —, a
	   testreszabás pedig fölé, halkabb súllyal. */
	.cookieadmin_law_container .cookieadmin_consent_btns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.cookieadmin_law_container .cookieadmin_customize_btn { grid-column: 1 / -1; }
	.cookieadmin_law_container .cookieadmin_consent_inside { font-size: 15px !important; }
}

/* ---------- 34.10 Beúszás: legyen mindig kimenet ----------
   A .ct-reveal kezdőállapota opacity:0. Ha az IntersectionObserver bármiért
   nem sül el — bfcache-ből visszalépés, nyomtatás, egy hiba a szkript
   későbbi részében —, a tartalom láthatatlan marad. Ez sosem történhet meg
   egy webshopban, úgyhogy van egy biztosíték: pár másodperc után minden
   megjelenik, akkor is, ha a megfigyelő néma maradt. */
.ct-js.ct-reveal-failsafe .ct-reveal { opacity: 1; transform: none; }
@media print {
	.ct-js .ct-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 34.11 Egy közös bal szélső vonal a szerkesztett szakaszokon ----------
   A szakaszcím balra zárt, a bevezetőt viszont a WordPress
   is-layout-constrained szabálya középre húzta (margin-inline:auto), a
   szakasz gombja pedig szintén középen állt — három különböző igazítás
   egyetlen szakaszon belül, ami véletlennek látszik, nem tervnek.

   Nem behúzást adunk nekik, hanem elvesszük a középre húzást: a sorszám, a
   cím, a bevezető és a gomb ugyanarra a bal szélső vonalra kerül. Egy
   nagyméretű, teljes szélességű cím mellett ez az egyetlen igazítás, ami
   szándékosnak olvasódik.

   A dupla osztálynév a szelektorban nem elírás: a WordPress saját szabálya
   !important-tal tolja középre, és a specifikusságot fölé kell vinni. */
@media (min-width: 900px) {
	.entry-content > p.ct-section-intro.ct-section-intro {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 56ch;
	}
	.entry-content > .wp-block-buttons.is-content-justification-center:not(.ct-hero-cta) {
		justify-content: flex-start;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ---------- 34.12 Keresési találatok ----------
   A Blocksy általános találatkártyája blogbejegyzésre van szabva: meta, cím,
   utána a kép, majd egy több száz pixeles kivonat. Egy webshopban a keresés
   a katalógus másik bejárata — ugyanúgy kell kinéznie, mint a terméklista:
   előbb a kép, aztán a név, és a leírásból csak annyi, ami eligazít. */
.search-results .entries .entry-card {
	display: flex;
	flex-direction: column;
}
.search-results .entry-card .ct-media-container { order: -1; margin-bottom: var(--ct-s-4); }
.search-results .entry-card .entry-title { font-size: var(--ct-t-lg); }
.search-results .entry-card .entry-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--ct-t-sm);
	color: var(--ct-ink-2);
}

/* ---------- 34.13 404 ----------
   Eddig egy cím, egy mondat és egy keresőmező volt rajta. Aki eltéved, annak
   a legrövidebb út a katalógus, nem egy üres beviteli mező. */
.error404 .celthera-404-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ct-s-2);
	margin-top: var(--ct-s-6);
	padding: var(--ct-s-3) var(--ct-s-5);
	min-height: 48px;
	background: var(--ct-ink);
	color: #fff;
	border-radius: var(--ct-r-sm);
	font-size: var(--ct-t-sm);
	text-decoration: none;
	transition: opacity var(--ct-dur) var(--ct-ease);
}
.error404 .celthera-404-cta:hover { opacity: 0.85; color: #fff; }

/* =============================================================================
   35. FEJLÉC ÉS APRÓ MESTERSÉGBELI RÉSZLETEK
   ========================================================================== */

/* ---------- 35.1 A logó nem volt egy vonalban a hamburgerrel ----------
   A logó horgonya blokk elem, benne a kép inline: a kép az alapvonalra ül,
   alatta pedig ott marad a sor alsó nyúlványának helye. A doboz 50 px magas,
   a kép 30 — vagyis a kép 10 px-rel a doboz közepe fölött állt, míg a
   hamburger pontosan középen. Ez a különbség telefonon jól látszik.

   Asztali gépen ugyanez 5 px: kevésbé feltűnő, de ugyanaz a hiba.

   Flexbe téve a horgonyt a kép valóban a doboz közepére kerül. */
.site-logo-container {
	display: flex;
	align-items: center;
}
.site-logo-container > img { display: block; }

/* ---------- 35.2 Hamburger: érintőn ne maradjon aszimmetrikus ----------
   A két vonal szándékosan különböző hosszú (22 és 14 px), és hoverre
   egyenlítődik ki — ez egérrel egy kedves apróság. Telefonon viszont nincs
   hover: ott csak annyi látszik, hogy a két vonal nem egyforma, magyarázat
   nélkül. Érintőn tehát szimmetrikus az alapállapot. */
@media (hover: none) {
	.ct-header-trigger::after { width: 22px; }
}

/* ---------- 35.3 Kereső ikon: 15 px-es célpont ----------
   Maga az ikon maradjon apró, a kattintható felület viszont ne legyen az. */
.ct-header-search,
[data-id="search"] > a,
[data-id="search"] > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border-radius: 999px;
	transition: background var(--ct-dur) var(--ct-ease);
}
@media (hover: hover) and (pointer: fine) {
	.ct-header-search:hover,
	[data-id="search"] > a:hover { background: var(--ct-surface-3); }
}

/* ---------- 35.4 Termékoldali fül: egyetlen fül, középre zárva ----------
   Egy elemű fülsor a lap közepén árva vezérlőnek látszik — pont úgy, mintha
   ottfelejtették volna. Balra zárva a lap többi eleméhez igazodik, és akkor
   is helyes marad, ha később a súlyok miatt megjelenik egy második fül.
   A betűköz is hiányzott: az oldal minden más verzálja tágabb. */
/* A téma szabálya (.woocommerce div.product div.woocommerce-tabs ul.tabs)
   négy osztállyal erősebb, mint bármi ésszerű, amit ide írhatnék — viszont
   a saját változóját olvassa. Azt állítjuk át: ez a téma saját felülete,
   nem specifikussági küzdelem. */
.woocommerce div.product div.woocommerce-tabs { --horizontal-alignment: flex-start; }
.woocommerce-tabs ul.wc-tabs { justify-content: flex-start; }
.woocommerce-tabs ul.wc-tabs li a {
	letter-spacing: var(--ct-track-caps);
	padding-left: 0;
	padding-right: var(--ct-s-5);
}

/* =============================================================================
   36. „CONTINUE" — BELSŐ TOVÁBBLÉPÉS A TARTALMI OLDALAK VÉGÉN
   -----------------------------------------------------------------------------
   A tartalmi oldalak zsákutcák voltak: az utolsó bekezdés után közvetlenül a
   lábléc jött. Ez a sáv két indokolt továbblépést kínál, a lap saját
   szerkesztett nyelvén — sorszám nélkül, mert itt nem sorrend van, hanem
   választás.
   ========================================================================== */

.celthera-next {
	border-top: 1px solid var(--ct-line);
	padding-block: var(--ct-s-8);
	background: var(--ct-surface);
}
.celthera-next__title {
	margin: 0 0 var(--ct-s-6);
	font-family: var(--ct-font-ui);
	font-size: var(--ct-t-xs);
	font-weight: 500;
	letter-spacing: var(--ct-track-caps);
	text-transform: uppercase;
	color: var(--ct-ink-3);
}
.celthera-next__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ct-s-5);
}
.celthera-next__item {
	display: block;
	padding: var(--ct-s-5) var(--ct-s-5) var(--ct-s-6);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	text-decoration: none;
	color: inherit;
	background: var(--ct-surface);
	transition:
		border-color var(--ct-dur) var(--ct-ease),
		transform var(--ct-dur) var(--ct-ease),
		box-shadow var(--ct-dur) var(--ct-ease);
}
.celthera-next__label {
	display: block;
	font-family: var(--ct-font-display);
	font-size: var(--ct-t-lg);
	line-height: 1.2;
	letter-spacing: var(--ct-track-display);
	color: var(--ct-ink);
}
/* A nyíl a címke része, nem külön ikon: így együtt mozdul a szöveggel. */
.celthera-next__label::after {
	content: " \2192";
	display: inline-block;
	margin-left: 0.35em;
	color: var(--ct-ink-3);
	transition: transform var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
}
.celthera-next__blurb {
	display: block;
	margin-top: var(--ct-s-3);
	font-size: var(--ct-t-sm);
	line-height: 1.55;
	color: var(--ct-ink-2);
	max-width: 40ch;
}

@media (hover: hover) and (pointer: fine) {
	.celthera-next__item:hover {
		border-color: var(--ct-line-strong);
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(20, 22, 26, 0.07);
	}
	.celthera-next__item:hover .celthera-next__label::after {
		transform: translateX(4px);
		color: var(--ct-ink);
	}
}
.celthera-next__item:focus-visible {
	outline: 2px solid var(--ct-ink);
	outline-offset: 3px;
}
@media (hover: none) {
	.celthera-next__item:active { border-color: var(--ct-line-strong); }
}

/* =============================================================================
   37. A KLIENSI ÁTNÉZÉS DIZÁJN-KÉRÉSEI
   ========================================================================== */

/* ---------- 37.1 A fejléc túl nagy ----------
   Asztali gépen 152 px volt: egy 120 px-es sormagasság plusz 2×16 px belső
   térköz — miközben a logó 40 px. Az arány nem nagyvonalú volt, hanem üres.
   Telefonon 102 px ment el egy 30 px-es logóra.

   A sormagasságot vesszük vissza, a térközt nem: így a fejléc kisebb lesz,
   de a logó és a menü körüli levegő megmarad. Asztalin 152 → 112, telefonon
   102 → 80. Ez 40, illetve 22 pixel a hajtás fölött, ami a heróban pont egy
   sornyi szöveg. */
/* A téma szelektora [data-header*="type-1"] .ct-header [data-row*="middle"] —
   három osztállyal erősebb, mint egy sima attribútum. Ugyanazt az alakot
   használjuk egy body-val megtoldva, hogy ne a betöltési sorrenden múljon. */
body[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 80px; }

@media (max-width: 999.98px) {
	body[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 56px; }
}
@media (max-width: 689px) {
	body[data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 52px; }
	[data-row="middle"] > div { padding-block: 12px; }
}

/* ---------- 37.2 A statisztika-sáv számai ----------
   A négy szám (≥ 99% · 15 · 100% · EU) eddig ugyanabban a Didone serifben
   volt, mint a szóvédjegy. Egy adatsáv így úgy néz ki, mintha négyszer
   megismételnénk a logót — a szám nem márkajel, hanem mérés.

   Átteszem a UI betűre, közepes vastagsággal és táblázatos számjegyekkel:
   a tabular-nums attól fontos, hogy a négy érték azonos szélességű
   számjegyekből álljon, és a sáv ne táncoljon. Kicsit szűkebb betűköz, mert
   a groteszk nagy méretben tágabbnak látszik, mint a serif. */
.celthera-datastrip__value {
	font-family: var(--ct-font-ui);
	font-weight: 500;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.125rem);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- 37.3 Termékkártyák: azonos geometria ----------
   A betűméret eddig is egységes volt (19 px mindenhol) — ami eltért, az a
   sorok száma: egy „Epitalon 10 mg” egy sor, egy „CJC-1295 no DAC +
   Ipamorelin Blend 10 mg” három. Emiatt látszott más méretűnek.

   A címnek két sor helyet tartunk fenn minden töréspontnál (eddig csak
   asztalin), így minden kártyán ugyanott kezdődik az ár és a gomb. A hosszú
   nevet NEM vágjuk le: egy hatóanyag nevéből a végén van a hatáserősség, és
   azt elrejteni rosszabb, mint egy harmadik sor. */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	min-height: 2.4em;
}

/* =============================================================================
   38. TELEGRAM SUPPORT WIDGET
   -----------------------------------------------------------------------------
   Grafit és fehér, vékony vonalak — a viálcímkék króm-grafit világa.
   Semmi kék, semmi színátmenet: a Telegram saját arculata itt vendég, nem
   házigazda.
   ========================================================================== */

.celthera-tg {
	--ct-tg-graphite: #262A2E;
	--ct-tg-line: #E2E6EA;
	--ct-tg-bottom: 20px;

	position: fixed;
	right: 20px;
	bottom: var(--ct-tg-bottom);
	z-index: 9998;                 /* a süti-sáv (99999) alatt marad */
	font-family: var(--ct-font-ui);
	/* A szkript teszi rá az is-ready-t: enélkül egy pillanatra sem villan. */
	visibility: hidden;
}
.celthera-tg.is-ready { visibility: visible; }

/* ---------- 38.1 A kártya ---------- */

.celthera-tg__card {
	width: 268px;
	background: #fff;
	border: 1px solid var(--ct-tg-line);
	border-radius: var(--ct-r-md);
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(20, 22, 26, 0.14);
	transform-origin: 100% 100%;
	transition:
		opacity 180ms var(--ct-ease),
		transform 220ms var(--ct-ease);
}

.celthera-tg__bar {
	display: flex;
	align-items: center;
	gap: var(--ct-s-2);
	padding: 11px var(--ct-s-3) 11px var(--ct-s-4);
	background: var(--ct-tg-graphite);
	color: #fff;
}
.celthera-tg__glyph { flex: none; }
.celthera-tg__title {
	flex: 1;
	font-size: var(--ct-t-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Minimalizáló: egy vízszintes vonal, nem egy „×”. A kártya nem bezárul,
   hanem összecsukódik — a jel mondja meg, melyik történik. */
.celthera-tg__min {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ct-r-sm);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
}
.celthera-tg__min span {
	display: block;
	width: 13px;
	height: 1.5px;
	background: currentColor;
}
.celthera-tg__min:hover,
.celthera-tg__min:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ---------- 38.2 A törzs ---------- */

.celthera-tg__body {
	display: block;
	padding: var(--ct-s-5) var(--ct-s-4) var(--ct-s-5);
	text-align: center;
	text-decoration: none;
	color: var(--ct-tg-graphite);
	background: #fff;
	transition: background var(--ct-dur) var(--ct-ease);
}
.celthera-tg__code {
	display: block;
	width: 172px;                  /* a specifikáció minimuma 160 px */
	margin: 0 auto var(--ct-s-4);
}
.celthera-tg__code img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* A szóvédjegy a meglévő lockup: Didone, ritkított betűközzel. */
.celthera-tg__mark {
	display: block;
	font-family: var(--ct-font-display);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ct-tg-graphite);
	padding-top: var(--ct-s-4);
	border-top: 1px solid var(--ct-tg-line);
}
.celthera-tg__cta {
	display: block;
	margin-top: var(--ct-s-2);
	font-size: 12.5px;
	line-height: 1.5;
	color: #5F6A76;
}

/* A gomb csak telefonon: a saját képernyőn lévő kódot nem lehet beolvasni. */
.celthera-tg__btn { display: none; }
.celthera-tg__cta--tap { display: none; }

@media (hover: hover) and (pointer: fine) {
	.celthera-tg__body:hover { background: #FAFBFC; }
}

/* ---------- 38.3 Összecsukott állapot ---------- */

.celthera-tg__tab {
	display: none;
	align-items: center;
	gap: var(--ct-s-2);
	padding: 10px var(--ct-s-4);
	background: var(--ct-tg-graphite);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--ct-t-sm);
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(20, 22, 26, 0.22);
	transition: transform var(--ct-dur) var(--ct-ease);
}
@media (hover: hover) and (pointer: fine) {
	.celthera-tg__tab:hover { transform: translateY(-1px); }
}

.celthera-tg.is-min .celthera-tg__tab { display: inline-flex; }
.celthera-tg.is-min .celthera-tg__card {
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
	position: absolute;
	right: 0;
	bottom: 0;
}

.celthera-tg__tab:focus-visible,
.celthera-tg__body:focus-visible,
.celthera-tg__min:focus-visible {
	outline: 2px solid var(--ct-tg-graphite);
	outline-offset: 2px;
}

/* ---------- 38.4 Telefon ----------
   768 px alatt a kód helyén gomb, mélylinkkel. Ugyanaz a kártya és fejléc. */
@media (max-width: 767px) {
	.celthera-tg {
		right: 12px;
		left: auto;
	}
	.celthera-tg__card { width: min(300px, calc(100vw - 24px)); }
	.celthera-tg__code { display: none; }
	/* Nincs mit beolvasni a saját képernyőről — a felhívás is más. */
	.celthera-tg__cta--qr  { display: none; }
	.celthera-tg__cta--tap { display: block; }
	.celthera-tg__mark { padding-top: 0; border-top: 0; }
	.celthera-tg__btn {
		display: block;
		margin-top: var(--ct-s-4);
		padding: 13px var(--ct-s-4);
		min-height: 46px;
		background: var(--ct-tg-graphite);
		color: #fff;
		border-radius: var(--ct-r-sm);
		font-size: var(--ct-t-sm);
		font-weight: 500;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.celthera-tg__card,
	.celthera-tg__tab { transition: none; }
}

/* Nyomtatásban semmi keresnivalója. */
@media print { .celthera-tg { display: none !important; } }

/* ==========================================================================
   39. Az átadás előtti második átnézés javításai
   ========================================================================== */

/* ---------- 39.1 Süti-sáv: a két döntés legyen tényleg egyforma ----------
   A 34.9-ben az elfogadás tömör, az elutasítás körvonalas lett. Ez szép, de
   a tömör gomb így is elsődleges cselekvésnek látszik — márpedig a süti-
   kérdésre nincs ajánlott válasz, és a NAIH pont a vizuális rábeszélést
   nézi (NAIH-3195/2022). A kettő innentől azonos: ugyanaz a keret, ugyanaz
   a betű, ugyanaz a magasság. A „Testreszabás" marad halkabb, mert az nem
   döntés, hanem továbblépés.                                              */
.cookieadmin_law_container button[class*="accept"],
.cookieadmin_law_container button[id*="accept"],
.cookieadmin_law_container button[class*="reject"],
.cookieadmin_law_container button[id*="reject"] {
	background: transparent !important;
	color: var(--ct-ink) !important;
	border: 1px solid var(--ct-ink) !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	padding-inline: var(--ct-s-3) !important;
}

/* A sáv 375 pixel széles — NEM csak telefonon. Három gomb egy sorban
   ott is töri a feliratot („Reject / All"), asztali gépen is. A két
   döntés ezért mindig egy kétoszlopos rácsban, egyforma szélességgel;
   a testreszabás fölöttük, teljes szélességben. */
.cookieadmin_law_container .cookieadmin_consent_btns {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: var(--ct-s-2);
}
.cookieadmin_law_container .cookieadmin_customize_btn {
	grid-column: 1 / -1;
	order: -1;
}

/* ---------- 39.2 Kategóriacímke a terméklapkán ----------
   14 pixel magas link: ujjal alig eltalálható (WCAG 2.5.8 minimuma 24×24),
   és soron belüli szövegre vonatkozó kivétel sem védi, mert önálló sor.
   A látvány nem változik — a találati felület nő függőleges belső
   margóval, amit ugyanakkora negatív külső margó ellensúlyoz.             */
.woocommerce ul.products li.product a[class*="ct-term-"],
ul.products li.product a[class*="ct-term-"] {
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}

/* ---------- 39.3 A hero alcíme: egyszer elég ----------
   A meta leírást a lap kivonata (excerpt) adja — ez a WordPress
   szabványos helye, és a SiteSEO onnan olvassa. A Blocksy viszont
   ugyanezt a kivonatot ki is írja a cím alá `.page-description`-ként,
   így minden lap kétszer mondta el ugyanazt: egyszer alcímként, egyszer
   a saját bevezetőjében. A lapok saját bevezetővel készültek, azok a
   jobbak — a duplikátum megy. `display: none`, nem vizuális elrejtés:
   képernyőolvasónak sem kell kétszer meghallgatnia.                    */
.hero-section .page-description { display: none !important; }

/* ---------- 39.4 Érintőfelületek: a maradék önálló link ----------
   A WCAG 2.5.8 minimuma 24×24 pixel. A soron belüli, mondatba ágyazott
   linkekre ez nem vonatkozik (a sormagasság köti meg őket) — a lapkák
   címére és a morzsamenüre viszont igen: azok önálló sorok. A látvány
   nem változik, a találati felület nő, a negatív külső margó pedig
   visszaveszi a helyet, hogy semmi ne csússzon el.                    */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
ul.products li.product .woocommerce-loop-product__link,
.celthera-breadcrumb a,
.ct-breadcrumbs a {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
}

/* ---------- 39.5 Terméklapka: a kereskedelmi blokk igazodjon ----------
   A rács egyforma magasra húzza a lapkákat egy sorban, a címek viszont
   egy-, két- és háromsorosak. Eddig a gomb igazodott (a theme `auto`
   felső margója miatt), az ár és a kategória viszont a cím alatt lebegett
   — sorosan más magasságban. Négy lapka mellett ez látszik: a szem a
   vízszintes vonalakat keresi.

   A megoldás: az `auto` margó az ÁRRA kerül, tehát a szabad helyet a cím
   alatt nyeli el a lapka, és onnantól ár + kategória + gomb egy tömbként
   ül a lapka alján. A gomb margója fix lesz — két `auto` margó megosztaná
   egymás közt a helyet, és egyik sem érne le.                            */
.woocommerce ul.products li.product .price,
ul.products li.product .price { margin-top: auto !important; }

.woocommerce ul.products li.product .ct-woo-card-actions,
ul.products li.product .ct-woo-card-actions { margin-top: var(--ct-s-4) !important; }