/**
 * URV WC Artwork Filter — Frontend styles
 * Version: 1.6.0
 * Author: urv.hu
 *
 * Prémium galéria-téma: fekete háttér, arany kiemelés, fehér szöveg, vékony
 * arany keret (PROJECT.md 7.4). A design tokenek a .wcaf-container scope-ba
 * vannak zárva, hogy ne szivárogjanak a témába. A Choices.js multiselect
 * stílusfelülírása szintén itt (a Choices CSS után töltődik).
 *
 * I5: a frontend.js él (AJAX, drawer/modal, Choices). A CSS megkapta a JS-vezérelt
 * állapotok megjelenését: betöltés-overlay (.is-loading), külső target betöltés
 * (.wcaf-is-loading) és a háttér-görgetés zárolása (html.wcaf-drawer-open /
 * html.wcaf-modal-open). A [hidden] attribútumot továbbra is a JS állítja.
 */

.wcaf-container,
.wcaf-pagination-wrap--standalone {
	/* Design tokenek */
	--wcaf-bg: #0a0a0a;
	--wcaf-bg-elev: #141414;
	--wcaf-gold: #c9a96a;
	--wcaf-gold-bright: #d4af37;
	--wcaf-text: #ffffff;
	--wcaf-text-muted: rgba(255, 255, 255, 0.6);
	--wcaf-border-color: rgba(201, 169, 106, 0.4);
	--wcaf-border: 1px solid var(--wcaf-border-color);
	--wcaf-radius: 10px;
	--wcaf-radius-sm: 6px;
	--wcaf-gap: 12px;
	--wcaf-disabled-opacity: 0.4;
	--wcaf-transition: 0.18s ease;

	color: var(--wcaf-text);
	box-sizing: border-box;
}

.wcaf-container *,
.wcaf-container *::before,
.wcaf-container *::after,
.wcaf-pagination-wrap--standalone *,
.wcaf-pagination-wrap--standalone *::before,
.wcaf-pagination-wrap--standalone *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Szűrődoboz alap
 * ------------------------------------------------------------------------ */

.wcaf-filter__panel {
	background: var(--wcaf-bg);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius);
	padding: 18px 20px;
}

.wcaf-filter__rows {
	display: flex;
	gap: 20px;
}

.wcaf-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.wcaf-row__title {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wcaf-gold);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Layout: horizontal
 * ------------------------------------------------------------------------ */

.wcaf-layout--horizontal .wcaf-filter__rows {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

.wcaf-layout--horizontal .wcaf-row {
	flex: 1 1 auto;
}

/* Sor-szélesség (asztali, csak horizontal layoutban értelmezett). Az 'auto' az
   alapértelmezett (flex:1 1 auto, fent); a fix szélességek felülírják. A gap
   (.wcaf-filter__rows gap:20px) miatt calc()-kal vonjuk le az arányos részt,
   hogy a sorok ne törjenek a kívántnál hamarabb. flex-wrap:wrap miatt
   sortörés van, ha nem fér ki. */
.wcaf-layout--horizontal .wcaf-row--w25 {
	flex: 0 0 calc(25% - 15px);
	max-width: calc(25% - 15px);
}

.wcaf-layout--horizontal .wcaf-row--w50 {
	flex: 0 0 calc(50% - 10px);
	max-width: calc(50% - 10px);
}

.wcaf-layout--horizontal .wcaf-row--w100 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Layout: vertical (oldalsáv)
 * ------------------------------------------------------------------------ */

.wcaf-layout--vertical {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.wcaf-layout--vertical .wcaf-filter {
	flex: 0 0 260px;
	max-width: 260px;
}

.wcaf-layout--vertical .wcaf-filter__rows {
	flex-direction: column;
	gap: 22px;
}

.wcaf-layout--vertical .wcaf-results {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Chip
 * ------------------------------------------------------------------------ */

.wcaf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcaf-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid var(--wcaf-border-color);
	border-radius: 999px;
	background: transparent;
	color: var(--wcaf-text);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color var(--wcaf-transition), background var(--wcaf-transition), color var(--wcaf-transition);
	user-select: none;
}

.wcaf-chip__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.wcaf-chip:hover {
	border-color: var(--wcaf-gold);
}

.wcaf-chip.is-checked {
	background: var(--wcaf-gold);
	border-color: var(--wcaf-gold);
	color: #0a0a0a;
	font-weight: 600;
}

.wcaf-chip.is-disabled {
	opacity: var(--wcaf-disabled-opacity);
	pointer-events: none;
	cursor: default;
}

.wcaf-chip__input:focus-visible + .wcaf-chip__label {
	outline: 2px solid var(--wcaf-gold-bright);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Checkbox-lista
 * ------------------------------------------------------------------------ */

.wcaf-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wcaf-checklist__item.is-disabled {
	opacity: var(--wcaf-disabled-opacity);
	pointer-events: none;
}

.wcaf-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 0.92rem;
	line-height: 1.3;
	position: relative;
}

.wcaf-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.wcaf-checkbox__mark {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--wcaf-border-color);
	border-radius: 4px;
	background: transparent;
	position: relative;
	transition: border-color var(--wcaf-transition), background var(--wcaf-transition);
}

.wcaf-checkbox__input:checked + .wcaf-checkbox__mark {
	background: var(--wcaf-gold);
	border-color: var(--wcaf-gold);
}

.wcaf-checkbox__input:checked + .wcaf-checkbox__mark::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #0a0a0a;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wcaf-checkbox__input:focus-visible + .wcaf-checkbox__mark {
	outline: 2px solid var(--wcaf-gold-bright);
	outline-offset: 2px;
}

.wcaf-checkbox:hover .wcaf-checkbox__mark {
	border-color: var(--wcaf-gold);
}

/* ---------------------------------------------------------------------------
 * Select (natív)
 * ------------------------------------------------------------------------ */

.wcaf-select-wrap {
	position: relative;
}

.wcaf-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 160px;
	padding: 9px 38px 9px 14px;
	background: var(--wcaf-bg-elev);
	color: var(--wcaf-text);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.92rem;
	cursor: pointer;
}

.wcaf-select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wcaf-gold);
	border-bottom: 2px solid var(--wcaf-gold);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.wcaf-select:focus-visible {
	outline: 2px solid var(--wcaf-gold-bright);
	outline-offset: 1px;
}

.wcaf-select option {
	background: var(--wcaf-bg-elev);
	color: var(--wcaf-text);
}

/* ---------------------------------------------------------------------------
 * Multiselect (natív fallback; Choices felülírás lent)
 * ------------------------------------------------------------------------ */

.wcaf-multiselect {
	width: 100%;
	min-width: 180px;
	padding: 8px 12px;
	background: var(--wcaf-bg-elev);
	color: var(--wcaf-text);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.92rem;
}

.wcaf-multiselect option:checked {
	background: var(--wcaf-gold);
	color: #0a0a0a;
}

/* ---------------------------------------------------------------------------
 * Modal sor
 * ------------------------------------------------------------------------ */

.wcaf-modal-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--wcaf-bg-elev);
	color: var(--wcaf-text);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color var(--wcaf-transition);
}

.wcaf-modal-trigger:hover {
	border-color: var(--wcaf-gold);
}

.wcaf-modal-trigger__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--wcaf-gold);
	color: #0a0a0a;
	font-size: 0.78rem;
	font-weight: 700;
}

.wcaf-modal-trigger__count[hidden] {
	display: none;
}

.wcaf-modal[hidden] {
	display: none;
}

.wcaf-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcaf-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.wcaf-modal__box {
	position: relative;
	width: min(520px, 92vw);
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: var(--wcaf-bg);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.wcaf-modal__head,
.wcaf-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
}

.wcaf-modal__head {
	border-bottom: var(--wcaf-border);
}

.wcaf-modal__foot {
	border-top: var(--wcaf-border);
	justify-content: flex-end;
}

.wcaf-modal__title {
	color: var(--wcaf-gold);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.wcaf-modal__close {
	background: none;
	border: none;
	color: var(--wcaf-text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.wcaf-modal__search {
	padding: 14px 20px 0;
}

.wcaf-modal__search-input {
	width: 100%;
	padding: 9px 14px;
	background: var(--wcaf-bg-elev);
	color: var(--wcaf-text);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.92rem;
}

.wcaf-modal__list {
	padding: 16px 20px;
	overflow-y: auto;
}

.wcaf-modal__apply {
	padding: 9px 22px;
	background: var(--wcaf-gold);
	color: #0a0a0a;
	border: none;
	border-radius: var(--wcaf-radius-sm);
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Aktív chipek
 * ------------------------------------------------------------------------ */

.wcaf-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--wcaf-border-color);
}

.wcaf-active[hidden] {
	display: none;
}

.wcaf-active__heading {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wcaf-text-muted);
	margin-right: 2px;
}

.wcaf-active__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcaf-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px 5px 12px;
	background: var(--wcaf-gold);
	color: #0a0a0a;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 600;
}

.wcaf-active-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #0a0a0a;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.wcaf-active__clear {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: transparent;
	border: 1px solid var(--wcaf-gold);
	border-radius: 999px;
	color: var(--wcaf-gold);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wcaf-active__clear:hover,
.wcaf-active__clear:focus-visible {
	background: var(--wcaf-gold);
	color: #0a0a0a;
	text-decoration: none;
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Eredmény / lapozó
 * ------------------------------------------------------------------------ */

.wcaf-results {
	margin-top: 24px;
	position: relative;
}

/* Betöltés-állapot: halványítás + kurzor; a JS .is-loading-ot tesz a results-ra. */
.wcaf-results.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--wcaf-transition);
}

.wcaf-results.is-loading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(10, 10, 10, 0.25);
	z-index: 5;
}

/* Külső (JetWoo) target betöltés-állapota, ha a renderünk oda megy. */
.wcaf-is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--wcaf-transition);
}

/* Háttér-görgetés zárolása nyitott drawer / modal alatt. */
html.wcaf-drawer-open,
html.wcaf-modal-open {
	overflow: hidden;
}

.wcaf-no-products {
	padding: 28px;
	text-align: center;
	color: var(--wcaf-text-muted);
	border: 1px dashed var(--wcaf-border-color);
	border-radius: var(--wcaf-radius);
}

.wcaf-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 28px;
}

.wcaf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	color: var(--wcaf-text);
	text-decoration: none;
	font-size: 0.9rem;
	transition: border-color var(--wcaf-transition), background var(--wcaf-transition), color var(--wcaf-transition);
}

.wcaf-pagination .page-numbers:hover {
	border-color: var(--wcaf-gold);
}

.wcaf-pagination .page-numbers.current {
	background: var(--wcaf-gold);
	border-color: var(--wcaf-gold);
	color: #0a0a0a;
	font-weight: 700;
}

.wcaf-pagination--load-more {
	margin-top: 28px;
}

.wcaf-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: transparent;
	color: var(--wcaf-gold);
	border: 1px solid var(--wcaf-gold);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background var(--wcaf-transition), color var(--wcaf-transition);
}

.wcaf-load-more:hover {
	background: var(--wcaf-gold);
	color: #0a0a0a;
}

/* ---------------------------------------------------------------------------
 * Drawer
 * ------------------------------------------------------------------------ */

.wcaf-drawer-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	background: transparent;
	color: var(--wcaf-gold);
	border: 1px solid var(--wcaf-gold);
	border-radius: var(--wcaf-radius-sm);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.wcaf-drawer-trigger[hidden] {
	display: none;
}

.wcaf-drawer-trigger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wcaf-drawer-trigger__icon svg {
	display: block;
}

/* Mobil-inline host: üres a DOM tetején (a trigger fölött). A mobile_inline
   sorok a DOM-ban a panelben maradnak (asztali nézet: normál hely, keret); a
   frontend.js mobilon ide MOZGATJA őket. Asztalin a host üres → elrejtve. */
.wcaf-mobile-inline-host {
	display: none;
}

.wcaf-mobile-inline-host:not(:empty) {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

/* A hostba mozgatott sor a normál sor-stílust viszi magával; mobilon alapból
   teljes szélességű (a sor-szélesség szabályok lentebb, a media query-ben). */

/* A horizontal/vertical panel mobil-fejléce (close gomb) asztali nézetben rejtett;
   mobilon a 768px media query mutatja. */
.wcaf-drawer-panel__head--mobile {
	display: none;
}

/* Scroll-jelzés: a görgethető sorlista alján/tetején halvány árnyék jelzi, hogy
   van még tartalom. A háttérrel megegyező szín fölé tett gradiensek; csak akkor
   láthatók ténylegesen, ha a tartalom túlnyúlik (a böngésző a sticky-szerű
   háttér-attachmenttel ezt automatikusan kezeli). */
.wcaf-filter__rows[data-wcaf-scroll] {
	overflow-y: auto;
}

.wcaf-filter__rows[data-wcaf-scroll].wcaf-scroll--top::before,
.wcaf-filter__rows[data-wcaf-scroll].wcaf-scroll--bottom::after {
	content: "";
	position: sticky;
	left: 0;
	right: 0;
	height: 24px;
	pointer-events: none;
	display: block;
	z-index: 2;
}

.wcaf-filter__rows[data-wcaf-scroll].wcaf-scroll--top::before {
	top: 0;
	margin-bottom: -24px;
	background: linear-gradient(to bottom, var(--wcaf-bg-elev, #141414), transparent);
}

.wcaf-filter__rows[data-wcaf-scroll].wcaf-scroll--bottom::after {
	bottom: 0;
	margin-top: -24px;
	background: linear-gradient(to top, var(--wcaf-bg-elev, #141414), transparent);
}

.wcaf-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, 0.7);
}

.wcaf-drawer-overlay[hidden] {
	display: none;
}

/* Drawer panel: fixed, jobbról becsúszva. A becsúszás-állapotot a JS [hidden]
   attribútuma vezérli (display:block + transform). */
.wcaf-drawer-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	width: min(360px, 88vw);
	max-width: 88vw;
	border-radius: 0;
	overflow-y: auto;
	box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
	transform: translateX(0);
	transition: transform var(--wcaf-transition);
}

.wcaf-drawer-panel[hidden] {
	display: block;
	transform: translateX(100%);
	pointer-events: none;
}

.wcaf-drawer-panel .wcaf-filter__rows {
	flex-direction: column;
	gap: 22px;
}

.wcaf-drawer-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: var(--wcaf-border);
}

.wcaf-drawer-panel__title {
	color: var(--wcaf-gold);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.wcaf-drawer-close {
	background: none;
	border: none;
	color: var(--wcaf-text);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Admin hibaüzenet (frontend, csak jogosultnak)
 * ------------------------------------------------------------------------ */

.wcaf-admin-error {
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * Choices.js felülírás (multiselect) — a téma tokeneire húzva
 * ------------------------------------------------------------------------ */

.wcaf-container .choices {
	margin-bottom: 0;
}

.wcaf-container .choices__inner {
	background: var(--wcaf-bg-elev);
	border: var(--wcaf-border);
	border-radius: var(--wcaf-radius-sm);
	color: var(--wcaf-text);
	min-height: 42px;
}

.wcaf-container .choices__list--dropdown,
.wcaf-container .choices__list[aria-expanded] {
	background: var(--wcaf-bg-elev);
	border: var(--wcaf-border);
	color: var(--wcaf-text);
}

.wcaf-container .choices__list--multiple .choices__item {
	background: var(--wcaf-gold);
	border-color: var(--wcaf-gold);
	color: #0a0a0a;
	border-radius: 999px;
	font-weight: 600;
}

.wcaf-container .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: rgba(201, 169, 106, 0.18);
}

.wcaf-container .choices__input {
	background: transparent;
	color: var(--wcaf-text);
}

/* ---------------------------------------------------------------------------
 * Reszponzív: 768px alatt minden layout drawer-triggerre vált
 * ------------------------------------------------------------------------ */

@media (max-width: 768px) {

	.wcaf-layout--horizontal,
	.wcaf-layout--vertical {
		display: block;
	}

	.wcaf-layout--horizontal .wcaf-filter,
	.wcaf-layout--vertical .wcaf-filter {
		max-width: none;
		flex: none;
	}

	/* Mobil sor-szélesség: alapból MINDEN sor teljes szélességű (a fixált is). A
	   sor mobile_width beállítása felülírja. width-alapon adjuk meg, hogy a panel
	   (column-flex drawer) és a mobil-inline host (row-flex) kontextusban egyaránt
	   a szélességet állítsa, ne a fő tengelyt. Az asztali width-class-okat
	   (--w25/--w50/--w100) itt semlegesítjük. */
	.wcaf-row,
	.wcaf-layout--horizontal .wcaf-row,
	.wcaf-layout--horizontal .wcaf-row--w25,
	.wcaf-layout--horizontal .wcaf-row--w50,
	.wcaf-layout--horizontal .wcaf-row--w100 {
		flex: 0 1 auto;
		width: 100%;
		max-width: 100%;
	}

	.wcaf-row--mw50 {
		width: calc(50% - 8px);
		max-width: calc(50% - 8px);
	}

	.wcaf-row--mw-auto {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
	}

	/* A trigger előbújik, a panel drawerként viselkedik. A [hidden]-t a JS állítja;
	   JS nélkül (no-JS) a panel inline marad, hogy a szűrő használható legyen. */
	.wcaf-js .wcaf-layout--horizontal .wcaf-drawer-trigger,
	.wcaf-js .wcaf-layout--vertical .wcaf-drawer-trigger {
		display: inline-flex;
	}

	.wcaf-js .wcaf-layout--horizontal .wcaf-filter__panel,
	.wcaf-js .wcaf-layout--vertical .wcaf-filter__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		width: min(360px, 88vw);
		max-width: 88vw;
		border-radius: 0;
		overflow-y: auto;
		box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
		transform: translateX(100%);
		transition: transform var(--wcaf-transition);
	}

	.wcaf-js .wcaf-layout--horizontal .wcaf-filter__panel.is-open,
	.wcaf-js .wcaf-layout--vertical .wcaf-filter__panel.is-open {
		transform: translateX(0);
	}

	/* A mobil panel-fejléc (cím + bezárás gomb) megjelenik a fiókban. */
	.wcaf-js .wcaf-layout--horizontal .wcaf-drawer-panel__head--mobile,
	.wcaf-js .wcaf-layout--vertical .wcaf-drawer-panel__head--mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 3;
	}

	/* A sorlista a fejléc alatt görgethető; a scroll-jelzés (::before/::after) így jelez. */
	.wcaf-js .wcaf-layout--horizontal .wcaf-filter__panel,
	.wcaf-js .wcaf-layout--vertical .wcaf-filter__panel {
		display: flex;
		flex-direction: column;
	}

	.wcaf-js .wcaf-layout--horizontal .wcaf-filter__rows[data-wcaf-scroll],
	.wcaf-js .wcaf-layout--vertical .wcaf-filter__rows[data-wcaf-scroll] {
		flex: 1 1 auto;
		min-height: 0;
	}

	.wcaf-modal__box {
		width: 96vw;
		max-height: 88vh;
	}

	/* Mobil trigger pozíció: sticky (a képernyő aljára rögzített) vs inline (a szűrő helyén). */
	.wcaf-js [data-wcaf-mobile-trigger="sticky"] .wcaf-drawer-trigger {
		position: fixed;
		left: 50%;
		bottom: 16px;
		transform: translateX(-50%);
		z-index: 9998;
		background: var(--wcaf-gold);
		color: #0a0a0a;
		border-color: var(--wcaf-gold);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
		padding: 12px 26px;
	}

	/* Sticky módban a trigger lebeg; adjunk alsó teret, hogy ne takarjon tartalmat. */
	.wcaf-js [data-wcaf-mobile-trigger="sticky"] .wcaf-results {
		padding-bottom: 72px;
	}
}