/*
 * MK Kataloog — teema põhistiilid.
 * Suund B "Kataloog": valge põhi, must kiri, üks aktsentvärv tegevustel ja
 * märgistel. Ruudustik 1312 px, vahed 8 px sammuga, raadius 6 px.
 */

/* =========================================================================
 * 1. Alus
 * ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.mk-body {
	margin: 0;
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-family: var(--mk-font-body);
	font-size: var(--mk-fs-body);
	line-height: 1.6;
}

[hidden] {
	display: none !important;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border: 0;
}

a {
	color: var(--mk-ink);
	text-decoration: none;
	transition: color var(--mk-ease, 160ms ease);
}

a:hover,
a:focus-visible {
	color: var(--mk-accent);
}

p {
	margin: 0 0 var(--mk-s2);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--mk-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--mk-ink);
	outline-offset: 2px;
}

.mk-sr,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var(--mk-ink);
	color: #fff;
	font-family: var(--mk-font-display);
	font-weight: 600;
}

.mk-skip:focus {
	left: 8px;
	top: 8px;
	color: #fff;
}

.mk-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mk-main {
	flex: 1 1 auto;
}

/* =========================================================================
 * 2. Paigutus
 * ====================================================================== */

.mk-container {
	width: 100%;
	max-width: calc(var(--mk-content) + var(--mk-gutter) * 2);
	margin: 0 auto;
	padding-inline: var(--mk-gutter);
}

.mk-section {
	padding-block: var(--mk-s5);
}

.mk-section--tiles {
	padding-block: 0 var(--mk-s6);
}

.mk-grid-2,
.mk-grid-3,
.mk-grid-4,
.mk-grid-5 {
	display: grid;
	gap: var(--mk-grid-gap);
}

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

.mk-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mk-s3);
	margin-bottom: var(--mk-s3);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mk-ink);
}

.mk-sectionhead--accent {
	border-bottom-color: var(--mk-accent);
}

.mk-sectionhead__text {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s1);
}

/* =========================================================================
 * 3. Tüpograafia
 * ====================================================================== */

.mk-h1 { font-family: var(--mk-font-display); font-size: var(--mk-fs-h1); line-height: 1.06; font-weight: 700; letter-spacing: -0.024em; }
.mk-h2 { font-family: var(--mk-font-display); font-size: var(--mk-fs-h2); line-height: 1.14; font-weight: 700; letter-spacing: -0.015em; }
.mk-h3 { font-family: var(--mk-font-display); font-size: var(--mk-fs-h3); line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.mk-h4 { font-family: var(--mk-font-display); font-size: var(--mk-fs-h4); line-height: 1.35; font-weight: 700; letter-spacing: 0; }

.mk-eyebrow {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mk-muted);
}

.mk-body { font-size: var(--mk-fs-body); line-height: 1.6; color: var(--mk-ink-2); }
.mk-body-l { font-size: var(--mk-fs-body-l); line-height: 1.6; color: var(--mk-ink-2); }
.mk-meta { font-size: var(--mk-fs-meta); line-height: 1.5; color: var(--mk-muted); }
.mk-hint { font-size: var(--mk-fs-hint); line-height: 1.4; color: var(--mk-muted); }
.mk-sub { font-size: 13.5px; line-height: 1.45; color: var(--mk-ink-2); }

.mk-more {
	display: inline-flex;
	align-items: center;
	gap: var(--mk-s1);
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.mk-more--accent {
	color: var(--mk-accent);
}

.mk-ico {
	flex: none;
	stroke: currentColor;
	fill: none;
}

.mk-ico--lg {
	stroke-width: 1.4;
}

/* =========================================================================
 * 4. Nupud, kiibid, märgised, hinnad
 * ====================================================================== */

.mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--mk-control-h);
	padding: 0 22px;
	border: 1px solid var(--mk-ink);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease), transform var(--mk-ease, 160ms ease);
}

.mk-btn:hover,
.mk-btn:focus-visible {
	background: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
}

/* Vajutus annab 1 px järele — väike füüsiline vihje kogu saidil. */
.mk-btn:active:not([disabled]) {
	transform: translateY(1px);
}

.mk-btn--accent,
.mk-btn--red {
	border-color: transparent;
	background: var(--mk-accent);
	color: var(--mk-accent-ink);
}

.mk-btn--accent:hover,
.mk-btn--accent:focus-visible,
.mk-btn--red:hover,
.mk-btn--red:focus-visible {
	background: var(--mk-accent-hover);
	border-color: transparent;
	color: var(--mk-accent-ink);
}

.mk-btn--ink {
	background: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
}

.mk-btn--ink:hover,
.mk-btn--ink:focus-visible {
	background: #000;
	color: #fff;
}

.mk-btn--ghost {
	background: transparent;
	border-color: var(--mk-ink);
	color: var(--mk-ink);
}

.mk-btn--sm { height: var(--mk-control-h-sm); padding: 0 16px; font-size: 13px; }
.mk-btn--lg { height: var(--mk-control-h-lg); padding: 0 28px; font-size: 15px; }
.mk-btn--block { width: 100%; }

.mk-btn[disabled],
.mk-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mk-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--mk-radius);
	background: transparent;
	color: var(--mk-ink);
	cursor: pointer;
	transition: background-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease);
}

.mk-iconbtn:hover {
	background: var(--mk-surface);
}

.mk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-family: var(--mk-font-display);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease);
}

.mk-chip:hover {
	border-color: var(--mk-ink);
	color: var(--mk-ink);
}

.mk-chip--on {
	background: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
	font-weight: 600;
}

/* Aktiivne kiip jääb hõljumisel valge tekstiga: ".mk-chip:hover" (0,2,0) võitis
   ".mk-chip--on" (0,1,0) ja tegi teksti mustal taustal mustaks (omaniku leid 18.09.2026). */
.mk-chip--on:hover,
.mk-chip--on:focus-visible {
	background: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
}

/* Märgis jääb 3 px peale — 6 px teeks väikesest sildist kapsli. */
.mk-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 3px;
	background: var(--mk-ink);
	color: #fff;
	font-family: var(--mk-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	white-space: nowrap;
}

.mk-badge--sale,
.mk-badge--leiunurk {
	background: var(--mk-sale);
	color: var(--mk-accent-ink);
}

.mk-badge--ghost {
	background: var(--mk-bg);
	border: 1px solid var(--mk-ink);
	color: var(--mk-ink);
	padding: 3px 7px;
}

.mk-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-price);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mk-ink);
}

.mk-price del,
.mk-price .mk-price__old {
	font-family: var(--mk-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--mk-muted);
	text-decoration: line-through;
}

.mk-price ins,
.mk-price .mk-price__new {
	text-decoration: none;
	color: var(--mk-sale);
	background: none;
}

.mk-price--ask {
	font-size: 15px;
	font-weight: 600;
	color: var(--mk-ink-2);
}

.mk-price .woocommerce-Price-currencySymbol {
	font-weight: 700;
}

/* =========================================================================
 * 5. Kaardid ja pildid
 * ====================================================================== */

/* overflow: hidden hoiab pildiala 6 px raadiuse sees. */
.mk-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

.mk-card:hover,
.mk-card:focus-within {
	border-color: var(--mk-ink);
	box-shadow: var(--mk-shadow-hover, 0 8px 24px rgba(17, 17, 17, 0.08));
}

.mk-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--mk-surface);
}

.mk-thumb--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--mk-surface);
}

/* Kaart on ruudustikus alati sama kõrge; sisu joondub allservast. */
.mk-pcard {
	height: 100%;
}

.mk-pcard__media,
.mk-tile__media,
.mk-postcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mk-surface);
}

/* Pildiala on toonitud, mitte valge: foto valge taust sulandub korrutamisel
   toonitud pinnaga, nii näivad eri kujuga fotod ühesuurused. */
.mk-pcard__media {
	background: var(--mk-media-bg, #f5f4f1);
}

/* (0,2,0) võidab WooCommerce'i .woocommerce img reegli (0,1,1). */
.mk-pcard__media .mk-thumb {
	width: 100%;
	height: 100%;
	padding: 14px;
	box-sizing: border-box;
	background: transparent;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-pcard:hover .mk-pcard__media .mk-thumb,
.mk-pcard:focus-within .mk-pcard__media .mk-thumb {
	transform: scale(1.03);
}

.mk-pcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mk-s1);
	padding: 14px 14px 16px;
	border-top: 1px solid var(--mk-line);
}

.mk-pcard__top {
	display: flex;
	align-items: center;
	gap: var(--mk-s1);
	flex-wrap: wrap;
}

/* Pealkiri kahele reale — muidu lükkab pikk nimi hinnarea eri kõrgusele. */
.mk-pcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Hinnarida on kaardi alaservas ja lõpeb 28 px nooleringiga. Nool tuleb
   ::after pseudoelemendist — uut märgendit ei ole vaja. Vihje ("3
   kangagruppi") tõstetakse hinnast ettepoole, muidu jääks hind eri kaartidel
   eri kõrgusele. Järjekord DOM-is ei muutu, ainult kuvamisel. */
.mk-pcard__body .mk-hint {
	order: 1;
}

.mk-pcard__body .mk-price {
	order: 2;
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: auto;
}

.mk-pcard__body .mk-price::after {
	content: "→";
	/* Teine content-rida annab kaunistusnoolele tühja alternatiivteksti, et
	   ekraanilugeja seda hinna järel ette ei loeks. Vanemad brauserid jätavad
	   rea vahele. Sama võte mis woo.css .mk-product-card__price::after juures. */
	content: "→" / "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	margin-left: auto;
	border: 1px solid var(--mk-line-2);
	border-radius: 50%;
	color: var(--mk-ink);
	font-family: var(--mk-font-display);
	font-size: 14px;
	line-height: 1;
	transition: background-color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease);
}

.mk-pcard:hover .mk-pcard__body .mk-price::after,
.mk-pcard:focus-within .mk-pcard__body .mk-price::after {
	background: var(--mk-accent);
	border-color: transparent;
	color: var(--mk-accent-ink);
}

.mk-products {
	margin-top: var(--mk-s3);
}

/* =========================================================================
 * 6. Otsinguvorm
 * ====================================================================== */

/* Raam ja fookusrõngas kuuluvad kogu vormile, mitte ainult sisestusväljale:
   varem joonistas brauser kontuuri välja ümber ja tume joon jooksis "Otsi"
   nupust läbi (omaniku tagasiside 2026-09-17). overflow: hidden hoiab
   aktsentnupu raami sees. */
.mk-search {
	display: flex;
	width: 100%;
	height: var(--mk-control-h);
	overflow: hidden;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

.mk-search:hover {
	border-color: var(--mk-ink);
}

.mk-search:focus-within {
	border-color: var(--mk-ink);
	box-shadow: 0 0 0 1px var(--mk-ink);
}

.mk-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-family: var(--mk-font-body);
	font-size: 14px;
}

/* Väljal ei ole oma kontuuri — fookust näitab vormi rõngas. */
.mk-search__input:focus,
.mk-search__input:focus-visible {
	outline: none;
}

.mk-search__input::placeholder {
	color: var(--mk-muted);
}

.mk-search__button {
	flex: none;
	gap: 8px;
	height: 100%;
	border-radius: 0;
	border-color: transparent;
	background: var(--mk-accent);
	color: var(--mk-accent-ink);
}

.mk-search__button:hover,
.mk-search__button:focus-visible {
	background: var(--mk-accent-hover);
	border-color: transparent;
	color: var(--mk-accent-ink);
}

/* Nupu oma fookusmärk on seespoolne rõngas: väline kontuur jääks vormi
   overflow: hidden taha peitu. */
.mk-search__button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--mk-accent-ink);
}

/* Üldine vajutusnihe (.mk-btn:active) jääb siin ära: nupp täidab vormi
   sisemuse servast servani ja 1 px nihe paljastaks ülaservas valge triibu
   ning lõikaks alaserva overflow: hidden taha. Valija on (0,3,0) nagu
   üldreegelgi, aga hilisem. */
.mk-search__button:active:not([disabled]) {
	transform: none;
}

/* =========================================================================
 * 7. Päis
 * ====================================================================== */

.mk-header {
	display: flex;
	flex-direction: column;
	background: var(--mk-bg);
}

/* 7.1 Utiliidiriba */

.mk-utility {
	background: var(--mk-ink);
	color: #fff;
}

.mk-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-s3);
	min-height: 36px;
}

.mk-utility__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	color: #fff;
}

.mk-utility__nav {
	display: flex;
	align-items: center;
	gap: var(--mk-s3);
}

.mk-utility__list {
	display: flex;
	align-items: center;
	gap: var(--mk-s3);
}

.mk-utility__list a,
.mk-utility__link,
.mk-utility__contact {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #fff;
}

.mk-utility__list a:hover,
.mk-utility__link:hover,
.mk-utility__contact:hover {
	color: #fff;
	text-decoration: underline;
}

/* Leiunurk ei ole kategooriaribal; siin on selle väike sissepääs.
   #ff6b6b mustal ribal annab kontrastiks 6,8:1 (nõue 4,5:1). */
.mk-utility__link--sale {
	font-family: var(--mk-font-display);
	font-weight: 600;
	color: #ff6b6b;
}

.mk-utility__link--sale:hover {
	color: #ff6b6b;
}

/* 7.2 Brändiriba */

.mk-brandbar {
	border-bottom: 1px solid var(--mk-line);
}

.mk-brandbar__inner {
	display: flex;
	align-items: center;
	gap: var(--mk-s4);
	padding-block: 18px;
}

.mk-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	/* Aktsentvärv: must burger kadus logo kõrval ära (tagasiside 28.10.2026). */
	color: var(--mk-accent);
	cursor: pointer;
}

.mk-brand {
	flex: none;
}

.mk-brand__link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mk-brand__mark {
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: var(--mk-radius);
	background: var(--mk-accent);
}

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

.mk-brand__name {
	font-family: var(--mk-font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.1;
}

.mk-brand__tagline {
	font-size: 11px;
	color: var(--mk-muted);
	line-height: 1.2;
}

.mk-brand .custom-logo {
	max-height: 48px;
	width: auto;
}

/* Teemaga kaasas olev logo (assets/img/logo*.webp|png, 441×96). Kõrgus fikseeritakse
   siin, laius tuleb pildi suhtest; width/height atribuudid hoiavad koha enne laadimist.
   Valija on kahe klassiga, et WooCommerce'i ".woocommerce img { height: auto }" ei
   võidaks järjekorra pealt. */
.mk-brand .mk-brand__logo {
	display: block;
	line-height: 0;
}

.mk-brand .mk-brand__logo img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
}

.mk-drawer__top .mk-brand .mk-brand__logo img {
	height: 32px;
}

.mk-footer .mk-brand .mk-brand__logo img {
	height: 44px;
}

.mk-brandbar__search {
	flex: 1 1 auto;
	min-width: 0;
}

.mk-brandbar__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: none;
}

.mk-action {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mk-action__label {
	font-family: var(--mk-font-display);
	font-size: 13.5px;
	font-weight: 600;
}

.mk-action--search {
	display: none;
}

.mk-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 2px 7px;
	border-radius: 9px;
	background: var(--mk-ink);
	color: #fff;
	font-family: var(--mk-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* 7.3 Kategooriariba ja rippmenüü */

.mk-navbar {
	position: relative;
	border-bottom: 1px solid var(--mk-line);
	background: var(--mk-bg);
	z-index: var(--mk-z-header);
}

.mk-navbar__inner {
	display: block;
	position: relative;
}

/* Riba on täpselt üks rida ja üht värvi (omaniku otsus 2026-09-17, moobel1
   muster). Kui kirjed ei mahu, ei murta rida — riba kerib horisontaalselt.
   Kirje polsterdus on 10 px (avatud sakk vajab tausta jaoks ruumi), seega
   nihkub riba 10 px konteinerist väljapoole: nii jääb esimese kirje TEKST
   täpselt konteineri joonele ja paneeli esimese veeru kohale. */
.mk-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
	margin-inline: -10px;
	min-height: 44px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.mk-nav::-webkit-scrollbar {
	display: none;
}

/* Vaevumärgatav varjutus parema serva peal annab märku, et riba kerib.
   Klassi paneb menu.js ainult siis, kui kirjed tegelikult ei mahu — muidu
   ujus hall triip ka täiesti mahtuva riba peal. */
.mk-navbar__inner--scroll::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--mk-bg));
	pointer-events: none;
}

/* NB: siia ei tohi lisada position'it, transform'i ega filter'it — need
   teeksid kirjest paneeli sisaldusploki ja .mk-nav overflow lõikaks paneeli
   ära. Praegu pääseb paneel ribalt välja, sest kirje ei ole positsioneeritud. */
.mk-nav__item {
	display: flex;
	align-items: stretch;
	gap: 2px;
	flex: none;
	padding-inline: 10px;
	transition: background-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

/* Riba kõrgus 44 px: 14 px polstrit üleval ja all + 16 px reakõrgus. */
.mk-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 14px;
	font: 500 14px/1 var(--mk-font-display);
	color: var(--mk-ink);
	white-space: nowrap;
}

/* Kõik kirjed on sama värvi — ka Eripakkumised ja Täispuitmööbel.
   Punast teksti ribal ei ole (2. ringi värv eemaldatud). */
.mk-nav__link--solid,
.mk-nav__link--accent,
.mk-nav__item--sale > .mk-nav__link {
	color: var(--mk-ink);
}

/* Suletud kirje hõljutusel ja fookusel: 2 px tindijoon riba alaserval. Joon
   on kirjel (mitte lingil), nii katab see ka rippmenüü nuppu. */
.mk-nav__item:hover,
.mk-nav__item:focus-within {
	box-shadow: inset 0 -2px 0 var(--mk-ink);
}

/* Ribal ei lähe kiri kunagi punaseks (a:hover on (0,1,1), siin (0,2,0)). */
.mk-nav__item:hover > .mk-nav__link,
.mk-nav__link:hover,
.mk-nav__link:focus-visible {
	color: var(--mk-ink);
}

/* Praegune kategooria on märgitud ainult sildi all — see ei ole avatud sakk. */
.mk-nav__link--on {
	color: var(--mk-ink);
	box-shadow: inset 0 -2px 0 var(--mk-ink);
}

/* Avatud kirje on sakk, mis kuulub paneeli juurde: sama pind mis paneelil,
   2 px aktsentjoon ülaserval ja mitte ühtki joont saki ja paneeli vahel.
   Nii on kohe näha, kelle alamkategooriaid all näidatakse. */
.mk-nav__item--open,
.mk-nav__item--open:hover,
.mk-nav__item--open:focus-within {
	background: var(--mk-surface);
	box-shadow: inset 0 2px 0 var(--mk-accent);
}

.mk-nav__item--open > .mk-nav__link,
.mk-nav__item--open > .mk-nav__toggle {
	color: var(--mk-ink);
}

.mk-nav__item--open > .mk-nav__link {
	font-weight: 600;
	box-shadow: none;
}

.mk-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mk-ink);
	cursor: pointer;
}

.mk-nav__toggle[aria-expanded="true"] .mk-ico {
	transform: rotate(180deg);
}

/* Paneel algab täpselt riba alt (top: 100%), ilma vaheta, ja katab kogu riba
   laiuse. Äärise kannab paneel ise: sisemine plokk ei ole enam teine
   .mk-container (kaks konteinerit andsid sisule kahekordse 16 px sissenihke),
   nii algab esimene veerg täpselt esimese ribakirje alt. */
.mk-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--mk-z-panel);
	padding-block: 24px 32px;
	padding-inline: var(--mk-gutter);
	/* Kihiline paneel (omaniku valik 8.10.2026 kahest variandist): leht
	   paneeli all tumeneb (vt .mk-navbar__scrim), alumine serv on 1 px joon ja
	   sügav allapoole langev vari. Pind jääb senine — sama toonitud pind mis
	   avatud sakil, nii on sakk ja paneel üks tükk; kaardid on paneelil valged.
	   Ülanurgad jäävad sirgeks, et paneel istuks riba vastu. */
	background: var(--mk-surface);
	border-bottom: 1px solid var(--mk-line-2);
	box-shadow:
		0 1px 0 rgba(17, 17, 17, 0.04),
		0 28px 48px -14px rgba(17, 17, 17, 0.38);
}

/* Lehe kate avatud rippmenüü taga. Element on ribas (.mk-navbar__scrim) ja
   nähtav ainult siis, kui menu.js on <html>-ile pannud klassi mk-menu-open;
   --mk-scrim-top on riba alumine serv ekraanil (samuti menu.js-ist), nii et
   päis ja riba jäävad heledaks ja tumeneb ainult lehe sisu. z-index 39 on
   päise (40) ja paneeli (45) vahel. Klõps kattel on „klõps väljaspool“ ja
   sulgeb menüü. Mobiilis (≤ 900 px) rippmenüüd ei ole — sahtlil on oma kate. */
.mk-navbar__scrim {
	display: none;
}

@keyframes mk-scrim-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Paneel ilmub kiire, aga pehme sissehajumisega (180 ms, 6 px ülevalt alla).
   Animatsioon on paneelil endal, mitte ribakirjel (vt .mk-nav__item märkust
   transformi kohta). Kirjelt kirjele liikudes jääb kate paigale (menu.js) ja
   ainult uus paneel hajub sisse. */
@keyframes mk-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 901px) {
	html.mk-menu-open .mk-navbar__scrim {
		display: block;
		position: fixed;
		top: var(--mk-scrim-top, 0px);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 39;
		background: rgba(17, 17, 17, 0.34);
		animation: mk-scrim-in 180ms ease-out;
	}

	.mk-nav__item--open > .mk-panel {
		animation: mk-panel-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	/* Kirjelt kirjele liikudes (menu.js paneb klassi --switch) ilmub uus
	   paneel kohe — muidu kumaks leht poolläbipaistva paneeli alt läbi. */
	.mk-nav__item--open.mk-nav__item--switch > .mk-panel {
		animation: none;
	}

	/* Sulgumine (menu.js paneb --closing ja html.mk-menu-closing 120 ms-ks):
	   paneel ja kate hajuvad koos välja, kiireneva kõveraga ja ilma
	   liikumiseta — väljumine on sisenemisest (180 ms) kiirem. */
	.mk-nav__item--open.mk-nav__item--closing > .mk-panel {
		animation: mk-panel-out 120ms cubic-bezier(0.4, 0, 1, 1) forwards;
		pointer-events: none;
	}

	html.mk-menu-closing .mk-navbar__scrim {
		animation: mk-scrim-out 120ms cubic-bezier(0.4, 0, 1, 1) forwards;
		pointer-events: none;
	}
}

@keyframes mk-panel-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mk-scrim-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-navbar__scrim,
	.mk-nav__item--open > .mk-panel,
	.mk-nav__item--open.mk-nav__item--closing > .mk-panel {
		animation: none;
	}
}

.mk-panel__inner {
	display: grid;
	width: 100%;
	max-width: var(--mk-content);
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--mk-s5);
}

.mk-panel__main {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s2);
}

.mk-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mk-s3);
}

/* 1fr read hoiavad kõik kastid ühe kõrgusega, ka siis kui ühel real on pikem
   nimi või puudub pisipilt (omaniku tagasiside 2026-09-17). */
.mk-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}

/* Kastid on paneeli toonitud pinnal valged — see annab neile kontrasti.
   position + isolation on pisipildi tausta jaoks (vt ::before allpool);
   paneel ise ei ole kasti sees, seega see ei lõika midagi ära. */
.mk-megarow {
	display: flex;
	position: relative;
	isolation: isolate;
	align-items: center;
	gap: 14px;
	min-height: 96px;
	padding: 12px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

/* Toonitud ruut pisipildi taga. See on eraldi element, sest mk_thumb_html()
   väljastab <img> otse rea sisse (mähist ei ole) — pildi enda taust ei saaks
   korrutusrežiimiga sulanduda. Mõõdud kattuvad täpselt pisipildiga: vasakul
   rea polsterduse joonel, püstsuunas keskel (align-items: center). */
.mk-megarow::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 72px;
	height: 72px;
	margin-top: -36px;
	border-radius: var(--mk-radius);
	background: var(--mk-media-bg, #f5f4f1);
}

.mk-megarow:hover,
.mk-megarow:focus-visible {
	border-color: var(--mk-ink);
	color: var(--mk-ink);
	box-shadow: var(--mk-shadow-hover, 0 8px 24px rgba(17, 17, 17, 0.08));
}

/* Pisipilt on alati 72x72 toonitud ruut. Kui pilti ei ole, väljastab
   mk_thumb_html() sama klassiga tühja <span> — nii algab tekstiveerg igas
   kastis samast kohast ja kastid ei jää eri kõrgusega.
   Valija on (0,2,0), mitte (0,1,0): WooCommerce'i `.woocommerce img
   { height: auto }` on (0,1,1) ja võitis ühe klassi. Päis on ka poelehtedel
   (body.woocommerce), nii et lameda pildiga kast venitas 1fr ridade tõttu
   KÕIK kastid kõrgeks (mõõdetud 218 px 96 px asemel). */
.mk-megarow .mk-megathumb {
	position: relative;
	width: 72px;
	height: 72px;
	flex: none;
	padding: 6px;
	object-fit: contain;
	border-radius: var(--mk-radius);
	/* Taust tuleb ::before pealt — foto valge põhi sulandub korrutamisel
	   sellega, nagu kaartidel ja plaatidel. position hoiab pildi ::before
	   peal (positsioneeritud pseudoelement joonistuks muidu pildi peale). */
	background: transparent;
	mix-blend-mode: multiply;
}

.mk-megarow__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mk-megarow__text .mk-h4 {
	font-size: 15px;
	font-weight: 600;
}

.mk-panel__aside {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s2);
	padding-left: var(--mk-s5);
	border-left: 1px solid var(--mk-line);
}

.mk-panel__asidehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* position + isolation on pisipildi tausta jaoks (vt ::before allpool),
   nagu .mk-megarow juures. */
.mk-mini {
	position: relative;
	isolation: isolate;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

/* Toonitud ruut pisipildi taga. Sama põhjus mis .mk-megarow::before juures:
   mk_thumb_html() väljastab <img> otse kaardi sisse, seega ei saaks pildi oma
   taust korrutusrežiimiga sulanduda. Mõõdud kattuvad pisipildiga: vasakus
   servas (kaardil ei ole polsterdust), püstsuunas keskel. Ümarad nurgad tulevad
   .mk-card overflow: hidden pealt. */
.mk-mini::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 88px;
	height: 88px;
	margin-top: -44px;
	background: var(--mk-media-bg, #f5f4f1);
}

/* Sama pildikäsitlus mis mujal: toonitud ruut ja mahutatud foto, mille valge
   alus sulab korrutamisel tooni sisse.
   (0,2,0) samal põhjusel mis .mk-megathumb juures. */
.mk-mini .mk-mini__thumb {
	position: relative;
	width: 88px;
	height: 88px;
	flex: none;
	padding: 6px;
	object-fit: contain;
	background: transparent;
	mix-blend-mode: multiply;
}

.mk-mini__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: 12px;
	min-width: 0;
}

.mk-mini .mk-price {
	font-size: 16px;
}

/* =========================================================================
 * 8. Mobiilimenüü ja sakiriba
 * ====================================================================== */

.mk-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--mk-z-drawer);
	background: rgba(17, 17, 17, 0.4);
}

.mk-drawer__panel {
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	overflow-y: auto;
	background: var(--mk-bg);
	-webkit-overflow-scrolling: touch;
}

.mk-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-s1);
	min-height: 56px;
	padding: 0 12px;
	border-bottom: 1px solid var(--mk-line);
}

.mk-drawer__top .mk-brand__name {
	font-size: 17px;
}

.mk-drawer__top .mk-brand__tagline {
	display: none;
}

.mk-drawer__search {
	padding: 8px 16px;
	border-bottom: 1px solid var(--mk-line);
}

.mk-drawer__nav {
	display: flex;
	flex-direction: column;
}

.mk-drawer__row {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 4px 0 16px;
	border-bottom: 1px solid var(--mk-line);
}

.mk-drawer__row--accent .mk-drawer__label {
	color: var(--mk-accent);
}

.mk-drawer__link {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 56px;
	min-width: 0;
}

/* 48px kategooriapilt rea vasakus servas (B-Mobiil-menyy .rowthumb).
   (0,2,0) samal põhjusel mis .mk-megathumb juures — sahtel avaneb ka
   poelehel, kus WooCommerce'i (0,1,1) reegel muidu venitaks pildi. */
.mk-drawer__link .mk-drawer__thumb {
	display: block;
	width: 48px;
	height: 48px;
	flex: none;
	margin-right: 12px;
	object-fit: cover;
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-drawer__label {
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mk-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mk-muted);
	cursor: pointer;
}

.mk-drawer__toggle[aria-expanded="true"] .mk-ico {
	transform: rotate(180deg);
}

.mk-drawer__sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 8px;
	padding: 8px 16px 8px 32px;
	background: var(--mk-surface);
	border-bottom: 1px solid var(--mk-line);
}

.mk-drawer__subrow {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--mk-ink-2);
}

.mk-drawer__subrow--all {
	font-weight: 600;
}

.mk-drawer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--mk-line);
}

.mk-drawer__chips .mk-chip {
	flex: 1 1 auto;
	justify-content: center;
	min-height: 48px;
}

/* Leiunurga kiip kannab punast linti — see on mobiilis Leiunurga sissepääs. */
.mk-drawer__chips .mk-chip--leiunurk {
	flex: 1 1 100%;
	gap: 8px;
	border-color: var(--mk-accent);
	font-weight: 600;
}

.mk-drawer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	margin-top: auto;
	padding: 0 16px;
	background: var(--mk-surface);
}

.mk-drawer__footlink {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	font-family: var(--mk-font-display);
	font-size: 12.5px;
	font-weight: 600;
}

.mk-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--mk-z-tabbar);
	/* Sakke on 3-5 (soovikorv ja ostukorv on tingimuslikud), seega
	   kaudsed veerud, mitte fikseeritud viis. */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	background: var(--mk-bg);
	border-top: 1px solid var(--mk-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.mk-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: var(--mk-tabbar-h);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mk-muted);
	font-family: var(--mk-font-display);
	font-size: 10.5px;
	font-weight: 600;
	cursor: pointer;
}

.mk-tabbar__item--on {
	color: var(--mk-ink);
}

/* =========================================================================
 * 9. Avaleht
 * ====================================================================== */

.mk-hero {
	padding-block: var(--mk-s5) var(--mk-s5);
}

.mk-hero__inner {
	display: grid;
	grid-template-columns: 512px minmax(0, 1fr);
	gap: var(--mk-s5);
	align-items: start;
}

.mk-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s3);
	padding-top: var(--mk-s1);
}

.mk-hero__text p {
	margin: 0;
}

.mk-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.mk-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-s3);
	margin: 0;
	padding-top: var(--mk-s2);
	border-top: 1px solid var(--mk-line);
}

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

.mk-hero__fact dd {
	margin: 0;
}

.mk-hero__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mk-surface);
}

.mk-hero__cardbody {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-s2);
	flex-wrap: wrap;
	padding: 14px 16px;
	border-top: 1px solid var(--mk-line);
}

.mk-hero__cardtext {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mk-hero__cardprice {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

/* 9.2 Plaadid */

.mk-tiles {
	align-items: stretch;
}

.mk-tile--accent {
	border-color: var(--mk-accent);
}

.mk-tile--accent .mk-tile__body {
	border-top-color: var(--mk-accent);
}

.mk-tile__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 18px;
	border-top: 1px solid var(--mk-line);
}

.mk-tile__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mk-tile__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Telefonivaate vihjerida — asendab lingiloendi (vt <=560px). */
.mk-tile__hint {
	display: none;
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mk-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 9.3 Täispuidu riba */

.mk-oak {
	background-color: var(--mk-oak);
	background-image:
		repeating-linear-gradient(90deg, rgba(120, 84, 44, 0.14) 0 1px, rgba(120, 84, 44, 0) 1px 7px),
		repeating-linear-gradient(90deg, rgba(120, 84, 44, 0.07) 0 2px, rgba(120, 84, 44, 0) 2px 19px);
	border-top: 1px solid var(--mk-oak-line);
	border-bottom: 1px solid var(--mk-oak-line);
	padding-block: var(--mk-s5);
}

.mk-oak__inner {
	display: grid;
	grid-template-columns: 392px minmax(0, 1fr);
	gap: var(--mk-s5);
	align-items: start;
}

.mk-oak__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.mk-oak__text p {
	margin: 0;
}

.mk-oak .mk-products {
	margin-top: 0;
}

/* 9.4 Leiunurk */

.mk-leiunurk {
	background: var(--mk-surface);
	border-top: 1px solid var(--mk-line);
	border-bottom: 1px solid var(--mk-line);
}

.mk-leiunurk__tags {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* 9.5 Usaldusriba */

.mk-section--trust {
	padding-block: var(--mk-s4);
}

.mk-trust {
	gap: var(--mk-s4);
}

.mk-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.mk-trust__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Kontaktirea link ("Kirjuta meile") on ainus riba link — allajoon eristab
   selle kõrvalolevast seletustekstist. */
.mk-trust__link {
	align-self: flex-start;
	color: var(--mk-ink-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mk-trust__link:hover,
.mk-trust__link:focus-visible {
	color: var(--mk-accent);
}

/* =========================================================================
 * 10. Jalus
 * ====================================================================== */

.mk-footer {
	background: var(--mk-surface);
	border-top: 1px solid var(--mk-line);
}

.mk-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: var(--mk-s5);
	padding-block: var(--mk-s5) var(--mk-s4);
}

.mk-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mk-footer__col--about {
	gap: 14px;
}

.mk-footer__col p {
	margin: 0;
}

.mk-footer__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mk-footer__steps-title {
	margin-top: var(--mk-s2);
}

.mk-footer__steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: mk-step;
}

.mk-footer__steps li {
	counter-increment: mk-step;
}

.mk-footer__steps li::before {
	content: counter(mk-step) ". ";
	font-family: var(--mk-font-display);
	font-weight: 700;
}

.mk-footer__bottom {
	border-top: 1px solid var(--mk-line);
}

.mk-footer__bottominner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-s3);
	flex-wrap: wrap;
	padding-block: 18px;
}

/* Taganemisnupu link (võlaõigusseaduse § 56⁴). Seadus nõuab, et see oleks esile
   tõstetud ja muust infost eraldatud, seega on tal alaribal oma raamitud kast,
   mitte ülejäänud meta-teksti ilme. Sõnastus „Taganen lepingust“ tuleb seadusest
   ja seda ei tohi muuta. */
/* Taganemise link: tavaline tekstilink, mitte nupp (omaniku soov 21.09.2026).
   Seadus (VÕS § 56⁴) nõuab, et link oleks igal lehel olemas, selgelt loetav ja
   muust eraldi — seepärast jääb see omaette reale alumisel ribal, tindivärvi ja
   allajoonituna, kuid ilma raami ja taustata. */
.mk-footer__withdraw {
	display: inline-block;
	padding: 6px 0;
	font-size: var(--mk-fs-meta);
	font-weight: 500;
	color: var(--mk-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mk-footer__withdraw:hover,
.mk-footer__withdraw:focus-visible {
	color: var(--mk-accent);
}

.mk-footer .mk-brand__tagline {
	display: none;
}

/* =========================================================================
 * 11. Leheosad, leivapuru, lehitsemine
 * ====================================================================== */

.mk-page {
	padding-block: var(--mk-s4) var(--mk-s6);
}

.mk-page--narrow {
	max-width: calc(820px + var(--mk-gutter) * 2);
}

.mk-page__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: var(--mk-s3);
}

.mk-page__search {
	max-width: 560px;
	margin-bottom: var(--mk-s4);
}

.mk-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--mk-s2);
	font-size: 12.5px;
	color: var(--mk-muted);
}

.mk-breadcrumb a {
	color: var(--mk-muted);
}

.mk-breadcrumb a:hover {
	color: var(--mk-ink);
}

.mk-breadcrumb__sep {
	color: var(--mk-line-2);
}

.mk-prose {
	font-size: var(--mk-fs-body);
	line-height: 1.7;
	color: var(--mk-ink-2);
}

.mk-prose h2 {
	margin: var(--mk-s4) 0 var(--mk-s1);
	font-size: var(--mk-fs-h2);
	color: var(--mk-ink);
}

.mk-prose h3 {
	margin: var(--mk-s3) 0 var(--mk-s1);
	font-size: 18px;
	color: var(--mk-ink);
}

.mk-prose ul,
.mk-prose ol {
	margin: 0 0 var(--mk-s2);
	padding-left: 20px;
	list-style: revert;
}

.mk-prose li {
	margin-bottom: 6px;
}

.mk-prose a {
	color: var(--mk-accent);
	text-decoration: underline;
}

.mk-prose img {
	border-radius: var(--mk-radius);
}

/* Migreeritud sisu (Cart2Cart tõi post_content'i Elementori märgendi koos
   fikseeritud laiustega, nt 440 px). 375 px ekraanil ajas see lehe
   horisontaalselt üle ääre, seega sunnime kogu migreeritud sisu konteineri
   laiusesse. !important on siin põhjendatud: vastas on sisusse salvestatud
   reasisesed stiilid, mida CSS-i eriomasus muidu ei võida. */
/* NB: siin ei tohi olla max-width — .mk-prose satub ka .mk-container'i peale
   (front-page.php) ja kirjutaks konteineri laiuse üle. */
.mk-prose,
.mk-archive__intro,
.mk-product__excerpt {
	min-width: 0;
	overflow-x: hidden;
	overflow-wrap: anywhere;
}

/* WooCommerce'i lühikoodid (ostukorv, kassa) elavad samuti lehe sisus —
   nende tabelid ja vormid jäävad kaitsest välja, muidu laguneks paigutus.
   Sama erand kehtib kontaktivormile ja selle teatele (sektsioon 12):
   width: auto võtaks sisestusväljadelt täislaiuse ja max-width teate
   vormiga ühest joonest välja. */
:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) *:not(.woocommerce, .woocommerce *, .mk-form, .mk-form *, .mk-form__notice, .mk-form__notice *),
:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) [class*="elementor"] {
	max-width: 100% !important;
	width: auto !important;
	min-width: 0 !important;
	float: none !important;
}

:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) img,
:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) iframe,
:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) video,
:where(.mk-prose, .mk-archive__intro, .mk-product__excerpt) table {
	max-width: 100%;
	height: auto;
}

/* Lai tabel kerib omaette, mitte kogu lehte kaasa vedades (WC tabelid välja). */
:where(.mk-prose, .mk-archive__intro) table:not(.shop_table, .woocommerce *) {
	display: block;
	overflow-x: auto;
}

.mk-article__media {
	margin-bottom: var(--mk-s3);
}

.mk-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 18px;
	border-top: 1px solid var(--mk-line);
}

.mk-postcard__body p {
	margin: 0;
}

.mk-pagination {
	margin-top: var(--mk-s4);
}

.mk-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
}

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

.mk-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: var(--mk-s4) 0;
}

.mk-searchlist {
	margin-top: var(--mk-s5);
	padding-top: var(--mk-s3);
	border-top: 1px solid var(--mk-line);
}

.mk-searchlist__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.mk-404__search {
	max-width: 560px;
	margin-bottom: var(--mk-s3);
}

.mk-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* =========================================================================
 * 12. Kontakti- ja päringuvorm
 * ====================================================================== */

/* Märgendi kirjutab mk-pood (lühikood [mk_kontakt]), stiil on siin: vorm
   satub tavalise lehe sisu sisse (.mk-prose), seega seisab see plokk
   teadlikult pärast sektsiooni 11 — muidu võidaksid .mk-prose loendi- ja
   lingireeglid võrdse täpsuse ja hilisema asukoha tõttu. */
.mk-form {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s2);
	max-width: 640px;
}

.mk-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.mk-form__label {
	font-family: var(--mk-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--mk-ink);
}

.mk-form__input {
	width: 100%;
	min-height: var(--mk-control-h);
	padding: 10px 12px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-family: var(--mk-font-body);
	font-size: 15px;
	line-height: 1.5;
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

.mk-form__input:hover {
	border-color: var(--mk-ink);
}

/* Sama fookusmärk mis otsinguvormil (sektsioon 6): tume raam ja 1 px rõngas,
   brauseri oma kontuur ära. */
.mk-form__input:focus,
.mk-form__input:focus-visible {
	outline: none;
	border-color: var(--mk-ink);
	box-shadow: 0 0 0 1px var(--mk-ink);
}

.mk-form__input::placeholder {
	color: var(--mk-muted);
}

.mk-form__input--area {
	min-height: 160px;
	resize: vertical;
}

.mk-form__hint {
	margin: 0;
	font-size: var(--mk-fs-hint);
	line-height: 1.45;
	color: var(--mk-muted);
}

/* Teade vormi kohal. Vasak riba ütleb tulemuse: tint = korras, aktsent = viga.
   Sama laius mis vormil, et need kaks seisaksid ühel joonel. */
.mk-form__notice {
	max-width: 640px;
	margin: 0 0 var(--mk-s3);
	padding: 14px 16px;
	border-left: 3px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	font-size: var(--mk-fs-body);
	line-height: 1.55;
	color: var(--mk-ink-2);
}

.mk-form__notice--ok {
	border-left-color: var(--mk-ink);
}

.mk-form__notice--error {
	border-left-color: var(--mk-accent);
}

/* Vigade loend teate sees on lause jätk, mitte täpploend. */
.mk-form__notice ul,
.mk-form__notice ol {
	margin: 6px 0 0;
	padding-left: 0;
	list-style: none;
}

.mk-form__notice li {
	margin: 0;
}

/* Teate juhatav lause ja loend on üks tervik — lõigu alumine vahe ära. */
.mk-form__notice p {
	margin: 0;
}

/* Toote viide vormi kohal: sama toonitud kast mis mujal teemas. */
.mk-contact__product {
	margin: 0 0 var(--mk-s2);
	padding: 12px 14px;
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	font-size: 14px;
	line-height: 1.5;
	color: var(--mk-ink-2);
}

.mk-contact__product-label {
	color: var(--mk-muted);
}

.mk-contact__product a {
	font-weight: 600;
	color: var(--mk-ink);
}

.mk-contact__product a:hover,
.mk-contact__product a:focus-visible {
	color: var(--mk-accent);
}

/* Välja juurde kuuluv veateade (taganemisvorm). Koondteade vormi kohal ütleb
   sama asja, aga ekraanilugeja leiab selle siit aria-describedby kaudu. */
.mk-form__error {
	font-size: var(--mk-fs-hint);
	font-weight: 600;
	line-height: 1.45;
	color: var(--mk-accent);
}

.mk-form__input[aria-invalid="true"] {
	border-color: var(--mk-accent);
}

/* Taganemisavalduse ülevaatuse samm (lühikood [mk_taganemine]): sisestatu
   loeteluna enne kinnitamist ja sama loetelu tulemuse ekraanil. Loetelu seisab
   alati .mk-form sees — ainult selle sisu jätab sektsiooni 11 .mk-prose reegel
   max-width: 100% !important alt välja. */
.mk-form__review {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 8px var(--mk-s2);
	max-width: 640px;
	margin: 0 0 var(--mk-s3);
	padding: 16px 18px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	font-size: var(--mk-fs-body);
	line-height: 1.55;
}

.mk-form__review dt {
	font-family: var(--mk-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--mk-muted);
}

.mk-form__review dd {
	margin: 0;
	color: var(--mk-ink);
	/* Tellimuse number ja e-posti aadress ei tohi kitsal ekraanil üle serva minna. */
	overflow-wrap: anywhere;
}

/* Kaks nuppu kõrvuti: „Kinnitan taganemise“ ja „Muuda andmeid“. Kitsal ekraanil
   teeb sektsiooni 13 reegel .mk-form .mk-btn nad täislaiuseks ja nad lähevad
   siin murdmise tõttu ise üksteise alla. */
.mk-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mk-s1);
}

@media (max-width: 560px) {
	.mk-form__review {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.mk-form__review dd {
		margin-bottom: 10px;
	}
}

/* Robotilõks: väli jääb DOM-i, aga ekraanilt välja. */
.mk-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
 * 13. Kohandused ekraanilaiuse järgi
 * ====================================================================== */

@media (max-width: 1200px) {
	.mk-hero__inner {
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
		gap: var(--mk-s4);
	}

	.mk-oak__inner {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: var(--mk-s4);
	}

	.mk-panel__inner {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--mk-s4);
	}

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

	/* Kirjete vahe on 20 px ka siin — aga vahe koosneb nüüd kirje 10 px
	   polstrist mõlemal pool, seega gap on 0. Varasem gap: 20px andis
	   siltide vahele 40 px ehk rohkem kui laial ekraanil (28 px) ja riba
	   hakkas juba 1200 px juures kerima. */
	.mk-nav {
		gap: 0;
	}

	.mk-brandbar__inner {
		gap: var(--mk-s3);
	}
}

@media (max-width: 900px) {
	.mk-burger {
		display: inline-flex;
	}

	.mk-navbar,
	.mk-utility {
		display: none;
	}

	.mk-brandbar__inner {
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 10px 14px;
	}

	.mk-brandbar__search {
		order: 3;
		flex: 1 1 100%;
	}

	.mk-brand {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}

	.mk-brand__name {
		font-size: 17px;
	}

	.mk-brand__tagline {
		display: none;
	}

	.mk-brand .mk-brand__logo img {
		height: 36px;
	}

	.mk-action__label {
		display: none;
	}

	.mk-brandbar__actions {
		gap: 4px;
	}

	.mk-tabbar {
		display: grid;
	}

	.mk-site {
		padding-bottom: calc(var(--mk-tabbar-h) + env(safe-area-inset-bottom));
	}

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

	.mk-hero__inner,
	.mk-oak__inner,
	.mk-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mk-s3);
	}

	.mk-hero {
		padding-block: var(--mk-s3) var(--mk-s4);
	}

	.mk-hero__card {
		order: -1;
	}

	.mk-section {
		padding-block: var(--mk-s4);
	}

	.mk-section--tiles {
		padding-block: 0 var(--mk-s4);
	}

	.mk-hero__actions .mk-btn {
		flex: 1 1 100%;
		height: 52px;
	}

	.mk-trust {
		gap: var(--mk-s2);
	}

	.mk-footer__grid {
		padding-block: var(--mk-s4) var(--mk-s3);
	}
}

@media (max-width: 560px) {
	.mk-grid-2,
	.mk-grid-3,
	.mk-grid-4,
	.mk-grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mk-postlist,
	.mk-trust {
		grid-template-columns: minmax(0, 1fr);
	}

	.mk-tile__body {
		padding: 10px 12px 12px;
	}

	/* Lingid jäävad DOM-i (ja abivahenditele), aga telefonis näitame
	   nende asemel ühe rea vihje — nii nagu B-Mobiil artboardil. */
	.mk-tile__links {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.mk-tile__hint {
		display: block;
	}

	.mk-pcard__body {
		padding: 10px 12px 14px;
	}

	/* Kitsal kaardil jääb fotole rohkem ruumi — sama vähendus mis
	   kategoorialehe kaardil (woo.css). */
	.mk-pcard__media .mk-thumb {
		padding: 10px;
	}

	/* Kahe veeru vaates jääb nooleringile vähem ruumi — sama vähendus mis
	   kategoorialehe kaardil (woo.css .mk-product-card__price::after), et kaks
	   kaarditüüpi telefonis ei erineks. */
	.mk-pcard__body .mk-price::after {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}

	/* Silt ei kao ära, vaid läheb ekraanilugeja alla: display: none jättis
	   nupu (ainult aria-hidden ikoon) ilma ligipääsetava nimeta. Ilma
	   nihketa absoluutne asetus jätab nupu laiuse muutmata. */
	.mk-search__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mk-search__button {
		padding: 0 16px;
	}

	.mk-sectionhead {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding-bottom: 12px;
	}

	.mk-footer__bottominner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Väli ja nupp on juba 48 px kõrged (--mk-control-h), seega puutesihtmärk
	   on täis. 16 px kiri hoiab iOS-i lehte sisestamisel suurendamast ja
	   täislaiuses nupp on pöidlale lihtsam. */
	.mk-form__input {
		font-size: 16px;
	}

	.mk-form .mk-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	/* Liikuvad osad jäävad paigale, mitte ei hüppa kohale. */
	.mk-pcard:hover .mk-pcard__media .mk-thumb,
	.mk-pcard:focus-within .mk-pcard__media .mk-thumb,
	.mk-btn:active:not([disabled]) {
		transform: none;
	}
}