/* ============================================================
   SAJTMÁGUS THEME — main.css
   v0.2.0 — Header, Footer, Front page sections.

   A design tokenek (színek, tipográfia, spacing, radii, shadow)
   a Claude Design System-ből származnak:
     .claude/DESIGN/sajtm-gus-design-system/project/colors_and_type.css
   Itt `--sm-*` prefixet adunk, hogy a theme scope-ja egyértelmű legyen.

   Vizuális referencia (mérvadó):
     .claude/DESIGN/sajtm-gus-design-system/project/ui_kits/homepage/index-v2.html
   és a hozzá tartozó *.jsx komponensek.
   ============================================================ */

/* ----------------------------------------------------------
   FONTS — assets/fonts/ alá a 6 *.ttf már be van másolva.
   ---------------------------------------------------------- */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces-Italic-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('../fonts/Lora-Variable.ttf') format('truetype');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('../fonts/Lora-Italic-Variable.ttf') format('truetype');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
	--sm-color-ink:           #35312F;
	--sm-color-ink-light:     #5C5450;
	--sm-color-stone:         #8A7B70;
	--sm-color-parchment:     #EFE6DD;
	--sm-color-butter:        #F7F1E8;
	--sm-color-milk:          #FDFAF6;

	--sm-color-terracotta:        #B5683E;
	--sm-color-terracotta-dark:   #8C4C28;
	--sm-color-terracotta-light:  #D4956E;
	--sm-color-ember:             #C94B3A;
	--sm-color-ember-dark:        #A33929;
	--sm-color-ember-light:       #E8826F;
	--sm-color-meadow:            #2E6B3E;
	--sm-color-meadow-dark:       #1E4A2A;
	--sm-color-meadow-light:      #5A9E6A;

	--sm-color-border:         #DDD3C6;
	--sm-color-border-strong:  #C9B9A8;
	--sm-color-shadow:         rgba(53, 49, 47, 0.12);
	--sm-color-shadow-strong:  rgba(53, 49, 47, 0.24);
	--sm-color-overlay:        rgba(53, 49, 47, 0.55);

	--sm-color-dark:           #2A2422;
	--sm-color-dark-alt:       #3D3532;
	--sm-color-dark-deep:      #1C1210;

	--sm-color-badge-friss:        #2E6B3E;
	--sm-color-badge-erlelt:       #B5683E;
	--sm-color-badge-fustolt:      #4A3728;
	--sm-color-badge-vaj:          #C4932A;
	--sm-color-badge-elofizetes:   #6B4C8A;

	--sm-bg-page:     var(--sm-color-parchment);
	--sm-bg-card:     var(--sm-color-butter);
	--sm-bg-elevated: var(--sm-color-milk);
	--sm-bg-dark:     var(--sm-color-dark);

	--sm-text-primary:   var(--sm-color-ink);
	--sm-text-secondary: var(--sm-color-ink-light);
	--sm-text-muted:     var(--sm-color-stone);
	--sm-text-heading:   var(--sm-color-terracotta);
	--sm-text-on-dark:   var(--sm-color-parchment);
	--sm-text-on-cta:    #FDFAF6;

	--sm-accent:        var(--sm-color-terracotta);
	--sm-accent-dark:   var(--sm-color-terracotta-dark);
	--sm-cta:           var(--sm-color-ember);
	--sm-cta-dark:      var(--sm-color-ember-dark);

	--sm-font-display: 'Fraunces', Georgia, serif;
	--sm-font-body:    'Lora', Georgia, serif;
	--sm-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--sm-text-xs:   0.75rem;
	--sm-text-sm:   0.875rem;
	--sm-text-base: 1rem;
	--sm-text-md:   1.125rem;
	--sm-text-lg:   1.25rem;
	--sm-text-xl:   1.5rem;
	--sm-text-2xl:  1.875rem;
	--sm-text-3xl:  2.25rem;
	--sm-text-4xl:  3rem;
	--sm-text-5xl:  3.75rem;
	--sm-text-6xl:  4.5rem;

	--sm-weight-regular:  400;
	--sm-weight-medium:   500;
	--sm-weight-semibold: 600;
	--sm-weight-bold:     700;

	--sm-leading-tight:   1.2;
	--sm-leading-snug:    1.35;
	--sm-leading-normal:  1.6;
	--sm-leading-relaxed: 1.75;

	--sm-tracking-tight:   -0.02em;
	--sm-tracking-normal:   0em;
	--sm-tracking-wide:     0.04em;
	--sm-tracking-widest:   0.14em;

	--sm-space-1:  0.25rem;
	--sm-space-2:  0.5rem;
	--sm-space-3:  0.75rem;
	--sm-space-4:  1rem;
	--sm-space-5:  1.25rem;
	--sm-space-6:  1.5rem;
	--sm-space-8:  2rem;
	--sm-space-10: 2.5rem;
	--sm-space-12: 3rem;
	--sm-space-16: 4rem;
	--sm-space-20: 5rem;
	--sm-space-24: 6rem;
	--sm-space-32: 8rem;

	--sm-section-padding-y: var(--sm-space-20);
	--sm-section-padding-x: var(--sm-space-6);

	--sm-container:     1180px;
	--sm-container-sm:  640px;
	--sm-container-md:  768px;
	--sm-container-lg:  1024px;
	--sm-container-xl:  1280px;

	--sm-radius-sm:   4px;
	--sm-radius-md:   8px;
	--sm-radius-lg:   12px;
	--sm-radius-xl:   20px;
	--sm-radius-full: 999px;

	--sm-shadow-xs: 0 1px 3px rgba(53, 49, 47, 0.08);
	--sm-shadow-sm: 0 2px 6px rgba(53, 49, 47, 0.10);
	--sm-shadow-md: 0 4px 14px rgba(53, 49, 47, 0.12);
	--sm-shadow-lg: 0 8px 28px rgba(53, 49, 47, 0.15);
	--sm-shadow-xl: 0 16px 48px rgba(53, 49, 47, 0.20);

	--sm-transition-fast:   150ms ease;
	--sm-transition-base:   250ms ease;
	--sm-transition-slow:   400ms ease;
	--sm-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

	--sm-header-height:  68px;
	--sm-topbar-height:  32px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--sm-bg-page);
	color: var(--sm-text-primary);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	line-height: var(--sm-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.sm-menu-open { overflow: hidden; }

img, picture, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sm-accent);
	text-decoration: none;
	transition: color var(--sm-transition-base);
}

a:hover,
a:focus-visible { color: var(--sm-accent-dark); }

:focus-visible {
	outline: 2px solid var(--sm-color-ember);
	outline-offset: 3px;
	border-radius: var(--sm-radius-sm);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Globális szöveg-kijelölés — fűszál-zöld halvány alapszín. A WC kosárban /
   form-mezőkben is megjelenik, így minden oldalon visszatér a brand-zöld. */
::selection {
	background: rgba(46, 107, 62, 0.22);
	color: var(--sm-color-meadow-dark);
}
::-moz-selection {
	background: rgba(46, 107, 62, 0.22);
	color: var(--sm-color-meadow-dark);
}

/* ----------------------------------------------------------
   SKIP LINK
   ---------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: var(--sm-space-2);
	background: var(--sm-color-ember);
	color: var(--sm-text-on-cta);
	padding: var(--sm-space-2) var(--sm-space-4);
	border-radius: var(--sm-radius-full);
	font-family: var(--sm-font-ui);
	font-weight: var(--sm-weight-semibold);
	z-index: 9999;
}
.skip-link:focus { left: var(--sm-space-4); }

/* ----------------------------------------------------------
   TYPOGRAPHY DEFAULTS
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	line-height: var(--sm-leading-snug);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-text-heading);
}

h1 { font-size: var(--sm-text-5xl); font-weight: var(--sm-weight-bold); font-style: italic; line-height: var(--sm-leading-tight); }
h2 { font-size: var(--sm-text-4xl); }
h3 { font-size: var(--sm-text-3xl); color: var(--sm-color-ink); }
h4 { font-size: var(--sm-text-2xl); color: var(--sm-color-ink); font-weight: var(--sm-weight-medium); }
h5 { font-size: var(--sm-text-xl);  color: var(--sm-color-ink); font-weight: var(--sm-weight-medium); }
h6 { font-size: var(--sm-text-lg);  color: var(--sm-color-ink); font-weight: var(--sm-weight-medium); }

p { margin: 0 0 var(--sm-space-4); }
small { font-size: var(--sm-text-sm); color: var(--sm-text-secondary); }

.sm-display {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	line-height: var(--sm-leading-tight);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-text-heading);
}

/* Eyebrow label — minden szekció / kártya feletti kis felirat. A brand
   fűszál-zöld accent egy 18px széles, 2px vastag vonal ELŐTTE, középre
   igazítva a baseline-hoz. Ez ad egy diszkrét, de a teljes oldalon
   visszatérő zöld lüktetést a tipográfia mellett. */
.sm-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-text-muted);
	margin: 0 0 var(--sm-space-3);
}

.sm-label::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--sm-color-meadow);
	border-radius: 1px;
	flex-shrink: 0;
}

/* Sötét háttéren (footer / sales hero) világosabb meadow-tone-t adunk
   az accent-nek, hogy ne olvadjon bele a háttérbe. */
.sm-site-footer .sm-label::before,
.sm-section--dark .sm-label::before,
.sm-sales__hero .sm-label::before {
	background: var(--sm-color-meadow-light);
}

/* ----------------------------------------------------------
   CONTAINER / SECTION
   ---------------------------------------------------------- */
.sm-container {
	width: 100%;
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-section-padding-x);
}

.sm-section { padding-block: var(--sm-section-padding-y); }
.sm-section--dark { background: var(--sm-bg-dark); color: var(--sm-text-on-dark); }
.sm-section--card { background: var(--sm-bg-card); }

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.sm-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	padding: 0.75rem 1.75rem;
	border-radius: var(--sm-radius-full);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background var(--sm-transition-base), border-color var(--sm-transition-base), color var(--sm-transition-base), transform var(--sm-transition-fast), box-shadow var(--sm-transition-base);
	text-decoration: none;
	white-space: nowrap;
}

.sm-btn--primary {
	background: var(--sm-cta);
	color: var(--sm-text-on-cta);
	box-shadow: 0 2px 8px rgba(201, 75, 58, 0.30);
}
.sm-btn--primary:hover,
.sm-btn--primary:focus-visible {
	background: var(--sm-cta-dark);
	color: var(--sm-text-on-cta);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(201, 75, 58, 0.38);
}

.sm-btn--secondary {
	background: transparent;
	color: var(--sm-color-ink);
	border-color: var(--sm-color-border-strong);
}
.sm-btn--secondary:hover,
.sm-btn--secondary:focus-visible {
	color: var(--sm-color-terracotta);
	border-color: var(--sm-color-terracotta);
	background: rgba(181, 104, 62, 0.06);
	transform: translateY(-1px);
}

.sm-btn--ghost-dark {
	background: rgba(239, 230, 221, 0.07);
	color: var(--sm-color-parchment);
	border-color: rgba(239, 230, 221, 0.30);
	backdrop-filter: blur(4px);
}
.sm-btn--ghost-dark:hover,
.sm-btn--ghost-dark:focus-visible {
	border-color: var(--sm-color-parchment);
	background: rgba(239, 230, 221, 0.14);
	color: var(--sm-color-parchment);
	transform: translateY(-1px);
}

.sm-btn--nature {
	background: var(--sm-color-meadow);
	color: var(--sm-text-on-cta);
}
.sm-btn--nature:hover,
.sm-btn--nature:focus-visible {
	background: var(--sm-color-meadow-dark);
	color: var(--sm-text-on-cta);
	transform: translateY(-1px);
}

/* ----------------------------------------------------------
   BADGES
   ---------------------------------------------------------- */
.sm-badge,
.sm-product-card__badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--sm-font-ui);
	font-size: 0.65rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: var(--sm-radius-full);
	line-height: 1;
}

.sm-badge--friss,
.is-friss      { background: rgba(46, 107, 62, 0.14); color: var(--sm-color-badge-friss); }
.sm-badge--erlelt,
.is-erlelt     { background: rgba(181, 104, 62, 0.14); color: var(--sm-color-badge-erlelt); }
.sm-badge--fustolt,
.is-fustolt    { background: rgba(74, 55, 40, 0.14); color: var(--sm-color-badge-fustolt); }
.sm-badge--vaj,
.is-vaj        { background: rgba(196, 147, 42, 0.14); color: var(--sm-color-badge-vaj); }
.sm-badge--elofizetes,
.is-elofizetes { background: rgba(107, 76, 138, 0.14); color: var(--sm-color-badge-elofizetes); }

/* ============================================================
   TOP BAR
   ============================================================ */
.sm-topbar {
	background: var(--sm-color-dark);
	color: rgba(239, 230, 221, 0.7);
	min-height: var(--sm-topbar-height);
	display: flex;
	align-items: center;
}

.sm-topbar__inner {
	display: flex;
	justify-content: flex-end;
	gap: var(--sm-space-6);
	flex-wrap: wrap;
	padding-block: var(--sm-space-2);
}

.sm-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	color: rgba(239, 230, 221, 0.7);
}

.sm-topbar__item:hover,
.sm-topbar__item:focus-visible { color: var(--sm-color-parchment); }
.sm-topbar__icon { flex-shrink: 0; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.sm-site-header {
	background: var(--sm-color-parchment);
	border-bottom: 1px solid var(--sm-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--sm-transition-base), background var(--sm-transition-base);
}

.sm-site-header[data-scrolled="true"] {
	background: rgba(239, 230, 221, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 14px rgba(53, 49, 47, 0.10);
}

.sm-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sm-space-4);
	min-height: var(--sm-header-height);
}

.sm-site-header__brand {
	flex-shrink: 0;
	max-height: 40px;
}

.sm-site-header__brand-link,
.sm-site-header__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	max-height: 40px;
}

/* A logo méret-szabályát szándékosan szigorúan kötjük: WP 6.7+ image
   auto-sizing, WC general CSS és a `img { max-width: 100% }` global rule
   együtt időnként felülírja a `height: 40px`-et — `max-height` + `object-fit`
   biztosítja, hogy a fejléc logó SOHA ne nőjön nagyobbra, függetlenül a
   logo-dark.png intrinsic méretétől (jelenleg 4182×1215). */
.sm-site-header__logo,
.sm-site-header__brand .custom-logo,
.sm-site-header__brand img {
	height: 40px;
	width: auto;
	max-height: 40px;
	max-width: 220px;
	object-fit: contain;
	object-position: left center;
}

.sm-site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.sm-site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-1);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-medium);
}

.sm-site-header__menu a {
	color: var(--sm-color-ink);
	padding: 0.4rem 0.7rem;
	border-radius: var(--sm-radius-md);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.sm-site-header__menu a:hover,
.sm-site-header__menu a:focus-visible {
	color: var(--sm-color-terracotta);
	background: rgba(181, 104, 62, 0.06);
}

/* Aktív menüpont — terracotta szöveg + fűszál-zöld 2px aláhúzás. A duplázott
   accent (meleg szín + zöld vonal) erőteljes, de nem rikít: a brand-kontraszt
   tisztán jelzi, hol vagy. */
.sm-site-header__menu .current-menu-item > a,
.sm-site-header__menu .current_page_item > a {
	color: var(--sm-color-terracotta);
	position: relative;
}

.sm-site-header__menu .current-menu-item > a::after,
.sm-site-header__menu .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.15rem;
	height: 2px;
	background: var(--sm-color-meadow);
	border-radius: 1px;
}

.sm-site-header__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	flex-shrink: 0;
}

.sm-site-header__cta {
	padding: 0.55rem 1.1rem;
	font-size: var(--sm-text-xs);
}

.sm-site-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sm-color-ink);
	padding: var(--sm-space-2);
	border-radius: var(--sm-radius-md);
}

.sm-site-header__cart:hover,
.sm-site-header__cart:focus-visible {
	color: var(--sm-color-terracotta);
	background: rgba(181, 104, 62, 0.08);
}

.sm-site-header__cart-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--sm-color-ember);
	color: var(--sm-text-on-cta);
	font-family: var(--sm-font-ui);
	font-size: 0.55rem;
	font-weight: var(--sm-weight-bold);
	width: 16px;
	height: 16px;
	border-radius: var(--sm-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Hamburger → X morph + active-state glow.
   A bárkák a parent flex `gap: 4px`-es elrendezésben fekszenek (top, middle,
   bottom). Az átalakítás:
     - top: translateY(+6px) + rotate(45deg)  → felső szára az X-nek
     - middle: opacity 0                        → eltűnik
     - bottom: translateY(-6px) + rotate(-45deg) → alsó szára az X-nek
   Spring-easing (`--sm-transition-spring`) ad egy enyhe „pop" érzetet a
   végén — átalakulás tudatos, sosem darabos. */
.sm-site-header__toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--sm-space-2);
	border-radius: var(--sm-radius-md);
	color: var(--sm-color-ink);
	flex-direction: column;
	gap: 4px;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	transition: background var(--sm-transition-base), color var(--sm-transition-base);
}

.sm-site-header__toggle:hover,
.sm-site-header__toggle:focus-visible {
	background: rgba(181, 104, 62, 0.08);
	color: var(--sm-color-terracotta);
}

/* Aktív állapotban (open) finom meadow-ring a button-ön — jelzi, hogy
   nyitott menünél vagy. */
.sm-site-header[data-menu-open="true"] .sm-site-header__toggle {
	background: rgba(46, 107, 62, 0.10);
	color: var(--sm-color-meadow-dark);
}

.sm-site-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition:
		transform 320ms cubic-bezier(0.68, -0.4, 0.27, 1.55),
		opacity 200ms ease-out,
		background var(--sm-transition-base);
}

/* Closed → middle slight delay-szel jön be vissza (eltűnik először nyitáskor,
   csak hossszabb dur-rel ér haza zárás után — tisztább érzet). */
.sm-site-header__toggle-bar:nth-child(2) {
	transition: opacity 180ms ease 60ms;
}

.sm-site-header[data-menu-open="true"] .sm-site-header__toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.sm-site-header[data-menu-open="true"] .sm-site-header__toggle-bar:nth-child(2) {
	opacity: 0;
	transition: opacity 120ms ease;
}
.sm-site-header[data-menu-open="true"] .sm-site-header__toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Mobile dropdown panel.
   A `hidden` attribute kezelése a JS-ből kikerült; itt CSS-szel teljesen
   eltüntetjük zárt állapotban (`opacity: 0; visibility: hidden; max-height: 0`)
   és nyitottan animáljuk. A `max-height` slide-down efektje + a `transform`
   transzlate + az `opacity` fade adja a gazdag dropdown-animációt.

   A `[hidden]` attribute felülírása is itt — display: block-ban tartjuk a
   panelt, és a max-height + visibility intézi a vizuális zárt állapotot. */
.sm-site-header__mobile {
	display: block;
	overflow: hidden;
	border-top: 1px solid transparent;
	padding: 0 var(--sm-section-padding-x);
	background: var(--sm-color-parchment);
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		max-height 380ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 220ms ease,
		transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1),
		padding 320ms ease,
		border-color 220ms ease,
		visibility 0s linear 380ms;
}

/* `hidden` attribute override — a JS már nem manipulálja, de defenzíven
   biztosítjuk hogy `display: block`-ban maradjon. */
.sm-site-header__mobile[hidden] {
	display: block;
}

.sm-site-header[data-menu-open="true"] .sm-site-header__mobile {
	max-height: 85vh;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	padding: var(--sm-space-3) var(--sm-section-padding-x) var(--sm-space-5);
	border-top-color: var(--sm-color-border);
	overflow-y: auto;
	transition:
		max-height 420ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 280ms ease,
		transform 380ms cubic-bezier(0.34, 1.2, 0.64, 1),
		padding 320ms ease,
		border-color 220ms ease,
		visibility 0s linear 0s;
}

.sm-site-header__mobile-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	font-family: var(--sm-font-ui);
	font-weight: var(--sm-weight-medium);
}

/* Menüpontok stagger-fade — zárt állapotban tile-nként eltolva /
   átlátszatlanul várnak, nyitáskor sorrendben fade-be lendülnek be. */
.sm-site-header__mobile-menu > li {
	opacity: 0;
	transform: translateX(-12px);
	transition:
		opacity 280ms ease,
		transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li {
	opacity: 1;
	transform: translateX(0);
}

/* Stagger delay-ek — első tétel 120ms-nél (a panel slide-down után),
   minden további +50ms. */
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(1) { transition-delay: 120ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(2) { transition-delay: 170ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(3) { transition-delay: 220ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(4) { transition-delay: 270ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(5) { transition-delay: 320ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(6) { transition-delay: 370ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(7) { transition-delay: 420ms; }
.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-menu > li:nth-child(n+8) { transition-delay: 470ms; }

.sm-site-header__mobile-menu a {
	display: block;
	color: var(--sm-color-ink);
	padding: 0.75rem 0.85rem;
	border-radius: var(--sm-radius-md);
	font-size: var(--sm-text-md);
	transition: background var(--sm-transition-base), color var(--sm-transition-base), padding-left var(--sm-transition-base);
}

.sm-site-header__mobile-menu a:hover,
.sm-site-header__mobile-menu a:focus-visible {
	color: var(--sm-color-terracotta);
	background: rgba(181, 104, 62, 0.08);
	padding-left: 1.1rem;
}

/* CTA blokk a menü végén — szintén stagger sorrendben, utolsó elemként. */
.sm-site-header__mobile-cta {
	margin-top: var(--sm-space-4);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 320ms ease 350ms,
		transform 380ms cubic-bezier(0.34, 1.2, 0.64, 1) 350ms;
}

.sm-site-header[data-menu-open="true"] .sm-site-header__mobile-cta {
	opacity: 1;
	transform: translateY(0);
}

.sm-site-header__mobile-cta .sm-btn { width: 100%; justify-content: center; }

/* Mozgáscsökkentő mód — minden animációt instant-ra állítunk. */
@media (prefers-reduced-motion: reduce) {
	.sm-site-header__toggle-bar,
	.sm-site-header__mobile,
	.sm-site-header__mobile-menu > li,
	.sm-site-header__mobile-cta {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* ============================================================
   HERO  (HeroV3 — dark wood texture, photo collage)
   ============================================================ */
.sm-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--sm-space-12);
	color: var(--sm-color-parchment);
	/* Prémium sötét matt — egyszerű, mély, fókuszált. NEM gradient, csak
	   egyenletes ink. A manifesto wood-textúrájától markánsan eltérő, tiszta
	   háttér — a hangsúly a szövegen és a fotó-kollázson marad. */
	background: var(--sm-color-dark-deep);
}

.sm-hero__bg-wood,
.sm-hero__bg-overlay,
.sm-hero__bg-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Saját generált fine grain SVG textúra — papír / pergamen szövésű prémium
   felület-érzet, gradient nélkül, fotó-textúra nélkül.

   - feTurbulence: fractalNoise + 2 oktáv → finom, természetes szövés
   - colorMatrix: enyhe meleg cream tinted alpha (R/G/B 0.96/0.93/0.88) → a
     tiszta fehér helyett krémes árnyalat ad luxus mat-papír hatást
   - 32% opacity + soft-light blend → diszkrét, csak közelről látszik, mégis
     megtöri a sík háttér unalmasságát. */
.sm-hero__bg-wood {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 360px 360px;
	background-repeat: repeat;
	opacity: 0.32;
	mix-blend-mode: soft-light;
}

/* A korábbi gradient overlay és glow rétegek kikapcsolva. A markup-ban
   benn maradnak (hero.php változatlan), de itt vizuálisan elnémítjuk. */
.sm-hero__bg-overlay,
.sm-hero__bg-glow {
	display: none;
}

/* Prémium keret-accent — finom tetejű és alján lévő horizontal vonal,
   mint egy gallérgyűrű a hero szekción. Diszkrét parchment-átlátszó +
   közepén terracotta gradient-overlay nélkül (linear-gradient szándékosan
   kikerülve), helyette 1px szolid színek tiszta vonalkái. */
.sm-hero::before,
.sm-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
	z-index: 1;
}
.sm-hero::before { top: 0;    background: rgba(239, 230, 221, 0.06); }
.sm-hero::after  { bottom: 0; background: rgba(239, 230, 221, 0.08); }

.sm-hero__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
/* Hero deco — sajt + mágus motívumok lebegnek a sötét fa-hátéren, brand-color
   tintekkel (terracotta-light, meadow-light, parchment). NAGY ÍVŰ animációk
   (`smHeroArc*`) — 60-140px ívek, rotáció akár 360°. A motívumok látványosan
   mozognak, de pointer-events: none, és a `.sm-hero__container` z-index: 2
   miatt soha nem zavarják a tartalmat. */
.sm-hero__deco-icon {
	position: absolute;
	display: block;
	will-change: transform, opacity;
}

.sm-hero__deco-icon svg { display: block; width: 100%; height: 100%; }

/* Mágussapka — bal felül, terracotta-light. Egy ívben balra-lent-felfelé
   pörög, közben enyhén nagyítódik. */
.sm-hero__deco-icon--hat {
	top: 8%;
	left: 5%;
	width: 130px;
	height: 130px;
	color: var(--sm-color-terracotta-light);
	opacity: 0.20;
	animation: smHeroArcHat 22s ease-in-out infinite;
}

/* Sajt-szelet — jobb alul, meadow-light. Ívben jobbra-felfelé csúszik. */
.sm-hero__deco-icon--wedge {
	bottom: 12%;
	right: 6%;
	width: 140px;
	height: 140px;
	color: var(--sm-color-meadow-light);
	opacity: 0.18;
	animation: smHeroArcWedge 26s ease-in-out 1.5s infinite;
}

/* Sajt-kerék — közép-jobb (a kép-collage mögött), parchment tint.
   TELJES 360°-os forgás, közben szinte kering. */
.sm-hero__deco-icon--wheel {
	top: 40%;
	right: 30%;
	width: 110px;
	height: 110px;
	color: var(--sm-color-parchment);
	opacity: 0.14;
	animation: smHeroArcWheel 40s linear infinite;
}

/* Holdsarló — jobb felül, terracotta-light. Lassú diagonal sweep. */
.sm-hero__deco-icon--moon {
	top: 6%;
	right: 12%;
	width: 80px;
	height: 80px;
	color: var(--sm-color-terracotta-light);
	opacity: 0.22;
	animation: smHeroArcMoon 24s ease-in-out 3s infinite;
}

/* Varázspálca — bal-középen, meadow-light. Lazán szóró ív, mintha a
   mágus éppen suhintana vele. */
.sm-hero__deco-icon--wand {
	top: 55%;
	left: 6%;
	width: 100px;
	height: 100px;
	color: var(--sm-color-meadow-light);
	opacity: 0.22;
	animation: smHeroArcWand 20s ease-in-out 2.5s infinite;
}

/* Sparkle szikrák — szétszórva, gyorsabb pislogás-mozgás. Két különböző
   pozícióban + delay-jel. */
.sm-hero__deco-icon--sparkle {
	top: 18%;
	left: 32%;
	width: 32px;
	height: 32px;
	color: var(--sm-color-parchment);
	animation: smHeroSparkle 10s ease-in-out infinite;
}

.sm-hero__deco-icon--sparkle-2 {
	bottom: 28%;
	right: 28%;
	width: 26px;
	height: 26px;
	color: var(--sm-color-parchment);
	animation: smHeroSparkle 12s ease-in-out 4s infinite;
}

.sm-hero__container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--sm-space-12);
}

.sm-hero__copy {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sm-hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	margin-bottom: var(--sm-space-6);
	animation: smFadeUp 0.75s ease 0.15s both;
}
.sm-hero__eyebrow-line {
	flex: 1;
	max-width: 56px;
	height: 1px;
	background: rgba(239, 230, 221, 0.16);
}
.sm-hero__eyebrow {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.48);
	white-space: nowrap;
}

.sm-hero__logo {
	margin-bottom: var(--sm-space-5);
	animation: smScaleIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
.sm-hero__logo img {
	height: 72px;
	width: auto;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.40));
}

.sm-hero__separator {
	display: block;
	width: 56px;
	height: 2px;
	background: linear-gradient(to right, rgba(181, 104, 62, 0.8), rgba(181, 104, 62, 0.20));
	border-radius: var(--sm-radius-full);
	margin-bottom: var(--sm-space-5);
	animation: smFadeUp 0.75s ease 0.75s both;
}

.sm-hero__title {
	font-family: var(--sm-font-display);
	font-weight: 300;
	color: var(--sm-color-parchment);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-bottom: var(--sm-space-5);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-style: normal;
	animation: smFadeUp 0.75s ease 0.75s both;
}
.sm-hero__title-line {
	font-size: clamp(2.25rem, 4.8vw, 4.5rem);
	font-weight: 300;
	color: rgba(239, 230, 221, 0.90);
	display: block;
}
.sm-hero__title-accent {
	font-size: clamp(2.5rem, 5.5vw, 5.125rem);
	font-weight: 800;
	font-style: italic;
	color: var(--sm-color-terracotta-light);
	display: block;
	letter-spacing: -0.03em;
}

.sm-hero__subline {
	font-family: var(--sm-font-body);
	font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
	color: rgba(239, 230, 221, 0.65);
	line-height: 1.72;
	max-width: 520px;
	margin-bottom: var(--sm-space-6);
	text-wrap: pretty;
	animation: smFadeUp 0.75s ease 1.05s both;
}

.sm-hero__tags {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sm-space-8);
	display: flex;
	gap: var(--sm-space-2);
	flex-wrap: wrap;
	animation: smFadeUp 0.75s ease 1.3s both;
}
.sm-hero__tag {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-semibold);
	letter-spacing: 0.07em;
	padding: 0.4rem 0.9rem;
	border-radius: var(--sm-radius-full);
	border: 1.5px solid;
	background: rgba(239, 230, 221, 0.04);
}
.sm-hero__tag.is-friss      { border-color: rgba(46, 107, 62, 0.55);   color: #6EBF7E; background: transparent; }
.sm-hero__tag.is-erlelt     { border-color: rgba(181, 104, 62, 0.55);  color: #D4956E; background: transparent; }
.sm-hero__tag.is-fustolt    { border-color: rgba(140, 100, 60, 0.50);  color: #B8956A; background: transparent; }
.sm-hero__tag.is-vaj        { border-color: rgba(196, 147, 42, 0.55);  color: #D4AF4A; background: transparent; }
.sm-hero__tag.is-elofizetes { border-color: rgba(160, 130, 200, 0.45); color: #B8A0CC; background: transparent; }

.sm-hero__cta {
	display: flex;
	gap: var(--sm-space-3);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--sm-space-6);
	animation: smFadeUp 0.75s ease 1.55s both;
}
.sm-hero__btn { padding: 1rem 2.25rem; font-size: var(--sm-text-sm); }
.sm-hero__btn--primary { box-shadow: 0 8px 32px rgba(201, 75, 58, 0.55); }

.sm-hero__trust {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-medium);
	color: rgba(239, 230, 221, 0.28);
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin: 0;
	animation: smFadeUp 0.75s ease 1.9s both;
}

/* Hero media — photo collage */
.sm-hero__media {
	flex-shrink: 0;
	width: 460px;
	height: 580px;
	position: relative;
	animation: smScaleIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

.sm-hero__photo-main {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 340px;
	height: 480px;
	border-radius: var(--sm-radius-xl);
	background-size: cover;
	background-position: center top;
	border: 2px solid rgba(181, 104, 62, 0.35);
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(181, 104, 62, 0.12);
	z-index: 2;
}

.sm-hero__photo-accent-1 {
	position: absolute;
	left: 0;
	top: 16px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 4px solid rgba(26, 8, 2, 0.95);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
	outline: 1.5px solid rgba(181, 104, 62, 0.30);
	outline-offset: 4px;
	z-index: 3;
}

.sm-hero__photo-accent-2 {
	position: absolute;
	left: 20px;
	bottom: 28px;
	width: 160px;
	height: 160px;
	border-radius: var(--sm-radius-xl);
	background-size: cover;
	background-position: center;
	border: 3px solid rgba(26, 8, 2, 0.95);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.50);
	z-index: 3;
}

.sm-hero__photo-ring {
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY(-50%);
	width: 380px;
	height: 520px;
	border-radius: 32px;
	border: 1.5px dashed rgba(181, 104, 62, 0.22);
	pointer-events: none;
	z-index: 1;
	animation: smRingRotate 40s linear infinite;
}

.sm-hero__badge {
	position: absolute;
	bottom: 100px;
	right: -24px;
	background: var(--sm-color-terracotta);
	border-radius: var(--sm-radius-full);
	padding: 0.6rem 1.1rem;
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	z-index: 4;
	animation: smFloat 3.5s ease-in-out 1s infinite;
}
.sm-hero__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
}
.sm-hero__badge-text {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #FDFAF6;
	white-space: nowrap;
}

.sm-hero__year-badge {
	position: absolute;
	top: 24px;
	right: -16px;
	background: rgba(239, 230, 221, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(239, 230, 221, 0.16);
	border-radius: 14px;
	padding: var(--sm-space-3) var(--sm-space-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	z-index: 4;
}
.sm-hero__year-num {
	font-family: var(--sm-font-display);
	font-size: 1.375rem;
	font-weight: var(--sm-weight-bold);
	color: var(--sm-color-parchment);
	line-height: 1;
	letter-spacing: -0.02em;
}
.sm-hero__year-label {
	font-family: var(--sm-font-ui);
	font-size: 0.5625rem;
	font-weight: var(--sm-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.45);
}

.sm-hero__scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(239, 230, 221, 0.28);
	z-index: 3;
	animation: smScrollBounce 1.6s ease-in-out 2.2s infinite;
}

/* ============================================================
   PAGE HEADER  (subheader minden aloldalhoz — NEM front-page)
   ============================================================ */
.sm-page-header {
	position: relative;
	background: var(--sm-bg-card);
	color: var(--sm-text-primary);
	border-bottom: 1px solid var(--sm-color-border);
	padding-block: var(--sm-space-10) var(--sm-space-8);
	overflow: hidden;
	isolation: isolate;
}

.sm-page-header__inner {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-page-header__eyebrow {
	margin: 0;
	color: var(--sm-color-terracotta);
}

.sm-page-header__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.6vw, var(--sm-text-4xl));
	line-height: var(--sm-leading-tight);
}

.sm-page-header__description {
	margin-top: var(--sm-space-2);
	max-width: 56ch;
	color: var(--sm-text-secondary);
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
}

.sm-page-header__description > *:last-child { margin-bottom: 0; }

.sm-page-header__breadcrumb {
	margin-top: var(--sm-space-4);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	color: var(--sm-text-muted);
}

.sm-page-header__breadcrumb a {
	color: var(--sm-text-muted);
	text-decoration: none;
}

.sm-page-header__breadcrumb a:hover,
.sm-page-header__breadcrumb a:focus-visible {
	color: var(--sm-color-terracotta);
	text-decoration: underline;
}

/* Dekoratív sajtkerék/szelet — finom, halvány, alapból megjelenik
   nagyobb képernyőkön; mobilon elrejtve, hogy ne zavarjon. */
.sm-page-header__deco {
	position: absolute;
	color: var(--sm-color-terracotta-light);
	opacity: 0.16;
	pointer-events: none;
	z-index: -1;
}

.sm-page-header__deco svg { width: 100%; height: 100%; display: block; }

.sm-page-header__deco--1 {
	top: -28px;
	right: -32px;
	width: 180px;
	height: 180px;
	transform: rotate(8deg);
}

.sm-page-header__deco--2 {
	bottom: -30px;
	right: 18%;
	width: 110px;
	height: 110px;
	transform: rotate(-12deg);
	opacity: 0.12;
}

/* Variánsok — kontextus-specifikus apró módosítások.
   Maradjanak minimálisak; a végleges aloldal-design ezeket finomítja majd. */
.sm-page-header--404 .sm-page-header__title { color: var(--sm-color-ember); }
.sm-page-header--search .sm-page-header__title em {
	font-style: italic;
	color: var(--sm-color-ink);
}
.sm-page-header--woocommerce { background: var(--sm-color-parchment); }

/* ============================================================
   PRICING TABLE  (Árlista — dark, kártyás layout, a Subscription
   szekció vizuális rendszerét követi: dark háttér, parchment
   tipográfia, dark-alt kártyák. Adminból szerkeszthető.)
   ============================================================ */
.sm-pricing-table-section {
	padding-block: var(--sm-space-16);
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
}

.sm-pricing-table-section__header {
	text-align: center;
	max-width: 540px;
	margin: 0 auto var(--sm-space-12);
}

.sm-pricing-table-section__eyebrow {
	color: var(--sm-color-stone);
}

.sm-pricing-table-section__title {
	margin: 0 0 var(--sm-space-3);
	font-family: var(--sm-font-display);
	font-style: normal;
	font-weight: var(--sm-weight-semibold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
}

.sm-pricing-table-section__description {
	margin: 0 auto;
	max-width: 56ch;
	color: rgba(239, 230, 221, 0.6);
	font-family: var(--sm-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

/* Oszlopok = plan-card-szerű dark kártyák — design referencia:
   `.claude/DESIGN/sajtm-gus-design-system/project/preview/components-subscription-card.html`
   (180px szélesség, 22px padding, 12px gap, 16px radius, 0.10 alpha border) */
.sm-pricing-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	align-items: stretch;
}

.sm-pricing-table__column {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--sm-color-dark-alt);
	border: 1px solid rgba(239, 230, 221, 0.10);
	border-radius: 16px;
	padding: 22px;
	transition:
		background var(--sm-transition-base),
		border-color var(--sm-transition-base),
		transform var(--sm-transition-fast),
		box-shadow var(--sm-transition-base);
}

/* A korábbi parchment-stílus függőleges elválasztó nem kell a kártyás
   layouton — explicit none, hogy bizonyos breakpointokon se élesedjen vissza. */
.sm-pricing-table__column:not(:last-child)::after { display: none; }

/* Hover — finom terrakotta wash + lift + erősebb border. A kártya nem
   változtatja a fő színét (nem konfliktusol a featured `terracotta` bg-vel),
   csak hangsúlyozza az interakció lehetőségét. */
.sm-pricing-table__column:hover,
.sm-pricing-table__column:focus-within {
	background:
		linear-gradient(180deg, rgba(181, 104, 62, 0.10) 0%, rgba(181, 104, 62, 0.04) 100%),
		var(--sm-color-dark-alt);
	border-color: rgba(239, 230, 221, 0.22);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* Oszlop cím = plan-name a designban: Fraunces 17px / 600 / parchment.
   Bal-rendezett, hogy illeszkedjen a preview-hoz. */
.sm-pricing-table__column-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-style: normal;
	font-size: 1.0625rem; /* 17px */
	color: var(--sm-color-parchment);
	text-align: left;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-pricing-table__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Items NEM tolódnak az aljáig — a design szerint közvetlenül a cím alatt
	   helyezkednek el, a gomb külön kerül a kártya aljára (margin-top: auto). */
}

/* Egy item-blokk: label+dots+price felső sorban, alatta opcionális gombbal. */
.sm-pricing-table__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	line-height: var(--sm-leading-snug);
}

.sm-pricing-table__item-main {
	display: flex;
	align-items: baseline;
	gap: 6px;
	/* include-item-szerű subtle szín a designhoz illeszkedve */
	font-family: var(--sm-font-ui);
	color: rgba(239, 230, 221, 0.65);
}

.sm-pricing-table__label {
	color: rgba(239, 230, 221, 0.65);
	flex: 0 1 auto;
	min-width: 0;
}

.sm-pricing-table__dots {
	flex: 1 1 auto;
	min-width: var(--sm-space-4);
	border-bottom: 2px dotted rgba(239, 230, 221, 0.20);
	transform: translateY(-0.2em);
	align-self: end;
}

.sm-pricing-table__price {
	color: var(--sm-color-parchment);
	font-family: var(--sm-font-ui);
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* A gomb mindig a kártya aljára kerül — `margin-top: auto` az `__items`-en
   nem működik, mert ez `__item` szinten flex-row, viszont az `__item-action`
   az utolsó tétel része. Helyette közvetlenül az item-action-re tesszük. */
.sm-pricing-table__item-action {
	margin-top: 4px;
}

/* Az utolsó item-action a kártya aljához tolva — a többi item közötti gap
   maradjon kompakt, de az „aktív választás" gomb a kártya alján legyen. */
.sm-pricing-table__column > .sm-pricing-table__items > .sm-pricing-table__item:last-child .sm-pricing-table__item-action {
	margin-top: auto;
}

/* Per-item gomb — btn-light a designban: parchment bg, ink color, pill, 9px padding. */
.sm-pricing-table__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 9px 12px;
	border-radius: var(--sm-radius-full);
	background: var(--sm-color-parchment);
	color: var(--sm-color-ink);
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem; /* 11px */
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.05em;
	text-decoration: none;
	transition:
		background var(--sm-transition-base),
		color var(--sm-transition-base),
		transform var(--sm-transition-fast);
}

.sm-pricing-table__button:hover,
.sm-pricing-table__button:focus-visible {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
	transform: translateY(-1px);
}

/* Ha a kártyára visz az egér, a benne lévő gomb is enyhén jelezzen
   (anélkül, hogy a gomb saját hover state-jét felülírná). */
.sm-pricing-table__column:hover .sm-pricing-table__button {
	background: #FDFAF6; /* btn-white variant a designban */
}
.sm-pricing-table__column:hover .sm-pricing-table__button:hover {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
}

/* Mozgáscsökkentő mód — kapcsoljuk ki a lift / transform animációkat. */
@media (prefers-reduced-motion: reduce) {
	.sm-pricing-table__column,
	.sm-pricing-table__button {
		transition: none;
	}
	.sm-pricing-table__column:hover,
	.sm-pricing-table__button:hover {
		transform: none;
	}
}

.sm-pricing-table-section__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--sm-space-10);
}

.sm-pricing-table-section__cta {
	min-width: 220px;
	justify-content: center;
	background: var(--sm-color-parchment);
	color: var(--sm-color-ink);
}
.sm-pricing-table-section__cta:hover,
.sm-pricing-table-section__cta:focus-visible {
	background: var(--sm-color-milk);
	color: var(--sm-color-ink);
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.sm-categories { background: var(--sm-color-butter); }

.sm-categories__header {
	text-align: center;
	max-width: 540px;
	margin: 0 auto var(--sm-space-12);
}
.sm-categories__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.75rem, 4vw, 2.625rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
	margin: 0;
}

.sm-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sm-space-4);
}

.sm-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--sm-color-milk);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--sm-shadow-sm);
	text-decoration: none;
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base);
	color: var(--sm-color-ink);
}
.sm-cat-card:hover,
.sm-cat-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	color: var(--sm-color-ink);
}
.sm-cat-card__img {
	display: block;
	position: relative;
	height: 140px;
	background-size: cover;
	background-position: center;
}
.sm-cat-card__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(42, 36, 34, 0.35) 0%, transparent 60%);
}
.sm-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0.875rem 1rem 1rem;
}
.sm-cat-card__name {
	font-family: var(--sm-font-display);
	font-size: 1rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
}
.sm-cat-card__desc {
	font-family: var(--sm-font-body);
	font-size: 0.75rem;
	color: var(--sm-color-ink-light);
}
.sm-cat-card__arrow {
	margin-top: 6px;
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.sm-products { background: var(--sm-color-parchment); }

.sm-products__header { max-width: 640px; margin-bottom: var(--sm-space-10); }
.sm-products__title {
	font-size: clamp(1.625rem, 3.5vw, 2.5rem);
	color: var(--sm-color-terracotta);
	margin-bottom: var(--sm-space-3);
}
.sm-products__lead {
	font-family: var(--sm-font-body);
	font-size: 0.9375rem;
	color: var(--sm-color-ink-light);
	line-height: 1.65;
}

/* Termék rács — `ul.products` (WC) ÉS `ul.sm-products__grid` (homepage)
   ugyanazon szabályokkal megy. A WC alap `.products` `<ul>` reset szükséges,
   hogy ne maradjon a böngésző default list-style.

   240px min-width → max 4 kártya/sor a default 1180px containerben
   (1132 - 3×20 gap = 1072 / 240 = 4.47 → auto-fill 4-et tesz). Szűkebb
   viewporton lépcsősen 3, 2, 1 oszlop. */
.sm-products__grid,
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sm-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hard cap 4 oszlopra wide viewporton — még akkor is, ha az auto-fill
   többet beférne (pl. wide-screen 1600px+ rendereléskor). */
@media (min-width: 1180px) {
	.sm-products__grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Termékkártya — design preview értékeivel.
   bg #F7F1E8 = butter, 12px radius, 200px target szélesség (auto-fill kezelt),
   soft shadow, flex column. */
.sm-product-card {
	display: flex;
	background: var(--sm-color-butter);
	border-radius: var(--sm-radius-lg);
	overflow: hidden;
	box-shadow: var(--sm-shadow-sm);
	list-style: none;
	margin: 0;
	transition:
		transform var(--sm-transition-base),
		box-shadow var(--sm-transition-base),
		background var(--sm-transition-base);
}

/* WC alap `li.product` width%/float/clear override — a grid maga gondoskodik
   a sorba rendezésről. A WC plugin alap CSS-e (woocommerce.css) `columns-N`
   class-ra `width: 22.05%` és `:nth-child(4n+1) { clear: both }` szabályokat
   ad, ami grid-rel kombinálva ÜRES első cellát hagyhat. !important kell, mert
   a WC plugin stylesheet később töltődik és magasabb specificity-ű scope-okkal jön. */
.woocommerce ul.products li.product.sm-product-card,
.woocommerce-page ul.products li.product.sm-product-card,
.woocommerce ul.products.columns-3 li.product.sm-product-card,
.woocommerce ul.products.columns-4 li.product.sm-product-card,
.woocommerce-page ul.products.columns-3 li.product.sm-product-card,
.woocommerce-page ul.products.columns-4 li.product.sm-product-card {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* WC alap `nth-child` clearfix szabályok kikapcsolása — a grid önmagában
   kezeli a sortörést, a régi floatos rendszer minden 3n+1 / 4n+1 elemnél
   `clear: both`-ot ad, ami grid layoutban szellem-üres cellát hagyhat. */
.woocommerce ul.products li.product.sm-product-card:nth-child(n),
.woocommerce-page ul.products li.product.sm-product-card:nth-child(n) {
	clear: none !important;
}

/* **KRITIKUS** — a WC `woocommerce-layout.css` clearfix-trükköt tesz az
   `ul.products`-re:
       ul.products::before { content: " "; display: table }
       ul.products::after  { clear: both }
   Amikor a `<ul>`-t `display: grid`-re állítjuk, ezek a pseudo-elemek
   GRID ITEM-MÉ válnak — a `::before` elfoglalja az első grid cellát,
   és az összes terméket 1-gyel arrébb tolja. Eredmény: a sajtpiac archive
   első sor első cellája üresnek látszik, és a layout 1-gyel csúszik.

   Belt-and-suspenders fix:
   1. Kikapcsoljuk a clearfix-pseudo-elemeket (content + display + width/height
      reset minden lehetséges scope-pal, mert egyes WC verziókon eltérhetnek
      a body class scope-ok).
   2. Explicit `grid-column-start: 1` az első `<li>`-n — akkor sem csúszik,
      ha bármi pseudo-element a cella elé tolódna. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after,
.sm-woocommerce-archive ul.products::before,
.sm-woocommerce-archive ul.products::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	grid-column: 1 / 1 !important;
	grid-row: 1 / 1 !important;
	position: absolute !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* Belt: az első valódi termék-`<li>` kötelezően az első grid cellában — még
   akkor is, ha bármi más (pseudo-element, plugin-injected div) próbálna oda
   kerülni a CSS Grid auto-flow alatt. */
.woocommerce ul.products > li.product:first-child,
.woocommerce-page ul.products > li.product:first-child,
ul.products > li.product:first-of-type {
	grid-column-start: 1 !important;
	grid-row-start: 1 !important;
}

.sm-product-card__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.sm-product-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	background: var(--sm-color-milk);
}

.sm-product-card__media-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sm-product-card__img {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 10 / 7;
	background: linear-gradient(135deg, var(--sm-color-border-strong) 0%, #A89080 100%);
}

.sm-product-card__img-el,
.sm-product-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

.sm-product-card:hover .sm-product-card__img-el,
.sm-product-card:hover .sm-product-card__img img {
	transform: scale(1.04);
}

.sm-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	flex: 1;
}

/* Badge — a `.sm-product-card__badge` és az `.is-{slug}` szabályok már
   léteznek a stylesheet tetején; itt csak méret-finomítás a designhoz. */
.sm-product-card__badge {
	align-self: flex-start;
	font-size: 0.6rem;
	padding: 0.2rem 0.6rem;
	line-height: 1;
}

.sm-product-card__name {
	font-family: var(--sm-font-display);
	font-size: 0.9375rem; /* 15px design */
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

.sm-product-card__name a {
	color: inherit;
	text-decoration: none;
}

.sm-product-card__name a:hover,
.sm-product-card__name a:focus-visible {
	color: var(--sm-color-terracotta);
}

/* Kötött kártya-tipográfia. A short description plain text-ként renderelődik
   (lásd `sajtmagus_card_text()`), így itt nincs `<strong>` / `<em>` / heading
   örökség — de DEFENZÍV módon a `*` selectorral minden potenciális belső
   inline elementet (ha valaha visszakerülne) is azonos stílusúra húz. */
.sm-product-card__desc {
	font-family: var(--sm-font-body);
	font-size: 0.6875rem; /* 11px design */
	font-weight: var(--sm-weight-regular);
	font-style: normal;
	color: var(--sm-color-ink-light);
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;

	/* 2-3 sor után csonkolás (long product short descriptions ne törjék a kártyát). */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sm-product-card__desc * {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
}

.sm-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-2);
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--sm-color-border);
	min-width: 0;
}

.sm-product-card__footer > * {
	min-width: 0;
}

/* Mobil nézetben (≤1024px) az ár és a gomb stack-elve egymás alatt. A keskeny
   2-col / 1-col card-szélességen oldalra nem férnek el esztétikusan
   („8.000 Ft /kg" + „Választok" összelógna). A gomb teljes szélességű, így
   nagyobb tap-target is. */
@media (max-width: 1024px) {
	.sm-product-card__footer {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sm-space-2);
	}

	.sm-product-card__cart {
		justify-content: stretch;
		width: 100%;
	}

	.sm-product-card__cart .button,
	.sm-product-card__cart a.button,
	.sm-product-card__cart .add_to_cart_button {
		width: 100%;
		text-align: center;
	}

	.sm-product-card__price {
		text-align: left;
	}
}

/* A cart cell ne nyúljon a kártya széléig — preferálja, hogy a price kapja
   meg az elsődleges helyet, és a gomb 2 sorra törjön, ha kell. */
.sm-product-card__cart {
	flex: 0 1 auto;
	display: flex;
	justify-content: flex-end;
}

/* WC `get_price_html()` egy `<span class="woocommerce-Price-amount amount">`-t
   ad — a kártya tipográfiájához igazítjuk. */
.sm-product-card__price,
.sm-product-card__price .woocommerce-Price-amount {
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem; /* 13px design */
	font-weight: var(--sm-weight-bold);
	color: var(--sm-color-ink);
	line-height: 1.2;
}

.sm-product-card__price del {
	color: var(--sm-color-stone);
	font-weight: var(--sm-weight-regular);
	margin-right: 0.25rem;
	font-size: 0.75rem;
}

.sm-product-card__price ins {
	background: none;
	text-decoration: none;
}

/* Ár utáni mértékegység (pl. „/ 10 dkg") — Price Per Unit plugin output,
   vagy fallback. A WC alap nem ad ilyet, de a Price Per Unit Pro plugin
   `.woocommerce-Price-suffix` class-szal teszi. */
.sm-product-card__price .woocommerce-Price-suffix,
.sm-product-card__unit {
	font-family: var(--sm-font-ui);
	font-size: 0.625rem; /* 10px design */
	font-weight: var(--sm-weight-regular);
	color: var(--sm-color-stone);
	margin-left: 0.25rem;
}

/* Cart cell — WC `woocommerce_template_loop_add_to_cart()` egy `a.button`
   linket ad. Felülírjuk a design ember-piros pillulájával. */
.sm-product-card__cart .button,
.sm-product-card__cart a.button,
.sm-product-card__cart .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 5px 10px;
	border: none;
	border-radius: var(--sm-radius-full);
	background: var(--sm-cta);
	color: var(--sm-text-on-cta);
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem; /* 11px design */
	font-weight: var(--sm-weight-semibold);
	letter-spacing: 0.02em;
	text-decoration: none;
	line-height: 1.2;
	max-width: 100%;
	cursor: pointer;
	/* Hosszú gomb-felirathoz: külső termékek („Külső termék megnyitása") 2
	   sorra törhetnek a kártya jobb sávjában, nem lógnak ki. */
	white-space: normal;
	text-align: center;
	transition:
		background var(--sm-transition-base),
		color var(--sm-transition-base),
		transform var(--sm-transition-fast);
}

.sm-product-card__cart .button:hover,
.sm-product-card__cart a.button:hover,
.sm-product-card__cart .add_to_cart_button:hover,
.sm-product-card__cart .button:focus-visible,
.sm-product-card__cart a.button:focus-visible,
.sm-product-card__cart .add_to_cart_button:focus-visible {
	background: var(--sm-cta-dark);
	color: var(--sm-text-on-cta);
	transform: translateY(-1px);
}

/* WC AJAX add-to-cart loading + added állapot. A WC alap `wc-add-to-cart.js`
   `loading` és `added` class-t tesz a gombra. */
.sm-product-card__cart .button.loading,
.sm-product-card__cart .add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.sm-product-card__cart .button.added,
.sm-product-card__cart .add_to_cart_button.added {
	background: var(--sm-color-meadow);
}

/* WC kis „nézet a kosárban" link a button mellett added-after állapotban.
   Default felfeszül a kártyára; itt elrejtjük, mert van mini cart sidebar. */
.sm-product-card__cart .added_to_cart {
	display: none;
}

/* Mozgáscsökkentő mód. */
@media (prefers-reduced-motion: reduce) {
	.sm-product-card,
	.sm-product-card__img-el,
	.sm-product-card__cart .button {
		transition: none;
	}
	.sm-product-card:hover,
	.sm-product-card:hover .sm-product-card__img-el,
	.sm-product-card__cart .button:hover {
		transform: none;
	}
}

.sm-products__cta {
	margin-top: var(--sm-space-10);
	text-align: center;
}

/* ============================================================
   SUBSCRIPTION  (dark)
   ============================================================ */
.sm-subscription {
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
}

.sm-subscription__header {
	text-align: center;
	max-width: 540px;
	margin: 0 auto var(--sm-space-12);
}
.sm-subscription__label { color: var(--sm-color-stone); }
.sm-subscription__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
	margin-bottom: var(--sm-space-3);
}
.sm-subscription__lead {
	font-family: var(--sm-font-body);
	font-size: 1rem;
	color: rgba(239, 230, 221, 0.6);
	line-height: 1.6;
	margin: 0;
}

.sm-subscription__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sm-space-4);
	align-items: stretch;
}

.sm-plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	background: var(--sm-color-dark-alt);
	border: 1px solid rgba(239, 230, 221, 0.08);
	border-radius: 16px;
	padding: var(--sm-space-6) var(--sm-space-5);
}

.sm-plan-card.is-featured {
	background: var(--sm-color-terracotta);
	border: 2px solid rgba(255, 255, 255, 0.18);
	padding-top: 2.25rem;
}

.sm-plan-card__featured-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sm-cta);
	color: var(--sm-text-on-cta);
	font-family: var(--sm-font-ui);
	font-size: 0.5625rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25rem 0.875rem;
	border-radius: var(--sm-radius-full);
	white-space: nowrap;
}

.sm-plan-card__name {
	font-family: var(--sm-font-display);
	font-size: 1.125rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-parchment);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}
.sm-plan-card.is-featured .sm-plan-card__name { color: #FDFAF6; }

.sm-plan-card__freq {
	font-family: var(--sm-font-body);
	font-size: 0.75rem;
	color: rgba(239, 230, 221, 0.55);
	font-style: italic;
	margin: 0;
}
.sm-plan-card.is-featured .sm-plan-card__freq { color: rgba(255, 255, 255, 0.75); }

.sm-plan-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.sm-plan-card__list-item {
	position: relative;
	padding-left: 1rem;
	font-family: var(--sm-font-ui);
	font-size: 0.75rem;
	color: rgba(239, 230, 221, 0.65);
}
.sm-plan-card__list-item::before {
	content: '·';
	position: absolute;
	left: 0;
	color: var(--sm-color-terracotta);
	font-weight: var(--sm-weight-bold);
	font-size: 1rem;
	line-height: 0.8;
}
.sm-plan-card.is-featured .sm-plan-card__list-item { color: rgba(255, 255, 255, 0.82); }
.sm-plan-card.is-featured .sm-plan-card__list-item::before { color: rgba(255, 255, 255, 0.5); }

.sm-plan-card__btn {
	display: block;
	text-align: center;
	margin-top: auto;
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.05em;
	padding: 0.7rem 1rem;
	border-radius: var(--sm-radius-full);
	background: var(--sm-color-parchment);
	color: var(--sm-color-ink);
	text-decoration: none;
	transition: background var(--sm-transition-base);
}
.sm-plan-card__btn:hover { background: var(--sm-color-milk); color: var(--sm-color-ink); }

.sm-plan-card.is-featured .sm-plan-card__btn { background: #FDFAF6; color: var(--sm-color-terracotta); }
.sm-plan-card.is-featured .sm-plan-card__btn:hover { background: #fff; color: var(--sm-color-terracotta-dark); }

.sm-subscription__cta { margin-top: var(--sm-space-10); text-align: center; }
.sm-subscription__cta-link {
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	font-weight: var(--sm-weight-semibold);
	color: rgba(239, 230, 221, 0.55);
	letter-spacing: var(--sm-tracking-wide);
}
.sm-subscription__cta-link:hover { color: var(--sm-color-parchment); }

/* ============================================================
   ABOUT
   ============================================================ */
.sm-about { background: var(--sm-color-butter); }

.sm-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--sm-space-16);
	align-items: center;
}

.sm-about__media {
	position: relative;
	padding-bottom: 100%;
	min-height: 340px;
}
.sm-about__img-main {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
}
.sm-about__img-accent {
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 45%;
	padding-bottom: 45%;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	border: 4px solid var(--sm-color-butter);
	box-shadow: var(--sm-shadow-lg);
}

.sm-about__text {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}
.sm-about__title {
	font-size: clamp(1.625rem, 3.5vw, 2.5rem);
	color: var(--sm-color-terracotta);
	margin: 0;
}
.sm-about__body {
	font-family: var(--sm-font-body);
	font-size: 1rem;
	color: var(--sm-color-ink-light);
	line-height: 1.75;
	text-wrap: pretty;
	margin: 0;
}

.sm-about__signature {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	padding-top: var(--sm-space-1);
}
.sm-about__signature-img { height: 32px; width: auto; opacity: 0.7; }
.sm-about__signature-text {
	font-family: var(--sm-font-ui);
	font-size: 0.75rem;
	color: var(--sm-color-stone);
	font-style: italic;
}

.sm-about__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-meadow);
	letter-spacing: 0.02em;
}
.sm-about__cta:hover { color: var(--sm-color-meadow-dark); }

/* ============================================================
   BOOKS
   ============================================================ */
.sm-books { background: var(--sm-color-parchment); }

.sm-books__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sm-space-16);
	align-items: center;
}

.sm-books__media { display: flex; justify-content: center; }
.sm-books__img {
	width: 100%;
	max-width: 340px;
	height: auto;
	filter: drop-shadow(0 16px 40px rgba(53, 49, 47, 0.22));
}

.sm-books__text {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}
.sm-books__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.2;
	margin: 0;
	text-wrap: pretty;
}
.sm-books__body {
	font-family: var(--sm-font-body);
	font-size: 0.9375rem;
	color: var(--sm-color-ink-light);
	line-height: 1.75;
	text-wrap: pretty;
	margin: 0;
}

.sm-books__formats {
	display: flex;
	gap: var(--sm-space-2);
	flex-wrap: wrap;
}
.sm-books__chip {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-ink-light);
	background: var(--sm-color-butter);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-full);
	padding: 0.25rem 0.75rem;
}

.sm-books__cta { align-self: flex-start; }

/* ============================================================
   BLOG
   ============================================================ */
.sm-blog { background: var(--sm-color-butter); }

.sm-blog__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--sm-space-3);
	margin-bottom: var(--sm-space-10);
}
.sm-blog__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
	margin: 0;
}
.sm-blog__all {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-wide);
	white-space: nowrap;
}

.sm-blog__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sm-space-5);
}

.sm-post-card {
	background: var(--sm-color-milk);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--sm-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base);
}
.sm-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
}
.sm-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.sm-post-card__img {
	display: block;
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--sm-color-border);
}
.sm-post-card__img--placeholder {
	background: linear-gradient(135deg, var(--sm-color-border) 0%, var(--sm-color-border-strong) 100%);
}
.sm-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
	padding: var(--sm-space-4);
	flex: 1;
}
.sm-post-card__cat {
	font-family: var(--sm-font-ui);
	font-size: 0.625rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sm-color-meadow);
}
.sm-post-card__name {
	font-family: var(--sm-font-display);
	font-size: 1rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.sm-post-card__excerpt {
	font-family: var(--sm-font-body);
	font-size: 0.75rem;
	color: var(--sm-color-ink-light);
	line-height: 1.6;
	flex: 1;
}
.sm-post-card__more {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	letter-spacing: 0.04em;
}

/* Kártya alja: dátum + „Tovább olvasom" egy sorban. */
.sm-post-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-2);
	margin-top: auto;
	padding-top: var(--sm-space-3);
	border-top: 1px solid var(--sm-color-border);
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	color: var(--sm-color-stone);
	letter-spacing: 0.02em;
}

.sm-post-card__meta time {
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.sm-testimonials { background: var(--sm-color-parchment); }

.sm-testimonials__header {
	text-align: center;
	max-width: 540px;
	margin: 0 auto var(--sm-space-10);
}
.sm-testimonials__title {
	font-size: clamp(1.625rem, 4vw, 2.625rem);
	color: var(--sm-color-terracotta);
	margin: 0;
}

.sm-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-5);
}

.sm-testimonial-card {
	background: var(--sm-color-butter);
	border-radius: 14px;
	padding: var(--sm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	border: 1px solid var(--sm-color-border);
	box-shadow: var(--sm-shadow-sm);
	margin: 0;
}
.sm-testimonial-card__mark {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: 3rem;
	line-height: 0.8;
	color: var(--sm-color-terracotta);
	opacity: 0.45;
}
.sm-testimonial-card__text {
	font-family: var(--sm-font-body);
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--sm-color-ink);
	margin: 0;
	flex: 1;
	border: none;
	padding: 0;
	quotes: none;
}
.sm-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	padding-top: var(--sm-space-3);
	border-top: 1px solid var(--sm-color-border);
}
.sm-testimonial-card__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sm-color-terracotta-light), var(--sm-color-terracotta));
	color: var(--sm-text-on-cta);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sm-font-ui);
	font-size: 0.75rem;
	font-weight: var(--sm-weight-semibold);
	flex-shrink: 0;
}
.sm-testimonial-card__meta {
	display: flex;
	flex-direction: column;
}
.sm-testimonial-card__name {
	font-family: var(--sm-font-ui);
	font-size: 0.75rem;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}
.sm-testimonial-card__role {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	color: var(--sm-color-stone);
}
.sm-testimonial-card__stars {
	margin-left: auto;
	color: var(--sm-color-badge-vaj);
	font-size: 0.75rem;
	letter-spacing: 1px;
}

/* ============================================================
   COMMUNITY BANNER  (dark)
   ============================================================ */
.sm-community {
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
	text-align: center;
	padding-block: var(--sm-space-16);
}
.sm-community__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-4);
}
.sm-community__label { color: var(--sm-color-stone); }
.sm-community__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-parchment);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	margin: 0;
}
.sm-community__lead {
	font-family: var(--sm-font-body);
	font-size: 0.9375rem;
	color: rgba(239, 230, 221, 0.6);
	line-height: 1.6;
	margin: 0;
}
.sm-community__btn { padding: 0.85rem 1.75rem; }

/* ============================================================
   NEWSLETTER  (dark)
   ============================================================ */
.sm-newsletter {
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
	text-align: center;
}
.sm-newsletter .sm-label { color: var(--sm-color-stone); }
.sm-newsletter__title {
	font-family: var(--sm-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-parchment);
	max-width: 720px;
	margin: 0 auto var(--sm-space-6);
}
.sm-newsletter__form { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sm-space-3); }
.sm-newsletter__form input[type="email"] {
	font-family: var(--sm-font-ui);
	font-size: 0.875rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(239, 230, 221, 0.14);
	border-radius: var(--sm-radius-md);
	padding: 0.7rem 1rem;
	color: var(--sm-color-parchment);
	outline: none;
	min-width: 240px;
}

/* ============================================================
   CONTACT PAGE  (templates/page-contact.php)
   ============================================================ */
.sm-contact { background: var(--sm-bg-page); }

.sm-contact__grid {
	display: grid;
	grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
	gap: var(--sm-space-10);
	align-items: start;
}

/* ── Left aside: portré + kapcsolati adat-kártya ───────── */
.sm-contact__aside {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
	position: sticky;
	top: calc(var(--sm-header-height) + var(--sm-space-6));
}

.sm-contact__portrait {
	margin: 0;
	border-radius: var(--sm-radius-xl);
	overflow: hidden;
	box-shadow: var(--sm-shadow-md);
	aspect-ratio: 4 / 5;
	background: var(--sm-color-border-strong);
}

.sm-contact__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sm-contact__info {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-6) var(--sm-space-6);
}

.sm-contact__info-header {
	margin-bottom: var(--sm-space-5);
}

.sm-contact__info-eyebrow {
	margin: 0 0 var(--sm-space-2);
	color: var(--sm-color-terracotta);
}

.sm-contact__info-title {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.2;
}

.sm-contact__info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}

.sm-contact__info-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sm-space-3);
	align-items: start;
}

.sm-contact__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
	flex-shrink: 0;
}

.sm-contact__info-body {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	min-width: 0;
}

.sm-contact__info-label {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-stone);
}

.sm-contact__info-value {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-ink);
	line-height: 1.4;
	text-decoration: none;
	word-break: break-word;
}

.sm-contact__info-value--block {
	display: block;
}

a.sm-contact__info-value:hover,
a.sm-contact__info-value:focus-visible {
	color: var(--sm-color-terracotta);
}

.sm-contact__info-link {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	text-decoration: none;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: var(--sm-space-1);
}

.sm-contact__info-link:hover,
.sm-contact__info-link:focus-visible {
	color: var(--sm-color-terracotta-dark);
	text-decoration: underline;
}

.sm-contact__info-socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-3);
	align-items: center;
}

/* ── Right main: bevezető + form + page tartalom ────────── */
.sm-contact__main {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
}

.sm-contact__main-header { margin: 0; }

.sm-contact__main-eyebrow {
	margin: 0 0 var(--sm-space-2);
	color: var(--sm-color-terracotta);
}

.sm-contact__main-title {
	margin: 0 0 var(--sm-space-3);
	font-size: clamp(1.75rem, 3.5vw, var(--sm-text-4xl));
	line-height: 1.15;
}

.sm-contact__main-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
	max-width: 56ch;
}

/* Form-kártya — Gravity Forms / CF7 plugin shortcode kerül ide.
   A plugin saját stílusait nem írjuk felül agresszíven, csak a wrapper
   kárytyázása + design-tokenes padding + radius. */
.sm-contact__form {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-8) var(--sm-space-6);
	box-shadow: var(--sm-shadow-sm);
}

/* Gravity Forms generikus illesztés. A GF a `.gform_wrapper` class-szal jön. */
.sm-contact__form .gform_wrapper,
.sm-contact__form .wpcf7 {
	font-family: var(--sm-font-ui);
	color: var(--sm-color-ink);
}

.sm-contact__form input[type="text"],
.sm-contact__form input[type="email"],
.sm-contact__form input[type="tel"],
.sm-contact__form input[type="url"],
.sm-contact__form select,
.sm-contact__form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--sm-color-border-strong);
	border-radius: var(--sm-radius-md);
	background: var(--sm-color-milk);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-base);
	color: var(--sm-color-ink);
	transition: border-color var(--sm-transition-base), box-shadow var(--sm-transition-base);
}

.sm-contact__form input:focus,
.sm-contact__form select:focus,
.sm-contact__form textarea:focus {
	outline: none;
	border-color: var(--sm-color-terracotta);
	box-shadow: 0 0 0 3px rgba(181, 104, 62, 0.12);
}

.sm-contact__form label {
	display: block;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	margin-bottom: var(--sm-space-2);
}

/* GF submit button — design-egyező pill az ember accent-tel. */
.sm-contact__form input[type="submit"],
.sm-contact__form button[type="submit"],
.sm-contact__form .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	border: none;
	border-radius: var(--sm-radius-full);
	background: var(--sm-cta);
	color: var(--sm-text-on-cta);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	cursor: pointer;
	transition: background var(--sm-transition-base), transform var(--sm-transition-fast);
}

.sm-contact__form input[type="submit"]:hover,
.sm-contact__form button[type="submit"]:hover,
.sm-contact__form .gform_button:hover {
	background: var(--sm-cta-dark);
	transform: translateY(-1px);
}

/* Fallback (nincs shortcode mentve) — sima parchment doboz hint-tel. */
.sm-contact__form-fallback {
	background: var(--sm-color-butter);
	border: 1px dashed var(--sm-color-border-strong);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-contact__form-fallback a {
	color: var(--sm-color-terracotta);
	font-weight: var(--sm-weight-semibold);
}

.sm-contact__admin-hint {
	margin: var(--sm-space-3) 0 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-color-stone);
	font-style: italic;
}

.sm-contact__page-content {
	font-family: var(--sm-font-body);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-contact__page-content > * + * { margin-top: var(--sm-space-4); }

/* Reszponzív — mobilon a két oszlop egymás alá kerül, a sticky aside
   feloldva (különben overlap-elne a fő tartalmat). */
@media (max-width: 1024px) {
	.sm-contact__grid {
		grid-template-columns: 1fr;
		gap: var(--sm-space-8);
	}
	.sm-contact__aside {
		position: static;
	}
	.sm-contact__portrait { max-width: 460px; margin: 0 auto; }
	.sm-contact__info { max-width: 560px; margin: 0 auto; width: 100%; }
}

@media (max-width: 480px) {
	.sm-contact__info {
		padding: var(--sm-space-5) var(--sm-space-4);
	}
	.sm-contact__form {
		padding: var(--sm-space-6) var(--sm-space-4);
	}
}

/* ============================================================
   ABOUT PAGE  (templates/page-about.php)
   ============================================================ */
.sm-about { background: var(--sm-bg-page); }

/* Közös szekció-fejléc — eyebrow + display title — bal- vagy középre rendezve. */
.sm-about__section-header {
	max-width: 640px;
	margin-bottom: var(--sm-space-10);
}
.sm-about__section-header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sm-about__section-eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta);
}
.sm-about__section-title {
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
}

/* ── 1. STORY — fotó-kollázs + lead ─────────────────────── */
.sm-about__story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--sm-space-12);
	align-items: center;
}

.sm-about__story-media {
	position: relative;
	aspect-ratio: 4 / 5;
}

.sm-about__story-photo {
	position: absolute;
	margin: 0;
	border-radius: var(--sm-radius-xl);
	overflow: hidden;
	box-shadow: var(--sm-shadow-lg);
}
.sm-about__story-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sm-about__story-photo--main {
	inset: 0 18% 18% 0;
}

.sm-about__story-photo--accent {
	inset: 50% 0 0 38%;
	border: 6px solid var(--sm-color-parchment);
}

.sm-about__story-copy { max-width: 540px; }

.sm-about__story-eyebrow { margin: 0 0 var(--sm-space-3); color: var(--sm-color-terracotta); }

.sm-about__story-title {
	margin: 0 0 var(--sm-space-5);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.1;
}

.sm-about__story-lead {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	color: var(--sm-color-terracotta-dark);
	line-height: 1.4;
	margin: 0 0 var(--sm-space-5);
}

.sm-about__story-text {
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
	margin: 0 0 var(--sm-space-4);
}
.sm-about__story-text:last-child { margin-bottom: 0; }

/* ── 2. TIMELINE — 3 lépés ──────────────────────────────── */
.sm-about__timeline { background: var(--sm-color-butter); }

.sm-about__timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-8) var(--sm-space-6);
	counter-reset: timeline;
	position: relative;
}

/* Vízszintes elválasztó-vonal a számkörök között — összeköti a lépéseket. */
.sm-about__timeline-list::before {
	content: '';
	position: absolute;
	top: 24px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: linear-gradient(to right,
		transparent 0%,
		var(--sm-color-border-strong) 18%,
		var(--sm-color-border-strong) 82%,
		transparent 100%);
	z-index: 0;
}

.sm-about__timeline-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sm-space-3);
	z-index: 1;
}

/* Timeline lépés-jelölő — fűszál-zöld kör, ami a „kis kezdetből nőtt
   történet" érzetét adja (a sajt-mágus eredet-narratíva mozzanata).
   A bélelt butter-ring ugyanaz, csak a szín cserélődik. */
.sm-about__timeline-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sm-radius-full);
	background: var(--sm-color-meadow);
	color: var(--sm-color-parchment);
	box-shadow: 0 6px 16px rgba(46, 107, 62, 0.32);
	border: 4px solid var(--sm-color-butter);
}

.sm-about__timeline-dot-num {
	font-family: var(--sm-font-ui);
	font-size: 0.875rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.02em;
}

.sm-about__timeline-body { max-width: 320px; }

.sm-about__timeline-year {
	display: inline-block;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-stone);
	margin-bottom: var(--sm-space-2);
}

.sm-about__timeline-title {
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-xl);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	margin: 0 0 var(--sm-space-3);
	line-height: 1.2;
}

.sm-about__timeline-lead {
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
	margin: 0;
}

/* ── 3. CSAPAT — házaspár-blokk ────────────────────────── */
.sm-about__team {
	background: var(--sm-bg-page);
}

.sm-about__team-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--sm-space-12);
	align-items: center;
}

.sm-about__team-media {
	margin: 0;
	border-radius: var(--sm-radius-xl);
	overflow: hidden;
	box-shadow: var(--sm-shadow-lg);
	aspect-ratio: 5 / 4;
	background: var(--sm-color-border-strong);
}
.sm-about__team-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sm-about__team-copy {
	max-width: 480px;
}

.sm-about__team-text {
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
	margin: 0 0 var(--sm-space-4);
}
.sm-about__team-text:last-child { margin-bottom: 0; }

/* ── 4. ÉRTÉKEK — 5 kártya ──────────────────────────────── */
.sm-about__values {
	background: var(--sm-color-butter);
}

.sm-about__values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sm-space-6);
}

.sm-about__value-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-about__value-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	border-color: var(--sm-color-border-strong);
}

.sm-about__value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
}
.sm-about__value-icon svg { width: 22px; height: 22px; }

.sm-about__value-title {
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-lg);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
}

.sm-about__value-lead {
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
	margin: 0;
}

/* ── 5. QUOTE — Sajtmester idézet, dark wood ───────────── */
.sm-about__quote {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20);
}

.sm-about__quote-bg,
.sm-about__quote-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sm-about__quote-bg {
	background-image: var(--sm-about-wood-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.45;
}

.sm-about__quote-overlay {
	background: linear-gradient(180deg,
		rgba(28, 18, 16, 0.70) 0%,
		rgba(28, 18, 16, 0.92) 100%);
}

.sm-about__quote-inner {
	max-width: 760px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-5);
}

.sm-about__quote-mark {
	width: 56px;
	height: auto;
	color: var(--sm-color-terracotta);
	opacity: 0.85;
}

.sm-about__quote-text {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-medium);
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	line-height: 1.4;
	color: var(--sm-color-parchment);
	letter-spacing: -0.005em;
}

.sm-about__quote-cite {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-3);
	margin: 0;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.65);
}

.sm-about__quote-line {
	display: inline-block;
	width: 36px;
	height: 1px;
	background: var(--sm-color-terracotta);
}

/* ── 6. Admin tartalom (opc.) ───────────────────────────── */
.sm-about__admin-content {
	background: var(--sm-bg-page);
}

.sm-about__admin-content .sm-page-content__inner {
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--sm-font-body);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── Reszponzív ────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-about__story-grid,
	.sm-about__team-grid {
		grid-template-columns: 1fr;
		gap: var(--sm-space-8);
	}
	.sm-about__story-media {
		max-width: 460px;
		margin: 0 auto;
	}
	.sm-about__story-copy,
	.sm-about__team-copy { max-width: 640px; margin: 0 auto; }
	.sm-about__team-media { max-width: 560px; margin: 0 auto; }

	.sm-about__timeline-list {
		grid-template-columns: 1fr;
		gap: var(--sm-space-8);
	}
	.sm-about__timeline-list::before { display: none; }
}

@media (max-width: 480px) {
	.sm-about__values-grid { grid-template-columns: 1fr; }
	.sm-about__value-card { padding: var(--sm-space-5); }
	.sm-about__story-media { aspect-ratio: 1 / 1; }
}

/* Mozgáscsökkentés. */
@media (prefers-reduced-motion: reduce) {
	.sm-about__value-card { transition: none; }
	.sm-about__value-card:hover { transform: none; }
}

/* ============================================================
   BLOG LIST  (templates/page-blog.php + archive.php + search.php)
   ============================================================ */
.sm-blog-list { background: var(--sm-bg-page); }

/* Opcionális admin által írt bevezető — a page header alatt narrow oszlopban. */
.sm-blog-list__intro {
	padding-block: var(--sm-space-10) 0;
}

.sm-blog-list__intro-inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-blog-list__intro-inner > * + * { margin-top: var(--sm-space-3); }

.sm-blog-list__grid-section {
	padding-block: var(--sm-space-12) var(--sm-space-16);
}

/* Posts grid. Désktopon 3-4 oszlop (auto-fill 280px-tal),
   ≤960px 2 oszlop, ≤480px 1 oszlop. */
.sm-blog-list__grid,
.sm-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sm-space-6);
}

/* Pagination — design-tokenes pillulák. */
.sm-blog-list__pagination {
	margin-top: var(--sm-space-12);
	display: flex;
	justify-content: center;
}

.sm-blog-list__pagination .page-numbers,
.sm-posts + .pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
	align-items: center;
}

.sm-blog-list__pagination .page-numbers li { list-style: none; }

.sm-blog-list__pagination a.page-numbers,
.sm-blog-list__pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--sm-space-3);
	border-radius: var(--sm-radius-full);
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	color: var(--sm-color-ink);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	text-decoration: none;
	transition: background var(--sm-transition-base), color var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-blog-list__pagination a.page-numbers:hover,
.sm-blog-list__pagination a.page-numbers:focus-visible {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
	border-color: var(--sm-color-terracotta);
}

.sm-blog-list__pagination .page-numbers.current {
	background: var(--sm-color-ink);
	color: var(--sm-color-parchment);
	border-color: var(--sm-color-ink);
}

.sm-blog-list__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--sm-color-stone);
}

.sm-blog-list__empty {
	max-width: 480px;
	margin: var(--sm-space-12) auto;
	text-align: center;
	padding: var(--sm-space-8);
	background: var(--sm-bg-card);
	border: 1px dashed var(--sm-color-border-strong);
	border-radius: var(--sm-radius-lg);
	color: var(--sm-color-ink-light);
	font-family: var(--sm-font-body);
	line-height: var(--sm-leading-relaxed);
}

/* ============================================================
   SINGLE POST  (single.php)
   ============================================================ */
.sm-single-wrap { background: var(--sm-bg-page); }

/* Hero kép — page header alatt, container szélességű, lekerekített. */
.sm-single__hero {
	padding-block: var(--sm-space-8) 0;
}

.sm-single__thumb {
	margin: 0;
	border-radius: var(--sm-radius-xl);
	overflow: hidden;
	box-shadow: var(--sm-shadow-lg);
	aspect-ratio: 16 / 9;
	background: var(--sm-color-border-strong);
}

.sm-single__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body — narrow reading column, középre rendezve a tartalom és meta. */
.sm-single__body {
	padding-block: var(--sm-space-10) var(--sm-space-16);
}

.sm-single__body > .sm-container {
	max-width: 760px;
}

/* Meta-strip — dátum + kategória-chip-ek + olvasási idő egy sorban. */
.sm-single__meta {
	margin: 0 0 var(--sm-space-8);
}

.sm-single__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-3) var(--sm-space-5);
}

.sm-single__date {
	margin: 0;
	color: var(--sm-color-stone);
}

.sm-single__cats {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
}

.sm-single__cat-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--sm-radius-full);
	background: rgba(46, 107, 62, 0.10);
	color: var(--sm-color-meadow);
	font-family: var(--sm-font-ui);
	font-size: 0.625rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background var(--sm-transition-base);
}

.sm-single__cat-chip:hover,
.sm-single__cat-chip:focus-visible {
	background: rgba(46, 107, 62, 0.18);
	color: var(--sm-color-meadow);
}

.sm-single__reading {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: var(--sm-color-stone);
}

.sm-single__reading svg {
	color: var(--sm-color-terracotta);
}

/* Content — typography pass a `the_content()` outputjára.
   Hosszú szövegekhez (500-2800 szó) optimalizált bekezdés-térköz + heading hierarchy. */
.sm-single__content {
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	line-height: 1.75;
	color: var(--sm-color-ink);
}

.sm-single__content > * {
	margin-bottom: var(--sm-space-5);
}
.sm-single__content > *:last-child { margin-bottom: 0; }

.sm-single__content h2,
.sm-single__content h3,
.sm-single__content h4 {
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: var(--sm-space-10);
	margin-bottom: var(--sm-space-4);
}

.sm-single__content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sm-single__content h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: var(--sm-color-ink); }
.sm-single__content h4 { font-size: var(--sm-text-lg); color: var(--sm-color-ink); }

.sm-single__content p { margin: 0 0 var(--sm-space-5); }

.sm-single__content a {
	color: var(--sm-color-terracotta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.sm-single__content a:hover,
.sm-single__content a:focus-visible {
	color: var(--sm-color-terracotta-dark);
}

.sm-single__content strong,
.sm-single__content b { font-weight: var(--sm-weight-semibold); color: var(--sm-color-ink); }

.sm-single__content em,
.sm-single__content i { font-style: italic; color: var(--sm-color-ink-light); }

/* Image-ek a tartalomban — lekerekített, soft shadow. */
.sm-single__content img,
.sm-single__content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sm-radius-lg);
	box-shadow: var(--sm-shadow-sm);
}

.sm-single__content figure {
	margin: var(--sm-space-8) 0;
}

.sm-single__content figcaption {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-stone);
	text-align: center;
	margin-top: var(--sm-space-2);
	font-style: italic;
}

/* Blockquote — fűszál-zöld vonalas pull quote. A meadow szín az „őszinte
   forrás, tiszta hang" jelentést erősíti — sajtot termelő háttér,
   nem dekoráció. */
.sm-single__content blockquote {
	position: relative;
	margin: var(--sm-space-8) 0;
	padding: var(--sm-space-4) var(--sm-space-6);
	border-left: 4px solid var(--sm-color-meadow);
	background: rgba(46, 107, 62, 0.06);
	border-radius: 0 var(--sm-radius-md) var(--sm-radius-md) 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
	color: var(--sm-color-ink);
	line-height: 1.55;
}
.sm-single__content blockquote p:last-child { margin-bottom: 0; }

/* Listák. */
.sm-single__content ul,
.sm-single__content ol {
	margin: 0 0 var(--sm-space-5);
	padding-left: var(--sm-space-6);
}

.sm-single__content li {
	margin-bottom: var(--sm-space-2);
}

.sm-single__content ul li::marker {
	color: var(--sm-color-terracotta);
}

/* Code / pre. */
.sm-single__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--sm-color-butter);
	color: var(--sm-color-terracotta-dark);
	padding: 0.1em 0.4em;
	border-radius: var(--sm-radius-sm);
}

.sm-single__content pre {
	background: var(--sm-color-dark-alt);
	color: var(--sm-color-parchment);
	padding: var(--sm-space-5);
	border-radius: var(--sm-radius-md);
	overflow-x: auto;
	font-size: var(--sm-text-sm);
	line-height: 1.6;
}
.sm-single__content pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}

/* Tags footer. */
.sm-single__footer {
	margin-top: var(--sm-space-10);
	padding-top: var(--sm-space-6);
	border-top: 1px solid var(--sm-color-border);
}

.sm-single__tags-label {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-stone);
}

.sm-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
}

.sm-single__tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-full);
	font-family: var(--sm-font-ui);
	font-size: 0.75rem;
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-ink-light);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: background var(--sm-transition-base), color var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-single__tag-chip:hover,
.sm-single__tag-chip:focus-visible {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
	border-color: var(--sm-color-terracotta);
}

/* Prev / Next nav — 2 kártya, butter háttéren. */
.sm-single__nav-section {
	padding-block: var(--sm-space-12);
}

.sm-single__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-4);
}

.sm-single__nav-card {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
	padding: var(--sm-space-5) var(--sm-space-6);
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-single__nav-card:hover,
.sm-single__nav-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sm-shadow-md);
	border-color: var(--sm-color-border-strong);
}

.sm-single__nav-card--next {
	text-align: right;
	align-items: flex-end;
}

.sm-single__nav-direction {
	margin: 0;
	color: var(--sm-color-terracotta);
}

.sm-single__nav-title {
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* 2 sor max — hosszú címeknél csonkolunk. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Comments section. */
.sm-single__comments-section {
	padding-block: var(--sm-space-8) var(--sm-space-16);
}

.sm-single__comments-section > .sm-container {
	max-width: 760px;
}

/* Reszponzív. */
@media (max-width: 1024px) {
	.sm-blog-list__grid,
	.sm-posts { grid-template-columns: repeat(2, 1fr); }

	.sm-single__nav { grid-template-columns: 1fr; }
	.sm-single__nav-card--next { text-align: left; align-items: flex-start; }
}

@media (max-width: 480px) {
	.sm-blog-list__grid,
	.sm-posts { grid-template-columns: 1fr; }

	.sm-blog-list__pagination a.page-numbers,
	.sm-blog-list__pagination span.page-numbers {
		min-width: 32px;
		height: 32px;
		font-size: 0.75rem;
	}

	.sm-single__thumb { aspect-ratio: 4 / 3; }
	.sm-single__content blockquote { padding: var(--sm-space-3) var(--sm-space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.sm-single__nav-card { transition: none; }
	.sm-single__nav-card:hover { transform: none; }
}

/* ============================================================
   SAJT-ELŐFIZETÉS — sales landing  (templates/page-cheese-subscription.php)
   ============================================================ */
.sm-subscription-landing { background: var(--sm-bg-page); }

/* Közös szekció-fejléc — eyebrow + display title (és opcionális lead). */
.sm-subscription-landing__section-header {
	max-width: 640px;
	margin-bottom: var(--sm-space-10);
}
.sm-subscription-landing__section-header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sm-subscription-landing__section-title {
	margin: var(--sm-space-3) 0 var(--sm-space-3);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
}
.sm-subscription-landing__section-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 1. HERO — dark wood-textured ───────────────────────── */
.sm-subscription-landing__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20) var(--sm-space-24);
}

.sm-subscription-landing__hero-bg,
.sm-subscription-landing__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sm-subscription-landing__hero-bg {
	background-image: var(--sm-sub-wood-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.50;
}

.sm-subscription-landing__hero-overlay {
	background: linear-gradient(180deg,
		rgba(28, 18, 16, 0.78) 0%,
		rgba(28, 18, 16, 0.92) 100%);
}

/* Dekoratív sajtkerék-SVG-k a hero háttérben (lebegő, opacity .15). */
.sm-subscription-landing__hero-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.sm-subscription-landing__hero-deco-icon {
	position: absolute;
	display: block;
	will-change: transform;
}

.sm-subscription-landing__hero-deco-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Mágussapka — jobb felül, terracotta-light, nagy. */
.sm-subscription-landing__hero-deco-icon--1 {
	top: -40px;
	right: -60px;
	width: 280px;
	height: 280px;
	color: var(--sm-color-terracotta-light);
	opacity: 0.26;
	animation: smCheeseFloat1 18s ease-in-out infinite;
}

/* Sajt-szelet — bal alul, meadow-light, közepes. */
.sm-subscription-landing__hero-deco-icon--2 {
	bottom: -50px;
	left: -30px;
	width: 220px;
	height: 220px;
	color: var(--sm-color-meadow-light);
	opacity: 0.22;
	animation: smCheeseFloat2 22s ease-in-out infinite;
}

/* Holdsarló — bal közép, parchment, kisebb (lebegő hangulat-elem). */
.sm-subscription-landing__hero-deco-icon--3 {
	top: 35%;
	left: 8%;
	width: 140px;
	height: 140px;
	color: var(--sm-color-parchment);
	opacity: 0.20;
	animation: smCheeseFloat3 24s ease-in-out infinite;
}

.sm-subscription-landing__hero-inner {
	max-width: 720px;
	text-align: center;
	margin-inline: auto;
}

.sm-subscription-landing__hero-eyebrow {
	margin: 0 0 var(--sm-space-4);
	color: var(--sm-color-terracotta-light);
}

.sm-subscription-landing__hero-title {
	margin: 0 0 var(--sm-space-5);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.1;
}

.sm-subscription-landing__hero-title-accent {
	color: var(--sm-color-terracotta-light);
}

.sm-subscription-landing__hero-lead {
	margin: 0 auto var(--sm-space-8);
	max-width: 600px;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: rgba(239, 230, 221, 0.78);
	line-height: var(--sm-leading-relaxed);
}

.sm-subscription-landing__hero-cta {
	display: flex;
	gap: var(--sm-space-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--sm-space-8);
}

.sm-subscription-landing__hero-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2) var(--sm-space-3);
	justify-content: center;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	letter-spacing: var(--sm-tracking-wide);
	color: rgba(239, 230, 221, 0.55);
	text-transform: uppercase;
}

/* ── 2. WHY — perks 4 kártya ────────────────────────────── */
.sm-subscription-landing__why {
	background: var(--sm-bg-page);
}

.sm-subscription-landing__perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sm-space-5);
}

.sm-subscription-landing__perk-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-subscription-landing__perk-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	border-color: var(--sm-color-border-strong);
}

.sm-subscription-landing__perk-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
}
.sm-subscription-landing__perk-icon svg { width: 22px; height: 22px; }

.sm-subscription-landing__perk-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-lg);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-subscription-landing__perk-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 3. PROCESS — 4 lépés vízszintes/függőleges timeline ─── */
.sm-subscription-landing__process {
	background: var(--sm-color-butter);
}

.sm-subscription-landing__process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sm-space-6);
	position: relative;
	counter-reset: process;
}

/* Vízszintes vonal, mint a Rólunk timeline-on. */
.sm-subscription-landing__process-list::before {
	content: '';
	position: absolute;
	top: 28px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(to right,
		transparent 0%,
		var(--sm-color-border-strong) 18%,
		var(--sm-color-border-strong) 82%,
		transparent 100%);
	z-index: 0;
}

.sm-subscription-landing__process-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-3);
	text-align: center;
	position: relative;
	z-index: 1;
}

.sm-subscription-landing__process-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--sm-radius-full);
	background: var(--sm-color-terracotta);
	color: var(--sm-color-parchment);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	box-shadow: 0 8px 20px rgba(181, 104, 62, 0.32);
	border: 4px solid var(--sm-color-butter);
}

.sm-subscription-landing__process-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-xl);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-subscription-landing__process-lead {
	margin: 0;
	max-width: 240px;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 5. LOCATIONS — 2 oszlopos város-kártya ─────────────── */
.sm-subscription-landing__locations {
	background: var(--sm-bg-page);
}

.sm-subscription-landing__locations-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sm-space-6);
}

.sm-subscription-landing__location-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-8);
}

.sm-subscription-landing__location-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-3);
	margin-bottom: var(--sm-space-5);
	padding-bottom: var(--sm-space-4);
	border-bottom: 1px solid var(--sm-color-border);
}

.sm-subscription-landing__location-city {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-semibold);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.1;
}

.sm-subscription-landing__location-when {
	margin: 0;
	color: var(--sm-color-stone);
}

.sm-subscription-landing__location-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}

.sm-subscription-landing__location-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sm-space-3);
	align-items: baseline;
}

.sm-subscription-landing__location-row dt {
	margin: 0;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}

.sm-subscription-landing__location-row dd {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	text-align: right;
}

/* ── 6. GYIK — natív <details>/<summary> accordion ───────── */
.sm-subscription-landing__faq {
	background: var(--sm-color-butter);
}

.sm-subscription-landing__faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-subscription-landing__faq-item {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	overflow: hidden;
	transition: border-color var(--sm-transition-base), box-shadow var(--sm-transition-base);
}

.sm-subscription-landing__faq-item[open] {
	border-color: var(--sm-color-terracotta);
	box-shadow: 0 4px 14px rgba(181, 104, 62, 0.10);
}

.sm-subscription-landing__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-4);
	padding: var(--sm-space-5) var(--sm-space-6);
	cursor: pointer;
	list-style: none;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/* WebKit / Safari: rejtsük el a native disclosure-triangle-t. */
.sm-subscription-landing__faq-q::-webkit-details-marker { display: none; }
.sm-subscription-landing__faq-q::marker { content: ''; }

.sm-subscription-landing__faq-q-text {
	flex: 1 1 auto;
}

.sm-subscription-landing__faq-q-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sm-color-terracotta);
	transition: transform var(--sm-transition-base);
}
.sm-subscription-landing__faq-q-icon svg { width: 16px; height: 16px; }

.sm-subscription-landing__faq-item[open] .sm-subscription-landing__faq-q-icon {
	transform: rotate(180deg);
}

.sm-subscription-landing__faq-a {
	margin: 0;
	padding: 0 var(--sm-space-6) var(--sm-space-5);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 7. FINAL CTA — dark, dekoratív zárás ───────────────── */
.sm-subscription-landing__final-cta {
	position: relative;
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--sm-space-20);
}

.sm-subscription-landing__final-deco {
	position: absolute;
	top: 50%;
	right: -8%;
	width: 320px;
	height: 320px;
	transform: translateY(-50%);
	color: var(--sm-color-terracotta);
	opacity: 0.10;
	pointer-events: none;
	z-index: -1;
}
.sm-subscription-landing__final-deco svg { width: 100%; height: 100%; }

.sm-subscription-landing__final-inner {
	max-width: 680px;
	text-align: center;
	margin-inline: auto;
}

.sm-subscription-landing__final-eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta-light);
}

.sm-subscription-landing__final-title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--sm-color-parchment);
	line-height: 1.15;
}

.sm-subscription-landing__final-lead {
	margin: 0 auto var(--sm-space-6);
	max-width: 520px;
	color: rgba(239, 230, 221, 0.7);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
}

.sm-subscription-landing__final-actions {
	display: flex;
	justify-content: center;
}

/* ── Admin content (opc.) ───────────────────────────────── */
.sm-subscription-landing__admin-content {
	background: var(--sm-bg-page);
}
.sm-subscription-landing__admin-content .sm-page-content__inner {
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--sm-font-body);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-subscription-landing__process-list {
		grid-template-columns: 1fr;
		gap: var(--sm-space-8);
	}
	.sm-subscription-landing__process-list::before { display: none; }

	.sm-subscription-landing__locations-grid {
		grid-template-columns: 1fr;
	}

	.sm-subscription-landing__hero { padding-block: var(--sm-space-16); }
	.sm-subscription-landing__hero-deco-icon--1 { width: 200px; height: 200px; top: -20px; right: -40px; }
	.sm-subscription-landing__hero-deco-icon--2,
	.sm-subscription-landing__hero-deco-icon--3 { display: none; }
}

@media (max-width: 480px) {
	.sm-subscription-landing__perks { grid-template-columns: 1fr; }
	.sm-subscription-landing__location-card { padding: var(--sm-space-5); }
	.sm-subscription-landing__location-row {
		grid-template-columns: 1fr;
		gap: var(--sm-space-1);
	}
	.sm-subscription-landing__location-row dd { text-align: left; }
	.sm-subscription-landing__hero-cta .sm-btn { width: 100%; justify-content: center; }
	.sm-subscription-landing__final-deco { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-subscription-landing__hero-deco-icon { animation: none; }
	.sm-subscription-landing__perk-card { transition: none; }
	.sm-subscription-landing__perk-card:hover { transform: none; }
}

/* ============================================================
   SHIPPING PAGE  (templates/page-shipping.php)
   ============================================================ */
.sm-shipping { background: var(--sm-bg-page); }

/* Közös szekció-fejléc — a Sajt-előfizetés sales landing rendszerével azonos
   tipográfia. A `.sm-shipping__section-*` osztályokat a `.sm-subscription-landing__section-*`
   utódjaként kezeljük, hogy a vizuális ritmus konzisztens legyen. */
.sm-shipping__section-header {
	max-width: 640px;
	margin-bottom: var(--sm-space-10);
}
.sm-shipping__section-header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.sm-shipping__section-title {
	margin: var(--sm-space-3) 0 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
}

/* ── 1. INTRO HERO ──────────────────────────────────────── */
.sm-shipping__intro {
	background: var(--sm-bg-page);
	padding-block: var(--sm-space-12) var(--sm-space-8);
}

.sm-shipping__intro-inner {
	max-width: 720px;
	text-align: center;
	margin-inline: auto;
}

.sm-shipping__intro-eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta);
}

.sm-shipping__intro-title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
}

.sm-shipping__intro-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 2. LOCATIONS — 2 oszlopos város-kártya (subscription mintán) ─ */
.sm-shipping__locations {
	background: var(--sm-bg-page);
}

.sm-shipping__locations-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sm-space-6);
}

.sm-shipping__location-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-8);
}

.sm-shipping__location-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-3);
	margin-bottom: var(--sm-space-5);
	padding-bottom: var(--sm-space-4);
	border-bottom: 1px solid var(--sm-color-border);
}

.sm-shipping__location-city {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-semibold);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.1;
}

.sm-shipping__location-when {
	margin: 0;
	color: var(--sm-color-stone);
}

.sm-shipping__location-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}

.sm-shipping__location-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sm-space-3);
	align-items: baseline;
}

.sm-shipping__location-row dt {
	margin: 0;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}

.sm-shipping__location-row dd {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	text-align: right;
}

/* ── 3. INFO — Fees + Payment 2-col card ────────────────── */
.sm-shipping__info {
	background: var(--sm-color-butter);
}

.sm-shipping__info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sm-space-6);
}

.sm-shipping__info-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-4);
}

.sm-shipping__info-header {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
}

.sm-shipping__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
	flex-shrink: 0;
}
.sm-shipping__info-icon svg { width: 22px; height: 22px; }

.sm-shipping__info-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-xl);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-shipping__info-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	padding-block: var(--sm-space-2) var(--sm-space-3);
	border-top: 1px solid var(--sm-color-border);
}

.sm-shipping__info-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sm-space-3);
	align-items: baseline;
	padding-top: var(--sm-space-2);
}

.sm-shipping__info-row dt {
	margin: 0;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}

.sm-shipping__info-row dd {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	text-align: right;
}

.sm-shipping__info-note {
	margin: 0;
	padding-top: var(--sm-space-3);
	border-top: 1px solid var(--sm-color-border);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-stone);
	font-style: italic;
	line-height: var(--sm-leading-relaxed);
}

/* ── 4. PACKAGING — 3 oszlop ────────────────────────────── */
.sm-shipping__packaging {
	background: var(--sm-bg-page);
}

.sm-shipping__packaging-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sm-space-6);
}

.sm-shipping__packaging-card {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-shipping__packaging-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-md);
	border-color: var(--sm-color-border-strong);
}

.sm-shipping__packaging-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
}
.sm-shipping__packaging-icon svg { width: 22px; height: 22px; }

.sm-shipping__packaging-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-lg);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-shipping__packaging-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 5. GYIK — natív <details>/<summary> accordion (subscription mintán) ─ */
.sm-shipping__faq {
	background: var(--sm-color-butter);
}

.sm-shipping__faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-shipping__faq-item {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	overflow: hidden;
	transition: border-color var(--sm-transition-base), box-shadow var(--sm-transition-base);
}

.sm-shipping__faq-item[open] {
	border-color: var(--sm-color-terracotta);
	box-shadow: 0 4px 14px rgba(181, 104, 62, 0.10);
}

.sm-shipping__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-4);
	padding: var(--sm-space-5) var(--sm-space-6);
	cursor: pointer;
	list-style: none;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.sm-shipping__faq-q::-webkit-details-marker { display: none; }
.sm-shipping__faq-q::marker { content: ''; }

.sm-shipping__faq-q-text { flex: 1 1 auto; }

.sm-shipping__faq-q-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sm-color-terracotta);
	transition: transform var(--sm-transition-base);
}
.sm-shipping__faq-q-icon svg { width: 16px; height: 16px; }

.sm-shipping__faq-item[open] .sm-shipping__faq-q-icon {
	transform: rotate(180deg);
}

.sm-shipping__faq-a {
	margin: 0;
	padding: 0 var(--sm-space-6) var(--sm-space-5);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── Admin tartalom (opc.) ──────────────────────────────── */
.sm-shipping__admin-content { background: var(--sm-bg-page); }

.sm-shipping__admin-content .sm-page-content__inner {
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--sm-font-body);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-shipping__locations-grid,
	.sm-shipping__info-grid {
		grid-template-columns: 1fr;
	}
	.sm-shipping__packaging-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.sm-shipping__location-card,
	.sm-shipping__info-card { padding: var(--sm-space-5); }
	.sm-shipping__location-row,
	.sm-shipping__info-row {
		grid-template-columns: 1fr;
		gap: var(--sm-space-1);
	}
	.sm-shipping__location-row dd,
	.sm-shipping__info-row dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-shipping__packaging-card { transition: none; }
	.sm-shipping__packaging-card:hover { transform: none; }
}

/* ============================================================
   HOMEPAGE 0.15.0 — kreatív redesign
   ============================================================ */

/* ── HOME · Manifesto pullquote (dark band) ─────────────── */
.sm-home-manifesto {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20);
}

.sm-home-manifesto__bg,
.sm-home-manifesto__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sm-home-manifesto__bg {
	background-image: var(--sm-mf-wood-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.45;
}

.sm-home-manifesto__overlay {
	background: linear-gradient(180deg,
		rgba(28, 18, 16, 0.78) 0%,
		rgba(28, 18, 16, 0.94) 100%);
}

/* Home-manifesto deco — bal felül a mágussapka (terracotta-light), jobb
   alul a sajt-szelet (meadow-light). A megnőtt `smCheeseFloat*` keyframes
   (60-140px ívek) automatikusan érvényesülnek, a `transform` saját rotációja
   az animációval kombinálódva ad lazább „lebegő" érzetet. */
.sm-home-manifesto__deco {
	position: absolute;
	width: 240px;
	height: 240px;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}

.sm-home-manifesto__deco svg { width: 100%; height: 100%; display: block; }

.sm-home-manifesto__deco--left {
	top: -60px;
	left: -80px;
	color: var(--sm-color-terracotta-light);
	animation: smCheeseFloat1 20s ease-in-out infinite;
}

.sm-home-manifesto__deco--right {
	bottom: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	color: var(--sm-color-meadow-light);
	opacity: 0.20;
	animation: smCheeseFloat3 24s ease-in-out infinite;
}

.sm-home-manifesto__inner {
	text-align: center;
	max-width: 880px;
	margin-inline: auto;
}

.sm-home-manifesto__eyebrow {
	margin: 0 0 var(--sm-space-5);
	color: var(--sm-color-terracotta-light);
}

.sm-home-manifesto__quote {
	margin: 0 0 var(--sm-space-10);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	line-height: 1.1;
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
}

.sm-home-manifesto__quote-line {
	display: block;
}

.sm-home-manifesto__quote-line--accent {
	color: var(--sm-color-terracotta-light);
}

/* Számsor — 4 érték + 3 függőleges elválasztó. */
.sm-home-manifesto__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sm-space-5) var(--sm-space-8);
}

.sm-home-manifesto__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-1);
}

.sm-home-manifesto__stat-num {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--sm-color-terracotta-light);
	line-height: 1;
	letter-spacing: -0.02em;
}

.sm-home-manifesto__stat-label {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.65);
	max-width: 11em;
	text-align: center;
}

.sm-home-manifesto__stat-divider {
	width: 1px;
	height: 32px;
	background: rgba(239, 230, 221, 0.20);
	list-style: none;
}

/* ── HOME · Subscription teaser (asymmetric light) ──────── */
.sm-home-subscription {
	background: var(--sm-color-butter);
}

.sm-home-subscription__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--sm-space-12);
	align-items: center;
}

.sm-home-subscription__copy { max-width: 480px; }

.sm-home-subscription__eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta);
}

.sm-home-subscription__title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.1;
}

.sm-home-subscription__lead {
	margin: 0 0 var(--sm-space-6);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-home-subscription__cta { display: flex; }

/* Plan-stack — 4 vízszintes „chip" kártya. */
.sm-home-subscription__plans {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-home-subscription__plan {
	position: relative;
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-home-subscription__plan:hover,
.sm-home-subscription__plan:focus-within {
	transform: translateX(4px);
	box-shadow: var(--sm-shadow-sm);
	border-color: var(--sm-color-terracotta);
}

.sm-home-subscription__plan-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--sm-space-3);
	align-items: center;
	padding: var(--sm-space-4) var(--sm-space-5);
	text-decoration: none;
	color: inherit;
}

.sm-home-subscription__plan-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.10);
	color: var(--sm-color-terracotta);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-bold);
}

.sm-home-subscription__plan-name {
	display: block;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-lg);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
}

.sm-home-subscription__plan-desc {
	display: block;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	color: var(--sm-color-stone);
	letter-spacing: 0.02em;
	margin-top: 2px;
}

.sm-home-subscription__plan-link::after {
	content: '→';
	color: var(--sm-color-terracotta);
	font-size: 1.125rem;
	opacity: 0;
	transition: opacity var(--sm-transition-base), transform var(--sm-transition-base);
}

.sm-home-subscription__plan:hover .sm-home-subscription__plan-link::after,
.sm-home-subscription__plan:focus-within .sm-home-subscription__plan-link::after {
	opacity: 1;
	transform: translateX(2px);
}

/* ── HOME · About strip (dark, fotó-kollázs) ────────────── */
.sm-home-about {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20);
}

.sm-home-about__bg,
.sm-home-about__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sm-home-about__bg {
	background-image: var(--sm-ha-wood-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.30;
}

.sm-home-about__overlay {
	background: linear-gradient(180deg,
		rgba(28, 18, 16, 0.86) 0%,
		rgba(28, 18, 16, 0.94) 100%);
}

.sm-home-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sm-space-12);
	align-items: center;
}

.sm-home-about__media {
	position: relative;
	aspect-ratio: 4 / 5;
}

.sm-home-about__photo {
	position: absolute;
	margin: 0;
	border-radius: var(--sm-radius-xl);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50);
}

.sm-home-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sm-home-about__photo--main {
	inset: 0 30% 30% 0;
	border: 1px solid rgba(239, 230, 221, 0.08);
}

.sm-home-about__photo--accent {
	inset: 38% 0 0 32%;
	border: 4px solid var(--sm-color-dark);
}

/* „2014 alapítva" lebegő badge a kép alá. */
.sm-home-about__badge {
	position: absolute;
	bottom: 8%;
	left: 4%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 80px;
	height: 80px;
	background: var(--sm-color-terracotta);
	border-radius: var(--sm-radius-full);
	color: var(--sm-color-parchment);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.18);
	justify-content: center;
}

.sm-home-about__badge-num {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sm-home-about__badge-sub {
	font-family: var(--sm-font-ui);
	font-size: 0.5625rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.sm-home-about__copy { max-width: 480px; }

.sm-home-about__eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta-light);
}

.sm-home-about__title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-parchment);
	line-height: 1.1;
	letter-spacing: var(--sm-tracking-tight);
}

.sm-home-about__lead {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: var(--sm-text-md);
	color: var(--sm-color-terracotta-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-home-about__text {
	margin: 0 0 var(--sm-space-6);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	color: rgba(239, 230, 221, 0.75);
	line-height: var(--sm-leading-relaxed);
}

.sm-home-about__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-parchment);
	text-decoration: none;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(239, 230, 221, 0.30);
	padding-bottom: 4px;
	transition: color var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-home-about__cta:hover,
.sm-home-about__cta:focus-visible {
	color: var(--sm-color-terracotta-light);
	border-color: var(--sm-color-terracotta-light);
}

/* ── HOME · Books strip (Sajtkorszak könyv promóció) ────── */
.sm-home-books {
	background: var(--sm-color-butter);
}

.sm-home-books__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--sm-space-12);
	align-items: center;
}

.sm-home-books__media {
	display: flex;
	justify-content: center;
}

.sm-home-books__photo-wrap {
	position: relative;
	display: inline-block;
	max-width: 340px;
	width: 100%;
}

.sm-home-books__photo-wrap::before {
	content: '';
	position: absolute;
	inset: 8% -6% -8% 6%;
	background: rgba(181, 104, 62, 0.18);
	border-radius: var(--sm-radius-md);
	z-index: 0;
	transform: rotate(-3deg);
}

.sm-home-books__photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sm-radius-md);
	box-shadow: 0 20px 48px rgba(53, 49, 47, 0.25);
	transform: rotate(2deg);
	transition: transform var(--sm-transition-base);
}

.sm-home-books:hover .sm-home-books__photo {
	transform: rotate(0deg) scale(1.02);
}

.sm-home-books__copy { max-width: 520px; }

.sm-home-books__eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta);
}

.sm-home-books__title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	color: var(--sm-color-terracotta);
	line-height: 1.15;
	letter-spacing: var(--sm-tracking-tight);
}

.sm-home-books__lead {
	margin: 0 0 var(--sm-space-5);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-home-books__formats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
	margin-bottom: var(--sm-space-6);
}

.sm-home-books__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border-strong);
	border-radius: var(--sm-radius-full);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-ink-light);
	text-transform: uppercase;
}

.sm-home-books__chip svg { color: var(--sm-color-terracotta); }

.sm-home-books__cta { align-self: flex-start; }

/* ── HOME · Community + Newsletter (dark merged CTA) ────── */
.sm-home-community {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20);
}

.sm-home-community__bg,
.sm-home-community__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sm-home-community__bg {
	background-image: var(--sm-hc-wood-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.30;
}

.sm-home-community__overlay {
	background: linear-gradient(180deg,
		rgba(28, 18, 16, 0.86) 0%,
		rgba(28, 18, 16, 0.94) 100%);
}

.sm-home-community__header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto var(--sm-space-12);
}

.sm-home-community__eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta-light);
}

.sm-home-community__title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
}

.sm-home-community__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sm-space-6);
}

.sm-home-community__card {
	background: rgba(239, 230, 221, 0.04);
	border: 1px solid rgba(239, 230, 221, 0.10);
	border-radius: var(--sm-radius-xl);
	padding: var(--sm-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: border-color var(--sm-transition-base), background var(--sm-transition-base), transform var(--sm-transition-base);
}

.sm-home-community__card:hover {
	border-color: rgba(239, 230, 221, 0.20);
	background: rgba(239, 230, 221, 0.07);
	transform: translateY(-3px);
}

.sm-home-community__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.20);
	color: var(--sm-color-terracotta-light);
	margin-bottom: var(--sm-space-2);
}

.sm-home-community__card-icon svg { width: 22px; height: 22px; }

.sm-home-community__card-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-xl);
	color: var(--sm-color-parchment);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sm-home-community__card-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: rgba(239, 230, 221, 0.7);
	line-height: var(--sm-leading-relaxed);
}

.sm-home-community__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: var(--sm-space-3);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta-light);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sm-home-community__card-cta:hover,
.sm-home-community__card-cta:focus-visible {
	color: var(--sm-color-parchment);
}

.sm-home-community__newsletter-form { margin-top: var(--sm-space-2); }

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-home-subscription__grid,
	.sm-home-about__inner,
	.sm-home-books__grid {
		grid-template-columns: 1fr;
		gap: var(--sm-space-8);
	}
	.sm-home-about__media { max-width: 460px; margin: 0 auto; }
	.sm-home-about__copy,
	.sm-home-subscription__copy,
	.sm-home-books__copy { max-width: 640px; margin: 0 auto; }
}

@media (max-width: 600px) {
	.sm-home-manifesto__stat-divider { display: none; }
	.sm-home-manifesto__stats { gap: var(--sm-space-4) var(--sm-space-6); }
}

@media (max-width: 480px) {
	.sm-home-about__photo--main { inset: 0 20% 20% 0; }
	.sm-home-about__photo--accent { inset: 45% 0 0 38%; }
	.sm-home-about__badge { width: 64px; height: 64px; bottom: 10%; }
	.sm-home-about__badge-num { font-size: 1rem; }
	.sm-home-about__badge-sub { font-size: 0.5rem; }
	.sm-home-community__card { padding: var(--sm-space-6); }
}

@media (prefers-reduced-motion: reduce) {
	.sm-home-manifesto__deco,
	.sm-home-subscription__plan,
	.sm-home-books__photo,
	.sm-home-community__card {
		transition: none;
		animation: none;
	}
	.sm-home-subscription__plan:hover,
	.sm-home-community__card:hover { transform: none; }
	.sm-home-books:hover .sm-home-books__photo { transform: rotate(2deg) scale(1); }
}

/* ============================================================
   FAQ PAGE  (templates/page-faq.php)
   ============================================================ */
.sm-faq { background: var(--sm-bg-page); }

/* ── 1. INTRO HERO ──────────────────────────────────────── */
.sm-faq__intro {
	padding-block: var(--sm-space-12) var(--sm-space-8);
}

.sm-faq__intro-inner {
	max-width: 720px;
	text-align: center;
	margin-inline: auto;
}

.sm-faq__intro-eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta);
}

.sm-faq__intro-title {
	margin: 0 0 var(--sm-space-4);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-color-terracotta);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
}

.sm-faq__intro-lead {
	margin: 0;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

/* ── 2. QUICK NAV — kategória-anchor chip-row ──────────── */
.sm-faq__nav-wrap {
	padding-block: 0 var(--sm-space-12);
}

.sm-faq__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
	justify-content: center;
}

.sm-faq__nav-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-full);
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-ink);
	text-decoration: none;
	transition: background var(--sm-transition-base), color var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-faq__nav-chip:hover,
.sm-faq__nav-chip:focus-visible {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
	border-color: var(--sm-color-terracotta);
}

.sm-faq__nav-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sm-color-terracotta);
	transition: color var(--sm-transition-base);
}
.sm-faq__nav-chip-icon svg { width: 16px; height: 16px; }

.sm-faq__nav-chip:hover .sm-faq__nav-chip-icon,
.sm-faq__nav-chip:focus-visible .sm-faq__nav-chip-icon {
	color: currentColor;
}

/* ── 3. FAQ KATEGÓRIA SZEKCIÓK ──────────────────────────── */
.sm-faq__cat {
	background: var(--sm-bg-page);
	scroll-margin-top: calc(var(--sm-header-height) + var(--sm-space-6));
}

.sm-faq__cat--alt {
	background: var(--sm-color-butter);
}

.sm-faq__cat-inner {
	max-width: 820px;
}

.sm-faq__cat-header {
	display: flex;
	align-items: center;
	gap: var(--sm-space-4);
	margin-bottom: var(--sm-space-8);
	padding-bottom: var(--sm-space-5);
	border-bottom: 1px solid var(--sm-color-border);
}

.sm-faq__cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--sm-radius-full);
	background: rgba(181, 104, 62, 0.12);
	color: var(--sm-color-terracotta);
	flex-shrink: 0;
}
.sm-faq__cat-icon svg { width: 26px; height: 26px; }

.sm-faq__cat-title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
}

.sm-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-faq__item {
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	overflow: hidden;
	transition: border-color var(--sm-transition-base), box-shadow var(--sm-transition-base);
}

.sm-faq__cat--alt .sm-faq__item {
	background: var(--sm-color-milk);
}

.sm-faq__item[open] {
	border-color: var(--sm-color-terracotta);
	box-shadow: 0 4px 14px rgba(181, 104, 62, 0.10);
}

.sm-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-4);
	padding: var(--sm-space-5) var(--sm-space-6);
	cursor: pointer;
	list-style: none;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: var(--sm-text-md);
	color: var(--sm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.sm-faq__q::-webkit-details-marker { display: none; }
.sm-faq__q::marker { content: ''; }

.sm-faq__q-text { flex: 1 1 auto; }

.sm-faq__q-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sm-color-terracotta);
	transition: transform var(--sm-transition-base);
}
.sm-faq__q-icon svg { width: 16px; height: 16px; }

.sm-faq__item[open] .sm-faq__q-icon {
	transform: rotate(180deg);
}

.sm-faq__a {
	padding: 0 var(--sm-space-6) var(--sm-space-5);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	color: var(--sm-color-ink-light);
	line-height: var(--sm-leading-relaxed);
}

.sm-faq__a p { margin: 0; }
.sm-faq__a p + p { margin-top: var(--sm-space-3); }

/* ── 4. STILL-HAVE-QUESTION CTA ─────────────────────────── */
.sm-faq__contact-cta {
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-16);
}

.sm-faq__contact-cta-inner {
	max-width: 640px;
	text-align: center;
	margin-inline: auto;
}

.sm-faq__contact-cta .sm-label {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta-light);
}

.sm-faq__contact-cta-title {
	margin: 0 0 var(--sm-space-3);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--sm-color-parchment);
	line-height: 1.2;
}

.sm-faq__contact-cta-lead {
	margin: 0 0 var(--sm-space-6);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: rgba(239, 230, 221, 0.7);
	line-height: var(--sm-leading-relaxed);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 600px) {
	.sm-faq__nav {
		justify-content: flex-start;
	}
	.sm-faq__cat-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sm-space-3);
	}
	.sm-faq__cat-icon {
		width: 48px;
		height: 48px;
	}
	.sm-faq__cat-icon svg { width: 22px; height: 22px; }
	.sm-faq__q { padding: var(--sm-space-4) var(--sm-space-5); font-size: var(--sm-text-base); }
	.sm-faq__a { padding-inline: var(--sm-space-5); padding-bottom: var(--sm-space-4); }
}

/* ============================================================
   LEGAL PAGES  (templates/page-legal.php — ÁSZF, Adatkezelési)
   ============================================================ */
.sm-legal { background: var(--sm-bg-page); }

.sm-legal__section { padding-block: var(--sm-space-12); }

.sm-legal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sm-space-8);
}

.sm-legal__grid--with-toc {
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--sm-space-12);
	align-items: start;
}

/* ── Tartalomjegyzék (sticky desktop sidebar + collapsible mobile) ── */
.sm-legal__toc { min-width: 0; }

.sm-legal__toc-desktop {
	position: sticky;
	top: calc(var(--sm-header-height) + var(--sm-space-6));
	padding: var(--sm-space-6);
	background: var(--sm-bg-card);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	max-height: calc(100vh - var(--sm-header-height) - var(--sm-space-12));
	overflow-y: auto;
}

.sm-legal__toc-mobile { display: none; }

.sm-legal__toc-label {
	margin: 0 0 var(--sm-space-4);
	color: var(--sm-color-terracotta);
}

.sm-legal__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: legal-toc;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sm-legal__toc-item {
	margin: 0;
	padding: 0;
}

.sm-legal__toc-link {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--sm-space-2);
	align-items: baseline;
	padding: 0.5rem 0.6rem;
	border-radius: var(--sm-radius-md);
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--sm-color-ink-light);
	text-decoration: none;
	transition: background var(--sm-transition-base), color var(--sm-transition-base);
}

.sm-legal__toc-link:hover,
.sm-legal__toc-link:focus-visible {
	background: rgba(181, 104, 62, 0.08);
	color: var(--sm-color-terracotta);
}

.sm-legal__toc-num {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: 0.6875rem;
	font-weight: var(--sm-weight-bold);
	color: var(--sm-color-stone);
	letter-spacing: -0.02em;
	line-height: 1;
}

.sm-legal__toc-link:hover .sm-legal__toc-num,
.sm-legal__toc-link:focus-visible .sm-legal__toc-num {
	color: var(--sm-color-terracotta);
}

.sm-legal__toc-text {
	font-weight: var(--sm-weight-medium);
	color: inherit;
	word-break: break-word;
}

/* Indented sub-levels — H3 / H4 mélyebbre, mint H2 / első szint. */
.sm-legal__toc-item--level-3 .sm-legal__toc-link { padding-left: 1.25rem; }
.sm-legal__toc-item--level-4 .sm-legal__toc-link {
	padding-left: 1.75rem;
	font-size: 0.75rem;
}
.sm-legal__toc-item--level-3 .sm-legal__toc-num,
.sm-legal__toc-item--level-4 .sm-legal__toc-num { opacity: 0.7; }

/* ── Fő tartalom oszlop ─────────────────────────────────── */
.sm-legal__main { min-width: 0; }

.sm-legal__meta {
	margin: 0 0 var(--sm-space-6);
	padding: var(--sm-space-2) var(--sm-space-4);
	display: inline-block;
	background: var(--sm-color-butter);
	border-radius: var(--sm-radius-full);
	color: var(--sm-color-stone);
}

/* Reading column + typography pass — a single post tipográfiájához hasonló,
   de mindenhol biztosítjuk az anchor-link `scroll-margin-top`-ot a sticky
   header alá. */
.sm-legal__content {
	max-width: 720px;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	line-height: 1.8;
	color: var(--sm-color-ink);
}

.sm-legal__content > * {
	margin-bottom: var(--sm-space-4);
}
.sm-legal__content > *:last-child { margin-bottom: 0; }

.sm-legal__content h2,
.sm-legal__content h3,
.sm-legal__content h4 {
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: var(--sm-space-10);
	margin-bottom: var(--sm-space-4);
	scroll-margin-top: calc(var(--sm-header-height) + var(--sm-space-6));
}

.sm-legal__content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sm-legal__content h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	color: var(--sm-color-ink);
}
.sm-legal__content h4 {
	font-size: var(--sm-text-lg);
	color: var(--sm-color-ink);
	font-style: italic;
}

.sm-legal__content p { margin: 0 0 var(--sm-space-4); }

.sm-legal__content a {
	color: var(--sm-color-terracotta);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sm-legal__content a:hover,
.sm-legal__content a:focus-visible {
	color: var(--sm-color-terracotta-dark);
}

.sm-legal__content strong,
.sm-legal__content b {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}

.sm-legal__content em,
.sm-legal__content i {
	font-style: italic;
}

.sm-legal__content u {
	text-decoration-color: var(--sm-color-terracotta);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Listák. */
.sm-legal__content ul,
.sm-legal__content ol {
	margin: 0 0 var(--sm-space-4);
	padding-left: var(--sm-space-6);
}

.sm-legal__content li {
	margin-bottom: var(--sm-space-2);
}

.sm-legal__content ul li::marker {
	color: var(--sm-color-terracotta);
}

.sm-legal__content ol li::marker {
	color: var(--sm-color-stone);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
}

/* ÁSZF-stílusú szekció-fejléc: egyedüli `<li><strong>...</strong></li>`-
   tételű `<ol>` blokk. Ezt a helper id-vel ellátja, és itt vizuálisan
   kiemeljük (mintha display heading lenne). */
.sm-legal__content ol[id] {
	list-style: none;
	padding: 0;
	margin: var(--sm-space-12) 0 var(--sm-space-5);
	scroll-margin-top: calc(var(--sm-header-height) + var(--sm-space-6));
}

.sm-legal__content ol[id] > li {
	margin: 0;
}

.sm-legal__content ol[id] > li > strong {
	display: block;
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--sm-color-terracotta);
	letter-spacing: -0.01em;
	line-height: 1.2;
	padding-bottom: var(--sm-space-3);
	border-bottom: 1px solid var(--sm-color-border);
}

/* ÁSZF gyakori `<strong>2.1.</strong>` típusú számozott bekezdés-kezdetek
   kissé hangsúlyosabb formátumban. */
.sm-legal__content p > strong:first-child {
	color: var(--sm-color-terracotta-dark);
}

/* Blockquote / idézet — ritka jogi szövegekben, de kezeljük. */
.sm-legal__content blockquote {
	margin: var(--sm-space-6) 0;
	padding: var(--sm-space-3) var(--sm-space-5);
	border-left: 3px solid var(--sm-color-meadow);
	background: rgba(46, 107, 62, 0.06);
	border-radius: 0 var(--sm-radius-md) var(--sm-radius-md) 0;
	font-style: italic;
	color: var(--sm-color-ink);
}

.sm-legal__content blockquote p:last-child { margin-bottom: 0; }

/* Table — táblázatos részek (pl. adatkezelési matrix). */
.sm-legal__content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sm-space-6) 0;
	font-size: var(--sm-text-sm);
}

.sm-legal__content th,
.sm-legal__content td {
	padding: var(--sm-space-3) var(--sm-space-4);
	text-align: left;
	border-bottom: 1px solid var(--sm-color-border);
	vertical-align: top;
}

.sm-legal__content th {
	font-family: var(--sm-font-ui);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	background: var(--sm-color-butter);
	border-bottom-color: var(--sm-color-border-strong);
}

/* ── Back to top link ───────────────────────────────────── */
.sm-legal__back-to-top {
	margin: var(--sm-space-12) 0 0;
	padding-top: var(--sm-space-6);
	border-top: 1px solid var(--sm-color-border);
	text-align: center;
}

.sm-legal__back-to-top-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-terracotta);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: var(--sm-radius-full);
	transition: background var(--sm-transition-base);
}

.sm-legal__back-to-top-link:hover,
.sm-legal__back-to-top-link:focus-visible {
	background: rgba(181, 104, 62, 0.08);
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-legal__grid--with-toc {
		grid-template-columns: 1fr;
		gap: var(--sm-space-6);
	}

	.sm-legal__toc-desktop { display: none; }

	.sm-legal__toc-mobile {
		display: block;
		background: var(--sm-bg-card);
		border: 1px solid var(--sm-color-border);
		border-radius: var(--sm-radius-lg);
		overflow: hidden;
		transition: border-color var(--sm-transition-base);
	}

	.sm-legal__toc-mobile[open] {
		border-color: var(--sm-color-terracotta);
	}

	.sm-legal__toc-mobile-summary {
		display: flex;
		align-items: center;
		gap: var(--sm-space-3);
		padding: var(--sm-space-4) var(--sm-space-5);
		cursor: pointer;
		list-style: none;
		background: var(--sm-color-butter);
	}

	.sm-legal__toc-mobile-summary::-webkit-details-marker { display: none; }
	.sm-legal__toc-mobile-summary::marker { content: ''; }

	.sm-legal__toc-mobile-label {
		flex: 1 1 auto;
		font-family: var(--sm-font-display);
		font-style: italic;
		font-weight: var(--sm-weight-semibold);
		font-size: var(--sm-text-lg);
		color: var(--sm-color-terracotta);
	}

	.sm-legal__toc-mobile-count {
		font-family: var(--sm-font-ui);
		font-size: var(--sm-text-xs);
		font-weight: var(--sm-weight-semibold);
		letter-spacing: var(--sm-tracking-widest);
		text-transform: uppercase;
		color: var(--sm-color-stone);
	}

	.sm-legal__toc-mobile-icon {
		width: 18px;
		height: 18px;
		color: var(--sm-color-terracotta);
		transition: transform var(--sm-transition-base);
	}

	.sm-legal__toc-mobile[open] .sm-legal__toc-mobile-icon {
		transform: rotate(180deg);
	}

	.sm-legal__toc-mobile .sm-legal__toc-list {
		padding: var(--sm-space-3) var(--sm-space-3);
	}
}

@media (max-width: 480px) {
	.sm-legal__content { font-size: var(--sm-text-base); line-height: 1.7; }
	.sm-legal__content ol[id] > li > strong { font-size: 1.25rem; }
}

/* ============================================================
   SALES LANDING  (single-sales.php — `sales` CPT)
   ============================================================ */
.sm-sales {
	background: var(--sm-bg-page);
}

/* ── 1. HERO — featured image bg + dark overlay + meta-vezérelt CTA ── */
.sm-sales__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-24);
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.sm-sales__hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--sm-sales-hero-bg);
	background-size: cover;
	background-position: center;
}

.sm-sales__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 70% 80% at 30% 45%, rgba(28, 18, 16, 0.65) 0%, transparent 70%),
		linear-gradient(to bottom, rgba(28, 18, 16, 0.85) 0%, rgba(28, 18, 16, 0.92) 100%);
}

/* Ha nincs featured image, a hero alapból solid dark — még tisztább, premium. */
.sm-sales__hero:not([style*="--sm-sales-hero-bg"]) .sm-sales__hero-overlay {
	background: var(--sm-color-dark-deep);
}

.sm-sales__hero-inner {
	max-width: 820px;
	text-align: center;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sm-sales__hero-eyebrow {
	margin: 0 0 var(--sm-space-4);
	color: var(--sm-color-terracotta-light);
}

.sm-sales__hero-title {
	margin: 0 0 var(--sm-space-5);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(2rem, 5vw, 3.5rem);
	color: var(--sm-color-parchment);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.1;
	text-wrap: balance;
}

.sm-sales__hero-title br {
	display: block;
	content: "";
	margin-top: 0.15em;
}

.sm-sales__hero-lead {
	margin: 0 0 var(--sm-space-8);
	max-width: 640px;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: rgba(239, 230, 221, 0.85);
	line-height: var(--sm-leading-relaxed);
}

.sm-sales__hero-cta {
	display: flex;
	gap: var(--sm-space-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--sm-space-10);
}

.sm-sales__cta-btn {
	font-size: var(--sm-text-base);
	padding: 0.95rem 1.75rem;
	min-width: 200px;
	justify-content: center;
}

/* Scroll-indicator a hero alján. */
.sm-sales__hero-scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.6);
	text-decoration: none;
	transition: color var(--sm-transition-base);
	margin-top: var(--sm-space-3);
}

.sm-sales__hero-scroll:hover,
.sm-sales__hero-scroll:focus-visible {
	color: var(--sm-color-terracotta-light);
}

.sm-sales__hero-scroll-icon {
	width: 16px;
	height: 16px;
	animation: smScrollBounce 1.6s ease-in-out infinite;
}

/* ── 2. CONTENT BODY — Gutenberg-szerkesztős, reading-column tipográfia ─ */
.sm-sales__body {
	padding-block: var(--sm-space-16);
	background: var(--sm-bg-page);
	scroll-margin-top: var(--sm-header-height);
}

.sm-sales__content {
	max-width: 760px;
	margin-inline: auto;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	line-height: 1.75;
	color: var(--sm-color-ink);
}

.sm-sales__content > * {
	margin-bottom: var(--sm-space-5);
}
.sm-sales__content > *:last-child { margin-bottom: 0; }

.sm-sales__content h2,
.sm-sales__content h3,
.sm-sales__content h4 {
	font-family: var(--sm-font-display);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-terracotta);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: var(--sm-space-10);
	margin-bottom: var(--sm-space-4);
	scroll-margin-top: var(--sm-header-height);
}

.sm-sales__content h2 {
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	font-style: italic;
}
.sm-sales__content h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	color: var(--sm-color-ink);
}
.sm-sales__content h4 {
	font-size: var(--sm-text-lg);
	color: var(--sm-color-ink);
	font-style: italic;
}

.sm-sales__content p { margin: 0 0 var(--sm-space-5); }

/* Az első bekezdés legyen kissé hangsúlyosabb — sales "intro" típográfia. */
.sm-sales__content > p:first-of-type {
	font-size: var(--sm-text-lg);
	color: var(--sm-color-ink);
	line-height: 1.6;
	font-family: var(--sm-font-body);
}

.sm-sales__content a {
	color: var(--sm-color-terracotta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	font-weight: var(--sm-weight-medium);
}

.sm-sales__content a:hover,
.sm-sales__content a:focus-visible {
	color: var(--sm-color-terracotta-dark);
}

.sm-sales__content strong,
.sm-sales__content b {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
}

.sm-sales__content em,
.sm-sales__content i {
	font-style: italic;
	color: var(--sm-color-ink);
}

/* Képek a tartalomban. */
.sm-sales__content img,
.sm-sales__content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sm-radius-lg);
	box-shadow: var(--sm-shadow-md);
}

.sm-sales__content figure {
	margin: var(--sm-space-8) 0;
}

.sm-sales__content figcaption {
	font-family: var(--sm-font-ui);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-stone);
	text-align: center;
	margin-top: var(--sm-space-2);
	font-style: italic;
}

/* Blockquote — sales-ben jellemzően „testimonial"-szerű. */
.sm-sales__content blockquote {
	margin: var(--sm-space-8) 0;
	padding: var(--sm-space-5) var(--sm-space-6);
	border-left: 4px solid var(--sm-color-meadow);
	background: rgba(46, 107, 62, 0.06);
	border-radius: 0 var(--sm-radius-lg) var(--sm-radius-lg) 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
	color: var(--sm-color-ink);
	line-height: 1.55;
	position: relative;
}

.sm-sales__content blockquote::before {
	content: "„";
	position: absolute;
	top: -8px;
	left: 8px;
	font-family: var(--sm-font-display);
	font-size: 3rem;
	color: var(--sm-color-meadow);
	opacity: 0.45;
	line-height: 1;
}

.sm-sales__content blockquote p:last-child { margin-bottom: 0; }

/* Listák. */
.sm-sales__content ul,
.sm-sales__content ol {
	margin: 0 0 var(--sm-space-5);
	padding-left: var(--sm-space-6);
}

.sm-sales__content li {
	margin-bottom: var(--sm-space-2);
}

.sm-sales__content ul li::marker { color: var(--sm-color-terracotta); }
.sm-sales__content ol li::marker { color: var(--sm-color-meadow); font-weight: var(--sm-weight-bold); }

/* Globális számozott lista marker — minden long-form content (blog single,
   sales landing, legal) saját `::marker` szabálya meadow-zöld lesz. A bullet
   listák alap stone-színeit nem érinti, csak az `<ol>` markereket emeli ki. */
.sm-single__content ol li::marker,
.sm-legal__content ol:not([id]) li::marker {
	color: var(--sm-color-meadow);
	font-weight: var(--sm-weight-bold);
}

/* Bullet listák (`<ul>`) markerei — diszkrét meadow pont a stone helyett,
   csak a tartalom-területeken (blog, sales, legal), nem a teljes oldalon. */
.sm-single__content ul > li::marker,
.sm-sales__content ul > li::marker,
.sm-legal__content ul > li::marker {
	color: var(--sm-color-meadow);
}

/* Gutenberg block-classes (buttons, columns, separator).
   Kompakt pill — szándékosan kisebb, mint a hero / final CTA gombok, hogy
   inline használatkor (bekezdés mellett, lista alatt) ne dominálja a
   tartalmat. A hero/final CTA-k a `.sm-sales__cta-btn` osztályt használják,
   ezek külön, nagyobb pill-ek maradnak. */
.sm-sales__content .wp-block-button {
	margin: var(--sm-space-4) 0;
}

.sm-sales__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border-radius: var(--sm-radius-full);
	background: var(--sm-cta);
	color: var(--sm-text-on-cta);
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	font-weight: var(--sm-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--sm-transition-base), transform var(--sm-transition-fast);
}

.sm-sales__content .wp-block-button__link:hover {
	background: var(--sm-cta-dark);
	transform: translateY(-1px);
	color: var(--sm-text-on-cta);
}

/* Outline / „is-style-outline" variant — sales-ekben ritka, de a Gutenberg
   admin felület amúgy kínálja. */
.sm-sales__content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sm-color-terracotta);
	border: 1.5px solid var(--sm-color-terracotta);
}
.sm-sales__content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sm-color-terracotta);
	color: var(--sm-text-on-cta);
}

.sm-sales__content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--sm-color-border);
	margin: var(--sm-space-10) 0;
	max-width: 200px;
	margin-inline: auto;
}

/* MailerLite / form embeds az 1-soros wrapper alatt — finom szegély. */
.sm-sales__content .ml-form-embedContainer,
.sm-sales__content .ml-form,
.sm-sales__content form {
	margin: var(--sm-space-8) auto;
	max-width: 540px;
}

/* ── 3. FINAL CTA STRIP — sötét záró sáv ────────────────── */
.sm-sales__final-cta {
	background: var(--sm-color-dark);
	color: var(--sm-color-parchment);
	padding-block: var(--sm-space-20);
}

.sm-sales__final-cta-inner {
	max-width: 720px;
	text-align: center;
	margin-inline: auto;
}

.sm-sales__final-cta-eyebrow {
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-terracotta-light);
}

.sm-sales__final-cta-title {
	margin: 0 0 var(--sm-space-6);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	color: var(--sm-color-parchment);
	line-height: 1.15;
}

.sm-sales__final-cta-buttons {
	display: flex;
	gap: var(--sm-space-3);
	flex-wrap: wrap;
	justify-content: center;
}

/* ── Reszponzív ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sm-sales__hero {
		min-height: 60vh;
		padding-block: var(--sm-space-16);
	}
	.sm-sales__body { padding-block: var(--sm-space-12); }
	.sm-sales__final-cta { padding-block: var(--sm-space-14); }
}

@media (max-width: 480px) {
	.sm-sales__hero-cta { flex-direction: column; width: 100%; }
	.sm-sales__cta-btn {
		min-width: 0;
		width: 100%;
	}
	.sm-sales__final-cta-buttons { flex-direction: column; }
	.sm-sales__content { font-size: var(--sm-text-base); line-height: 1.7; }
	.sm-sales__content > p:first-of-type { font-size: var(--sm-text-md); }
}

@media (prefers-reduced-motion: reduce) {
	.sm-sales__hero-scroll-icon { animation: none; }
	.sm-sales__content .wp-block-button__link { transition: none; }
	.sm-sales__content .wp-block-button__link:hover { transform: none; }
}

/* ============================================================
   SITE FOOTER  (dark wood deep)
   ============================================================ */
.sm-site-footer {
	background: var(--sm-color-dark-deep);
	color: var(--sm-color-parchment);
	margin-top: 0;
	padding-block: var(--sm-space-16) var(--sm-space-8);
}

.sm-site-footer a {
	color: rgba(239, 230, 221, 0.60);
	transition: color var(--sm-transition-base);
}
.sm-site-footer a:hover,
.sm-site-footer a:focus-visible { color: var(--sm-color-parchment); }

.sm-site-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--sm-space-8);
	margin-bottom: var(--sm-space-10);
}

.sm-site-footer__brand { display: flex; flex-direction: column; gap: var(--sm-space-3); max-width: 280px; }
.sm-site-footer__logo { height: 52px; width: auto; }
.sm-site-footer__tagline {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-size: 0.9375rem;
	color: rgba(239, 230, 221, 0.60);
	line-height: 1.5;
	margin: 0;
}
.sm-site-footer__lead {
	font-family: var(--sm-font-body);
	font-size: 0.8125rem;
	color: rgba(239, 230, 221, 0.45);
	line-height: 1.6;
	margin: 0;
}

.sm-site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
}
.sm-site-footer__contact-row {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-3);
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	color: rgba(239, 230, 221, 0.55);
}

.sm-site-footer__divider {
	border-top: 1px solid rgba(239, 230, 221, 0.08);
	margin-block: 0 var(--sm-space-10);
}

.sm-site-footer__mid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 1.4fr;
	gap: var(--sm-space-8);
	margin-bottom: var(--sm-space-10);
}

.sm-site-footer__nav-col,
.sm-site-footer__nl { display: flex; flex-direction: column; gap: var(--sm-space-1); }

/* Footer oszlop-cím — fűszál-zöld dash ELŐTTE, a sötét háttéren is jól látszó
   meadow-light tone-nal. Mindenhol ahol footer oszlop van (Sajtmágus / Sajtpiac
   / Tudástár / Hírlevél), ez a kis pillanatnyi zöld jelez a brand-azonosság. */
.sm-site-footer__col-title {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	font-family: var(--sm-font-ui);
	font-size: 0.625rem;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.35);
	margin: 0 0 var(--sm-space-3);
}

.sm-site-footer__col-title::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 2px;
	background: var(--sm-color-meadow-light);
	border-radius: 1px;
	flex-shrink: 0;
}

/* Footer alsó divider — finom zöld melegség a parchment-vonal helyett. */
.sm-site-footer__divider {
	border-top-color: rgba(90, 158, 106, 0.18) !important;
}

.sm-site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
}
.sm-site-footer__list a {
	font-family: var(--sm-font-ui);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.sm-site-footer__nl-text {
	font-family: var(--sm-font-body);
	font-size: 0.8125rem;
	color: rgba(239, 230, 221, 0.50);
	line-height: 1.6;
	margin: 0 0 var(--sm-space-4);
}
.sm-site-footer__nl-btn { width: fit-content; padding: 0.7rem 1.4rem; font-size: 0.8125rem; }

.sm-site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sm-space-3);
}

.sm-site-footer__copy,
.sm-site-footer__host {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	color: rgba(239, 230, 221, 0.25);
}

.sm-site-footer__legal {
	list-style: none;
	display: flex;
	gap: var(--sm-space-5);
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.sm-site-footer__legal a {
	font-family: var(--sm-font-ui);
	font-size: 0.6875rem;
	color: rgba(239, 230, 221, 0.30);
}

/* ============================================================
   GENERIC CARD (kept for compatibility)
   ============================================================ */
.sm-card {
	background: var(--sm-bg-card);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	box-shadow: var(--sm-shadow-sm);
	transition: transform var(--sm-transition-base), box-shadow var(--sm-transition-base);
}
.sm-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sm-shadow-md);
}

/* ============================================================
   ANIMATIONS  (portolva index-v2.html-ből)
   ============================================================ */
@keyframes smFadeUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes smScaleIn {
	from { opacity: 0; transform: scale(0.82); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes smHeroBgPan {
	from { transform: scale(1.18); }
	to   { transform: scale(1.00); }
}
@keyframes smRingRotate {
	from { transform: translateY(-50%) rotate(0deg); }
	to   { transform: translateY(-50%) rotate(360deg); }
}
@keyframes smFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}
@keyframes smScrollBounce {
	0%, 100% { transform: translate(-50%, 0);    opacity: 0.35; }
	55%       { transform: translate(-50%, 7px); opacity: 0.75; }
}

/* Lebegő motívumok — NAGY ÍVŰ animációk a hero / manifesto / subscription
   landing szekciókhoz. A korábbi szelíd 10-20px-es elcsúszást lecseréltük
   60-140px-es körívekre, ami a sötét háttéren és az új brand-color tinttel
   együtt látványos „varázsló-térben lebegő" érzetet ad.

   Mind a 4 kompatibilitási nevet megtartjuk (smCheeseFloat1-4), hogy a már
   meglévő `.sm-home-manifesto__deco-*` és `.sm-subscription-landing__hero-deco-icon-*`
   automatikusan átvegye a nagyobb mozgásokat — nem kell tovább frissíteni
   azokat a class-okat.

   Ezek a globális keyframes-ek; a hero-specifikus, még dramatibb mozgásokhoz
   az alábbi `smHeroArc1..6` és `smHeroSparkle` keyframes-ek készültek. */
@keyframes smCheeseFloat1 {
	0%   { transform: translate(0, 0)        rotate(0deg); }
	25%  { transform: translate(60px, -80px) rotate(18deg); }
	50%  { transform: translate(-40px, -40px) rotate(-10deg); }
	75%  { transform: translate(30px, 50px)  rotate(12deg); }
	100% { transform: translate(0, 0)        rotate(0deg); }
}
@keyframes smCheeseFloat2 {
	0%   { transform: translate(0, 0)         rotate(0deg); }
	30%  { transform: translate(-70px, -60px) rotate(-22deg); }
	60%  { transform: translate(50px, -30px)  rotate(15deg); }
	100% { transform: translate(0, 0)         rotate(0deg); }
}
@keyframes smCheeseFloat3 {
	0%   { transform: translate(0, 0)         rotate(0deg); }
	20%  { transform: translate(40px, 70px)   rotate(12deg); }
	55%  { transform: translate(-60px, 30px)  rotate(-18deg); }
	80%  { transform: translate(20px, -55px)  rotate(8deg); }
	100% { transform: translate(0, 0)         rotate(0deg); }
}
@keyframes smCheeseFloat4 {
	0%   { transform: translate(0, 0)          rotate(0deg); }
	40%  { transform: translate(-50px, -70px)  rotate(28deg); }
	70%  { transform: translate(65px, -25px)   rotate(-14deg); }
	100% { transform: translate(0, 0)          rotate(0deg); }
}

/* Hero-specifikus „nagy ív" mozgások — látványosak, drámaiak. */
@keyframes smHeroArcHat {
	0%   { transform: translate(0, 0)         rotate(-6deg); }
	20%  { transform: translate(-40px, -60px) rotate(-22deg); }
	45%  { transform: translate(-90px, 30px)  rotate(-4deg) scale(1.05); }
	70%  { transform: translate(-20px, 80px)  rotate(14deg); }
	100% { transform: translate(0, 0)         rotate(-6deg); }
}

@keyframes smHeroArcWedge {
	0%   { transform: translate(0, 0)         rotate(8deg); }
	25%  { transform: translate(80px, -50px)  rotate(28deg); }
	55%  { transform: translate(120px, 40px)  rotate(-12deg) scale(1.08); }
	80%  { transform: translate(40px, 90px)   rotate(6deg); }
	100% { transform: translate(0, 0)         rotate(8deg); }
}

@keyframes smHeroArcWheel {
	0%   { transform: translate(0, 0)         rotate(0deg); }
	33%  { transform: translate(-60px, 70px)  rotate(120deg) scale(1.04); }
	66%  { transform: translate(70px, -40px)  rotate(240deg); }
	100% { transform: translate(0, 0)         rotate(360deg); }
}

@keyframes smHeroArcMoon {
	0%   { transform: translate(0, 0)         rotate(0deg); }
	30%  { transform: translate(70px, 100px)  rotate(-18deg); }
	65%  { transform: translate(-50px, 60px)  rotate(8deg) scale(1.1); }
	100% { transform: translate(0, 0)         rotate(0deg); }
}

@keyframes smHeroArcWand {
	0%   { transform: translate(0, 0)         rotate(0deg); }
	22%  { transform: translate(-80px, 50px)  rotate(-25deg); }
	48%  { transform: translate(-40px, -90px) rotate(15deg); }
	75%  { transform: translate(60px, -30px)  rotate(40deg); }
	100% { transform: translate(0, 0)         rotate(0deg); }
}

/* Apró sparkle „pislogás" + lassú vándorlás. */
@keyframes smHeroSparkle {
	0%   { transform: translate(0, 0)         scale(0.7) rotate(0deg);   opacity: 0.20; }
	30%  { transform: translate(40px, -30px)  scale(1.1) rotate(60deg);  opacity: 0.55; }
	60%  { transform: translate(-30px, 40px)  scale(0.9) rotate(150deg); opacity: 0.35; }
	100% { transform: translate(0, 0)         scale(0.7) rotate(360deg); opacity: 0.20; }
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.sm-subscription__grid { grid-template-columns: repeat(2, 1fr); }
	.sm-blog__grid         { grid-template-columns: repeat(2, 1fr); }
	.sm-testimonials__grid { grid-template-columns: 1fr; gap: var(--sm-space-4); }

	.sm-site-footer__mid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sm-space-10) var(--sm-space-8);
	}

	.sm-hero__container { gap: var(--sm-space-8); }
	/* 1024px alatti felület-arányokra a fő hero blokk (lentebbi @1024px)
	   takarja a teljes átállást — itt csak a gap-et szűkítjük. */
}

/* Globális „mobil" breakpoint — 1024px alatt a fejlécben hamburger menü,
   szekciók 1-2 oszlopra váltanak. A user kérése szerint 1024px alatt
   minden mobile-szerűen viselkedjen. */
@media (max-width: 1024px) {
	:root { --sm-section-padding-y: var(--sm-space-12); }

	h1 { font-size: var(--sm-text-4xl); }
	h2 { font-size: var(--sm-text-3xl); }
	h3 { font-size: var(--sm-text-2xl); }

	.sm-topbar__inner { justify-content: center; gap: var(--sm-space-4); }

	.sm-site-header__nav,
	.sm-site-header__cta { display: none; }

	.sm-site-header__toggle { display: inline-flex; }

	/* Mobile felépítés: bal oldalon a logo, jobb oldalon a kosár-ikon és a
	   hamburger. A nav + CTA `display: none` után az actions-blokk
	   `margin-left: auto`-val a jobb szélre tolódik. */
	.sm-site-header__actions {
		margin-left: auto;
	}

	.sm-page-header { padding-block: var(--sm-space-8) var(--sm-space-6); }
	.sm-page-header__deco--1 { width: 120px; height: 120px; top: -16px; right: -24px; }
	.sm-page-header__deco--2 { display: none; }

	/* Pricing table — mobilon a kártyák egymás alatt, középre rendezve. */
	.sm-pricing-table { grid-template-columns: 1fr; gap: var(--sm-space-4); }
	.sm-pricing-table-section { padding-block: var(--sm-space-12); }
	.sm-pricing-table-section__title { font-size: var(--sm-text-3xl); }

	.sm-hero { min-height: auto; padding-block: var(--sm-space-16); }
	.sm-hero__container { flex-direction: column; gap: var(--sm-space-10); }
	.sm-hero__copy      { width: 100%; }

	/* Mobil hero collage — az asztali nézet PROPORCIÓIT megtartjuk, csak a
	   méretek skálázódnak a viewporthoz. Asztali container 460×580 (ratio
	   ~0.793). `aspect-ratio` + `clamp()` szélességgel a magasság automatikusan
	   illeszkedik — soha nem nyomódnak össze a képek. */
	.sm-hero__media {
		flex-shrink: 0;
		width: clamp(280px, 80vw, 460px);
		max-width: 100%;
		height: auto;
		aspect-ratio: 460 / 580;
		margin: 0 auto;
	}

	/* Fő kép: asztali 340×480 / container 460×580 → 73.9% × 82.8%.
	   Pozíció a desktoppal azonos: jobbra-középre. */
	.sm-hero__photo-main {
		width: 73.9%;
		height: 82.8%;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Accent kör: asztali 190×190 / container 460×580 → 41.3% × 32.8%.
	   A `aspect-ratio: 1` biztosítja, hogy a kör ne torzuljon. A bal-felső
	   pozíció enyhén lefelé húzva, hogy ne ütközzön a top-right év-badge-zsel. */
	.sm-hero__photo-accent-1 {
		width: 41.3%;
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 1;
		left: 0;
		top: 4%;
	}

	/* Accent szögletes: asztali 160×160 / container 460×580 → 34.8% × 27.6%.
	   A bal-alsó pozíció szintén proporcionálisan. */
	.sm-hero__photo-accent-2 {
		width: 34.8%;
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 1;
		left: 4.3%;
		bottom: 4.8%;
	}

	/* Dashed ring marad — proporciók megegyeznek a desktoppal, csak %-ban. */
	.sm-hero__photo-ring {
		display: block;
		width: 82.6%;
		height: 89.7%;
		right: -3.9%;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Badge-ek: az asztali nézeten kicsit „kilógnak" a container-ből (right:
	   negative), ami premium-collage érzetet ad. Mobilon ÉPP a container
	   szélén / kissé bent — nem nyúlnak ki a viewportból, de a layered design
	   megmarad. */
	.sm-hero__badge {
		bottom: 17.2%;
		right: -5.2%;
	}

	.sm-hero__year-badge {
		top: 4.1%;
		right: -3.5%;
	}

	.sm-hero__scroll { display: none; }

	.sm-categories__grid { grid-template-columns: repeat(2, 1fr); }

	/* Termékkártya rács — minden mobil/tablet viewporton 2 oszlop. A
	   `minmax(0, 1fr)` engedélyezi a kártyák zsugorodását nagyon keskeny
	   képernyőn is (340px-ig vizsgálva), így soha nem esnek 1 oszlopra.
	   Vonatkozik a homepage `.sm-products__grid`-re ÉS a WC archive
	   `ul.products`-ra is. A `!important` a WC `.columns-N` osztály-szabályok
	   (lásd fenti 0,0,4,0 specificity) átütésére kell. */
	.sm-products__grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-3,
	.woocommerce-page ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--sm-space-4);
	}

	.sm-subscription__grid { grid-template-columns: 1fr; }
	.sm-blog__grid       { grid-template-columns: 1fr; }

	.sm-about__grid { gap: var(--sm-space-10); }
	.sm-about__media { padding-bottom: 80%; }

	.sm-site-footer__top { flex-direction: column; gap: var(--sm-space-6); }
	.sm-site-footer__mid { grid-template-columns: 1fr; gap: var(--sm-space-8); }
	.sm-site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.sm-categories__grid { grid-template-columns: 1fr; }
	/* Termékkártyák ultra-keskeny telefonon is 2 oszlopban maradnak — a
	   `.sm-products__grid` 1-oszlopos override-ja eltávolítva (lásd a
	   1024px blokk 2-col szabályait, azok érvényben maradnak). */

	.sm-page-header { padding-block: var(--sm-space-8) var(--sm-space-6); }
	.sm-page-header__title { font-size: var(--sm-text-3xl); }
	.sm-page-header__description { font-size: var(--sm-text-base); }
	.sm-page-header__deco--1 { width: 90px; height: 90px; opacity: 0.12; }

	.sm-pricing-table__item { font-size: 0.75rem; }
	.sm-pricing-table-section__cta { min-width: 0; width: 100%; }

	/* Ultra-keskeny telefon (≤480px) — a hero collage még meglehet az asztali
	   proporciókkal, de a badge-ek vissza-húzva ne lógjanak a viewport sávba,
	   és a media valamivel keskenyebb hogy oldalt margin maradjon. */
	.sm-hero__media {
		width: clamp(260px, 86vw, 380px);
	}

	.sm-hero__badge {
		right: 0;
		bottom: 14%;
		padding: 0.45rem 0.85rem;
	}

	.sm-hero__badge-text {
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}

	.sm-hero__year-badge {
		right: 0;
		top: 3%;
		padding: var(--sm-space-2) var(--sm-space-3);
	}

	.sm-hero__year-num   { font-size: 1.125rem; }
	.sm-hero__year-label { font-size: 0.5rem; }
}

/* ============================================================
   MAGIC + CHEESE DECORATIONS — szekció-háttér ornamentumok
   ============================================================
   A „sajt-mágus" brand-narratíva diszkrét vizuális megerősítése: minden
   nagyobb szekció kap egy-két SVG motívumot ::before / ::after pseudo-
   elementként, alacsony opacity-vel (világos hátteren 0.06–0.10, sötéten
   0.12–0.18). pointer-events: none, z-index: 0 — a tartalom mindig fölött.

   Motívum-paletta (inline SVG data-URI-ként):
     ✦ 4-csúcsú szikra (sparkle)         — magic
     ☾ holdsarló (crescent moon)         — magic
     ★ varázspálca + 8-csúcsú star       — magic
     🧙 varázsló-kalap                    — magic
     ◭ háromszög sajt-szelet              — cheese
     ⬭ sajt-korong oldalnézetből           — cheese
     ✧ csillagkép-pattern (több ponttal)  — magic (dark sections)

   Színek baked-in a data-URI-be (terracotta %23B5683E, meadow %232E6B3E,
   parchment %23EFE6DD). A különböző motívumok különböző színt használnak
   a vizuális ritmusért. */

/* Csak a fő szekciók kapnak `position: relative`-et — már sok van rajta,
   de itt globálisan biztosítjuk a pseudo-elementek lehorgonyzását. */
.sm-products,
.sm-about,
.sm-books,
.sm-blog,
.sm-community,
.sm-subscription,
.sm-newsletter,
.sm-contact,
.sm-page-header {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* A tartalom-konténerek explicit z-index: 1, hogy a pseudo-element soha
   ne takarjon szöveget. */
.sm-products > .sm-container,
.sm-about > .sm-container,
.sm-books > .sm-container,
.sm-blog > .sm-container,
.sm-community > .sm-container,
.sm-subscription > .sm-container,
.sm-newsletter > .sm-container,
.sm-contact > .sm-container,
.sm-page-header > .sm-page-header__inner {
	position: relative;
	z-index: 1;
}

/* ── 1. PRODUCTS  (parchment bg) ──────────────────────────────
   Cheese-wedge: terracotta-dark (#8C4C28) — mélyebb, telítettebb mint a sima
   terracotta. Sparkle: ember (#C94B3A) — meleg piros, kontrasztban a butter
   háttéren. */
.sm-products::before {
	content: "";
	position: absolute;
	top: var(--sm-space-8);
	right: -28px;
	width: 240px;
	height: 200px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' fill='none' stroke='%238C4C28' stroke-width='2.5' stroke-linejoin='round'><path d='M8 60 L92 20 L92 60 Z'/><circle cx='42' cy='48' r='3.2' fill='%238C4C28'/><circle cx='62' cy='40' r='2.6' fill='%238C4C28'/><circle cx='76' cy='48' r='2' fill='%238C4C28'/><circle cx='52' cy='52' r='1.8' fill='%238C4C28'/></svg>") no-repeat center / contain;
	opacity: 0.18;
	transform: rotate(-8deg);
	pointer-events: none;
	z-index: 0;
}

.sm-products::after {
	content: "";
	position: absolute;
	bottom: var(--sm-space-12);
	left: -10px;
	width: 100px;
	height: 100px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23C94B3A'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

/* ── 2. ABOUT  (butter bg) ────────────────────────────────────
   Wizard hat: terracotta-dark (#8C4C28) stroke, ember-dark (#A33929) star —
   két brand-color réteg a kalapon. Crescent moon: terracotta (#B5683E) —
   meleg „este, mese" érzet. */
.sm-about::before {
	content: "";
	position: absolute;
	top: var(--sm-space-6);
	left: -20px;
	width: 150px;
	height: 180px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100' fill='none' stroke='%238C4C28' stroke-width='2.2' stroke-linejoin='round'><path d='M40 8 L18 76 L62 76 Z'/><line x1='12' y1='80' x2='68' y2='80' stroke-linecap='round' stroke-width='3'/><circle cx='30' cy='55' r='2.4' fill='%238C4C28'/><path d='M50 30 L52 38 L60 40 L52 42 L50 50 L48 42 L40 40 L48 38 Z' fill='%23A33929' stroke='none'/></svg>") no-repeat center / contain;
	opacity: 0.16;
	transform: rotate(-6deg);
	pointer-events: none;
	z-index: 0;
}

.sm-about::after {
	content: "";
	position: absolute;
	bottom: 8%;
	right: -16px;
	width: 90px;
	height: 90px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%23B5683E'><path d='M44 30 C44 18, 36 8, 24 7 C30 12, 34 20, 34 30 C34 40, 30 48, 24 53 C36 52, 44 42, 44 30 Z'/></svg>") no-repeat center / contain;
	opacity: 0.20;
	transform: rotate(15deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 3. BOOKS  (parchment bg) ─────────────────────────────────
   Wand: meadow-dark (#1E4A2A) stroke — telített zöld pálca, csillaggal a
   végén. Sparkle: meadow (#2E6B3E) — folytatja a zöld téma sort. */
.sm-books::before {
	content: "";
	position: absolute;
	top: var(--sm-space-10);
	right: -24px;
	width: 160px;
	height: 160px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%231E4A2A' stroke-width='2.8' stroke-linecap='round'><path d='M15 65 L60 22'/><circle cx='25' cy='55' r='2.4' fill='%231E4A2A' stroke='none'/><circle cx='38' cy='42' r='1.8' fill='%231E4A2A' stroke='none'/><path d='M58 12 L62 20 L70 22 L62 24 L58 32 L54 24 L46 22 L54 20 Z' fill='%232E6B3E' stroke='none'/></svg>") no-repeat center / contain;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.sm-books::after {
	content: "";
	position: absolute;
	bottom: var(--sm-space-8);
	left: 4%;
	width: 80px;
	height: 80px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232E6B3E'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
}

/* ── 4. BLOG  (butter bg) ─────────────────────────────────────
   Konstelláció: ember-dark (#A33929) — meleg piros pontok, mintha
   parázs-fényű csillagok lennének. Sparkle: ember (#C94B3A) — primary
   CTA-szín diszkrét visszaköszönése. */
.sm-blog::before {
	content: "";
	position: absolute;
	top: 6%;
	right: -10%;
	width: 380px;
	height: 260px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='%23A33929'><circle cx='30' cy='30' r='2.4'/><circle cx='80' cy='50' r='1.8'/><circle cx='150' cy='25' r='1.5'/><circle cx='175' cy='95' r='2.4'/><circle cx='60' cy='110' r='1.8'/><circle cx='115' cy='115' r='1.3'/><circle cx='100' cy='70' r='1.8'/><path d='M65 65 L66 71 L72 72 L66 73 L65 79 L64 73 L58 72 L64 71 Z'/><path d='M135 50 L137 54 L141 55 L137 56 L135 60 L133 56 L129 55 L133 54 Z'/></svg>") no-repeat center / contain;
	opacity: 0.20;
	pointer-events: none;
	z-index: 0;
}

.sm-blog::after {
	content: "";
	position: absolute;
	bottom: 4%;
	left: -20px;
	width: 100px;
	height: 100px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23C94B3A'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.22;
	transform: rotate(20deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 5. COMMUNITY  (light bg) ─────────────────────────────────
   Cheese-wheel: meadow-dark (#1E4A2A) stroke — mélyebb zöld kontúr, meadow
   pöttyökkel. Moon: meadow (#2E6B3E) — közösségi „este, sajt és mese" érzet
   zöld kontúrban. */
.sm-community::before {
	content: "";
	position: absolute;
	top: -10px;
	right: -30px;
	width: 220px;
	height: 160px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%231E4A2A' stroke-width='2.8'><ellipse cx='60' cy='52' rx='52' ry='14'/><path d='M8 52 L8 38 C8 30 31 24 60 24 C89 24 112 30 112 38 L112 52'/><path d='M8 38 C8 46 31 52 60 52 C89 52 112 46 112 38' opacity='0.4'/><circle cx='35' cy='42' r='3.2' fill='%232E6B3E'/><circle cx='65' cy='44' r='2.4' fill='%232E6B3E'/><circle cx='88' cy='40' r='2.8' fill='%232E6B3E'/></svg>") no-repeat center / contain;
	opacity: 0.18;
	transform: rotate(-5deg);
	pointer-events: none;
	z-index: 0;
}

.sm-community::after {
	content: "";
	position: absolute;
	bottom: 10%;
	left: 2%;
	width: 100px;
	height: 100px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%232E6B3E'><path d='M44 30 C44 18, 36 8, 24 7 C30 12, 34 20, 34 30 C34 40, 30 48, 24 53 C36 52, 44 42, 44 30 Z'/></svg>") no-repeat center / contain;
	opacity: 0.24;
	transform: rotate(-25deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 6. SUBSCRIPTION  (dark bg, home) ─────────────────────────
   Sötét háttéren a brand WORLD-világos árnyalatai kapnak helyet:
   - Cheese-wheel: terracotta-light (#D4956E) — meleg natúr sajt-kerek
   - Konstelláció: meadow-light (#5A9E6A) — fűszálzöld csillagok */
.sm-subscription::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -8%;
	width: 420px;
	height: 280px;
	transform: translateY(-50%) rotate(-12deg);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%23D4956E' stroke-width='2.4'><ellipse cx='60' cy='52' rx='52' ry='14'/><path d='M8 52 L8 38 C8 30 31 24 60 24 C89 24 112 30 112 38 L112 52'/><circle cx='35' cy='42' r='3.2' fill='%23D4956E'/><circle cx='65' cy='44' r='2.4' fill='%23D4956E'/><circle cx='88' cy='40' r='2.8' fill='%23D4956E'/><circle cx='50' cy='46' r='2' fill='%23D4956E'/></svg>") no-repeat center / contain;
	opacity: 0.20;
	pointer-events: none;
	z-index: 0;
}

.sm-subscription::after {
	content: "";
	position: absolute;
	top: 8%;
	left: -2%;
	width: 340px;
	height: 300px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%235A9E6A'><circle cx='30' cy='30' r='2.4'/><circle cx='80' cy='60' r='1.8'/><circle cx='150' cy='40' r='1.5'/><circle cx='180' cy='120' r='2.4'/><circle cx='40' cy='150' r='2'/><circle cx='110' cy='170' r='1.3'/><circle cx='100' cy='100' r='1.8'/><path d='M65 85 L67 91 L73 92 L67 93 L65 99 L63 93 L57 92 L63 91 Z'/><path d='M150 150 L152 155 L157 157 L152 159 L150 164 L148 159 L143 157 L148 155 Z'/></svg>") no-repeat center / contain;
	opacity: 0.32;
	pointer-events: none;
	z-index: 0;
}

/* ── 7. NEWSLETTER  (dark bg, home community/newsletter) ──────
   Konstelláció: terracotta-light (#D4956E) — meleg pasztel csillagok a
   sötéten. Wand: meadow-light (#5A9E6A) — világos zöld varázspálca. */
.sm-newsletter::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='%23D4956E'><circle cx='40' cy='50' r='2.2'/><circle cx='120' cy='80' r='1.6'/><circle cx='240' cy='40' r='2.4'/><circle cx='340' cy='90' r='1.8'/><circle cx='380' cy='180' r='1.6'/><circle cx='320' cy='230' r='2.4'/><circle cx='180' cy='250' r='1.8'/><circle cx='60' cy='220' r='2'/><circle cx='90' cy='160' r='1.3'/><circle cx='200' cy='150' r='1.6'/><path d='M150 110 L152 116 L158 117 L152 118 L150 124 L148 118 L142 117 L148 116 Z'/><path d='M280 130 L282 135 L287 137 L282 139 L280 144 L278 139 L273 137 L278 135 Z'/><path d='M70 80 L71 83 L74 84 L71 85 L70 88 L69 85 L66 84 L69 83 Z'/></svg>") no-repeat center / cover;
	opacity: 0.24;
	pointer-events: none;
	z-index: 0;
}

.sm-newsletter::after {
	content: "";
	position: absolute;
	bottom: -20px;
	right: -10px;
	width: 200px;
	height: 200px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%235A9E6A' stroke-width='2.8' stroke-linecap='round'><path d='M15 65 L60 22'/><circle cx='25' cy='55' r='2.4' fill='%235A9E6A' stroke='none'/><circle cx='38' cy='42' r='1.8' fill='%235A9E6A' stroke='none'/><path d='M58 12 L62 20 L70 22 L62 24 L58 32 L54 24 L46 22 L54 20 Z' fill='%235A9E6A' stroke='none'/></svg>") no-repeat center / contain;
	opacity: 0.34;
	transform: rotate(20deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 8. CONTACT  (page bg) ────────────────────────────────────
   Sparkle: ember (#C94B3A) — meleg CTA-szín, „lépj kapcsolatba" érzet.
   Cheese-wedge: terracotta-dark (#8C4C28) — telített meleg accent. */
.sm-contact::before {
	content: "";
	position: absolute;
	top: 6%;
	left: -20px;
	width: 100px;
	height: 100px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23C94B3A'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.sm-contact::after {
	content: "";
	position: absolute;
	bottom: 8%;
	right: -30px;
	width: 220px;
	height: 180px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' fill='none' stroke='%238C4C28' stroke-width='2.8' stroke-linejoin='round'><path d='M8 60 L92 20 L92 60 Z'/><circle cx='42' cy='48' r='3.4' fill='%238C4C28'/><circle cx='62' cy='40' r='2.8' fill='%238C4C28'/><circle cx='76' cy='48' r='2.2' fill='%238C4C28'/></svg>") no-repeat center / contain;
	opacity: 0.18;
	transform: rotate(10deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 9. PAGE HEADER  (subpage subheader) ──────────────────────
   Sparkle: ember (#C94B3A) — fókuszálja a figyelmet a fő címre.
   Cheese-wheel: terracotta-dark (#8C4C28) — telített meleg accent. */
.sm-page-header::before {
	content: "";
	position: absolute;
	top: 12%;
	left: 4%;
	width: 70px;
	height: 70px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23C94B3A'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.24;
	pointer-events: none;
	z-index: 0;
}

.sm-page-header::after {
	content: "";
	position: absolute;
	bottom: -10px;
	right: 8%;
	width: 130px;
	height: 100px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke='%238C4C28' stroke-width='2.6'><ellipse cx='60' cy='52' rx='52' ry='14'/><path d='M8 52 L8 38 C8 30 31 24 60 24 C89 24 112 30 112 38 L112 52'/><circle cx='35' cy='42' r='3.2' fill='%238C4C28'/><circle cx='65' cy='44' r='2.4' fill='%238C4C28'/><circle cx='88' cy='40' r='2.8' fill='%238C4C28'/></svg>") no-repeat center / contain;
	opacity: 0.20;
	transform: rotate(8deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 10. FOOTER (sötét) — konstelláció bg-pattern ─────────────
   A `.sm-site-footer` már `position: relative` (text-color, padding) volt,
   de defenzíven még egyszer beállítjuk. */
.sm-site-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sm-site-footer__inner {
	position: relative;
	z-index: 1;
}

/* Footer: konstelláció terracotta-light (#D4956E) — meleg pasztel csillagok.
   Wizard hat: meadow-light (#5A9E6A) — világos zöld brand-utalás a sötéten. */
.sm-site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='%23D4956E'><circle cx='60' cy='40' r='2'/><circle cx='150' cy='80' r='1.5'/><circle cx='280' cy='50' r='2.4'/><circle cx='420' cy='90' r='1.8'/><circle cx='550' cy='60' r='2'/><circle cx='80' cy='180' r='1.8'/><circle cx='220' cy='220' r='2.2'/><circle cx='360' cy='180' r='1.5'/><circle cx='480' cy='210' r='2'/><circle cx='100' cy='340' r='2'/><circle cx='280' cy='350' r='1.8'/><circle cx='450' cy='340' r='2.2'/><circle cx='560' cy='280' r='1.5'/><path d='M180 130 L181 134 L185 135 L181 136 L180 140 L179 136 L175 135 L179 134 Z'/><path d='M400 250 L401 253 L404 254 L401 255 L400 258 L399 255 L396 254 L399 253 Z'/></svg>") no-repeat center / cover;
	opacity: 0.18;
	pointer-events: none;
	z-index: 0;
}

.sm-site-footer::after {
	content: "";
	position: absolute;
	bottom: -20px;
	right: -20px;
	width: 220px;
	height: 220px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100' fill='none' stroke='%235A9E6A' stroke-width='2.4' stroke-linejoin='round'><path d='M40 8 L18 76 L62 76 Z'/><line x1='12' y1='80' x2='68' y2='80' stroke-linecap='round' stroke-width='3'/><circle cx='30' cy='55' r='2.4' fill='%235A9E6A'/><path d='M50 30 L52 38 L60 40 L52 42 L50 50 L48 42 L40 40 L48 38 Z' fill='%235A9E6A' stroke='none'/></svg>") no-repeat center / contain;
	opacity: 0.28;
	transform: rotate(-12deg);
	pointer-events: none;
	z-index: 0;
}

/* ── 11. BLOG LIST / SAJTOK CPT LIST ──────────────────────────
   A page-blog.php és page-cheeses.php a `.sm-page-content` wrapper-t
   használja. Ennek body-jébe rejtett sparkle + cheese-wedge. */
.sm-blog-list,
.sm-cheeses-list,
.sm-page-content {
	position: relative;
}

.sm-blog-list::before,
.sm-cheeses-list::before {
	content: "";
	position: absolute;
	top: 6%;
	right: 2%;
	width: 110px;
	height: 110px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23C94B3A'><path d='M16 0 L17.6 14.4 L32 16 L17.6 17.6 L16 32 L14.4 17.6 L0 16 L14.4 14.4 Z'/></svg>") no-repeat center / contain;
	opacity: 0.18;
	pointer-events: none;
	z-index: 0;
}

/* ── 12. RESZPONZÍV — kicsinyítés mobilon ─────────────────────
   A pseudo-elementek nem nyúljanak a viewport oldalába: kicsi
   sparkle-ok megmaradnak, a nagy konstelláció-cluster zsugorodik vagy
   eltűnik mobilon, hogy ne tolakodjanak. */
@media (max-width: 1024px) {
	.sm-products::before,
	.sm-about::before,
	.sm-books::before,
	.sm-community::before,
	.sm-contact::after,
	.sm-page-header::after {
		transform: scale(0.7) rotate(-8deg);
		transform-origin: top right;
	}

	.sm-products::after,
	.sm-about::after,
	.sm-books::after,
	.sm-blog::after,
	.sm-community::after,
	.sm-contact::before,
	.sm-page-header::before {
		transform: scale(0.75);
		transform-origin: bottom left;
	}

	.sm-blog::before,
	.sm-subscription::before,
	.sm-subscription::after,
	.sm-newsletter::after,
	.sm-site-footer::after {
		opacity: 0.06;
	}
}

@media (max-width: 480px) {
	/* Ultra-keskeny telefon — minden „nagy" deco eltűnik, csak a sarki
	   sparkle-ok maradnak. */
	.sm-products::before,
	.sm-about::before,
	.sm-books::before,
	.sm-blog::before,
	.sm-community::before,
	.sm-subscription::before,
	.sm-contact::after,
	.sm-site-footer::after {
		display: none;
	}
}

/* ── 13. Mozgáscsökkentő — minden rotálás semlegesítve ────────
   (A motívumok statikusak, nem animáltak — ez csak a `transform: rotate`
   értelmezés szempontjából preferált.) */
@media (prefers-reduced-motion: reduce) {
	.sm-products::before,
	.sm-about::before,
	.sm-books::before,
	.sm-blog::after,
	.sm-community::before,
	.sm-subscription::before,
	.sm-page-header::after,
	.sm-newsletter::after,
	.sm-site-footer::after,
	.sm-about::after,
	.sm-community::after,
	.sm-contact::after {
		/* Rotációkat NEM vesszük le — statikus dekoráció, nem mozgásokoz.
		   Itt csak placeholder, hogy a `reduced-motion` blokk dokumentált. */
	}
}

/* ============================================================
   404 OLDAL — „Ez a sajt eltűnt a polcról."
   ------------------------------------------------------------
   Két szekció:
     1. Hero: nagy „4 [cheese-wedge] 4" vizuál + cím + lead + 2 CTA
     2. Suggestions: 4 link-kártya (Sajtpiac / Előfizetés / Rólunk / Kapcsolat)
   Brand SVG-k (cheese-wedge + moon + wizard-hat) dekorációként.
   ============================================================ */

/* ── 1. Hero szekció ──────────────────────────────────────── */

.sm-404__hero {
	background: var(--sm-color-parchment);
	padding-top: var(--sm-space-10);
	padding-bottom: var(--sm-space-10);
}

.sm-404__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

/* Vizuál: „4 [cheese] 4" — display méretű digit-ek, középen sajtszelet. */
.sm-404__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.25rem);
	margin: 0 auto var(--sm-space-6);
	color: var(--sm-color-terracotta);
	line-height: 0.9;
}

.sm-404__digit {
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(6rem, 18vw, 11rem);
	color: var(--sm-color-terracotta);
	letter-spacing: -0.04em;
	user-select: none;
}

.sm-404__digit--left { transform: rotate(-4deg); }
.sm-404__digit--right { transform: rotate(4deg); }

.sm-404__cheese {
	display: inline-flex;
	width: clamp(5rem, 14vw, 8.5rem);
	height: clamp(5rem, 14vw, 8.5rem);
	color: var(--sm-color-terracotta-dark);
	transform: rotate(-8deg);
	flex-shrink: 0;
}

.sm-404__cheese svg {
	width: 100%;
	height: 100%;
}

/* Lebegő dekorációk: hold balra fent, mágus-kalap jobbra lent. */
.sm-404__deco {
	position: absolute;
	display: inline-flex;
	color: var(--sm-color-terracotta-light);
	opacity: 0.35;
	pointer-events: none;
}

.sm-404__deco svg {
	width: 100%;
	height: 100%;
}

.sm-404__deco--moon {
	top: -10px;
	left: 8%;
	width: clamp(28px, 4vw, 44px);
	height: clamp(28px, 4vw, 44px);
	transform: rotate(-20deg);
}

.sm-404__deco--hat {
	bottom: 10px;
	right: 6%;
	width: clamp(36px, 5vw, 56px);
	height: clamp(36px, 5vw, 56px);
	transform: rotate(15deg);
	color: var(--sm-color-stone);
	opacity: 0.30;
}

/* Header — eyebrow + nagy cím + lead. */
.sm-404__header {
	margin: 0 0 var(--sm-space-6);
}

.sm-404__eyebrow {
	display: inline-block;
	margin: 0 0 var(--sm-space-3);
	color: var(--sm-color-ember);
	font-size: var(--sm-text-xs);
}

.sm-404__title {
	margin: 0 0 var(--sm-space-3);
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--sm-text-heading);
	letter-spacing: var(--sm-tracking-tight);
	line-height: 1.15;
}

.sm-404__lead {
	margin: 0 auto;
	max-width: 56ch;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-md);
	color: var(--sm-text-secondary);
	line-height: 1.6;
}

/* CTA gombok — wrap mobile-on. */
.sm-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sm-space-3);
	margin-top: var(--sm-space-2);
}

/* ── 2. Suggestions szekció ───────────────────────────────── */

.sm-404__suggestions-section {
	background: var(--sm-color-butter);
	padding-top: var(--sm-space-10);
	padding-bottom: var(--sm-space-10);
}

.sm-404__suggestions-header {
	max-width: 640px;
	margin: 0 auto var(--sm-space-8);
	text-align: center;
}

.sm-404__suggestions-header .sm-label {
	display: inline-block;
	margin-bottom: var(--sm-space-3);
	color: var(--sm-color-terracotta);
}

.sm-404__suggestions-title {
	margin: 0;
	font-family: var(--sm-font-display);
	font-style: italic;
	font-weight: var(--sm-weight-bold);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--sm-text-heading);
	letter-spacing: var(--sm-tracking-tight);
}

.sm-404__suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sm-space-5);
}

.sm-404__suggestion {
	margin: 0;
}

.sm-404__suggestion-card {
	position: relative;
	display: block;
	height: 100%;
	padding: var(--sm-space-6);
	background: var(--sm-color-milk);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-lg);
	color: var(--sm-color-ink);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	box-shadow: var(--sm-shadow-xs);
}

.sm-404__suggestion-card:hover,
.sm-404__suggestion-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--sm-color-terracotta-light);
	box-shadow: 0 10px 24px rgba(53, 49, 47, 0.10);
	outline: none;
}

.sm-404__suggestion-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(212, 149, 110, 0.30), 0 10px 24px rgba(53, 49, 47, 0.10);
}

.sm-404__suggestion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sm-space-3);
	background: var(--sm-color-parchment);
	border-radius: var(--sm-radius-full);
	color: var(--sm-color-terracotta);
	transition: background 0.18s ease, color 0.18s ease;
}

.sm-404__suggestion-icon svg {
	width: 22px;
	height: 22px;
}

.sm-404__suggestion-card:hover .sm-404__suggestion-icon,
.sm-404__suggestion-card:focus-visible .sm-404__suggestion-icon {
	background: var(--sm-color-terracotta);
	color: var(--sm-color-milk);
}

.sm-404__suggestion-eyebrow {
	margin: 0 0 var(--sm-space-1);
	color: var(--sm-color-stone);
	font-size: var(--sm-text-xs);
}

.sm-404__suggestion-name {
	margin: 0 0 var(--sm-space-2);
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-xl);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-ink);
	letter-spacing: var(--sm-tracking-tight);
}

.sm-404__suggestion-lead {
	margin: 0 0 var(--sm-space-3);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	color: var(--sm-text-secondary);
	line-height: 1.5;
}

.sm-404__suggestion-arrow {
	display: inline-block;
	color: var(--sm-color-terracotta);
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-bold);
	transition: transform 0.18s ease;
}

.sm-404__suggestion-card:hover .sm-404__suggestion-arrow,
.sm-404__suggestion-card:focus-visible .sm-404__suggestion-arrow {
	transform: translateX(4px);
}

/* ── Reszponzív ──────────────────────────────────────────── */

@media (max-width: 640px) {
	.sm-404__hero,
	.sm-404__suggestions-section {
		padding-top: var(--sm-space-7);
		padding-bottom: var(--sm-space-7);
	}

	.sm-404__visual {
		gap: 0.25rem;
	}

	/* A digit-ek + sajtszelet egymás melletti — keskeny mobilon szűkebb gap
	   tartja egy sorban. A clamp() font-méretek már gondoskodnak róla. */

	.sm-404__deco--moon,
	.sm-404__deco--hat {
		display: none; /* túl kis helyen elveszik — letiltjuk mobile-on */
	}

	.sm-404__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sm-404__actions .sm-btn {
		width: 100%;
	}
}

/* Reduced motion: a transform-okat, transition-öket csökkentjük. */
@media (prefers-reduced-motion: reduce) {
	.sm-404__digit--left,
	.sm-404__digit--right,
	.sm-404__cheese,
	.sm-404__deco--moon,
	.sm-404__deco--hat {
		transform: none;
	}

	.sm-404__suggestion-card,
	.sm-404__suggestion-icon,
	.sm-404__suggestion-arrow {
		transition: none;
	}

	.sm-404__suggestion-card:hover {
		transform: none;
	}
}

/* ============================================================
   WOOCOMMERCE — finomítások itt csak akkor, ha jövőben
   szükséges. A WC specifikus stílusok az `assets/css/woocommerce.css`
   fájlba kerülnek.
   ============================================================ */

/* ============================================================
   GRAVITY FORMS — Hírlevél form override
   ------------------------------------------------------------
   Két kontextusban renderelődik újra-felülstílusozva:

     1. Főoldal — Community blokk      .sm-home-community__newsletter-form
        Nagy, dark fa-textúrás háttér. Egymás alatti név + email + nagy gomb.

     2. Lábléc — Newsletter oszlop     .sm-site-footer__nl
        Kompakt, kisebb input, formátlan/hider GF heading.

   A Gravity Forms saját default CSS-ét nem kapcsoljuk ki — felülírjuk a
   selector specificitásával. Mindkét helyen csak a .gform_wrapper alatti
   elemekre hatunk, így a többi (Kapcsolat oldal) form érintetlen.

   GF struktúra:
     .gform_wrapper
       └ .gform_heading (.gform_title + .gform_description)
       └ .gform_body
           └ .gform_fields > .gfield > label.gfield_label + .ginput_container > input
       └ .gform_footer > input[type="submit"].gform_button
       └ .gform_confirmation_message (post-submit)
   ============================================================ */

/* ── 1. Főoldali Community blokk hírlevél ─────────────────── */

.sm-home-community__newsletter-form .gform_wrapper {
	margin: 0;
	max-width: 100%;
	color: var(--sm-text-on-dark);
	font-family: var(--sm-font-body);
}

/* GF saját heading: a kártya már címzi a feliratot, ezért elrejtjük
   (a card-title + lead a feletti markupban szerepel). */
.sm-home-community__newsletter-form .gform_heading {
	display: none;
}

/* Mezők egymás alatt (név + email), GF újabb verzióinak grid override-ja. */
.sm-home-community__newsletter-form .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-home-community__newsletter-form .gfield {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
	grid-column: 1 / -1; /* GF 2.5+ grid felülírása */
}

/* Címke: kis caps, parchment-light a sötéten. */
.sm-home-community__newsletter-form .gfield_label {
	font-family: var(--sm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(239, 230, 221, 0.78);
	margin-bottom: 0.4rem;
	display: inline-block;
}

.sm-home-community__newsletter-form .gfield_required {
	color: var(--sm-color-terracotta-light);
	margin-left: 4px;
}

/* Input — világos, transzparens-ish a sötéten, terracotta focus. */
.sm-home-community__newsletter-form .gform_wrapper input[type="text"],
.sm-home-community__newsletter-form .gform_wrapper input[type="email"],
.sm-home-community__newsletter-form .gform_wrapper input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(239, 230, 221, 0.20);
	border-radius: 8px;
	color: var(--sm-text-on-dark);
	font-family: var(--sm-font-body);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sm-home-community__newsletter-form .gform_wrapper input[type="text"]::placeholder,
.sm-home-community__newsletter-form .gform_wrapper input[type="email"]::placeholder,
.sm-home-community__newsletter-form .gform_wrapper input[type="tel"]::placeholder {
	color: rgba(239, 230, 221, 0.40);
}

.sm-home-community__newsletter-form .gform_wrapper input[type="text"]:focus,
.sm-home-community__newsletter-form .gform_wrapper input[type="email"]:focus,
.sm-home-community__newsletter-form .gform_wrapper input[type="tel"]:focus {
	outline: none;
	border-color: var(--sm-color-terracotta-light);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(212, 149, 110, 0.18);
}

/* Field description / hibák. */
.sm-home-community__newsletter-form .gfield_description {
	color: rgba(239, 230, 221, 0.55);
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

.sm-home-community__newsletter-form .gfield_validation_message,
.sm-home-community__newsletter-form .validation_message {
	color: var(--sm-color-ember-light);
	font-size: 0.8125rem;
	margin-top: 0.35rem;
	background: rgba(232, 130, 111, 0.12);
	border: 1px solid rgba(232, 130, 111, 0.30);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}

/* Footer / submit — terrakotta primary gomb (sm-btn--primary stílushoz illesztve). */
.sm-home-community__newsletter-form .gform_footer {
	margin: var(--sm-space-2) 0 0;
	padding: 0;
}

.sm-home-community__newsletter-form .gform_wrapper input[type="submit"],
.sm-home-community__newsletter-form .gform_wrapper button.gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.95rem 1.5rem;
	background: var(--sm-color-terracotta);
	border: none;
	border-radius: 999px;
	color: var(--sm-color-milk);
	font-family: var(--sm-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
	box-shadow: 0 4px 14px rgba(181, 104, 62, 0.30);
}

.sm-home-community__newsletter-form .gform_wrapper input[type="submit"]:hover,
.sm-home-community__newsletter-form .gform_wrapper button.gform_button:hover {
	background: var(--sm-color-terracotta-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(140, 76, 40, 0.40);
}

.sm-home-community__newsletter-form .gform_wrapper input[type="submit"]:active,
.sm-home-community__newsletter-form .gform_wrapper button.gform_button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(140, 76, 40, 0.30);
}

.sm-home-community__newsletter-form .gform_wrapper input[type="submit"]:focus-visible,
.sm-home-community__newsletter-form .gform_wrapper button.gform_button:focus-visible {
	outline: 2px solid var(--sm-color-terracotta-light);
	outline-offset: 3px;
}

/* AJAX spinner + confirmation. */
.sm-home-community__newsletter-form .gform_ajax_spinner {
	margin-left: 0.5rem;
	filter: brightness(0) invert(1);
}

.sm-home-community__newsletter-form .gform_confirmation_wrapper,
.sm-home-community__newsletter-form .gform_confirmation_message {
	background: rgba(46, 107, 62, 0.15);
	border: 1px solid rgba(90, 158, 106, 0.40);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	color: var(--sm-text-on-dark);
	font-family: var(--sm-font-body);
	line-height: 1.5;
}

/* Honeypot / hidden mezők biztosan rejtve maradjanak. */
.sm-home-community__newsletter-form .gform_validation_container,
.sm-home-community__newsletter-form .gfield_visibility_hidden {
	display: none !important;
	position: absolute;
	left: -9999px;
}

/* ── 2. Lábléc Hírlevél — compact ─────────────────────────── */

.sm-site-footer__nl .gform_wrapper {
	margin: 0;
	max-width: 100%;
	color: var(--sm-text-on-dark);
	font-family: var(--sm-font-body);
}

/* GF heading elrejtve — az oszlop saját .sm-site-footer__col-title-ja a fejléc. */
.sm-site-footer__nl .gform_heading {
	display: none;
}

/* Stack: név + email + gomb egymás alatt, szűkebb gap. */
.sm-site-footer__nl .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-site-footer__nl .gfield {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
	grid-column: 1 / -1;
}

/* Compact: a label visually-hidden — a placeholder elég információt ad.
   Screen reader-eknek megőrizve. */
.sm-site-footer__nl .gfield_label {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* Input — kisebb, sűrűbb padding, finomabb határ. */
.sm-site-footer__nl .gform_wrapper input[type="text"],
.sm-site-footer__nl .gform_wrapper input[type="email"],
.sm-site-footer__nl .gform_wrapper input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.85rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(239, 230, 221, 0.16);
	border-radius: 6px;
	color: var(--sm-text-on-dark);
	font-family: var(--sm-font-body);
	font-size: 0.875rem;
	line-height: 1.3;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sm-site-footer__nl .gform_wrapper input[type="text"]::placeholder,
.sm-site-footer__nl .gform_wrapper input[type="email"]::placeholder,
.sm-site-footer__nl .gform_wrapper input[type="tel"]::placeholder {
	color: rgba(239, 230, 221, 0.40);
	font-size: 0.875rem;
}

.sm-site-footer__nl .gform_wrapper input[type="text"]:focus,
.sm-site-footer__nl .gform_wrapper input[type="email"]:focus,
.sm-site-footer__nl .gform_wrapper input[type="tel"]:focus {
	outline: none;
	border-color: var(--sm-color-terracotta-light);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 2px rgba(212, 149, 110, 0.18);
}

/* Field description / hiba — láblécben minimál. */
.sm-site-footer__nl .gfield_description {
	color: rgba(239, 230, 221, 0.45);
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

.sm-site-footer__nl .gfield_validation_message,
.sm-site-footer__nl .validation_message {
	color: var(--sm-color-ember-light);
	font-size: 0.75rem;
	margin-top: 0.3rem;
	padding: 0.4rem 0.6rem;
	background: rgba(232, 130, 111, 0.10);
	border: 1px solid rgba(232, 130, 111, 0.25);
	border-radius: 4px;
}

/* Submit — compact pill. */
.sm-site-footer__nl .gform_footer {
	margin: 0.3rem 0 0;
	padding: 0;
}

.sm-site-footer__nl .gform_wrapper input[type="submit"],
.sm-site-footer__nl .gform_wrapper button.gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.6rem 1.1rem;
	background: var(--sm-color-terracotta);
	border: none;
	border-radius: 999px;
	color: var(--sm-color-milk);
	font-family: var(--sm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.12s ease;
	box-shadow: 0 2px 8px rgba(181, 104, 62, 0.25);
}

.sm-site-footer__nl .gform_wrapper input[type="submit"]:hover,
.sm-site-footer__nl .gform_wrapper button.gform_button:hover {
	background: var(--sm-color-terracotta-dark);
	transform: translateY(-1px);
}

.sm-site-footer__nl .gform_wrapper input[type="submit"]:active,
.sm-site-footer__nl .gform_wrapper button.gform_button:active {
	transform: translateY(0);
}

.sm-site-footer__nl .gform_wrapper input[type="submit"]:focus-visible,
.sm-site-footer__nl .gform_wrapper button.gform_button:focus-visible {
	outline: 2px solid var(--sm-color-terracotta-light);
	outline-offset: 2px;
}

/* AJAX spinner — kompakt. */
.sm-site-footer__nl .gform_ajax_spinner {
	margin-left: 0.4rem;
	max-height: 16px;
	filter: brightness(0) invert(1);
}

/* Confirmation — diszkrét sikertörzs. */
.sm-site-footer__nl .gform_confirmation_wrapper,
.sm-site-footer__nl .gform_confirmation_message {
	background: rgba(46, 107, 62, 0.12);
	border: 1px solid rgba(90, 158, 106, 0.30);
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	font-size: 0.8125rem;
	color: var(--sm-text-on-dark);
	line-height: 1.45;
}

/* Honeypot / hidden mezők. */
.sm-site-footer__nl .gform_validation_container,
.sm-site-footer__nl .gfield_visibility_hidden {
	display: none !important;
	position: absolute;
	left: -9999px;
}

/* Reszponzív: mobile-on a footer 1 oszlopra esik — a hírlevél nem fixe szűk,
   de a max-width-et felülírjuk, hogy ne legyen feleslegesen kicsi. */
@media (max-width: 768px) {
	.sm-site-footer__nl .gform_wrapper {
		max-width: 360px;
	}
}