/*
 * MK Kataloog — tooteleht (laetakse ainult ühe toote lehel).
 * Kõik värvid ja mõõdud tulevad tokens.css muutujatest.
 * Suund B "Kataloog": valge põhi, must kiri, punane ainult tegevusel.
 */

/* ---------------------------------------------------------------- */
/* 0. Abiklassid                                                     */
/* ---------------------------------------------------------------- */

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

/* WooCommerce annab peidetud valikute konteinerile laiuse valijaga
   `.woocommerce div.product form.cart .variations` (woocommerce.css) — see
   võidab klassi .mk-sr-only üle ja konteiner jäi 1009 px laiaks, sundides
   lehte horisontaalselt kerima. Kordame sama valijaahelat, et täpsus oleks
   võrdne. Konteiner peab jääma DOM-i (WC vajab select-e), seega ainult
   absoluutne asend, mitte display: none. */
.woocommerce div.product form.cart .variations.mk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.woocommerce div.product form.cart .variations.mk-sr-only .mk-variation-field,
.woocommerce div.product form.cart .variations.mk-sr-only label,
.woocommerce div.product form.cart .variations.mk-sr-only select,
.woocommerce div.product form.cart .variations.mk-sr-only .reset_variations {
	width: 1px;
	min-width: 0;
	max-width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
}

.mk-product .mk-ico {
	width: 20px;
	height: 20px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------- */
/* 1. Ülemine plokk: galerii + otsustusveerg                         */
/* ---------------------------------------------------------------- */

.mk-product {
	font-family: var(--mk-font-body);
	color: var(--mk-ink);
}

.mk-product__top {
	display: grid;
	grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
	gap: 48px;
	padding-top: 32px;
	padding-bottom: 56px;
	align-items: start;
}

.mk-product__media {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Lauaarvutis jääb galerii nähtavale, kui otsustusveerus pikka valikut kerida.
   Telefonis (kuni 900 px) on veerud üksteise all — seal kleepuv galerii ainult
   segaks, seega min-width päring. */
@media (min-width: 901px) {
	.mk-product__media {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}

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

.mk-product__madeto {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.mk-badge--ghost {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--mk-ink);
	background: var(--mk-bg);
	border: 1px solid var(--mk-ink);
	border-radius: var(--mk-radius);
	padding: 3px 7px;
}

/* Galerii: pisipildid vasakus tulbas, põhipilt paremal. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-rows: auto;
	gap: 16px;
	margin: 0;
	float: none;
	width: 100%;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	min-width: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 88px;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: 88px;
	margin: 0;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	opacity: 1;
	cursor: pointer;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--mk-ink);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	background: var(--mk-surface);
	border-radius: var(--mk-radius);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* Galerii pind: sama soe helehall, mis plaatidel ja pisipiltidel. Valge
   fototaust sulab pinda (mix-blend-mode: multiply), nii ei ole tooteleht enam
   suur valge laik (tagasiside 28.10.2026). Suurendusvaade (lightbox) jääb
   valgeks — seal on foto üksi. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	background: var(--mk-media-bg, #f5f4f1);
	border-radius: var(--mk-radius);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .woocommerce-product-gallery__image .zoomImg,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img {
	background: transparent;
	mix-blend-mode: multiply;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	background: var(--mk-media-bg, #f5f4f1);
	border-radius: var(--mk-radius);
}

/* Hõljumissuurendus (jquery.zoom lisab .zoomImg samasse plokki): suurenduspilt
   ja põhipilt on mõlemad multiply-režiimis, seega paistaksid läbisegi. Põhipilt
   hajub suurenduse ajaks välja sama 120 ms-ga, millega zoom sisse hajub
   (Kristjani leid 28.10.2026). Ainult hiirega seadmetel — puutel zoomi ei ole. */
@media (hover: hover) {
	/* Põhipilt kaob alles siis, kui suurenduspilt on päriselt nähtav: jquery.zoom
	   paneb talle inline opacity: 1 pärast suure pildi laadimist (hiir peal).
	   Enne seda jääb põhipilt paigale — tühja raami vilksatust ei teki. Hajumist
	   ei ole kummalgi (zoomi kestus 0, vt mk_product_zoom_options()). */
	.woocommerce div.product div.images .woocommerce-product-gallery__image:has(> .zoomImg[style*="opacity: 1"]) > a > img {
		opacity: 0;
	}
}

/* Turvavõrk horisontaalse kerimise vastu.
   Enne flexslideri käivitumist (või kui JS on välja lülitatud) on kõik
   galeriislaidid korraga DOM-is ja laotuvad üksteise kõrvale — mõõdetult
   1634 px lai __wrapper 1009 px aknas. Käivitudes tõstab flexslider
   __wrapper'i .flex-viewport sisse, seega lapsekombinaator lülitab need
   reeglid ise välja ega sega slaidimist. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	overflow: hidden;
}

.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	display: flex;
	max-width: 100%;
	overflow: hidden;
}

.woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	flex: 0 0 100%;
	max-width: 100%;
}

/* mk_wc_sale_flash() asendab WooCommerce'i <span class="onsale"> täielikult
   märgisega .mk-badge--sale, seega sihime seda. Lapsekombinaator hoiab reegli
   eemal kaardi- ja hinnamärgistest, mis tulevad samast funktsioonist. */
.mk-product__media > .mk-badge--sale {
	position: absolute;
	top: 12px;
	left: 104px;
	z-index: 2;
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* 2. Pealkiri ja hind                                               */
/* ---------------------------------------------------------------- */

.mk-product__crumbs {
	font-size: 12.5px;
	color: var(--mk-muted);
}

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

.mk-product__crumbs a:hover {
	color: var(--mk-accent);
}

.mk-product__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mk-product__title {
	font-family: var(--mk-font-display);
	font-size: 32px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.mk-product__excerpt {
	font-size: var(--mk-fs-meta);
	line-height: 1.6;
	color: var(--mk-muted);
}

.mk-product__excerpt p {
	margin: 0 0 6px;
}

.mk-priceblock {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 0;
	border-top: 1px solid var(--mk-ink);
	border-bottom: 1px solid var(--mk-line);
}

.mk-priceblock__price,
.mk-priceblock__price .amount,
.mk-priceblock__price .price {
	font-family: var(--mk-font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--mk-ink);
}

.mk-priceblock__price del {
	font-size: 20px;
	font-weight: 400;
	color: var(--mk-muted);
	margin-right: 10px;
	text-decoration-line: line-through;
	text-decoration-thickness: 1.5px;
}

/* Läbikriipsutus joonistatakse <del> kirjasuuruse järgi. Ülalolev ".amount" reegel tegi
   numbri 36 px suuruseks, joon jäi aga 17 px teksti kõrgusele — peenike ja liiga kõrgel.
   Vana hinna sees pärib summa <del> suuruse, kaalu ja värvi. */
.mk-priceblock__price del .amount,
.mk-priceblock__price del .price {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
	color: inherit;
}

.mk-priceblock__price ins {
	text-decoration: none;
}

.mk-priceblock__hint {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--mk-muted);
}

/* ---------------------------------------------------------------- */
/* 3. Konfiguraator                                                  */
/* ---------------------------------------------------------------- */

.mk-configurator {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mk-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.mk-step__legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

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

.mk-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
	font-family: var(--mk-font-display);
	font-size: 12px;
	font-weight: 700;
	color: var(--mk-bg);
	background: var(--mk-ink);
	border-radius: var(--mk-radius);
}

.mk-step__title {
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 700;
}

.mk-step__hint,
.mk-step__sub,
.mk-facet__hint {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--mk-muted);
	margin: 0;
}

/* 1. samm — kangagrupi kaardid */
.mk-opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mk-opt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	cursor: pointer;
}

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

.mk-opt.is-on {
	border: 2px solid var(--mk-ink);
	padding: 11px 13px;
}

.mk-opt.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

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

.mk-opt__t {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 700;
}

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

.mk-opt__hint {
	font-size: 12.5px;
	color: var(--mk-muted);
}

.mk-opt__radio {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mk-ink);
	flex: none;
}

.mk-opt__radio--end {
	margin-left: auto;
}

/* 2. samm — kanganäidised */
.mk-swatches {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mk-swatches:empty {
	display: none;
}

/* Kollektsioonid kiipidena; korraga on nähtav ühe kollektsiooni ruudustik. */
.mk-fams {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mk-configurator .mk-fams__tab {
	min-height: 34px;
	padding: 6px 10px;
	font-size: 12.5px;
}

.mk-configurator .mk-fams__tab.mk-chip--on:hover {
	color: #fff;
}

.mk-fams__count {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.6;
}

/* Täpp kiibil, mille kollektsioonis on valitud kangas (product.js lisab
   is-current ja aria-current). Teksti värvi — paistab nii valgel kui ka
   aktiivsel (mustal) kiibil. */
.mk-fams__dot {
	display: none;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.mk-fams__tab.is-current .mk-fams__dot {
	display: inline-block;
}

.mk-swatches__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px 8px;
}

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

.mk-swatch {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	cursor: pointer;
	/* Valitud näidis keritakse kollektsiooni naastes nähtavale — natuke õhku ümber. */
	scroll-margin: 16px;
}

/* WooCommerce'i `.woocommerce img { height: auto }` on (0,1,1) — siin (0,2,0). */
.mk-swatches .mk-swatch__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-swatch:focus-within .mk-swatch__img {
	outline: 2px solid var(--mk-ink);
	outline-offset: 1px;
}

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

.mk-swatch.is-on .mk-swatch__img {
	border-color: var(--mk-ink);
	box-shadow: 0 0 0 1px var(--mk-ink);
}

.mk-swatch__name {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--mk-muted);
	overflow-wrap: anywhere;
}

.mk-wish-toggle {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mk-font-body);
	font-size: 12.5px;
	color: var(--mk-muted);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.mk-wish-toggle:hover {
	color: var(--mk-ink);
}

.mk-wish-toggle[hidden] {
	display: none;
}

.mk-swatch.is-on .mk-swatch__name {
	color: var(--mk-ink);
	font-weight: 600;
}

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

.mk-wish__label {
	font-size: var(--mk-fs-meta);
	font-weight: 500;
	color: var(--mk-ink-2);
}

.mk-wish__field {
	font-family: var(--mk-font-body);
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	resize: vertical;
}

.mk-wish__field:focus {
	outline: 2px solid var(--mk-ink);
	outline-offset: 1px;
	border-color: var(--mk-ink);
}

/* 2. samm — valitud kanga eelvaade: kate galeriis + kokkuvõttekaart */

/* Kate seisab galerii põhipildi kastil (pisipiltide tulp jääb vabaks) — täpsed
   mõõdud annab product.js, sest flexslideri vaateava kõrgus selgub alles
   piltide laadimisel. Galeriil on juba position: relative. */
.mk-fabric-preview {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
}

.mk-fabric-preview[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.mk-fabric-preview {
		animation: mk-fabric-fade var(--mk-ease, 160ms ease);
	}
}

@keyframes mk-fabric-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.mk-fabric-preview__media {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: var(--mk-media-bg);
	cursor: zoom-in;
}

/* WooCommerce'i `.woocommerce div.product div.images img { height: auto }` on
   (0,3,3) — seepärast tuleb siin kogu ahel kaasa võtta (0,5,2). Ilma selleta
   kaotab kate kõrguse ja object-fit ei tööta. Lühike valija on varuks juhuks,
   kui <body> ei kanna .woocommerce klassi. */
.mk-fabric-preview .mk-fabric-preview__img,
.woocommerce div.product div.images .mk-fabric-preview .mk-fabric-preview__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--mk-radius) var(--mk-radius) 0 0;
}

.mk-fabric-preview__bar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-top: 1px solid var(--mk-line);
	background: var(--mk-bg);
}

/* „Kangas: Austin 12 · TARM G2“ — ühel real, kitsal ribal murdub teisele. */
.mk-fabric-preview__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	min-width: 0;
}

.mk-fabric-preview__name {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-ink);
	overflow-wrap: anywhere;
}

.mk-fabric-preview__meta {
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.mk-fabric-preview__meta::before {
	content: "\00b7";
	margin-right: 6px;
}

.mk-fabric-preview__meta:empty {
	display: none;
}

.mk-fabric-preview__btns {
	display: flex;
	flex: none;
	gap: 8px;
}

/* Kokkuvõttekaart näidiste kohal. Telefonis on see ainus eelvaade, sest galerii
   jääb kerimisel kaugele ülespoole. Murdub teisele reale ainult märkuse jaoks
   (tekstiveerg kahaneb nagu enne — flex-basis 0). */
.mk-fabric-selected {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 10px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
}

.mk-fabric-selected[hidden] {
	display: none;
}

/* Näidis kaardil on nupp: puudutus avab sama suure vaate. */
.mk-swatches .mk-fabric-selected__media {
	display: block;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: zoom-in;
}

.mk-swatches .mk-fabric-selected__media[hidden] {
	display: none;
}

.mk-swatches .mk-fabric-selected__img {
	display: block;
	width: 72px;
	height: 72px;
	flex: none;
	object-fit: cover;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-fabric-selected__media:hover .mk-fabric-selected__img {
	border-color: var(--mk-ink);
}

.mk-fabric-selected__media:focus-visible .mk-fabric-selected__img {
	outline: 2px solid var(--mk-ink);
	outline-offset: 1px;
}

.mk-swatches .mk-fabric-selected__img[hidden] {
	display: none;
}

.mk-fabric-selected__text {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

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

.mk-fabric-selected__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-ink);
	overflow-wrap: anywhere;
}

.mk-fabric-selected__meta {
	font-size: var(--mk-fs-hint);
	color: var(--mk-muted);
}

.mk-fabric-selected__meta:empty {
	display: none;
}

.mk-fabric-selected__btn {
	flex: none;
	margin-left: auto;
}

/* .mk-btn on inline-flex, mistõttu brauseri oma [hidden] reegel jääb alla. */
.mk-fabric-selected__btn[hidden] {
	display: none;
}

/* „Vaatad kollektsiooni Cortes — valitud on Aspen 07“: kaardi viimane rida,
   kui ruudustik näitab teist kollektsiooni kui see, kus valitud kangas on. */
.mk-fabric-selected__note {
	flex: 1 1 100%;
	order: 1;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--mk-muted);
	overflow-wrap: anywhere;
}

.mk-fabric-selected__note[hidden] {
	display: none;
}

/* 3. samm — ülejäänud atribuudid */
.mk-step--facets {
	gap: 16px;
}

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

.mk-facet__label {
	font-family: var(--mk-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mk-muted);
}

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

.mk-nurk {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	cursor: pointer;
}

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

.mk-nurk.is-on {
	border: 2px solid var(--mk-ink);
	padding: 12px 13px;
}

.mk-nurk.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mk-nurk__plan {
	flex: none;
}

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

.mk-nurk__t {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 700;
}

.mk-nurk__sub {
	font-size: 12.5px;
	color: var(--mk-muted);
}

.mk-nurk.is-on .mk-nurk__sub {
	color: var(--mk-accent);
	font-weight: 600;
}

.mk-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mk-dot {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	font-size: var(--mk-fs-meta);
	cursor: pointer;
}

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

.mk-dot.is-on {
	border: 2px solid var(--mk-ink);
	padding: 7px 13px 7px 9px;
	font-weight: 600;
}

.mk-dot.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mk-dot__swatch {
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: var(--mk-radius);
	border: 1px solid rgba(17, 17, 17, 0.2);
	background: var(--mk-surface);
}

.mk-dot__swatch--unknown {
	background: repeating-linear-gradient(45deg, #cfcfca 0 4px, #e3e3e0 4px 8px);
}

/* Päris materjalipilt (mk_texture) arvatud värvitooni asemel — pisut suurem,
   muidu ei loe puidusüüd välja. Pildi annab reasisene background-image. */
.mk-dot__swatch--texture {
	width: 22px;
	height: 22px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-color: rgba(17, 17, 17, 0.28);
}

/* Sama täpp ka kiibi ees (nt "Viimistlus Timo"). */
.mk-configurator .mk-chip .mk-dot__swatch {
	margin-right: 2px;
}

.mk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mk-configurator .mk-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	cursor: pointer;
}

.mk-configurator .mk-chip.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mk-configurator__reset {
	margin: 0;
	font-size: 12.5px;
}

.mk-configurator__reset .reset_variations {
	color: var(--mk-muted);
	text-decoration: underline;
}

/* Valiku hinnavahe ("+40 €"): omanik ei märganud, et eritoon on 10 % kallim,
   enne kui ta selle valis. Vihje on väike, aga loetav ja läheb reavahetusel
   valiku nime alla, mitte kiibist välja. */
.mk-facet__plus {
	flex: none;
	margin-left: 2px;
	font-family: var(--mk-font-display);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--mk-muted);
}

.mk-configurator .mk-chip .mk-facet__plus,
.mk-configurator .mk-dot .mk-facet__plus {
	padding: 3px 6px;
	border-radius: 999px;
	background: var(--mk-surface);
}

/* ---------------------------------------------------------------- */
/* 4. "Sinu valik" ja peamine nupp                                   */
/* ---------------------------------------------------------------- */

.mk-summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
}

.mk-summary__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.mk-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.mk-summary__k {
	font-size: 13.5px;
	color: var(--mk-muted);
	margin: 0;
}

.mk-summary__v {
	font-size: 13.5px;
	color: var(--mk-ink);
	margin: 0;
	text-align: right;
}

.mk-summary__row.is-set .mk-summary__v {
	font-weight: 600;
}

.mk-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--mk-line);
}

.mk-summary__total-k {
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 700;
}

.mk-summary__total-v {
	font-family: var(--mk-font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mk-product .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

/* Hinda näitab "Sinu valik" kaart, mitte WC vaikimisi plokk. */
.mk-product .woocommerce-variation-price,
.mk-product .woocommerce-variation-availability {
	display: none;
}

.mk-product .woocommerce-variation-description {
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.mk-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.mk-product .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 60px;
	border: 1px solid var(--mk-ink);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	overflow: hidden;
}

.mk-product .quantity .qty {
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 600;
	width: 64px;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
	text-align: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mk-ink);
}

.mk-product .mk-qty__btn {
	width: 48px;
	height: 100%;
}

.mk-product .single_add_to_cart_button {
	flex: 1 1 320px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 60px;
	padding: 0 24px;
	font-family: var(--mk-font-display);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--mk-accent-ink);
	background: var(--mk-accent);
	border: 1px solid transparent;
	border-radius: var(--mk-radius);
	cursor: pointer;
}

.mk-product .single_add_to_cart_button:hover {
	background: var(--mk-accent-hover);
	color: var(--mk-accent-ink);
}

/* Keelatud oleku värvid tulevad failist woo.css (WC enda valijaahelaga,
   neutraalne hall) — siin ainult kursor, et kaks kohta sama nupu pärast ei
   võitleks. */
.mk-product .single_add_to_cart_button.disabled,
.mk-product .single_add_to_cart_button:disabled {
	cursor: not-allowed;
}

.mk-cart-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.mk-cart-form .mk-wish--simple {
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------- */
/* 5. Teisesed nupud ja "Vastame tööpäeviti"                         */
/* ---------------------------------------------------------------- */

/* Teisene tegevus on üks: "Küsi selle toote kohta" (telefoninuppu enam ei ole,
   number seisab ainult jaluses). Üks veerg annab nupule kogu veeru laiuse ja
   jätab ruumi ka teisele nupule, kui laiendus selle juurde lisab. */
.mk-actions__secondary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.mk-actions__secondary .mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	text-align: center;
}

.mk-product__nopay {
	margin: 0;
	font-size: 12.5px;
	color: var(--mk-muted);
}

/* Järelmaksu vihje tellimisnupu all: vaikne rida, mitte kast ega logo.
   Teine lause on reklaamiseadusest ja peab olema sama suur kui esimene. */
.mk-esto-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--mk-muted);
}

.mk-esto-hint a {
	color: var(--mk-ink-2);
	text-decoration: underline;
}

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

.mk-esto-hint span {
	display: inline;
}

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

.mk-answer__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--mk-ink-2);
}

/* Reas on ainus link "Kirjuta meile" — allajoon eristab selle lausest. */
.mk-answer__row a {
	color: var(--mk-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

/* ---------------------------------------------------------------- */
/* 6. Virnastatud sektsioonid                                        */
/* ---------------------------------------------------------------- */

.mk-product__sections {
	background: var(--mk-surface);
	border-top: 1px solid var(--mk-line);
	border-bottom: 1px solid var(--mk-line);
	padding: 48px 0 56px;
	/* Turvavõrk migreeritud kirjelduse laiadele plokkidele (vt theme.css). */
	overflow-x: hidden;
}

/* NB: .mk-section ja .mk-prose on globaalsed klassid (theme.css). Siinsed
   reeglid kehtivad ainult tootelehe virnastatud plokkidele, muidu saaks
   näiteks usaldusriba tootelehel vale äärise ja vahed. */
.mk-product__sections .mk-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 0;
	border-top: 1px solid var(--mk-line);
}

.mk-product__sections .mk-section:first-child {
	border-top: 0;
	padding-top: 0;
}

.mk-product__sections .mk-section__title {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
}

.mk-product .mk-prose {
	font-size: var(--mk-fs-body);
	line-height: 1.65;
	color: var(--mk-ink-2);
	max-width: 76ch;
}

.mk-product .mk-prose p {
	margin: 0 0 12px;
}

.mk-product .mk-prose ul,
.mk-product .mk-prose ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.mk-product .mk-prose img {
	max-width: 100%;
	height: auto;
}

/* Migreeritud kirjeldus (#kirjeldus): vanast poest tuli sisu reasiseste
   style="" atribuutidega — võõras kirjatüüp, 12 px kiri, hall värv, oma
   reavahe. Reasisest stiili ei võida ükski valija täpsusega, seega on see
   ainus koht teemas, kus !important on lubatud (vt ka theme.css laiuse
   turvavõrk). Kogu kirjelduse sisu pärib konteineri tüpograafia; link on
   eraldi, et theme.css aktsentvärv alles jääks. */
.mk-product #kirjeldus .mk-prose *:not(a) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.mk-product #kirjeldus .mk-prose a {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Pealkirjad kirjelduse sees on ühtlaselt 18px/700 — migreeritud sisus on
   segamini <h1>…<h4> ja nende päris suurused lõhuksid lehe hierarhia. */
.mk-product #kirjeldus .mk-prose :is(h1, h2, h3, h4, h5, h6) {
	margin: 24px 0 8px;
	font-family: var(--mk-font-display, sans-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--mk-ink, #111) !important;
}

/* Loendid tavaliste täppidega ka siis, kui vana märgendus need maha võttis. */
.mk-product #kirjeldus .mk-prose ul,
.mk-product #kirjeldus .mk-prose ol {
	padding-left: 20px !important;
	list-style: revert !important;
}

.mk-product #kirjeldus .mk-prose img {
	max-width: 100% !important;
	height: auto !important;
}

/* Imporditud kirjelduse alguses on märgis "<!-- mk-desc v1 -->", mille wpautop mähib
   tühja <p> sisse — see lisas iga kirjelduse ette 12 px tühja ruumi. :empty kehtib ka
   siis, kui elemendis on ainult kommentaar. */
.mk-product #kirjeldus .mk-prose p:empty {
	display: none;
}

/* Plugina (MK Pood → Kirjeldused) imporditud ühtlase kujuga kirjeldus:
   <p> sissejuhatus, <h3>Mõõdud</h3> + dl.mk-dims, <h3>Omadused</h3> + ul.mk-feats,
   p.mk-note märkused. Mõõdud kahes veerus nagu "Mõõdud ja omadused" plokk. */
.mk-product #kirjeldus .mk-prose .mk-dims {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 32px;
	margin: 0 0 8px;
}

.mk-product #kirjeldus .mk-prose .mk-dims > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--mk-line, #e3e3e0);
	padding-bottom: 6px;
}

.mk-product #kirjeldus .mk-prose .mk-dims dt {
	margin: 0;
	font-size: 14px;
	color: var(--mk-muted, #5d5d58);
}

.mk-product #kirjeldus .mk-prose .mk-dims dd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-ink, #111);
	text-align: right;
	white-space: nowrap;
}

.mk-product #kirjeldus .mk-prose .mk-feats {
	margin: 0 0 8px;
}

.mk-product #kirjeldus .mk-prose .mk-feats li {
	margin-bottom: 4px;
}

.mk-product #kirjeldus .mk-prose .mk-note {
	margin: 12px 0 0;
	padding-left: 12px;
	border-left: 3px solid var(--mk-accent, #d7182a);
	color: var(--mk-ink-2, #3b3b37);
}

.mk-product #kirjeldus .mk-prose .mk-note + .mk-note {
	margin-top: 6px;
}

@media (max-width: 560px) {
	.mk-product #kirjeldus .mk-prose .mk-dims {
		grid-template-columns: minmax(0, 1fr);
	}

	.mk-product #kirjeldus .mk-prose .mk-dims dd {
		white-space: normal;
	}
}

.mk-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
	margin: 0;
}

.mk-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--mk-line);
	padding-bottom: 8px;
}

.mk-spec__k {
	font-size: 13.5px;
	color: var(--mk-muted);
	margin: 0;
}

.mk-spec__v {
	font-size: 13.5px;
	color: var(--mk-ink);
	margin: 0;
	text-align: right;
}

/* ---------------------------------------------------------------- */
/* Tootja ja tooteohutus (GPSR, EL 2023/988 art 19)                  */
/*                                                                   */
/* Kokkuklapitav plokk lehe sisu lõpus: seadus nõuab tootja nime ja  */
/* aadressi, turundus ei taha teda esile tõsta. Vaikne nagu muudki   */
/* lehe lõpu plokid; sulgeja kõrgus ≥ 44 px (puutesihtmärk).         */
/* ---------------------------------------------------------------- */

.mk-gpsr {
	margin: 24px 0 0;
	border-top: 1px solid var(--mk-line);
}

.mk-gpsr__summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-family: var(--mk-font-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mk-muted);
	cursor: pointer;
	list-style: revert;
}

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

.mk-gpsr[open] .mk-gpsr__summary {
	color: var(--mk-ink);
}

.mk-gpsr__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 16px;
}

.mk-gpsr__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.mk-gpsr__k {
	flex: none;
	min-width: 120px;
	color: var(--mk-muted);
}

.mk-gpsr__v {
	flex: 1 1 220px;
	color: var(--mk-ink-2);
	overflow-wrap: anywhere;
}

.mk-gpsr__v a {
	color: var(--mk-ink-2);
	text-decoration: underline;
}

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

/* Ainult toimetajale: tootja andmed puuduvad. */
.mk-gpsr--empty {
	display: block;
	margin: 24px 0 0;
	padding: 10px 12px;
	border: 1px dashed var(--mk-line-2);
	border-radius: var(--mk-radius);
	font-size: 12.5px;
	color: var(--mk-muted);
}

/* Nummerdatud sammud: theme.css lähtestab loendid (list-style: none), seega
   numbrid tulevad loendurist — muidu jäi järjend ilma numbriteta taandega reaks. */
.mk-how {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-left: 0;
	counter-reset: mk-how;
}

.mk-how__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 22px;
	color: var(--mk-ink-2);
	counter-increment: mk-how;
}

.mk-how__item::before {
	content: counter(mk-how);
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mk-ink, #111);
	color: #fff;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
}

/* ---------------------------------------------------------------- */
/* 7. Seotud tooted                                                  */
/* ---------------------------------------------------------------- */

.mk-product__related {
	padding-top: 56px;
	padding-bottom: 64px;
}

.mk-product__related .related > h2,
.mk-product__related .up-sells > h2 {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mk-ink);
}

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

.mk-product__related ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	list-style: none;
}

/* ---------------------------------------------------------------- */
/* 8. Kitsamad ekraanid                                              */
/* ---------------------------------------------------------------- */

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

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

@media (max-width: 900px) {
	.mk-product__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: 20px;
		padding-bottom: 40px;
	}

	.mk-product__title {
		font-size: 26px;
	}

	.mk-priceblock__price,
	.mk-priceblock__price .amount,
	.mk-priceblock__price .price {
		font-size: 30px;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
	}

	.mk-product__media > .mk-badge--sale {
		left: 12px;
	}

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

	.mk-product__sections {
		padding: 32px 0 40px;
	}

	.mk-product__related {
		padding-top: 40px;
		padding-bottom: 48px;
	}

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

	/* Puutesihtmärk vähemalt 44 px — ka tahvlil, mitte ainult telefonis. */
	.mk-configurator .mk-fams__tab {
		min-height: 44px;
		padding: 8px 12px;
	}
}

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

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

	.mk-product .quantity {
		height: 56px;
	}

	.mk-product .single_add_to_cart_button {
		min-height: 56px;
	}

	.mk-product .single_add_to_cart_button {
		flex: 1 1 100%;
		font-size: 14.5px;
	}

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

/* ---------------------------------------------------------------- */
/* 9. Suurendusvaade                                                 */
/*                                                                   */
/* Teema enda <dialog> (assets/js/lightbox.js) elab nüüd omaette     */
/* failis assets/css/lightbox.css: sama komponenti kasutab ka        */
/* ostukorv („Vaata suuremalt“ kangavaliku juures), kus tootelehe    */
/* stiile ei laadita. Kangaste lehel on pluginal oma märgendus       */
/* (fabrics-page.css).                                              */
/* ---------------------------------------------------------------- */

/* Telefonis galeriikatet ei ole — eelvaate kannab "Valitud kangas" kaart. */
@media (max-width: 900px) {
	.mk-fabric-preview {
		display: none;
	}

	/* Puutesihtmärk vähemalt 44 px. */
	.mk-fabric-selected__btn {
		height: 44px;
	}

	/* Alumine sakiriba (60 px) ei tohi nähtavale keritud näidist katta. */
	.mk-swatch {
		scroll-margin-bottom: calc(var(--mk-tabbar-h) + 16px);
	}
}

@media (max-width: 560px) {
	/* Märkus kohe nime all, nupp täislaiuses viimasena. */
	.mk-fabric-selected__btn {
		order: 2;
		width: 100%;
		height: var(--mk-control-h);
		margin-left: 0;
	}
}

/* Tootmisest maas (plugin MK_Pood_Discontinued): hinna ja tellimisvormi asemel
   teade ja sama kategooria link. Leht jääb Google'i külastajatele avatuks. */
.mk-discontinued {
	display: grid;
	gap: var(--mk-s2);
	margin: var(--mk-s3) 0;
	padding: var(--mk-s3);
	border: 1px solid var(--mk-line);
	border-left: 4px solid var(--mk-accent);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-discontinued__title {
	font-family: var(--mk-font-display);
	font-size: 18px;
	line-height: 1.3;
}

.mk-discontinued__text {
	margin: 0;
	color: var(--mk-muted);
}

.mk-discontinued__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-s2);
}