/**
 * MK Kataloog — tootearhiiv (kategooria, silt, pood, otsing).
 *
 * Laetakse pärast tokens.css / theme.css / woo.css. Siin on ainult arhiivi
 * omad klassid; ühised klassid (.mk-container, .mk-btn, .mk-card, .mk-chip,
 * .mk-badge, .mk-eyebrow) tulevad teema tuumast.
 */

/* -------------------------------------------------------------------------
 * 1. Lehe karkass
 * ---------------------------------------------------------------------- */

.mk-archive {
	display: block;
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
}

.mk-archive__breadcrumb {
	border-bottom: 1px solid var(--mk-line, #e3e3e0);
	padding: 10px 0;
	font-size: var(--mk-fs-meta, 13px);
	color: var(--mk-muted, #5d5d58);
}

.mk-archive__breadcrumb a {
	color: var(--mk-muted, #5d5d58);
	text-decoration: none;
}

.mk-archive__breadcrumb a:hover {
	color: var(--mk-accent, #d7182a);
}

/* Kompaktne päis: pealkiri vasakul, alamkategooria kiibid samal real selle kõrval,
   kirjeldus (kui on) täislaiuses rea all. Mõõdetud enne: leivapurust filtrini ~280 px. */
.mk-archive__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding: 20px 0 0;
}

.mk-archive__title-box {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}

.mk-archive__title {
	margin: 0;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.mk-archive__header .mk-subcats {
	flex: 1 1 320px;
	min-width: 0;
	gap: 6px;
}

/* Päise kiibid on tihedamad kui filtrikiibid: kataloogi juurel on 9 kiipi (Kõik + 8
   ülemkategooriat), mis 1 312 px konteineris jäid 13 px võrra kahele reale (mõõdetud
   18.09.2026: kiibid 1 084 px + 8 × 8 px vahet = 1 148 > 1 135). 12 px külgpolster ja
   6 px vahe annavad ~40 px varu; kitsamal ekraanil murduvad read endiselt. */
.mk-archive__header .mk-subcats .mk-chip {
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}

.mk-archive__intro {
	flex: 0 0 100%;
	max-width: 760px;
	font-size: var(--mk-fs-body, 15px);
	line-height: 1.6;
	color: var(--mk-ink-2, #3b3b37);
}

.mk-archive__intro p {
	margin: 0 0 8px;
}

.mk-archive__intro p:last-child {
	margin-bottom: 0;
}

.mk-archive__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 40px;
	padding: 20px 0 56px;
	align-items: start;
}

/* position: relative on laadimisriba (::after) ankur — riba peab istuma
   tulemuste piirkonna ülaservas, mitte lehe omas. Absoluutne pseudoelement
   ei ole flex-element, seega gap ja veergude kõrgus ei muutu. */
.mk-archive__main {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 2. Alamkategooriate kiibid
 * ---------------------------------------------------------------------- */

.mk-subcats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mk-gap, 8px);
}

.mk-subcats .mk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mk-chip__count {
	font-size: var(--mk-fs-eyebrow, 11px);
	color: var(--mk-muted, #5d5d58);
}

.mk-chip--on .mk-chip__count {
	color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------------
 * 3. Tööriistariba, tulemuste rida, järjestus
 * ---------------------------------------------------------------------- */

.mk-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--mk-ink, #111);
	border-bottom: 1px solid var(--mk-line, #e3e3e0);
	padding: 12px 0;
}

.mk-archive__toolbar-left,
.mk-archive__toolbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mk-result-count {
	margin: 0;
	font-size: var(--mk-fs-meta, 13px);
	color: var(--mk-muted, #5d5d58);
}

.mk-sorting {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.mk-sorting__label {
	font-size: var(--mk-fs-meta, 13px);
	color: var(--mk-muted, #5d5d58);
}

.mk-sorting .mk-select {
	font-family: var(--mk-font-display, sans-serif);
	font-size: 13.5px;
	font-weight: 500;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #d9d9d5;
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
}

.mk-sorting.is-js .mk-sorting__submit {
	display: none;
}

.mk-filters-toggle {
	display: none;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------------------------------
 * 3b. Kohene filtreerimine: laadimisolek
 *
 * filters.js paneb tulemuste piirkonnale aria-busy="true" ja klassi
 * .is-mk-loading; siin on ainult see, mida kasutaja näeb.
 * ---------------------------------------------------------------------- */

.mk-products,
.mk-archive__empty {
	transition: opacity var(--mk-ease, 160ms ease);
}

.mk-archive__main.is-mk-loading .mk-products,
.mk-archive__main.is-mk-loading .mk-archive__empty {
	opacity: 0.45;
	pointer-events: none;
}

/* Kitsas edenemisriba tulemuste ülaservas. Sisu ei nihku: riba on
   pseudoelement ja jääb voost välja. Element ise katab kogu laiuse ja
   liigub ainult tema taustatriip — nii ei ulatu miski konteinerist välja
   ega too lehele hetkeks horisontaalset kerimisriba. */
.mk-archive__main::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 2px;
	background-image: linear-gradient(var(--mk-accent, #d7182a), var(--mk-accent, #d7182a));
	background-repeat: no-repeat;
	background-size: 25% 100%;
	background-position: -34% 0;
	opacity: 0;
	pointer-events: none;
}

.mk-archive__main.is-mk-loading::after {
	opacity: 1;
	animation: mk-archive-progress 1.05s linear infinite;
}

@keyframes mk-archive-progress {
	from {
		background-position: -34% 0;
	}

	to {
		background-position: 134% 0;
	}
}

/* -------------------------------------------------------------------------
 * 4. Aktiivsed filtrid (kiibid tulemuste kohal)
 *
 * Üks kiip iga valitud väärtuse kohta ("Nahk ×", "Istekohti: 3 ×"); kiip on
 * link praegusele aadressile ilma selle väärtuseta. Kapsli kuju (999 px) ja
 * 30 px kõrgus eristavad neid päise alamkategooria kiipidest (6 px nurk,
 * 40 px) — need on navigeerimine, need siin valikud.
 * ---------------------------------------------------------------------- */

.mk-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mk-gap, 8px);
	/* Rida kuulub tööriistariba juurde: vahe selle all on 12 px (flex-gap
	   20 px − 8 px), toodeteni jääb täis 20 px. */
	margin-top: -8px;
}

.mk-active-filters__label {
	font-size: var(--mk-fs-meta, 13px);
	color: var(--mk-muted, #5d5d58);
}

/* (0,2,0) võidab teema .mk-chip reeglid (0,1,0), mis tulevad varem laaditud
   theme.css-ist; hõljumine (0,3,0) võidab ka .mk-chip:hover'i. */
.mk-active-filters .mk-chip--remove {
	position: relative;
	gap: 4px;
	height: 30px;
	min-height: 30px;
	padding: 0 7px 0 12px;
	border: 1px solid var(--mk-line-2, #d9d9d5);
	border-radius: 999px;
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.mk-active-filters .mk-chip--remove:hover {
	border-color: var(--mk-ink, #111);
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
}

.mk-chip__x {
	display: inline-flex;
	color: var(--mk-muted, #5d5d58);
	transition: color var(--mk-ease, 160ms ease);
}

.mk-active-filters .mk-chip--remove:hover .mk-chip__x {
	color: var(--mk-ink, #111);
}

.mk-active-filters__clear {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 4px;
	font-size: var(--mk-fs-meta, 13px);
	color: var(--mk-muted, #5d5d58);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.mk-active-filters__clear:hover {
	color: var(--mk-accent, #d7182a);
}

.mk-active-filters .mk-chip--remove:focus-visible,
.mk-active-filters__clear:focus-visible {
	outline: 2px solid var(--mk-accent, #d7182a);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Filtririba
 * ---------------------------------------------------------------------- */

/* Riba ei ole kleepuv ega kerita omaette: grupid on kokkupandavad
   (<details>), seega mahub riba ära ja oma kerimisriba ei teki. Sahtlivaade
   telefonis keritakse edasi (.mk-filters.is-js .mk-filters__body).

   Riba on vaikne paneel (omaniku soov 24.09.2026: "liiga valge ja lihtne"):
   toonitud pind, peen raam, 8 px nurk. Polster jääb veeru sisse, seega
   tulemuste veerg ei nihku. */
.mk-filters {
	align-self: start;
	padding: 20px;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: 8px;
	background: var(--mk-media-bg, #f5f4f1);
}

.mk-filters__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

/* Päise alumine joon on samal kõrgusel tööriistariba alumise joonega ja
   pealkiri sama kõrgusel kui tulemuste rida: paneel 1 + 20 + 32 + 20 = 73 px,
   tööriistariba 1 + 12 + 48 (järjestusvalik, woo.css min-height) + 12 = 73 px
   (mõõdetud 24.09.2026). */
.mk-filters__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mk-line-2, #d9d9d5);
}

/* min-height: päis ei muuda kõrgust, kui "Tühjenda" ilmub või kaob. */
.mk-filters__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin-right: auto;
	font-family: var(--mk-font-display, sans-serif);
	font-size: var(--mk-fs-h3, 16.5px);
	font-weight: 700;
}

/* Aktiivsete filtrite arv: väike aktsendikapsel pealkirja järel. */
.mk-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--mk-accent, #d7182a);
	color: var(--mk-accent-ink, #fff);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* "Tühjenda" on väike kummitusnupp; nähtav ainult siis, kui midagi on valitud. */
.mk-filters__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--mk-line-2, #d9d9d5);
	border-radius: var(--mk-radius, 6px);
	background: transparent;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mk-ink, #111);
	text-decoration: none;
	transition: border-color var(--mk-ease, 160ms ease), background-color var(--mk-ease, 160ms ease);
}

.mk-filters__clear:hover {
	border-color: var(--mk-ink, #111);
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
}

.mk-filters__clear:focus-visible {
	outline: 2px solid var(--mk-accent, #d7182a);
	outline-offset: 2px;
}

/* Teema reeglid (display: inline-flex) võidaksid brauseri [hidden] reegli. */
.mk-filters__badge[hidden],
.mk-filters__clear[hidden] {
	display: none;
}

.mk-filters__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
	cursor: pointer;
}

.mk-filters__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Ilma JS-ita on "Näita tulemusi" ainus viis vormi saata — siis jääb nupp nähtavale. */
.mk-filters__foot {
	display: block;
}

.mk-filters.is-js .mk-filters__foot {
	display: none;
}

.mk-filters__apply {
	width: 100%;
	justify-content: center;
}

.mk-filter-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--mk-line, #e3e3e0);
}

.mk-filter-group:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Grupp on <details>: summary peab jääma esimeseks reaks, seega plokk, mitte
   flex-konteiner (osa brausereid peidab flex'is avamismärgi ebaühtlaselt). */
.mk-fgroup {
	display: block;
	padding-bottom: 2px;
}

.mk-fgroup__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	padding: 0;
	list-style: none;
	cursor: pointer;
	color: var(--mk-ink, #111);
	transition: color var(--mk-ease, 160ms ease);
}

/* "2 valitud" chevroni kõrval: margin-left: auto lükkab vihje ja chevroni
   koos paremale; ilma vihjeta jääb kehtima space-between. */
.mk-fgroup__hint {
	margin-left: auto;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--mk-accent, #d7182a);
}

/* Brauseri oma avamismärk ära: chevron ütleb sama. */
.mk-fgroup__summary::-webkit-details-marker {
	display: none;
}

.mk-fgroup__summary:hover .mk-filter-group__title {
	color: var(--mk-accent, #d7182a);
}

.mk-fgroup__summary:focus-visible {
	outline: 2px solid var(--mk-ink, #111);
	outline-offset: 2px;
}

.mk-filters .mk-fgroup__chevron {
	color: var(--mk-muted, #5d5d58);
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-fgroup[open] > .mk-fgroup__summary .mk-fgroup__chevron {
	transform: rotate(180deg);
}

.mk-fgroup__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 12px;
}

.mk-filter-group__title {
	padding: 0;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mk-ink, #111);
	transition: color var(--mk-ease, 160ms ease);
}

.mk-filter-group__options {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Rida on kogu laiuses klõpsatav silt. Negatiivne külgmarginaal + sama
   polster: hõljumise taust ulatub 8 px teksti ja märkeruudu ette ja taha,
   aga tekst jääb grupi pealkirjaga ühele joonele. */
.mk-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	margin: 0 -8px;
	padding: 5px 8px;
	border-radius: var(--mk-radius, 6px);
	font-size: 14px;
	line-height: 1.35;
	color: var(--mk-ink-2, #3b3b37);
	cursor: pointer;
	transition: background-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease);
}

.mk-filter-option:hover {
	background: rgba(17, 17, 17, 0.045);
	color: var(--mk-ink, #111);
}

.mk-filter-option.is-on {
	color: var(--mk-ink, #111);
	font-weight: 600;
}

/* Valik, millel selles vaates tooteid ei ole (arv 0): tuhmim, aga valitav. */
.mk-filter-option.is-empty {
	color: var(--mk-muted, #5d5d58);
}

/* Oma märkeruut (appearance: none): 18 px, 4 px nurk, 1,5 px raam. Linnuke on
   taustapilt — ::after'it ei joonista kõik brauserid <input>-i sisse.
   Valija käib ainult rea sees: värvinäidise ruut on peidetud
   (screen-reader-text) ja peab selleks jääma. */
.mk-filter-option .mk-filter-option__input {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--mk-ink-2, #3b3b37);
	border-radius: 4px;
	background-color: var(--mk-bg, #fff);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.mk-filter-option:hover .mk-filter-option__input {
	border-color: var(--mk-ink, #111);
	background-color: var(--mk-surface, #f4f4f2);
}

/* Valge linnuke tindipõhjal (valge = --mk-bg; andme-URI ei loe muutujaid). */
.mk-filter-option .mk-filter-option__input:checked,
.mk-filter-option:hover .mk-filter-option__input:checked {
	border-color: var(--mk-ink, #111);
	background-color: var(--mk-ink, #111);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mk-filter-option .mk-filter-option__input:focus-visible {
	outline: 2px solid var(--mk-accent, #d7182a);
	outline-offset: 2px;
}

.mk-filter-option__name {
	flex: 1;
	min-width: 0;
}

/* Arv väikese kapslina: valge põhi, peen raam, tabelnumbrid. */
.mk-filter-option__count {
	flex: none;
	box-sizing: border-box;
	min-width: 24px;
	margin-left: auto;
	padding: 0 6px;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: 999px;
	background: var(--mk-bg, #fff);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 18px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--mk-muted, #5d5d58);
	transition: color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease);
}

.mk-filter-option.is-on .mk-filter-option__count {
	border-color: var(--mk-line-2, #d9d9d5);
	font-weight: 600;
	color: var(--mk-ink, #111);
}

/* Pika grupi nupp "Näita kõiki (N)" / "Näita vähem" ja valikute otsinguväli.
   Mõlemad tulevad nähtavale alles JS-iga (filters.js eemaldab hidden'i). */
.mk-fgroup__toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--mk-ink, #111);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--mk-ease, 160ms ease);
}

.mk-fgroup__toggle:hover {
	color: var(--mk-accent, #d7182a);
}

.mk-fgroup__toggle:focus-visible {
	outline: 2px solid var(--mk-ink, #111);
	outline-offset: 2px;
}

/* Värvifilter: näidiste ruudustik (B-Kategooria artboard). 7 veergu, mitte 8:
   paneeli 20 px polster jätab sisule 218–238 px ja 8 veeruga jääks näidis
   22 px peale (mõõdetud 24.09.2026); 7 veeruga 26–29 px nagu enne paneeli. */
.mk-filter-group--colour .mk-filter-group__options {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.mk-swatch {
	position: relative;
	display: block;
	cursor: pointer;
}

.mk-swatch__dot {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid #d9d9d5;
	border-radius: var(--mk-radius, 6px);
}

.mk-swatch.is-on .mk-swatch__dot,
.mk-swatch:focus-within .mk-swatch__dot {
	box-shadow: 0 0 0 2px var(--mk-bg, #fff), 0 0 0 4px var(--mk-ink, #111);
}

/* Arv on nähtav abivahenditele ja hiirega sihtimisel tiitlis; ribal
   hoiaks see ruudustiku laiali. */
.mk-swatch__count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mk-filter-option__dot {
	width: 18px;
	height: 18px;
	flex: none;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-surface, #f4f4f2);
}

/* "Näita kõiki" avab ülejäänud valikud sama loendi jätkuna. .mk-fgroup__body
   hoiab lastel 12 px vahet, loend ise 2 px (värviruudustik 6 px) — ilma
   korrektsioonita tekiks kuuenda ja seitsmenda valiku vahele nähtav õmblus.
   Peidetud olekus on konteiner display: none, seega miinusmarginaal ei loe. */
.mk-fgroup__body > .mk-fgroup__more {
	margin-top: -10px;
}

.mk-filter-group--colour .mk-fgroup__body > .mk-fgroup__more {
	margin-top: -6px;
}

/* filters.js peidab ridu ja loendeid hidden-atribuudiga — see peab võitma
   ülalpool olevaid display: flex / grid reegleid. */
.mk-filter-group [hidden],
.mk-filter-group .mk-fgroup__more[hidden],
.mk-filter-group .mk-filter-group__options[hidden] {
	display: none;
}

/* Hinnafilter: liugur omaette real, selle all "Alates" / "Kuni" ja "OK". */
.mk-price-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mk-gap, 8px);
}

.mk-price-filter__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.mk-price-filter__label {
	font-size: 12.5px;
	color: var(--mk-muted, #5d5d58);
}

/* Hinnaliugur (filters.js toob peidust välja).

   Rada ja mõlemad vahemikuväljad elavad ühes ja samas ruudustiku lahtris —
   nii katavad nad üksteist ilma eraldi paigutuseta ja rea kõrguse annab pide.
   Väli ise ei püüa osutajat (pointer-events: none), püüab ainult pide; muidu
   jääks pealmine väli alumise pideme ette ja üks ots ei liiguks.
   Vendorpseudod on tahtlikult eraldi reeglites: ühendatud valijaloendi
   (üks tundmatu pseudo) viskab brauser tervikuna minema. */
.mk-price-slider {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 14px;
	margin-bottom: 4px;
}

.mk-price-slider[hidden] {
	display: none;
}

/* Vahemik kahe kapslina liuguri kohal: alumine ots vasakul, ülemine paremal. */
.mk-price-slider__value {
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mk-price-slider__pill {
	padding: 3px 9px;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: 999px;
	background: var(--mk-bg, #fff);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--mk-ink, #111);
}

.mk-price-slider__track,
.mk-price-slider__range {
	grid-row: 2;
	grid-column: 1;
	align-self: center;
}

.mk-price-slider__track {
	position: relative;
	height: 4px;
	border-radius: 2px;
	background: var(--mk-line-2, #d9d9d5);
}

.mk-price-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mk-from, 0%);
	right: calc(100% - var(--mk-to, 100%));
	border-radius: 2px;
	background: var(--mk-accent, #d7182a);
}

/* position + z-index: täidetud osa on absoluutne ja jääks muidu pidemete
   peale (paigutatud element joonistatakse tavavoo järel) — pide kaoks ära. */
.mk-price-slider__range {
	position: relative;
	z-index: 1;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
}

/* Ülemine ots on märgenduses viimane ja jääb seega kohakuti olles pealmiseks.
   Kui ta seisab juba laes, ei liigu ta enam kummalegi poole ja vahemikku avab
   ainult alumine pide — filters.js tõstab ta siis klassiga peale. Ilma selleta
   jääks alumine pide ülemise alla peitu ja liugur kinni ülemisse otsa. */
.mk-price-slider.is-low-top .mk-price-slider__range--min {
	z-index: 2;
}

/* Fookusrõngas käib pideme ümber, mitte üle terve riba laiuse. */
.mk-price-slider__range:focus {
	outline: none;
}

.mk-price-slider__range::-webkit-slider-runnable-track {
	height: 4px;
	border: 0;
	background: transparent;
}

.mk-price-slider__range::-moz-range-track {
	height: 4px;
	border: 0;
	background: transparent;
}

.mk-price-slider__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	/* 20 px pide 4 px raja keskele: (4 - 20) / 2. */
	margin-top: -8px;
	border: 2px solid var(--mk-ink, #111);
	border-radius: 50%;
	background: var(--mk-bg, #fff);
	box-shadow: 0 1px 3px rgba(17, 17, 17, 0.2);
	pointer-events: auto;
	cursor: pointer;
	transition: border-color var(--mk-ease, 160ms ease), transform var(--mk-ease, 160ms ease);
}

.mk-price-slider__range::-moz-range-thumb {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--mk-ink, #111);
	border-radius: 50%;
	background: var(--mk-bg, #fff);
	box-shadow: 0 1px 3px rgba(17, 17, 17, 0.2);
	pointer-events: auto;
	cursor: pointer;
	transition: border-color var(--mk-ease, 160ms ease), transform var(--mk-ease, 160ms ease);
}

/* Hõljumisel pide kasvab veidi; lohistamise ajal (:active) lisaks aktsendiraam. */
.mk-price-slider__range:hover::-webkit-slider-thumb {
	transform: scale(1.08);
}

.mk-price-slider__range:active::-webkit-slider-thumb {
	border-color: var(--mk-accent, #d7182a);
	transform: scale(1.08);
}

.mk-price-slider__range:hover::-moz-range-thumb {
	transform: scale(1.08);
}

.mk-price-slider__range:active::-moz-range-thumb {
	border-color: var(--mk-accent, #d7182a);
	transform: scale(1.08);
}

.mk-price-slider__range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--mk-ink, #111);
	outline-offset: 2px;
}

.mk-price-slider__range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--mk-ink, #111);
	outline-offset: 2px;
}

/* Sõrmega sihtides on pide suurem. */
@media (pointer: coarse) {
	.mk-price-slider__range {
		height: 28px;
	}

	.mk-price-slider__range::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
		margin-top: -12px;
	}

	.mk-price-slider__range::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}
}

/* Valija on tahtlikult `input.mk-input`, mitte `.mk-input`: woo.css'i reegel
   `.woocommerce input[type="search"]` (ja sama rea number/text) on täpsusega
   (0,2,1) ja võidaks (0,2,0) valija ära. Sama pikk kett võidab siin, sest
   woo-archive.css laaditakse hiljem. min-height peab olema kirjas eraldi,
   muidu jääb kehtima woo.css'i --mk-control-h (48 px) ja väljad oleksid
   kõrgemad kui kõrval olev "OK" nupp. */
.mk-filters input.mk-input {
	font-family: var(--mk-font-body, sans-serif);
	font-size: 13px;
	line-height: 1.4;
	height: var(--mk-control-h-sm, 40px);
	min-height: var(--mk-control-h-sm, 40px);
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
	border: 1px solid var(--mk-line-2, #d9d9d5);
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
}

.mk-filters input.mk-input:focus {
	outline: 2px solid var(--mk-ink, #111);
	outline-offset: -2px;
}

/* Hinnaväli euromärgi järelliitega. Brauseri enda üles-alla nooled jäävad
   ära (need jääksid märgi peale); klaviatuuri nooled töötavad edasi. */
.mk-price-filter__control {
	position: relative;
	display: block;
}

/* Sama kiri ja reakõrgus mis väljal: märk istub arvuga samal alusjoonel. */
.mk-price-filter__unit {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 1.4;
	color: var(--mk-muted, #5d5d58);
	pointer-events: none;
}

.mk-filters input.mk-input[type="number"] {
	padding-right: 26px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.mk-filters input.mk-input[type="number"]::-webkit-inner-spin-button,
.mk-filters input.mk-input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* "OK" on teema väike kummitusnupp; valge põhi nagu kõrvalolevatel väljadel. */
.mk-filters .mk-btn--sm {
	height: 40px;
	flex: none;
}

.mk-filters .mk-btn--ghost {
	background: var(--mk-bg, #fff);
}

.mk-filters .mk-btn--ghost:hover,
.mk-filters .mk-btn--ghost:focus-visible {
	background: var(--mk-ink, #111);
}

.mk-filters .mk-icon,
.mk-archive .mk-icon {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mk-archive .mk-icon--sm,
.mk-filters .mk-icon--sm {
	width: 16px;
	height: 16px;
}

.mk-archive .mk-icon--xs,
.mk-filters .mk-icon--xs {
	width: 13px;
	height: 13px;
}

.mk-filters-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(17, 17, 17, 0.45);
}

.mk-filters-backdrop.is-on {
	display: block;
}

.mk-no-scroll,
.mk-no-scroll body {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 6. Tootevõrk (kaardi enda stiilid on woo.css-is, sest avaleht ja otsing
 *    kasutavad sama kaarti)
 * ---------------------------------------------------------------------- */

.mk-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-products::before,
.mk-products::after {
	content: none;
}

/* -------------------------------------------------------------------------
 * 7. Tühi tulemus ja lehitsemine
 * ---------------------------------------------------------------------- */

.mk-archive__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 40px 0;
	border-bottom: 1px solid var(--mk-line, #e3e3e0);
}

.mk-archive__empty-title {
	margin: 0;
	font-family: var(--mk-font-display, sans-serif);
	font-size: var(--mk-fs-h2, 28px);
	font-weight: 700;
	line-height: 1.15;
}

.mk-archive__empty-text {
	margin: 0;
	max-width: 520px;
	font-size: var(--mk-fs-body, 15px);
	line-height: 1.6;
	color: var(--mk-ink-2, #3b3b37);
}

/* Kirjelduse pikem osa toodete all (kategooria või tootesari). */
.mk-archive__about {
	max-width: 760px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--mk-line, #e3e3e0);
}

.mk-archive__about-title {
	margin: 0 0 12px;
	font-family: var(--mk-font-display, inherit);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mk-archive__about-body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mk-ink-2, #333);
}

.mk-archive__about-body p {
	margin: 0 0 12px;
}

.mk-pagination {
	display: flex;
	justify-content: center;
	padding: 24px 0 8px;
}

.mk-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mk-gap, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-pagination__item {
	margin: 0;
	list-style: none;
}

.mk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #d9d9d5;
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-bg, #fff);
	font-family: var(--mk-font-display, sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-ink, #111);
	text-decoration: none;
}

.mk-pagination .page-numbers:hover {
	border-color: var(--mk-ink, #111);
	color: var(--mk-ink, #111);
}

.mk-pagination .page-numbers.current {
	border-color: var(--mk-ink, #111);
	background: var(--mk-ink, #111);
	color: var(--mk-accent-ink, #fff);
}

.mk-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* -------------------------------------------------------------------------
 * 8. Ekraanilaiused: 1200 · 900 · 560
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.mk-archive__layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 28px;
	}

	.mk-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mk-archive__header {
		gap: 12px;
		padding-top: 16px;
	}

	.mk-archive__header .mk-subcats {
		flex-basis: 100%;
	}

	.mk-archive__intro {
		max-width: none;
	}

	.mk-archive__layout {
		display: block;
		padding: 20px 0 40px;
	}

	/* JS-iga: sahtel. Ilma JS-ita jääb riba tavalisse voogu võrgu kohale. */
	.mk-filters.is-js ~ .mk-archive__main .mk-filters-toggle {
		display: inline-flex;
	}

	.mk-filters {
		margin-bottom: 24px;
	}

	/* Sahtel kannab sama paneeli tooni; raam ainult paremal ja nurgad sirged,
	   sest sahtel algab ekraani servast. */
	.mk-filters.is-js {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 95;
		width: min(360px, 92vw);
		height: 100%;
		margin: 0;
		padding: 16px var(--mk-gutter, 16px) 0;
		box-sizing: border-box;
		background: var(--mk-media-bg, #f5f4f1);
		border: 0;
		border-right: 1px solid var(--mk-line, #e3e3e0);
		border-radius: 0;
		transform: translateX(-100%);
		transition: transform 0.18s ease-out;
		visibility: hidden;
	}

	.mk-filters.is-js.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.mk-filters.is-js .mk-filters__form {
		height: 100%;
		padding-bottom: 16px;
		box-sizing: border-box;
	}

	.mk-filters.is-js .mk-filters__close {
		display: inline-flex;
	}

	/* Keritav ala on 8 px laiem kui sisu: rea hõljumistaust (−8 px) ja
	   fookusrõngas jäävad kerimisala sisse, mitte ei lõigu ega tee
	   külgsuunalist kerimisriba. */
	.mk-filters.is-js .mk-filters__body {
		flex: 1;
		margin: 0 -8px;
		padding: 0 8px;
		overflow-y: auto;
	}

	.mk-filters.is-js .mk-filters__foot {
		display: block;
		position: sticky;
		bottom: 0;
		padding: 12px 0;
		background: var(--mk-media-bg, #f5f4f1);
		border-top: 1px solid var(--mk-line, #e3e3e0);
	}

	/* Arv on teel (eelvaade): silt tuhmub, nupp jääb vajutatavaks. */
	.mk-filters__apply[aria-busy="true"] {
		color: rgba(255, 255, 255, 0.72);
	}

	.mk-filters__clear {
		height: 44px;
		padding: 0 14px;
	}

	.mk-archive__toolbar {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* Puutesihtmärgid telefonis vähemalt 44 px (disainibrief). Globaalne
	   box-sizing: border-box tähendab, et min-height sisaldab juba polstrit. */
	.mk-filter-option {
		min-height: 44px;
		padding: 8px;
	}

	.mk-fgroup__summary,
	.mk-fgroup__toggle {
		min-height: 44px;
	}

	.mk-filter-option .mk-filter-option__input {
		width: 20px;
		height: 20px;
		background-size: 13px 13px;
	}

	/* Kiibid ühel real, mis kerib külgsuunas (kolmele reale murduv rida
	   lükkaks tooted telefonis ekraanilt välja). Rida ulatub ekraani
	   servani; polster hoiab esimese kiibi teiste veergudega joonel. */
	.mk-active-filters {
		flex-wrap: nowrap;
		margin: -15px calc(var(--mk-gutter, 16px) * -1) 0;
		padding: 7px var(--mk-gutter, 16px);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
	}

	.mk-active-filters > * {
		flex: none;
	}

	/* Rea tähendust kannab rühma nimi (aria-label); nähtav silt võtaks kiibi ruumi. */
	.mk-active-filters__label {
		display: none;
	}

	/* 30 px kiibi puutesihtmärk kasvab 44 px-ni: pseudoelement ulatub 7 px üles
	   ja alla, rea 7 px polster hoiab selle kerimisala sees. */
	.mk-active-filters .mk-chip--remove::after,
	.mk-active-filters__clear::after {
		content: "";
		position: absolute;
		inset: -7px 0;
	}

	/* Sama valijakett mis üleval, muidu võidaks woo.css'i (0,2,1) reegel. */
	.mk-filters input.mk-input {
		height: 44px;
		min-height: 44px;
	}

	.mk-filters .mk-btn--sm {
		height: 44px;
	}

	/* Sahtli laius on min(360px, 92vw) — 5 veergu hoiab näidise üle 44 px
	   ka kõige kitsamal telefonil. */
	.mk-filter-group--colour .mk-filter-group__options {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 8px;
	}
}

@media (max-width: 560px) {
	.mk-archive__title {
		font-size: 28px;
	}

	.mk-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}


	.mk-archive__toolbar-right,
	.mk-sorting {
		width: 100%;
	}

	.mk-sorting .mk-select {
		flex: 1;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* .mk-filters.is-js peab olema eraldi kirjas: sahtli oma reegel
	   (.mk-filters.is-js, täpsus 0,2,0) võidaks paljalt .mk-filters valija ära
	   ja sahtel libiseks ka vähendatud liikumise režiimis. */
	.mk-filters,
	.mk-filters.is-js,
	.mk-fgroup__summary,
	.mk-fgroup__toggle,
	.mk-filter-group__title,
	.mk-filters .mk-fgroup__chevron,
	.mk-filter-option,
	.mk-filter-option .mk-filter-option__input,
	.mk-filter-option__count,
	.mk-filters__clear,
	.mk-chip__x,
	.mk-products,
	.mk-archive__empty {
		transition: none;
	}

	/* Laadimise ajal jääb riba paigale — märguanne on olemas, liikumist ei ole. */
	.mk-archive__main.is-mk-loading::after {
		background-size: 100% 100%;
		background-position: 0 0;
		animation: none;
	}

	/* Liuguri pide: vendorpseudod jäävad eraldi reeglitesse (vt ülalt).
	   Ka hõljumise suurendus jääb ära. */
	.mk-price-slider__range::-webkit-slider-thumb {
		transition: none;
	}

	.mk-price-slider__range::-moz-range-thumb {
		transition: none;
	}

	.mk-price-slider__range:hover::-webkit-slider-thumb,
	.mk-price-slider__range:active::-webkit-slider-thumb {
		transform: none;
	}

	.mk-price-slider__range:hover::-moz-range-thumb,
	.mk-price-slider__range:active::-moz-range-thumb {
		transform: none;
	}
}

/* Windowsi kõrge kontrastsuse režiim asendab taustad süsteemivärviga — oma
   märkeruudu linnuke (taustapilt) võiks kaduda. Seal jääb brauseri enda ruut. */
@media (forced-colors: active) {
	.mk-filter-option .mk-filter-option__input {
		-webkit-appearance: auto;
		appearance: auto;
	}
}