/* ==========================================================================
   shop.css, a terméklista: kategória, márkaarchívum, termék-keresés, kedvencek.
   Csak ezeken az oldalakon töltődik be, lásd inc/assets.php.
   MINDEN SZÁM a DESIGN-SPEC.md 7. és 8. fejezetéből jön,
   ami böngészőből, getComputedStyle()-lal, 1440 px-es viewporton MÉRT érték.
   Ahol a mért számot pixelben írjuk ki (és nem tokenből), ott ez az indok: a
   token-skála 4-es lépésű, a referencia viszont 5-ös és 10-es lépésekben
   dolgozik, tehát a 10, 12, 18, 24, 46, 56 px értékekre nincs token, és
   kerekítve elcsúszna a kártya belső ritmusa.
   A termékkártya a bolt legtöbbet renderelt eleme: egy 24 termékes listán
   huszonnégyszer jelenik meg, tehát minden szabály huszonnégyszer számít.
   ========================================================================== */
.page-head {
	padding-block: var(--sp-2) 0;
}
.page-head__title {
	letter-spacing: 0;
	text-wrap: balance;
}
.subcats {
	margin-bottom: var(--sp-8);
}
.subcats .row {
	row-gap: var(--gutter);
}
/* AZ ALKATEGORIA-KARTYA KERETE (kliens-keres). Ugyanaz az 1 pixeles
   saddlebrown vonal, mint a termekkartyan es a kategoria-csempeken. A
   `box-sizing: border-box` a temaban globalis, tehat a vonal a kartya BELSO
   helyebol jon, a racs oszlopszelessege nem valtozik. */
.subcat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	height: 100%;
	padding: var(--sp-4) var(--sp-3);
	border: 1px solid saddlebrown;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	color: var(--c-text);
	text-align: center;
	text-decoration: none;
	box-shadow: var(--sh-panel);
	transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.subcat:hover {
	box-shadow: var(--sh-md);
	color: var(--c-primary);
	text-decoration: none;
}
.subcat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 204px;
	aspect-ratio: 1;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.subcat__media:empty {
	display: none;
}
.subcat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.subcat__name {
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}
.subcat__count {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text-mute);
}
.shop--sidebar {
	display: grid;
	gap: var(--sp-8);
}
@media (min-width: 1280px) {
	.shop--sidebar {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--sp-10);
	}
}
.shop__aside {
	align-self: start;
}
/* A KATEGORIAKEP az oldalsav tetejen, a szurovel egyezo kartyaban, a kartyak
   kozotti 20 pixeles terkozzel (.rv). A forrasban negyzetes, allo (572x1024)
   es fekvo (1024x571) kep is van, ezert nem vagjuk: a kep aranyosan fer bele,
   a magassagot a max-height fogja meg. Kep eseten a fej (cim, leiras) a lista
   hasabjaba kerul, es a teteje a kep tetejevel egy vonalban all. */
.shop__catimg {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
}
.shop__catimg-img {
	display: block;
	border-radius: var(--r-sm);
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: contain;
}
.shop--catimg .shop__main > .page-head {
	padding-top: 0;
}
@media (min-width: 1280px) {
	.shop--catimg .subcats .col-xl-2 {
		width: 25%;
	}
}
@media (max-width: 1279px) {
	.shop__catimg {
		margin: 0;
	}
	.shop__catimg-img {
		max-height: 220px;
	}
}
/* MOBILON TELJES SZELESSEG (kliens-keres): a kep a kartya szeletol szeleig
   er, belso margo nelkul. Az allo kepet negyzetre vagjuk (cover), kulonben egy
   572x1024-es kep 390 pixeles telefonon 626 pixel magas lenne, es a cim a
   hajtas ala csuszna. A negyzetes es a fekvo kep vagatlan marad. */
@media (max-width: 767px) {
	.shop__catimg {
		padding: 0;
		overflow: hidden;
	}
	.shop__catimg-img {
		width: 100%;
		max-height: calc(100vw - 40px);
		object-fit: cover;
	}
}
.pf-drawer {
	position: static;
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	overflow: visible;
}
/* 1280 PIXEL FÖLÖTT A SZŰRŐ A RÁCS RENDES ELEME, tehát már az ELSŐ festéskor
   látszik, JavaScript nélkül is. Egy nem nyitott <dialog>-ot a böngésző
   `display: none`-nal rejt, ezért itt kell visszaadni. Korábban ezt a szerver
   `open` attribútuma oldotta meg, az viszont 1280 ALATT bal oldali fiókká
   nyitotta a panelt a betöltés idejére: lásd a template-parts/shop-filters.php
   indoklását. */
@media (min-width: 1280px) {
	.pf-drawer {
		display: block;
	}
}
/* Tartalék út: ha van JavaScript, de a böngésző nem tudja a <dialog>-ot, a
   shop.js ezt az osztályt adja, és a panel a lap folyamában marad. */
.pf-drawer--static {
	display: block;
}
.pf-drawer::backdrop {
	background: rgba(5, 29, 51, 0.28);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.pf__close,
.pf-bar {
	display: none;
}
@media (max-width: 1279px) {
	.pf-drawer[open] {
		position: fixed;
		inset: 0 auto 0 0;
		width: 320px;
		max-width: calc(100vw - var(--sp-8));
		height: 100%;
		max-height: none;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: pf-drawer-in var(--dur-mc) var(--ease-mc);
	}
	.pf-drawer[open] .pf {
		min-height: 100%;
		border-radius: 0;
		box-shadow: none;
	}
	.pf__close {
		order: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		margin-left: var(--sp-2);
		border: 0;
		border-radius: var(--r-sm);
		background: none;
		color: var(--c-text);
	}
	.pf__close:hover {
		background: var(--c-bg);
	}
	.pf__close svg {
		width: 16px;
		height: 16px;
	}
	.pf-bar {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		margin-bottom: var(--sp-4);
		padding-block: var(--sp-3);
		background: var(--c-bg);
	}
	.pf-bar__open {
		gap: var(--sp-2);
	}
	.pf-bar__open svg {
		width: 16px;
		height: 16px;
	}
}
@keyframes pf-drawer-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pf-drawer[open] {
		animation: none;
	}
}
.pf {
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
}
.pf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}
.pf__title {
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}
.pf__wipe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-sm);
	background: var(--c-page);
	color: var(--c-text-mute);
}
.pf__wipe:hover {
	color: var(--c-sale);
	text-decoration: none;
}
.pf__wipe--off {
	color: var(--c-line);
	cursor: default;
}
.pf__wipe svg {
	width: 16px;
	height: 16px;
}
@media (pointer: coarse) {
	.pf__wipe {
		width: 44px;
		height: 44px;
	}
}
.pf__group {
	border-bottom: 1px solid var(--c-line);
}
.pf__sum {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 48px;
	padding-block: var(--sp-3);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}
.pf__sum::-webkit-details-marker {
	display: none;
}
.pf__sum > span:first-child {
	flex: 1 1 auto;
}
.pf__sum svg {
	width: 14px;
	height: 14px;
	color: var(--c-text-mute);
	transition: transform var(--dur) var(--ease);
}
.pf__group[open] > .pf__sum svg {
	transform: rotate(180deg);
}
.pf__count {
	min-width: 20px;
	padding: 0 5px;
	border-radius: var(--r-full);
	background: var(--c-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.pf__body {
	padding-bottom: var(--sp-4);
}
.pf__body--scroll {
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pf__opt {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 32px;
	padding: var(--sp-1) 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
	line-height: 1.4;
}
.pf__opt:hover {
	color: var(--c-primary);
	text-decoration: none;
}
.pf__opt-name {
	flex: 1 1 auto;
}
.pf__opt-num {
	color: var(--c-text-mute);
	font-size: var(--fs-xs);
}
.pf__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--c-line);
	border-radius: 3px;
	background: var(--c-surface);
	color: transparent;
	flex-shrink: 0;
}
.pf__box svg {
	width: 12px;
	height: 12px;
}
.pf__opt.is-on {
	font-weight: 700;
}
.pf__opt.is-on .pf__box {
	border-color: var(--c-primary);
	background: var(--c-primary);
	color: #fff;
}
.pf__opt--cat {
	padding-left: 0;
}
.pf__slider {
	position: relative;
	height: 24px;
	margin-bottom: var(--sp-4);
}
.pf__track {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--r-full);
	background: var(--c-line);
}
.pf__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: var(--r-full);
	background: var(--c-primary);
}
.pf__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	pointer-events: none;
}
.pf__range:focus {
	box-shadow: none;
	outline: none;
}
.pf__range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-primary);
	border-radius: var(--r-full);
	background: var(--c-surface);
	appearance: none;
	pointer-events: auto;
	cursor: grab;
}
.pf__range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-primary);
	border-radius: var(--r-full);
	background: var(--c-surface);
	pointer-events: auto;
	cursor: grab;
}
.pf__range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--c-focus);
	outline-offset: 2px;
}
.pf__range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--c-focus);
	outline-offset: 2px;
}
.pf__range-fields {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
}
.pf__field {
	flex: 1 1 0;
	min-width: 0;
}
.pf__field label {
	margin-bottom: 2px;
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--c-text-mute);
}
.pf__field input {
	font-size: var(--fs-sm);
	text-align: right;
}
.pf__num {
	position: relative;
	display: block;
}
.pf__num:has(.pf__step:not([hidden])) input {
	padding-right: calc(22px + var(--sp-2));
}
.pf__step {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: flex;
	flex-direction: column;
	width: 22px;
	border-left: 1px solid var(--c-line-soft);
	border-radius: 0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 0;
	overflow: hidden;
}
.pf__step[hidden] {
	display: none;
}
.pf__step button {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0;
	color: var(--c-text-mute);
	touch-action: manipulation;
	user-select: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pf__step button + button {
	border-top: 1px solid var(--c-line-soft);
}
.pf__step button:hover {
	background: var(--c-page);
	color: var(--c-primary-aa);
}
.pf__step button:active {
	background: var(--c-line-soft);
}
.pf__step .icon {
	width: 12px;
	height: 12px;
}
.pf__step button:first-child .icon {
	transform: rotate(180deg);
}
@media (max-width: 767px) {
	.pf__step {
		width: 28px;
	}
	.pf__num:has(.pf__step:not([hidden])) input {
		padding-right: calc(28px + var(--sp-2));
	}
}
.pf__unit {
	padding-bottom: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-text-mute);
}
.pf__hint {
	margin: calc(-1 * var(--sp-1)) 0 var(--sp-3);
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-text-mute);
}
.pf__hint[hidden] {
	display: none;
}
.pf__go {
	width: 100%;
}
.pf__reset {
	width: 100%;
	margin-top: var(--sp-4);
	color: var(--c-text-mute);
}
.pf__reset[aria-disabled="true"] {
	border-color: var(--c-line-soft);
	background: var(--c-page);
	color: var(--c-line-soft);
	cursor: not-allowed;
}
.pf__reset svg {
	width: 14px;
	height: 14px;
}
.shop__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}
.shop__count {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-mute);
}
.shop__count b {
	color: var(--c-text);
	font-weight: 700;
}
.shop__tools {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.shop__view {
	display: flex;
	gap: var(--sp-1);
}
.shop__view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-sm);
	color: var(--c-text-mute);
}
.shop__view-btn:hover {
	color: var(--c-primary);
	text-decoration: none;
}
.shop__view-btn.is-active {
	color: var(--c-primary);
}
.shop__view-btn svg {
	width: 18px;
	height: 18px;
}
.shop__sort {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.shop__sort select {
	width: auto;
	min-width: 200px;
	font-size: var(--fs-xs);
	line-height: 1.5;
}
@media (pointer: coarse) {
	.shop__view-btn {
		width: 44px;
		height: 44px;
	}
}
.qv-modal {
	width: min(1100px, calc(100vw - var(--sp-8)));
	max-width: none;
	max-height: calc(100vh - var(--sp-8));
	padding: 0;
	border: 0;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: 0 0 60px 0 rgba(5, 29, 51, 0.18);
	overflow: hidden;
}
.qv-modal::backdrop {
	background: rgba(5, 29, 51, 0.45);
}
.qv-modal__close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text-soft);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.qv-modal__close:hover {
	border-color: var(--c-primary);
	color: var(--c-primary-dark);
}
.qv-modal__close svg {
	width: 16px;
	height: 16px;
}
.qv-modal__body {
	max-height: calc(100vh - var(--sp-8));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.qv-modal__loading {
	margin: 0;
	padding: var(--sp-10);
	color: var(--c-text-soft);
	text-align: center;
}
.qv__head {
	padding: var(--sp-5) 56px var(--sp-5) var(--sp-6);
	background: var(--c-cream);
}
.qv__sku {
	margin: 0 0 var(--sp-1);
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
}
.qv__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 900;
	line-height: 1.25;
}
.qv__title a {
	color: var(--c-text);
}
.qv__body {
	display: grid;
	gap: var(--sp-6);
	padding: var(--sp-6);
}
@media (min-width: 768px) {
	.qv__body {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: var(--sp-8);
	}
}
.qv__main {
	margin: 0;
}
.qv__main img,
.qv__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}
/* BELYEGKEP-SAV A GYORSNEZETBEN. Ugyanaz a viselkedes, mint a
   termekoldalon: nyilakkal es huzassal lepteto sav, rendszer-gorgetosav
   nelkul. A nyilak a szerverrol LETILTVA jonnek, es a shop.js kapcsolja be
   oket, ha a sav tenyleg tulcsordul. */
.qv__strip {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}
.qv__arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 56px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-primary-aa);
}
.qv__arrow[disabled] {
	color: var(--c-line-soft);
	cursor: default;
}
.qv__arrow .icon {
	width: 16px;
	height: 16px;
}
.qv__thumbs {
	display: flex;
	flex: 1 1 auto;
	gap: var(--sp-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	min-width: 0;
	scrollbar-width: none;
}
.qv__thumbs::-webkit-scrollbar {
	display: none;
}
@media (hover: hover) and (pointer: fine) {
	.qv__strip.is-scrollable .qv__thumbs {
		cursor: grab;
	}
	.qv__thumbs.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
	.qv__thumbs.is-dragging img {
		-webkit-user-drag: none;
	}
}
@media (pointer: coarse) {
	.qv__arrow {
		width: 40px;
		height: 56px;
	}
}
.qv__thumb {
	flex: 0 0 auto;
	width: 72px;
	padding: var(--sp-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
}
.qv__thumb.is-active {
	border-color: var(--c-primary);
}
.qv__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}
.qv__price {
	font-size: var(--fs-2xl);
	font-weight: 900;
	line-height: 1.2;
	color: var(--c-primary-dark);
}
.qv__price del {
	margin-right: var(--sp-2);
	color: var(--c-text-soft);
	font-size: var(--fs-md);
	font-weight: 400;
}
.qv__price ins {
	text-decoration: none;
}
.qv__unit {
	margin: var(--sp-1) 0 0;
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
}
.qv__params {
	margin: var(--sp-5) 0 0;
	font-size: var(--fs-base);
}
.qv__param {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	border-top: 1px solid var(--c-line);
}
.qv__param:first-child {
	border-top: 0;
}
.qv__param dt {
	color: var(--c-text-soft);
}
.qv__param dd {
	margin: 0;
	font-weight: 700;
	word-break: break-word;
}
.qv__lead {
	margin-top: var(--sp-5);
	color: var(--c-text-soft);
	font-size: var(--fs-base);
	line-height: 1.6;
}
.qv__buy {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}
.qv__buy .card__main {
	flex: 1 1 auto;
	margin-top: 0;
}
.qv__more {
	display: inline-block;
	margin-top: var(--sp-4);
	color: var(--c-primary-dark);
	font-size: var(--fs-sm);
	font-weight: 700;
}
ul.products {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--gutter) / -2);
	row-gap: var(--gutter);
	margin-block: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1480px) {
	:where(.prose, .cross-sells, .shop__main) ul.products:not(.carousel__track):not(.products--list) > .card {
		width: 20%;
	}
	.shop--sidebar .shop__main ul.products:not(.products--list) > .card {
		width: 25%;
	}
}
/* A KEDVENCEK LAP RACSA. A kartya alapbol col-md-4, tehat 768 px-tol harom
   hasab. A kategorialapon ez helyes, ott a lista az oldalsav melletti szukebb
   savban all. A kedvencek lapja viszont teljes szelessegu, es ott a harom
   hasab tulmeretezett: MERVE 1361 px-es ablakon 442 px-es kartyak. 992-tol
   1480-ig ezert negy hasab. 1480 folott a fenti .prose szabaly ugyis atveszi
   (ot hasab), 992 alatt pedig a harom hasab meg kenyelmes. */
@media (min-width: 992px) and (max-width: 1479.98px) {
	.wl-lista ul.products:not(.products--list) > .card {
		width: 25%;
	}
}
ul.products > .card {
	padding-inline: calc(var(--gutter) / 2);
	padding-top: 12px;
}
.prose .products {
	padding-left: 0;
	list-style: none;
}
.prose .products > .card + .card {
	margin-top: 0;
}
.card {
	position: relative;
}
/* AZ IKONSAV A KARTYA JOBB FELSO SARKABOL EMELKEDIK KI (kliens-keres): 5
   pixellel a kartya folott es 5 pixellel a jobb szelen tul, es a kerete CSAK
   FELUL ES JOBBRA van. Igy a ket megrajzolt vonal a kiemelkedo doboz KULSO
   sarkat adja, a sav pedig felemelt fulnek latszik, nem raragasztott doboznak.
   .
   AZ ELTOLAS A KARTYA BELSO DOBOZAHOZ (`.card__inner`) VAN MERVE, nem a `.card`
   kulso szelehez, es ez MERT javitas. Az `absolute` elem szamitasi alapja a
   szulo BELSO MARGOS doboza, tehat a `top: 0` es a `right: 0` a `.card` kulso
   szelere tette a savot, a feher kartya viszont a `.card` belso margoja MOGOTT
   kezdodik. MERVE a racsban: a sav igy 12 pixellel a kartya fole es 10
   pixellel melle nyult, tehat a kiemelkedes se felul, se oldalt nem az volt,
   aminek latszania kell.
   .
   AZ ELTOLAS ERTEKE KLIENS-DONTES, es MINDEN NEZETBEN UGYANAZ (`top: 4px`,
   `right: 3px`), tehat egy szabaly szolgalja a racsot es a sint is. A ket nezet
   kiemelkedese ELTER, es ez a szamitasi alap kovetkezmenye: a racsban a `.card`
   oldalso belso margoja fel racsres (10 pixel), tehat a sav 7 pixellel a feher
   doboz jobb szelen TUL kerul, a sinen ellenben nincs oldalso belso margo,
   tehat ott 3 pixellel a feher dobozon BELUL all. */
.card__tools {
	position: absolute;
	top: 4px;
	right: 3px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 6px 12px;
	border: 0;
	border-top: 1px solid saddlebrown;
	border-right: 1px solid saddlebrown;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: none;
}
.card__tools .card__wish,
.card__tools .card__quick {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	margin-left: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--c-text);
}
.card__tools .card__wish svg,
.card__tools .card__quick svg {
	width: 24px;
	height: 24px;
	max-width: none;
}
.card__tools [data-tip],
.sp-share [data-tip] {
	position: relative;
}
.card__tools [data-tip]::after,
.card__tools [data-tip]::before,
.sp-share [data-tip]::after,
.sp-share [data-tip]::before {
	position: absolute;
	z-index: 4;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.card__tools [data-tip]::after,
.sp-share [data-tip]::after {
	content: attr(data-tip);
	top: calc(100% + 10px);
	right: 0;
	padding: 6px 12px;
	border-radius: var(--r-sm);
	background: var(--c-surface);
	box-shadow: 0 2px 12px 0 rgba(5, 29, 51, 0.14);
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}
.card__tools [data-tip]::before,
.sp-share [data-tip]::before {
	content: "";
	top: calc(100% + 4px);
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -6px;
	border-width: 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent var(--c-surface);
}
.card__tools [data-tip]::before {
	filter: drop-shadow(0 -1px 1px rgba(5, 29, 51, 0.12));
}
.card__tools [data-tip]:hover::after,
.card__tools [data-tip]:hover::before,
.card__tools [data-tip]:focus-visible::after,
.card__tools [data-tip]:focus-visible::before,
.sp-share [data-tip]:hover::after,
.sp-share [data-tip]:hover::before,
.sp-share [data-tip]:focus-visible::after,
.sp-share [data-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur) var(--ease), visibility 0s;
}
.sp-share [data-tip]::after {
	top: auto;
	bottom: calc(100% + 10px);
}
.sp-share [data-tip]::before {
	top: auto;
	bottom: calc(100% + 4px);
	border-width: 6px 6px 0;
	border-color: var(--c-surface) transparent transparent;
	filter: drop-shadow(0 1px 1px rgba(5, 29, 51, 0.12));
}
@media (hover: none) {
	.card__tools [data-tip]::after,
	.card__tools [data-tip]::before,
	.sp-share [data-tip]::after,
	.sp-share [data-tip]::before {
		content: none;
	}
}
.card__quick {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--dur) var(--ease);
}
.card__quick:hover {
	color: var(--c-primary-dark);
}
@media (pointer: coarse) {
	.card__tools {
		gap: var(--sp-4);
		padding: 10px 14px;
	}
	.card__tools .card__wish,
	.card__tools .card__quick {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
	}
}
/* A KARTYA KERETE (kliens-keres, minden nezetben). A `box-sizing: border-box`
   a temaban globalis, tehat az 1 pixel a kartya BELSO helyebol jon, a rács
   oszlopszelessege nem valtozik. */
.card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px 20px 24px;
	border: 1px solid saddlebrown;
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
	transition: box-shadow var(--dur) var(--ease);
}
.card__inner:hover {
	box-shadow: var(--sh-lg);
}
.card__badges {
	position: absolute;
	top: 0;
	left: 6px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	pointer-events: none;
}
.badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-primary);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
}
.badge--enquire {
	border-color: var(--c-pink-accent);
	background: var(--c-pink-wash);
}
.card__coupon {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 24px;
	margin-top: 0;
	margin-bottom: 6px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-pink-accent);
	border-radius: var(--r-sm);
	background: var(--c-pink-wash);
	color: var(--c-text);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
/* AZ `overflow: hidden` A KEP-NAGYITAS MIATT KELL (lentebb): nelkule a
   nagyitott kep kilogna a media-dobozbol, es a szomszedos kartya fole erne.
   A jelvenyeket NEM vagja le, mert azok a `.card`-hoz vannak pozicionalva, nem
   ide. */
.card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-top: 24px;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.card__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}
.card__img--placeholder {
	opacity: 0.35;
	padding: var(--sp-8);
}
/* A TERMEKKEP FINOM NAGYITASA A KARTYARA HUZVA (kliens-keres). A trigger az
   EGESZ kartya, nem a kep, tehat a nagyitas akkor is elindul, ha a kurzor az
   aron vagy a nevn all: ugyanaz a dontes, mint a nev szinezodesenel es a kosar
   soroknal.
   .
   AZ ARANY 1.04, UGYANANNYI, mint a kategoria-csempeken (category-tiles.css),
   hogy a ket racs ugyanazt a mozgast adja. A `transform` es az `opacity` a ket
   olcso animalhato tulajdonsag, tehat ez nem okoz ujratordelest.
   .
   A `transition` A KEPEN AL, NEM A HOVER-SZABALYBAN, kulonben a visszaallas
   ugras lenne: a hover megszunesevel a hover-szabaly (es vele az atmenet) is
   eltunik. Igy a kifele mozgas ugyanolyan hosszu, mint a befele. */
@media (prefers-reduced-motion: no-preference) {
	.card__img {
		transition: transform var(--dur) var(--ease);
	}
	.card:hover .card__img {
		transform: scale(1.04);
	}
}
.card__data {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin-top: 10px;
}
/* A TERMEKNEV SOSEM VAGODIK LE (kliens-keres).
   .
   Korabban ket sorra volt levagva (`-webkit-line-clamp: 2`), harom ponttal. Ez
   egyenletes kartya-magassagot adott, de a hosszu neveknel a lenyeg maradt
   kint: a kiszereles, a darabszam es a valtozat epp a nev vegen all
   ("... Duó Csomag (2 x 60 db)"), tehat a levagas pont azt vitte el, amiert a
   vasarlo a nevet olvassa.
   .
   A `min-height` MARAD, es ez nem maradek: a rovid nevek igy is ket sor helyet
   foglalnak, tehat egy soron belul a kartyak also savja (ar, gomb) egy
   vonalban all. A hosszabb nevek ezen tulnyulnak, es a sor magassaga hozzajuk
   igazodik: a flex-sor minden kartyaja a legmagasabbhoz nyulik, tehat a
   kartyak akkor is egyforma magasak maradnak. */
.card__title {
	min-height: calc(2 * 18.2px);
	margin-bottom: 10px;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: initial;
}
.card__title a {
	color: var(--c-text);
	transition: color var(--dur) var(--ease);
}
/* A NEV AZ EGESZ KARTYARA HUZVA SZINEZODIK (kliens-keres), nem csak magara a
   nevre. A kartya egyetlen dolog: egy termek, tehat a rea mutatas celpontja is
   egy. Igy a ket soros nev helyett a teljes kartya jelzi vissza, hol all az
   egér, es a kartya arnyek-kiemelese meg a nev szinvaltasa EGYUTT tortenik.
   .
   A KET SZELEKTOR EGY SZABALYBAN ALL, ugyanazzal a szinnel. Ket kulonbozo
   hover-szin azt jelentene, hogy a szin a kartyan BELULI pozíciótól fugg,
   amire a latogatonak nincs magyarazata. Ugyanez a dontes, mint a kosar
   tetelsorainal (account.css `.cart-table__row:hover`). */
.card:hover .card__title a,
.card__title a:hover {
	color: var(--c-primary);
	text-decoration: none;
}
.card__stock {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
	color: var(--c-green);
	font-size: var(--fs-xs);
	line-height: 1.5;
}
.card__stock svg {
	width: 14px;
	height: 14px;
}
.card__stock--out {
	color: var(--c-text-mute);
}
.card__prices {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 50px;
	margin-bottom: 10px;
}
.card__prices--sale {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: end;
	column-gap: 10px;
	row-gap: 5px;
}
.card__off {
	display: flex;
	grid-row: 1 / 3;
	align-items: center;
	align-self: center;
	justify-content: center;
	min-width: 56px;
	min-height: 48px;
	padding: 0 5px;
	border: 1px solid var(--c-primary);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-primary);
	font-size: var(--fs-md);
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}
.card__was {
	grid-column: 2;
	grid-row: 1;
	color: var(--c-text-mute);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.card__was .price-info,
.card__rrp .price-info {
	text-decoration: none;
}
.price-info {
	display: inline-flex;
	vertical-align: -2px;
	margin-left: 4px;
	color: var(--c-text-mute);
	cursor: help;
}
.price-info svg {
	width: 14px;
	height: 14px;
}
.card__now {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: var(--c-primary);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.card__rrp {
	color: var(--c-text-mute);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: 1.2;
}
.card__price {
	margin: 0;
	color: var(--c-text);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.2;
}
@media (max-width: 767px) {
	.card__price {
		font-size: 18px;
	}
}
/* A NETTO AR A BRUTTO FO AR ALATT (kliens-keres). A bolt arai bruttok, a
   vasarlok egy resze viszonteladó, akit a netto erdekel.
   .
   HALVANY ES KICSI, mert a FO ar a brutto: az a fizetendo, es a tulnyomo tobbseg
   azt keresi. A netto sor tajekoztatas, nem masodik ar-allitas.
   .
   AZ AKCIOS BLOKK RACS, tehat a helyet ki kell jelolni: a szazalek-plecsni az
   elso hasabban all ket soron at, az arak a masodikban. A netto sor a plecsni
   melle, a harmadik sorba kerul. A szuk kartyan (container query, lentebb) a
   blokk egy hasabossa valik, es ott a netto is az egy hasabba all be. */
.card__net {
	margin: 2px 0 0;
	color: var(--c-text-mute);
	font-size: var(--fs-xs);
	line-height: 1.4;
}
.card__prices--sale .card__net {
	grid-column: 2;
	grid-row: 3;
}
.card__unit {
	margin: 0 0 10px;
	color: var(--c-text-mute);
	font-size: var(--fs-xs);
	line-height: 1.5;
}
.card__main {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.card__form {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.card__qty {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 80px;
	width: 80px;
	height: 40px;
	padding: 0 5px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
}
input.card__qty-input {
	width: 46px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
@media (max-width: 767px) {
	input.card__qty-input {
		font-size: 16px;
	}
}
.card__qty-input:focus {
	box-shadow: none;
	outline: none;
}
.card__qty-input:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 0;
}
.card__qty:has([data-qty]:not([hidden])) .card__qty-input {
	appearance: textfield;
}
.card__qty:has([data-qty]:not([hidden])) .card__qty-input::-webkit-outer-spin-button,
.card__qty:has([data-qty]:not([hidden])) .card__qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}
.card__qty-btns {
	display: flex;
	flex-direction: column;
	margin-left: auto;
}
.card__qty-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
.card__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 19px;
	padding: 0;
	color: var(--c-text);
}
.card__qty-btn:hover {
	color: var(--c-primary);
}
.card__qty-btn svg {
	width: 14px;
	height: 14px;
}
.card__qty-btn[data-qty-step="1"] svg {
	transform: rotate(180deg);
}
.card__submit {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding-inline: 5px;
}
.card__submit svg {
	width: 16px;
	height: 16px;
}
.card__submit span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.card__enquire {
	flex: 1 1 auto;
	min-width: 0;
}
.card__wish {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--c-text-mute);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__wish:hover {
	border-color: var(--c-pink-accent);
	color: var(--c-pink-accent);
}
.card__wish.is-active {
	border-color: var(--c-pink-accent);
	color: var(--c-pink-accent);
}
.card__wish.is-active svg {
	fill: var(--c-pink-accent);
}
.card__wish svg {
	width: 18px;
	height: 18px;
}
@media (max-width: 991px) {
	.card__tools {
		padding: 2px 14px;
	}
}
@media (pointer: coarse) {
	.card__qty,
	.card__wish {
		height: 44px;
	}
	input.card__qty-input {
		min-height: 42px;
	}
}
/* MOBIL KARTYA: SZUKEBB BELSO MARGO ES KISEBB CIM (kliens-keres).
   .
   A hatar 768 pixel, mert a termekkartya jelolese `col-6 col-md-4`: ez alatt a
   racs KET hasabos, tolle harom. A szuk kartyan a 20 pixeles oldalso belso
   margo a szoveg helyet vitte el, a 9 pixel viszont 22 pixellel tobbet ad a
   tartalomnak.
   .
   MIERT MEDIA QUERY, ES NEM CONTAINER QUERY. A kartyan van container
   (`.card__data`), de az a `.card__inner` GYEREKE, es egy container query csak
   a container LESZARMAZOTTAIT tudja stilizalni, a szulojét nem. A belso margo
   ezert media query-ben all, es a cim is ott marad melle, hogy a ketto egy
   ponton valtson. */
@media (max-width: 767px) {
	.card__inner {
		padding: 10px 9px 24px;
	}
	.card__inner .card__title {
		font-size: 14px;
	}
	/* MOBILON AZ IKONSAV NEM ONALLO DOBOZ (kliens-keres): se keret, se hatter,
	   es a `top: 13px` a kartyan BELULRE viszi. A ket keretvonalat KULON kell
	   nullazni: az alapszabaly a `border: 0` UTAN ir `border-top`-ot es
	   `border-right`-ot, tehat egy sima `border: 0` itt mind a kettot leszedi.
	   .
	   A hatter azert `none`, mert keret nelkul a feher doboz csak egy szintelen
	   folt lenne a feher kartyan: az ikonok igy kozvetlenul a kartyan allnak. */
	.card__tools {
		top: 13px;
		border: 0;
		background: none;
	}
}
@container (max-width: 170px) {
	.card__qty {
		display: none;
	}
	/* A SZUK KARTYAN AZ AKCIOS AR-BLOKK EGYMAS ALA KERUL: felul a szazalek,
	   alatta az athuzott es az akcios ar.
	   .
	   MERT ERTEK, nem izles. Az alap elrendezes ket hasabos: a szazalek-plecsni
	   allo tegla a bal oldalon, jobbra egymas alatt a ket ar. MERVE egy 390
	   pixeles telefonon, a ket hasabos kategoria-racsban: a kartya belso
	   szelessege 116 pixel, ebbol a plecsni 57 es a res 10, tehat az arnak 49
	   pixel marad. Az akcios ar egy sorban 92 pixelt kivan (24 pixeles betu),
	   tehat HAROM sorba tordelt ("2" / "990" / "Ft"), az athuzott ar pedig
	   negybe.
	   .
	   Egymas ala rendezve az ar a teljes 116 pixelt megkapja, tehat egy sorba
	   fer. A hatar 170 pixel: a ket hasabos elrendezes 57 + 10 + 92 = 159
	   pixelt kivan, es a maradek 11 pixel a ratartas. Ugyanez a hatar, amin a
	   mennyiseg-valaszto is kikerul, tehat a kartya egy ponton valt at
	   "szuk" modba, nem szakaszosan.
	   .
	   A PLECSNI ITT NEM NYUL a teljes szelessegre (`justify-self: start`) es
	   nem 48 pixel magas: allo teglaként a ket ar mellett volt ertelme, egy
	   sorban felettuk a sajat tartalmara zsugorodik. */
	.card__prices--sale {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		align-items: start;
		row-gap: 2px;
	}
	.card__off {
		grid-row: auto;
		justify-self: start;
		align-self: start;
		min-height: 26px;
		margin-bottom: 3px;
		padding: 2px 6px;
	}
	.card__was {
		grid-column: 1;
		grid-row: auto;
	}
	.card__now {
		grid-column: 1;
		grid-row: auto;
	}
	.card__net {
		grid-column: 1;
		grid-row: auto;
	}
}
@container (max-width: 129px) {
	.card__submit svg {
		display: none;
	}
}
.products--list > .card {
	width: 100%;
}
.products--list .card__inner {
	display: grid;
	grid-template-columns: minmax(0, min(230px, 38%)) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--sp-5);
}
.products--list .card__media {
	margin-top: 0;
}
/* LISTA NEZETBEN A JELVENYEK A BAL SZELRE KERULNEK (kliens-dontes). A `right`
   visszaall `auto`-ra, mert `absolute` elemnel a `left` ES a `right` egyutt
   megadva a doboz a ket ertek KOZE feszul: a jelveny-csoport igy a kartya
   teljes szelesseget elfoglalna, es a sortores masutt tornek. */
.products--list .card__badges {
	left: 0;
	right: auto;
}
.products--list .card__data {
	margin-top: 0;
}
.products--list .card__title {
	display: block;
	min-height: 0;
	font-size: var(--fs-md);
	line-height: 1.4;
}
.products--list .card__prices {
	min-height: 0;
}
.products--list .card__main {
	justify-content: flex-start;
	margin-top: var(--sp-4);
}
@media (min-width: 576px) {
	.products--list .card__form {
		flex: 0 1 320px;
	}
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	list-style: none;
	font-size: var(--fs-base);
}
.woocommerce-message {
	border-color: #b9e6bf;
	background: var(--c-green-wash);
}
.woocommerce-error {
	border-color: #f5c2bd;
	background: var(--c-sale-wash);
}
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
}
.woocommerce-message .button,
.woocommerce-info .button {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-left: auto;
	padding: var(--sp-1) var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--c-primary);
	color: #fff;
	font-size: var(--fs-xs);
	text-decoration: none;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--c-primary-hover);
	text-decoration: none;
}
.woocommerce-pagination,
.pager {
	margin-top: var(--sp-10);
}
.woocommerce-pagination ul,
.pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-2) 0;
	border: 0;
	list-style: none;
}
.woocommerce-pagination li,
.pager li {
	margin: 0;
	border: 0;
}
.woocommerce-pagination li > .page-numbers,
.pager a,
.pager span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: var(--fs-base);
	font-weight: 400;
	text-decoration: none;
}
.woocommerce-pagination li > a.page-numbers:hover,
.pager a:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	text-decoration: none;
}
.woocommerce-pagination li > .page-numbers.current,
.pager .current {
	border-color: var(--c-primary-aa);
	background: var(--c-primary-aa);
	color: #fff;
	box-shadow: var(--sh-btn);
}
.woocommerce-pagination li > .page-numbers.dots,
.pager .dots {
	border-color: transparent;
	background: transparent;
	color: var(--c-text-mute);
	box-shadow: none;
}
@media (pointer: coarse) {
	.woocommerce-pagination li > .page-numbers,
	.pager a,
	.pager span {
		min-width: 44px;
		min-height: 44px;
	}
}
.cat-intro {
	margin-top: 0;
	margin-bottom: var(--sp-5);
	padding: var(--sp-6);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
}
.cat-intro__body > :first-child {
	margin-top: 0;
}
.cat-intro__body > :last-child {
	margin-bottom: 0;
}
/* MOBILON KISEBB A KATEGORIA-BEVEZETO SZOVEGE (kliens-keres): 14 px a `.prose`
   16 px-e helyett. A valaszto ket osztalyt fog (`.cat-intro__body.prose`),
   tehat erosebb, mint a `.prose` alapertek.
   .
   A "Tovabb" gomb levagasat ez NEM zavarja: a readmore.js a VALODI sorbokszokat
   meri (`Range.getClientRects()`) a lap betoltese utan, tehat a kisebb betuvel
   automatikusan kisebb lesz a hatar. Az itt lathato sorok szama valtozatlanul
   a jelolesbol jon (`data-more-mobile="5"`). */
@media (max-width: 767px) {
	.cat-intro__body.prose {
		font-size: 14px;
	}
}
/* A KORABBI, 40vh-s MOBIL LEVAGAS ES A SAJAT GOMBJA KIKERULT.
   Helyette a kozos komponens dolgozik (base.css `.vls-more--clip` es
   `.vls-more__btn`, assets/js/readmore.js), ami SOR alapjan vag, es asztali
   nezetben is mukodik. Ket parhuzamos mechanizmus egymas allapotat irta volna
   at: a regi 40vh-s korlat es az uj pixeles korlat ugyanazon az elemen. */
.cat-seo {
	max-width: 100%;
	margin-top: var(--sp-16);
	padding: var(--sp-6);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
	color: var(--c-text-soft);
	font-size: var(--fs-base);
}
.cat-seo > :first-child {
	margin-top: 0;
}
.cat-seo > :last-child {
	margin-bottom: 0;
}
.cat-seo__body > :first-child {
	margin-top: 0;
}
.cat-seo__body > :last-child {
	margin-bottom: 0;
}
.cat-seo__body > p {
	margin-top: 0;
}
.cat-seo__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xl);
}
.shop__empty {
	padding: var(--sp-10) var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
	text-align: center;
}
.shop__empty-title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: 700;
}
.shop__empty-lead {
	margin-bottom: var(--sp-5);
	color: var(--c-text-soft);
}
.empty {
	max-width: 560px;
	margin-inline: auto;
	padding-block: var(--sp-12);
	text-align: center;
}
.empty__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-2xl);
}
.empty__lead {
	margin-bottom: var(--sp-5);
	color: var(--c-text-soft);
}
.empty__search,
.e404__search {
	max-width: 420px;
	margin-inline: auto;
}
/* OKOSKERESO A TALALATI OLDALON: javitasi sav, gyorsszurok, ures oldal.
   A javitasi sav a H1 alatt all (woocommerce_archive_description horog), a
   nulla talalat oldal a template-parts/search-empty.php. */
.srch-note {
	margin: var(--sp-3) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--c-primary-wash);
	color: var(--c-text);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.srch-note b {
	font-weight: 800;
}
.srch-note q {
	quotes: "„" "”";
}
.srch-note__alt {
	display: inline-block;
	margin-left: var(--sp-2);
	color: var(--c-primary-dark);
	font-weight: 700;
}
.srch-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}
.srch-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-full);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.srch-chip:hover {
	border-color: var(--c-primary);
	text-decoration: none;
}
.srch-chip.is-on {
	border-color: var(--c-primary-aa);
	background: var(--c-primary-aa);
	color: #fff;
}
.srch-chip.is-on::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left: var(--sp-2);
	background:
		linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%);
}
.empty--search {
	padding-bottom: var(--sp-8);
}
.srch-alt {
	margin-bottom: var(--sp-5);
}
.srch-alt__lead {
	margin-bottom: var(--sp-2);
	color: var(--c-text-soft);
	font-weight: 700;
}
.srch-alt__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.srch-more {
	margin-top: var(--sp-8);
}
.srch-more__title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-lg);
	font-weight: 800;
	text-align: center;
}
.srch-req {
	max-width: 560px;
	margin: var(--sp-10) auto 0;
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
}
.srch-req__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: 800;
}
.srch-req__lead {
	margin-bottom: var(--sp-4);
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
}
.srch-req__row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0 0 var(--sp-4);
}
.srch-req__row label {
	font-size: var(--fs-sm);
	font-weight: 700;
}
.srch-req__hint {
	color: var(--c-text-mute);
	font-size: var(--fs-xs);
}
.srch-req__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.srch-req__msg {
	margin-bottom: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
}
.srch-req__msg.is-ok {
	background: var(--c-green-wash);
	color: var(--c-green-aa);
}
.srch-req__msg.is-err {
	background: var(--c-sale-wash);
	color: var(--c-sale);
}
.rv {
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-panel);
}
.rv__title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-dark);
}
.rv__list {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rv__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--c-text);
	text-decoration: none;
}
.rv__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
}
.rv__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.rv__body {
	min-width: 0;
}
.rv__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var(--fs-sm);
	line-height: 1.35;
}
.rv__link:hover .rv__name {
	color: var(--c-primary-aa);
}
.rv__price {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-dark);
}
.rv__price del,
.rv__price .vls-unit-price {
	display: none;
}
.rv__price ins {
	text-decoration: none;
}
@media (max-width: 1279px) {
	.shop--sidebar {
		display: flex;
		flex-direction: column;
	}
	.shop__aside {
		display: contents;
	}
	.pf {
		order: 1;
	}
	.shop__main {
		order: 2;
	}
	.rv {
		order: 3;
		margin-top: 0;
	}
}
.card__form.is-adding .btn[disabled],
form.cart.is-adding .btn[disabled],
form.cart.is-adding button[disabled] {
	opacity: 0.75;
	cursor: progress;
}
.card__form.is-adding .card__submit svg {
	display: none;
}
.card__form.is-adding .card__submit::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: vls-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.card__form.is-adding .card__submit::before {
		border-color: rgba(255, 255, 255, 0.55);
	}
}
.cart-fly {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	object-fit: contain;
	border-radius: var(--r-sm);
	transition: left 700ms cubic-bezier(0.55, 0, 0.55, 0.9),
		top 700ms cubic-bezier(0.55, 0, 0.55, 0.9),
		width 700ms ease, height 700ms ease, opacity 700ms ease;
}