/* Puricom theme — tokens + layered styles. Layer order is the contract with the
   agentic-wp engine: it inlines section CSS into `sections`, the theme owns the rest. */
@layer reset, base, layout, components, woo, sections, utilities;

:root {
	/* Brand (engine contract names) */
	--color-primary: oklch(0.235 0.035 250);   /* navy — dark bands, primary button */
	--color-secondary: oklch(0.6 0.15 224);    /* cyan text/eyebrow */
	--color-accent: oklch(0.72 0.16 220);      /* cyan line / accent button */
	--color-black: oklch(0.22 0.02 240);       /* body text */
	--color-white: oklch(0.99 0.005 225);
	--color-grey: oklch(0.5 0.02 240);         /* muted text */

	/* Theme-own */
	--color-text: var(--color-black);
	--color-text-muted: oklch(0.42 0.02 240);
	--color-text-nav: oklch(0.32 0.025 250);
	--color-link: oklch(0.5 0.14 224);
	--color-link-hover: oklch(0.35 0.1 232);
	--color-bg: oklch(0.985 0.005 225);
	--color-surface: oklch(0.995 0.002 225);
	--color-panel: oklch(0.965 0.014 225);
	--color-photo: #fff;                         /* behind product photos shot on white */
	--color-border: oklch(0.9 0.005 240);
	--color-border-soft: oklch(0.93 0.006 240);
	--color-footer: oklch(0.175 0.03 250);
	--color-on-dark: oklch(0.96 0.012 225);
	--color-on-dark-muted: oklch(0.82 0.02 225);
	--color-accent-on-dark: oklch(0.78 0.14 220);
	--color-selection: oklch(0.86 0.09 220);

	/* Type */
	--font-primary: 'Work Sans', system-ui, sans-serif;
	--font-heading: 'Poppins', system-ui, sans-serif;
	--font-heading-cond: var(--font-heading);   /* editor menu entry; no condensed face in this design */
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Type roles on the plugin's px ladder (--text-<px>, agwp-components.css). Only roles
	   are used in the CSS below; a redesign changes these lines, never the ladder.
	   A px fallback áll minden létrafok mellett: ha a plugin stylesheetje nem tölt be,
	   a szerep akkor is méretet ad. */
	--text-micro: var(--text-12, 12px);                                  /* badges, tiny caps labels */
	--text-meta: var(--text-13, 13px);                                   /* meta, form labels */
	--text-small: var(--text-15, 15px);                                  /* eyebrow, chips, captions, aside */
	--text-body: var(--text-18, 18px);                                   /* all running text */
	--text-lead: clamp(var(--text-18, 18px), 3.6vw, var(--text-20, 20px));    /* lead paragraph */
	--text-card-title: var(--text-20, 20px);                             /* card / list / panel titles */
	--text-h4: clamp(var(--text-22, 22px), 4vw, var(--text-26, 26px));  /* category-card titles (home) */
	--text-num: var(--text-22, 22px);                                    /* step numbers */
	--text-title-lg: var(--text-24, 24px);                               /* brand wordmark, notices, CTA titles */
	--text-ui: var(--text-16, 16px);                                     /* nav, USP titles, cart link */
	--text-button: var(--text-18, 18px);                                 /* .btn default (user: same as body); .btn--sm stays --text-small */
	--text-h3: clamp(var(--text-22, 22px), 4.5vw, var(--text-30, 30px));    /* always below h2 (min 26) */
	--text-h2-section: clamp(var(--text-26, 26px), 5vw, var(--text-33, 33px)); /* h2 inside a section / panel */
	--text-h2-page: clamp(var(--text-26, 26px), 6vw, var(--text-40, 40px));   /* page h2 */
	--text-stat: clamp(var(--text-26, 26px), 5vw, var(--text-36, 36px));      /* big numbers, prices */
	--text-h1-page: clamp(var(--text-36, 36px), 7vw, var(--text-48, 48px));   /* template / sub-page h1 */
	--text-h1: clamp(var(--text-36, 36px), 8vw, var(--text-60, 60px));

	/* Spacing scale */
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
	--space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;
	--space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px;

	--radius-sm: 2px;   /* buttons, inputs */
	--radius-md: 4px;   /* images, cards */
	--radius-full: 9999px;
	--shadow-sm: 0 1px 4px oklch(0.3 0.04 250 / 0.12);
	--shadow-md: 0 18px 44px -18px oklch(0.3 0.04 250 / 0.35);
	--shadow-lg: 0 24px 56px -20px oklch(0.3 0.04 250 / 0.4);
	--shadow-xl: 0 32px 72px -24px oklch(0.3 0.04 250 / 0.45);
	--shadow-2xl: 0 40px 96px -28px oklch(0.3 0.04 250 / 0.5);
	/* Cards (design): faint contact shadow + soft ambient; hover lifts both. */
	--shadow-card: 0 1px 2px oklch(0.4 0.03 250 / 0.04), 0 8px 24px -12px oklch(0.4 0.03 250 / 0.12);
	--shadow-card-hover: 0 2px 4px oklch(0.4 0.03 250 / 0.05), 0 16px 36px -14px oklch(0.4 0.03 250 / 0.2);
	--transition-fast: 150ms ease;
	--transition-base: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--z-header: 40;
	/* Sticky header: --header-h is measured by sticky-header.js (0 without it); --sticky-top = first free px below it. */
	--header-top: var(--wp-admin--admin-bar--height, 0px);
	--header-h: 0px;
	--sticky-top: calc(var(--header-top) + var(--header-h));

	/* Layout */
	--container-max: 1400px;
	--container-padding: clamp(20px, 4vw, 56px);
	--section-py: clamp(64px, 9vw, 120px);
}

/* ── Reset ───────────────────────────────────────────── */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body { margin: 0; }
	h1, h2, h3, h4, h5, h6, p { margin: 0; }
	ul, ol { list-style: none; padding: 0; margin: 0; }
	a { text-decoration: none; color: inherit; }
	img, svg, video { max-width: 100%; height: auto; display: block; }
	button { cursor: pointer; border: none; background: none; font: inherit; padding: 0; color: inherit; }
	input, textarea, select { font: inherit; }
}

/* ── Base ────────────────────────────────────────────── */
@layer base {
	html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-top) + var(--space-4)); }
	/* WP's admin bar stops being fixed below 600px. */
	@media (max-width: 600px) { :root { --header-top: 0px; } }
	@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


	body {
		font-family: var(--font-primary);
		font-size: var(--text-body);
		line-height: 1.6;
		color: var(--color-text);
		background: var(--color-bg);
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
		/* Short pages: main grows, so the footer sits at the bottom of the viewport. */
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}
	/* width: a flex item with auto inline margins (.container) would otherwise shrink to its content. */
	body > main { flex: 1 0 auto; width: 100%; }
	::selection { background: var(--color-selection); }

	/* Headings: Poppins 600, tight tracking. --f-* are the editor's typography
	   overrides; unset, every rule keeps the design value. */
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--f-family, var(--font-heading));
		font-weight: var(--f-weight, var(--font-semibold));
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
	h1 { font-size: var(--f-size, var(--text-h1)); line-height: 1.08; letter-spacing: -0.025em; }
	h2 { font-size: var(--f-size, var(--text-h2-page)); }
	h3 { font-size: var(--f-size, var(--text-h3)); letter-spacing: -0.01em; }
	h4, h5, h6 { font-size: var(--f-size, var(--text-body)); font-weight: var(--f-weight, var(--font-medium)); }

	p, li {
		font-family: var(--f-family, inherit);
		font-size: var(--f-size, inherit);
		font-weight: var(--f-weight, inherit);
	}

	.prose a, p a { color: var(--color-link); transition: color var(--transition-fast); }
	.prose a:hover, p a:hover { color: var(--color-link-hover); }
	.prose p + p, .prose ul, .prose ol { margin-top: var(--space-4); }
	.prose ul { list-style: disc; padding-left: 1.2em; }
	.prose h2, .prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }

	input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select {
		width: 100%;
		padding: 12px 14px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
		color: var(--color-text);
	}
	select { appearance: none; padding-right: 42px; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23545d68' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1L5 5L9 1'/%3E%3C/svg%3E") no-repeat right 16px center / 11px 7px; cursor: pointer; }
	input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}
}

/* ── Layout (site frame) ─────────────────────────────── */
@layer layout {
	.skip-link {
		position: absolute;
		left: var(--space-4);
		top: -100px;
		z-index: 100;
		padding: var(--space-2) var(--space-4);
		background: var(--color-primary);
		color: var(--color-white);
	}
	.skip-link:focus { top: var(--space-4); }

	.announcement {
		background: var(--color-primary);
		color: var(--color-on-dark);
		text-align: center;
		padding: 10px var(--space-5);
		font-size: var(--text-meta);
		letter-spacing: 0.04em;
	}

	/* Header + search bar + drawer stick together; after scrolling it slims down and casts a shadow. */
	.site-top--sticky { position: sticky; top: var(--header-top); z-index: var(--z-header); background: var(--color-bg); transition: box-shadow var(--transition-base); }
	.site-top--sticky.is-scrolled { box-shadow: var(--shadow-sm); }
	.site-top--sticky .site-header { transition: padding-block var(--transition-base); }
	.site-top--sticky .site-logo img { transition: height var(--transition-base); }
	.site-top--sticky.is-scrolled .site-header { padding-block: var(--space-3); }
	.site-top--sticky.is-scrolled .site-logo img { height: clamp(32px, 6vw, 42px); }

	.site-header {
		position: relative;
		z-index: var(--z-header);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-5);
	}
	.site-logo img { height: clamp(36px, 8vw, 55px); width: auto; }
	.site-logo__text { font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--text-card-title); color: var(--color-primary); }

	.nav-list { display: flex; gap: var(--space-10); align-items: center; color: var(--color-text-nav); }
	.nav-item > a { display: flex; align-items: center; gap: 7px; position: relative; padding-bottom: 3px; transition: color var(--transition-fast); }
	/* Underline grows from the left on hover; stays for the active item. */
	.nav-item > a::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--color-secondary); clip-path: inset(0 100% 0 0); transition: clip-path var(--transition-base); }
	.nav-item > a:hover, .nav-item--has-menu:is(:hover, :focus-within) > a { color: var(--color-link); }
	.nav-item > a:hover::after, .nav-item--has-menu:is(:hover, :focus-within) > a::after, .nav-item > a.is-active::after { clip-path: inset(0); }
	.drawer .nav-item > a::after { content: none; }
	.drawer .nav-item > a.is-active { color: var(--color-link); }
	.nav-item--has-menu { position: relative; }
	.nav-item--has-menu svg { transition: transform var(--transition-base); }
	.nav-item--has-menu:hover svg, .nav-item--has-menu:focus-within svg { transform: rotate(180deg); }
	.nav-menu {
		position: absolute;
		top: 100%;
		left: calc(-1 * var(--space-6));
		z-index: 50;
		min-width: 250px;
		margin-top: var(--space-3);   /* gap to the trigger; the ::before bridge keeps hover alive */
		padding-block: var(--space-2);
		background: var(--color-surface);
		border: 1px solid var(--color-border-soft);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	}
	.nav-menu::before { content: ''; position: absolute; inset: calc(-1 * var(--space-3)) 0 auto; height: var(--space-3); }
	.nav-item--has-menu:hover .nav-menu, .nav-item--has-menu:focus-within .nav-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.nav-menu a { display: block; padding: 10px var(--space-6); font-size: var(--text-ui); }
	.nav-menu a:hover { background: var(--color-panel); color: var(--color-link); }

	.site-actions { display: flex; align-items: center; gap: var(--space-5); color: var(--color-text-nav); }
	.site-actions > :is(a, .search-toggle) { transition: color var(--transition-fast); }
	.site-actions > :is(a, .search-toggle):hover, .search-toggle[aria-expanded="true"] { color: var(--color-link); }
	.site-search { background: var(--color-surface); border-top: 1px solid var(--color-border-soft); }
	.site-search form { padding-block: var(--space-4); }
	.site-search__field { position: relative; }
	/* Suggestions float over the page, as wide as the input. (Not .search-results: WP puts that class on <body> of the search page.) */
	.search-suggest { position: absolute; top: calc(100% + var(--space-1)); inset-inline: 0; z-index: var(--z-header); max-height: min(70vh, 560px); overflow-y: auto; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-small); }
	.search-suggest__group + .search-suggest__group { margin-top: var(--space-2); }
	.search-suggest__label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding: var(--space-2); }
	.search-suggest__label::after { content: ''; flex: 1; border-top: 1px solid var(--color-border-soft); }
	.search-suggest a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); }
	.search-suggest a:is(:hover, [aria-selected="true"]) { background: var(--color-panel); color: var(--color-link); }
	.search-suggest img { width: 44px; height: 44px; object-fit: contain; background: var(--color-photo); border-radius: var(--radius-sm); }
	.search-suggest__title { flex: 1; }
	.search-suggest__price { font-family: var(--font-heading); font-weight: var(--font-semibold); white-space: nowrap; }
	/* Categories as wrapping chips (.chip-link look from components); the label spans the row. */
	.search-suggest__group--chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); }
	.search-suggest__group--chips .search-suggest__label { flex-basis: 100%; padding-inline: 0; }
	.search-suggest__group--chips a { gap: var(--space-2); }
	.search-suggest__count { opacity: 0.7; }
	.search-suggest__empty { padding: var(--space-2); color: var(--color-text-muted); }
	/* Pinned to the bottom of the scrolling panel, edge to edge. */
	.search-suggest__all { position: sticky; bottom: calc(-1 * var(--space-2)); justify-content: center; margin: var(--space-2) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); padding: var(--space-3); background: var(--color-surface); border-top: 1px solid var(--color-border-soft); border-radius: 0; color: var(--color-link); }
	/* Icon + label, like the cart link; the label is the accessible name, so below 1180px it is only visually hidden. */
	.search-toggle, .account-link, .cart-link { display: flex; align-items: center; gap: 10px; font-size: var(--text-ui); line-height: 1.25; }
	.cart-link { position: relative; gap: var(--space-4); }
	.cart-link__badge { position: absolute; top: -7px; left: 12px; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 9px; background: var(--color-link); color: var(--color-white); font-size: var(--text-micro); font-weight: var(--font-semibold); line-height: 17px; text-align: center; }

	.burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; }
	.burger span { display: block; width: 22px; height: 1.6px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-fast); }
	.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
	.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

	/* max-height: the drawer lives in the sticky header, so it scrolls on its own. */
	.drawer { max-height: calc(100dvh - var(--sticky-top)); overflow-y: auto; background: var(--color-surface); border-top: 1px solid var(--color-border-soft); }
	.drawer .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-2) var(--space-6); }
	.drawer .nav-item > a { padding: 14px 0; border-bottom: 1px solid var(--color-border-soft); }
	.drawer .nav-item svg { display: none; }
	.drawer .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; min-width: 0; margin: 0; padding: 0; background: none; }
	.drawer .nav-menu::before { content: none; }
	.drawer .nav-menu a { padding: 12px 0 12px var(--space-4); font-size: var(--text-ui); border-bottom: 1px solid var(--color-border-soft); }

	/* The search / account labels need the room of a wide header. */
	@media (max-width: 1179px) {
		.action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	}
	/* Nav → burger + drawer below 1024px: the full menu gets cramped from ~980px. */
	@media (max-width: 1023px) {
		.site-nav { display: none; }
		.burger { display: flex; }
	}
	@media (min-width: 1024px) {
		.drawer { display: none; }
	}
	@media (max-width: 899px) {
		.cart-link__label { display: none; }
	}

	.site-footer {
		background: var(--color-footer);
		color: var(--color-on-dark-muted);
		padding: clamp(52px, 7vw, 80px) 0 var(--space-10);
		font-size: var(--text-small);
	}
	.footer-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
		gap: var(--space-10) clamp(28px, 4vw, 60px);
		padding-bottom: var(--space-14);
		border-bottom: 1px solid oklch(0.3 0.015 240);
	}
	.footer-brand { display: block; width: 214px; max-width: 100%; margin-bottom: var(--space-4); }
	.footer-brand__text { line-height: 1.7; max-width: 300px; }
	.footer-heading { font-size: var(--text-meta); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-dark); margin-bottom: var(--space-4); }
	.footer-links { display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-accent-on-dark); }
	.footer-links a { display: inline-block; position: relative; }
	.footer-links a::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path var(--transition-base); }
	.footer-links a:is(:hover, :focus-visible)::after { clip-path: inset(0); }
	.newsletter { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
	.newsletter input { background: transparent; border-color: oklch(0.35 0.015 240); color: oklch(0.9 0.01 240); padding: 10px 14px; font-size: var(--text-meta); }
	.footer-copy { padding-top: var(--space-7); font-size: var(--text-meta); text-align: center; }

	.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Components ──────────────────────────────────────── */
@layer components {
	/* Scroll reveal (assets/js/reveal.js): opt-in per element with data-reveal; --reveal-delay staggers. */
	html.js [data-reveal] { opacity: 0; transform: translateY(56px); transition: opacity 0.7s ease-out, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); }
	html.js [data-reveal].is-in { opacity: 1; transform: none; }
	@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } }

	.container {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-padding);
	}

	/* Shared band interior: container width + the engine's per-band padding contract. */
	.band-inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding: var(--sec-pad-top, var(--section-py)) var(--container-padding) var(--sec-pad-bottom, var(--section-py));
	}

	/* Bordered surface used by cards and boxed bands. */
	.card {
		background: var(--color-surface);
		border: 1px solid var(--color-border-soft);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-card);
	}

	.standard-page { padding-bottom: var(--section-py); }
	.standard-page__head { padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 52px); }
	.standard-page__head h1 { font-size: var(--text-h1-page); }
	.standard-page > article > .prose { max-width: 1000px; }

	/* Breadcrumb (shop, cart, blog, sections). */
	.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: oklch(0.55 0.015 240); margin-bottom: var(--space-4); }
	.breadcrumb a { color: var(--color-link); }
	.breadcrumb a:hover { text-decoration: underline; }
	.breadcrumb > span:last-child { color: var(--color-text-nav); }
	.breadcrumb span[aria-hidden] { color: inherit; }

	/* Eyebrow: the theme's own class and the engine CtaBlock's element share one look. */
	.eyebrow, .agwp-cta__eyebrow {
		font-size: var(--text-small);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-secondary);
	}
	.agwp-cta__eyebrow { margin-bottom: var(--space-4); }
	/* No measure cap here: the sections that want one set it (cards-intro, process-intro,
	   ctabanner, hero), the rest fill their column. */
	.agwp-cta__text { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); }
	.agwp-cta__text p + p { margin-top: var(--space-5); }
	.agwp-cta--center .agwp-cta__text { margin-inline: auto; }
	.agwp-cta__actions { gap: var(--space-3) var(--space-4); }
	.sec-bg--dark .agwp-cta__eyebrow { color: var(--color-accent-on-dark); }
	.sec-bg--dark .agwp-cta__text { color: var(--color-on-dark-muted); }

	/* Button: navy fill, 2px radius. The --btn-* fallbacks are the design defaults;
	   the engine's per-button cog overrides them with token references. */
	.btn {
		display: inline-block;
		background: var(--btn-bg, var(--color-primary));
		color: var(--btn-color, var(--color-white));
		font-family: var(--btn-font-family, inherit);
		font-size: var(--btn-font-size, var(--text-button));
		font-weight: var(--btn-font-weight, inherit);
		letter-spacing: 0.02em;
		padding: 16px 32px;
		border: 1px solid var(--btn-border, transparent);
		border-radius: var(--btn-radius, var(--radius-sm));
		box-shadow: var(--btn-shadow, none);
		transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	}
	.btn:hover, .btn:focus-visible { background: var(--btn-bg-hover, oklch(0.3 0.04 250)); }

	.btn--outline {
		--btn-bg: transparent;
		--btn-bg-hover: var(--color-panel);
		--btn-color: oklch(0.28 0.02 240);
		--btn-border: oklch(0.75 0.01 240);
	}
	.btn--light {
		--btn-bg: var(--color-accent);
		--btn-bg-hover: var(--color-accent-on-dark);
		--btn-color: oklch(0.2 0.04 250);
	}
	.btn--sm { padding: 10px 18px; font-size: var(--text-small); }

	/* Engine Button variants (Button::render emits .btn--{variant}); the values are the design's. */
	.btn--accent { --btn-bg: var(--color-primary); }                                                         /* navy fill — main CTA */
	.btn--secondary { --btn-bg: var(--color-link); --btn-bg-hover: var(--color-link-hover); }                /* blue fill */
	.btn--white { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-on-dark); --btn-color: oklch(0.2 0.04 250); } /* light cyan on dark bands */
	.btn--outline { --btn-bg: transparent; --btn-bg-hover: oklch(1 0 0 / 0.1); --btn-color: var(--color-white); --btn-border: oklch(1 0 0 / 0.5); }
	.btn--outline-dark { --btn-bg: transparent; --btn-bg-hover: var(--color-panel); --btn-color: oklch(0.28 0.02 240); --btn-border: oklch(0.75 0.01 240); }
	/* Text-link look for the engine Button ('link' variant): inline, underlined, no box. */
	.btn--link { --btn-bg: transparent; --btn-bg-hover: transparent; --btn-color: var(--color-link); --btn-font-size: var(--text-ui); padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-secondary); border-radius: 0; }

	/* ── Engine band contract ─────────────────────────── */
	.sec-offset {
		position: relative;
		z-index: 1;
		margin-top: var(--sec-mt, 0);
		margin-bottom: var(--sec-mb, 0);
	}
	.sec-bg--grey { background: var(--color-panel); }
	.sec-bg--dark { background: var(--color-primary); color: var(--color-on-dark); }
	.sec-bg--dark .eyebrow { color: var(--color-accent-on-dark); }
	.sec-bg--fixed { background-attachment: fixed; }
	@media (max-width: 900px) { .sec-bg--fixed { background-attachment: scroll; } }
	.sec-bg--image {
		position: relative;
		background-image: var(--sec-bg);
		background-size: cover;
		background-position: var(--sec-bg-pos, center);
		color: var(--color-white);
	}
	.sec-bg--image::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / var(--sec-overlay, 0.5));
	}
	.sec-bg--image.sec-overlay--light::before { background: rgb(255 255 255 / var(--sec-overlay, 0.5)); }
	.sec-bg--image > * { position: relative; }
	.sec-bg--image.sec-text--dark { color: var(--color-text); }
	/* Headings inherit color from the band, so no per-heading recolor is needed;
	   an editor-set --f-color still wins via the utilities receiver. */
}

/* ── Blog (posts page, archives, search, article) — components layer, second block ── */
@layer components {
	.link-underline { display: inline-block; font-size: var(--text-small); color: var(--color-link); border-bottom: 1px solid oklch(0.75 0.1 224); padding-bottom: 2px; transition: color var(--transition-base); }
	/* Hover redraws the underline from the left over the border, like the main nav;
	   the engine's 'link' Button (.btn--link) shares it, minus the arrow (its text is one string). */
	.link-underline, .btn--link { position: relative; }
	:is(.link-underline, .btn--link)::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path var(--transition-base); }
	.link-underline__arrow { display: inline-block; transition: transform var(--transition-base); }
	/* Own link, or a span inside a card link (featured post): the hover follows the link. */
	:is(a.link-underline, .btn--link):is(:hover, :focus-visible), a:is(:hover, :focus-visible) .link-underline { color: var(--color-primary); }
	:is(a.link-underline, .btn--link):is(:hover, :focus-visible)::after, a:is(:hover, :focus-visible) .link-underline::after { clip-path: inset(0); }
	a:is(:hover, :focus-visible) .link-underline__arrow { transform: translateX(4px); }

	.blog-head { padding-block: clamp(26px, 4vw, 44px) clamp(28px, 4vw, 38px); }
	.blog-head .breadcrumb { margin-bottom: 18px; }
	.blog-head .eyebrow { margin-bottom: 14px; }
	.blog-head h1 { font-size: var(--f-size, var(--text-h1-page)); margin-bottom: var(--space-4); }
	.blog-lead { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); max-width: 620px; }

	.blog-featured-wrap { padding-bottom: clamp(48px, 6vw, 72px); }
	.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; overflow: hidden; }
	.blog-featured__media { aspect-ratio: 3 / 2; background: var(--color-panel); }
	.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; }
	.blog-featured__body { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 40px) 0; }
	/* Stacked (image on top): the text needs its own left padding, the image no longer provides it. */
	@media (max-width: 999px) {
		.blog-featured { grid-template-columns: 1fr; gap: 0; }
		.blog-featured__body { padding-left: clamp(24px, 3vw, 44px); }
	}
	.blog-featured__meta { display: flex; align-items: center; gap: 14px; font-size: var(--text-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-4); }
	.blog-featured__meta span[aria-hidden] { color: oklch(0.75 0.01 240); }
	.blog-featured__date { color: var(--color-grey); letter-spacing: 0.04em; text-transform: none; }
	.blog-featured h2 { font-size: var(--f-size, var(--text-h2-section)); margin-bottom: 14px; }
	.blog-featured p { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); margin-bottom: 22px; }

	.blog-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); align-items: start; padding-bottom: clamp(72px, 9vw, 110px); }
	.blog-body--single { grid-template-columns: 1fr; }
	.search-group h2 { font-size: var(--f-size, var(--text-h2-section)); margin-bottom: var(--space-6); }
	.blog-chips { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 26px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-9); }
	.chip-link { padding: 9px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-meta); color: oklch(0.35 0.02 240); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
	.chip-link:hover { border-color: var(--color-link); color: var(--color-link); }
	/* Accent chip (search suggestions): blue outline at rest, filled on hover / keyboard highlight. */
	.chip-link--accent { border-color: var(--color-link); color: var(--color-link); }
	.chip-link--accent:is(:hover, [aria-selected="true"]) { background: var(--color-link); color: var(--color-white); }
	.chip-link.is-active { background: var(--color-link); border-color: var(--color-link); color: var(--color-white); }
	.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-10) var(--space-8); }
	.post-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-9) var(--space-8); }
	.post-card { display: flex; flex-direction: column; }
	.post-card__media { display: block; aspect-ratio: 25 / 16; background: var(--color-panel); border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
	.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
	.post-card__media--empty, .blog-featured__media.post-card__media--empty { background: linear-gradient(135deg, var(--color-panel), oklch(0.93 0.03 225)); }
	.post-card__cat { font-size: var(--text-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 9px; }
	.post-card__title { font-size: var(--f-size, var(--text-card-title)); line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 9px; }
	.post-card__excerpt { font-size: var(--text-small); line-height: 1.65; color: var(--color-text-muted); margin-bottom: var(--space-4); }
	.post-card__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid oklch(0.91 0.006 240); font-size: var(--text-micro); color: oklch(0.52 0.02 240); }
	.pagination { margin-top: clamp(40px, 5vw, 60px); }
	.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
	.pagination .page-numbers { display: inline-block; min-width: 40px; height: 40px; line-height: 38px; padding: 0 12px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-small); color: oklch(0.35 0.02 240); }
	.pagination .page-numbers.current { background: var(--color-link); border-color: var(--color-link); color: var(--color-white); }

	.blog-aside { position: sticky; top: calc(var(--sticky-top) + 28px); display: flex; flex-direction: column; gap: 22px; }
	.blog-box { padding: 24px; border-radius: var(--radius-md); }
	.blog-box h3 { font-size: var(--text-card-title); margin-bottom: 18px; }
	.blog-box p { font-size: var(--text-meta); line-height: 1.65; color: var(--color-text-muted); margin-bottom: var(--space-4); }
	.blog-popular li { border-top: 1px solid var(--color-border-soft); }
	.blog-popular a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 13px 0; font-size: var(--text-small); line-height: 1.5; color: oklch(0.28 0.02 240); }
	.blog-popular span { font-family: var(--font-heading); font-weight: var(--font-semibold); color: oklch(0.78 0.06 225); }
	.blog-box--dark { padding: 26px 24px; }
	.blog-box--dark h3 { font-size: var(--text-card-title); margin-bottom: 10px; }
	.blog-box--dark p { color: var(--color-on-dark-muted); margin-bottom: 18px; }
	.blog-newsletter input { background: transparent; border-color: oklch(0.42 0.04 245); color: oklch(0.95 0.01 225); margin-bottom: 10px; font-size: var(--text-meta); }
	.blog-newsletter .btn { width: 100%; text-align: center; padding: 13px; font-size: var(--text-small); }
	.blog-box--panel { background: var(--color-panel); border: 1px solid var(--color-border-soft); }
	.blog-box--panel h3 { margin-bottom: var(--space-2); }
	.blog-box--panel .link-underline { font-size: var(--text-meta); color: inherit; border-bottom-color: var(--color-secondary); }

	/* article */
	/* Right under the sticky header (and the admin bar, which would hide a top: 0 bar). */
	.reading-progress { position: fixed; top: var(--sticky-top); left: 0; right: 0; height: 3px; z-index: 60; }
	.reading-progress span { display: block; height: 100%; width: 0; background: var(--color-link); transition: width 120ms linear; }
	.article-head { max-width: 900px; text-align: center; padding-block: clamp(26px, 4vw, 44px) clamp(28px, 4vw, 38px); }
	.article-head .breadcrumb { justify-content: center; margin-bottom: 22px; }
	.article-head .eyebrow { margin-bottom: 18px; }
	.article-head h1 { font-size: var(--f-size, var(--text-h1-page)); line-height: 1.15; margin-bottom: 22px; text-wrap: pretty; }
	.article-lead { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); max-width: 660px; margin: 0 auto 28px; }
	.article-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; font-size: var(--text-meta); color: var(--color-grey); }
	.article-meta__author { color: oklch(0.28 0.02 240); }
	.article-meta span[aria-hidden] { color: oklch(0.78 0.01 240); }
	.article-cover { max-width: 1200px; }
	.article-cover img { aspect-ratio: 2 / 1; width: 100%; object-fit: cover; border-radius: var(--radius-md); }
	.article-body { max-width: 1200px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; padding-block: clamp(44px, 6vw, 76px) clamp(56px, 7vw, 88px); }
	.article-aside { position: sticky; top: calc(var(--sticky-top) + 28px); }
	.toc__title { font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey); margin-bottom: var(--space-4); }
	.toc__list { display: flex; flex-direction: column; gap: 2px; }
	.toc__list a { display: block; font-size: var(--text-small); line-height: 1.5; color: oklch(0.35 0.02 240); padding: 9px 0 9px 14px; border-left: 2px solid oklch(0.9 0.008 235); transition: color var(--transition-fast), border-color var(--transition-fast); }
	/* Following the reading (reading.js): headings already reached in blue, the current one with a stronger line. */
	.toc__list a:is(:hover, .is-passed) { color: var(--color-link); border-left-color: var(--color-secondary); }
	.toc__list a[aria-current] { border-left-color: var(--color-link); }
	.share { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border-soft); }
	.share__row { display: flex; gap: var(--space-2); }
	.share__row a, .share__row button { width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: 50%; display: grid; place-items: center; font-size: var(--text-micro); color: var(--color-text-muted); }
	.share__row a:hover, .share__row button:hover { border-color: var(--color-secondary); color: var(--color-link); }
	.article-content { max-width: 720px; font-size: var(--text-body); line-height: 1.8; color: oklch(0.28 0.018 240); }
	.article-content > p:first-child { font-size: var(--text-lead); line-height: 1.75; color: oklch(0.24 0.02 240); }
	.article-content h2 { font-size: var(--f-size, var(--text-h2-section)); line-height: 1.25; color: oklch(0.2 0.02 240); margin: 44px 0 16px; }
	.article-content h3, .prose h3 { font-size: var(--f-size, var(--text-card-title)); }
	.article-content p + p { margin-top: 22px; }
	.article-content blockquote { margin: 36px 0; padding: 26px 28px; background: var(--color-panel); border-left: 3px solid var(--color-secondary); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-lead); line-height: 1.55; font-weight: var(--font-medium); letter-spacing: -0.01em; color: oklch(0.22 0.03 245); }
	.article-content img { border-radius: var(--radius-md); }
	.article-content table { width: 100%; border-collapse: collapse; margin: 32px 0; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-small); }
	.article-content th, .article-content td { padding: 14px 18px; border-bottom: 1px solid oklch(0.94 0.005 240); text-align: left; }
	.article-content th { background: var(--color-panel); font-weight: var(--font-medium); color: oklch(0.35 0.02 240); }
	.article-cta { margin-top: 44px; padding: 28px; border-radius: var(--radius-md); }
	.article-cta h3 { font-size: var(--text-title-lg); margin-bottom: 10px; }
	.article-cta p { font-size: var(--text-small); line-height: 1.7; color: var(--color-on-dark-muted); margin-bottom: 22px; }
	.article-author { display: flex; gap: 18px; align-items: flex-start; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--color-border-soft); }
	.article-author img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
	.article-author strong { display: block; font-family: var(--font-heading); font-size: var(--text-card-title); margin-bottom: 5px; }
	.article-author p { font-size: var(--text-small); line-height: 1.7; color: var(--color-text-muted); }
	.article-related { border-top: 1px solid var(--color-border); padding-block: clamp(56px, 7vw, 88px) clamp(72px, 9vw, 110px); }
	.article-related .scroller-head { margin-bottom: var(--space-9); }

	@media (max-width: 999px) {
		.blog-body, .article-body { grid-template-columns: 1fr; }
		.blog-aside { position: static; }
		.article-aside { display: none; }
	}
	@media (max-width: 699px) {
		.post-grid { grid-template-columns: 1fr; }
	}
}

/* ── WooCommerce (theme markup + Woo-owned fragments) ── */
@layer woo {
	/* shop frame */
	.shop-head { border-bottom: 1px solid var(--color-border); }
	.shop-head .container { padding-block: 30px clamp(30px, 4vw, 44px); }
	.shop-head h1 { font-size: var(--f-size, var(--text-h1-page)); margin-bottom: var(--space-3); }
	.shop-lead { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); max-width: 620px; }
	.shop-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 4vw, 48px) clamp(72px, 9vw, 110px); }
	.shop-aside { position: sticky; top: calc(var(--sticky-top) + var(--space-8)); }

	/* filters */
	.filters-toggle { display: none; }
	.filters-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
	.filters-title { font-family: var(--font-heading); font-size: var(--text-card-title); font-weight: var(--font-semibold); letter-spacing: -0.01em; }
	.filters-clear { font-size: var(--text-meta); color: var(--color-link); }
	.filters-clear:hover { text-decoration: underline; }
	.filters-group { border: 0; border-top: 1px solid var(--color-border); padding: var(--space-5) 0; margin: 0; display: grid; gap: 12px; }
	.filters-group legend { font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
	.filters-group label { display: flex; align-items: center; gap: 11px; cursor: pointer; color: oklch(0.3 0.02 240); line-height: 1.3; transition: color var(--transition-fast); }
	.filters-group label:is(:hover, :has(:checked)), .filters-group label:is(:hover, :has(:checked)) small { color: var(--color-link); }
	/* Custom checkbox: a native one's border cannot follow the label's hover colour. */
	.filters-group input { appearance: none; flex: none; width: 15px; height: 15px; margin: 0; border: 1px solid oklch(0.78 0.01 240); border-radius: var(--radius-sm); background: var(--color-surface) center / 11px no-repeat; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
	.filters-group label:is(:hover, :has(:checked)) input { border-color: var(--color-link); }
	.filters-group input:checked { background-color: var(--color-link); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5'/%3E%3C/svg%3E"); }
	.filters-group span { flex: 1; }
	.filters-group small { font-size: var(--text-meta); color: oklch(0.62 0.015 240); transition: color var(--transition-fast); }
	.filters-help { margin-top: 26px; background: var(--color-panel); border-radius: 3px; padding: 22px; }
	.filters-help strong { display: block; font-family: var(--font-heading); font-size: var(--text-small); font-weight: var(--font-bold); }
	.filters-help p { font-size: var(--text-meta); color: var(--color-text-muted); margin: var(--space-2) 0 14px; }

	/* toolbar */
	.shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; padding-bottom: 26px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-10); }
	.woocommerce-result-count { font-size: var(--text-small); color: var(--color-text-muted); }
	/* Own chevron: the native one sits flush against the right edge. */
	.woocommerce-ordering select { width: auto; padding: 10px 42px 10px 16px; font-size: var(--text-small); color: var(--color-text-muted); border-color: oklch(0.87 0.006 240); }

	/* grid + card */
	ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 28px; }
	.pcard { display: flex; flex-direction: column; padding: 18px 18px 20px; transition: box-shadow var(--transition-base), border-color var(--transition-base); }
	.pcard:hover { box-shadow: var(--shadow-card-hover); border-color: oklch(0.87 0.02 230); }
	.pcard-media { position: relative; display: block; aspect-ratio: 1; background: var(--color-photo); border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
	.pcard-media img { width: 100%; height: 100%; object-fit: contain; }
	/* Sale and "Újdonság" badges side by side, top-left on the image (puricom_product_badges()). */
	.pcard-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
	.pcard-badge { background: var(--color-accent); color: var(--color-white); font-size: var(--text-micro); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
	.pcard-badge--sale { background: oklch(0.55 0.2 25); }
	.pcard-type { font-size: var(--text-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-2); }
	.pcard-title { font-size: var(--text-card-title); margin-bottom: 7px; }
	.pcard-desc { font-size: var(--text-meta); color: var(--color-text-muted); margin-bottom: var(--space-4); }
	.pcard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); }
	.pcard-foot .price { margin-right: auto; }
	.price { font-family: var(--font-heading); font-weight: var(--font-semibold); font-size: var(--text-ui); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
	.price del { font-family: var(--font-primary); font-weight: var(--font-regular); font-size: var(--text-meta); color: oklch(0.6 0.015 240); }
	.price ins { text-decoration: none; color: oklch(0.55 0.2 25); }
	.pcard .btn--sm { padding: 9px 16px; font-size: var(--text-meta); }
	/* Woo appends this link after an AJAX add; it expands in instead of popping. */
	.pcard .added_to_cart { font-size: var(--text-micro); color: var(--color-link); white-space: nowrap; overflow: hidden; animation: pcard-cartlink 280ms ease; }
	.pcard .added_to_cart:hover { text-decoration: underline; }
	@keyframes pcard-cartlink { from { opacity: 0; max-width: 0; } to { opacity: 1; max-width: 180px; } }
	@media (prefers-reduced-motion: reduce) { .pcard .added_to_cart { animation: none; } }
	/* Woo's add-to-cart.js (and shop.js on the product page) toggles .loading while the AJAX request runs. */
	:is(.add_to_cart_button, .single_add_to_cart_button).loading::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: 8px; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: puricom-spin 600ms linear infinite; }
	@media (prefers-reduced-motion: reduce) {
		:is(.add_to_cart_button, .single_add_to_cart_button).loading { opacity: 0.65; }
		:is(.add_to_cart_button, .single_add_to_cart_button).loading::after { content: none; }
	}
	@keyframes puricom-spin { to { transform: rotate(360deg); } }
	.shop-empty { padding: 90px 0; text-align: center; }
	.shop-empty h2 { font-size: var(--text-h2-section); margin-bottom: var(--space-3); }
	.shop-empty p:not(.eyebrow) { color: var(--color-text-muted); }
	/* Empty cart: an icon above the heading, and air before the button. */
	.shop-empty__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-6); border-radius: 50%; background: var(--color-panel); color: var(--color-link); }
	.shop-empty > .btn { margin-top: var(--space-7); }
	.error-page .eyebrow { font-size: var(--text-h3); }
	.error-page h1 { margin-bottom: var(--space-5); }
	.woocommerce-pagination { margin-top: var(--space-12); }
	.woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
	.woocommerce-pagination li .page-numbers { display: inline-block; min-width: 40px; height: 40px; line-height: 38px; padding: 0 12px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-small); color: oklch(0.35 0.02 240); }
	.woocommerce-pagination li .page-numbers.current { background: var(--color-link); color: var(--color-white); border-color: var(--color-link); }

	/* notices */
	.woocommerce-notices-wrapper:empty { display: none; }
	.woocommerce-message, .woocommerce-info, .woocommerce-error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-5); font-size: var(--text-small); background: var(--color-panel); border-left: 3px solid var(--color-accent); }
	.woocommerce-error { border-left-color: oklch(0.55 0.2 25); }
	.woocommerce-info .button { margin-left: var(--space-3); color: var(--color-link); }
	/* Toasts: the success notice and the checkout's submit errors slide in top-right (below the sticky
	   header) and fade out on their own; hover pauses them. Being fixed, shop.js's scroll_to_notices
	   wrapper skips them, so a failed checkout no longer scrolls the page up; the errors also stay
	   inline under the fields, and each toast line links to its field. */
	.woocommerce-message, .woocommerce-NoticeGroup-checkout {
		--toast-shift: -16px;
		position: fixed; z-index: 70; right: var(--space-5); top: calc(var(--sticky-top) + var(--space-5)); width: min(420px, calc(100vw - 2 * var(--space-4)));
		margin: 0; box-shadow: var(--shadow-md);
		animation: notice-toast var(--toast-duration, 6s) ease both;
	}
	.woocommerce-message { padding: var(--space-4) var(--space-5); background: var(--color-surface); }
	.woocommerce-NoticeGroup-checkout { --toast-duration: 9s; }
	.woocommerce-NoticeGroup-checkout .woocommerce-error { margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface); }
	.woocommerce-NoticeGroup-checkout li + li { margin-top: var(--space-2); }
	.woocommerce-NoticeGroup-checkout a:hover { color: var(--color-link); }
	:is(.woocommerce-message, .woocommerce-NoticeGroup-checkout):is(:hover, :has(:focus-visible)) { animation-play-state: paused; }
	.woocommerce-message:focus { outline: none; }
	.woocommerce-message a.button:not(.btn) { display: block; width: fit-content; margin-top: var(--space-2); padding: 0; background: none; font-size: var(--text-meta); color: var(--color-link); border-bottom: 1px solid currentColor; border-radius: 0; }
	.woocommerce-message a.button:not(.btn):hover { background: none; color: var(--color-link-hover); }
	@keyframes notice-toast {
		from { opacity: 0; transform: translateY(var(--toast-shift)); }
		6%, 88% { opacity: 1; transform: none; }
		to { opacity: 0; visibility: hidden; }
	}
	@media (max-width: 600px) { .woocommerce-message, .woocommerce-NoticeGroup-checkout { right: var(--space-4); top: calc(var(--sticky-top) + var(--space-4)); } }
	@media (prefers-reduced-motion: reduce) { .woocommerce-message, .woocommerce-NoticeGroup-checkout { --toast-shift: 0; } }

	/* single product */
	.product-page .breadcrumb { padding-top: var(--space-5); margin-bottom: 0; font-size: var(--text-small); }
	.product-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: var(--space-7) clamp(56px, 7vw, 88px); }
	.product-gallery { position: relative; }
	.product-gallery .pcard-badges { z-index: 2; top: 18px; left: 18px; }
	.woocommerce-product-gallery { position: relative; }
	.woocommerce-product-gallery__wrapper { margin: 0; }
	.woocommerce-product-gallery__image { background: var(--color-photo); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; }
	.woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: contain; }
	.woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
	.woocommerce-product-gallery .flex-control-thumbs li { aspect-ratio: 1; background: var(--color-photo); border: 1.5px solid oklch(0.9 0.008 235); border-radius: 3px; overflow: hidden; cursor: pointer; }
	.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: contain; opacity: 1; }
	.woocommerce-product-gallery .flex-control-thumbs img.flex-active { outline: 1.5px solid var(--color-link); outline-offset: -1.5px; }
	.woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); display: grid; place-items: center; }
	.product-summary .pcard-type { margin-bottom: var(--space-3); }
	.product-summary .product_title { font-size: var(--f-size, var(--text-h1-page)); line-height: 1.1; margin-bottom: var(--space-4); }
	.woocommerce-product-details__short-description { font-size: var(--text-lead); line-height: 1.7; color: var(--color-text-muted); max-width: 520px; margin-bottom: 28px; }
	.product-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 26px; border-bottom: 1px solid var(--color-border); margin-bottom: 26px; }
	.product-summary .price { font-size: var(--text-stat); letter-spacing: -0.02em; }
	.product-summary .price del { font-size: var(--text-ui); }
	.product-price-note { font-size: var(--text-meta); color: var(--color-grey); }
	form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
	.qty-box { position: relative; display: flex; align-items: center; background: var(--color-surface); border: 1px solid oklch(0.87 0.006 240); border-radius: var(--radius-sm); transition: border-color var(--transition-base); }
	/* Product page in-cart sync (shop.js): a sliding bar while pending, a link-blue border once saved. */
	form.cart[aria-busy="true"] .qty-box::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-link), transparent) no-repeat; background-size: 50% 100%; animation: qty-sync 900ms linear infinite; }
	.qty-box.is-synced { border-color: var(--color-link); }
	@keyframes qty-sync { from { background-position: -100% 0; } to { background-position: 200% 0; } }
	@media (prefers-reduced-motion: reduce) { form.cart[aria-busy="true"] .qty-box::after { animation: none; background: var(--color-link); } }
	.qty-btn { width: 46px; align-self: stretch; font-size: var(--text-body); color: var(--color-text-muted); }
	.qty-btn:hover { background: var(--color-panel); }
	.qty-box input.qty { width: 44px; text-align: center; border: 0; background: none; padding: 0; appearance: textfield; }
	.qty-box input.qty::-webkit-inner-spin-button, .qty-box input.qty::-webkit-outer-spin-button { appearance: none; margin: 0; }
	form.cart .single_add_to_cart_button { flex: 1 1 180px; text-align: center; --btn-bg: var(--color-link); --btn-bg-hover: var(--color-link-hover); }
	/* In-cart state (single-product/add-to-cart/simple.php + shop.js): the button becomes a cart link. */
	.product-in-cart { display: none; flex: 1 1 180px; --btn-bg: var(--color-surface); }
	form.cart.is-in-cart .product-in-cart { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
	form.cart.is-in-cart .single_add_to_cart_button { display: none; }
	.product-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: var(--text-meta); color: oklch(0.48 0.02 240); }
	.product-trust .stock { margin: 0; color: inherit; }
	.product-trust .out-of-stock { color: oklch(0.55 0.2 25); }

	.product-cross { border-block: 1px solid var(--color-border-soft); padding-block: clamp(52px, 7vw, 72px); }
	.product-specs { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-block: clamp(56px, 7vw, 88px); }
	.product-specs-intro h2 { font-size: var(--f-size, var(--text-h2-section)); margin-top: 10px; }
	.product-description h3 { font-size: var(--text-card-title); margin: var(--space-8) 0 var(--space-3); }
	.product-description table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
	.product-description td { padding: 15px 0; border-bottom: 1px solid oklch(0.91 0.006 240); vertical-align: top; }
	.product-description td:first-child { color: oklch(0.48 0.02 240); width: 40%; }
	.product-description td:last-child { text-align: right; }
	.product-related { border-top: 1px solid var(--color-border); padding-block: clamp(56px, 7vw, 80px) clamp(72px, 9vw, 110px); }

	/* scroller */
	.scroller-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 34px; }
	.scroller-head .eyebrow { font-size: var(--text-micro); letter-spacing: 0.12em; margin-bottom: 10px; }
	.scroller-head h2 { font-size: var(--f-size, var(--text-h2-section)); }
	.scroller-head > :first-child { flex: 1 1 280px; }
	.scroller-nav { display: flex; gap: 10px; }
	.scroller.is-static .scroller-nav, .scroller.is-static .scroller-bar { display: none; }
	.scroller-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--color-link); color: var(--color-link); background: var(--color-surface); transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
	.scroller-nav button:hover:not(:disabled) { background: var(--color-link); color: var(--color-white); transform: scale(1.07); }
	.scroller-nav button:disabled { border-color: oklch(0.86 0.008 240); color: oklch(0.75 0.01 240); background: transparent; cursor: default; }
	.scroller .scroller-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 0 10px; scrollbar-width: none; }
	.scroller-track::-webkit-scrollbar { display: none; }
	.scroller-track > li { flex: 0 0 clamp(248px, 78vw, 296px); scroll-snap-align: start; }
	.scroller--compact .scroller-track { gap: 20px; }
	.scroller--compact .scroller-track > li { flex-basis: clamp(248px, 78vw, 296px); }
	.scroller-bar { margin-top: 22px; height: 3px; background: oklch(0.9 0.008 235); border-radius: 2px; overflow: hidden; }
	.scroller-bar span { display: block; height: 100%; width: 30%; background: var(--color-link); border-radius: 2px; transition: width var(--transition-fast), margin-left var(--transition-fast); }
	.mini { display: flex; gap: var(--space-4); align-items: center; padding: 14px; }
	.mini-media { flex: 0 0 76px; height: 76px; background: var(--color-photo); border-radius: 3px; overflow: hidden; }
	.mini-media img { width: 100%; height: 100%; object-fit: contain; }
	.mini-body { min-width: 0; }
	.mini-title { display: block; font-family: var(--font-heading); font-size: var(--text-small); font-weight: var(--font-semibold); letter-spacing: -0.01em; margin-bottom: 4px; }
	.mini-note { font-size: var(--text-micro); color: var(--color-grey); margin-bottom: var(--space-2); }
	.mini-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
	.mini-foot .price { font-size: var(--text-small); white-space: nowrap; }
	.mini .btn--sm { padding: 6px 12px; font-size: var(--text-micro); }
	.mini .added_to_cart, .mini-in-cart, .mini.is-in-cart .mini-add { display: none; }
	.mini.is-in-cart { border-color: oklch(0.82 0.05 224); }
	.mini.is-in-cart .mini-in-cart { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-micro); color: var(--color-link); }

	@media (max-width: 899px) {
		.shop-body { grid-template-columns: 1fr; }
		.shop-aside { position: static; }
		.filters-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; border: 1px solid oklch(0.89 0.006 240); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; list-style: none; }
		.filters-toggle::-webkit-details-marker { display: none; }
		.filters-toggle svg { transition: transform var(--transition-base); }
		.filters[open] .filters-toggle svg { transform: rotate(180deg); }
		.filters-head { padding-top: 26px; }
		ul.products { grid-template-columns: 1fr; }
		.product-specs { grid-template-columns: 1fr; }
		.product-description td:last-child { text-align: left; }
	}
}

/* ── WooCommerce: cart, checkout, account (same `woo` layer, second block) ── */
@layer woo {
	/* Woo page frame (cart, checkout, my account) */
	.woo-page { padding-block: 30px clamp(72px, 9vw, 110px); }
	.woo-page > article > h1 { font-size: var(--f-size, var(--text-h1-page)); margin-bottom: clamp(26px, 4vw, 38px); }
	.woo-page .breadcrumb { margin-bottom: var(--space-4); }
	.woo-page .button:not(.btn), .woocommerce .button:not(.btn), .woo-page button[type="submit"]:not(.btn):not(.qty-btn) {
		display: inline-block; background: var(--color-link); color: var(--color-white); font-size: var(--text-body); letter-spacing: 0.02em;
		padding: 16px 32px; border: 1px solid transparent; border-radius: var(--radius-sm); transition: background var(--transition-fast);
	}
	.woo-page .button:not(.btn):hover, .woocommerce .button:not(.btn):hover { background: var(--color-link-hover); }

	/* header on checkout */
	.checkout-steps { display: flex; align-items: center; gap: clamp(10px, 3vw, 20px); font-size: var(--text-meta); color: var(--color-grey); }
	.checkout-steps li + li::before { content: '—'; color: oklch(0.8 0.01 240); margin-right: clamp(10px, 3vw, 20px); }
	.checkout-steps .is-current { color: var(--color-text); font-weight: var(--font-medium); }
	.secure { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: var(--color-link); }
	/* Phone: logo and "Biztonságos" on the first row, the steps centred on their own row below;
	   the logo keeps its size (its max-width: 100% img let the flex item shrink to nothing). */
	body.woocommerce-checkout .site-logo { flex-shrink: 0; }
	@media (max-width: 600px) {
		body.woocommerce-checkout .site-header { flex-wrap: wrap; row-gap: var(--space-3); }
		.checkout-steps { order: 1; flex-basis: 100%; justify-content: center; }
	}
	body.woocommerce-checkout .site-header { border-bottom: 1px solid var(--color-border-soft); }

	/* cart */
	.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 56px); align-items: start; }
	.cart-head { display: flex; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey); }
	.cart-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border-soft); }
	.cart-line__media { aspect-ratio: 1; background: var(--color-photo); border-radius: 3px; overflow: hidden; }
	.cart-line__media img { width: 100%; height: 100%; object-fit: contain; }
	.cart-line__name { display: block; font-family: var(--font-heading); font-size: var(--text-card-title); font-weight: var(--font-semibold); letter-spacing: -0.01em; margin-bottom: 6px; }
	.cart-line__meta { font-size: var(--text-meta); color: var(--color-grey); margin-bottom: 14px; }
	.cart-line__meta .amount { color: inherit; }
	.cart-line__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
	.cart-line .qty-box { border-color: oklch(0.88 0.006 240); }
	.cart-line .qty-btn { width: 40px; height: 40px; font-size: var(--text-body); }
	.cart-line__remove { font-size: var(--text-meta); color: oklch(0.55 0.02 240); }
	.cart-line__remove:hover { color: oklch(0.55 0.2 25); }
	.cart-line__total { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--font-semibold); white-space: nowrap; text-align: right; }
	.cart-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: 26px; }
	.cart-continue { display: flex; align-items: center; gap: 9px; font-size: var(--text-small); color: var(--color-link); }
	/* Flex item text carries the underline; the arrow icon stays clean. */
	.cart-continue:hover { text-decoration: underline; }
	.cart-coupon-row, .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
	.js .cart-update { display: none; }
	.cart-summary { padding: 26px; position: sticky; top: calc(var(--sticky-top) + var(--space-8)); }
	.cart-summary h2 { font-size: var(--text-card-title); margin-bottom: 22px; }
	.cart-sums, .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
	.cart-sums tr, .woocommerce-checkout-review-order-table tfoot tr { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6.5px 0; font-size: var(--text-small); }
	.cart-sums th, .woocommerce-checkout-review-order-table tfoot th { font-weight: var(--font-regular); color: var(--color-text-muted); text-align: left; }
	.cart-sums td, .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
	/* Coupon field row in the cart summary, set off by a separator above. */
	:is(.cart-sums, .woocommerce-checkout-review-order-table) .cart-coupon { border-top: 1px solid var(--color-border-soft); margin-top: 11px; padding-top: var(--space-4); }
	.cart-coupon td { flex: 1; }
	.coupon .input-text { flex: 1; min-width: 0; padding: 12px 14px; font-size: var(--text-small); }
	.coupon-error-notice { flex-basis: 100%; font-size: var(--text-meta); color: oklch(0.55 0.2 25); text-align: left; }
	/* Coupon code tag with its × remove button (puricom_coupon_label()). */
	.coupon-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 4px 2px 10px; border: 1px dashed var(--color-link); border-radius: var(--radius-full); font-size: var(--text-micro); font-weight: var(--font-semibold); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: var(--color-link); }
	/* Trim the line box to the caps so the (all-caps) code centres optically next to the × button. */
	.coupon-tag span { text-box: trim-both cap alphabetic; }
	.woocommerce-remove-coupon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; transition: background var(--transition-fast), color var(--transition-fast); }
	.woocommerce-remove-coupon:hover, .woocommerce-remove-coupon:focus-visible { background: oklch(0.55 0.2 25); color: var(--color-on-dark); }
	.cart-sums .order-total, .woocommerce-checkout-review-order-table .order-total { border-top: 1px solid var(--color-border-soft); margin-top: 11px; padding-top: var(--space-5); align-items: baseline; }
	.cart-sums .order-total th, .woocommerce-checkout-review-order-table .order-total th { color: var(--color-text); }
	.cart-sums .order-total .amount, .woocommerce-checkout-review-order-table .order-total .amount { font-family: var(--font-heading); font-size: var(--text-stat); font-weight: var(--font-semibold); letter-spacing: -0.02em; }
	.woocommerce-shipping-methods { display: flex; flex-direction: column; gap: 9px; }
	.woocommerce-shipping-methods li { display: flex; align-items: center; gap: 11px; font-size: var(--text-small); }
	.woocommerce-shipping-methods label { flex: 1; display: flex; justify-content: space-between; gap: var(--space-3); }
	.woocommerce-shipping-methods input { accent-color: var(--color-link); margin: 0; }
	.woocommerce-shipping-methods li:has(:checked) label { color: var(--color-link); }
	.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; }
	.woocommerce-shipping-totals td { text-align: left; }
	.woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: var(--text-meta); color: var(--color-grey); margin-top: var(--space-2); }
	.shipping-calculator-button { color: var(--color-link); }
	.cart-freeship { font-size: var(--text-meta); color: var(--color-grey); margin: 0 0 22px; }
	/* .button: outweighs the generic .woo-page .button:not(.btn) inline-block. */
	.wc-proceed-to-checkout .checkout-button.button { display: flex; justify-content: center; align-items: center; gap: 10px; }
	.checkout-button svg, .woocommerce-form-login__submit svg { transition: transform var(--transition-fast); }
	.checkout-button:hover svg, .woocommerce-form-login__submit:hover svg { transform: translateX(3px); }
	.cart-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; font-size: var(--text-meta); color: oklch(0.48 0.02 240); }
	.cart-trust li { display: flex; align-items: center; gap: 9px; }
	.cart-trust li::before { content: ''; width: 15px; height: 15px; flex-shrink: 0; background: currentColor; color: var(--color-link); clip-path: polygon(8% 55%, 20% 42%, 40% 62%, 80% 18%, 92% 30%, 40% 88%); }
	.cart-grid .shop-empty { padding: 72px 0; }

	/* checkout */
	.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(32px, 4vw, 64px); align-items: start; }
	.checkout-main { counter-reset: step; }
	.checkout-step + .checkout-step, .woocommerce-additional-fields { padding-top: var(--space-6); border-top: 1px solid var(--color-border-soft); margin-top: var(--space-7); }
	.checkout-main h3 { display: flex; align-items: center; gap: 12px; font-size: var(--text-card-title); margin-bottom: 18px; }
	.checkout-main h3::before { counter-increment: step; content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-dark); font: 13px/26px var(--font-primary); text-align: center; flex-shrink: 0; }
	.checkout-main h3 .checkbox { display: flex; align-items: center; gap: 11px; font: inherit; }
	/* Checkout toggles (ship elsewhere, company buyer, create account) as switches; the knob is a
	   background circle, so on/off is just a colour + position transition. */
	:is(#ship-to-different-address-checkbox, #billing_is_company, #createaccount) {
		appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: var(--radius-full); cursor: pointer;
		background: oklch(0.8 0.01 240) radial-gradient(circle, var(--color-white) 8px, transparent 8.5px) no-repeat 0 center / 24px 24px;
		transition: background-color var(--transition-base), background-position var(--transition-base);
	}
	:is(#ship-to-different-address-checkbox, #billing_is_company, #createaccount):checked { background-color: var(--color-link); background-position: 100% center; }
	/* In the step heading the switch sits at the end of the row. */
	#ship-to-different-address .checkbox { flex: 1; justify-content: space-between; cursor: pointer; }
	#ship-to-different-address-checkbox { order: 1; }
	/* Two columns: Woo's form-row-first / -last pairs share a row, form-row-wide spans it. */
	.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--space-4); }
	@media (max-width: 600px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } }
	.form-row { margin: 0; }
	.form-row-wide, .notes { grid-column: 1 / -1; }
	.form-row label { display: block; font-size: var(--text-meta); color: var(--color-text-muted); margin-bottom: 7px; }
	.form-row .required { color: inherit; text-decoration: none; }
	.form-row .optional { display: none; }
	.form-row textarea { line-height: 1.6; resize: vertical; }
	/* Company pair only for "Cégként vásárolok" (inc/checkout.php); the server drops its values otherwise. */
	.woocommerce-billing-fields:has(#billing_is_company:not(:checked)) :is(#billing_company_field, #billing_tax_number_field) { display: none; }
	:is(#billing_is_company_field, .create-account) label { display: flex; align-items: center; gap: 11px; margin: 0; font-size: var(--text-small); color: var(--color-text); cursor: pointer; }
	.woocommerce-account-fields { margin-top: 14px; }
	.woocommerce-invalid input, .woocommerce-invalid select { border-color: oklch(0.55 0.2 25); }
	/* Woo's checkout.js prepends the error group into the form (= the grid) and appends an inline message under the field. */
	.checkout-grid > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
	.checkout-inline-error-message { display: block; margin-top: 6px; font-size: var(--text-meta); color: oklch(0.55 0.2 25); }
	.shipping_address { margin-top: 18px; }
	/* Login prompt: a quiet line of text instead of an info bar (the coupon field is in the summary). */
	.woocommerce-form-login-toggle { margin-bottom: var(--space-6); }
	.woocommerce-form-login-toggle .woocommerce-info { margin: 0; padding: 0; background: none; border: 0; color: var(--color-text-muted); }
	.woocommerce-form-login-toggle a { color: var(--color-link); }
	.woocommerce-form-login { display: grid; gap: 14px; padding: var(--space-6); margin-bottom: var(--space-8); }
	.woocommerce-form-login .form-row { grid-column: 1 / -1; }
	.woocommerce-form-login .button { padding: 12px 20px; }
	.woocommerce-form-login .clear { display: none; }
	/* Checkout login (opened from the prompt): a compact card — intro, username | password on one
	   row, the button with "remember me" beside it, the lost-password link last. */
	.woocommerce-checkout form.woocommerce-form-login { grid-template-columns: 1fr 1fr; gap: 14px var(--space-4); max-width: 760px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
	.woocommerce-checkout .woocommerce-form-login > p:first-child { grid-column: 1 / -1; font-size: var(--text-small); color: var(--color-text-muted); }
	.woocommerce-checkout .woocommerce-form-login :is(.form-row-first, .form-row-last) { grid-column: auto; }
	.woocommerce-checkout .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; align-items: center; gap: var(--space-5); }
	.woocommerce-checkout .woocommerce-form-login__submit { order: -1; }
	.woocommerce-checkout .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--space-2); margin: 0; cursor: pointer; }
	.woocommerce-checkout .woocommerce-form-login__rememberme input { margin: 0; accent-color: var(--color-link); cursor: pointer; }
	.woocommerce-checkout .woocommerce-form-login .lost_password { grid-column: 1 / -1; font-size: var(--text-meta); }
	@media (max-width: 600px) { .woocommerce-checkout form.woocommerce-form-login { grid-template-columns: 1fr; } }

	.checkout-summary { padding: 26px; }
	.checkout-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 22px; }
	.checkout-summary__head h3 { font-size: var(--text-card-title); }
	.checkout-summary__head a { font-size: var(--text-meta); color: var(--color-link); }
	.woocommerce-checkout-review-order-table tbody tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: var(--space-4); }
	.woocommerce-checkout-review-order-table tbody { display: block; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-soft); margin-bottom: 14px; }
	.woocommerce-checkout-review-order-table tbody td.product-name { display: contents; }
	.review-thumb { width: 56px; height: 56px; background: var(--color-photo); border-radius: 3px; overflow: hidden; }
	.review-thumb img { width: 100%; height: 100%; object-fit: contain; }
	.review-name { display: block; font-size: var(--text-small); font-weight: var(--font-medium); margin-bottom: 3px; }
	.review-qty { font-size: var(--text-micro); color: var(--color-grey); }
	.woocommerce-checkout-review-order-table .product-total { font-family: var(--font-heading); font-size: var(--text-small); font-weight: var(--font-semibold); white-space: nowrap; }
	.review-shipping-title th { font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding-top: var(--space-2); }
	.woocommerce-checkout-review-order-table tfoot { display: block; }
	#payment { margin-top: var(--space-5); border-top: 1px solid var(--color-border-soft); padding-top: var(--space-5); }
	.wc_payment_methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
	.wc_payment_method { border: 1px solid var(--color-border); border-radius: 3px; padding: 16px; transition: border-color var(--transition-fast), background var(--transition-fast); }
	.wc_payment_method:has(:checked) { border-color: var(--color-link); background: oklch(0.972 0.016 225); }
	.wc_payment_method > label { display: flex; align-items: center; gap: 12px; font-size: var(--text-body); font-weight: var(--font-medium); cursor: pointer; }
	.wc_payment_method .input-radio { position: absolute; opacity: 0; }
	.wc_payment_method > label::before { content: ''; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid oklch(0.75 0.01 240); flex-shrink: 0; }
	.wc_payment_method:has(:checked) > label::before { border-color: var(--color-link); background: radial-gradient(var(--color-link) 45%, transparent 50%); }
	.payment_box { font-size: var(--text-meta); color: oklch(0.48 0.02 240); padding: 8px 0 0 27px; }
	.payment_box p { margin: 0; }
	.woocommerce-terms-and-conditions-wrapper { font-size: var(--text-meta); color: oklch(0.32 0.02 240); margin-bottom: 22px; }
	/* Plain text flow, the checkbox hung in the left padding: Woo's &nbsp; + <abbr>*</abbr> after the
	   text would each become a column in a flex row, here the star simply ends the sentence. */
	.woocommerce-terms-and-conditions-wrapper .checkbox { display: block; position: relative; padding-left: 26px; cursor: pointer; }
	.woocommerce-terms-and-conditions-wrapper input { position: absolute; left: 0; top: 3px; margin: 0; accent-color: var(--color-link); cursor: pointer; }
	.woocommerce-privacy-policy-text { font-size: var(--text-meta); color: var(--color-grey); margin-bottom: var(--space-3); }
	.woocommerce-privacy-policy-text:empty { display: none; } /* the privacy note lives in the terms checkbox text */
	#place_order { width: 100%; font-size: var(--text-ui); padding: 18px 24px; }
	.place-order .woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-wrapper a { color: var(--color-link); }

	/* thank-you */
	.woocommerce-order { display: grid; gap: var(--space-8); }
	.woocommerce-notice--success { font-family: var(--font-heading); font-size: var(--text-title-lg); font-weight: var(--font-semibold); letter-spacing: -0.02em; }
	/* woocommerce/checkout/thankyou.php: details left, a summary card right (on top below 1000px). */
	.thankyou-lead { margin-top: calc(-1 * var(--space-4)); color: var(--color-text-muted); overflow-wrap: anywhere; }
	.thankyou-lead strong { color: var(--color-text); }
	.thankyou-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 3vw, 40px); align-items: start; }
	.thankyou-main { display: grid; gap: var(--space-5); }
	.thankyou-summary { position: sticky; top: calc(var(--sticky-top) + var(--space-8)); padding: 26px; }
	.thankyou-summary__label { font-size: var(--text-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
	.thankyou-summary__number { font-family: var(--font-heading); font-size: var(--text-title-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-5); }
	.thankyou-summary__total { font-family: var(--font-heading); font-size: var(--text-stat); font-weight: var(--font-semibold); line-height: 1.1; }
	.thankyou-summary__meta { margin-top: var(--space-5); font-size: var(--text-small); }
	.thankyou-summary__meta div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft); }
	.thankyou-summary__meta dt { color: var(--color-text-muted); }
	.thankyou-summary__meta dd { margin: 0; text-align: right; }
	@media (max-width: 999px) {
		.thankyou-grid { grid-template-columns: minmax(0, 1fr); }
		.thankyou-summary { position: static; order: -1; }
	}
	.woocommerce-order-details, .woocommerce-customer-details { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 26px; }
	.woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: var(--text-card-title); margin-bottom: var(--space-4); }
	.woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
	.woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 12px 0; border-bottom: 1px solid var(--color-border-soft); text-align: left; }
	.woocommerce-table--order-details td:last-child, .woocommerce-table--order-details th:last-child { text-align: right; }
	.woocommerce-customer-details address { font-style: normal; line-height: 1.7; overflow-wrap: anywhere; } /* long e-mail addresses */
	.woocommerce-customer-details address p { margin: 0; }
	.woocommerce-table--order-details thead th { font-size: var(--text-micro); font-weight: var(--font-regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey); }
	.woocommerce-table--order-details tfoot th { font-weight: var(--font-regular); color: var(--color-text-muted); }
	.woocommerce-table--order-details .product-quantity { font-weight: var(--font-regular); color: var(--color-grey); }
	/* Order total value is wrapped in <strong> by inc/woocommerce.php (Woo gives the rows no class). */
	.woocommerce-table--order-details tfoot strong { font-family: var(--font-heading); font-size: var(--text-ui); font-weight: var(--font-semibold); }
	.woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
	.woocommerce-column { padding: 22px; background: var(--color-panel); border-radius: var(--radius-md); }
	/* Bank transfer details (Woo markup, in the summary card): label left, value right. */
	.woocommerce-bacs-bank-details { margin-top: var(--space-5); padding: var(--space-5); background: var(--color-panel); border-radius: var(--radius-md); }
	.woocommerce-bacs-bank-details h2 { font-size: var(--text-card-title); margin-bottom: var(--space-3); }
	.wc-bacs-bank-details-account-name { font-size: var(--text-small); margin-bottom: var(--space-2); }
	.wc-bacs-bank-details { font-size: var(--text-small); }
	.wc-bacs-bank-details li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6px 0; color: var(--color-text-muted); }
	.wc-bacs-bank-details strong { color: var(--color-text); font-weight: var(--font-semibold); text-align: right; overflow-wrap: anywhere; }

	/* my account */
	.woocommerce-MyAccount-navigation { float: none; width: auto; }
	/* Scoped to the account page: the cart and checkout share the same `.woocommerce` shortcode wrapper. */
	.woocommerce-account.logged-in .woo-page .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
	.woocommerce-account .woo-page .woocommerce > :only-child, .woocommerce-account .woo-page .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; }
	.woocommerce-MyAccount-navigation li { border-top: 1px solid var(--color-border-soft); }
	.woocommerce-MyAccount-navigation a { display: block; padding: 13px 0; font-size: var(--text-small); color: var(--color-text-nav); }
	.woocommerce-MyAccount-navigation .is-active a { color: var(--color-link); font-weight: var(--font-medium); }
	.woocommerce-MyAccount-content { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 26px; font-size: var(--text-small); }
	.woocommerce-MyAccount-content p + p:not(.form-row) { margin-top: var(--space-3); }
	.woocommerce-MyAccount-content h2 { font-size: var(--text-card-title); }
	.account-title { margin-bottom: var(--space-2); }
	.woocommerce-MyAccount-content .account-title { font-size: var(--text-title-lg); }
	.account-lead { color: var(--color-text-muted); margin-bottom: var(--space-6); }
	/* Notices with a Woo .button (email confirmation, "no orders / downloads yet"): text first, small outline button after it. */
	.woo-page :is(.woocommerce-info, .woocommerce-error):has(.button) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
	.woo-page :is(.woocommerce-info, .woocommerce-error) .button:not(.btn) { order: 1; margin: 0; padding: 8px 16px; font-size: var(--text-small); background: none; color: var(--color-link); border-color: currentColor; }
	.woo-page :is(.woocommerce-info, .woocommerce-error) .button:not(.btn):hover { background: var(--color-surface); }

	/* dashboard */
	.account-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-3); }
	.account-tiles a { position: relative; display: block; height: 100%; padding: 20px 44px 20px 20px; background: var(--color-panel); border: 1px solid transparent; border-radius: var(--radius-md); transition: border-color var(--transition-fast); }
	.account-tiles a:hover { border-color: var(--color-link); }
	.account-tiles strong { display: block; font-family: var(--font-heading); font-size: var(--text-ui); font-weight: var(--font-semibold); margin-bottom: var(--space-1); }
	.account-tiles span { font-size: var(--text-meta); color: var(--color-text-muted); }
	.account-tiles svg { position: absolute; right: 18px; top: 22px; color: var(--color-link); transition: transform var(--transition-fast); }
	.account-tiles a:hover svg { transform: translateX(3px); }

	/* orders */
	.account-orders { width: 100%; border-collapse: collapse; }
	.account-orders th { padding: 0 12px 12px; font-size: var(--text-micro); font-weight: var(--font-regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey); text-align: left; }
	.account-orders td { padding: 16px 12px; border-top: 1px solid var(--color-border-soft); vertical-align: middle; }
	.account-orders :is(th, td):first-child { padding-left: 0; }
	.account-orders :is(th, td):last-child { padding-right: 0; text-align: right; }
	.account-orders__order-number a { font-weight: var(--font-semibold); color: var(--color-link); }
	.account-orders__order-total small { display: block; font-size: var(--text-meta); color: var(--color-grey); }
	.account-orders__order-actions { white-space: nowrap; }
	.account-orders__order-actions .btn + .btn { margin-left: var(--space-2); }
	.order-status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-meta); white-space: nowrap; color: var(--status, var(--color-text-muted)); background: color-mix(in oklch, var(--status, var(--color-grey)) 12%, transparent); }
	.order-status--completed { --status: oklch(0.5 0.12 150); }
	.order-status--processing { --status: var(--color-link); }
	.order-status--on-hold, .order-status--pending { --status: oklch(0.55 0.13 65); }
	.order-status--failed { --status: oklch(0.55 0.2 25); }
	.account-pager { display: flex; justify-content: space-between; margin-top: var(--space-5); }

	/* view order: status line, notes; the order + customer details lose their own card inside the account panel */
	.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--color-text-muted); }
	.woocommerce-OrderUpdates { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-8); }
	.woocommerce-OrderUpdate { padding: var(--space-4); background: var(--color-panel); border-radius: var(--radius-md); }
	.woocommerce-OrderUpdate-meta { font-size: var(--text-meta); color: var(--color-grey); }
	.woocommerce-MyAccount-content :is(.woocommerce-order-details, .woocommerce-customer-details) { padding: 0; background: none; border: 0; }
	.woocommerce-MyAccount-content .woocommerce-order-details { margin-bottom: var(--space-8); }
	.order-again { margin-top: var(--space-5); }
	.woo-page .order-again .button:not(.btn) { padding: 10px 18px; font-size: var(--text-small); background: none; color: var(--color-link); border-color: currentColor; }
	.woo-page .order-again .button:not(.btn):hover { background: var(--color-panel); }

	/* addresses */
	.address-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
	.address-card { padding: 22px; background: var(--color-panel); border-radius: var(--radius-md); }
	.address-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
	.address-card address { font-style: normal; line-height: 1.7; }
	.address-card__empty { color: var(--color-grey); }
	.woocommerce-address-fields h2, .woocommerce-MyAccount-content form > h2 { margin-bottom: var(--space-5); }
	.woocommerce-address-fields > p { margin-top: var(--space-6); }

	/* account details */
	.account-form__section + .account-form__section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border-soft); }
	.account-form__section h2 { margin-bottom: var(--space-4); }
	.account-form__section h2 + .form-hint { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
	.account-form__grid, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
	.form-hint { display: block; margin-top: 6px; font-size: var(--text-meta); color: var(--color-grey); }
	.account-form > p:last-of-type { margin-top: var(--space-8); }
	.woo-page .woocommerce-form-login .form-row { display: block; }

	/* Logged-out account pages (login, lost password): one centred column, the login form as a card. */
	.woo-page--auth > article { max-width: 440px; margin-inline: auto; }
	.woo-page--auth > article > h1 { text-align: center; margin-top: clamp(16px, 4vw, 40px); }
	.woo-page--auth .woocommerce-form-login { gap: var(--space-5); padding: clamp(24px, 5vw, 36px); margin-bottom: var(--space-6); }
	.auth-lead { font-size: var(--text-small); color: var(--color-text-muted); }
	.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
	.auth-label-row a { font-size: var(--text-meta); color: var(--color-link); }
	.auth-label-row a:hover, .auth-note a:hover { text-decoration: underline; }
	.auth-remember { display: flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--color-text-muted); cursor: pointer; }
	.auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-link); }
	/* The grid stretches the button; the arrow stays on the label's line. */
	.woocommerce-form-login__submit svg { display: inline-block; vertical-align: -3px; margin-left: 8px; }
	.auth-note { text-align: center; font-size: var(--text-small); color: var(--color-text-muted); }
	.auth-note a { color: var(--color-link); }
	/* Woo's woocommerce.js wraps password inputs in .password-input and appends the show/hide toggle. */
	.password-input { position: relative; display: block; }
	.password-input input { padding-right: 48px; }
	.show-password-input { position: absolute; inset-block: 0; right: 4px; width: 40px; background: var(--color-grey); cursor: pointer; transition: background var(--transition-fast);
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; }
	.show-password-input.display-password { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
	.show-password-input:hover { background: var(--color-link); }

	@media (max-width: 999px) {
		.cart-grid, .checkout-grid, .woocommerce-account.logged-in .woo-page .woocommerce { grid-template-columns: 1fr; }
		.cart-summary { position: static; }
		.cart-line { grid-template-columns: 84px minmax(0, 1fr); }
		.cart-line__total { grid-column: 2; text-align: left; }
		.cart-head span:last-child { display: none; }
	}
	@media (max-width: 600px) {
		/* Orders table: each row becomes a card, cells labelled from data-title. */
		.account-orders thead { display: none; }
		.account-orders tr { display: block; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft); }
		.account-orders td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 6px 0; border: 0; text-align: right; }
		.account-orders td::before { content: attr(data-title); color: var(--color-grey); font-size: var(--text-meta); }
		.account-orders__order-actions::before { content: none; }
		.account-orders__order-actions { justify-content: flex-end; }
		.account-form__grid, .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
	}
}

/* ── Utilities ───────────────────────────────────────── */
@layer utilities {
	.text-primary { color: var(--color-primary); }
	.text-secondary { color: var(--color-secondary); }
	.text-accent { color: var(--color-accent); }
	.text-dark { color: var(--color-text); }

	/* Editor typography receivers: only the element carrying the inline var reacts.
	   The trailing colon keeps -t/-m scoped vars from matching the desktop rule. */
	[style*="--f-family:"] { font-family: var(--f-family); }
	[style*="--f-size:"]   { font-size: var(--f-size); }
	[style*="--f-weight:"] { font-weight: var(--f-weight); }
	[style*="--f-align:"]  { text-align: var(--f-align); align-self: stretch; }
	[style*="--f-color:"]  { color: var(--f-color); }
	[style*="--f-pad:"]    { padding-bottom: var(--f-pad); }
	[style*="--f-max:"]    { max-width: var(--f-max); }
	[style*="--f-list:"] li { margin-bottom: var(--f-list); }
	[style*="--f-style:"]  { font-style: var(--f-style); }
	[style*="--f-deco:"]   { text-decoration: var(--f-deco); }
	/* List marker companion: disc / none / check (brand-colour tick through a mask, so the colour stays a token). */
	[style*="--f-marker:disc"] ul { list-style: disc; }
	[style*="--f-marker:none"] ul, [style*="--f-marker:check"] ul { list-style: none; padding-left: 0; }
	[style*="--f-marker:check"] li { position: relative; padding-left: 1.75em; }
	[style*="--f-marker:check"] li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1em; height: 1em; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }

	@media (max-width: 900px) {
		[style*="--f-family-t:"] { font-family: var(--f-family-t); }
		[style*="--f-size-t:"]   { font-size: var(--f-size-t); }
		[style*="--f-weight-t:"] { font-weight: var(--f-weight-t); }
		[style*="--f-align-t:"]  { text-align: var(--f-align-t); align-self: stretch; }
		[style*="--f-color-t:"]  { color: var(--f-color-t); }
		[style*="--f-pad-t:"]    { padding-bottom: var(--f-pad-t); }
		[style*="--f-max-t:"]    { max-width: var(--f-max-t); }
		[style*="--f-list-t:"] li { margin-bottom: var(--f-list-t); }
		[style*="--f-style-t:"]  { font-style: var(--f-style-t); }
		[style*="--f-deco-t:"]   { text-decoration: var(--f-deco-t); }
		[style*="--f-marker-t:disc"] ul { list-style: disc; }
		[style*="--f-marker-t:none"] ul, [style*="--f-marker-t:check"] ul { list-style: none; padding-left: 0; }
		[style*="--f-marker-t:check"] li { position: relative; padding-left: 1.75em; }
		[style*="--f-marker-t:check"] li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1em; height: 1em; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
	}
	@media (max-width: 600px) {
		[style*="--f-family-m:"] { font-family: var(--f-family-m); }
		[style*="--f-size-m:"]   { font-size: var(--f-size-m); }
		[style*="--f-weight-m:"] { font-weight: var(--f-weight-m); }
		[style*="--f-align-m:"]  { text-align: var(--f-align-m); align-self: stretch; }
		[style*="--f-color-m:"]  { color: var(--f-color-m); }
		[style*="--f-pad-m:"]    { padding-bottom: var(--f-pad-m); }
		[style*="--f-max-m:"]    { max-width: var(--f-max-m); }
		[style*="--f-list-m:"] li { margin-bottom: var(--f-list-m); }
		[style*="--f-style-m:"]  { font-style: var(--f-style-m); }
		[style*="--f-deco-m:"]   { text-decoration: var(--f-deco-m); }
		[style*="--f-marker-m:disc"] ul { list-style: disc; }
		[style*="--f-marker-m:none"] ul, [style*="--f-marker-m:check"] ul { list-style: none; padding-left: 0; }
		[style*="--f-marker-m:check"] li { position: relative; padding-left: 1.75em; }
		[style*="--f-marker-m:check"] li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1em; height: 1em; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
	}
}

/* ── Contact form (Kapcsolat section + the site-wide popup, inc/contact-popup.php) ── */
@layer components {
	.contact-form { padding: clamp(26px, 3.5vw, 40px); }
	.contact-form h2 { font-size: var(--f-size, var(--text-h2-section)); margin-bottom: var(--space-2); }
	.contact-note { font-size: var(--f-size, var(--text-small)); color: var(--color-grey); margin-bottom: var(--space-7); }
	.contact-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-5); font-size: var(--text-small); }
	.contact-msg--ok { background: oklch(0.93 0.06 160); color: oklch(0.3 0.08 160); }
	.contact-msg--err { background: oklch(0.94 0.05 25); color: oklch(0.35 0.12 25); }
	.contact-hp { position: absolute; left: -9999px; }

	/* Steps: one at a time once contact-steps.js marks the form .is-ready (html.js is set before
	   first paint, so until then only the first step shows); without JS they simply stack. */
	.contact-step { border: 0; padding: 0; margin: 0; min-width: 0; }
	html:not(.js) .contact-step + .contact-step { margin-top: var(--space-8); }
	html.js .contact-form:not(.is-ready) .contact-step:not(:first-of-type),
	.contact-form.is-ready .contact-step:not(.is-current) { display: none; }
	.contact-form.is-ready .contact-step.is-current { animation: contact-step-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.contact-form.is-back .contact-step.is-current { --step-from: -24px; }
	@keyframes contact-step-in { from { opacity: 0; transform: translateX(var(--step-from, 24px)); } }
	@media (prefers-reduced-motion: reduce) { .contact-form.is-ready .contact-step.is-current { animation: none; } }
	.contact-step__title { padding: 0; margin-bottom: var(--space-5); font-family: var(--font-heading); font-size: var(--text-title-lg); font-weight: var(--font-semibold); line-height: 1.2; letter-spacing: -0.02em; }
	.contact-step__hint { font-size: var(--text-meta); color: var(--color-text-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
	.contact-field { display: block; }

	/* margin-top: air under the heading when there is no note (with one, the margins collapse). */
	.contact-progress { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; font-size: var(--text-meta); color: var(--color-grey); }
	.contact-progress__bar { flex: 1; height: 3px; border-radius: var(--radius-full); background: var(--color-border-soft); overflow: hidden; }
	.contact-progress__bar span { display: block; width: 25%; height: 100%; background: var(--color-link); transition: width var(--transition-base); }
	html:not(.js) :is(.contact-progress, .contact-back, .contact-next) { display: none; }

	.contact-topics { display: flex; flex-wrap: wrap; gap: 9px; }
	.chip { position: relative; }
	.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } /* the invisible radio covers the chip, and the UA sheet gives radios the default cursor */
	.chip span { display: inline-block; padding: 10px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--text-meta); color: oklch(0.35 0.02 240); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
	.chip:hover input:not(:checked) + span { border-color: var(--color-link); color: var(--color-link); } /* like .chip-link */
	.chip input:checked + span { background: var(--color-link); border-color: var(--color-link); color: var(--color-white); }
	/* Stepped form: the chosen chip says "click to go on" (a click on it advances, see contact-steps.js). */
	html.js .chip input:checked + span::after { content: '→'; display: inline-block; margin-left: var(--space-2); transition: transform var(--transition-fast); }
	html.js .chip:hover input:checked + span::after { transform: translateX(3px); }
	.chip input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
	.contact-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
	.contact-fields label { display: block; }
	.contact-fields label > span { display: block; font-size: var(--text-meta); color: var(--color-text-muted); margin-bottom: 7px; }
	.contact-field textarea { resize: vertical; line-height: 1.6; }
	.contact-consent { display: flex; gap: 11px; align-items: flex-start; margin-top: var(--space-5); font-size: var(--text-meta); color: oklch(0.35 0.02 240); cursor: pointer; }
	.contact-consent input { margin: 3px 0 0; accent-color: var(--color-link); cursor: pointer; } /* the UA sheet resets it on checkboxes */
	/* The label text is a span, not a p: give its link the site's inline-link look. */
	.contact-consent a { color: var(--color-link); transition: color var(--transition-fast); }
	.contact-consent a:hover { color: var(--color-link-hover); }
	.contact-step__nav { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
	.contact-back { font-size: var(--text-small); color: var(--color-text-muted); transition: color var(--transition-fast); }
	.contact-back:hover { color: var(--color-link); }
	/* Next and submit: the cart's checkout-button look; the arrow nudges, the paper plane takes off. */
	.contact-next, .contact-submit { flex: 1; display: flex; justify-content: center; align-items: center; gap: 10px; --btn-bg: var(--color-link); --btn-bg-hover: var(--color-link-hover); --btn-font-size: var(--text-body); }
	.contact-next:disabled { opacity: 0.45; cursor: not-allowed; --btn-bg-hover: var(--color-link); }
	:is(.contact-next, .contact-submit) svg { flex-shrink: 0; transition: transform var(--transition-fast); }
	.contact-next:not(:disabled):is(:hover, :focus-visible) svg { transform: translateX(3px); }
	.contact-submit:is(:hover, :focus-visible) svg { transform: translate(3px, -3px); }
	.contact-form.is-sent :is(.contact-progress, .contact-step) { display: none; } /* popup: after an AJAX send only the thank-you shows */
	/* Sending (contact-steps.js): the step dims and goes inert, the paper plane turns into a spinner. */
	.contact-form[aria-busy="true"] .contact-step { opacity: 0.6; pointer-events: none; transition: opacity var(--transition-base); }
	.contact-submit.is-loading svg { display: none; }
	.contact-submit.is-loading::after { content: ''; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: contact-spin 0.7s linear infinite; }
	@keyframes contact-spin { to { transform: rotate(360deg); } }
	/* Phone: the button takes the full row, "Vissza" goes under it. */
	@media (max-width: 600px) {
		.contact-step__nav { flex-direction: column-reverse; align-items: stretch; gap: var(--space-4); }
		.contact-next, .contact-submit { padding-inline: var(--space-4); }
	}

	/* The popup: a native modal <dialog> holding the same form card; no padding of its own,
	   so a click on the element itself is a click on the backdrop (contact-steps.js closes). */
	.contact-dialog { width: min(640px, calc(100% - 2 * var(--space-4))); max-height: calc(100dvh - 2 * var(--space-4)); padding: 0; border: 0; background: none; overflow: visible; }
	.contact-dialog[open] { animation: contact-dialog-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.contact-dialog::backdrop { background: oklch(0.2 0.03 250 / 0.55); }
	.contact-dialog .contact-form { max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto; box-shadow: var(--shadow-xl); }
	.contact-dialog .contact-form h2 { padding-right: var(--space-10); }
	.contact-dialog__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast); }
	.contact-dialog__close:hover { background: var(--color-panel); color: var(--color-text); }
	html:has(.contact-dialog[open]) { overflow: hidden; }
	@keyframes contact-dialog-in { from { opacity: 0; transform: translateY(12px); } }
	@media (prefers-reduced-motion: reduce) { .contact-dialog[open] { animation: none; } }
}