/*
 * MK Kataloog — WooCommerce'i üldstiilid.
 * Katab nupud, vormid, teated, ostukorvi ja kassa tabelid ning konto lehed.
 * Kategoorialehe ja tootelehe stiilid on failides woo-archive.css ja
 * woo-product.css.
 */

/* =========================================================================
 * 1. Mähis ja pealkirjad
 * ====================================================================== */

.mk-woo {
	padding-block: var(--mk-s3) var(--mk-s6);
}

.woocommerce-products-header {
	margin-bottom: var(--mk-s3);
}

.woocommerce-products-header__title,
.mk-woo .page-title {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h1);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.022em;
}

.term-description {
	max-width: 760px;
	font-size: var(--mk-fs-body);
	line-height: 1.6;
	color: var(--mk-ink-2);
}

/* Vaikimisi WooCommerce'i leivapuru kasutab teema klassi. */
.woocommerce-breadcrumb {
	font-size: 12.5px;
	color: var(--mk-muted);
}

/* =========================================================================
 * 2. Nupud
 * ====================================================================== */

/* WooCommerce'i nupuvärvid tulevad failist woocommerce.css valijaahelatega
   `.woocommerce #respond input#submit`, `.woocommerce a.button`,
   `.woocommerce button.button`, `.woocommerce input.button` ja nende
   `.alt`-variantidega. Kordame siin täpselt sama ahelat: täpsus on võrdne ja
   teema laaditakse hiljem, seega võidab teema ilma !important-ita. */

.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--mk-control-h);
	padding: 14px 24px;
	border: 1px solid var(--mk-ink);
	border-radius: var(--mk-radius);
	background-color: var(--mk-bg);
	background-image: none;
	color: var(--mk-ink);
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
}

/* Peamised tegevused: aktsentvärv. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce button.button#place_order,
.woocommerce input.button#place_order {
	border-color: transparent;
	background-color: var(--mk-accent);
	color: var(--mk-accent-ink);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce button.button#place_order:hover,
.woocommerce input.button#place_order:hover {
	background-color: var(--mk-accent-hover);
	border-color: transparent;
	color: var(--mk-accent-ink);
}

/* Keelatud olek (sh WC klass .wc-variation-selection-needed, mille lisab
   add-to-cart-variation.js, kuni kõik variatsiooni valikud on tegemata):
   neutraalne hall, mitte poolläbipaistev aktsent. Kahvatupunane nupp nägi
   välja nagu katkine tegevusnupp; hall ütleb selgelt "veel ei saa vajutada".
   Aktsentvärv jääb ainult lubatud olekule. */
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.wc-variation-selection-needed,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt.wc-variation-selection-needed,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled]:hover {
	background-color: var(--mk-line-2);
	border-color: var(--mk-line-2);
	color: var(--mk-muted);
	opacity: 1;
	cursor: not-allowed;
}

.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce button.button.single_add_to_cart_button,
.woocommerce input.button.single_add_to_cart_button {
	min-height: var(--mk-control-h-lg);
	font-size: 15px;
}

/* =========================================================================
 * 3. Vormid
 * ====================================================================== */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--mk-s2);
	padding: 0;
}

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

.woocommerce form .form-row .required {
	color: var(--mk-accent);
	text-decoration: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.mk-woo select {
	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: 14px;
	line-height: 1.4;
}

.woocommerce textarea {
	min-height: 110px;
	resize: vertical;
}

.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	border-color: var(--mk-ink);
	outline: none;
}

.woocommerce .select2-container .select2-selection--single {
	height: var(--mk-control-h);
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: var(--mk-control-h);
	padding-left: 12px;
}

/* Kogus: [−] [ 1 ] [+] ühes raamis (nupud: inc/woocommerce.php, skript:
   assets/js/quantity.js). Brauseri enda nooled on peidetud. */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	min-height: var(--mk-control-h);
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	overflow: hidden;
}

.woocommerce .quantity .qty {
	width: 56px;
	min-height: var(--mk-control-h);
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity .qty:focus-visible {
	outline-offset: -2px;
}

.mk-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mk-ink);
	cursor: pointer;
}

.mk-qty__btn:hover {
	background: var(--mk-bg);
}

.mk-qty__btn:focus-visible {
	outline-offset: -2px;
}

.mk-qty__btn[disabled] {
	opacity: 0.3;
	cursor: default;
}

.mk-qty__btn svg {
	width: 16px;
	height: 16px;
}

/* =========================================================================
 * 4. Teated
 * ====================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 var(--mk-s3);
	padding: 14px 16px;
	border: 1px solid var(--mk-line);
	border-left: 3px solid var(--mk-ink);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	color: var(--mk-ink);
	font-size: 14px;
	list-style: none;
}

/* WooCommerce'i woocommerce.css lisab teatele ikooni pseudoelemendina
   (`font-family: WooCommerce`, `position: absolute`, `left: 1.5em`). See
   eeldab WC enda 3.5em vasakut polstrit; teemal on oma vasak aktsentriba ja
   väiksem polster, nii et ikoon istus teksti esimeste tähtede peal ("Sinu
   ostukorv on praegu tühi."). Valijad on WC omadega võrdse täpsusega ja
   woo.css laaditakse hiljem, seega !important ei ole vaja; .woocommerce- ja
   .mk-notices-eesliitega variandid katavad ka mähitud teated. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.mk-notices .woocommerce-message::before,
.mk-notices .woocommerce-info::before,
.mk-notices .woocommerce-error::before {
	content: none;
	display: none;
}

/* WC lisab samale teatele ka ujumise puhastaja (`::after { content: " ";
   display: table; clear: both }`). Teema teade on flex-konteiner, kus ujumist
   ei ole, aga tühi pseudoelement jääks omaette flex-elemendiks ja sööks rea
   lõpust 12 px vahe ära. Valijad on WC omadega võrdse täpsusega (WC omad on
   samuti eesliiteta) ja woo.css laaditakse hiljem. */
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	content: none;
	display: none;
}

.woocommerce-message {
	border-left-color: var(--mk-ink);
}

.woocommerce-info {
	border-left-color: var(--mk-muted);
}

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

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	min-height: var(--mk-control-h-sm);
	padding: 0 16px;
	font-size: 13px;
}

.woocommerce-error li {
	margin: 0;
}

/* Tootelehe teated trükib teema üks kord (mk_product_print_notices).
   Tühi mähis ei tohi paigutusse auku jätta. */
.woocommerce-notices-wrapper:empty,
.mk-notices:empty {
	display: none;
}

/* Tootelehe „lisatud tellimusse“: sisu laiuses (.mk-container mähis), ümara
   linnukesega ja aktsentvärvi nupuga (tagasiside 28.10.2026: teade oli servast
   servani). Linnuke on oma pseudoelement — WC fondi-ikooni reeglid eespool
   võtsid ::before'i maha, siin pannakse see tagasi staatilisena. */
.mk-notices {
	margin-top: var(--mk-s3);
}

.mk-notices .woocommerce-message {
	padding: 14px 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}

.mk-notices .woocommerce-message::before {
	content: "";
	display: inline-block;
	position: static;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 50%;
	background: var(--mk-ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 14px 14px no-repeat;
}

.mk-notices .woocommerce-message .button {
	border-color: var(--mk-accent);
	background: var(--mk-accent);
	color: #fff;
}

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

/* =========================================================================
 * 5. Ostukorv
 * ====================================================================== */

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--mk-s3);
	border: 1px solid var(--mk-line);
	border-collapse: collapse;
	border-radius: var(--mk-radius);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--mk-line);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-family: var(--mk-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mk-muted);
	background: var(--mk-surface);
}

.woocommerce table.shop_table td.product-name a {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h3);
	font-weight: 600;
}

/* Pisipilt on toonitud alusel ja täies ulatuses näha (object-fit: contain) —
   sama keel nagu kataloogikaardil. Mõõt 96 px: omanik peab kalli tellimuse
   juures toote ära tundma, mitte oletama. */
.woocommerce table.shop_table .product-thumbnail img {
	width: 96px;
	height: 96px;
	padding: 6px;
	box-sizing: border-box;
	border-radius: var(--mk-radius);
	object-fit: contain;
	background: var(--mk-media-bg);
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-total {
	font-family: var(--mk-font-display);
	font-weight: 700;
	white-space: nowrap;
}

.woocommerce table.shop_table .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	color: var(--mk-muted);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.shop_table .product-remove a.remove:hover {
	border-color: var(--mk-accent);
	background: var(--mk-bg);
	color: var(--mk-accent);
}

.woocommerce .cart .variation,
.woocommerce .cart-item-meta,
.woocommerce table.shop_table dl.variation {
	margin: 6px 0 0;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.woocommerce table.shop_table dl.variation dd p {
	display: inline;
	margin: 0;
}

.woocommerce table.shop_table dl.variation dd::after {
	content: "";
	display: block;
}

/* =========================================================================
 * 5.1 „Sinu valikud“ — valik koos pildiga
 *
 * Märgendus: woocommerce/cart/cart-item-data.php (ostukorv ja kassa) ning
 * inc/woocommerce-cart.php (tellimuse leht, konto). Plokk elab toote nime all
 * ostukorvi real: silt vasakul, väärtus koos pildiga paremal.
 * ====================================================================== */

.mk-choices {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.mk-choices__head {
	display: block;
	margin-bottom: 8px;
	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);
}

.woocommerce table.shop_table .mk-choices__list {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: 10px 16px;
	margin: 0;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.woocommerce table.shop_table .mk-choices__list dt {
	display: block;
	margin: 0;
	font-weight: 400;
	color: var(--mk-muted);
}

.woocommerce table.shop_table .mk-choices__list dd {
	display: block;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--mk-ink);
	overflow-wrap: anywhere;
}

/* Üks valik: pilt + tekst. */
.mk-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

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

.mk-choice__name {
	font-weight: 500;
	color: var(--mk-ink);
}

.mk-choice__meta {
	font-size: var(--mk-fs-hint);
	font-weight: 400;
	color: var(--mk-muted);
}

/* Kanganäidis. cover, mitte contain: näidis ongi materjali pind. */
.mk-choice__media {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-media-bg);
	overflow: hidden;
	cursor: zoom-in;
}

/* NB: WooCommerce annab ostukorvi ja kassa tabelis igale pildile
   `width: 32px` (`.woocommerce-cart table.cart img`, täpsus 0,2,2) — meie
   valija peab olema tugevam, muidu kahaneb näidis 32 px-le. */
.woocommerce table.shop_table .mk-choice__media img.mk-choice__swatch,
.woocommerce .mk-choice__media img.mk-choice__swatch,
.mk-choice__media .mk-choice__swatch {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Suurendusviide: ilma JS-ita tavaline link suurele pildile, JS-iga avaneb
   teema suurendusvaade. Puutesihtmärk ≥ 44 px. */
.woocommerce .mk-choice__zoom {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: -10px;
	margin-bottom: -10px;
	font-size: var(--mk-fs-hint);
	font-weight: 500;
	color: var(--mk-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce .mk-choice__zoom:hover {
	color: var(--mk-accent);
}

.mk-choice__zoom .mk-ico {
	flex: none;
	width: 16px;
	height: 16px;
}

/* Värvitäpp / materjalikild — sama keel nagu tootelehe valikutel. */
.mk-choice__dot {
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
	border: 1px solid var(--mk-line-2);
	border-radius: 999px;
	background: var(--mk-surface);
	background-size: cover;
	background-position: center;
}

/* Nurga plaanijoonis (sama SVG, mis tootelehel). */
.mk-choice--corner .mk-nurk__plan {
	flex: none;
	width: 44px;
	height: 32px;
	color: var(--mk-ink-2);
}

/* „Muuda valikuid“ — tooteleht samade valikutega ette valitud.
   Plokitasandi paindekast, muidu jääks link tootenimega ühele reale. */
.woocommerce table.shop_table td.product-name a.mk-choices__edit {
	display: flex;
	align-items: center;
	width: fit-content;
	min-height: 32px;
	margin-top: 6px;
	font-family: var(--mk-font-body);
	font-size: var(--mk-fs-hint);
	font-weight: 500;
	color: var(--mk-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce table.shop_table td.product-name a.mk-choices__edit:hover {
	color: var(--mk-accent);
}

/* --- Kassa tellimuse ülevaade: sama plokk kompaktsena --- */
.woocommerce table.shop_table td.product-name img.mk-review-photo,
.woocommerce img.mk-review-photo {
	float: left;
	width: 48px;
	height: 48px;
	max-width: none;
	margin: 0 12px 6px 0;
	padding: 3px;
	box-sizing: border-box;
	border-radius: var(--mk-radius);
	object-fit: contain;
	background: var(--mk-media-bg);
}

.mk-choices--compact {
	clear: both;
	margin-top: 8px;
	padding: 8px 10px;
}

.mk-choices--compact .mk-choices__head {
	margin-bottom: 6px;
}

.woocommerce table.shop_table .mk-choices--compact .mk-choices__list {
	gap: 6px 12px;
}

.woocommerce table.shop_table .mk-choices--compact .mk-choices__list dd {
	font-size: var(--mk-fs-meta);
}

.mk-choices--compact .mk-choice__media {
	width: 32px;
	height: 32px;
}

.mk-choices--compact .mk-choice__dot {
	width: 18px;
	height: 18px;
}

.mk-choices--compact .mk-choice--corner .mk-nurk__plan {
	width: 32px;
	height: 24px;
}

/* --- Tellimuse leht ja konto --- */
.woocommerce table.shop_table td.product-name img.mk-order-photo,
.woocommerce img.mk-order-photo {
	float: left;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: 0 14px 8px 0;
	padding: 4px;
	box-sizing: border-box;
	border-radius: var(--mk-radius);
	object-fit: contain;
	background: var(--mk-media-bg);
}

.woocommerce table.shop_table td.product-name ul.wc-item-meta {
	clear: both;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
}

.woocommerce table.shop_table td.product-name ul.wc-item-meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.woocommerce table.shop_table td.product-name ul.wc-item-meta li p {
	display: inline;
	margin: 0;
}

.woocommerce table.shop_table td.product-name ul.wc-item-meta .mk-choice {
	gap: 8px;
}

/* Tellimuse lehel on näidis väiksem kui ostukorvis (rida on tihedam). */
.woocommerce table.shop_table ul.wc-item-meta img.mk-choice__swatch,
.woocommerce ul.wc-item-meta img.mk-choice__swatch {
	flex: none;
	width: 40px;
	height: 40px;
	max-width: none;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	object-fit: cover;
}

/* Nurgajoonis tellimuse lehel: reasisest SVG-d wp_kses_post läbi ei lase,
   seepärast tuleb joonis CSS-ist. Sama pilt, mis tootelehel. */
.mk-choice__corner {
	flex: none;
	display: block;
	width: 44px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.mk-choice__corner--vasak {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 64' fill='none' stroke='%233b3b37' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 8H78V34H34V54H6Z' fill='%23f4f4f2'/%3E%3Cpath d='M6 16H78'/%3E%3Cpath d='M34 16V54'/%3E%3Cpath d='M56 16V34'/%3E%3C/svg%3E");
}

.mk-choice__corner--parem {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 64' fill='none' stroke='%233b3b37' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 8H78V54H50V34H6Z' fill='%23f4f4f2'/%3E%3Cpath d='M6 16H78'/%3E%3Cpath d='M50 16V54'/%3E%3Cpath d='M28 16V34'/%3E%3C/svg%3E");
}

.woocommerce .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-right: auto;
}

.woocommerce .coupon .input-text {
	width: 220px;
}

.woocommerce .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 440px;
	margin-left: auto;
	padding: var(--mk-s3);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.woocommerce .cart_totals h2 {
	margin-bottom: var(--mk-s2);
	font-size: var(--mk-fs-h3);
}

.woocommerce .cart_totals table.shop_table {
	margin: 0;
	border: 0;
	background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 10px 0;
	background: transparent;
	border-bottom: 1px solid var(--mk-line);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	font-family: var(--mk-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--mk-ink);
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce .wc-proceed-to-checkout {
	margin-top: var(--mk-s2);
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
	width: 100%;
	min-height: var(--mk-control-h-lg);
	font-size: 15px;
}

.woocommerce .cart-empty,
.woocommerce .return-to-shop {
	margin-bottom: var(--mk-s2);
}

/* =========================================================================
 * 6. Kassa
 * ====================================================================== */

/* NB: lühikood [woocommerce_checkout] renderdub tavalisel lehel (page.php),
   kus .mk-woo mähist ei ole — seepärast ei tohi võrgustik sellest sõltuda. */
/* Read: 1 = veateated (WC prepend'ib need vormi algusse, muidu tühi), 2 = tellija
   andmed + pealkiri „Sinu tellimus“, 3 = kokkuvõte. Tellija andmed on vasakul
   ridade 2–3 kõrgusel; ilma kindlate ridadeta läks kokkuvõte automaatpaigutusega
   tellija andmete ALLA (mõõdetud 28.10.2026: tabel 940 px pealkirjast allpool).
   Reavahe on 0, et kokkuvõte seisaks kohe pealkirja all (pealkirjal on oma
   alumine vahe); 1fr viimasel real, et pikem vasak veerg ei venitaks pealkirja
   rida. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	grid-template-rows: auto auto 1fr;
	gap: 0 var(--mk-s5);
	align-items: start;
}

.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: var(--mk-s3);
}

/* WooCommerce ujutab tellija andmete sees col-1 (arve) ja col-2 (märkused) 48 %
   kõrvuti — siin on need üks lai veerg üksteise all, muidu olid väljad kitsad ja
   märkuste kast hõljus keskel. */
.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 2 / span 2;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin-bottom: var(--mk-s2);
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 2;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 3;
}

.woocommerce-checkout #order_review {
	padding: var(--mk-s3);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	background: transparent;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 10px 0;
	background: transparent;
}

/* Kassa on lehe sisus (.mk-prose → overflow-wrap: anywhere pärandub), mistõttu
   kitsas veerupäis „Vahesumma“ murdus tähthaaval („VAHESUM / MA“, 28.10.2026).
   Päised ühel real; lahtrite sisu (toote nimi) murdub endiselt. */
.woocommerce-checkout #order_review table.shop_table th {
	white-space: nowrap;
	overflow-wrap: normal;
}

.woocommerce-checkout .woocommerce-checkout-payment {
	margin-top: var(--mk-s2);
	border: 0;
	background: transparent;
}

.woocommerce-checkout ul.wc_payment_methods {
	margin: 0 0 var(--mk-s2);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--mk-line);
}

.woocommerce-checkout ul.wc_payment_methods li {
	margin-bottom: 10px;
}

.woocommerce-checkout .payment_box {
	margin: 8px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	font-size: var(--mk-fs-meta);
	color: var(--mk-ink-2);
}

/* Kui aktiivne on ainult üks (päringu)makseviis, on loendi pealkiri üleliigne.
   Klassi lisab mk-pood (MK_Pood_Request_Gateway::body_class). Raadionupu ja
   sildi peitmine jääb plugina enda reasisesele CSS-ile, et kaks kohta ei
   võitleks sama elemendi pärast. */
.mk-paring-only .woocommerce-checkout-payment > h3 {
	display: none;
}

/* Kassa ja ostukorvi teated: pealkiri eraldi realt, selgitus väiksemalt.
   .woocommerce-info on flex-konteiner, ilma selleta jõuaks kaks lauset
   kõrvuti ühele reale. */
.mk-notice {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

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

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

.mk-cart-intro {
	font-size: var(--mk-fs-body);
	color: var(--mk-ink-2);
	margin-bottom: var(--mk-s3);
}

.mk-cart-note,
.mk-order-note td {
	font-size: var(--mk-fs-hint);
	color: var(--mk-muted);
}

.woocommerce-checkout .form-row.place-order {
	margin: 0;
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: var(--mk-control-h-lg);
	font-size: 15px;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	font-size: var(--mk-fs-hint);
	color: var(--mk-muted);
}

/* =========================================================================
 * 6.1 Klassikaline ostukorv ja kassa ([woocommerce_cart] / [woocommerce_checkout])
 *
 * Lühikoodid renderduvad tavalisel lehel (page.php): ümber ei ole .mk-woo
 * mähist ja sisuveerg on kitsas (.mk-page--narrow). Siin anname neile
 * B-süsteemi mõõdud: täislaiuses veerg, 44 px väljad, 2 px raadius.
 * ====================================================================== */

.woocommerce-cart .mk-page--narrow,
.woocommerce-checkout .mk-page--narrow,
.woocommerce-order-received .mk-page--narrow {
	max-width: calc(var(--mk-content) + var(--mk-gutter) * 2);
}

/* B-süsteemi juhtelemendi kõrgus ostukorvis ja kassas. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	--mk-control-h: 44px;
}

/* 96 px pilt + lahtri 2 × 16 px polster. Kitsam lahter kärbiks pildi:
   teema pildilähtestus annab igale <img> max-width: 100% ja pilt kahaneks
   lahtri sisulaiuseks (mõõdetud: 64 px). */
.woocommerce table.shop_table.cart td.product-thumbnail {
	width: 128px;
}

.woocommerce table.shop_table.cart td.product-remove {
	width: 48px;
	text-align: center;
}

.woocommerce table.shop_table.cart td.product-quantity .qty {
	width: 84px;
}

/* NB: `.woocommerce .actions { display: flex }` (ülal) võtaks selle lahtri
   tabelipaigutusest välja ja lahter kahaneks esimese veeru laiuseks —
   mõõdetud 1280 px juures: 116 px lai, sooduskoodi väli 80 px. Seepärast
   jääb lahter tabelilahtriks ja paindekast on sooduskoodil endal. */
.woocommerce table.shop_table.cart td.actions {
	display: table-cell;
	padding-top: var(--mk-s2);
	border-bottom: 0;
}

.woocommerce table.shop_table.cart td.actions .coupon {
	display: inline-flex;
	flex-wrap: nowrap;
	width: auto;
	max-width: 100%;
	margin: 0;
	float: left;
}

/* WooCommerce'i woocommerce-layout.css annab siin väljale 80 px. */
.woocommerce table.shop_table.cart td.actions .coupon .input-text {
	width: 220px;
}

/* Tellija andmed: ees- ja perekonnanimi kõrvuti, ülejäänud üle laiuse. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--mk-s2);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	grid-column: span 1;
}

.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: var(--mk-s3);
	padding-top: var(--mk-s3);
	border-top: 1px solid var(--mk-line);
}

/* Tarne on poes välja lülitatud: WooCommerce trükib tühja tarneväljade ploki,
   mis jättis arve väljade ja märkuste vahele teise joone ja 48 px tühja. */
.woocommerce-checkout .woocommerce-shipping-fields:empty,
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(*)) {
	display: none;
}

/* Makseviisi kast (#payment). Ainsa makseviisi puhul peidab plugin raadionupu
   ja sildi (body-klass .mk-paring-only), alles jääb ainult selgitus. */
.woocommerce-checkout #payment {
	border: 0;
	border-radius: var(--mk-radius);
	background: transparent;
}

.woocommerce-checkout #payment div.form-row {
	padding: 0;
}

.woocommerce-checkout #payment ul.wc_payment_methods li label {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-ink);
}

.mk-paring-only .woocommerce-checkout-payment ul.wc_payment_methods {
	border-bottom: 0;
	margin-bottom: 0;
}

/* =========================================================================
 * 7. Tellimuse kinnitus ja konto
 * ====================================================================== */

.woocommerce-order,
.woocommerce-account .woocommerce {
	display: flex;
	flex-direction: column;
	gap: var(--mk-s3);
}

.woocommerce-thankyou-order-received,
.woocommerce-notice--success {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-s3);
	margin: 0;
	padding: var(--mk-s3);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	list-style: none;
}

.woocommerce ul.order_details li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
	text-transform: none;
}

.woocommerce ul.order_details li strong {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h3);
	color: var(--mk-ink);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--mk-s3);
}

.woocommerce-MyAccount-navigation ul li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mk-control-h-sm);
	padding: 0 14px;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	font-family: var(--mk-font-display);
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--mk-ink);
	border-color: var(--mk-ink);
	color: #fff;
}

/* =========================================================================
 * 8. Laoseis ja "Sold out" — ei kuvata kunagi
 * ====================================================================== */

.stock,
.woocommerce .product .stock,
.woocommerce ul.products li.product .out-of-stock,
.woocommerce span.out-of-stock,
.wc-block-components-product-badge {
	display: none !important;
}

/* WooCommerce'i vaikimisi "Sale!" märgis asendatakse teema märgisega. */
.woocommerce span.onsale {
	position: static;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* =========================================================================
 * 9. Hind WooCommerce'i vaikeloendis
 * ====================================================================== */

.woocommerce .price,
.woocommerce ul.products li.product .price {
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-price);
	font-weight: 700;
	color: var(--mk-ink);
}

.woocommerce .price del {
	font-family: var(--mk-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--mk-muted);
	opacity: 1;
}

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

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

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: var(--mk-s3);
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: auto;
	}

	/* ---------------------------------------------------------------------
	 * 10.1 Ostukorv, kokkuvõte ja tellimus telefonis
	 *
	 * WooCommerce'i shop_table_responsive muudab read plokkideks ja lisab
	 * lahtrisildid (`td::before { content: attr(data-title) }`) alles
	 * ≤768 px. Teeme sama juba 900 px-st, muidu jääb 769–900 px vahele
	 * tabel, millel ei ole enam päist ega veel silte.
	 *
	 * NB: WooCommerce'i `table.shop_table_responsive tr td` kannab
	 * `text-align: right !important` — seda saab üle kirjutada ainult sama
	 * relvaga. Ainsad kaks !important-i selles plokis on just need.
	 * ------------------------------------------------------------------ */

	/* Päis kaob ainult neis tabeleis, mis muutuvad plokkideks. Tellimuse
	   koond (order_details) jääb kaheveeruliseks ja hoiab päise alles. */
	.woocommerce table.shop_table_responsive thead,
	.woocommerce-checkout #order_review table.shop_table thead {
		display: none;
	}

	/* Tellimuse ülevaade: automaatpaigutus andis toote lahtrile miinimumlaiuse
	   (overflow-wrap: anywhere → nimi ja valikud murdusid tähthaaval, tagasiside
	   23.10.2026). Fikseeritud paigutus: toode 70 %, summa 30 %, valikud ühes
	   veerus (silt väärtuse kohal). */
	.woocommerce-checkout #order_review table.shop_table {
		width: 100%;
		table-layout: fixed;
	}

	.woocommerce-checkout #order_review table.shop_table td.product-name {
		width: 70%;
	}

	.woocommerce-checkout #order_review table.shop_table td.product-total {
		width: 30%;
		white-space: nowrap;
		text-align: right;
	}

	.woocommerce-checkout #order_review table.shop_table .mk-choices__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.woocommerce-checkout #order_review table.shop_table .mk-choices__list dt {
		margin-top: 4px;
	}

	/* Sama hädas on tellimuse koond (tellimus vastu võetud, konto): kaks
	   veergu „Toode | Kokku“, toote lahter sai miinimumlaiuse. */
	.woocommerce table.shop_table.order_details {
		width: 100%;
		table-layout: fixed;
	}

	.woocommerce table.shop_table.order_details td.product-name,
	.woocommerce table.shop_table.order_details th.product-name {
		width: 70%;
	}

	.woocommerce table.shop_table.order_details td.product-total,
	.woocommerce table.shop_table.order_details th.product-total {
		width: 30%;
		white-space: nowrap;
		text-align: right;
	}

	.woocommerce table.shop_table.order_details .mk-choices__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	/* Plokkidena ei tohi tabel enam sisu järgi laieneda — td.actions sisu
	   surus muidu tabeli mähisest ~17 px laiemaks (mõõdetud 375 px juures). */
	.woocommerce table.shop_table_responsive,
	.woocommerce table.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table {
		border: 0;
	}

	.woocommerce table.shop_table td.product-name {
		overflow-wrap: anywhere;
	}

	/* Silt vasakul, väärtus paremal (kokkuvõte, konto tellimused). */
	.woocommerce table.shop_table_responsive:not(.cart) tbody tr {
		display: block;
		border-bottom: 1px solid var(--mk-line);
	}

	.woocommerce table.shop_table_responsive:not(.cart) tbody tr:last-child {
		border-bottom: 0;
	}

	.woocommerce table.shop_table_responsive:not(.cart) tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 40px;
		padding: 6px 0;
		border: 0;
		background: none;
	}

	.woocommerce table.shop_table_responsive tbody td[data-title]::before {
		content: attr(data-title);
		flex: none;
		float: none;
		font-family: var(--mk-font-display);
		font-size: var(--mk-fs-meta);
		font-weight: 600;
		color: var(--mk-muted);
		text-align: left;
	}

	/* Andmesildita lahtris (pisipilt, eemaldus) jättis WooCommerce'i reegel
	   järele paljas koolon. */
	.woocommerce table.shop_table_responsive tbody td:not([data-title])::before {
		content: none;
	}

	/* --- Ostukorvi rida on kaart --- */
	.woocommerce table.shop_table.cart tbody tr.cart_item {
		--mk-cart-thumb: 72px;
		--mk-cart-remove: 44px;
		display: grid;
		grid-template-columns: var(--mk-cart-thumb) minmax(0, 1fr) var(--mk-cart-remove);
		align-items: start;
		gap: 0 12px;
		margin: 0 0 12px;
		padding: 12px;
		border: 1px solid var(--mk-line);
		border-radius: var(--mk-radius);
		background: var(--mk-bg);
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		text-align: left !important;
	}

	/* WooCommerce peidab pisipildi ≤768 px — kaardil on see aga orientiir. */
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1;
		width: auto;
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-thumbnail img {
		display: block;
		width: var(--mk-cart-thumb);
		height: var(--mk-cart-thumb);
		padding: 4px;
	}

	/*
	 * Toote lahter ise kaob paigutusest (display: contents) ja tema lapsed —
	 * nimi, „Muuda valikuid“ ja valikute plokk — saavad kaardi ruudustikus oma
	 * koha. Ainult nii mahub valikute plokk kogu kaardi laiusele: 360 px
	 * ekraanil jääks teise veergu ainult ~164 px ja kanganäidis koos nimega
	 * murduks tähthaaval. Lahtri sildi (::before) võtab järgmine reegel maha,
	 * nii et ruudustikku eksinud elemente ei teki.
	 */
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name {
		display: contents;
	}

	/* „Toode:“ toote nime ees ei ütle midagi. */
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name::before {
		display: none;
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name > a {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		min-width: 0;
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name > a.mk-choices__edit {
		grid-column: 2;
		grid-row: 2;
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name > .mk-choices {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* Järeltellimuse teade (kui see kunagi tekib) saab oma rea automaatselt. */
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-name > p {
		grid-column: 1 / -1;
	}

	.woocommerce table.shop_table.cart td.product-name a {
		font-size: var(--mk-fs-h4);
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-remove {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		text-align: right !important;
	}

	.woocommerce table.shop_table .product-remove a.remove {
		width: 44px;
		height: 44px;
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-price,
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-quantity,
	.woocommerce table.shop_table.cart tbody tr.cart_item td.product-subtotal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		grid-column: 1 / -1;
		min-height: 44px;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--mk-line);
	}

	.woocommerce table.shop_table.cart td.product-quantity .qty {
		width: 96px;
	}

	/* --- Sooduskoodi ja "Uuenda" rida --- */
	.woocommerce table.shop_table.cart tbody tr:not(.cart_item) {
		display: block;
	}

	.woocommerce table.shop_table.cart td.actions {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.woocommerce table.shop_table.cart td.actions .coupon {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		width: 100%;
		margin: 0 0 12px;
		padding: 0;
		float: none;
	}

	/* WooCommerce'i clearfix muutuks siin omaette paindeelemendiks. */
	.woocommerce table.shop_table.cart td.actions .coupon::before,
	.woocommerce table.shop_table.cart td.actions .coupon::after {
		content: none;
		display: none;
	}

	.woocommerce table.shop_table.cart td.actions .coupon .input-text {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		float: none;
	}

	.woocommerce table.shop_table.cart td.actions .coupon .button {
		flex: none;
		width: auto;
		float: none;
		white-space: nowrap;
	}

	.woocommerce table.shop_table.cart td.actions > .button {
		display: block;
		width: 100%;
	}

	.woocommerce .cart_totals,
	.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: none;
	}

	/* Summade tabelis kannab sildi lahtri data-title. */
	.woocommerce .cart_totals table.shop_table th {
		display: none;
	}

	/* --- Kassa tellimuse ülevaade --- */
	.woocommerce-checkout #order_review {
		padding: var(--mk-s2);
	}

	.woocommerce-checkout #order_review table.shop_table td.product-total,
	.woocommerce-checkout #order_review table.shop_table tfoot td {
		text-align: right;
	}

	/* --- Tellimuse koond (tellimus saadud, konto) --- */
	.woocommerce table.shop_table.order_details td.product-total,
	.woocommerce table.shop_table.order_details tfoot td {
		text-align: right;
		white-space: nowrap;
	}

	/* Toote lahtris on pisipilt, nimi ja valikute loend — see ei ole
	   silt+väärtus rida, vaid plokk. Paindekast lükkaks need kõrvuti. */
	.woocommerce table.shop_table_responsive:not(.cart) tbody td.product-name {
		display: block;
	}

	/* --- „Sinu valikud“ telefonis --- */
	.mk-choices {
		padding: 10px;
	}

	.woocommerce table.shop_table .mk-choices__list {
		gap: 10px 12px;
	}

	.woocommerce .mk-order-photo {
		width: 56px;
		height: 56px;
		margin-right: 12px;
	}
}

/* 360–430 px: valikute plokk läheb ühte veergu (silt väärtuse kohal), muidu
   jääks väärtusele ~120 px ja kanganimi murduks. */
@media (max-width: 430px) {
	.woocommerce table.shop_table .mk-choices__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.woocommerce table.shop_table .mk-choices__list dt {
		font-size: var(--mk-fs-hint);
	}

	.woocommerce table.shop_table .mk-choices__list dd + dt {
		margin-top: 8px;
	}
}

/* =========================================================================
 * 11. Tooteloendi float-paigutuse mahavõtmine
 *
 * woocommerce-layout.css annab igale <li class="product"> laiuse, floati ja
 * paremale poole marginaali (`.woocommerce ul.products li.product`,
 * `.woocommerce ul.products[class*="columns-"] li.product`, `li.first`,
 * `li.last`) ning <ul>-ile clearfix-pseudoelemendid. Teema paneb <ul>-i
 * grid-režiimi, seega peavad need reeglid kaduma. Valijad on WooCommerce'i
 * omadega ühesugused (ka atribuudivalijaga variant), nii et võrdse täpsuse
 * juures otsustab laadimisjärjekord — teema laaditakse hiljem ja !important
 * ei ole vaja.
 * ====================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last,
.woocommerce .related ul.products li.product,
.woocommerce-page .related ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce-page .up-sells ul.products li.product,
.woocommerce .cross-sells ul.products li.product,
.woocommerce .cart-collaterals .cross-sells ul.products li.product,
.woocommerce-page .cart-collaterals .cross-sells ul.products li.product,
.woocommerce-page .cross-sells ul.products li.product {
	width: auto;
	min-width: 0;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Tootekaart — kasutusel nii kategoorialehel, otsingus kui avalehe ridades,
 * seega peavad reeglid olema alati laaditud failis.
 * ---------------------------------------------------------------------- */

.mk-product-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mk-line, #e3e3e0);
	border-radius: var(--mk-radius, 6px);
	background: var(--mk-bg, #fff);
	list-style: none;
	overflow: hidden;
	transition: border-color var(--mk-ease, 160ms ease), box-shadow var(--mk-ease, 160ms ease);
}

/* Fookus jõuab kaardile nime lingi kaudu, seega sama olek hiirele ja klaviatuurile. */
.mk-product-card:hover,
.mk-product-card:focus-within {
	border-color: var(--mk-ink, #111);
	box-shadow: var(--mk-shadow-hover, 0 8px 24px rgba(17, 17, 17, 0.08));
}

/* Pildiala on toonitud: valge taustaga tootefotod sulavad tooni sisse
   (mix-blend-mode: multiply) ja kõik kaardid näevad ühtmoodi välja. Varem oli
   siin valge kast, mis jättis eri kujuga fotode ümber juhuslikke servi.
   isolation hoiab segunemise pildiala sees. */
.mk-product-card__media {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--mk-media-bg, #f5f4f1);
}

.mk-product-card__media-link {
	display: block;
	aspect-ratio: 4 / 3;
}

/* WooCommerce'i woocommerce.css annab tsükli pildile `height: auto` ja alumise
   marginaali valijaga `.woocommerce ul.products li.product a img` (0,3,4) —
   see võitis senise (0,2,1) reegli ja pildid jäid kategoorialehel eri
   kõrgusega. Esimene valija on (0,4,3) ehk tugevam; teine katab avalehe ja
   otsingu read, kus body-l ei pruugi .woocommerce klassi olla. */
.woocommerce ul.products li.product .mk-product-card__media img,
.mk-product-card .mk-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 14px;
	box-sizing: border-box;
	/* Pildita tootel on WC kohatäitepilt, millele woocommerce.css annab halli
	   raami (`.woocommerce ul.products li.product .woocommerce-placeholder`,
	   (0,4,2)) — see jooniks toonitud pildialale juhusliku kasti. */
	border: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mk-ease, 160ms ease);
}

.mk-product-card:hover .mk-product-card__media img,
.mk-product-card:focus-within .mk-product-card__media img {
	transform: scale(1.03);
}

.mk-product-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* Valge sisuosa toonitud pildiala all. flex: 1 hoiab keha ülejäänud kõrguse,
   nii et hinnarida saab põhja kinnituda (margin-top: auto). */
.mk-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 16px;
	border-top: 1px solid var(--mk-line, #e3e3e0);
	background: var(--mk-bg, #fff);
}

.mk-product-card__meta {
	font-size: var(--mk-fs-meta, 13px);
	line-height: 1.5;
	color: var(--mk-muted, #5d5d58);
}

.mk-product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;
	font-family: var(--mk-font-display, sans-serif);
	font-size: var(--mk-fs-h3, 16.5px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mk-ink, #111);
	text-decoration: none;
}

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

/* Hinnarida on kaardi põhjas (margin-top: auto), nii et ühe rea kaartide hinnad
   on samal joonel ka siis, kui nimi mahub ühele reale. Vihje ("3 kangagruppi")
   tuleb märgenduses hinna JÄREL — kuvamisel tõstame selle ettepoole (order),
   muidu jääks vihjega kaardil hind naaberkaardist ühe rea võrra kõrgemale.
   DOM-i järjekord ei muutu, ainult kuvamine; sama võte on avalehe kaardil
   (.mk-pcard, theme.css). Rea paremasse otsa tuleb pseudoelemendina väike
   noolenupp — lisadetail ilma uue märgenduseta. */
.mk-product-card__price {
	order: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	font-family: var(--mk-font-display, sans-serif);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mk-ink, #111);
}

.mk-product-card__price::after {
	content: "\2192";
	/* Teine content-rida annab abitehnikale tühja alternatiivteksti, et ekraanilugeja
	   kaunistusnoolt ette ei loeks. Vanemad brauserid jätavad rea vahele ja
	   kasutavad ülemist. */
	content: "\2192" / "";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Nool hoiab rea paremat serva automaatse marginaaliga, mitte
	   space-between'iga: hinnamärgenduses võib olla mitu elementi (vana hind,
	   uus hind, "Alates"), mille space-between laotaks üle terve kaardi. */
	margin-left: auto;
	width: 28px;
	height: 28px;
	border: 1px solid var(--mk-line-2, #d9d9d5);
	border-radius: 999px;
	background: var(--mk-bg, #fff);
	color: var(--mk-ink, #111);
	font-family: var(--mk-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	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-product-card:hover .mk-product-card__price::after,
.mk-product-card:focus-within .mk-product-card__price::after {
	border-color: transparent;
	background: var(--mk-accent, #d7182a);
	color: var(--mk-accent-ink, #fff);
}

.mk-product-card__price .price,
.mk-product-card__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.mk-product-card__price del {
	margin-right: 8px;
	font-family: var(--mk-font-body, sans-serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--mk-muted, #5d5d58);
	text-decoration: line-through;
}

.mk-product-card__price ins {
	color: var(--mk-sale, #d7182a);
	text-decoration: none;
}

/* Vihje kuvatakse hinnarea kohal (vt order hinnarea juures). */
.mk-product-card__hint {
	order: 1;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--mk-muted, #5d5d58);
}

/* Telefonis on kaart kitsam (B-Mobiil mõõdud). */
@media (max-width: 560px) {
	.mk-product-card__title {
		font-size: 14.5px;
		min-height: 40px;
	}

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

	/* Sama valijapaar mis põhireeglis, muidu jääks 14 px polster peale. */
	.woocommerce ul.products li.product .mk-product-card__media img,
	.mk-product-card .mk-product-card__media img {
		padding: 10px;
	}

	.mk-product-card__price::after {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}
}

/* Vähendatud liikumine: theme.css lühendab üleminekuajad, siin võtame ka
   pildi suurenduse maha. */
@media (prefers-reduced-motion: reduce) {
	.mk-product-card:hover .mk-product-card__media img,
	.mk-product-card:focus-within .mk-product-card__media img {
		transform: none;
	}
}