/* Genereeritud failist assets/src/kataloog.css — ära muuda siin, muuda src-faili ja käivita tools/build-css.py */
/* =====================================================================
   HELIX — tootekataloog
   ===================================================================== */

.hx-catalog:not(#hx_),
.hx-quickadd:not(#hx_) {
	--k-accent: var( --hx-accent, var( --helix-plum, #764452 ) );
	--k-tint:   var( --hx-tint, var( --helix-cream, #F6F1EA ) );
	--k-ink:    var( --helix-ink, #1C1C1C );
	--k-muted:  #6B6762;
	--k-line:   #ECE5DA;
	--k-radius: 20px;
	--k-ease:   cubic-bezier( .2, .8, .2, 1 );
	--k-top:    110px;
}

.hx-catalog:not(#hx_) {
	position: relative;
	/* Täislaius: murrab välja ümbritsevast konteinerist */
	width: calc( 100vw - var( --hx-sbw, 0px ) );
	margin-left: calc( 50% - ( 100vw - var( --hx-sbw, 0px ) ) / 2 );
	padding: 0 clamp( 14px, 2.6vw, 56px );
	color: var( --k-ink );
	font-family: inherit;
}

.hx-catalog:not(#hx_) *,
.hx-quickadd:not(#hx_) * { box-sizing: border-box; }

.hx-catalog:not(#hx_) button,
.hx-quickadd:not(#hx_) button {
	margin: 0;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
}

.hx-catalog:not(#hx_) a,
.hx-quickadd:not(#hx_) a { text-decoration: none; }

.hx-ci:not(#hx_) { width: 18px; height: 18px; flex: 0 0 auto; }

.hx-catalog:not(#hx_) .hx-cat__btn,
.hx-quickadd:not(#hx_) .hx-cat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.hx-catalog:not(#hx_) .hx-cat__btn--accent,
.hx-quickadd:not(#hx_) .hx-cat__btn--accent { background: var( --k-accent ); color: #fff; }

.hx-catalog:not(#hx_) .hx-cat__btn--accent:hover,
.hx-quickadd:not(#hx_) .hx-cat__btn--accent:hover { transform: translateY( -1px ); box-shadow: 0 8px 20px rgba( 0, 0, 0, .15 ); }

.hx-catalog:not(#hx_) .hx-cat__btn--ghost,
.hx-quickadd:not(#hx_) .hx-cat__btn--ghost { background: #fff; border-color: var( --k-line ); color: var( --k-ink ); }

.hx-catalog:not(#hx_) .hx-cat__btn--ghost:hover,
.hx-quickadd:not(#hx_) .hx-cat__btn--ghost:hover { border-color: var( --k-ink ); }

/* ---------------------------------------------------------------------
   Kategooriate plokid
   --------------------------------------------------------------------- */

.hx-tiles-row:not(#hx_) {
	display: flex;
	gap: 12px;
	margin: 0 0 28px;
	padding: 4px 2px 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.hx-tiles-row:not(#hx_)::-webkit-scrollbar { display: none; }

.hx-catalog:not(#hx_) .hx-ctile {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 10px;
	width: 172px;
	padding: 8px 8px 12px;
	border: 1.5px solid var( --k-line );
	border-radius: 22px;
	background: #fff;
	color: var( --k-ink );
	text-align: left;
	scroll-snap-align: start;
	cursor: pointer;
	transition: border-color .25s, transform .25s var( --k-ease ), box-shadow .25s;
}

.hx-catalog:not(#hx_) .hx-ctile:hover { transform: translateY( -3px ); box-shadow: 0 12px 28px rgba( 0, 0, 0, .08 ); }

.hx-catalog:not(#hx_) .hx-ctile.is-on {
	border-color: var( --k-accent );
	box-shadow: 0 0 0 3px rgba( 118, 68, 82, 0.18 ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --k-accent ) 18%, transparent );
}

.hx-ctile__img:not(#hx_) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	padding: 8px;
	overflow: hidden;
	border-radius: 16px;
	background: var( --k-tint );
	color: var( --k-accent );
}

.hx-catalog:not(#hx_) .hx-ctile__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.hx-ctile__img:not(#hx_) .hx-ci { width: 30px; height: 30px; }

.hx-ctile__name:not(#hx_) {
	display: -webkit-box;
	min-height: 2.5em;
	padding: 0 34px 0 4px;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hx-ctile__count:not(#hx_) {
	position: absolute;
	right: 12px;
	bottom: 14px;
	min-width: 26px;
	padding: 4px 7px;
	border-radius: 999px;
	background: var( --k-tint );
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.hx-ctile.is-on:not(#hx_) .hx-ctile__count { background: var( --k-accent ); color: #fff; }

/* ---------------------------------------------------------------------
   Paigutus
   --------------------------------------------------------------------- */

.hx-cat__layout:not(#hx_) {
	display: grid;
	grid-template-columns: 290px minmax( 0, 1fr );
	gap: 36px;
	align-items: start;
}

@media ( min-width: 1500px ) {
	.hx-cat__layout:not(#hx_) { grid-template-columns: 330px minmax( 0, 1fr ); gap: 44px; }
	.hx-cf__dot:not(#hx_) { width: 30px !important; height: 30px !important; }
	.hx-catalog:not(#hx_) .hx-cf__body--swatch .hx-cf__opt { padding: 8px 10px; }
}

.hx-cat__side:not(#hx_) {
	position: relative;
	align-self: start;
	will-change: transform;
}

.hx-cat__side-head:not(#hx_),
.hx-cat__side-foot:not(#hx_),
.hx-cat__filters-btn:not(#hx_),
.hx-cat__scrim:not(#hx_) { display: none; }

/* --- Filtriplokk --- */
.hx-cf:not(#hx_) {
	padding: 4px 0 16px;
	border-bottom: 1px solid var( --k-line );
}

.hx-cf:not(#hx_) + .hx-cf { margin-top: 12px; }

.hx-cf__head:not(#hx_) {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.hx-cf__head:not(#hx_)::-webkit-details-marker { display: none; }

.hx-cf__head:not(#hx_)::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translateY( -3px );
	transition: transform .25s;
}

.hx-cf[open]:not(#hx_) .hx-cf__head::after { transform: rotate( -135deg ) translateY( -1px ); }

.hx-cf__badge:not(#hx_) {
	padding: 3px 8px;
	border-radius: 999px;
	background: var( --k-accent );
	color: #fff;
	font-size: 11px;
}

.hx-cf__body:not(#hx_) { padding-top: 4px; }

.hx-cf__body--chips:not(#hx_) { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-cf__body--swatch:not(#hx_) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hx-cf__body--list:not(#hx_) { display: grid; gap: 2px; }

.hx-catalog:not(#hx_) .hx-cf__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var( --k-line );
	border-radius: 12px;
	background: #fff;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}

.hx-catalog:not(#hx_) .hx-cf__opt:hover:not( :disabled ) { border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-cf__opt:disabled { opacity: .35; cursor: default; }

.hx-catalog:not(#hx_) .hx-cf__body--chips .hx-cf__opt { border-radius: 999px; }

.hx-catalog:not(#hx_) .hx-cf__body--list .hx-cf__opt {
	border-color: transparent;
	padding: 8px 6px;
}

.hx-catalog:not(#hx_) .hx-cf__opt.is-on {
	border-color: var( --k-accent );
	background: #F4F0F1; background: color-mix( in srgb, var( --k-accent ) 8%, #fff );
	color: var( --k-ink );
	font-weight: 700;
}

.hx-catalog:not(#hx_) .hx-cf__body--chips .hx-cf__opt.is-on { background: var( --k-accent ); color: #fff; }

.hx-cf__name:not(#hx_) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hx-cf__body--swatch:not(#hx_) .hx-cf__name {
	display: -webkit-box;
	white-space: normal;
	font-size: 12px;
	line-height: 1.2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hx-catalog:not(#hx_) .hx-cf__body--swatch .hx-cf__opt { padding: 7px 8px; gap: 7px; }

.hx-cf__count:not(#hx_) { font-size: 11px; color: var( --k-muted ); }
.hx-cf__body--chips:not(#hx_) .hx-cf__opt.is-on .hx-cf__count { color: rgba( 255, 255, 255, .8 ); }

.hx-cf__dot:not(#hx_) {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ddd center / cover;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
}

.hx-cf__check:not(#hx_) {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid #C9C0B3;
	border-radius: 6px;
	color: transparent;
	transition: background-color .2s, border-color .2s, color .2s;
}

.hx-cf__check:not(#hx_) .hx-ci { width: 14px; height: 14px; }
.hx-cf__opt.is-on:not(#hx_) .hx-cf__check { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; }

/* Hinnaliugur */
.hx-range:not(#hx_) { position: relative; height: 28px; margin: 6px 10px 0; }

.hx-range__track:not(#hx_) {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 999px;
	background: var( --k-line );
}

.hx-range__fill:not(#hx_) { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var( --k-accent ); }

.hx-range:not(#hx_) input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.hx-range:not(#hx_) input[type="range"]::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var( --k-accent );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .25 );
	pointer-events: auto;
	cursor: grab;
	-webkit-appearance: none;
}

.hx-range:not(#hx_) input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var( --k-accent );
	pointer-events: auto;
	cursor: grab;
}

.hx-range:not(#hx_) input[type="range"]::-webkit-slider-runnable-track { background: none; }
.hx-range:not(#hx_) input[type="range"]::-moz-range-track { background: none; }

.hx-range__values:not(#hx_) {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
}

/* --- Tööriistariba --- */
.hx-cat__bar:not(#hx_) {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.hx-catalog:not(#hx_) .hx-cat__count { margin: 0; font-size: 14px; color: var( --k-muted ); }
.hx-cat__count:not(#hx_) b, .hx-cat__count:not(#hx_) .hx-b { color: var( --k-ink ); }

.hx-cat__tools:not(#hx_) { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.hx-catalog:not(#hx_) .hx-cat__sort select {
	height: 44px;
	padding: 0 38px 0 16px;
	border: 1px solid var( --k-line );
	border-radius: 999px;
	background: #fff url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" ) right 14px center / 14px no-repeat;
	color: var( --k-ink );
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.hx-cat__look:not(#hx_) {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var( --k-tint );
}

.hx-catalog:not(#hx_) .hx-cat__look button {
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s, color .25s;
}

.hx-catalog:not(#hx_) .hx-cat__look button[aria-pressed="true"] { background: var( --k-accent ); color: #fff; }

/* --- Aktiivsed filtrid --- */
.hx-active:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }

.hx-catalog:not(#hx_) .hx-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var( --k-ink );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hx-active__chip:not(#hx_) .hx-ci { width: 14px; height: 14px; }

.hx-catalog:not(#hx_) .hx-active__clear {
	padding: 6px;
	border: 0;
	background: none;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Võrk ja kaart
   --------------------------------------------------------------------- */

.hx-cat__grid:not(#hx_) {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
	gap: 24px;
	transition: opacity .25s;
}

.hx-catalog.is-loading:not(#hx_) .hx-cat__grid { opacity: .45; pointer-events: none; }

.hx-catalog:not(#hx_) .hx-cat__empty {
	padding: 40px;
	border-radius: var( --k-radius );
	background: var( --k-tint );
	text-align: center;
}

.hx-cat__empty[hidden]:not(#hx_) { display: none; }

.hx-catalog:not(#hx_) .hx-cat__empty button {
	padding: 0;
	border: 0;
	background: none;
	color: var( --k-accent );
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.hx-cat__more:not(#hx_) { margin-top: 28px; text-align: center; }
.hx-cat__more:not(#hx_) [hidden] { display: none; }

.hx-pc:not(#hx_) {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --k-line );
	border-radius: 22px;
	background: #fff;
	animation: hx-pc-in .5s var( --k-ease ) both;
	animation-delay: calc( mod( var( --n, 0 ), 24 ) * .03s );
	transition: box-shadow .35s, transform .35s var( --k-ease ), border-color .35s;
}

@keyframes hx-pc-in {
	from { opacity: 0; transform: translateY( 14px ); }
	to   { opacity: 1; transform: none; }
}

@media ( hover: hover ) {
	.hx-pc:hover:not(#hx_) {
		border-color: transparent;
		box-shadow: 0 20px 44px rgba( 0, 0, 0, .1 );
		transform: translateY( -4px );
	}
}

.hx-pc__data:not(#hx_) { display: none; }

/* Pilt */
.hx-pc:not(#hx_) .hx-pc__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin: 10px 10px 0;
	overflow: hidden;
	border-radius: 16px;
	background: #F6F4F1;
	isolation: isolate;
}

.hx-pc:not(#hx_) .hx-pc__img,
.hx-pc:not(#hx_) .hx-pc__wall {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	transition: opacity .45s, transform .9s var( --k-ease );
}

.hx-pc:not(#hx_) .hx-pc__img {
	padding: 14px;
	object-fit: contain;
	mix-blend-mode: multiply; /* valge fotostuudio taust sulandub */
}
.hx-pc:not(#hx_) .hx-pc__wall { object-fit: cover; opacity: 0; }

@media ( hover: hover ) {
	.hx-pc.has-wall:hover:not(#hx_) .hx-pc__wall { opacity: 1; transform: scale( 1.04 ); }
	.hx-pc:not( .has-wall ):hover:not(#hx_) .hx-pc__img { transform: scale( 1.05 ); }
}

/* "Seinal" režiim: interjöör ees, hover näitab paneeli */
.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall .hx-pc__wall { opacity: 1; }

@media ( hover: hover ) {
	.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:hover .hx-pc__wall { opacity: 0; }
}

.hx-pc__badges:not(#hx_) {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 6px;
}

.hx-pc__badge:not(#hx_) {
	padding: 6px 10px;
	border-radius: 999px;
	background: var( --k-ink );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.hx-pc__badge--sale:not(#hx_) { background: #C2410C; }

.hx-pc__size:not(#hx_) {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .9 );
	backdrop-filter: blur( 6px );
	color: var( --k-ink );
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .06 );
}

/* Sisu */
.hx-pc__body:not(#hx_) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 18px;
}

.hx-pc:not(#hx_) .hx-pc__eyebrow {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --k-muted );
}

.hx-pc:not(#hx_) .hx-pc__title {
	display: -webkit-box;
	margin: -4px 0 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var( --k-ink );
}

.hx-pc:not(#hx_) .hx-pc__title a { color: inherit; }
.hx-pc:not(#hx_) .hx-pc__title a:hover { color: var( --k-accent ); }

.hx-pc:not(#hx_) .hx-pc__sub { margin: -8px 0 0; font-size: 14px; color: var( --k-muted ); }
.hx-pc:not(#hx_) .hx-pc__sub:empty { display: none; }

/* Värviringid */
.hx-pc__swatches:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.hx-pc:not(#hx_) .hx-pc__dot,
.hx-pc:not(#hx_) .hx-pc__dot:hover,
.hx-pc:not(#hx_) .hx-pc__dot:focus {
	display: inline-flex;
	width: 32px;
	height: 32px;
	padding: 3px;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: inset 0 0 0 1.5px var( --k-line );
	cursor: pointer;
	transition: box-shadow .2s;
}

/* Värv on sisemises ringis — teema nupu hover-taust ei saa seda üle kirjutada */
.hx-pc__dot:not(#hx_) span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #ddd center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
	pointer-events: none;
}

.hx-pc:not(#hx_) .hx-pc__dot:hover { box-shadow: inset 0 0 0 2px #B498A0; box-shadow: inset 0 0 0 2px color-mix( in srgb, var( --k-accent ) 55%, #fff ); }
.hx-pc:not(#hx_) .hx-pc__dot.is-active { box-shadow: inset 0 0 0 2px var( --k-accent ); }

.hx-pc__dot.is-extra:not(#hx_) { display: none; }
.hx-pc__swatches.is-expanded:not(#hx_) .hx-pc__dot.is-extra { display: block; }
.hx-pc__swatches.is-expanded:not(#hx_) .hx-pc__more { display: none; }

.hx-pc:not(#hx_) .hx-pc__more {
	height: 32px;
	padding: 0 9px;
	border: 0;
	border-radius: 999px;
	background: var( --k-tint );
	color: var( --k-ink );
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

/* Valikud */
.hx-pc__opts:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.hx-pc__opts-label:not(#hx_) { width: 100%; font-size: 12px; color: var( --k-muted ); }

.hx-pc:not(#hx_) .hx-pc__opt {
	padding: 6px 10px;
	border: 1px solid var( --k-line );
	border-radius: 8px;
	background: #fff;
	color: var( --k-ink );
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.hx-pc:not(#hx_) .hx-pc__opt:hover { border-color: var( --k-ink ); }
.hx-pc:not(#hx_) .hx-pc__opt.is-active { border-color: var( --k-ink ); background: var( --k-ink ); color: #fff; }

.hx-pc:not(#hx_) .hx-pc__opt--dot { padding: 3px; border-radius: 50%; }
.hx-pc:not(#hx_) .hx-pc__opt--dot.is-active { background: #fff; border-color: var( --k-accent ); box-shadow: 0 0 0 1px var( --k-accent ); }

.hx-pc__opt--dot:not(#hx_) span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
}

/* Hind */
.hx-pc__price:not(#hx_) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
}

.hx-pc__price:not(#hx_) strong, .hx-pc__price:not(#hx_) .hx-t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hx-pc__price:not(#hx_) del { margin-left: 6px; font-size: 14px; color: var( --k-muted ); }
.hx-pc__unit:not(#hx_) { margin-left: 4px; font-size: 13px; color: var( --k-muted ); }

.hx-pc__m2:not(#hx_) {
	padding: 5px 10px;
	border-radius: 999px;
	background: #F1ECEE; background: color-mix( in srgb, var( --k-accent ) 10%, #fff );
	color: var( --k-accent );
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.hx-pc__m2:empty:not(#hx_) { display: none; }

/* Jalus */
.hx-pc__foot:not(#hx_) {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px dashed var( --k-line );
}

.hx-pc:not(#hx_) .hx-pc__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var( --k-line );
	border-radius: 999px;
	color: var( --k-ink );
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .2s, background-color .2s;
}

.hx-pc:not(#hx_) .hx-pc__view:hover { border-color: var( --k-ink ); color: var( --k-ink ); }
.hx-pc__view:not(#hx_) .hx-ci { width: 16px; height: 16px; transition: transform .3s var( --k-ease ); }
.hx-pc__view:hover:not(#hx_) .hx-ci { transform: translateX( 3px ); }

.hx-pc__delivery:not(#hx_) {
	display: flex;
	flex: 0 0 auto;
	margin-top: -4px;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	white-space: nowrap;
	color: var( --k-muted );
}
.hx-pc__delivery:not(#hx_) .hx-ci { width: 16px; height: 16px; }

.hx-pc:not(#hx_) .hx-pc__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 42px;
	padding: 0 20px 0 14px;
	border: 0;
	border-radius: 999px;
	background: var( --k-accent );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .25s cubic-bezier( .3, 1.6, .5, 1 ), box-shadow .25s;
}

.hx-pc:not(#hx_) .hx-pc__add:hover { transform: scale( 1.05 ); box-shadow: 0 8px 18px rgba( 0, 0, 0, .15 ); }
.hx-pc:not(#hx_) .hx-pc__add .hx-ci { transition: transform .35s var( --k-ease ); }
.hx-pc:not(#hx_) .hx-pc__add:hover .hx-ci { transform: rotate( 90deg ); }

/* ---------------------------------------------------------------------
   Kiirlisamine
   --------------------------------------------------------------------- */

.hx-quickadd:not(#hx_) {
	position: fixed;
	inset: 0;
	z-index: 10020;
	font-family: inherit;
	color: var( --k-ink );
}

.hx-quickadd[hidden]:not(#hx_) { display: none; }

.hx-quickadd__overlay:not(#hx_) {
	position: absolute;
	inset: 0;
	background: rgba( 20, 16, 14, .28 );
	opacity: 0;
	transition: opacity .3s;
}

.hx-quickadd.is-open:not(#hx_) .hx-quickadd__overlay { opacity: 1; }

.hx-quickadd__panel:not(#hx_) {
	position: absolute;
	display: flex;
	flex-direction: column;
	max-height: 85vh;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, .25 );
	opacity: 0;
	transform: scale( .96 ) translateY( 10px );
	transform-origin: top center;
	transition: opacity .25s, transform .35s var( --k-ease );
}

.hx-quickadd.is-open:not(#hx_) .hx-quickadd__panel { opacity: 1; transform: none; }

.hx-quickadd__head:not(#hx_) {
	display: grid;
	grid-template-columns: 56px minmax( 0, 1fr ) auto;
	gap: 12px;
	align-items: center;
	padding: 16px 16px 14px;
	border-bottom: 1px solid var( --k-line );
}

.hx-quickadd__thumb:not(#hx_) {
	width: 56px;
	height: 56px;
	padding: 4px;
	overflow: hidden;
	border-radius: 14px;
	background: var( --k-tint );
}

.hx-quickadd:not(#hx_) .hx-quickadd__thumb img { width: 100%; height: 100%; max-width: none; object-fit: contain; }

.hx-quickadd:not(#hx_) .hx-quickadd__title { margin: 0; letter-spacing: -.015em; font-size: 16px; font-weight: 700; line-height: 1.25; color: var( --k-ink ); }
.hx-quickadd:not(#hx_) .hx-quickadd__sub { margin: 2px 0 0; font-size: 13px; color: var( --k-muted ); }

.hx-quickadd:not(#hx_) .hx-quickadd__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --k-tint );
	color: var( --k-ink );
	cursor: pointer;
}

.hx-quickadd__body:not(#hx_) {
	flex: 1 1 auto;
	min-height: 0;
	padding: 14px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hx-qa-group:not(#hx_) + .hx-qa-group { margin-top: 14px; }

.hx-quickadd:not(#hx_) .hx-qa-group__label { margin: 0 0 8px; font-size: 13px; color: var( --k-muted ); }
.hx-qa-group__label:not(#hx_) b, .hx-qa-group__label:not(#hx_) .hx-b { color: var( --k-ink ); }

.hx-qa-group__opts:not(#hx_) { display: flex; flex-wrap: wrap; gap: 6px; }

.hx-qa-group__opts.is-swatch:not(#hx_) {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) );
	gap: 8px;
	max-height: 230px;
	overflow-y: auto;
}

.hx-quickadd:not(#hx_) .hx-qa-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border: 1.5px solid var( --k-line );
	border-radius: 12px;
	background: #fff;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.hx-quickadd:not(#hx_) .hx-qa-opt.is-active { border-color: var( --k-accent ); background: #F5F2F3; background: color-mix( in srgb, var( --k-accent ) 7%, #fff ); }

.is-swatch:not(#hx_) .hx-qa-opt { padding: 4px 4px 6px; }

.hx-qa-opt__img:not(#hx_) {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 9px;
	background: var( --k-tint ) center / contain no-repeat;
}

.is-swatch:not(#hx_) .hx-qa-opt__name {
	width: 100%;
	overflow: hidden;
	font-size: 11px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Kalkulaator */
.hx-calc:not(#hx_) {
	margin-top: 16px;
	border-radius: 16px;
	background: var( --k-tint );
}

.hx-quickadd:not(#hx_) .hx-calc__toggle {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 14px;
	border: 0;
	background: none;
	color: var( --k-ink );
	text-align: left;
	cursor: pointer;
}

.hx-calc__toggle:not(#hx_) > .hx-ci:first-child { width: 22px; height: 22px; color: var( --k-accent ); }
.hx-calc__toggle:not(#hx_) strong, .hx-calc__toggle:not(#hx_) .hx-t { display: block; font-size: 14px; }
.hx-calc__toggle:not(#hx_) small { display: block; margin-top: 2px; font-size: 12px; color: var( --k-muted ); }
.hx-calc__toggle:not(#hx_) > .hx-ci:last-child { transition: transform .3s var( --k-ease ); }
.hx-calc__toggle[aria-expanded="true"]:not(#hx_) > .hx-ci:last-child { transform: rotate( 45deg ); }

.hx-calc__body:not(#hx_) { padding: 0 14px 14px; }
.hx-calc__body[hidden]:not(#hx_) { display: none; }

.hx-calc__inputs:not(#hx_) { display: flex; align-items: flex-end; gap: 8px; }

.hx-calc__inputs:not(#hx_) label { position: relative; flex: 1 1 0; }
.hx-calc__inputs:not(#hx_) label span { display: block; margin-bottom: 4px; font-size: 12px; color: var( --k-muted ); }

.hx-quickadd:not(#hx_) .hx-calc__inputs input {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 34px 0 14px;
	border: 1px solid var( --k-line );
	border-radius: 12px;
	background: #fff;
	color: var( --k-ink );
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	box-shadow: none;
}

.hx-quickadd:not(#hx_) .hx-calc__inputs input:focus { outline: none; border-color: var( --k-accent ); }

.hx-calc__inputs:not(#hx_) em {
	position: absolute;
	right: 12px;
	bottom: 13px;
	font-size: 13px;
	font-style: normal;
	color: var( --k-muted );
}

.hx-calc__x:not(#hx_) { padding-bottom: 12px; font-weight: 700; color: var( --k-muted ); }

/* v2.56 varu linnuke */
.hx-quickadd:not(#hx_) .hx-calc__waste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hx-quickadd:not(#hx_) .hx-calc__waste input { width: 18px; height: 18px; margin: 0; accent-color: var( --k-accent ); }
.hx-quickadd:not(#hx_) .hx-calc__waste small { flex-basis: 100%; padding-left: 26px; color: var( --k-muted ); font-size: 12px; font-weight: 400; }

.hx-quickadd:not(#hx_) .hx-calc__result { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.hx-quickadd:not(#hx_) .hx-calc__result:empty { display: none; }
.hx-calc__result:not(#hx_) b, .hx-calc__result:not(#hx_) .hx-b { color: var( --k-accent ); }
.hx-calc__result:not(#hx_) small { display: block; font-size: 12px; color: var( --k-muted ); }

.hx-quickadd:not(#hx_) .hx-calc__use { width: 100%; height: 42px; margin-top: 10px; font-size: 14px; }
.hx-calc__use[hidden]:not(#hx_) { display: none; }

/* Jalus */
.hx-quickadd__foot:not(#hx_) {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	grid-template-areas: "qty total" "add add";
	gap: 12px;
	align-items: center;
	padding: 14px 16px 16px;
	padding-bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
	border-top: 1px solid var( --k-line );
}

.hx-quickadd__qty:not(#hx_) {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 3px;
	border-radius: 999px;
	background: var( --k-tint );
}

.hx-quickadd:not(#hx_) .hx-quickadd__qty button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --k-ink );
	cursor: pointer;
}

.hx-quickadd:not(#hx_) .hx-quickadd__qty button:hover { background: #fff; }

.hx-quickadd:not(#hx_) .hx-quickadd__qty input {
	width: 48px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --k-ink );
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
}

.hx-quickadd__qty:not(#hx_) input::-webkit-outer-spin-button,
.hx-quickadd__qty:not(#hx_) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hx-quickadd__qty:not(#hx_) input.is-flash { animation: hx-flash .8s ease; }

@keyframes hx-flash {
	0%, 100% { color: var( --k-ink ); }
	30% { color: var( --k-accent ); transform: scale( 1.25 ); }
}

.hx-quickadd__total:not(#hx_) { grid-area: total; text-align: right; }
.hx-quickadd__total:not(#hx_) strong, .hx-quickadd__total:not(#hx_) .hx-t { display: block; font-size: 22px; font-weight: 700; }
.hx-quickadd__total:not(#hx_) small { display: block; font-size: 12px; color: var( --k-muted ); }

.hx-quickadd:not(#hx_) .hx-quickadd__add { grid-area: add; width: 100%; height: 54px; }
.hx-quickadd__add.is-busy:not(#hx_) { opacity: .6; pointer-events: none; }
.hx-quickadd__add.is-done:not(#hx_) { background: #2F7D4F; }

.hx-quickadd:not(#hx_) .hx-quickadd__error {
	margin: 0;
	padding: 10px 16px;
	background: #FBECEC;
	color: #B3261E;
	font-size: 13px;
}

/* ---------------------------------------------------------------------
   Tahvel: filtrid alt avanevaks paneeliks
   --------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	.hx-cat__layout:not(#hx_) { grid-template-columns: minmax( 0, 1fr ); }

	.hx-catalog:not(#hx_) .hx-cat__filters-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: var( --k-ink );
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.hx-cat__filters-btn:not(#hx_) b:not( :empty ), .hx-cat__filters-btn:not(#hx_) .hx-b:not( :empty ) {
		padding: 2px 7px;
		border-radius: 999px;
		background: #fff;
		color: var( --k-ink );
		font-size: 11px;
	}

	.hx-cat__side:not(#hx_) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 10015;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		max-height: 88dvh;
		overflow: hidden;
		border-radius: 26px 26px 0 0;
		background: #fff;
		box-shadow: 0 -20px 60px rgba( 0, 0, 0, .18 );
		transform: translateY( 105% );
		transition: transform .5s cubic-bezier( .2, .9, .2, 1 );
	}

	html.hx-cat-filters-open:not(#hx_) .hx-cat__side { transform: none; }

	.hx-cat__side-head:not(#hx_) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 20px 10px;
	}

	.hx-catalog:not(#hx_) .hx-cat__side-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var( --k-ink ); }

	.hx-catalog:not(#hx_) .hx-cat__side-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var( --k-tint );
		color: var( --k-ink );
		cursor: pointer;
	}

	.hx-cat__side-body:not(#hx_) { flex: 1 1 auto; min-height: 0; padding: 0 20px 12px; overflow-y: auto; overscroll-behavior: contain; }

	.hx-cat__side-foot:not(#hx_) {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		gap: 10px;
		padding: 12px 20px;
		padding-bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
		border-top: 1px solid var( --k-line );
	}

	.hx-cat__scrim:not(#hx_) {
		position: fixed;
		inset: 0;
		z-index: 10014;
		display: block;
		background: rgba( 20, 16, 14, .4 );
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility 0s .3s;
	}

	html.hx-cat-filters-open:not(#hx_) .hx-cat__scrim { opacity: 1; visibility: visible; transition: opacity .3s; }

	html.hx-cat-filters-open:not(#hx_),
	html.hx-cat-filters-open:not(#hx_) body,
	html.hx-qa-open:not(#hx_),
	html.hx-qa-open:not(#hx_) body { overflow: hidden; }


}

/* ---------------------------------------------------------------------
   Telefon
   --------------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.hx-tiles-row:not(#hx_) { gap: 8px; margin-bottom: 18px; }
	.hx-catalog:not(#hx_) .hx-ctile { width: 128px; gap: 6px; padding: 6px 6px 10px; border-radius: 18px; }
	.hx-ctile__img:not(#hx_) { height: 76px; border-radius: 13px; }
	.hx-ctile__name:not(#hx_) { font-size: 12px; padding-right: 30px; }
	.hx-ctile__count:not(#hx_) { right: 8px; bottom: 10px; min-width: 22px; padding: 3px 6px; font-size: 11px; }

	.hx-cat__bar:not(#hx_) { flex-wrap: wrap; gap: 8px; }
	.hx-cat__count:not(#hx_) { order: 3; width: 100%; }
	.hx-cat__tools:not(#hx_) { gap: 6px; }
	.hx-catalog:not(#hx_) .hx-cat__sort select { height: 44px; max-width: 150px; padding: 0 32px 0 12px; font-size: 13px; }
	.hx-catalog:not(#hx_) .hx-cat__look button { height: 36px; padding: 0 11px; font-size: 12px; }

	/* Üks toode reas; "rohkem korraga" = kaks veergu kompaktselt */
	.hx-cat__grid:not(#hx_) { grid-template-columns: minmax( 0, 1fr ); gap: 14px; }

	.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; }

	.hx-catalog.is-dense:not(#hx_) .hx-pc { border-radius: 18px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__media { margin: 6px 6px 0; border-radius: 13px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__img { padding: 8px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__badges { top: 8px; left: 8px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__badge { padding: 4px 8px; font-size: 10px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__size { left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; overflow: hidden; font-size: 10px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__body { gap: 8px; padding: 10px 10px 12px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__eyebrow,
	.hx-catalog.is-dense:not(#hx_) .hx-pc__opts,
	.hx-catalog.is-dense:not(#hx_) .hx-pc__delivery { display: none; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__title { margin: 0; font-size: 14px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__sub { margin-top: -6px; font-size: 12px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__dot { width: 24px; height: 24px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__swatches .hx-pc__dot:nth-child( n+5 ) { display: none; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__swatches.is-expanded .hx-pc__dot { display: block; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__price { flex-direction: column; align-items: flex-start; gap: 4px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__price strong, .hx-catalog.is-dense:not(#hx_) .hx-pc__price .hx-t { font-size: 17px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__m2 { padding: 3px 8px; font-size: 11px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add { width: 100%; justify-content: center; height: 38px; font-size: 13px; }

	.hx-pc__price:not(#hx_) strong, .hx-pc__price:not(#hx_) .hx-t { font-size: 21px; }

	/* Kiirlisamine: alt avanev paneel */
	.hx-quickadd__panel:not(#hx_) {
		left: 0 !important;
		right: 0;
		bottom: 0;
		top: auto !important;
		width: auto !important;
		max-height: 90vh;
		max-height: 90dvh;
		border-radius: 26px 26px 0 0;
		transform: translateY( 100% );
		transition: transform .5s cubic-bezier( .2, .9, .2, 1 );
	}

	.hx-quickadd.is-open:not(#hx_) .hx-quickadd__panel { transform: none; opacity: 1; }

	.hx-quickadd__panel:not(#hx_)::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 42px;
		height: 5px;
		margin-left: -21px;
		border-radius: 999px;
		background: #DDD5CA;
	}

	.hx-quickadd__head:not(#hx_) { padding-top: 22px; }
}

@media ( max-width: 380px ) {
	.hx-pc:not(#hx_) .hx-pc__add span { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hx-catalog:not(#hx_) *,
	.hx-quickadd:not(#hx_) * { animation: none !important; transition-duration: .01ms !important; }
}


/* ---------------------------------------------------------------------
   v1.8 — päis, fotoga värviruudud
   --------------------------------------------------------------------- */

/* Variatsiooni foto värviruuduna: suurendame, et paistaks tekstuur, mitte kogu paneel */
.hx-pc:not(#hx_) .hx-pc__dot.is-photo span,
.hx-cf__dot.is-photo:not(#hx_) {
	background-size: 320% !important;
	background-position: 55% 50% !important;
}

.hx-cat__hero:not(#hx_) {
	margin: 8px 0 28px;
	padding: 36px 40px;
	border-radius: 28px;
	background: var( --k-tint );
	transition: background-color .4s;
}

.hx-catalog:not(#hx_) .hx-cat__crumbs {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var( --k-muted );
}

.hx-catalog:not(#hx_) .hx-cat__crumbs a { color: var( --k-ink ); text-decoration: underline; text-underline-offset: 3px; }

.hx-cat__hero-row:not(#hx_) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.hx-catalog:not(#hx_) .hx-cat__title {
	margin: 0 0 8px;
	font-size: clamp( 30px, 3.6vw, 48px );
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var( --k-ink );
}

.hx-catalog:not(#hx_) .hx-cat__lead { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.55; color: var( --k-muted ); }
/* v2.53 — kategooria tekst on pikem (40–70 sõna) */
.hx-catalog:not(#hx_) .hx-cat__lead--cat { max-width: 760px; font-size: 15px; }

.hx-cat__hero-text:not(#hx_) [data-hd-view] { animation: hx-pc-in .4s var( --k-ease ) both; }

@media ( max-width: 767px ) {

	.hx-cat__hero:not(#hx_) { margin-bottom: 18px; padding: 22px 18px; border-radius: 22px; }
	.hx-cat__hero-row:not(#hx_) { gap: 16px; }
	.hx-cat__hero-row:not(#hx_) .hx-switch { width: 100%; display: grid; }
	.hx-catalog:not(#hx_) .hx-cat__lead { font-size: 14px; }
}


/* =====================================================================
   v1.9
   ===================================================================== */

/* --- Kaarte reas: vaikimisi 4, valikuga 3 (kitsamal ekraanil vähem) --- */
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 4; gap: 20px; }

@media ( max-width: 1500px ) {
	.hx-cat__grid:not(#hx_) { --cols: 2; }
	.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 3; }
}

@media ( max-width: 1180px ) {
	.hx-cat__grid:not(#hx_),
	.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 2; }
}

/* --- Seinapilt: hover ei sega valiku muutmist --- */
.hx-pc.is-peek:not(#hx_) .hx-pc__wall { opacity: 0 !important; }

/* "Seinal" märk, kui interjööripilt on nähtav */
.hx-pc.has-wall:not(#hx_) .hx-pc__media::after {
	content: "Seinal";
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px 10px 6px 26px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .9 ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M7 4v12M11 4v12M15 4v12M5 20h14'/%3E%3C/svg%3E" ) 9px center / 13px no-repeat;
	color: var( --k-ink );
	font-size: 11px;
	font-weight: 700;
	opacity: 0;
	transform: translateY( -4px );
	transition: opacity .3s, transform .3s;
	pointer-events: none;
}

.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:not( .is-peek ) .hx-pc__media::after { opacity: 1; transform: none; }

@media ( hover: hover ) {
	.hx-catalog:not( .is-wall ):not(#hx_) .hx-pc.has-wall:not( .is-peek ):hover .hx-pc__media::after { opacity: 1; transform: none; }
	.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:hover .hx-pc__media::after { opacity: 0; }
}

/* --- Segmenteeritud lülitid (Paneel/Seinal, tihedus) --- */
.hx-seg:not(#hx_) {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	border-radius: 999px;
	background: var( --k-tint );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .05 );
	isolation: isolate;
}

.hx-seg__pill:not(#hx_) {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	z-index: -1;
	width: calc( 50% - 4px );
	border-radius: 999px;
	background: var( --k-accent );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, .15 );
	transition: transform .45s cubic-bezier( .3, 1.3, .5, 1 ), background-color .3s;
}

.hx-catalog.is-wall:not(#hx_) .hx-look .hx-seg__pill,
.hx-catalog.is-dense:not(#hx_) .hx-density .hx-seg__pill { transform: translateX( 100% ); }

.hx-catalog:not(#hx_) .hx-seg button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color .3s;
}

.hx-catalog:not(#hx_) .hx-seg button[aria-pressed="true"] { color: #fff; }
.hx-seg:not(#hx_) .hx-ci { width: 17px; height: 17px; }
.hx-catalog:not(#hx_) .hx-seg--icons button { width: 40px; padding: 0; }

/* --- Pikk filtrinimekiri --- */
.hx-cf__opt.is-extra:not(#hx_) { display: none !important; }
.hx-cf.is-all:not(#hx_) .hx-cf__opt.is-extra { display: flex !important; }

.hx-catalog:not(#hx_) .hx-cf__more {
	display: inline-flex;
	margin-top: 10px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var( --k-accent );
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hx-cf__more:not(#hx_) [hidden] { display: none; }

/* Suuruse kujutis: paneel õiges proportsioonis, liistudega */
.hx-cf__shape:not(#hx_) {
	flex: 0 0 auto;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	background: repeating-linear-gradient( 90deg, transparent 0 2px, rgba( 0, 0, 0, .18 ) 2px 3px );
	opacity: .55;
}

.hx-cf__opt.is-on:not(#hx_) .hx-cf__shape { opacity: 1; background: repeating-linear-gradient( 90deg, transparent 0 2px, rgba( 255, 255, 255, .5 ) 2px 3px ); }

/* --- Kerimisel ilmuv kataloogi menüü --- */
.hx-cat__sentinel:not(#hx_) { display: block; height: 1px; }

.hx-hd:not(#hx_) { transition: transform .45s var( --k-ease ); }
html.hx-hd-hidden:not(#hx_) .hx-hd { transform: translateY( calc( -100% - 30px ) ); }

.hx-catnav:not(#hx_) {
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0px );
	left: 0;
	right: 0;
	z-index: 9991;
	padding: 10px 16px 0;
	transform: translateY( calc( -100% - 20px ) );
	transition: transform .45s var( --k-ease );
	pointer-events: none;
}

html.hx-catnav-on:not(#hx_) .hx-catnav { transform: none; }

.hx-catnav__inner:not(#hx_) {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 2200px;
	height: 64px;
	margin: 0 auto;
	padding: 0 10px 0 18px;
	border-radius: 20px;
	background: rgba( 255, 255, 255, .9 );
	backdrop-filter: blur( 16px ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.5 );
	box-shadow: 0 12px 36px rgba( 0, 0, 0, .1 ), inset 0 0 0 1px rgba( 255, 255, 255, .7 );
	pointer-events: auto;
}

.hx-catalog:not(#hx_) .hx-catnav__logo { display: flex; flex: 0 0 auto; color: var( --k-ink ); font-weight: 700; }
.hx-catnav__logo:not(#hx_) img { display: block; width: auto; max-width: none; height: 34px; }

.hx-catalog:not(#hx_) .hx-catnav__filters {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var( --k-ink );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.hx-catnav__filters:not(#hx_) b:not( :empty ), .hx-catnav__filters:not(#hx_) .hx-b:not( :empty ) { padding: 2px 7px; border-radius: 999px; background: #fff; color: var( --k-ink ); font-size: 11px; }

.hx-catnav__pills:not(#hx_) {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	mask-image: linear-gradient( 90deg, #000 calc( 100% - 30px ), transparent );
	-webkit-mask-image: linear-gradient( 90deg, #000 calc( 100% - 30px ), transparent );
}

.hx-catnav__pills:not(#hx_)::-webkit-scrollbar { display: none; }

.hx-catalog:not(#hx_) .hx-pill {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var( --k-line );
	border-radius: 999px;
	background: #fff;
	color: var( --k-ink );
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.hx-catalog:not(#hx_) .hx-pill img { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; background: var( --k-tint ); object-fit: contain; }
.hx-catalog:not(#hx_) .hx-pill:hover { border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-pill.is-on { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; }

.hx-catnav__tools:not(#hx_) { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.hx-catnav__tools:not(#hx_) .hx-cat__sort select { height: 42px; }
.hx-catnav__tools:not(#hx_) .hx-cart-btn { height: 42px; }

@media ( max-width: 1400px ) {
	.hx-catnav__tools:not(#hx_) .hx-density,
	.hx-catnav__tools:not(#hx_) .hx-cat__sort { display: none; }
}

@media ( max-width: 1024px ) {

	.hx-catalog:not(#hx_) .hx-catnav__filters { display: inline-flex; }
	.hx-catnav__logo:not(#hx_),
	.hx-catnav__tools:not(#hx_) .hx-switch,
	.hx-catnav__tools:not(#hx_) .hx-cart-btn { display: none !important; }

}

@media ( max-width: 767px ) {

	.hx-catnav:not(#hx_) { padding: 10px 8px 0; }
	.hx-catnav__inner:not(#hx_) { gap: 8px; height: 58px; padding: 0 6px 0 8px; border-radius: 18px; }
	.hx-catalog:not(#hx_) .hx-catnav__filters span:not(.hx-b) { display: none; }
	.hx-catalog:not(#hx_) .hx-catnav__filters { width: 42px; padding: 0; justify-content: center; position: relative; }
	.hx-catnav__filters:not(#hx_) b:not( :empty ), .hx-catnav__filters:not(#hx_) .hx-b:not( :empty ) { position: absolute; top: -4px; right: -4px; }
	.hx-catnav__tools:not(#hx_) .hx-look button span { display: none; }
	.hx-catalog:not(#hx_) .hx-catnav__tools .hx-look button { width: 40px; padding: 0; }
	.hx-catalog:not(#hx_) .hx-pill { height: 38px; padding: 0 12px; }

	.hx-cat__tools:not(#hx_) .hx-look button span { display: none; }
	.hx-catalog:not(#hx_) .hx-cat__tools .hx-look button { width: 40px; padding: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hx-catnav:not(#hx_), .hx-hd:not(#hx_), .hx-seg__pill:not(#hx_) { transition: none; }
}


/* =====================================================================
   v2.0
   ===================================================================== */

/* Kataloogi menüü nupud (ei päri kategooriaplokkide stiile) */
.hx-catalog:not(#hx_) .hx-ctile.hx-pill {
	flex-direction: row;
	width: auto;
	height: 40px;
	padding: 0 14px;
	gap: 8px;
	border: 1px solid var( --k-line );
	border-width: 1px;
	border-radius: 999px;
	box-shadow: none;
	transform: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.hx-catalog:not(#hx_) .hx-ctile.hx-pill:hover { transform: none; box-shadow: none; border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-ctile.hx-pill.is-on { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; box-shadow: none; }

/* Suurused: paneelid samas mõõtkavas, "põrandal" kõrvuti */
.hx-cf__body--sizes:not(#hx_) {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
	gap: 8px;
}

.hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt {
	display: grid;
	grid-template-rows: 64px auto auto;
	justify-items: center;
	gap: 4px;
	padding: 10px 6px 8px;
	border-radius: 14px;
	text-align: center;
}

.hx-cf__panel:not(#hx_) {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 64px;
	border-bottom: 1.5px solid var( --k-line );
}

.hx-cf__panel:not(#hx_) i {
	display: block;
	border-radius: 2px;
	background: repeating-linear-gradient( 90deg, #C9A57E 0 2px, #2B211E 2px 3px );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, .12 );
	transition: transform .35s cubic-bezier( .3, 1.6, .5, 1 );
	transform-origin: bottom center;
}

.hx-cf__opt:hover:not( :disabled ):not(#hx_) .hx-cf__panel i { transform: scale( 1.08 ); }

.hx-catalog:not(#hx_) .hx-cf__opt.is-on .hx-cf__panel i {
	background: repeating-linear-gradient( 90deg, #B498A0 0 2px, var( --k-accent ) 2px 3px ); background: repeating-linear-gradient( 90deg, color-mix( in srgb, var( --k-accent ) 55%, #fff ) 0 2px, var( --k-accent ) 2px 3px );
}

.hx-cf__body--sizes:not(#hx_) .hx-cf__name { font-size: 12px; font-weight: 700; white-space: nowrap; }
.hx-cf__body--sizes:not(#hx_) .hx-cf__count { font-size: 11px; }

.hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt.is-on {
	border-color: var( --k-accent );
	background: #F5F2F3; background: color-mix( in srgb, var( --k-accent ) 7%, #fff );
	color: var( --k-ink );
}

/* Kiirlisamise värviring */
.hx-quickadd:not(#hx_) .hx-qa-opt.has-color { padding: 8px 4px 6px; }

.hx-qa-opt__dot:not(#hx_) {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
}

/* Telefon / tihe vaade: nupud kompaktsemaks */
@media ( max-width: 767px ) {
	.hx-catalog.is-dense:not(#hx_) .hx-pc__foot { grid-template-columns: auto minmax( 0, 1fr ); }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__view span { display: none; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc__view { width: 38px; height: 38px; padding: 0; }
}

@media ( max-width: 380px ) {
	.hx-pc__view:not(#hx_) span { display: none; }
	.hx-pc:not(#hx_) .hx-pc__view { width: 42px; padding: 0; }
}


/* =====================================================================
   v2.1
   ===================================================================== */

/* Kategooriate pildid: valge taust sulandub, pilt suurem */
.hx-ctile__img:not(#hx_) { height: 124px; padding: 2px; }
.hx-catalog:not(#hx_) .hx-ctile__img img { mix-blend-mode: multiply; transform: scale( 1.12 ); transition: transform .5s var( --k-ease ); }
.hx-catalog:not(#hx_) .hx-ctile:hover .hx-ctile__img img { transform: scale( 1.2 ); }
.hx-catalog:not(#hx_) .hx-ctile.hx-pill img { mix-blend-mode: multiply; }

@media ( max-width: 767px ) {
	.hx-ctile__img:not(#hx_) { height: 88px; }
}

/* Suurused: kõrgem ala, et laiemad paneelid mahuksid */
.hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt { grid-template-rows: 74px auto auto; }
.hx-cf__panel:not(#hx_) { height: 74px; }
.hx-cf__panel:not(#hx_) i { border-radius: 3px; }

/* Kaardi valikud ühel real */
.hx-pc__opts:not(#hx_) { flex-wrap: nowrap; }
.hx-pc__opts-label:not(#hx_) { display: none; }

.hx-catalog:not(#hx_) .hx-pc .hx-pc__opt:not( .hx-pc__opt--dot ) {
	flex: 1 1 0;
	min-width: 0;
	padding: 7px 4px;
	overflow: hidden;
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Seinapilt: kogu kaardi laiuses */
.hx-pc:not(#hx_) .hx-pc__media { transition: margin .35s var( --k-ease ), border-radius .35s var( --k-ease ); }

.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall .hx-pc__media {
	margin: 0;
	border-radius: 22px 22px 0 0;
}

/* Täislaiuses kataloog -> ka päis ja kataloogi menüü täislaiuses */
body.hx-wide-page:not(#hx_) .hx-hd { padding-left: clamp( 14px, 2.6vw, 56px ); padding-right: clamp( 14px, 2.6vw, 56px ); }
body.hx-wide-page:not(#hx_) .hx-hd__bar { max-width: none; }
body.hx-wide-page:not(#hx_) .hx-mega { left: clamp( 14px, 2.6vw, 56px ); right: clamp( 14px, 2.6vw, 56px ); max-width: none; }
body.hx-wide-page:not(#hx_) .hx-mega--small { right: auto; }
.hx-catnav:not(#hx_) { padding-left: clamp( 8px, 2.6vw, 56px ); padding-right: clamp( 8px, 2.6vw, 56px ); }
.hx-catnav__inner:not(#hx_) { max-width: none; }


/* =====================================================================
   v2.3
   ===================================================================== */

/* --- Kategooriad: kompaktne rida, väike pilt + nimi + kogus ja alghind --- */
.hx-ctabs:not(#hx_) {
	display: grid;
	grid-auto-columns: minmax( 210px, 1fr );
	grid-auto-flow: column;
	gap: 10px;
	margin: 0 0 26px;
	padding: 2px 2px 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.hx-ctabs:not(#hx_)::-webkit-scrollbar { display: none; }

.hx-catalog:not(#hx_) .hx-ctab {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	height: 92px;
	padding: 8px 14px 8px 8px;
	border: 1px solid var( --k-line );
	border-radius: 20px;
	background: #fff;
	color: var( --k-ink );
	text-align: left;
	scroll-snap-align: start;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.hx-catalog:not(#hx_) .hx-ctab:hover { border-color: var( --k-ink ); background: #fff; color: var( --k-ink ); }

.hx-catalog:not(#hx_) .hx-ctab.is-on {
	border-color: var( --k-accent );
	background: #F7F4F5; background: color-mix( in srgb, var( --k-accent ) 6%, #fff );
	box-shadow: inset 0 0 0 1px var( --k-accent );
}

.hx-catalog:not(#hx_) .hx-ctab:focus-visible { outline: 2px solid var( --k-accent ); outline-offset: 2px; }

.hx-ctab__img:not(#hx_) {
	display: flex;
	flex: 0 0 74px;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	overflow: hidden;
	border-radius: 14px;
	background: var( --k-tint );
}

.hx-catalog:not(#hx_) .hx-ctab__img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
	transform: scale( 1.15 );
	transition: transform .5s var( --k-ease );
}

.hx-catalog:not(#hx_) .hx-ctab:hover .hx-ctab__img img { transform: scale( 1.28 ); }

/* "Kõik": nelja kategooria mosaiik */
.hx-ctab__img--mosaic:not(#hx_) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	padding: 5px;
}

.hx-ctab__img--mosaic:not(#hx_) i {
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 7px;
	background: #FAF7F2; background: color-mix( in srgb, var( --k-tint ) 60%, #fff );
}

.hx-catalog:not(#hx_) .hx-ctab__img--mosaic img { transform: scale( 1.35 ); }
.hx-catalog:not(#hx_) .hx-ctab:hover .hx-ctab__img--mosaic img { transform: scale( 1.5 ); }

.hx-ctab__text:not(#hx_) { display: grid; gap: 4px; min-width: 0; }

.hx-ctab__name:not(#hx_) {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hx-ctab__meta:not(#hx_) {
	overflow: hidden;
	color: var( --k-muted );
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hx-ctab.is-on:not(#hx_) .hx-ctab__meta { color: var( --k-accent ); font-weight: 600; }

@media ( max-width: 767px ) {
	.hx-ctabs:not(#hx_) { grid-auto-columns: 196px; gap: 8px; margin-bottom: 18px; }
	.hx-catalog:not(#hx_) .hx-ctab { height: 76px; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 18px; }
	.hx-ctab__img:not(#hx_) { flex-basis: 62px; width: 62px; height: 62px; border-radius: 12px; }
	.hx-ctab__name:not(#hx_) { font-size: 14px; }
	.hx-ctab__meta:not(#hx_) { font-size: 12px; }
}

/* --- Filtrid liiguvad kaasa: position: sticky (brauser liigutab, ei värise) --- */
.hx-cat__side-sp:not(#hx_) { display: none; }

@media ( min-width: 1025px ) {

	.hx-cat__side:not(#hx_) {
		align-self: stretch;
		will-change: auto;
		transform: none !important;
	}

	.hx-cat__side-sp:not(#hx_) { display: block; height: 0; }

	.hx-cat__side-body:not(#hx_) {
		position: -webkit-sticky;
		position: sticky;
		top: 112px;
	}

	.hx-cat__side-body.is-fit:not(#hx_) { transition: top .45s var( --k-ease ); }

	/* Varuvariant, kui teema ümbris lõhub sticky */
	.hx-cat__side.is-legacy:not(#hx_) { align-self: start; }
	.hx-cat__side.is-legacy:not(#hx_) .hx-cat__side-body { position: static; }
}

/* --- Päringutoode kaardil --- */
.hx-pc__price--inq:not(#hx_) { align-items: center; min-height: 32px; }

.hx-pc__price--inq:not(#hx_) span {
	color: var( --k-accent );
	font-size: 16px;
	font-weight: 700;
}

.hx-pc:not(#hx_) .hx-pc__add--inq:hover .hx-ci { transform: none; }

/* --- Kataloogi menüü: ilma logota, alustab filtrite/kategooriatega --- */
.hx-catnav__inner:not(#hx_) { padding-left: 10px; }


/* =====================================================================
   v2.20
   ===================================================================== */

/* --- Päisekast eristub lehe taustast (Äri toon oli taustaga peaaegu sama) --- */
.hx-cat__hero:not(#hx_) {
	background: #E7E2DC; background: color-mix( in srgb, var( --k-tint ) 93%, var( --k-ink ) 7% );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .05 );
}

html.hx-view-ari:not(#hx_) .hx-cat__hero { background: #E3E2E2; background: color-mix( in srgb, var( --k-tint ) 82%, #8DA0C0 18% ); }
html.hx-view-kodu:not(#hx_) .hx-cat__hero { background: #EFE6DB; background: color-mix( in srgb, var( --k-tint ) 84%, #C9AE8C 16% ); }

/* --- Kerimismenüü: selgelt nähtav, suurtel ekraanidel ainult kaartide veeru laiune --- */
.hx-catnav__inner:not(#hx_) {
	background: #fff;
	box-shadow: 0 18px 44px rgba( 28, 22, 18, .16 ), 0 2px 6px rgba( 28, 22, 18, .06 ), inset 0 0 0 1px rgba( 0, 0, 0, .06 );
}

.hx-catalog:not(#hx_) .hx-catnav .hx-pill { border-color: rgba( 202, 196, 187, 0.82 ); border-color: color-mix( in srgb, var( --k-line ) 70%, var( --k-ink ) 12% ); }

@media ( min-width: 1025px ) {
	html.hx-catnav-fit:not(#hx_) .hx-catnav {
		left: var( --cn-left, 0px );
		right: auto;
		width: var( --cn-width, 100% );
		padding-left: 0;
		padding-right: 0;
	}

	html.hx-catnav-fit:not(#hx_) .hx-catnav__inner { max-width: none; }
}


/* =====================================================================
   v2.27 — kitsas telefon (≤380, nt iPhone 7/SE): nupud tekstiga
   Varem peideti siin mõlema nupu tekst -> kaks ikooni ja suur tühi vahe.
   ===================================================================== */

@media ( max-width: 380px ) {

	/* Üks kaart reas: ruumi on — mõlemad välja kirjutatud */
	.hx-catalog:not( .is-dense ):not(#hx_) .hx-pc__view span,
	.hx-catalog:not( .is-dense ):not(#hx_) .hx-pc .hx-pc__add span { display: inline; }
	.hx-catalog:not( .is-dense ):not(#hx_) .hx-pc .hx-pc__view { width: auto; padding: 0 14px; }

	/* Kaks kaarti reas: "vaata" ikoon + "Lisa korvi" ülejäänud laiuses */
	.hx-catalog.is-dense:not(#hx_) .hx-pc__foot { grid-template-columns: 34px minmax( 0, 1fr ); gap: 6px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__view { width: 34px; height: 34px; padding: 0; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add { width: 100%; height: 34px; padding: 0 8px; gap: 4px; font-size: 12.5px; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add span { display: inline; overflow: hidden; text-overflow: ellipsis; }
	.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add .hx-ci { flex: 0 0 auto; width: 14px; height: 14px; }
}


/* =====================================================================
   v2.28 — TELEFONI KATALOOG kompaktsemaks
   - bänner ilma kasti ja tekstita, pealkiri ühel real, all Kodule/Ärile
   - kategooriad: täislaiuses nupp -> alt üles leht, 2 kaarti reas
   - Filtrid sorteerimise kohal, sorteerimine ikoon, "X toodet" ära
   - alumine menüü (tabbar) ära, kataloogi menüü (catnav) all
   ===================================================================== */

/* Arvutis: nuppu pole, leht = tavaline plokk (display: contents) */
.hx-cat__catbtn:not(#hx_),
.hx-cat__catsheet-head:not(#hx_),
.hx-cat__catscrim:not(#hx_) { display: none; }
.hx-cat__catsheet:not(#hx_) { display: contents; }

@media ( max-width: 767px ) {

	/* --- Bänner --- */
	/* html ees: html.hx-view-kodu .hx-cat__hero annab muidu tausta tagasi */
	html:not(#hx_) body .hx-catalog .hx-cat__hero { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
	.hx-catalog:not(#hx_) .hx-cat__crumbs { margin-bottom: 6px; font-size: 12.5px; }
	.hx-catalog:not(#hx_) .hx-cat__lead { display: none; }
	.hx-catalog:not(#hx_) .hx-cat__title {
		margin: 0 0 12px;
		overflow: hidden;
		font-size: clamp( 21px, 6.2vw, 27px );
		line-height: 1.15;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hx-cat__hero-row:not(#hx_) { flex-direction: column; align-items: stretch; gap: 0; }
	.hx-cat__hero-row:not(#hx_) .hx-switch { width: 100%; }

	/* --- Kategooria nupp --- */
	.hx-catalog:not(#hx_) .hx-cat__catbtn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 74px;
		margin: 0 0 12px;
		padding: 8px 12px 8px 8px;
		border: 0;
		border-radius: 22px;
		background-color: #764452;
		background-color: var( --k-accent );
		background-image: linear-gradient( 135deg, rgba( 255, 255, 255, .14 ), rgba( 255, 255, 255, 0 ) 55% );
		color: #fff;
		font: inherit;
		text-align: left;
		box-shadow: 0 12px 26px rgba( 118, 68, 82, .3 );
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s;
	}

	.hx-catalog:not(#hx_) .hx-cat__catbtn[hidden] { display: none; }
	.hx-catalog:not(#hx_) .hx-cat__catbtn:active { transform: scale( .985 ); }

	.hx-cat__catbtn-img:not(#hx_) {
		display: flex;
		flex: 0 0 58px;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 58px;
		overflow: hidden;
		border-radius: 15px;
		background: #fff;
	}

	.hx-cat__catbtn-img:not(#hx_) img { display: block; width: 100%; height: 100%; object-fit: contain; }

	.hx-cat__catbtn-img.is-mosaic:not(#hx_) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
	.hx-cat__catbtn-img.is-mosaic:not(#hx_) i { display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 5px; background: #F9F6F1; }
	.hx-cat__catbtn-img.is-mosaic:not(#hx_) img { object-fit: cover; transform: scale( 1.35 ); }

	.hx-cat__catbtn-txt:not(#hx_) { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; line-height: 1.2; }
	.hx-cat__catbtn-txt:not(#hx_) small { color: rgba( 255, 255, 255, .72 ); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
	.hx-cat__catbtn-txt:not(#hx_) b, .hx-cat__catbtn-txt:not(#hx_) .hx-b { overflow: hidden; font-size: 17px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

	.hx-cat__catbtn-meta:not(#hx_) { text-transform: none; letter-spacing: 0; }
	.hx-cat__catbtn-meta:not( :empty ):not(#hx_)::before { content: " · "; }

	.hx-cat__catbtn-ico:not(#hx_) {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #fff;
		color: #764452;
		color: var( --k-accent );
	}

	.hx-cat__catbtn-ico:not(#hx_) svg { width: 18px; height: 18px; }

	/* --- Alt üles leht --- */
	.hx-catalog:not(#hx_) .hx-cat__catsheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10001;
		display: block;
		max-height: 86vh;
		padding: 0 14px calc( 18px + env( safe-area-inset-bottom, 0px ) );
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 24px 24px 0 0;
		background: #fff;
		box-shadow: 0 -18px 50px rgba( 20, 14, 10, .22 );
		transform: translateY( 105% );
		visibility: hidden;
		transition: transform .38s cubic-bezier( .2, .8, .2, 1 ), visibility 0s linear .38s;
	}

	html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-cat__catsheet {
		transform: none;
		visibility: visible;
		transition: transform .38s cubic-bezier( .2, .8, .2, 1 ), visibility 0s;
	}

	html.hx-cat-sheet-open:not(#hx_),
	html.hx-cat-sheet-open:not(#hx_) body { overflow: hidden; }

	.hx-catalog:not(#hx_) .hx-cat__catsheet-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 -14px 6px;
		padding: 20px 14px 12px;
		background: #fff;
	}

	.hx-cat__catsheet-grip:not(#hx_) { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var( --k-line ); }
	.hx-cat__catsheet-head:not(#hx_) strong, .hx-cat__catsheet-head:not(#hx_) .hx-t { color: var( --k-ink ); font-size: 19px; font-weight: 800; }

	.hx-catalog:not(#hx_) .hx-cat__catsheet-x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var( --k-tint );
		color: var( --k-ink );
		cursor: pointer;
	}

	.hx-cat__catsheet-x:not(#hx_) .hx-ci { width: 18px; height: 18px; }

	.hx-catalog:not(#hx_) .hx-cat__catscrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; display: block; background: rgba( 20, 14, 10, .45 ); opacity: 0; transition: opacity .3s; }
	.hx-catalog:not(#hx_) .hx-cat__catscrim[hidden] { display: none; }
	html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-cat__catscrim { opacity: 1; }

	/* Kategooriad lehel: 2 reas, pilt üleval, all nimi ja tekst */
	.hx-cat__catsheet:not(#hx_) .hx-cat__tiles { margin: 0; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctabs {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: 10px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		height: auto;
		padding: 7px 7px 11px;
		border-radius: 18px;
		opacity: 1;
		animation: none;
	}

	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 13px;
	}

	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img img { width: 100%; height: 100%; object-fit: contain; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img--mosaic { gap: 3px; padding: 5px; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img--mosaic img { object-fit: cover; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__text { gap: 2px; padding: 0 4px; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__name { overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__meta { font-size: 12px; }
	.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab.is-on { border-color: var( --k-accent ); box-shadow: 0 0 0 2px var( --k-accent ) inset; }

	/* --- Tööriistariba: Filtrid laiaks, sorteerimine ikooniks, arv ära --- */
	.hx-catalog:not(#hx_) .hx-cat__bar { flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 14px; }
	.hx-catalog:not(#hx_) .hx-cat__count { display: none; }
	.hx-catalog:not(#hx_) .hx-cat__filters-btn { flex: 1 1 auto; justify-content: center; min-width: 0; height: 44px; }
	.hx-catalog:not(#hx_) .hx-cat__tools { flex: 0 0 auto; gap: 6px; margin-left: 0; }

	.hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort {
		position: relative;
		display: block;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		overflow: hidden;
		border: 1px solid var( --k-line );
		border-radius: 999px;
		background: #fff;
	}

	.hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		background: var( --k-ink );
		-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E" ) center / contain no-repeat;
		mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E" ) center / contain no-repeat;
		pointer-events: none;
	}

	/* Päris valik on nähtamatult ikooni peal -> puudutus avab telefoni enda valikulisti */
	.hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort select {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		font-size: 16px;
		cursor: pointer;
	}

	.hx-catalog:not(#hx_) .hx-cat__tools .hx-seg button { width: 36px; min-width: 0; padding: 0; }

	/* --- Alumine menüü ära; kataloogi menüü (catnav) tuleb alla --- */
	body.hx-catalog-page:not(#hx_) .hx-tabbar,
	body.hx-catalog-page:not(#hx_) .hx-sheet { display: none !important; }
	body.hx-catalog-page.hx-has-tabbar:not(#hx_) { padding-bottom: calc( 88px + env( safe-area-inset-bottom, 0px ) ) !important; }

	body.hx-catalog-page:not(#hx_) .hx-catnav {
		top: auto;
		bottom: 0;
		padding: 0 8px calc( 8px + env( safe-area-inset-bottom, 0px ) );
		transform: translateY( calc( 100% + 20px ) );
	}

	html.hx-catnav-on:not(#hx_) body.hx-catalog-page .hx-catnav { transform: none; }
	html.hx-cat-sheet-open:not(#hx_) body.hx-catalog-page .hx-catnav { transform: translateY( calc( 100% + 20px ) ); }

	body.hx-catalog-page:not(#hx_) .hx-catnav__inner { box-shadow: 0 -4px 18px rgba( 0, 0, 0, .06 ), 0 14px 36px rgba( 0, 0, 0, .16 ), inset 0 0 0 1px rgba( 255, 255, 255, .7 ); }

	/* Ostukorv menüüs (alumist riba pole) — ainult ikoon + arv */
	body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-cart-btn { display: inline-flex !important; flex: 0 0 auto; height: 42px; padding: 0 10px; }
	body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-cart-btn__total { display: none; }
	/* Paneel/Seinal on lehe tööriistaribal — all ruum kategooriatele */
	body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-look { display: none; }
}

@media ( max-width: 767px ) {
	.hx-catalog:not(#hx_) .hx-pc { animation: none; }
}


/* =====================================================================
   v2.30 — telefoni kataloog: päis ja kerimismenüü ära,
   alumine tööriistariba (dock) ilmub, kui lehe tööriistariba on läinud
   ===================================================================== */

.hx-catdock:not(#hx_) { display: none; }

@media ( max-width: 767px ) {

	body.hx-catalog-page:not(#hx_) .hx-hd-root,
	body.hx-catalog-page:not(#hx_) .hx-catnav { display: none !important; }

	/* päist pole -> natuke ruumi üles */
	body.hx-catalog-page:not(#hx_) .hx-catalog { padding-top: 14px; }

	.hx-catalog:not(#hx_) .hx-catdock {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
		z-index: 9996; /* vana alumise riba (9995) kohal, kui see peaks ikka olema */
		display: grid;
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		align-items: center;
		height: 64px;
		padding: 0 4px;
		border-radius: 22px;
		background: rgba( 255, 255, 255, .94 );
		-webkit-backdrop-filter: blur( 14px ) saturate( 1.4 );
		backdrop-filter: blur( 14px ) saturate( 1.4 );
		box-shadow: 0 0 0 1px rgba( 40, 28, 22, .06 ), 0 14px 36px rgba( 40, 28, 22, .2 );
		transform: translateY( calc( 100% + 30px ) );
		transition: transform .38s cubic-bezier( .2, .8, .2, 1 );
	}

	html.hx-catdock-on:not(#hx_) .hx-catalog .hx-catdock { transform: none; }
	html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-catdock,
	html.hx-cat-filters-open:not(#hx_) .hx-catalog .hx-catdock { transform: translateY( calc( 100% + 30px ) ); }

	.hx-catalog:not(#hx_) .hx-catdock__btn {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		height: 56px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 16px;
		background: transparent;
		color: var( --k-ink );
		font: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.hx-catalog:not(#hx_) .hx-catdock__btn:active { background: var( --k-tint ); }

	.hx-catdock__ico:not(#hx_) { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
	.hx-catdock__ico:not(#hx_) .hx-ci,
	.hx-catdock__ico:not(#hx_) svg { width: 22px; height: 22px; }

	.hx-catalog:not(#hx_) .hx-catdock__btn small { overflow: hidden; max-width: 100%; color: var( --k-muted ); font-size: 10.5px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }

	/* Filtrite arv */
	.hx-catdock__ico:not(#hx_) b:not( :empty ), .hx-catdock__ico:not(#hx_) .hx-b:not( :empty ) {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 999px;
		background: var( --k-accent );
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 17px;
		text-align: center;
	}

	/* Järjesta: päris valik nähtamatult peal */
	.hx-catalog:not(#hx_) .hx-catdock__sort select {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		font-size: 16px;
		cursor: pointer;
	}

	/* Paneel / Seinal: näitab, kuhu vahetab */
	.hx-catalog:not( .is-wall ):not(#hx_) .hx-catdock__look-wall,
	.hx-catalog.is-wall:not(#hx_) .hx-catdock__look-panel { display: none; }
	.hx-catdock__look:not(#hx_) .hx-catdock__ico > span { display: flex; }

	/* Ostukorv: ikoon + arv */
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: var( --k-ink );
	}

	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* kogu nupp vajutatav */
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__total { display: none; }
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__icon { width: 22px; height: 22px; }
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count {
		position: absolute;
		top: 2px;
		left: calc( 50% + 4px );
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		font-size: 10px;
		line-height: 17px;
	}

	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn:not( .has-items ) .hx-cart-btn__count { display: none; }

	body.hx-catalog-page:not(#hx_) { padding-bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ) !important; }
}


/* v2.31 — alumine tööriistariba tumedaks (paistab silma); lehed jäävad heledaks */
@media ( max-width: 767px ) {
	.hx-catalog:not(#hx_) .hx-catdock {
		background: rgba( 28, 24, 23, .96 );
		box-shadow: 0 0 0 1px rgba( 255, 255, 255, .06 ) inset, 0 14px 36px rgba( 20, 14, 10, .35 );
	}
	.hx-catalog:not(#hx_) .hx-catdock__btn { color: #fff; }
	/* cart.css annab .hx-cart-btn { color: … !important } — seepärast siin ka !important */
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn,
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn .hx-cico { color: #fff !important; }
	.hx-catalog:not(#hx_) .hx-catdock__btn small { color: rgba( 255, 255, 255, .62 ); }
	.hx-catalog:not(#hx_) .hx-catdock__btn:active { background: rgba( 255, 255, 255, .1 ); }
	.hx-catdock__ico:not(#hx_) b:not( :empty ),
.hx-catdock__ico:not(#hx_) .hx-b:not( :empty ),
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count { box-shadow: 0 0 0 2px #1C1817; }
	.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count { background: var( --k-accent ); color: #fff; }
}

/* v2.35 — kitsamal arvutiekraanil (nt 1536px sülearvuti) olid 4 kaarti ~250px
   laiad ja "Vaata toodet" / "Lisa korvi" ei mahtunud. Veergude arv sõltub nüüd
   võrgu laiusest: kaart vähemalt 270px (nupud vajavad ~260px); kuni 1800px ekraanini max 3 kaarti reas,
   laiemal max 4. (≤1180px jäävad senised reeglid.) */
@media ( min-width: 1181px ) {
	.hx-catalog.is-dense:not(#hx_) .hx-cat__grid {
		grid-template-columns: repeat( auto-fill, minmax( max( 270px, calc( ( 100% - 3 * 20px ) / 4 ) ), 1fr ) );
	}
}

@media ( min-width: 1181px ) and ( max-width: 1800px ) {
	.hx-catalog.is-dense:not(#hx_) .hx-cat__grid {
		grid-template-columns: repeat( auto-fill, minmax( max( 270px, calc( ( 100% - 2 * 20px ) / 3 ) ), 1fr ) );
	}
}


/* =====================================================================
   v2.51 — telefon: kataloogi ülaosa = valitud kategooria foto (K7)
   Foto üle kogu ülaosa, tume üleminek; murupuru ja Kodu/Äri lüliti
   üleval; pealkiri (või valitud kategooria nimi) all; kategooriad
   ümmarguste pisipiltidena foto alaservas; tööriistariba hõljub serval.
   Foto, nimi ja meta: kataloog.js (sync). Pildid: Kataloog → Telefoni päis.
   Tootekaardid, dokk ja selle loogika muutumata.
   ===================================================================== */

.hx-cat__mtiles:not(#hx_),
.hx-cat__mphoto:not(#hx_),
.hx-cat__mhead:not(#hx_),
.hx-ctab__photo:not(#hx_) { display: none; }

@media ( max-width: 767px ) {

	.hx-catalog.has-mtiles:not(#hx_) { --mk-dark: #17110E; }
	html.hx-view-ari:not(#hx_) .hx-catalog.has-mtiles { --mk-dark: #111822; }

	/* --- Foto-plokk servast servani --- */
	html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 430px;
		margin: -14px -14px 0;
		padding: 70px 18px 46px;
		overflow: hidden;
		border-radius: 0 0 28px 28px;
		background: var( --mk-dark );
		color: #fff;
		isolation: isolate;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto {
		position: absolute;
		inset: 0;
		z-index: -2;
		display: block;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		transition: opacity .35s ease;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img.is-swap { opacity: .25; }

	html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient( 180deg,
			rgba( 14, 10, 8, .62 ) 0%,
			rgba( 14, 10, 8, .12 ) 24%,
			rgba( 14, 10, 8, .42 ) 48%,
			rgba( 14, 10, 8, .9 ) 78%,
			var( --mk-dark ) 100% );
	}

	/* Murupuru üleval vasakul, lüliti üleval paremal */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs {
		position: absolute;
		top: 22px;
		left: 18px;
		margin: 0;
		color: rgba( 255, 255, 255, .75 );
		font-size: 12.5px;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs a { color: rgba( 255, 255, 255, .9 ); }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row { position: static; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch {
		--sw-h: 32px;
		position: absolute;
		top: 14px;
		right: 14px;
		width: auto;
		display: inline-grid;
		background: rgba( 255, 255, 255, .16 );
		box-shadow: inset 0 0 0 1px rgba( 242, 235, 228, .32 );
		-webkit-backdrop-filter: blur( 12px );
		backdrop-filter: blur( 12px );
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch .hx-switch__btn { padding: 0 12px; color: #fff !important; font-size: 12.5px; }
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch .hx-switch__btn svg { display: none; }

	/* Pealkiri: suur; kategooria valitud -> väike rida, nimi suurelt */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__title {
		margin: 0;
		color: #fff;
		font-size: clamp( 28px, 8.4vw, 33px );
		line-height: 1.04;
		letter-spacing: -.02em;
		white-space: normal;
		text-shadow: 0 2px 20px rgba( 0, 0, 0, .25 );
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero.is-cat .hx-cat__title {
		margin-bottom: 6px;
		color: rgba( 255, 255, 255, .75 );
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-shadow: none;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mhead { display: block; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mname {
		color: #fff;
		font-size: clamp( 28px, 8.4vw, 33px );
		font-weight: 800;
		line-height: 1.04;
		letter-spacing: -.02em;
		text-shadow: 0 2px 20px rgba( 0, 0, 0, .25 );
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero:not( .is-cat ) .hx-cat__mname { display: none; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mmeta { margin-top: 6px; color: rgba( 255, 255, 255, .82 ); font-size: 14px; }

	/* --- Kategooriad: ümmargused pisipildid --- */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles { display: block; margin: 18px -18px 0; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-cat__tiles { margin: 0; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctabs {
		display: flex;
		gap: 12px;
		margin: 0;
		padding: 4px 18px 2px;
		scroll-padding: 0 18px;
		scroll-snap-type: x proximity;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab {
		flex: 0 0 74px;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		height: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #fff;
		text-align: center;
		scroll-snap-align: start;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab:hover { background: transparent; color: #fff; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img {
		position: relative;
		flex: none;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background: rgba( 255, 255, 255, .1 );
		box-shadow: 0 0 0 1px rgba( 242, 235, 228, .32 );
		transition: box-shadow .25s;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab.is-on .hx-ctab__img { box-shadow: 0 0 0 2px var( --mk-dark ), 0 0 0 4px #F2EBE4; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img .hx-ctab__photo {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		mix-blend-mode: normal;
		transform: none;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__text { display: block; width: 100%; padding: 0; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__name {
		display: -webkit-box;
		overflow: hidden;
		color: rgba( 255, 255, 255, .72 );
		font-size: 11.5px;
		font-weight: 500;
		line-height: 1.25;
		white-space: normal;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab.is-on .hx-ctab__name { color: #fff; font-weight: 700; }
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__meta { display: none; }

	/* Vana kategooria nupp ja alt avanev leht ära */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__catbtn,
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__catsheet,
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__catscrim { display: none !important; }

	/* --- Tööriistariba hõljub serval; kaardi suuruse lüliti telefonis ära --- */
	.hx-catalog:not(#hx_) .hx-cat__tools .hx-density { display: none; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__bar {
		position: relative;
		z-index: 3;
		margin: -27px 0 16px;
		padding: 6px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 14px 30px rgba( 20, 14, 10, .18 );
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__filters-btn {
		height: 42px;
		border: 0;
		background: var( --k-ink );
		color: #fff;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__tools .hx-cat__sort { flex-basis: 42px; width: 42px; height: 42px; }
}

@media ( max-width: 767px ) and ( prefers-reduced-motion: reduce ) {
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img { transition: none; }
}


/* =====================================================================
   v2.52 — telefon: K1 menüü kataloogi foto peal + pisipiltide ring
   - Saidi päis (logo, otsing, korv, menüü) on kataloogis telefonis jälle
     näha: valge kaart foto peal, ei liigu kerimisel kaasa (dokk jääb).
   - Murupuru ja Kodu/Äri lüliti menüü all.
   - Kategooria pildid ei ulatu ringist välja (Safari ei lõika
     border-radius + overflow: hidden all transformitud pilte).
   ===================================================================== */

@media ( max-width: 767px ) {

	/* --- Päis tagasi (v2.30 peitis) --- */
	html:not(#hx_) body.hx-catalog-page .hx-hd-root { display: block !important; }
	body.hx-catalog-page:not(#hx_) .hx-hd-spacer { display: none; }
	body.hx-catalog-page:not(#hx_) .hx-hd { position: absolute !important; top: 0; transform: none !important; }
	body.hx-catalog-page:not(#hx_) .hx-hd__bar { animation: none; }

	/* Logo vasakul, otsing + korv + menüü paremal (alumist riba siin pole) */
	body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar { grid-template-columns: auto minmax( 0, 1fr ); justify-items: stretch; }
	body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__logo { justify-self: start; }
	body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions { display: flex; align-items: center; justify-self: end; gap: 2px; }

	body.hx-catalog-page:not(#hx_) .hx-hd__actions > .hx-lang,
	body.hx-catalog-page:not(#hx_) .hx-hd__actions > [class*="hx-lang"],
	body.hx-catalog-page:not(#hx_) .hx-hd__actions > .hx-hd__theme { display: none !important; }

	body.hx-catalog-page:not(#hx_) .hx-hd .hx-hd__search,
	body.hx-catalog-page:not(#hx_) .hx-hd .hx-hd__burger { display: inline-flex; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }

	body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions > .hx-hd__cart,
	body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions > .hx-hd__burger { display: inline-flex !important; }
	body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn { height: 42px; padding: 0 8px; gap: 4px; border: 0; background: transparent; box-shadow: none; }
	body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn__total { display: none; }
	body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn__count { min-width: 20px; height: 20px; font-size: 11px; }

	/* --- Foto-plokk: ruum menüüle; murupuru ja lüliti selle all --- */
	html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero { min-height: 470px; padding-top: 136px; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs { top: 96px; left: 18px; }

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch { top: 86px; right: 14px; }

	/* --- Pisipildid: kõik sisu ringi sees --- */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img img,
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img i,
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab:hover .hx-ctab__img img {
		border-radius: 50%;
		transform: none !important;
		transition: none;
	}

	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img .hx-ctab__photo {
		-webkit-clip-path: circle( 50% at 50% 50% );
		clip-path: circle( 50% at 50% 50% );
	}

	/* Ilma fotota (ainult värviruut / mosaiik): samuti ringi sisse.
	   Ümbrist ennast ei lõigata, muidu kaoks valitud kaardi ring. */
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img--mosaic { padding: 6px; gap: 2px; }
	.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img > img:not( .hx-ctab__photo ) {
		-webkit-clip-path: circle( 50% at 50% 50% );
		clip-path: circle( 50% at 50% 50% );
	}
}