/**
 * MK Kataloog — avaleht.
 *
 * Laetakse ainult esilehel ja alati pärast theme.css-i, seega piisab siin
 * võrdse täpsusega valijatest. Sisu: kompaktne hero karussell ja
 * kategooriaplaatide ülekirjutused. Ühised klassid (.mk-container, .mk-btn,
 * .mk-card, .mk-badge, .mk-eyebrow, .mk-price) tulevad teema tuumast.
 *
 * Fookusrõngas tuleb theme.css-i üldreeglist :focus-visible; siin muudame
 * ainult nihet seal, kus ümbris lõikab (overflow: hidden).
 */

/* -------------------------------------------------------------------------
 * 1. Hero paigutus
 * ---------------------------------------------------------------------- */

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

/*
 * Telefon (vaikimisi): tekst → karussell → faktid. Sama järjekord on ka
 * DOM-is, seega ei ole vaja order-reegleid.
 */
.mk-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mk-s3);
	align-items: start;
}

.mk-hero__text {
	gap: var(--mk-s2);
	padding-top: 0;
}

.mk-hero__text p {
	max-width: 56ch;
}

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

@media (min-width: 901px) {
	.mk-hero {
		padding-block: var(--mk-s4);
	}

	/*
	 * Kaks veergu: vasak tekstiveerg täidab sama kõrguse, mis parem
	 * karussell — faktid lükkab alla read "1fr auto" (enam ei jää vasakusse
	 * alanurka tühja valget ala).
	 */
	.mk-hero__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"text media"
			"facts media";
		gap: var(--mk-s2) var(--mk-s5);
		align-items: stretch;
	}

	.mk-hero__text {
		grid-area: text;
	}

	.mk-hero__facts {
		grid-area: facts;
		margin-top: auto;
	}

	.mk-hero__carousel {
		grid-area: media;
		align-self: center;
	}

	/*
	 * Pildiala lagi hoiab kogu hero ~430 px juures (mõõdetud 1440 px laiusel).
	 * Kuvasuhe 16/10 annaks siin ~435 px ja hero võtaks liiga palju ruumi.
	 * Vahemikus 561–900 px lage ei ole — seal jäi slaid ribade vahele.
	 */
	.mk-carousel__frame {
		max-height: 360px;
	}

	/* Ilma slaidideta (nt WooCommerce puudub) jääb hero ühte veergu. */
	.mk-hero__inner--plain {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"text"
			"facts";
	}
}

/*
 * Telefon ja tahvel (≤ 900 px): hero'st jääb alles pealkiri ja karussell.
 * Sissejuhatus ja kaks nuppu võtsid terve esimese ekraani (tagasiside
 * 23.10.2026); kataloog ja kontakt on alumises ribas ja menüüs niikuinii.
 */
@media (max-width: 900px) {
	.mk-hero__text > p,
	.mk-hero__actions {
		display: none;
	}

	.mk-hero__text {
		gap: 6px;
	}

	.mk-hero .mk-h1 {
		font-size: clamp(22px, 6vw, 28px);
	}
}

/* -------------------------------------------------------------------------
 * 2. Karussell
 * ---------------------------------------------------------------------- */

.mk-carousel {
	/*
	 * Allriba (tootenimi + hind) kõrgus. Sama arv annab nii allriba
	 * miinimumkõrguse kui ka juhtnuppude kihi alumise serva, seega seisavad
	 * nooled PILDIALA — mitte kogu raami — keskel ja punktid täpselt
	 * allriba kohal. Mõõdetud: allriba sisu on 43–54 px (soodushinna del/ins
	 * rida on kõrgeim), seega jääb varu igale slaidile.
	 */
	--mk-slide-cap: 60px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mk-carousel__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
}

/*
 * Rada on ise kerija: üks slaid vaate kohta, kinnitus servale ja peidetud
 * kerimisriba (omaniku märkus: nähtav riba mõjub katkisena).
 */
.mk-carousel__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	/*
	 * Sujuvust küsib hero.js iga kerimise juures eraldi (scrollTo). CSS-i
	 * scroll-behavior: smooth jätaks brauseris, kus sujuv kerimine on välja
	 * lülitatud, nooled hoopis tööta.
	 */
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.mk-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* -------------------------------------------------------------------------
 * 3. Slaid
 * ---------------------------------------------------------------------- */

.mk-slide {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--mk-ink);
}

.mk-slide:hover,
.mk-slide:focus-visible {
	color: var(--mk-ink);
}

/* Raam lõikab rõnga — toome selle elemendi sisse. */
.mk-slide:focus-visible {
	outline-offset: -2px;
}

.mk-slide__media {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--mk-media-bg, #f5f4f1);
}

.mk-slide__media .mk-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

/*
 * (0, 2, 1) — lööb WooCommerce'i .woocommerce img {height: auto} (0, 1, 1),
 * kui avaleheks on ekslikult seatud poeleht.
 */
.mk-slide__media img.mk-thumb {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
	/* Valge fotoalus sulab tinditud alusega kokku. */
	mix-blend-mode: multiply;
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-slide:hover .mk-slide__media img.mk-thumb,
.mk-slide:focus-visible .mk-slide__media img.mk-thumb {
	transform: scale(1.03);
}

/*
 * Miljööfoto (tuba, seaded) mõjub toonitud alusel raami surutuna, tootefoto
 * valgel taustal aga just sulandub. hero.js mõõdab laaditud pildi nurgad ja
 * annab miljööfotole klassi "is-photo". Kast ise jääb samaks — muutub ainult
 * pildi mahutus, seega paigutus ei hüppa.
 */
.mk-slide__media.is-photo {
	padding: 0;
}

.mk-slide__media.is-photo img.mk-thumb {
	object-fit: cover;
	mix-blend-mode: normal;
}

.mk-slide__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-s2);
	/* Ühtlane kõrgus hoiab nooled ja punktid pildiala suhtes paigal. */
	min-height: var(--mk-slide-cap);
	padding: 12px 16px;
	border-top: 1px solid var(--mk-line);
	background: var(--mk-bg);
}

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

.mk-slide__cat {
	font-size: var(--mk-fs-hint);
	line-height: 1.4;
	color: var(--mk-muted);
}

.mk-slide__title {
	display: block;
	overflow: hidden;
	font-family: var(--mk-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mk-slide__buy {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.mk-slide__buy .mk-price {
	font-size: 18px;
	font-weight: 700;
}

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

/* -------------------------------------------------------------------------
 * 4. Nooled ja punktid (pildiala peal)
 * ---------------------------------------------------------------------- */

/*
 * Eraldi nupuriba raami all tõstis hero kõrguse ~514 pikslini. Nüüd on
 * juhtnupud raami sees oma kihil: kiht ise klikke ei püüa (kogu slaid on
 * link), ainult nupud. Kihi alumine serv on allriba ülemine serv, seega
 * on nooled pildiala püstkeskel. Nupud on alati nähtaval (mitte ainult
 * hõljutusel) — ka puuteseadmes.
 *
 * Ilma skriptita saab slaide kerida ja pühkida — juhtnuppe siis ei näidata.
 */
.mk-carousel__controls {
	position: absolute;
	inset: 0 0 var(--mk-slide-cap);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: space-between;
	padding-inline: 12px;
	pointer-events: none;
}

.mk-carousel.is-js .mk-carousel__controls {
	display: flex;
}

.mk-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--mk-line);
	border-radius: 999px;
	background: var(--mk-bg);
	color: var(--mk-ink);
	box-shadow: var(--mk-shadow-hover, 0 8px 24px rgba(17, 17, 17, 0.08));
	cursor: pointer;
	pointer-events: auto;
	transition: background-color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease), color var(--mk-ease, 160ms ease);
}

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

.mk-carousel__nav:active {
	transform: translateY(1px);
}

.mk-carousel__nav--prev .mk-ico {
	transform: rotate(180deg);
}

/* Punktid on pildiala all keskel, allriba ülemise serva kohal. */
.mk-carousel__dots {
	position: absolute;
	bottom: 4px;
	left: 50%;
	display: flex;
	align-items: center;
	transform: translateX(-50%);
}

/*
 * Punktidel ei ole enam padja (omaniku tähelepanek 8.10.2026: padi oli
 * toonitud slaidil nähtamatu ja ilmus ainult täisfotoga slaidil — paistis
 * veana). Kontrasti kannab iga punkt ise: hele rõngas punkti ümber, mis
 * toonitud alusel ei paista ja tumedal fotol hoiab punkti loetavana.
 * Puutesihtmärgi 44 px annab nuppude polster.
 */
.mk-carousel__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 9px;
	border: 0;
	border-radius: var(--mk-radius);
	background: none;
	cursor: pointer;
	pointer-events: auto;
}

.mk-carousel__dotmark {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--mk-line-2);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
	transition: background-color var(--mk-ease, 160ms ease), transform var(--mk-ease, 160ms ease);
}

.mk-carousel__dot:hover .mk-carousel__dotmark {
	background: var(--mk-ink);
}

.mk-carousel__dot[aria-current="true"] .mk-carousel__dotmark {
	background: var(--mk-ink);
	transform: scale(1.4);
}

/* -------------------------------------------------------------------------
 * 5. Kategooriaplaadid
 * ---------------------------------------------------------------------- */

.mk-tiles .mk-tile {
	overflow: hidden;
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

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

/* Kõigi plaatide pildiala on üks pere: tinditud alus, sama polster. */
.mk-tiles .mk-tile__media {
	padding: 16px;
	border-bottom: 1px solid var(--mk-line);
	background: var(--mk-media-bg, #f5f4f1);
}

.mk-tiles .mk-tile__media img.mk-thumb {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
	mix-blend-mode: multiply;
	transition: transform var(--mk-ease, 160ms ease);
}

/* Miljööfoto plaadil: sama kast, täidetud pilt (vt hero.js). */
.mk-tiles .mk-tile__media.is-photo {
	padding: 0;
}

.mk-tiles .mk-tile__media.is-photo img.mk-thumb {
	object-fit: cover;
	mix-blend-mode: normal;
}

/* Pildita kategooria: sama tinditud kast, et rida ei hüppaks. */
.mk-tiles .mk-tile__media .mk-thumb--empty {
	background: transparent;
}

.mk-tiles .mk-tile:hover .mk-tile__media img.mk-thumb {
	transform: scale(1.03);
}

/* -------------------------------------------------------------------------
 * 6. Leiunurga aktsentplaat
 * ---------------------------------------------------------------------- */

.mk-tiles .mk-tile--promo {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s1);
	padding: 20px;
	border-color: var(--mk-accent);
	background: var(--mk-accent);
	color: var(--mk-accent-ink);
	transition: background-color var(--mk-ease, 160ms ease), border-color var(--mk-ease, 160ms ease);
}

.mk-tiles .mk-tile--promo:hover,
.mk-tiles .mk-tile--promo:focus-visible {
	border-color: var(--mk-accent-hover);
	background: var(--mk-accent-hover);
	color: var(--mk-accent-ink);
}

/* Aktsentvärvil hoiame teksti täisvalgena — läbipaistvus jääks kontrastist alla. */
.mk-tile--promo .mk-tile__eyebrow {
	color: var(--mk-accent-ink);
}

.mk-tile--promo .mk-tile__promotitle {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.mk-tile--promo .mk-tile__promofoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.mk-tile--promo .mk-tile__promoline {
	font-size: 13.5px;
	line-height: 1.4;
}

.mk-tile--promo .mk-tile__promoarrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 999px;
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-tile--promo:hover .mk-tile__promoarrow {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
 * 7. Kitsas ekraan
 * ---------------------------------------------------------------------- */

@media (max-width: 560px) {
	/* Telefonis on toode kõrgemal pildialal paremini näha. */
	.mk-carousel__frame {
		aspect-ratio: 4 / 3;
	}

	/* Puutesihtmärgid vähemalt 44 px. */
	.mk-carousel__nav {
		width: 44px;
		height: 44px;
	}

	/*
	 * Punkt ise jääb 8 px, aga sihtmärk peab olema 44 × 44 px (mõõdetud: ilma
	 * selleta 26 × 44). Kuus punkti annab 264 px — mahub ka 320 px ekraani
	 * raami (286 px) sisse ega jõua noolteni.
	 */
	.mk-carousel__dot {
		padding-inline: 18px;
	}

	.mk-slide__media {
		padding: 16px;
	}

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

	/* Kogu slaid on juba link — nupp võtaks kitsal real nime ruumi. */
	.mk-slide__cta {
		display: none;
	}

	.mk-tiles .mk-tile__media {
		padding: 10px;
	}

	.mk-tiles .mk-tile--promo {
		padding: 12px;
	}
}

/* -------------------------------------------------------------------------
 * 8. Vähendatud liikumine
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mk-slide:hover .mk-slide__media img.mk-thumb,
	.mk-slide:focus-visible .mk-slide__media img.mk-thumb,
	.mk-tiles .mk-tile:hover .mk-tile__media img.mk-thumb,
	.mk-tile--promo:hover .mk-tile__promoarrow,
	.mk-carousel__nav:active {
		transform: none;
	}
}