/*
Theme Name:  Ravestate
Description: A ravestate.eu webshop Blocksy child theme-je. Fekete-fehér rave-esztétika Unbounded/Inter/Plex Mono tipóval és UV-lila fény-akcentussal.
Template:    blocksy
Author:      Ravestate
Version:     0.9.25
Text Domain: ravestate
*/

/* ==========================================================================
   1. Betűtípusok (self-hosted, latin + latin-ext)
   ========================================================================== */

@font-face {
	font-family: 'Unbounded';
	src: url('assets/fonts/unbounded-v12-latin_latin-ext-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Unbounded';
	src: url('assets/fonts/unbounded-v12-latin_latin-ext-800.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('assets/fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('assets/fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Bebas Neue';
	src: url('assets/fonts/bebas-neue-v16-latin_latin-ext-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

/* ==========================================================================
   2. Design tokenek
   ========================================================================== */

:root {
	--rs-ink: #050505;
	--rs-white: #ffffff;
	--rs-grey-050: #fafafa;
	--rs-grey-100: #f5f5f5;
	--rs-grey-200: #e6e6e6;
	--rs-grey-700: #333333;
	/* Akcentusok — a hero-fotó (ravestate_homepage1.jpg) fényeiből:
	   parázs-vörös a rim-lightból, klub-kék a színpadi ellenfényből. */
	--rs-accent: #c9402a;          /* parázs — interaktív akcens, badge, glow */
	--rs-accent-deep: #99301c;     /* szöveg-szintű parázs fehér alapon (AA) */
	--rs-accent-bright: #e8785c;   /* parázs sötét (ink) háttéren */
	--rs-accent-glow: rgba(201, 64, 42, 0.45);
	--rs-club: #0a86c4;            /* klub-kék — takarékos ellenpont */
	--rs-club-bright: #4db9ff;     /* klub-kék sötét háttéren */
	--rs-font-display: 'Unbounded', 'Inter', sans-serif;
	--rs-font-body: 'Inter', system-ui, sans-serif;
	--rs-font-mono: 'IBM Plex Mono', monospace;
	/* Kondenzált kiskapitális a fekete menüsávhoz (FRDV-minta) — csak ott,
	   nem általános display-tipó. */
	--rs-font-nav: 'Bebas Neue', 'Unbounded', sans-serif;
}

/* Blocksy saját változóinak felülírása — html:root, hogy a Blocksy KÉSŐBB
   betöltődő inline :root-blokkját specificitással verjük, ne sorrenddel. */
html:root {
	--theme-font-family: var(--rs-font-body);
	--theme-text-color: var(--rs-grey-700);
	--theme-headings-color: var(--rs-ink);
	--theme-link-initial-color: var(--rs-ink);
	--theme-link-hover-color: var(--rs-accent-deep);
	--theme-palette-color-1: var(--rs-ink);
	--theme-palette-color-2: var(--rs-grey-700);
	--theme-button-background-initial-color: var(--rs-ink);
	--theme-button-background-hover-color: var(--rs-accent-deep);
	--theme-button-text-initial-color: var(--rs-white);
	--theme-button-text-hover-color: var(--rs-white);
	--theme-form-field-border-focus-color: var(--rs-accent);
}

/* ==========================================================================
   3. Alap-tipográfia
   ========================================================================== */

body {
	font-family: var(--rs-font-body);
}

h1, h2, .rs-display {
	font-family: var(--rs-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-weight: 800; }
h3, h4, h5, h6 { font-family: var(--rs-font-body); font-weight: 700; }

.rs-eyebrow,
.rs-mono {
	font-family: var(--rs-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Gombok: szögletes, fekete; fókusz és hover UV-val */
:where(.button, .wp-element-button, .wp-block-button__link,
	.woocommerce a.button, .woocommerce button.button,
	.single_add_to_cart_button) {
	border-radius: 0;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

:where(.button, .wp-element-button, .wp-block-button__link):hover {
	box-shadow: 0 0 24px var(--rs-accent-glow);
}

:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: 2px;
}

::selection {
	background: var(--rs-club);
	color: var(--rs-white);
}

/* ==========================================================================
   4. Announcement-sáv (functions.php: wp_body_open) — statikus, középre
   igazított, halvány elválasztóvonallal (FRDV-minta).
   ========================================================================== */

.rs-announcement {
	background: var(--rs-white);
	color: var(--rs-grey-700);
	font-family: var(--rs-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0.7em 1rem;
	border-bottom: 1px solid var(--rs-grey-200);
}

.rs-announcement__track { display: inline-block; }

.rs-announcement b { color: var(--rs-accent-deep); font-weight: 600; }

/* ==========================================================================
   5. Hero — a sötét klubtér, UV-fénnyel
   ========================================================================== */

.rs-hero {
	background:
		linear-gradient(88deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.88) 20%, rgba(5, 5, 5, 0.66) 36%, rgba(5, 5, 5, 0.3) 50%, rgba(5, 5, 5, 0.08) 62%, rgba(5, 5, 5, 0) 76%, rgba(5, 5, 5, 0.14) 100%),
		url('assets/img/hero.jpg?v=3') center / cover no-repeat,
		var(--rs-ink);
	color: var(--rs-white);
	padding: clamp(5rem, 12vw, 9.5rem) 1.5rem clamp(4rem, 10vw, 8rem);
}

/* WebP a támogató böngészőknek (246 KB → 99 KB). Ha az image-set() ismeretlen,
   ez a deklaráció érvénytelen, és a fenti JPEG marad — nincs teendő.
   A `?v=` KÖTELEZŐ: az nginx 30 napos `max-age`-dzsel szolgálja ki a képeket,
   és a fájlnév nem változik hero-cserénél — verzió nélkül a visszatérő
   látogatók hetekig a RÉGI fotót látnák. Hero-cserekor emeld (a preload
   `functions.php`-ban lévő URL-jén is!). */
.rs-hero {
	background-image:
		linear-gradient(88deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.88) 20%, rgba(5, 5, 5, 0.66) 36%, rgba(5, 5, 5, 0.3) 50%, rgba(5, 5, 5, 0.08) 62%, rgba(5, 5, 5, 0) 76%, rgba(5, 5, 5, 0.14) 100%),
		image-set(url('assets/img/hero.webp?v=3') type('image/webp'), url('assets/img/hero.jpg?v=3') type('image/jpeg'));
}

/* Asztali nézet (901 px-től): alapértelmezett `center / cover` háttér —
   nincs egyedi méret- vagy pozíció-felülírás. */
@media (min-width: 901px) {
	.rs-hero {
		background-image:
			linear-gradient(88deg,
				rgba(5, 5, 5, 0.97) 0%,
				rgba(5, 5, 5, 0.96) 46%,
				rgba(5, 5, 5, 0.88) 52%,
				rgba(5, 5, 5, 0.5) 60%,
				rgba(5, 5, 5, 0.15) 66%,
				rgba(5, 5, 5, 0) 72%,
				rgba(5, 5, 5, 0) 84%,
				rgba(5, 5, 5, 0.55) 89%,
				rgba(5, 5, 5, 0.95) 93%,
				rgba(5, 5, 5, 0.98) 100%),
			image-set(url('assets/img/hero.webp?v=3') type('image/webp'), url('assets/img/hero.jpg?v=3') type('image/jpeg'));
	}
}

/* Mobilon a szöveg majdnem az egész dobozt kitölti, ezért a felső padding
   kisebb. A háttér itt is alapértelmezett `center / cover`; az átmenet átlós
   (155°): bal felül sötét a szövegnek, jobb alul kitisztul. */
@media (max-width: 600px) {
	.rs-hero {
		padding-top: clamp(3.5rem, 14vw, 5rem);
		background-image:
			linear-gradient(155deg, rgba(5, 5, 5, 0.9) 14%, rgba(5, 5, 5, 0.6) 46%, rgba(5, 5, 5, 0.14) 86%),
			image-set(url('assets/img/hero.webp?v=3') type('image/webp'), url('assets/img/hero.jpg?v=3') type('image/jpeg'));
	}
}

.rs-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.rs-hero .rs-eyebrow {
	color: var(--rs-club-bright); /* a fotó kék ellenfénye — kiugrik a meleg képből */
	margin-bottom: 1.5rem;
}

.rs-hero h1 {
	color: var(--rs-white);
	font-size: clamp(1.9rem, 6vw, 4.25rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	max-width: 18ch;
	/* A „fesztiválkiegészítők" nem fér ki 390px-en: a markupban lévő ­
	   mentén törjön, ne a szó közepén (korábban „FESZTIVÁLKIEGÉSZÍ / TŐK"). */
	hyphens: manual;
}

/* Gombsor a heróban — korábban inline style-ban ült a block-markupban. */
.rs-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.rs-hero__sub {
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	max-width: 52ch;
	margin-bottom: 2.25rem;
}

.rs-hero .wp-block-button__link {
	background: var(--rs-white);
	color: var(--rs-ink);
	padding: 0.9em 2em;
}

.rs-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--rs-white);
	color: var(--rs-ink); /* a Blocksy hoverkor fehérre váltana — fehér gombon láthatatlan */
	box-shadow: 0 0 32px var(--rs-accent-glow);
}

.rs-hero .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(5, 5, 5, 0.35);
	color: var(--rs-white);
	border: 1px solid rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(2px);
}

/* ==========================================================================
   6. Kategória-csempék
   ========================================================================== */

.rs-cat-tile {
	display: block;
	border: 1px solid var(--rs-grey-200);
	padding: 2.5rem 1.5rem 1.25rem;
	text-decoration: none;
	color: var(--rs-ink);
	transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.rs-cat-tile:hover {
	border-color: var(--rs-accent);
	box-shadow: 0 0 20px var(--rs-accent-glow);
	color: var(--rs-ink);
}

.rs-cat-tile__label {
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	display: block;
}

.rs-cat-tile__count {
	font-family: var(--rs-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--rs-grey-700);
	display: block;
	margin-top: 0.4rem;
}

/* ==========================================================================
   7. Termékkártyák — UV-glow hover (a szignatúra)
   ========================================================================== */

/* A glow a tartalomnál nagyobb pszeudo-dobozon ül, így a szövegek nem érnek
   a fénylő "kártya" széléig — a rács nyugalmi állapotban nem mozdul. */
:where(.woocommerce ul.products li.product, .wc-block-grid__product) {
	position: relative;
}

:where(.woocommerce ul.products li.product, .wc-block-grid__product)::before {
	content: "";
	position: absolute;
	inset: -14px -18px;
	pointer-events: none;
	transition: box-shadow 0.25s ease;
}

:where(.woocommerce ul.products li.product):hover::before {
	box-shadow: 0 6px 36px var(--rs-accent-glow);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--rs-font-body);
	font-weight: 500;
	font-size: 0.95rem;
}

/* Árak monóban — flyer-esztétika */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: var(--rs-font-mono);
	font-weight: 500;
	color: var(--rs-ink);
}

.woocommerce .price del { opacity: 0.45; }
.woocommerce .price ins { text-decoration: none; color: var(--rs-accent-deep); }

/* A kezdőlapi kirakaton a kategória-címkék („RAVE KIEGÉSZÍTŐK, SZEMÜVEGEK")
   szinte minden kártyán ugyanazok — vizuálisan súlyosak, információt alig
   hordoznak. A kategóriaoldalakon maradnak. */
.home .woocommerce ul.products li.product .entry-meta {
	display: none;
}

/* A „Megnézem" gombok burka (a linket PHP-ből üresítjük ki — lásd functions.php). */
.home .woocommerce ul.products li.product .ct-woo-card-actions {
	display: none;
}

/* Akciós jelvény (important: a Blocksy késői szabálya ellen) */
.woocommerce span.onsale {
	background: var(--rs-accent) !important;
	color: var(--rs-white);
	border-radius: 0;
	font-family: var(--rs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: 0;
	line-height: 1;
	padding: 0.6em 0.9em;
}

/* ==========================================================================
   8. Szekciók, USP, blog-kártyák
   ========================================================================== */

.rs-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.rs-section-head h2 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0;
}

.rs-section-head a {
	font-family: var(--rs-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	color: var(--rs-accent-deep);
}

/* USP-sáv — a három bizalmi tény a termékrács és a hírlevél-sáv között.
   NINCS saját háttere: a korábbi --rs-grey-100 volt az egyetlen színfolt az
   oldalon, és megtörte a ritmust. Fontos: az oldal alapja nem tiszta fehér,
   hanem a Blocksy customizerből jövő #fafbfc — ezért `transparent` kell, nem
   `--rs-white`, különben fordítva ugyanaz a folt jön létre. A szekció határát
   egyetlen hajszálvonal jelöli a sáv tetején, nem oszloponkénti díszcsík.
   A blokk 24px-es alsó térközét (Blocksy: --theme-content-spacing) szándékosan
   MEGHAGYJUK: amíg a sávnak saját háttere volt, világos csíkot húzott a fekete
   CTA-sáv fölé, de átlátszó sávnál ugyanaz a szín, tehát nem látszik varrat —
   csak levegő a fekete blokk előtt. (Nullázni amúgy is csak specificitás-
   emeléssel lehetne: a Blocksy azonos erősségű szabálya később töltődik.) */
.rs-usp {
	background: transparent;
	border-top: 1px solid var(--rs-grey-200);
}

/* A korábbi 2px-es parázs-vörös vonalak oszloponként: díszek voltak, nem
   hordoztak információt. Helyettük a tény maga viszi a struktúrát (lásd
   .rs-usp__fact) — így az oszlopok tetején nem kell vonal. */
.rs-usp .wp-block-column {
	border-top: 0;
	padding-top: 0;
}

/* A kemény tény előre, a rendszer utility-betűjében: a „899 Ft" és a
   „14 nap" eddig a folyószöveg közepébe volt temetve, pedig pont ezekért
   fut végig a szem ezen a sávon. A monó betű bélyegzőszerű: számnak és
   e-mail-címnek egyaránt a natúr közege. */
.rs-usp__fact {
	font-family: var(--rs-font-mono);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rs-ink);
	margin: 0 0 0.7rem;
	max-width: none;
}

.rs-usp__fact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--rs-grey-200);
	padding-bottom: 2px;
}

.rs-usp__fact a:hover,
.rs-usp__fact a:focus-visible {
	border-bottom-color: var(--rs-ink);
}

.rs-usp h3 {
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 0 0 0.6rem;
	max-width: 22ch;
}

.rs-usp p {
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
	max-width: 40ch;
}

/* Monokróm: a link nem színnel, hanem aláhúzással jelzi magát, és hoveren
   vastagszik — szín nélkül is egyértelmű állapotváltás. */
.rs-usp p a {
	color: var(--rs-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.rs-usp p a:hover,
.rs-usp p a:focus-visible {
	text-decoration-thickness: 2px;
}

/* GYIK accordion */
.rs-faq details {
	border-bottom: 1px solid var(--rs-grey-200);
	padding: 0.9rem 0;
}

.rs-faq summary {
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.rs-faq summary::after {
	content: '+';
	font-family: var(--rs-font-mono);
	color: var(--rs-accent-deep);
}

.rs-faq details[open] summary::after { content: '–'; }

/* ==========================================================================
   8b. Űrlapok — Kapcsolat (CF7) és általános mezők
   ========================================================================== */

/* Kapcsolat: a rövid mezők két oszlopban, az üzenet teljes szélességben. */
.wpcf7 .rs-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5rem;
}

@media (max-width: 599px) {
	.wpcf7 .rs-form__grid { grid-template-columns: 1fr; }
}

.wpcf7 .rs-form__field { margin: 0 0 1.1rem; }

.wpcf7 label { font-weight: 500; }

.wpcf7 .rs-form__req { color: var(--rs-accent-deep); }
.wpcf7 .rs-form__opt {
	font-family: var(--rs-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rs-grey-700);
	font-weight: 400;
}

/* Mezők — szögletes, brand-vonalas; site-wide, hogy a pénztár is illeszkedjen. */
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--rs-grey-200);
	border-radius: 0;
	background: var(--rs-white);
	color: var(--rs-ink);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* A select-nek fix magasság kell, különben a Blocksy alap-szabálya
   miatt alul levágja a szöveget; a nyíl helyének is hagyunk teret. */
.wpcf7 select {
	height: calc(1.4em + 1.5rem + 2px);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23050505' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

.wpcf7 textarea { min-height: 9rem; resize: vertical; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--rs-accent);
	box-shadow: 0 0 0 3px var(--rs-accent-glow);
}

.wpcf7 .rs-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	margin: 0.5rem 0 1.5rem;
}

.wpcf7 .rs-form__consent .wpcf7-list-item { margin: 0; }
.wpcf7 .rs-form__consent a { color: var(--rs-accent-deep); }

.wpcf7 .rs-form__submit { margin: 0; }

.wpcf7 input[type='submit'] {
	background: var(--rs-ink);
	color: var(--rs-white);
	border: 0;
	border-radius: 0;
	padding: 0.85em 2.4em;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: box-shadow 0.2s ease, background-color 0.15s ease;
}

.wpcf7 input[type='submit']:hover {
	background: var(--rs-accent-deep);
	box-shadow: 0 0 24px var(--rs-accent-glow);
}

.wpcf7 .wpcf7-spinner { margin-left: 0.75rem; }

/* Válasz-visszajelzések: siker zöld-semleges, hiba parázs-vörös. */
.wpcf7 .wpcf7-response-output {
	margin: 1.4rem 0 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--rs-grey-200);
	border-left-width: 3px;
	font-size: 0.92rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--rs-accent);
	background: rgba(201, 64, 42, 0.06);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2e7d32;
	background: rgba(46, 125, 50, 0.07);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: var(--rs-accent-deep);
	font-size: 0.82rem;
}

.wpcf7 .wpcf7-not-valid { border-color: var(--rs-accent); }

/* ==========================================================================
   9. Fejléc / lábléc
   ========================================================================== */

.site-logo-container .site-title,
[data-id='logo'] .site-title {
	font-family: var(--rs-font-display);
	font-weight: 800;
	text-transform: lowercase;
	letter-spacing: 0.01em;
}

/* Kép-logó méretezése (a 3100×700-as master ne folyjon szét) */
.site-logo-container img,
[data-id='logo'] img {
	max-width: 190px;
	height: auto;
}

/* Kép-logó mellett a szöveges cím duplázna — el vele. */
.site-logo-container:has(img) .site-title,
[data-id='logo']:has(img) .site-title {
	display: none;
}

/* Mobil fejléc — a kereső ikon a logóra ült. Ok: a Blocksy a mobil sort
   `1fr 1fr` ráccsá teszi, vagyis az ikon-oszlop fixen a sor fele. Négy ikon
   (kereső, fiók, kosár, hamburger) × 44 px + elemenként 2 × 10 px margó =
   256 px, ami 360 px-es kijelzőn a 158 px-es oszlopba nem fér bele — és mert
   a sor `justify-content: flex-end`, a túlcsordulás BALRA megy, rá a logóra.
   (~434 px alatti kijelzőn minden telefonon jelentkezett.)

   Az érdemi megoldás a functions.php-ban van: a kereső és a fiók átkerült a
   hamburger-panelbe, a sorban csak logó + kosár + hamburger maradt. Az itteni
   két szabály a védőháló, hogy a hiba ne jöhessen vissza: az ikon-oszlop a
   tartalmához méreteződjön (`auto`), a logó kapja a maradékot
   (`minmax(0,1fr)`), a logó-kép pedig `100%`-nál soha ne lógjon ki.
   (#header prefix: a Blocksy inline CSS-énél erősebb specificitás kell.) */
#header [data-device='mobile'] [data-column-set='2'] > .ct-container {
	grid-template-columns: minmax(0, 1fr) auto;
}

#header [data-device='mobile'] [data-id='logo'] img {
	max-width: min(150px, 100%) !important;
	height: auto;
}

#header [data-device='mobile'] [data-column='start'] { min-width: 0; }

/* Hamburger-panel: kereső-mező a tetején, fiók-sor az alján. A markup a
   functions.php-ban ül ('blocksy:header:offcanvas:mobile:top' / ':bottom') —
   a Blocksy beépített kereső-eleme nem tehető a panelbe (`excluded_from`).

   Két buktató: (1) a Blocksy globális form-resetje minden inputra
   width:100%/height:40px-et erőltet, ezért kell az explicit felülírás;
   (2) a panel háttere SÖTÉT (rgba(18,21,25,.98)), a menüpontok fehérek — de
   az örökölt szövegszín a világos oldali `--theme-text-color` (#333), ami itt
   olvashatatlan. Ezért mindkét elem explicit fehéret kap. */
.rs-offcanvas-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--rs-white);
}

.rs-offcanvas-search input[type='search'] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--rs-font-body);
	font-size: 1rem;
	color: var(--rs-white);
}

.rs-offcanvas-search input[type='search']::placeholder {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1; /* Firefox alapból 0.54-gyel halványít rá */
}

.rs-offcanvas-search input[type='search']:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rs-offcanvas-search button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rs-white);
	cursor: pointer;
}

.rs-offcanvas-search button svg,
.rs-offcanvas-account svg { fill: currentColor; }

.rs-offcanvas-account {
	/* Nem inline-flex: teljes szélességben kell ülnie, különben a fölötte lévő
	   elválasztó vonal csak a szöveg alatt húzódna — és így az egész sor
	   kattintható. */
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-family: var(--rs-font-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--rs-white);
	text-decoration: none;
}

.rs-offcanvas-account:hover span { text-decoration: underline; }

/* Piac/nyelv kijelző a fejlécben (inc/header-items/market) — valódi
   <select>, egy-egy opcióval (FRDV-minta: kerettelen szöveg + nyíl). */
.rs-header-market {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

/* A fiók-ikontól balra húzzuk a sávot. Sima `margin-right` NEM elég: a Blocksy
   `[data-items]>*{margin:var(--margin, 0 10px)}` szabálya azonos specificitású
   (0,1,0), de később töltődik — és a `--margin`-t az elsőnek álló elemre
   `[data-items=primary]>*:first-child` (0,2,0) állítja 10px-re. Ezért a saját
   --margin knobját írjuk felül, #header id-prefixszel (1,1,0). */
#header .rs-header-market {
	--margin: 0 3rem 0 0;
}

/* A Blocksy globális form-reset MINDEN <select>-re width:100%-ot és
   height:40px-et kényszerít (main.min.css) — ez két flex-elemként egyenlő,
   tartalomtól független szélességre nyomta a két legördülőt, és emiatt
   csúszott el a nyíl a rövidebb "Magyar" szöveg mögött. Explicit felülírás
   kell, class-specificitással (a plain `select` type-szelektort verjük). */
.rs-market-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23050505' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 9px;
	margin: 0;
	padding: 0 1rem 0 0;
	font-family: var(--rs-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	color: var(--rs-ink);
	cursor: pointer;
}

.rs-market-select:hover,
.rs-market-select:focus-visible {
	color: var(--rs-accent-deep);
	outline: none;
}

/* Dobozos változat a láblécben — a nyíl sötét, mert fehér alapon szürke
   kerettel jelenik meg, nem a fejléc sima szövegében. */
.rs-market-select--boxed {
	width: auto;
	height: auto;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23050505' stroke-width='1.4'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-size: 10px;
	border: 1px solid var(--rs-grey-200);
	padding: 0.7rem 2.2rem 0.7rem 1.1rem;
	font-family: var(--rs-font-body);
	font-size: 0.9rem;
	letter-spacing: normal;
	color: var(--rs-ink);
	white-space: nowrap;
}

.rs-market-select--boxed:hover,
.rs-market-select--boxed:focus-visible {
	color: var(--rs-ink);
	border-color: var(--rs-ink);
}

/* Mega menü (functions.php: wp_nav_menu_objects) — az eredeti Horizon-fejléc
   lenyílói: teljes szélességű fekete panel, balra linkek, jobbra termékkártyák.
   (#header id-prefix kell: a Blocksy dinamikus CSS-e később töltődik.) */
/* A menü saját, teljes szélességű fekete sávban ül a fejléc alatt
   (blocksy:header:default_value: [data-row='bottom']) — a lenyíló mega-panel
   ehhez a sorhoz horgonyoz. */
#header [data-device='desktop'] [data-row='bottom'] {
	position: relative;
	background: var(--rs-ink);
	/* A menüsáv függőleges belső térköze. A mega-panel hover-hídja is ebből
	   számol (lásd lent a ::before-t), ezért egy helyen definiáljuk. */
	--rs-menubar-pad: 0.9rem;
}

#header [data-device='desktop'] [data-row='bottom'] [data-items] {
	padding-top: var(--rs-menubar-pad);
	padding-bottom: var(--rs-menubar-pad);
}

#header [data-device='desktop'] [data-row='bottom'] .header-menu-1 > ul {
	justify-content: center;
	column-gap: 2.75rem;
}

/* Kondenzált kiskapitális (Bebas Neue), betűközzel ritkított menüsor a
   fekete sávon — pontosan az FRDV-minta tipója (font-weight 400, mert a
   Bebas Neue-nak nincs önálló félkövér változata; a "súlyt" maga a betű
   kondenzált formája adja). */
#header [data-device='desktop'] .header-menu-1 > ul > li > .ct-menu-link {
	color: var(--rs-white);
	font-family: var(--rs-font-nav);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

#header [data-device='desktop'] .header-menu-1 > ul > li:hover > .ct-menu-link,
#header [data-device='desktop'] .header-menu-1 > ul > li:focus-within > .ct-menu-link {
	text-decoration: underline;
	text-underline-offset: 7px;
}

#header [data-device='desktop'] .rs-mega { position: static; }

/* A lenyíló-nyilakat visszaadjuk (FRDV-nél is ott vannak az almenüs
   elemeken) — fehérre színezve a fekete sávhoz. */
#header [data-device='desktop'] .rs-mega .ct-toggle-dropdown-desktop {
	display: inline-flex;
}

#header [data-device='desktop'] .rs-mega .ct-toggle-dropdown-desktop .ct-icon {
	width: 8px;
	height: 8px;
	fill: currentColor;
}

#header [data-device='desktop'] .rs-mega > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
	transform: none;
	border-radius: 0;
	background: var(--rs-ink);
	padding: 2.75rem max(1.5rem, calc((100% - 1200px) / 2)) 3rem;
	display: grid;
	grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(200px, 280px));
	gap: 0.35rem 2.25rem;
	box-shadow: 0 30px 40px -25px rgba(0, 0, 0, 0.55);
}

/* Hover-híd. A Blocksy a lenyílót JS-ből kezeli: a <li> mouseenter-ére teszi rá
   a .ct-active-et, a mouseleave-ére veszi le. A mega-panel viszont nem a
   <li>-hez, hanem a fekete sávhoz horgonyzik (top: 100%), így a <li> alja és a
   panel teteje között ott marad a sáv alsó belső térköze holt sávként — az egér
   már ott elhagyja a <li>-t, és a panel bezárul, mielőtt a felhasználó leérne rá.
   A Blocksy saját ::before-hídja pont ezt hidalná át, csak alapból 0 magas (a
   --dropdown-top-offset nálunk 0), ezért itt méretezzük a holt sáv magasságára.
   A pszeudo-elem a .sub-menu része, tehát DOM-ban a <li> leszármazottja: fölötte
   áthaladva nem sül el a mouseleave. Egeret csak nyitott panelnél fog (zárt
   állapotban a .sub-menu pointer-events: none), és a menülinkek alatt marad,
   így nem takar el kattintható felületet. */
#header [data-device='desktop'] .rs-mega > .sub-menu::before {
	height: var(--rs-menubar-pad, 0.9rem);
}

#header [data-device='desktop'] .rs-mega > .sub-menu > li {
	grid-column: 1;
	margin: 0;
	border: 0;
}

#header [data-device='desktop'] .rs-mega > .sub-menu > li > .ct-menu-link {
	color: var(--rs-white);
	font-size: 1rem;
	padding: 0.5rem 0;
	background: none;
	text-transform: none;
}

#header [data-device='desktop'] .rs-mega > .sub-menu > li > .ct-menu-link:hover {
	color: var(--rs-accent-bright);
}

/* Termékkártyák: a panel jobb oldali oszlopai (a lista végére fűzött elemek). */
#header [data-device='desktop'] .rs-mega > .sub-menu > li.rs-mega__card {
	grid-row: 1 / span 6;
	align-self: start;
}

#header [data-device='desktop'] .rs-mega > .sub-menu > li.rs-mega__card:nth-last-child(1) { grid-column: 4; }
#header [data-device='desktop'] .rs-mega > .sub-menu > li.rs-mega__card:nth-last-child(2) { grid-column: 3; }
#header [data-device='desktop'] .rs-mega > .sub-menu > li.rs-mega__card:nth-last-child(3) { grid-column: 2; }

#header .rs-mega__card-link,
#header .rs-mega__card-link .rs-mega__card-name,
#header .rs-mega__card-link .rs-mega__card-price {
	color: var(--rs-white);
}

.rs-mega__card-link {
	display: block;
	color: var(--rs-white);
}

.rs-mega__card-link img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin-bottom: 0.9rem;
	background: #111111;
}

.rs-mega__card-name {
	display: block;
	font-size: 0.95rem;
	line-height: 1.4;
}

.rs-mega__card-link:hover .rs-mega__card-name {
	color: var(--rs-accent-bright);
}

.rs-mega__card-price {
	display: block;
	margin-top: 0.35rem;
	font-weight: 500;
}

/* A kártya-elemek csak a desktop mega panelbe valók — offcanvas menüben soha. */
#offcanvas .rs-mega__card,
.ct-mobile-menu .rs-mega__card { display: none; }

/* A kezdőlapon a Blocksy cím-sáv ("Kezdőlap") fölösleges — a hero a nyitány. */
/* A kezdőlap Blocksy cím-blokkját a has_hero_section=disabled post-option
   kapcsolja ki (scripts/php/setup-kezdolap-cimblokk.php) — CSS-sel elrejtve
   a rejtett <h1>Kezdőlap</h1> a DOM-ban maradna, dupla H1-et okozva. */

/* ...és a tartalom-konténer felső térköze se tolja el a herót a headertől. */
.home .ct-container-full { padding-top: 0; }

/* Saját lábléc-sáv (functions.php: blocksy:footer:before) — FRDV-minta:
   fehér alap, három középre igazított oszlop a logóval középen, alatta
   social, majd EGYETLEN elválasztóvonal és a záró piac/fizetés/copyright sáv. */
.rs-footer {
	background: var(--rs-white);
	color: var(--rs-grey-700);
	padding: 5.25rem 1.5rem 0;
}

/* Három egyenlő oszlop, KÖZÉPRE igazítva, a logóval a középsőben — a
   referencia levegős szerkezete. A logó így nem kap külön sávot saját
   elválasztóvonalakkal, ezért az egész láblécben egyetlen vonal marad. */
.rs-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.75rem 2rem;
	text-align: center;
}

@media (max-width: 899px) {
	.rs-footer__inner { grid-template-columns: 1fr; gap: 2.75rem; }

	/* Egy oszlopban a logó ne ékelődjön a két linklista KÖZÉ — kerüljön
	   a lista-blokkok után, közvetlenül a social ikonsor elé. */
	.rs-footer__inner .rs-footer__brand { order: 1; }
}

/* Halk, kondenzált rovatcímek (Bebas Neue ~18px) — nem a korábbi harsány,
   26px-es félkövér Inter. A hierarchiát a betűforma adja, nem a méret. */
.rs-footer h4 {
	color: var(--rs-ink);
	font-family: var(--rs-font-nav);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
}

.rs-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	justify-items: center;
}

.rs-footer a {
	color: #8a8a8a;
	text-decoration: none;
	font-size: 1rem;
}

.rs-footer a:hover { color: var(--rs-accent-deep); }

.rs-footer a:focus-visible {
	outline: 2px solid var(--rs-accent-deep);
	outline-offset: 3px;
}

.rs-footer__lead {
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 36ch;
	margin: 0 0 1.4rem;
}

/* Hírlevél-űrlap: körvonalas mező + sötét gomb (fehér lábléc-alapon). */
.rs-signup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	/* A mező és a gomb közös magassága — lásd a magyarázatot lentebb. */
	--rs-signup-h: var(--theme-form-field-height, 40px);
}

.rs-hp { position: absolute !important; left: -9999px; } /* honeypot */

.rs-signup input[type='email'] {
	flex: 1 1 190px;
	min-width: 0;
	padding: 0.85rem 1.15rem;
	border: 1px solid var(--rs-grey-200);
	border-radius: 13px;
	background: var(--rs-white);
	color: var(--rs-ink);
	font: inherit;
	font-size: 0.95rem;
}

.rs-signup button {
	padding: 0.85rem 1.7rem;
	border: 1px solid var(--rs-ink);
	border-radius: 13px;
	background: transparent;
	color: var(--rs-ink);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rs-signup button:hover {
	background: var(--rs-ink);
	color: var(--rs-white);
}

/* A mező és a gomb egyforma magassága. A Blocksy MINDEN szövegmezőnek fix
   magasságot ad (`height: var(--theme-form-field-height, 40px)`), a gombnak
   viszont nem — az a saját sormagasságából nőtt 53,8 px-re, miközben a mező
   40 px maradt. (A mező border-box, így a fenti 0.85rem-es függőleges
   térközét a fix magasság amúgy is felemésztette: a tartalom-doboza 11,3 px
   volt.) Ezért mindkettőt EGY változóból méretezzük, és a függőleges
   térközüket nullázzuk — a szöveget a mező natívan, a gomb flexként középre
   teszi. Így a kettő nem tud elcsúszni egymástól, a mező pedig továbbra is
   ugyanolyan magas, mint az oldal többi űrlapmezője. */
.rs-signup input[type='email'],
.rs-signup button {
	box-sizing: border-box;
	height: var(--rs-signup-h);
	min-height: 0;
	padding-block: 0;
	line-height: 1.2;
}

.rs-signup input:focus-visible,
.rs-signup button:focus-visible {
	outline: 2px solid var(--rs-accent-deep);
	outline-offset: 2px;
}

.rs-signup__msg {
	margin: 0.9rem 0 0;
	font-family: var(--rs-font-mono);
	font-size: 0.78rem;
	color: var(--rs-accent-deep);
}

/* Adatkezelési sor az űrlap alatt (GDPR). */
.rs-signup__legal {
	margin: 0.85rem 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(5, 5, 5, 0.55);
	max-width: 46ch;
}

.rs-signup__legal a {
	color: rgba(5, 5, 5, 0.75);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rs-signup__legal a:hover { color: var(--rs-ink); }

.rs-footer__social a {
	display: block;
	color: var(--rs-ink);
}

.rs-footer__social a:hover { color: var(--rs-accent-deep); }

.rs-footer__social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

/* A logó a rács KÖZÉPSŐ oszlopa — nincs saját sávja és elválasztóvonala.
   Felül igazítva, hogy egy vonalban induljon a két rovatcímmel. */
.rs-footer__brand {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.rs-footer__logo {
	width: 260px;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Social ikonsor — középen, az oszlopok alatt. */
.rs-footer .rs-footer__social {
	display: flex;
	justify-content: center;
	gap: 1.4rem;
	list-style: none;
	margin: 3.25rem 0 0;
	padding: 0;
}

/* Hírlevél — csak a nem-kezdőlapos nézetben (a kezdőlapon a CTA-sáv hozza).
   Keskeny, középre igazított blokk a social alatt. */
.rs-footer__newsletter {
	max-width: 520px;
	margin: 3.25rem auto 0;
	text-align: center;
}

.rs-footer__newsletter .rs-footer__lead {
	margin-inline: auto;
}

.rs-footer__newsletter .rs-signup { justify-content: center; }

.rs-footer__newsletter .rs-signup__legal {
	margin-inline: auto;
	max-width: none;
	text-wrap: balance;
}

/* Piac- és fizetési sáv — bal oldalt ország/nyelv (statikus kijelzés, lásd
   functions.php), jobb oldalt az elfogadott kártyahálózatok. */
.rs-footer__utility {
	max-width: 1200px;
	margin: 4rem auto 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--rs-grey-200);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.75rem;
}

.rs-footer__market {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.rs-footer__market-item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	cursor: pointer;
}

.rs-footer__market-label {
	font-family: var(--rs-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(5, 5, 5, 0.45);
}

.rs-footer__payments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

.rs-footer__payments li {
	display: block;
	width: 44px;
	height: 28px;
	border: 1px solid var(--rs-grey-200);
	border-radius: 4px;
	overflow: hidden;
}

.rs-footer__payments svg { width: 100%; height: 100%; display: block; }

/* Záró jogi sor — copyright + a jogi/policy oldalak, pont-elválasztókkal.
   A linkhalmaz nem fedi a fenti oszlopokat (lásd functions.php + a
   setup-lablec-menuk.php szétosztását). */
.rs-footer__legal {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.75rem 0 2.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0;
	font-family: var(--rs-font-mono);
	font-size: 0.72rem;
	color: rgba(5, 5, 5, 0.55);
}

.rs-footer__legal-copy { margin-right: 0.75rem; white-space: nowrap; }

.rs-footer__legal-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	/* Sortöréskor a 24 px-es kattintási sávok EGYMÁSHOZ ÉRNÉNEK (mérve 390 px-en:
	   az első sor alja és a második sor teteje is 4148 px volt). A WCAG 2.5.8
	   a méret mellett a célok elkülönülését is elvárja — a sorköz ezt adja meg.
	   Csak függőleges: vízszintesen a `·` elválasztó margója tartja a távolságot. */
	row-gap: 0.5rem;
}

.rs-footer__legal-links li { display: flex; align-items: center; }

/* Az elválasztó a link MÖGÉ kerül (nem elé): így ha a sor tördelődik, az új
   sor szóval kezdődik, nem egy árva ponttal. */
.rs-footer__legal-links li:not(:last-child)::after {
	content: '·';
	margin: 0 0.5rem;
	color: rgba(5, 5, 5, 0.3);
}

/* A jogi linkek halkabbak és kisebbek, mint a fenti oszlopoké — ez
   lábjegyzet, nem navigáció. (A .rs-footer a szabályt felülírná, ezért
   itt kell újramondani a méretet és a színt.) */
.rs-footer .rs-footer__legal-links a {
	color: rgba(5, 5, 5, 0.55);
	font-family: var(--rs-font-mono);
	font-size: 0.72rem;
	text-decoration: none;
}

.rs-footer .rs-footer__legal-links a:hover {
	color: var(--rs-accent-deep);
	text-decoration: underline;
}

/* A Blocksy saját láblécét teljesen kivezetjük: egyetlen eleme a copyright-sor
   volt, amit a .rs-footer__legal vett át. Korábban csak a SZÖVEGE volt
   elrejtve — a doboz és a 25px-es container-spacingje maradt, ez adta az üres
   fehér sávot a lap alján. A .rs-footer ezért <footer> (nem <section>): így a
   contentinfo landmark nem vész el a display:none-nal. */
#footer.ct-footer,
footer#footer.ct-footer {
	display: none;
}

.rs-footer { margin-bottom: 0; }

/* ==========================================================================
   10. Pénztár — csomagpont-választó (vp-woo-pont plugin)
   ========================================================================== */

/* A „Válassz egy átvételi helyet" trigger a pluginban sima szöveg-link —
   gombbá emeljük: a fekete primer gombok outline-párja (szögletes, ink
   keret, hoverre invertál UV-glow-val, mint a többi gomb). Kiválasztott
   pont után ugyanez az id a kis „Módosítás" linken ül — ott is jól mutat. */
a#vp-woo-pont-show-map {
	display: inline-block;
	padding: 0.55em 1.15em;
	border: 2px solid var(--rs-ink);
	border-radius: 0;
	background: var(--rs-white);
	color: var(--rs-ink);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}

a#vp-woo-pont-show-map:hover,
a#vp-woo-pont-show-map:focus {
	background: var(--rs-ink);
	color: var(--rs-white);
	box-shadow: 0 0 24px var(--rs-accent-glow);
	text-decoration: none;
}

a#vp-woo-pont-show-map { text-align: center; }

/* Az „Átvételi hely" sor: a child téma sablon-felülírása (woocommerce/
   checkout/pont.php) egyetlen colspan=2 cellát ad — fejléc és adatok
   egymás alatt, teljes szélességben, a keskeny összesítő-oszlop kényszere
   nélkül. Az eredeti th+td párt a table-fixup miatt CSS-ből nem lehetett
   kiszélesíteni. */
.woocommerce-checkout-review-order-table tr.vp-woo-pont-review-order td,
.woocommerce-checkout-review-order-table tr.vp-woo-pont-review-order td:last-child {
	text-align: left; /* a Blocksy td:last-child jobbra zárását üti */
}

.rs-vp-pont-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.55em;
}

.vp-woo-pont-review-order-selected {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
}

.vp-woo-pont-review-order-selected-info { flex: 1; }

/* Vizuális hierarchia: név (elsődleges, fekete) → cím (másodlagos, szürke,
   kisebb) → ár (monóban, parázs-akcenttel — mint az árak a bolt többi
   részén) — így a három elem nem folyik össze. */
.vp-woo-pont-review-order-selected-info > strong,
.vp-woo-pont-review-order-selected-address {
	display: block;
	line-height: 1.4;
}

.vp-woo-pont-review-order-selected-provider {
	font-size: 0.95rem;
	color: var(--rs-ink);
	margin-bottom: 0.1em;
}

.vp-woo-pont-review-order-selected-address {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--rs-grey-700);
	margin-bottom: 0.4em;
}

.vp-woo-pont-review-order-selected-cost {
	font-family: var(--rs-font-mono);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--rs-accent-deep);
}

/* Módosítás: kisebb outline-gomb, külön sorban */
.vp-woo-pont-review-order-selected-info a#vp-woo-pont-show-map {
	margin-top: 0.7em;
	padding: 0.4em 0.95em;
	font-size: 0.85rem;
}

/* Mobil: a rendelés-összesítő cellák oldal-paddingja nélkül több hely jut
   a hosszú terméknevek egy sorának. */
@media (max-width: 640px) {
	.woocommerce-checkout-review-order-table th:first-child,
	.woocommerce-checkout-review-order-table td:first-child {
		padding-left: 0;
	}
	.woocommerce-checkout-review-order-table th:last-child,
	.woocommerce-checkout-review-order-table td:last-child {
		padding-right: 0;
	}
}

/* ── Termékképek: a teljes kép látszik, vágás nélkül ──────────────────────
   MIÉRT: a termékfotók két arányban vannak (15 db 1:1, 13 db álló 3:4). A
   bélyegkép-generálás vágás nélküli (scripts/php/setup-termekkep-
   megjelenites.php), így a fájl a teljes képet őrzi — a szabályos rácsot
   VISZONT itt kell megtartani, mert a Blocksy NEM állít arányt a
   termékkártyára (a régi négyzetes kinézet csak a vágott fájloktól volt).

   A boxot négyzeten tartjuk, és `contain`-nel illesztünk, hogy semmi ne
   vágódjon le. A kiegészítő sáv fehér: mind a 13 álló kép fehér hátterű,
   így a sáv észrevehetetlen; a 4 sötét hátterű kép pedig pontosan 1:1,
   azoknál sáv sincs. */
.woocommerce ul.products li.product .ct-media-container,
ul.products li.product .ct-media-container {
	aspect-ratio: 1 / 1;
	background: var(--rs-white, #ffffff);
	--theme-object-fit: contain;
}

.woocommerce ul.products li.product .ct-media-container img,
ul.products li.product .ct-media-container img {
	height: 100%;
}

/* ==========================================================================
   11. Katalógus mód — „Hamarosan" üzenet a kosár helyett
   ========================================================================== */

.rs-catalog-notice {
	background: var(--rs-ink);
	color: var(--rs-white);
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--rs-accent);
	font-family: var(--rs-font-mono);
	font-size: 0.85rem;
	line-height: 1.6;
	margin-top: 1.5rem;
}

.rs-catalog-notice a {
	color: var(--rs-accent-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.rs-catalog-notice a:hover {
	color: var(--rs-white);
}

/* Előnézeti mód (RS_CATALOG_MODE = 'elonezet'): a folyamat bejárható, de
   rendelés nem jön létre — a klub-kék elválasztja a „hamarosan" közléstől. */
.rs-catalog-notice--elonezet {
	background: var(--rs-grey-100);
	color: var(--rs-grey-700);
	border-left-color: var(--rs-club);
}

.rs-catalog-notice--elonezet p {
	margin: 0;
}

/* Üres kategória — „hamarosan" blokk a „nincs találat" helyett. */
/* Kapcsolati urlap kiesese eseten (lasd functions.php: CF7-tartalek). */
.rs-form-offline {
	border-left: 3px solid var(--rs-accent);
	background: var(--rs-grey-100);
	padding: 1.75rem;
	margin: 0 0 2rem;
	max-width: 60ch;
}

.rs-form-offline p { margin: 0 0 0.75rem; }
.rs-form-offline p:last-child { margin-bottom: 0; }

.rs-form-offline__link {
	font-family: var(--rs-font-mono);
	color: var(--rs-accent-deep);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.rs-empty-cat {
	border-left: 3px solid var(--rs-accent);
	background: var(--rs-grey-100);
	padding: 2rem 1.75rem;
	margin: 1.5rem 0 3rem;
	max-width: 60ch;
}

.rs-empty-cat h2 {
	font-size: 1.3rem;
	margin: 0 0 0.75rem;
}

.rs-empty-cat p { margin: 0 0 0.75rem; }
.rs-empty-cat p:last-child { margin-bottom: 0; }

.rs-empty-cat__link {
	font-family: var(--rs-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rs-accent-deep);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

/* ==========================================================================
   12. Megújulunk — landing page komponensek
   ========================================================================== */

/* Felújítási értesítő sáv */
.rs-relaunch-notice {
	background: var(--rs-ink);
	color: var(--rs-white);
	text-align: center;
	padding: 2.5rem 1.5rem;
	border-top: 2px solid var(--rs-accent);
	border-bottom: 2px solid var(--rs-accent);
}

.rs-relaunch-notice p {
	max-width: 60ch;
	margin-inline: auto;
}

/* Egyedi legyezők teaser szekció */
.rs-teaser-fans {
	background: var(--rs-grey-100);
}

.rs-teaser-fans h2 {
	font-family: var(--rs-font-display);
}

.rs-teaser-fans > .wp-block-columns .wp-block-column,
.rs-teaser-fans .wp-block-column {
	border-top: 2px solid var(--rs-accent);
	padding-top: 1.5rem;
}

.rs-teaser-fans p {
	max-width: 60ch;
}

/* Hírlevél CTA szekció */
.rs-cta-newsletter {
	background: var(--rs-ink);
	color: var(--rs-white);
	text-align: center;
}

.rs-cta-newsletter h2 {
	color: var(--rs-white);
}

.rs-cta-newsletter .wp-block-button__link {
	background: var(--rs-white);
	color: var(--rs-ink);
	padding: 0.9em 2.5em;
}

.rs-cta-newsletter .wp-block-button__link:hover {
	background: var(--rs-white);
	color: var(--rs-ink);
	box-shadow: 0 0 32px var(--rs-accent-glow);
}

/* A kezdőlap utolsó blokkja egy teli szélességű sötét sáv. A Blocksy 50px-es
   alsó konténer-térköze fehér csíkot húzott közé és a (szintén sötét) lábléc
   közé — úgy nézett ki, mint egy renderelési hiba. */
.home .ct-container-full {
	padding-bottom: 0;
}

/* Az űrlap magában a sávban — korábban a gomb csak a lábléc űrlapjára ugrott. */
.rs-cta-newsletter .rs-signup {
	justify-content: center;
	margin-top: 1.75rem;
}

.rs-cta-newsletter .rs-signup input[type='email'] {
	flex: 1 1 260px;
	max-width: 340px;
}

.rs-cta-newsletter .rs-signup__legal,
.rs-cta-newsletter .rs-signup__msg {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
}

/* A sötét sávon a világos alapra tervezett űrlap-színeket át kell fordítani.
   A .rs-signup alapváltozata a FEHÉR lábléchez készült: a gomb ink szegélyt és
   ink szöveget kap átlátszó háttéren, a jogi sor és a státusz-üzenet pedig
   ink-alapú szürkét. A sáv háttere viszont maga a --rs-ink, így ezek pontosan
   a háttér színét veszik fel — a gomb és a szövegek 1:1 kontraszttal
   láthatatlanok (emiatt tűnt úgy, hogy az e-mail-mező csúszott el balra: a
   középre igazított mező+gomb páros jobb fele egyszerűen nem látszott).
   A gomb itt a sáv saját CTA-gombjának megjelenését kapja (tömör fehér). */
.rs-cta-newsletter .rs-signup button {
	background: var(--rs-white);
	border-color: var(--rs-white);
	color: var(--rs-ink);
}

.rs-cta-newsletter .rs-signup button:hover {
	background: var(--rs-white);
	color: var(--rs-ink);
	box-shadow: 0 0 32px var(--rs-accent-glow);
}

/* --rs-accent-deep sötét alapon alig látszik; a parázs-akcentus sötét háttérre
   szánt változata a --rs-accent-bright. */
.rs-cta-newsletter .rs-signup input:focus-visible,
.rs-cta-newsletter .rs-signup button:focus-visible {
	outline-color: var(--rs-accent-bright);
}

.rs-cta-newsletter .rs-signup__legal {
	color: rgba(255, 255, 255, 0.62);
}

.rs-cta-newsletter .rs-signup__legal a {
	color: rgba(255, 255, 255, 0.85);
}

.rs-cta-newsletter .rs-signup__legal a:hover {
	color: var(--rs-white);
}

.rs-cta-newsletter .rs-signup__msg {
	color: var(--rs-accent-bright);
}


/* ==========================================================================
   Mobil UX — a 2026-08-31-i élesbeli átvizsgálás leletei (U1, U3, U5)
   A forgalom 75%-a mobilról jön (GSC: 1 140 vs 365 megjelenés).
   ========================================================================== */

/* U1 — kétoszlopos terméklista mobilon.
   Előtte: egy oszlop, 506 px magas kártyák, 7 435 px oldalhossz 10 termékért
   (≈8,8 képernyő). A Blocksy 689 px alatt `--shop-columns: repeat(1, …)`-et
   ad; ezt írjuk felül. Specificitás kell hozzá: a Blocksy dinamikus CSS-e
   (`ct-main-styles-inline-css`) a child theme stíluslapja UTÁN töltődik,
   ezért a puszta `[data-products]` szelektorral nem lehet nyerni —
   `ul.products[data-products]` viszont magasabb specificitású. */
@media (max-width: 689px) {
	ul.products[data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		--grid-columns-gap: 12px;
	}

	/* Két oszlopban a kártyák keskenyebbek: a terméknév és az ár ne törjön
	   szét, és a kártya alja maradjon egy vonalban. */
	ul.products[data-products] .woocommerce-loop-product__title {
		font-size: 0.82rem;
		line-height: 1.3;
	}

	ul.products[data-products] .price {
		font-size: 0.85rem;
	}

	/* A kapcsolódó és upsell-listák ugyanúgy. */
	.related ul.products[data-products],
	.upsells ul.products[data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
	}
}

/* U3 — érintőfelületek.
   A fejléc-ikonok látható mérete 15×15 px volt, a WCAG 2.5.8 minimuma 24 px,
   a bevett gyakorlat 44 px. A LÁTHATÓ ikon marad ekkora — csak a kattintási
   terület nő köré, flex-középre igazítással. */
.ct-header-search,
.ct-header-account,
.ct-header-trigger,
.ct-cart-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* U5 — piac/nyelv felirat a korábbi egyopciós legördülők helyén.
   A vizuális megjelenés szándékosan majdnem azonos a régi <select>-tel,
   csak a lenyíló nyíl tűnt el — mert nem volt mit lenyitni. */
.rs-market-label {
	font-family: var(--rs-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	color: var(--rs-ink);
	white-space: nowrap;
}

.rs-market-value {
	display: inline-block;
	border: 1px solid var(--rs-grey-200);
	padding: 0.7rem 1.1rem;
	font-family: var(--rs-font-body);
	font-size: 0.9rem;
	color: var(--rs-ink);
	white-space: nowrap;
}

/* U3 folytatás — a maradék szöveges linkek érintőfelülete.
   Böngészős utómérés (390×844) után: a 64 kicsi elemből 20 maradt, és ezek
   már nem ikonok, hanem szöveges linkek — a termékkártya kategória-címkéje
   (15 px), a lábléc közösségi és jogi linkjei (19–22 px). A WCAG 2.5.8 a
   folyó szövegbe ágyazott linkeket felmenti, ezek viszont önálló listaelemek.
   Csak a kattintási sávot növeljük 24 px-re; a betűméret nem változik.
   (A `skip-link` szándékosan 1×1: képernyőolvasónak szól, fókuszra jelenik meg.) */
@media (max-width: 899px) {
	/* A specificitást a MEGLÉVŐ szabályokhoz kell igazítani: a 1224. sor
	   `.rs-footer .rs-footer__legal-links a` (0,2,1) alakja legyőzte az
	   egyszerűbb `.rs-footer__legal-links a`-t (0,1,1). Ezt a hibát a
	   böngészős utómérés fogta meg — a szerveren a szabály ott volt, csak
	   nem érvényesült. */
	.entry-meta .meta-categories a,
	.product_meta a,
	.ct-breadcrumbs a,
	.rs-catalog-notice a,
	.rs-footer .rs-footer__social a,
	.rs-footer .rs-footer__legal-links a,
	.rs-footer .rs-footer__menu a,
	/* A kezdőlapi szekció-fejléc „Összes termék" linkje 22 px volt — a
	   böngészős utómérés fogta meg, mert a fenti listából kimaradt. */
	.rs-section-head a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}
}

/* S2 — a kategória-leírás mobilon is látszódjon.
   A Blocksy alapértelmezése ELREJTI: inc/components/hero/elements.php,
   `description_visibility` → `mobile => false`, és a hozzá tartozó
   `.ct-hidden-sm{display:none !important}`. A forgalom 75%-a mobilról jön, és
   pont ezt a szöveget írtuk meg a bolt legfontosabb belépő oldalára (a
   Legyezők kategória hozta a Search Console-kattintások 73%-át) — tehát
   látszania kell. A Blocksy !important-ját csak !important veri; a felülírás
   ezért szándékosan szűk: kizárólag a leírás-blokkra céloz.
   (Ezt csak böngészős ellenőrzés fogta meg: a szöveg BENNE volt a HTML-ben,
   `display:none` alatt — a `curl | grep` szerint minden rendben volt.) */
.entry-header .page-description.ct-hidden-sm {
	display: block !important;
}

.entry-header .page-description {
	max-width: 62ch;
	margin-inline: auto;
	text-align: left;
}

.entry-header .page-description p {
	margin-bottom: 0.85em;
}

@media (max-width: 689px) {
	.entry-header .page-description {
		font-size: 0.9rem;
		line-height: 1.6;
	}
}

/* =========================================================================
 * Nyelvjavasló sáv (inc/nyelv-piac.php → rs_nyelvjavaslo_sav)
 *
 * Alapból `hidden` a HTML-ben; a JS veszi le róla, ha a böngésző nyelve
 * tényleg mást kér. Ezért NEM kell display:none — a [hidden] elvégzi.
 * Az `!important` szándékos: a Blocksy flex-szabályai felülírnák a
 * [hidden]-t, és a sáv mindenkinél megjelenne. (Ugyanaz a hibaosztály,
 * ami a select-eknél a globális form-resettel megesett.)
 * ========================================================================= */
.rs-nyelvjavaslat[hidden] {
	display: none !important;
}

.rs-nyelvjavaslat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	padding: 0.7rem 1.25rem;
	background: var(--rs-grey-050, #fafafa);
	border-bottom: 1px solid var(--rs-grey-200);
	font-size: 0.85rem;
	color: var(--rs-ink);
}

.rs-nyelvjavaslat__szoveg {
	margin: 0;
}

.rs-nyelvjavaslat__gomb {
	display: inline-flex;
	align-items: center;
	/* WCAG 2.5.8: a tap-target legalább 24 px — az U3/U5 lelet tanulsága. */
	min-height: 44px;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--rs-ink);
	background: var(--rs-ink);
	color: #ffffff;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}

.rs-nyelvjavaslat__gomb:hover,
.rs-nyelvjavaslat__gomb:focus-visible {
	background: transparent;
	color: var(--rs-ink);
}

.rs-nyelvjavaslat__elvet {
	min-height: 44px;
	padding: 0.4rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--rs-ink);
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.rs-nyelvjavaslat__elvet:hover,
.rs-nyelvjavaslat__elvet:focus-visible {
	color: var(--rs-accent-deep);
}

/* A lábléc nyelvválasztója a market-item rácsban ül — a --boxed változat
   szélessége tartalomhoz igazodik, nem nyúlik ki a rácsból. */
.rs-footer__market-item .rs-market-select--boxed {
	width: auto;
	max-width: 100%;
}

/* A piac-FELIRAT és a nyelv-VÁLASZTÓ vizuális elválasztása a fejlécben.
 *
 * MÉRT LELET (2026-09-03, Playwright): a kettő azonos fontot (IBM Plex Mono),
 * azonos színt (#050505) és mindössze 10 px rést kapott — így a
 * „Magyarország · HUF Ft  Magyar ⌄" EGYETLEN szövegfolyamnak látszott, és a
 * látogató nem tudhatta, hogy a második rész külön, kattintható vezérlő.
 *
 * A megoldás nem nagyobb rés (az csak lazítana a soron), hanem elválasztó
 * vonal + halványabb felirat: a felirat így háttér-információ, a választó a
 * hangsúlyos, interaktív elem. A #333333 fehéren 12,63:1 — WCAG AA bőven.
 */
#header .rs-header-market .rs-market-label {
	color: var(--rs-grey-700);
	padding-right: 0.9rem;
	border-right: 1px solid var(--rs-grey-200);
}

/* A választó marad teljes kontrasztú — ez különbözteti meg interaktívként. */
#header .rs-header-market .rs-nyelvvalaszto {
	color: var(--rs-ink);
}

/* ==========================================================================
   F2 — mini-kosár: olvasható terméknév a sötét panelen
   (István bejelentése, 2026-09-05)

   A HIBA: a kosár ikonjára húzva megnyíló Blocksy mini-kosár panelje SÖTÉT,
   a terméknév viszont sima link, tehát a globális
   `--theme-link-initial-color: var(--rs-ink)` (#050505) színt örökölte —
   fekete betű sötétszürke panelen, gyakorlatilag olvashatatlan. Az összeg és
   a gombok azért voltak jók, mert azoknak van saját, panelre szabott színük.

   A JAVÍTÁS a panelen belülre szorítkozik: NEM a globális link-színt írjuk át
   (az a világos hátterű oldalon helyes), csak a dropdownon belül állítjuk a
   szöveg- és link-színt fehérre. A `--theme-*` változókat a panel scope-jában
   írjuk felül, mert a Blocksy dinamikus CSS-e (`ct-main-styles-inline-css`) a
   child stíluslap UTÁN töltődik — egy sima `color` deklaráció alulmaradna,
   a változó-felülírás viszont az öröklődés gyökerénél fog.
   ========================================================================== */
.ct-cart-content,
.ct-cart-content .widget_shopping_cart_content {
	--theme-text-color: rgba(255, 255, 255, 0.86);
	--theme-link-initial-color: var(--rs-white);
	--theme-link-hover-color: var(--rs-accent-bright);
	--theme-headings-color: var(--rs-white);
}

/* A terméknév-link maga: a `a` szelektor a Woo sablonjából jön
   (`cart/mini-cart.php` → `woocommerce-mini-cart-item`). Explicit színt is
   adunk neki, hogy a változó-felülírást el nem érő Woo-szabályokat is verje. */
.ct-cart-content .woocommerce-mini-cart-item a:not(.remove),
.ct-cart-content .woocommerce-mini-cart-item a:not(.remove):visited {
	color: var(--rs-white);
}

.ct-cart-content .woocommerce-mini-cart-item a:not(.remove):hover,
.ct-cart-content .woocommerce-mini-cart-item a:not(.remove):focus {
	color: var(--rs-accent-bright);
}

/* A mennyiség/ár sor („3 × 4 490 Ft") halványabb fehér — másodlagos infó,
   de a 0.86-os alfa fekete panelen még bőven AA (≈13:1). */
.ct-cart-content .woocommerce-mini-cart-item .quantity {
	color: rgba(255, 255, 255, 0.86);
}