/* Mate Soodustooted - esiotsa stiil.
   Kasutab teema/Divi enda WooCommerce toote-loop struktuuri (ul.products,
   li.product, .price del/ins, .onsale), aga lisab kolm valitavat KUJUNDUST
   (msp-style-minimal / msp-style-card / msp-style-bold), mis on adminis
   valitavad (Soodustooted -> Seaded -> Kujundus). Kõik reeglid on skoobitud
   .msp-sale-products alla, et vältida konflikte ülejäänud poe stiiliga. */

.msp-sale-products {
	--msp-accent: #f1d949; /* Tegelik väärtus tuleb alati inline stiilina admin seadetest/shortcode'ist - see on lihtsalt varuväärtus. */
}

/* ===== Ümbris ja pealkiri =====
   .msp-sale-wrap piirab kogu sektsiooni (pealkiri + tooted) laiuse täpselt
   samale väärtusele, mida kasutab Tootekategooriate plugin (.tkc-grid:
   max-width 1240px, sama padding), et need kaks sektsiooni jääksid lehel
   visuaalselt ühtlaselt joondatuks, olenemata sellest, millisesse Divi
   ritta/sektsiooni kumbki paigutatakse. */
.msp-sale-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 24px;
	box-sizing: border-box;
}
.msp-sale-wrap *,
.msp-sale-wrap *::before,
.msp-sale-wrap *::after {
	box-sizing: inherit;
}

.msp-sale-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

.msp-view-all-row {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.msp-view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #123f6e;
	text-decoration: none;
	padding: 10px 20px;
	border: 2px solid #123f6e;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.msp-view-all-link:hover,
.msp-view-all-link:focus {
	background: #123f6e;
	color: #fff;
}

.msp-view-all-link .msp-carousel-icon {
	width: 14px;
	height: 14px;
	display: block;
}

.msp-sale-header-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--msp-accent, #f1d949);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4);
}

.msp-sale-header-title {
	font-family: var(--tk-font-display, 'Barlow Condensed', sans-serif);
	text-transform: uppercase; /* Bebas Neue -> Barlow Condensed 10.09.2026 */
	font-size: 30px;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: #1c1f22;
	margin: 0;
	padding-bottom: 7px;
	position: relative;
}

.msp-sale-header-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 56px;
	background: var(--msp-accent, #f1d949);
}

@media (max-width: 640px) {
	.msp-sale-wrap {
		padding: 8px 16px;
	}
	.msp-sale-header {
		gap: 10px;
		margin-bottom: 14px;
	}
	.msp-sale-header-icon {
		width: 32px;
		height: 32px;
		border-radius: 6px;
	}
	.msp-sale-header-icon svg {
		width: 16px;
		height: 16px;
	}
	.msp-sale-header-title {
		font-size: 23px;
	}
}

/* ===== Ruudustik (layout="grid", vaikimisi) =====
   Varem kasutas see CSS Grid'i fikseeritud veergude arvuga (--msp-cols),
   mis MURDIS tooted mitmele reale, kui tooteid oli rohkem kui veerge.
   Klient soovis, et KÕIK soodustooted mahuksid alati ÜHELE reale, jagades
   olemasoleva laiuse nende vahel võrdselt (ilma kerimiseta - erinevalt
   allpool olevast karussellist, mis on tahtlikult eraldi, kerimisega
   funktsioon). Seetõttu kasutame siin flexbox'i, mis venitab tooted
   automaatselt täpselt nii kitsaks, kui vaja, olenemata nende arvust. */

.msp-sale-products.woocommerce:not(.msp-carousel) ul.products {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 20px;
	width: 100%;
}

.msp-sale-products.woocommerce:not(.msp-carousel) ul.products li.product {
	flex: 1 1 0;
	min-width: 0; /* et pikk tootenimi/hind ei sunniks li't oma flex-osast laiemaks */
	width: auto;
	margin: 0;
	float: none;
	display: flex;
	flex-direction: column;
}

@media (max-width: 640px) {
	/* Väga paljude toodete puhul väikesel ekraanil vähendame tühikut ja
	   pildikõrgust veidi, et kaardid jääksid loetavaks - ise laiust siiski
	   ei piira, tooted jäävad ikka ühele reale (kliendi soov). Sama 12px
	   tühik, mida kasutab Tootekategooriate ruudustik samal ekraanilaiusel. */
	.msp-sale-products.woocommerce:not(.msp-carousel) ul.products {
		gap: 12px;
	}
}

/* Kaardi viimane element (nt "Lisa võrdlusesse" nupp, mis tuleb
   tooriistakeskus-modern-shop tootekaardi mallist) joondub alati kaardi
   ALUMISE serva külge, sõltumata sellest, kas toote pealkiri mahub ühele
   või kahele reale. Ilma selleta jääks nupp lühema pealkirjaga kaartidel
   kõrgemale ja pikema pealkirjaga kaartidel madalamale - rida näeks
   "hüplev" välja. Kuna li.product on nüüd flex-column (vt eespool), lükkab
   margin-top:auto viimase lapse alati võimalikult alla, kasutades ära kogu
   kaardi kõrguse (mis omakorda on rea kõrgeima kaardi järgi ühtlustatud). */
.msp-sale-products.woocommerce ul.products li.product > *:last-child {
	margin-top: auto;
}

/* Kompaktsem, ühtlane pildi kõrgus (--msp-img-height, administ muudetav) -
   kehtib kõigi kolme kujunduse puhul, nii ruudustikus kui karusellis.
   object-fit: contain näitab pilti TERVIKUNA (ei kärbi ega moonuta) - kui
   pildi ja kasti proportsioonid ei kattu, jääb üle-alla või vasak-parem
   servadesse tühja ruumi, mis täidetakse valge taustaga (mitte läbipaistev).
   !important, sest teema/Divi määrab tootepildile tihti oma laiuse/kõrguse
   reeglid. */
/* Divi mahutab pildi `<span class="et_shop_image">` sisse. Reaelemendina
   lisaks see pildi alla reakõrguse jagu tühja ruumi ja lükkaks kasti sisu
   paigast. Plokiks tehes kaob see. */
.msp-sale-products .tms-card-media .et_shop_image {
	display: block !important;
	height: 100% !important;
	width: 100% !important;
}
.msp-sale-products.woocommerce ul.products li.product a img,
.msp-sale-products.woocommerce ul.products li.product img {
	width: 100% !important;
	height: var(--msp-img-height, 160px) !important;
	object-fit: contain !important;
	background: #fff;
	display: block;
}

/* Pealkiri ja hind veidi kompaktsemad, et kogu kaart jääks väiksemaks. */
.msp-sale-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1em;
	font-weight: 700;
	margin: 10px 0 4px;
	line-height: 1.3;
	color: #1c1f22;
	transition: color 0.15s ease;
}
.msp-sale-products.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--msp-accent);
}

/* Tootekoodi ja laoseisu näitamine/peitmine on nüüd admin seadetes valitav
   (Soodustooted -> Seaded -> Kuvamise seaded). Elemendid tulevad
   tooriistakeskus-modern-shop plugina tootekaardi mallist. */
.msp-sale-products.msp-hide-sku .tms-sku-tag {
	display: none !important;
}
.msp-sale-products.msp-hide-stock .tms-stock-gauge {
	display: none !important;
}

/* Toote firma/bränd (nt "STIHL") ei kuvata soodustoodete kaartidel - see
   pole admin seadetes valitav, klient soovis seda alati peidetuna. */
.msp-sale-products .tms-card-brand {
	display: none !important;
}

.msp-sale-products.woocommerce ul.products li.product .price {
	font-size: 0.95em;
	display: flex;
	align-items: center;
	gap: 8px;
	/* NOWRAP (v1.9.1-st, oli varem "wrap") - tavahind (<del>) ja
	   soodushind (<ins>) on ".price" sees kaks eraldi FLEX-ELEMENTI
	   (mitte lihtsalt tekst), seega tooriistakeskus-modern-shop plugina
	   baasreegli "white-space:nowrap" (tms-tokens.css) ÜKSI ei piisa -
	   see väldib ainult tekstisisest murdumist, mitte kahe flex-elemendi
	   MURDUMIST omavahel, mille "flex-wrap:wrap" siin lubas. Klient
	   soovis SELGESÕNALISELT, et tavahind ja soodushind oleksid ALATI
	   samal real - laiemate hindade puhul (nt "1 099,00 €") tegi vana
	   "wrap" väärtus täpselt seda, mida klient EI soovinud. */
	flex-wrap: nowrap;
	margin-top: 6px;
}

.msp-empty {
	padding: 20px 0;
	font-style: italic;
	color: #666;
}

/* ===== Karussell (layout="carousel") - struktuur/mehaanika =====
   Nooled on nüüd absoluutpositsioneeritud (mitte flex-õed .msp-carousel-
   viewport kõrval) - nii saab tootekaartide rida kasutada TÄPSELT sama
   laiust, mis .msp-sale-wrap sisu jaoks jääb üle (sama, mida kasutab
   Tootekategooriate ruudustik), ilma et nooled selle laiuse seest "ära
   sööks". Kliendi soovil võivad nooled ise sellest alast väljapoole
   ulatuda (vt allpool .msp-carousel-nav laiema ekraani reeglid). */

.msp-sale-products.msp-carousel {
	position: relative;
}

.msp-sale-products.msp-carousel .msp-carousel-viewport {
	width: 100%;
	overflow-x: auto !important;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.msp-sale-products.msp-carousel .msp-carousel-viewport::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Edge */
}

/* !important siin, sest mitmed teemad (sh Divi) määravad ul.products
   omale display/float reeglid, mis muidu murraksid rea mitmeks reaks
   ja teeksid karusselli "katki". */
.msp-sale-products.msp-carousel ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
}

/* Täpne toodete arv reas (--msp-visible, vaikimisi 6) - iga tootekaart saab
   võrdse osa reast, nii et korraga on näha täpselt niipalju tooteid, kui
   seadetes/shortcode'is määratud. Ülejäänud saab noolte abil kerida.
   --msp-effective-visible väheneb allpool kitsamatel ekraanidel automaatselt,
   aga mitte kunagi rohkem, kui algselt määratud (min() ei tõsta väärtust üles).
   Sama 20px tühik, mis Tootekategooriate ruudustikul - kuna nüüd on ka
   .msp-sale-wrap ja .tkc-grid sisulaius (max-width 1240px miinus sama padding)
   identsed, tuleb tootekaardi laius mõlemal pluginal (samal veergude/nähtavate
   arvul) pikslitäpselt sama. */
.msp-sale-products.msp-carousel ul.products li.product {
	--msp-effective-visible: var(--msp-visible, 6);
	flex: 0 0 calc((100% - (var(--msp-effective-visible) - 1) * 20px) / var(--msp-effective-visible)) !important;
	width: auto !important;
	max-width: none !important;
	scroll-snap-align: start;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
}

@media (max-width: 1100px) {
	.msp-sale-products.msp-carousel ul.products li.product {
		--msp-effective-visible: min(var(--msp-visible, 6), 4);
	}
}

@media (max-width: 768px) {
	.msp-sale-products.msp-carousel ul.products li.product {
		--msp-effective-visible: min(var(--msp-visible, 6), 2);
	}
}

@media (max-width: 480px) {
	.msp-sale-products.msp-carousel ul.products li.product {
		--msp-effective-visible: min(var(--msp-visible, 6), 1);
	}
}

/* Noolenupud - "all: unset" nullib teema/Divi globaalsed nupustiilid
   (mis muidu tihti lisavad oma paddingu, suurtähed, varjud vms), misjärel
   defineerime ise täpselt selle välimuse, mida vajame. Kõrgem selektori
   spetsiifilisus + !important olulisimatel omadustel tagab, et teema
   seda üle ei kirjuta.

   Laiemal ekraanil ulatuvad nupud .msp-sale-wrap alast väljapoole (vasakule/
   paremale) - klient soovis, et tootekaardid ise jääksid täpselt sama
   laiaks kui Tootekategooriate omad, nii et nooled ei tohi selle laiuse
   seest ruumi võtta. Kitsamal ekraanil (vt allpool) pole selleks enam
   piisavalt ruumi, seal kattuvad nupud kaartide äärega. */
.msp-sale-products.msp-carousel .msp-carousel-nav {
	all: unset;
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	color: #333 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.msp-sale-products.msp-carousel .msp-carousel-prev {
	left: -54px;
}
.msp-sale-products.msp-carousel .msp-carousel-next {
	right: -54px;
}

@media (max-width: 1400px) {
	/* Kitsamal aknal pole .msp-sale-wrap ümber enam piisavalt vaba ruumi,
	   et nupud täiesti väljapoole mahuksid - toome need siis ala äärele
	   kattuma, kerge varjuga, et need kaartide taustast selgelt eristuks. */
	.msp-sale-products.msp-carousel .msp-carousel-prev {
		left: 4px;
	}
	.msp-sale-products.msp-carousel .msp-carousel-next {
		right: 4px;
	}
}

.msp-sale-products.msp-carousel .msp-carousel-nav:hover,
.msp-sale-products.msp-carousel .msp-carousel-nav:focus {
	background: #f2f2f2 !important;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
	outline: none;
}

.msp-sale-products.msp-carousel .msp-carousel-nav .msp-carousel-icon {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}

/* Kui kõik tooted mahuvad niigi ühte reale, pole nooli/kerimist vaja - peidame need,
   et need ei jätaks eksitavat muljet, nagu oleks veel tooteid näha. */
.msp-sale-products.msp-carousel.msp-no-scroll-needed .msp-carousel-nav {
	display: none !important;
}

/* "Algus"/"lõpp" olek - selge visuaalne vihje, kummal pool rohkem tooteid veel on. */
.msp-sale-products.msp-carousel .msp-carousel-nav:disabled,
.msp-sale-products.msp-carousel .msp-carousel-nav.is-disabled {
	opacity: 0.3 !important;
	cursor: default !important;
	pointer-events: none;
}

@media (max-width: 480px) {
	.msp-sale-products.msp-carousel .msp-carousel-nav {
		width: 32px !important;
		height: 32px !important;
	}

	.msp-sale-products.msp-carousel .msp-carousel-nav .msp-carousel-icon {
		width: 14px;
		height: 14px;
	}

	.msp-sale-products.msp-carousel .msp-carousel-prev {
		left: 2px;
	}
	.msp-sale-products.msp-carousel .msp-carousel-next {
		right: 2px;
	}
}

/* =====================================================================
   KUJUNDUSED (design) - kehtivad nii ruudustiku kui karusselli puhul.
   Valitakse adminis: Soodustooted -> Seaded -> Kujundus.
   ===================================================================== */

/* WooCommerce vaikimisi "Sale!" silt on kõigi kolme kujunduse puhul
   peidetud - "minimal" ja "card" ei näita üldse silti (ainult värviline
   hind), "bold" näitab selle asemel oma "-X%" silti (vt allpool). */
.msp-sale-products .onsale {
	display: none !important;
}

/* ---- Ühine hinnastiil kõigi kujunduste jaoks ----
   Sooduhind on nüüd täidisega "pill" (mitte lihtsalt paks värviline tekst),
   et see jääks silma juba enne, kui vaatad täpsemalt - täpselt see, mida
   klient soovis ("soodushind paremini esile tõstetud"). Selektor on tahtlikult
   "raske" ja !important, sest teemad (sh Divi) määravad WooCommerce hinnale
   tihti samaväärse või kõrgema spetsiifilisusega reegleid. */
.msp-sale-products.woocommerce ul.products li.product .price del {
	order: 2;
	color: #9a9a9a !important;
	font-weight: 400 !important;
	font-size: 0.82em;
	text-decoration: none !important;
	opacity: 0.85;
}

.msp-sale-products.woocommerce ul.products li.product .price ins {
	order: 1;
	display: inline-flex !important;
	align-items: center;
	background: var(--msp-accent) !important;
	color: #1c1f22 !important;
	font-weight: 400 !important;
	font-size: 1.1em;
	line-height: 1.2;
	padding: 4px 11px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.35);
}

/* ---- "Sinu võit: X €" - toote TEGELIK säästetud summa hinna all, kõigi
   kolme kujunduse puhul (erinevalt "bold"-only "-X%" ribbonist allpool).
   Kasutab sama --msp-accent muutujat, mis ülejäänud soodustuse elemendid,
   aga õrnema, tekstipõhise kujundusena (ring+linnuke, mitte täidisega
   pill nagu sooduhind ise), et kaart ei jääks liiga "raskeks" kahe
   kõrvuti täidisega elemendiga. Väljalülitatav adminis/shortcode'is
   (show_savings) - vt .msp-hide-savings allpool. ---- */
.msp-sale-products.woocommerce ul.products li.product .msp-savings-badge {
	display: flex !important;
	align-items: center;
	gap: 5px;
	margin: 5px 0 0 !important;
	font-size: 0.82em !important;
	font-weight: 700 !important;
	color: var(--msp-accent) !important;
	line-height: 1.3;
}

.msp-sale-products.woocommerce ul.products li.product .msp-savings-badge .msp-savings-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--msp-accent);
	color: #fff;
}

.msp-sale-products.msp-hide-savings .msp-savings-badge {
	display: none !important;
}

/* ---- "Sinu võit" nurgasildina (v1.6.0-st) ----
   Kliendi soov: "Sinu võit" peab olema nähtaval tootekasti ÜLEVAL PAREMAL
   NURGAS (mitte hinna all tekstina). See väljanägemine on v1.37.21-st
   (tooriistakeskus-modern-shop) muutunud ÜHTSEKS kõikjal (pood/kategooria,
   Uued tooted, Soodustooted) - see reegel SIIN jääb endiselt kehtima
   (identne tulemus baasreegliga, seega kahjutu topeltmäärang), aga pole
   enam ainus koht, kust see väljanägemine tuleb.
   Element ise (.tms-savings-tag) renderdub v1.37.22-st ".tms-card-media"
   (pildi konteineri) SEES, mitte enam kaardi tekstiosas hinnarea järel -
   vt tooriistakeskus-modern-shop plugina content-product.php ja
   tms-tokens.css kommentaare (JUURPÕHJUS: kui element positsioneeriti
   varem KOGU kaardi, mitte pildi, suhtes, nihkus silt "Uued tooted" ja
   "Soodustooted" sektsioonides erinevalt, kui kummagi kaardi laius
   erines pildi 240px piirist). See SIINNE reegel positsioneerib
   endiselt sama moodi (position:absolute, top/right:12px) - kuna element
   on nüüd ".tms-card-media" (position:relative) SEES, kehtib see
   positsioneerimine automaatselt selle, mitte enam kogu kaardi, suhtes.
   ASUKOHT (v1.7.5): esialgu jätsime ruumi allahindluse %-sildi jaoks
   selle KOHAL (top: 12+26+6=44px), kuna klient soovis mõlemat korraga
   näha. Praktikas jäi %-silt paljudel toodetel (nt see, mille pealt
   klient ekraanipildi saatis) lihtsalt renderdumata/nähtamatuks - "Sinu
   võit" rippus seetõttu tühja koha kohal, mitte "päris üleval nurgas",
   nagu klient soovis. Tõstsime selle nüüd TÄPSELT samale kohale, kus
   %-silt muidu oleks (top: 12px) - kui %-silt PEAKS mõnel tootel siiski
   nähtavale ilmuma, kattuksid need omavahel, aga klient valis
   selgesõnaliselt "päris üleval nurgas" - saab hiljem täpsustada, kui see
   kellegi teise toote puhul probleemiks osutub.
   VÄRV (v1.7.5): must tekst (mitte valge) parema kontrasti jaoks kollasel
   taustal - klient soovis, et tekst "paistaks välja". */
.msp-sale-products.woocommerce ul.products li.product .tms-savings-tag {
	/* ⚠ 11.09.2026: top/left MUUDETUD. Allpool olev v1.7.5 selgitus kirjeldab,
	   miks see kunagi top:12px peale TÕSTETI — %-märk jäi paljudel toodetel
	   renderdumata. See põhjus on nüüd MÕÕDETULT kehtetu: avalehel on
	   112/112 savings-sildist koos %-märgiga, seega tühja koha probleemi ei
	   teki. Samal ajal tekitas top:12px päris kattumise kitsas ruudustikus
	   (pilt 172px, vaja 188,2px) — vt tms-tokens.css pikemat arvutust.
	   NB: need !important-id on põhjus, miks baasreegli parandus üksi ei
	   piisanud — see reegel oleks selle üle kirjutanud. */
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	z-index: 3;
	margin: 0 !important;
	max-width: calc(100% - 24px);
	background: var(--msp-accent) !important;
	color: #000 !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 4px 10px !important;
	font-family: inherit !important;
	font-size: .72em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Osta nupp (ikoon + tekst) - taaskasutab WooCommerce'i "add_to_cart_button"
   klassi (JS lisab ikooni ja tekstiga <span>'i sisse, vt msp-carousel.js).
   Kaardi AINUS tegevusnupp (v1.x-st, kui "Võrdle" nupp kaardilt eemaldati -
   vt mate-product-compare/class-mpc-core.php). Kuna see on nüüd kaardi
   peamine ja ainus tegevus, kandsime kujunduse üle tumedalt neutraalselt
   toonilt aktsentvärvile (--msp-accent, vaikimisi sama kollane, mis
   sooduhinna sildil ülal) ja venitasime nupu kaardi täislaiuseks - see
   loeb nüüd selgelt esmase CTA-na, mitte teisejärgulise nupuna teise nupu
   kõrval.
   ASUKOHT (v1.6.0-st): klient soovis nupu kohe hinna (kollase sooduhinna)
   ALLA, mitte kaardi allserva (nagu varem, kui .tms-product-card > a
   venis flex:1-ga kogu kaardi kõrguseni ja nupp jäi seetõttu alati alla
   "rippuma"). WooCommerce renderdab selle nupu alati toote LINGI (<a>)
   SULGEMISE JÄREL - seda ei saa PHP mallis lihtsalt hinnarea SISSE tõsta
   ilma kehtetu pesastatud <a>-elemendita (tooteikaart ja "Lisa ostukorvi"
   oleksid siis kaks üksteise sees olevat linki, mis rikub klõpsu
   käitumise). Selle asemel: (1) eemaldame tootelingilt flex:1-kasvamise
   allpool, nii et link tõmbub kokku oma sisu (pilt+bränd+pealkiri+hind)
   kõrguseni, mistõttu nupp - kohe lingi järel DOM-is - jääbki visuaalselt
   hinnarea ALLA; (2) laoseisu silt (mis muidu jääks hinna ja nupu vahele)
   tõstetakse msp-carousel.js-iga nupu JÄRELE - vt enhanceBuyButtons(). */
.msp-sale-products.woocommerce ul.products li.product .tms-product-card > a,
.msp-sale-products.woocommerce ul.products li.product.tms-product-card > a {
	flex: 0 1 auto !important;
}
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button {
	display: flex !important;
	/* flex-direction:row !important LISATUD (v1.9.5-st) - JUURVIGA
	   LEITUD konsooli-diagnostikaga: Divi teema globaalne nupustiil
	   määrab kuskil "flex-direction:column", mille peale meie oma
	   reegel siin varem midagi ei öelnud (arvasime, et "row" on
	   niikuinii vaikimisi) - tulemus oli ikoon ÜLEVAL, tekst ALL (kaks
	   rida), mitte kõrvuti. mate-new-products plugina samaväärne nupp
	   ei kannatanud selle all, kuna TEMA reegel kasutab "all: unset;"
	   (mis nullib KÕIK omadused, sh flex-direction, tagasi algväärtusteks
	   enne oma reeglite uuesti rakendamist) - meie siin ei kasuta
	   "all: unset;", seega jäi "flex-direction" konkreetselt
	   määramata ja Divi väärtus "läbi lipsas". */
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	/* !important + 8px (v1.9.4-st, oli "7px" ilma !important) - sama
	   probleem, mis font-size'iga v1.9.3-s: ilma !important'ita VÕITIS
	   tooriistakeskus-modern-shop plugina baasreegli "gap:8px !important"
	   niikuinii (CSS "!important" võidab alati spetsiifilisuse üle), aga
	   klient nägi visuaalset erinevust ikoon+teksti vahekauguses "Uued
	   tooted" ja "Soodustooted" nuppude vahel - selguse/kindluse mõttes
	   kirjutame siin nüüd otsesõnu SAMA väärtuse, mitte ei looda enam
	   kaudsele cascade-võidule. */
	gap: 8px !important;
	width: 100% !important;
	/* NB: tms-tokens.css üldreegel (.tms-product-card .add_to_cart_button)
	   annab margin'iks "auto 16px 16px" (üleval automaatne, paremal/vasakul/
	   all 16px). Kuna nupp on siin width:100% (täislaius KONTEINERI enda
	   laiuse suhtes, ilma marginiteta), lisanduksid need 16px+16px külje-
	   marginid PEALE 100% laiust ja nupp läks konteinerist (.tms-product-card,
	   mis on overflow:hidden) 32px võrra üle serva - nähtava nupu asemel
	   jäi kaardi paremale servale ainult mõni piksel nähtavale (v1.6.0 viga,
	   parandatud v1.7.1). Nullime siin KÕIK neli marginit otse (mitte ainult
	   margin-top), et see enam ei korduks. */
	margin: 10px 0 0 !important;
	/* ÜHTLUSTATUD (v1.8.4-st) "Uued tooted" nupu mõõtudega (vt mate-new-
	   products plugina mnp-frontend.css ".mnp-new-products...li.product
	   .button" reeglit) - fikseeritud height (mitte ainult padding), sama
	   border-radius (10px, mitte 7px) - klient soovis, et nupp näeks
	   "Uued tooted" ja "Soodustooted" sektsioonides IDENTNE välja. Ainult
	   VERTIKAALNE asukoht kaardil jääb siin endiselt erinevaks (kohe
	   hinna all, mitte kaardi allservas, vt margin-top:10px ülal ja
	   v1.6.0 kommentaari allpool) - see on teadlik, varasem kliendi
	   soov, mida see muudatus ei puuduta. */
	height: 46px !important;
	padding: 0 14px !important;
	border-radius: 10px !important;
	/* Klient saatis ekraanipildi täpse sinise tooniga, mida soovib - pikslist
	   loetud värv on #123F6E. Kasutame seda nüüd otse (v1.7.4), mitte enam
	   --tkh-charcoal muutujat (osutus lehel defineerimata olevaks - vt v1.7.3
	   kommentaari ajaloos). SAMA sinine kehtib nüüd nii tavaolekus KUI :hover
	   peal (vt allpool) - klient soovis SELGESÕNALISELT, et hõljutus ei
	   muudaks värvi teiseks (varem läks see kollaseks). */
	background: #123f6e !important;
	color: #fff !important;
	font-weight: 700 !important;
	/* !important LISATUD (v1.9.3-st) - ilma selleta VÕITIS tooriistakeskus-
	   modern-shop plugina baasreegel (tms-tokens.css, .85rem !important),
	   kuna CSS-i "!important" võidab ALATI spetsiifilisuse üle, olenemata
	   sellest, kumb valik on täpsem - "Soodustooted" nupu kiri oli seetõttu
	   TEGELIKULT juurfondi (rem) suhtes, mitte selle nupu enda (em) suhtes,
	   erinevalt "Uued tooted" nupust (kus on juba oma !important). Klient
	   soovis, et nupp näeks kõikjal ühesuurune välja. */
	font-size: 0.85em !important;
	text-align: center;
	transition: background-color 0.15s ease, transform 0.1s ease;
	box-sizing: border-box;
}
/* Laoseisu+tarneaja rida (.tms-card-facts-row) tõstetakse JS-iga ("Lisa
   ostukorvi" nupu järele, vt msp-carousel.js enhanceBuyButtons() - v1.9.0-st
   tõstab tervet rida, mitte enam ainult .tms-stock-gauge'i, et laoseis
   ja tarneaeg liiguksid alati koos) - väike ülemine vahe, et see ei
   jääks nupule liibuma. Rea enda ülemine punktiirjoon (vt tms-tokens.css
   ".tms-card-facts-row") jääb alles ka siin - toimib nupu ja rea vahel
   sama hästi eraldajana, mis muidu hinnarea ja rea vahel. */
.msp-sale-products.woocommerce ul.products li.product .tms-card-facts-row {
	margin-top: 8px;
}

/* PARANDUS (v1.7.5): nupu järel jäi liiga palju tühja ruumi. Põhjus oli
   kahe VANA reegli koosmõju, mis on nüüd meie UUE paigutusega (nupp kohe
   hinna all, mitte enam kaardi allservas) vastuolus:
   1) rea kaardid venisid (align-items: stretch, ülal real 105/joonis
      .msp-carousel ul.products) kõik rea KÕRGEIMA kaardi kõrguseni;
   2) vana reegel "li.product > *:last-child { margin-top:auto }" (real
      138) pidi selle üleliigse kõrguse ära "sööma", lükates kaardi
      VIIMASE lapse alati alumise servani - see töötaski, KUNI nupp oligi
      viimane laps. Nüüd, kui msp-carousel.js tõstab (varjatud, kui
      "Näita laoseisu" on väljas) laoseisu sildi nupu JÄRELE, on TEMA
      viimane laps - display:none elemendil pole aga marginaalist mingit
      visuaalset mõju, mistõttu see venitatud tühi ruum jäigi lihtsalt
      nupu JA kaardi alumise serva vahele nähtavaks.
   Lahendus: loobume kaartide venitamisest reas (flex-start iga kaardi
   enda kõrguse järgi) ja nullime vana "viimane laps alati alla" reegli -
   see polnud enam meie soovitud paigutusega kooskõlas niikuinii. */
/* 26.10.2026 (kliendi soov: "Lisa ostukorvi" olgu esilehel KÕIGIL toodetel samal kõrgusel): kaardid venivad nüüd
   uuesti rea KÕRGEIMA kaardi kõrguseni (stretch) ja nupp lükatakse ise alla (margin-top:auto nupu enda reeglis allpool).
   v1.7.5 viga ("tühi ruum nupu ja kaardi serva vahel") tekkis, kuna alla lükati kaardi VIIMANE laps, mis polnud enam
   nupp; nüüd lükatakse alla nupp ise, olenemata sellest, mis on DOM-is tema järel. Pealkirju ei lõigata. */
.msp-sale-products.woocommerce:not(.msp-carousel) ul.products {
	align-items: stretch !important;
}
.msp-sale-products.msp-carousel ul.products {
	align-items: stretch !important;
}
.msp-sale-products.woocommerce ul.products li.product > *:last-child {
	margin-top: 0 !important;
}
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: #123f6e !important;
	transform: translateY(-1px);
}
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button.loading {
	opacity: 0.6;
}
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button.added {
	background: #3a7d34 !important;
}
/* Divi teema lisab GLOBAALSELT kõikidele .woocommerce a.button-tüüpi
   linkidele oma ETmodules-ikoonifondiga noole (::after, content:"5" ->
   renderdub noolena hõljutusel) - klient nägi seda DevTools'is oma nupu
   KESKEL (kuna nupu sisu on siin keskjoondatud, mitte Divi vaikimisi
   vasakjoondatud). Eemaldame selle - meil on juba oma JS-i lisatud
   ostukorvi-ikoon (vt msp-carousel.js), mis pole sellest puudutatud. */
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button::after {
	content: none !important;
	display: none !important;
}
.msp-sale-products .msp-btn-icon { flex-shrink: 0; }
.msp-sale-products.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 0.78em;
	color: #3a7d34;
}

/* =====================================================================
   "LISA VÕRDLUSESSE" IKOON-NUPP - pildi ALUMISES paremas nurgas. Sisse/
   välja lülitatav admin seadetest (show_compare) - vt .msp-hide-compare
   allpool.

   ASUKOHT: TEADLIKULT alumine, mitte ülemine parem nurk - "Sinu võit"
   silt (.tms-savings-tag, vt ülal) on JUBA püsivalt üleval paremal
   (kliendi selgesõnalisel soovil, vt selle reegli kommentaari) ja
   "Rõhutatud" kujundusel on "-X%" silt üleval vasakul (.msp-discount-
   ribbon allpool) - üleval parem oleks seega otseses konfliktis "Sinu
   võit" sildiga. Kasutame --msp-img-height muutujat (sama, mis pildi
   enda kõrgus, admin seadetest/shortcode'ist), et ikoon jääks ALATI
   pildi alumisse serva, sõltumata sellest, kui kõrge pilt parasjagu on.

   position:relative peab kehtima li.product'il KÕIGI KOLME kujunduse
   puhul, et absoluutne positsioneerimine käiks õige elemendi (tootekasti,
   mitte mõne kaugema esivanema) suhtes - "Kaart" ja "Rõhutatud" said selle
   juba oma kujunduse reeglitest, "Minimalistlik" mitte, seega kinnitame
   selle siin veel kord ÜLDISELT, kõigi jaoks (dubleerimine on kahjutu). */
.msp-sale-products.woocommerce ul.products li.product {
	position: relative;
}

.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: calc(var(--msp-img-height, 160px) - 40px);
	right: 8px;
	z-index: 4;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(28, 31, 34, 0.12);
	background: #fff;
	color: #123f6e;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn:hover,
.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn:focus {
	background: #123f6e;
	border-color: #123f6e;
	color: #fff;
}

.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn[aria-pressed='true'] {
	background: #123f6e;
	border-color: #123f6e;
	color: #fff;
}

.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn .mpc-icon {
	width: 15px;
	height: 15px;
	pointer-events: none;
}

.msp-hide-compare .mpc-compare-btn {
	display: none !important;
}

/* mate-product-compare enda tekstisilt jääb siin peidetuks - kasutame
   selle asemel allolevat hõljutusvihjet, et nupp ise jääks väikeseks
   ikooniks, mitte täispika sildiga nupuks. */
.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn .mpc-compare-label {
	display: none;
}

/* Vihje ilmub ÜLES (üle pildi) - nupp ise on pildi alumises servas, nii
   et üleval on selle jaoks piisavalt ruumi ja see jääb visuaalselt
   pildi peale, mitte hinna/nupu rea kohale allpool. */
.msp-sale-products.woocommerce ul.products li.product .msp-compare-tooltip {
	position: absolute;
	bottom: calc(100% + 9px);
	right: 0;
	background: #1c1f22;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	padding: 5px 9px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	transform: translateY(4px);
	z-index: 5;
}

.msp-sale-products.woocommerce ul.products li.product .msp-compare-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 12px;
	border: 5px solid transparent;
	border-top-color: #1c1f22;
}

.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn:hover .msp-compare-tooltip,
.msp-sale-products.woocommerce ul.products li.product .mpc-compare-btn:focus .msp-compare-tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* "Kaart" kujundusel on li.product endal padding (12px 12px 16px, vt
   allpool "2) Kaart" reeglid, v1.8.4-st ühtlustatud mate-new-products
   plugina SAMA väärtusega, et kaks sektsiooni näeks visuaalselt
   identsed välja) - pilt algab seetõttu 12px võrra allpool/paremal,
   mitte täpselt li.product enda ülemisest/paremast servast, nagu
   "Minimalistlik"/"Rõhutatud" puhul. Nihutame ikooni sama 12px võrra, et
   see jääks ka "Kaardi" kujundusel täpselt pildi (mitte kaardi enda)
   alumisse paremasse nurka. */
.msp-sale-products.msp-style-card.woocommerce ul.products li.product .mpc-compare-btn {
	top: calc(var(--msp-img-height, 160px) - 40px + 12px);
	right: 20px;
}

/* ---- 1) Minimalistlik: vaikne, aga sooduhind ikkagi selgelt eristuv -
   piirjoonega "pill" (mitte täidisega), et jääda tagasihoidlikumaks ---- */
.msp-sale-products.msp-style-minimal.woocommerce ul.products li.product .price ins {
	background: transparent !important;
	border: 2px solid var(--msp-accent);
	color: var(--msp-accent) !important;
	font-size: 1.05em;
	box-shadow: none;
}

/* ---- 2) Kaart: raam, ümarad nurgad, hõljutamisel tõusev vari + aktsentjoon ---- */
.msp-sale-products.msp-style-card.woocommerce ul.products li.product {
	position: relative;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 12px 12px 16px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--msp-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
	z-index: 2;
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 22px -16px rgba(0, 0, 0, 0.28);
	border-color: #ccc;
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product:hover::before {
	transform: scaleX(1);
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product img {
	border-radius: 4px;
	transition: transform 0.35s ease;
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

.msp-sale-products.msp-style-card.woocommerce ul.products li.product .price ins {
	font-size: 1.05em;
}

/* ---- 3) Rõhutatud: suurem hind + "-X%" silt pildi nurgas ---- */
.msp-sale-products.msp-style-bold.woocommerce ul.products li.product {
	position: relative;
}

/* "-X%" silt, pildi ülemises vasakus nurgas (v1.9.0-st taas AINULT see -
   varem (v1.8.2-v1.8.4) elas siin koos ka mate-delivery-time plugina
   tarneaeg-ikoon, ühises "msp-discount-ribbon-row" rühmas, aga tarneaeg
   kolis kaardi tekstiossa lihtsa tekstireana, vt tooriistakeskus-modern-
   shop plugina content-product.php ".tms-card-facts-row" - vt ka
   render_discount_ribbon() kommentaari class-msp-shortcode.php failis).
   tooriistakeskus-modern-shop plugina enda "-X%" versioon on selle
   kujunduse ajaks teadlikult välja filtreeritud, vt "tms_show_discount_badge"
   filtrit render() meetodis, et vältida kahte kattuvat "-X%" silti. */
.msp-discount-ribbon {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	background: var(--msp-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.msp-sale-products.msp-style-bold.woocommerce ul.products li.product .price {
	margin-top: 4px;
}

.msp-sale-products.msp-style-bold.woocommerce ul.products li.product .price del {
	/* "display:block" EEMALDATUD (v1.9.1-st) - sundis tavahinna ALATI
	   omaenda reale, isegi kui ".price" nüüd nowrap/nowrap-flex on. Vt
	   ülal ".msp-sale-products...li.product .price" kommentaari - klient
	   soovis tavahinna ja soodushinna ALATI samale reale, ka "Rõhutatud"
	   kujundusel. */
	font-size: 0.85em;
}

.msp-sale-products.msp-style-bold.woocommerce ul.products li.product .price ins {
	font-size: 1.2em;
}

/* ═══ SEKTSIOONIPAIS MAKETI JARGI (11.09.2026, PDF lk 1) ═══
   Kolm erinevust maketiga:
     1. pealkiri oli Barlow Condensed SUURTAHTEDES 30px
        -> IBM Plex Sans 700, lausekiri, 26px, navy
     2. „Vaata koiki" link oli sektsiooni ALL keskel -> PAISEREAL paremal
     3. pealkirja ees oli ikoon -> maketil seda ei ole
   Markup jaab alles (ikoon peidetud, mitte kustutatud), et vana
   kujundus oleks vajadusel taastatav. */
.msp-sale-header{ justify-content:space-between; gap:16px; flex-wrap:wrap; }
.msp-sale-header-icon{ display:none; }
.msp-sale-header-title{
  font-family:'IBM Plex Sans', sans-serif !important;
  text-transform:none !important;
  font-size:26px !important;
  font-weight:700;
  line-height:1.2;
  color:#123F6E;
  margin:0;
}
.msp-view-all-link--head{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px; font-weight:600; line-height:1.2;
  color:#123F6E; text-decoration:none;
  margin-left:auto;   /* lukustab lingi paisereal PAREMALE */
}
.msp-view-all-link--head:hover{ text-decoration:underline; }
@media (max-width:640px){
  .msp-sale-header-title{ font-size:21px !important; }
  .msp-view-all-link--head{ font-size:14px; }
}

/* ═══ TAUSTARIBA NAGU „POPULAARSED KATEGOORIAD" (11.09.2026) ═══
   Sama toon (#F6F8FB) JA sama laius — taust järgib Divi rida, täpselt
   nagu kategooriate riba. */
.msp-sale-wrap {
	/* ⚠ 100vw VALJAMURRE EEMALDATUD 11.09.2026.
	   Ehitasin selle eeldusel, et „Populaarsed kategooriad" riba on
	   taislaiuses. EI OLE: .tkc-wrap-il ei ole max-width'i, aga ta on
	   Divi rea SEES, mis annab talle laiusepiirangu. Minu valjamurre
	   tegi need kolm riba seega EESKUJUST LAIEMAKS, mitte samaks.
	   Tavaline background jargib nuud sama Divi rida. */
	/* ⚠ SININE TAUST EEMALDATUD 11.09.2026 kasutaja otsusel. Riba lisati
	   selleks, et sektsioon näeks välja nagu „Populaarsed kategooriad".
	   Kasutaja otsustas, et seda siin ei taheta. Polstrid JÄÄVAD — need
	   annavad sektsioonile ruumi ka ilma nähtava ribata.
	   Taastamiseks: `background: #F6F8FB;`. */
	padding-top: 34px;
	padding-bottom: 38px;
}

/* Kollane alajoon pealkirja all EEMALDATUD 11.09.2026 — maketil (PDF lk 1)
   seda ei ole ja „Populaarsed kategooriad" pealkirjal samuti mitte.
   `content:none` tuhistab ::after ploki, jattes selle koodi alles. */
.msp-sale-header-title::after { content: none !important; }

/* Riba korgus TAPSELT nagu „Populaarsed kategooriad" (11.09.2026).
   Lauaarvutis olid vaartused juba samad (34/38px). ERINEVUS OLI MOBIILIS:
   kategooriatel on alla 900px ulekirjutus 24/26px, siin seda ei olnud,
   seega riba jai telefonis teistest korgemaks. */
@media (max-width: 900px) {
	.msp-sale-wrap { padding-top: 24px; padding-bottom: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HINNAD JA PEALKIRJAD MAKETI VÄRVIDES (11.09.2026)

   Punane on MÕÕDETUD, mitte pakutud: võtsin maketipildist (PDF lk 1) kõigi
   viie kaardi soodushinna teksti ja filtreerisin välja punased pikslid
   (6055 tk). Kõige sagedasem toon on #F00000/#F80000 ja tumedaim tuum
   #F50300 — roheline ja sinine on seal praktiliselt NULL. Seega maketi
   punane EI OLE summutatud tellisepunane (--tms-danger #B23A34), vaid
   hele, peaaegu puhas punane. Kasutaja valis selgesõnaliselt maketi
   punase, seega #F00000.

   ⚠ MIKS NII PALJU SELEKTOREID: kollane „pill" ei ole ühes reeglis. Kolm
   kujundusvarianti (minimal/card/bold) kirjutavad `.price ins` omaenda,
   KÕRGEMA spetsiifilisusega reeglitega üle (0,6,2 vs baasi 0,5,2). Kui
   loetleks siin ainult baasi, jääks pill „Minimalistlikul" kujundusel
   alles ja lahendus töötaks ainult ühel kolmest seadest. Seetõttu on kõik
   neli varianti kirjas.

   Vana kollane pill jääb koodi alles (ülal, read 447 ja 839/891/939) —
   see siin tühistab selle, ei kustuta. Taastamiseks piisab selle ploki
   eemaldamisest.
   ═══════════════════════════════════════════════════════════════════════ */

.msp-sale-products.woocommerce ul.products li.product .price ins,
.msp-sale-products.msp-style-minimal.woocommerce ul.products li.product .price ins,
.msp-sale-products.msp-style-card.woocommerce ul.products li.product .price ins,
.msp-sale-products.msp-style-bold.woocommerce ul.products li.product .price ins {
	/* Maketis on soodushind LIHTNE punane rasvane tekst — ei täidist,
	   ei ümarust, ei varju, ei piirjoont. */
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: #F00000 !important;
	font-weight: 700 !important;
	font-size: 1.15em;
	text-decoration: none !important;
}

/* Tavahind: hall läbikriipsutatud — sama, mis maketis. Värvi ei muuda,
   aga kindlustame, et „Minimalistlik" variant ei jäta talle piirjoont. */
.msp-sale-products.woocommerce ul.products li.product .price del {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Toote pealkiri: maketis navy (#11377B mõõdetuna), mitte must #1c1f22. */
.msp-sale-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #123F6E;
}

/* ⚠ HOVER: vana väärtus oli `var(--msp-accent)` = kollane #f1d949 VALGEL
   kaardil — kontrastisuhe ~1.5:1, st hiirega peale minnes tekst sisuliselt
   KADUS. See oli viga maketist sõltumata. Tumedam navy annab ~9:1. */
.msp-sale-products.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: #0A2A5A;
}

/* ⚠ „-X%" silt oli VALGE tekst kollasel (kontrast ~1.6:1). Maketis on must,
   ja poe enda .tms-discount-badge kasutab samuti tumedat (--tms-accent-ink). */
.msp-discount-ribbon {
	color: #201804;
}

/* Sektsioonipealkiri TÄPSELT nagu „Populaarsed kategooriad": 25px ja
   letter-spacing -0.01em. Varasem ülekirjutus unustas letter-spacing'u
   lähtestada, seega kehtis edasi vana +0.02em Barlow Condensed'i ajast. */
.msp-sale-header-title{
  font-size:25px !important;
  letter-spacing:-0.01em;
}
@media (max-width:640px){
  .msp-sale-header-title{ font-size:20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KOMPAKTNE KAART MAKETI PROPORTSIOONIDES (11.09.2026)

   MÕÕTSIN maketilt (PDF lk 1) esimese kaardi piirjoone ja iga sisuploki
   piksliteks. Kaardi laius 340px, kõrgus 369px — kaart on kõigest 1.085x
   oma laiusest kõrge. Vahed suhtena kaardi laiusesse:

       pildikast         47.6 %       pealkiri -> Laos   4.4 %
       pilt -> pealkiri   3.2 %       Laos -> hind       4.1 %
       pealkirja reavahe  7.9 %       hind -> nupp       2.6 %
       nupp              15.9 %       alapolster         3.8 %

   ⚠ JUURPÕHJUS EI OLNUD VAHED, VAID PILDIKAST.
   `.tms-card-media` on `aspect-ratio: 1 / 1`, seega pildikast on ALATI
   RUUT — sama kõrge kui kaart on lai (~226px). Pilt ise on aga
   `height: var(--msp-img-height)` ehk vaikimisi 160px. Vahe — ligi 70px puhast
   valget tühja ruumi — jäi kasti sisse iga kaardi kohta. Maketis on
   pildikast 47.6 % kaardi laiusest, mitte 100 %.

   ⚠ SIIT TULI KA PILTIDE LÕIKAMINE.
   `.tms-card-media` on ühtlasi `overflow: hidden`. Kui admin seade
   „Pildi kõrgus" on suurem kui kaardi laius (seade lubab 60-400px, kaart
   on ~200px lai), ulatub pilt ruudust VÄLJA ja kast lõikab selle ära.
   `object-fit: contain` ei aita — see hoiab ära pildi enda moonutamise,
   mitte ümbritseva kasti kärpimise. Nüüd on kast TÄPSELT pildi kõrgune,
   seega ülevoolu ei saa tekkida ja lõikamine on võimatu, ükskõik mis
   väärtus seades on.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Pildikast: ruudu asemel täpselt pildi kõrgune. */
.msp-sale-products .tms-card-media {
	aspect-ratio: auto !important;
	height: var(--msp-img-height, 160px) !important;
	max-width: none !important;
}
.msp-sale-products.woocommerce ul.products li.product a img,
.msp-sale-products.woocommerce ul.products li.product img {
	/* ⚠ OLI `height: 100%`, MIS OLI VIGA — ma ei olnud siis veel näinud
	   renderdatud markupi. Pilt EI OLE `.tms-card-media` otsene laps:
	   vahel on Divi `<span class="et_shop_image">`, mille kõrgus on `auto`.
	   CSS ütleb, et protsentkõrgus `auto`-kõrguse vanema vastu laheneb ISE
	   `auto`-ks — pilt oleks võtnud oma loomuliku kõrguse (300px) ja
	   `overflow:hidden` oleks selle 160px kasti sees ÄRA LÕIGANUD. Täpselt
	   see, mida parandama pidin. Selgesõnaline väärtus ei sõltu ühestki
	   vahekihist. */
	height: var(--msp-img-height, 160px) !important;
}

/* 2) Tekstiosa vahed maketi järgi. Vana `gap: 6px` LIITUS iga elemendi
      omaenda marginiga, seega iga vahe oli tegelikult margin + 6px. */
.msp-sale-products .tms-card-body {
	padding: 10px 12px 12px !important;
	gap: 0 !important;
}
.msp-sale-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px !important;
	font-size: 0.95em;
	line-height: 1.25;
}
/* „Laos (8 tk)" rida — maketis on see pealkirja all tihedalt. */
.msp-sale-products .tms-card-facts-row {
	margin: 0 0 6px !important;
}
.msp-sale-products .tms-card-price-row {
	margin-top: 0 !important;
	min-height: 0 !important;
}
.msp-sale-products.woocommerce ul.products li.product .price {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 3) Nupp: maketis 15.9 % kaardi laiusest ≈ 36px, meil oli 46px.
      ⚠ `flex` LÜHIVORMINGUT PEAB MUUTMA KOOS `height`-iga — kaart on
      flex-veerg ja flex-basis võidab height'i üle (vt selle faili
      v1.37.18 kommentaari ülal). Ainult height jätaks nupu 46px peale. */
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button,
.msp-sale-products.woocommerce ul.products li.product .button {
	height: 38px !important;
	flex: 0 0 38px !important;
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

/* ═══ „Vaata kõiki ..." link maketi järgi (11.09.2026) ═══
   Maketilt mõõdetud: teksti toon #3C67C2, noole toon #042B9D — mõlemad
   selgelt HELEDAM ja küllastunum sinine kui pealkirja navy (#011B64
   mõõdetuna). Link ei ole maketis sama värvi mis pealkiri.
   Teksti ja noole vahe on maketis 25px / skaala ≈ 13px. */
.msp-view-all-link--head {
	color: #1E5BC6;
	gap: 12px;
}
/* ⚠ Vana reegel `.msp-view-all-link .msp-carousel-icon { 14px }` EI KEHTI
   enam selle lingi kohta — ikoonil on nüüd oma klass. Maketi noole
   laius on 20px pildil ehk ~11px reaalselt; 16px annab sama „pika"
   mulje 15px teksti kõrval. */
.msp-view-all-icon {
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
}
.msp-view-all-link--head:hover {
	color: #14459B;
}

/* „Sinu võit" silt (kui admin on selle sisse lülitanud) — maketis seda ei
   ole, aga kuna ta on seadetes valitav, teeme ta vähemalt tihedaks. */
.msp-sale-products.woocommerce ul.products li.product .msp-savings-badge {
	margin: 3px 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MAKETI TÄPSUSTUSED (11.09.2026, 2. voor) — kasutaja tagasiside elusalt
   lehelt, mitte enam ainult PDF-ilt.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) „-37 %" silt: AINULT kollane taust, ikoonita.
      Ikoon (hinnasildi kuju) on `.tms-discount-icon` sildi sees. Peidame
      selle igal pool, olenemata sildi hetkeasukohast (see on rännanud
      mitu korda - vt "-X% SILT..." kommentaari palju allpool täpse
      praeguse asukoha/suuruse jaoks, mis MÄÄRAB üle siinse "padding"/
      "font-size" oma suurema täpsusastme tõttu - jätame need siin
      ainult "gap:0"-ks, ülejäänu on nüüd allpool). */
.msp-sale-products .tms-discount-icon {
	display: none !important;
}
.msp-sale-products .tms-discount-badge {
	gap: 0 !important;
}

/* 2) MINIMAALSED VAHED (kasutaja: „minimaalne vahe" kõigi nelja vahel).
      Varem 6px igal pool + 10px ülapolster. Nüüd 2px ja 6px. */
.msp-sale-products .tms-card-body {
	padding: 6px 10px 10px !important;
	gap: 0 !important;
}
.msp-sale-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 2px !important;   /* pilt -> pealkiri (ülapolster) ja pealkiri -> Laos */
}
.msp-sale-products .tms-card-facts-row {
	margin: 0 0 2px !important;   /* Laos -> hind */
}
.msp-sale-products .tms-card-price-row {
	margin-top: 0 !important;
	min-height: 0 !important;
}
.msp-sale-products.woocommerce ul.products li.product .add_to_cart_button,
.msp-sale-products.woocommerce ul.products li.product .button {
	margin-top: auto !important;   /* nupp alati kaardi alaserva (kõik nupud samal kõrgusel), vt stretch ülal */
}
.msp-sale-products.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	margin-bottom: 4px !important;   /* minimaalne vahe: hind -> Lisa ostukorvi (kõrgeimal kaardil) */
}

/* 3) „Vaata kõiki" ilma kastita.
      ⚠ Baasreegel `.msp-view-all-link` (selle faili algus) annab lingile
      `padding: 10px 20px`, `border: 2px solid` ja `border-radius: 999px` —
      ehk ümara raamiga nupu. Kui ma lingi paisereale tõstsin, lisasin ainult
      `--head` modifikaatori JA UNUSTASIN need lähtestada, seega kast jäi
      alles. Maketis on seal lihtne tekst noolega. Hover'i täidis peab samuti
      kaduma — ilma raamita täidis oleks lihtsalt värviplekk teksti taga. */
.msp-view-all-link--head {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}
.msp-view-all-link--head:hover,
.msp-view-all-link--head:focus {
	background: none !important;
	color: #14459B !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVALEHE SEKTSIOONIDE VAHED KOMPAKTSEMAKS (14.09.2026)

   MÕÕTSIN enne muutmist, kust vahed tegelikult tulevad. Avalehe kõik viis
   sektsiooni on ÜHE Divi rea (`et_pb_row_0`) sees eraldi `et_pb_code`
   moodulitena, ja lehe enda inline-CSS ütleb:

       .et_pb_code_0, _1, _2, _3, _4 { margin-top:0!important;
                                       margin-bottom:0!important;
                                       padding-top:0; padding-bottom:0 }

   ⚠ SEEGA DIVI EI ANNA VAHEDESSE ÜHTEGI PIKSLIT. Kogu vahe tuli MEIE ENDA
   ümbriste püstpolstrist. Divi seadetes nokitsemine poleks midagi muutnud.

   Mõõdetud vahed sektsioonide VAHEL (alumine + järgmise ülemine):
       kategooriad -> bännerid   38 + 32 = 70px
       bännerid    -> soodus     32 + 34 = 66px
       soodus      -> uued       38 + 34 = 72px
       uued        -> teenused   38 +  0 = 64px  (+ ruudustiku 26px)

   Uus skeem: 20px üleval / 22px all igal sektsioonil -> vahe 42px
   (mobiilis 14/16 -> 30px). Ühtlane, mitte iga sektsioon isemoodi.
   ═══════════════════════════════════════════════════════════════════════════ */

.msp-sale-wrap{ padding-top:20px !important; padding-bottom:22px !important; }
@media (max-width:900px){
  .msp-sale-wrap{ padding-top:14px !important; padding-bottom:16px !important; }
}

/* ═══ „VAATA KÕIKI" LINK TÄPSELT NAGU „POPULAARSED KATEGOORIAD" (14.09.2026) ═══
   Eeskuju on `.tkc-collapsible .tkc-showall` (tkc-categories.css rida 167):
       color: var(--tkc-navy)  = #123F6E
       font-size: 14.5px
       font-weight: 600
       gap: 7px
       :hover -> ainult allajoonimine, VÄRV EI MUUTU

   ⚠ SEE TÜHISTAB MINU VAREMA MAKETIST MÕÕDETUD VÄÄRTUSE. Mõõtsin maketilt
   heledama sinise (#1E5BC6, nool #042B9D) ja panin selle. Kasutaja otsustas,
   et link peab olema kategooriate omaga ühte värvi — kasutaja otsus võidab
   maketi mõõtmise üle. Vana väärtus on ajaloos ülalpool alles. */
.msp-view-all-link--head {
	color: #123F6E !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	gap: 7px !important;
}
.msp-view-all-link--head:hover,
.msp-view-all-link--head:focus {
	color: #123F6E !important;
	text-decoration: underline !important;
	background: none !important;
}
/* Nool sama suur, mis kategooriatel (14px, mitte 16px). */
.msp-view-all-icon {
	width: 14px;
	height: 14px;
}
@media (max-width:640px){
	.msp-view-all-link--head { font-size: 13.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIIL: KARUSSELLI NOOLED PEALKIRJA KORVALE (14.09.2026)

   ⚠ PROBLEEM: nooled on `position:absolute; top:50%` oma karussellialas ja
   katsid mobiilis pealkirja ning kaardid. Kitsal ekraanil ei ole neil
   kaartide korval ruumi, kuhu minna.

   ⚠ MIKS MITTE MARKUPI LIIGUTADA: nupud on `.msp-sale-products` SEES ja
   karusselli JS otsib neid tapselt sealt
   (`wrapper.querySelector('.msp-carousel-prev')`). Nende tostmine paisesse
   lohuks karusselli — nupud lakkaksid tootamast.

   ⚠ LAHENDUS ILMA MARKUPITA: absoluutne element positsioneerub lahima
   `position: relative` esivanema jargi. Kui teha `.msp-sale-products`
   mobiilis `static`, hupab see ankur uhe tasandi ulespoole —
   `.msp-sale-wrap`-ile, mis sisaldab KA paist. Nooled saavad liikuda pealkirja
   kohale, jaades DOM-is tapselt sinna, kus JS neid ootab.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	/* Ankur uhe tasandi ulespoole — vt selgitust ulal. */
	.msp-sale-wrap { position: relative; }
	.msp-sale-products.msp-carousel { position: static; }

	/* Pealkirjarida: pealkiri KESKEL, molemal pool ruum nooltele.
	   44px = noole 32px + 12px ohku, nagu soovitud. */
	.msp-sale-header {
		justify-content: center;
		align-items: center;
		min-height: 36px;
		padding: 0 44px;
		text-align: center;
		position: relative;
	}
	.msp-sale-header-title {
		text-align: center;
		margin: 0 !important;
	}

	/* „Vaata koiki" omaette reale keskele — paisereal ei ole talle enam
	   ruumi, kui molemas servas on nool. */
	.msp-view-all-link--head {
		flex: 0 0 100%;
		justify-content: center;
		margin: 10px 0 0 !important;
	}

	/* Nooled pealkirjareale.
	   top = umbrise ulapolster (14px) + poole paisereast (18px) = 32px */
	.msp-sale-products.msp-carousel .msp-carousel-nav {
		top: 32px !important;
		transform: translateY(-50%) !important;
	}
	.msp-sale-products.msp-carousel .msp-carousel-prev { left: 0 !important; }
	.msp-sale-products.msp-carousel .msp-carousel-next { right: 0 !important; }

	/* Kitsal ekraanil ei ole varju vaja — nupud ei ole enam piltide peal. */
	.msp-sale-products.msp-carousel .msp-carousel-nav {
		width: 32px !important;
		height: 32px !important;
		box-shadow: none !important;
		border-color: #CFD8E3 !important;
	}
	.msp-sale-products.msp-carousel .msp-carousel-nav .msp-carousel-icon {
		width: 14px;
		height: 14px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOOLED TOOTE PEALKIRJA KORGUSELE (14.09.2026, parandus)

   ⚠ EELMINE KATSE OLI VALE. Ma tostsin nooled SEKTSIOONI pealkirja
   („Soodustooted") juurde. Soov oli TOOTE pealkirja juurde — see on
   kaardil, pildi all.

   TUHISTAN eelmise ploki taielikult (allpool `top`, `left`, `right`,
   paise tsentreerimine ja „Vaata koiki" omaette rida) ja panen nooled
   arvutatud kohta.

   ARVUTUS. Kaardi ulesehitus ulalt alla:
       pildikast     var(--msp-img-height)      vaikimisi 160px
       tekstiosa polster                6px
       toote pealkiri                   ~20px (0.95em x 1.25 reakorgus)

   Pealkirja esimese rea KESKPUNKT on seega pildi korgus + 6 + 10 = +16px.
   Kasutan `var()`-i, mitte fikseeritud arvu: pildi korgus on admini seade
   („Pildi korgus", 60-400px) ja fikseeritud arv lakkaks toetamast kohe,
   kui keegi seda muudab.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	/* ── Tuhista eelmine katse ────────────────────────────────────────── */
	.msp-sale-header {
		justify-content: space-between;
		min-height: 0;
		padding: 0;
		text-align: left;
	}
	.msp-sale-header-title { text-align: left; }
	.msp-view-all-link--head {
		flex: 0 0 auto;
		margin-left: auto !important;
		margin-top: 0 !important;
	}

	/* Ankur tagasi karussellile — nooled positsioneeruvad jalle KAARDI
	   ala jargi, mitte umbrise jargi. */
	.msp-sale-wrap { position: static; }
	.msp-sale-products.msp-carousel { position: relative; }

	/* ── Nooled toote pealkirja kohale ────────────────────────────────── */
	.msp-sale-products.msp-carousel .msp-carousel-nav {
		top: calc(var(--msp-img-height, 160px) + 16px) !important;
		transform: translateY(-50%) !important;
		width: 32px !important;
		height: 32px !important;
		/* Vari tagasi: nupud on nuud jalle kaardi peal ja peavad taustast
		   eristuma. */
		box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3) !important;
	}
	.msp-sale-products.msp-carousel .msp-carousel-prev { left: 2px !important; }
	.msp-sale-products.msp-carousel .msp-carousel-next { right: 2px !important; }
	.msp-sale-products.msp-carousel .msp-carousel-nav .msp-carousel-icon {
		width: 14px;
		height: 14px;
	}

	/* ⚠ OHK NOOLE JA PEALKIRJA VAHELE. Ilma selleta jookseks pealkirja
	   tekst noole alla — nool on absoluutne ja ei touka teksti ise eemale.
	   34px = noole 32px + 2px serv. */
	.msp-sale-products.msp-carousel .tms-card-body .woocommerce-loop-product__title {
		padding-left: 34px;
		padding-right: 34px;
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOOLED TAPSELT PEALKIRJA KESKELE + VORDLUSNUPP ULES (14.09.2026)

   ⚠ MOOEDETUD EKRAANIPILDILT, mitte arvutatud. Eelmine `+16px` tuli kaardi
   ulesehituse arvutusest ja eksis. Pildilt mooedetud (seade 946px, DPR 2.41):

       noole nooleke   kesk y 716
       toote pealkiri  kesk y 758
       vahe            43 seadme px = 17.9 CSS px

   Seega `+16px` -> `+34px`. Arvutus eeldas, et tekstiosa polster on 6px ja
   pealkirja reakorgus 20px; tegelikkuses on vahe suurem — tootekaardi mall
   lisab vahele veel brandi/laoseisu jaoks reserveeritud ruumi.

   ⚠ VORDLUSNUPP: oli pildi ALL paremal (`top: calc(pilt - 40px + 12px)`),
   kus ta jai laoseisu ja tarneaja ikooni lahedale. Mobiilis on soov saata
   ta pildi ULEMISSE paremasse nurka — seal on tuhi ala ja ta ei sega
   uhtegi teksti.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	.msp-sale-products.msp-carousel .msp-carousel-nav {
		top: calc(var(--msp-img-height, 160px) + 34px) !important;
	}

	/* Vordlusnupp pildi ulemisse paremasse nurka. */
	.msp-sale-products .mpc-compare-btn,
	.msp-sale-products .tms-card-media .mpc-compare-btn--card,
	.msp-sale-products .msp-compare-btn {
		top: 10px !important;
		right: 10px !important;
		bottom: auto !important;
		left: auto !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIKK TOOTE PEALKIRI MURDUB, EI JOOKSE NOOLE ALLA (14.09.2026)

   ⚠ SAMA REEGEL ON JUBA ULALPOOL ("OHK NOOLE JA PEALKIRJA VAHELE") — ja ta
   EI TOOTANUD. Miks: seal on `padding-left/right` ILMA `!important`-ita.
   Sama reegli `text-align: center` moojub (pealkiri ON keskel), aga polster
   mitte — jarelikult voidab polstri mingi suurema kaaluga deklaratsioon
   (Divi laeb `#page-container`-iga algavaid valijaid, mille ID-osa loob
   kaalu, mida neli klassi ei uleta).

   ⚠ MIKS SEE VALJA PAISTIS ALLES NUUD: enamik pealkirju mahub ka polstrita
   ara. Katki laks alles „Oksaloikur Fiskars SingleStep™ L28 (S), vaheliti
   tera" — rida 298 CSS px, kaardi sisulaius 336, polsterdatud laius 268.
   Brauser murdis rea 336 pealt, mitte 268 pealt, ja esimene rida jooksis
   molemast servast noolte alla.

   ⚠ `overflow-wrap: break-word` ON SIIN VAJALIK ERALDI. Polster uksi ei
   aita sona vastu, mis ON iseenesest laiem kui vaba ruum (nt pikk
   liitsona voi tootekood) — selline sona ei murdu ja liuguks ikka noole
   alla. `break-word` murrab TAPSELT sellisel juhul ka sona seest, aga
   jatab tavalised sonad puutumata.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.msp-sale-products.msp-carousel .tms-card-body .woocommerce-loop-product__title {
		/* 38px = noole 32px + 2px serv + 4px ohku. */
		padding-left: 38px !important;
		padding-right: 38px !important;
		box-sizing: border-box !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KAMPAANIA INFO KOMPAKTSENA + KÕIK KAARDID ÜHTLASE KÕRGUSEGA (15.09.2026,
   asukoht muudetud samal päeval 2. voorus)

   1. VOOR: kampaania nimi + "Sinu võit: X €" olid ÜHEL tekstireal toote
   nime all (tms-tokens.css ".tms-card-campaign-line"). Selles kompaktses
   (~300px laiuses) makedijärgses kaardis oli see liiga kitsas - reaalne
   sisu (nt "STIHL soodushind" + "Sinu võit: 700,00 €") ei mahtunud
   üheskoos ühele reale, isegi kitsendatuna.

   2. VOOR (praegune lahendus, kliendi soov: "sätime kampaanianime
   asukohta... palju kompaktsemalt tervikut"): KAMPAANIA NIMI kolis
   content-product.php-s pildi peale nurgasildiks (vt tms-tokens.css
   ".tms-card-campaign-badge" - ÜLEVAL PAREMAL, "-X%" sildi vastasnurgas).
   Tekstireal ".tms-card-campaign-line" on nüüd AINULT "Sinu võit: X €" -
   lühem, mahub kergesti, ei pea enam nime ruumi jagama.

   Kaardid ei ühtlustu iseenesest, kuna "ul.products li.product" on siin
   TEADLIKULT "align-items: flex-start" all (vt "PARANDUS v1.7.5"
   kommentaari ülalpool - "stretch" tekitas omal ajal tühja ruumi nupu ja
   kaardi serva vahele) - seega msp-carousel.js equalizeCampaignHeights()
   reserveerib SELLE rea jaoks IGA kaardil (ka nendel, kus tootel
   kampaaniat pole - JS lisab neile nähtamatu platsihoidja) täpselt sama
   kõrguse, mis kõige pikemal real reas vaja läheb - nii jäävad kõik
   kaardid reas ühtlaselt sama kõrged, olenemata sellest, kas tootel
   kampaania juhtub olema.
   ═══════════════════════════════════════════════════════════════════════════ */

.msp-sale-products .tms-card-campaign-line {
	margin: 0 0 2px !important;
}
.msp-sale-products .tms-card-campaign-savings {
	font-size: .64rem !important;
}
.msp-sale-products .tms-card-media .tms-card-campaign-badge {
	padding: 3px 7px !important;
	font-size: .58rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   "-X%" SILT PILDIL TAGASI, ALUMISES VASAKUS NURGAS (15.09.2026, 4. voor)

   4. VOOR: "-X%" silt kolis "Lisa ostukorvi" nupu kõrvalt (3. voor,
   ajalugu allpool) tagasi PILDILE - kliendi soov: "paneme selle -%
   hoopis sinna reale, kus on võrdle ikoon aka vastaspoole vasakule".
   "Sama rida" = sama ankurduskontekst (".tms-card-media", vt
   tms-tokens.css - nii silt kui võrdlusnupp "position:absolute" SELLE
   sees), mitte tekstirida. "Vastaspoole vasakule" = ALUMINE VASAK nurk,
   peegelpildis võrdlusnupu ALUMISEST PAREMAST nurgast (vt allpool
   ".msp-style-card...mpc-compare-btn" - "top: calc(pilt-40px+12px);
   right:20px"). Silt kasutab TÄPSELT sama "top" arvutust mõlemal
   kujundustasemel (baas + "Kaardi" stiili täpsustus), ainult "left"
   "right" asemel - nii jäävad need alati sümmeetrilised, pildi all
   samal horisontaaljoonel, ükskõik millise "Soodustooted" kujundus-
   variandi (Minimalistlik/Kaart/Rõhutatud) admin valib.

   DOM-TASANDI liigutus (msp-carousel.js moveDiscountBadgeToImage()),
   mitte PHP malli muudatus - PHP-poolne vaikeasukoht (hinnarea sees)
   jääb ENDISELT kehtima kõigil teistel lehtedel (pood/kategooria,
   Seotud tooted).

   3. VOOR TAGASI VÕETUD: nupu-kõrvalise ".tms-card-cta-row" ümbrise ja
   väiksema nupu (32px, loodi AINULT sildile ruumi tegemiseks) reeglid
   eemaldatud - nupp taastub oma varasemale, "3) Nupp" reeglis (ülalpool)
   määratud kujule (38px, täislaius), kuna ta ei jaga enam rida sildiga. */
/* ═══════════════════════════════════════════════════════════════════════════
   "-X%" SILT KAARDI SERVAST VÄLJAS, 3D-EFEKTIGA (15.09.2026, 6. voor)

   Kliendi soov: "see -% oleks vasakul ääres kasti küljes kinni ja natuke
   kastid väljas selline 3d effekt tekiks". Selleks pidi silt kolima
   OMAETTE ASUKOHTA - VARASEM (5. voor) versioon oli ".tms-card-media"
   (pildikonteineri) laps ja piirdus SELLE box'i seest positiivse "left"
   väärtusega. NEGATIIVSE "left" jaoks (silt ulatub kaardi servast välja)
   on kaks takistust, mis pidid mõlemad lahenduse saama:

   1) Silt pidi kolima ".tms-card-media" seest KAARDI ENESE
      ("li.product") otseseks lapseks (vt msp-carousel.js
      moveDiscountBadgeToImage()) - "li.product" on juba "position:
      relative" (vt ülalpool), seega "left:-Npx" positsioneerub nüüd
      KAARDI, mitte pildi, vasaku serva suhtes.

   2) "li.product" (tms-tokens.css ".tms-product-card" baasreegel) on
      "overflow: hidden" - VAJALIK üldiselt pildi ümarate nurkade jaoks,
      AGA see lõikaks negatiivse "left"-iga sildi lihtsalt ära, mistõttu
      "väljaulatumise" efekt ei oleks üldse nähtav. Pildi enda ümarus on
      juba tagatud ".tms-card-media" OMA "overflow:hidden"-iga (vt
      tms-tokens.css) - seega "li.product" enda "overflow:hidden" on
      pildi jaoks üleliigne ja võib SIIN, ainult "Soodustooted" kaartidel,
      ohutult "visible"-ks muuta.

   "3D efekt" = tugev, selgelt nihutatud vari (mitte ainult pehme udu) -
   annab mulje, nagu silt oleks kaardi peale "kleebitud"/hõljuks selle
   kohal, mitte poleks tasapinnaline osa kaardist.

   ⚠ KÕRVALMÕJU, MIS TULI PARANDADA: "li.product" enda "overflow:hidden"
   oli SENI AINUS põhjus, miks pildi TERAVAD ülanurgad nägid kaardi enda
   ümarate nurkadega (var(--tms-radius-md)=10px baas, 8px "Kaardi" stiil)
   ühtlased välja - ".tms-card-media" ISE ei ole ümardatud, ainult
   "overflow:hidden". "overflow:visible" ülal oleks selle lõikamise
   kaotanud ja pildi nurgad oleks jäänud "läbi" kaardi ümarate nurkade
   TERAVALT paistma. Lahendus: anname ".tms-card-media" ENDALE sama
   ümaruse ÜLANURKADESSE - see rõngastab end nüüd OMA "overflow:hidden"
   kaudu, sõltumata "li.product" enda (nüüd "visible") omast. */
.msp-sale-products.woocommerce ul.products li.product {
	overflow: visible !important;
}
.msp-sale-products .tms-card-media {
	border-radius: var(--tms-radius-md) var(--tms-radius-md) 0 0 !important;
}
.msp-sale-products.msp-style-card .tms-card-media {
	border-radius: 8px 8px 0 0 !important;
}
/* Suurus ÜHTLUSTATUD võrdlusnupuga (kliendi soov, 7. voor) - see on
   32px kõrgune ring (vt ".mpc-compare-btn" ülalpool "height:32px").
   Silt on tekstiga pill, mitte ring, seega "height" (mitte padding)
   määrab kõrguse otse, et see täpselt 32px vastaks - "display:inline-
   flex;align-items:center" (baasreegel, vt tms-tokens.css) tsentreerib
   teksti selle kõrguse sees automaatselt. */
/* Sildi KUJU - "hinnasildi" ribakujund (kliendi soov, 8. voor, näidati
   kollast "-18%" silti pildiga - ümar vasak ots, terav parem ots, selge
   vari). Rakendame seda KÕIGILE sarnaselt: ümar "kork" vasakul
   (border-radius = pool kõrgusest, 32px/2 = 16px, et see oleks päris
   poolring, mitte lihtsalt ümar nurk) + kolmnurkne teravik paremal
   (::after, klassikaline CSS "border-trick" kolmnurk - servavärvid
   segavad, ainult "border-left" jääb nähtavale, moodustades
   kolmnurga). "box-shadow" ASENDATUD "filter:drop-shadow"-ga, kuna
   "box-shadow" järgib ainult elemendi enda RISTKÜLIKUKUJULIST kasti,
   mitte "::after" teraviku KUJU - vari jääks muidu teravikuta
   nähtavaks, nagu oleks kaks eraldi kujundit. "drop-shadow" arvutab
   varju kogu renderdatud SILUETI (sh pseudoelemendi) järgi. */
/* Kuju/asukoht ÜMBER POORATUD (18.09.2026, kliendi soov: "kinnitatud
   vasakule poole tootekasti külge, algab servast ja parem ots on ümar")
   - VAREM (17.09.2026) oli vasakul ümar kork, mis -9px'iga kaardi
   servast ÜLE ulatus ("3D efekt", 6. voor tagasiside). Klient vaatas
   tulemust avalehel uuesti ja soovis selle asemel SAMA mustrit, mis
   poe/kategooria üldvaate sildil (vt tms-tokens.css ".tms-discount-
   badge"): kandiline serv, mis TÄPSELT kaardi servast algab (mitte üle
   ei ulatu), ümar ots vabas suunas. "left:-9px" -> "left:0",
   "border-radius:16px 0 0 16px" -> "0 16px 16px 0". */
.msp-sale-products li.product > .tms-discount-badge {
	position: absolute !important;
	z-index: 3;
	top: calc(var(--msp-img-height, 160px) - 40px);
	left: 0;
	right: auto;
	margin-left: 0;
	height: 32px;
	padding: 0 14px 0 12px !important;
	font-size: .85rem !important;
	border-radius: 0 16px 16px 0 !important;
	box-shadow: none !important;
	filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .12)) drop-shadow(2px 6px 8px rgba(0, 0, 0, .3));
}
/* Kolmnurk-teravik EEMALDATUD (17.09.2026, kliendi soov: "paremast
   äärest kandiline") - silt on nüüd lihtne ristkülik. 18.09.2026: ümar/
   kandiline pooled vahetasid kohad (vt ülal), see reegel jääb samaks. */
.msp-sale-products li.product > .tms-discount-badge::after {
	display: none;
}
.msp-sale-products.msp-style-card.woocommerce ul.products li.product > .tms-discount-badge {
	top: calc(var(--msp-img-height, 160px) - 40px + 12px);
}