/* Mate Uued Tooted - esiotsa stiil.
   Struktuur ja põhimõtted on identsed Soodustoodete pluginaga (sama
   .msp-sale-wrap laius/padding loogika, sama karusselli mehaanika, sama
   kolm valitavat kujundust), aga klassinimede eesliide on siin "mnp-"
   (mitte "msp-"), et need kaks pluginat saaksid samal lehel kõrvuti
   töötada ilma CSS-i konfliktideta. */

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

/* ===== Ümbris ja pealkiri ===== */
.mnp-new-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 24px;
	box-sizing: border-box;
}
.mnp-new-wrap *,
.mnp-new-wrap *::before,
.mnp-new-wrap *::after {
	box-sizing: inherit;
}

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

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

.mnp-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;
}

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

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

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

.mnp-new-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;
}

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

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

/* ===== Ruudustik (layout="grid", vaikimisi) - kõik tooted ühel real, ilma
   kerimiseta (flexbox venitab neid vajadusel kitsamaks, sama loogika, mis
   Soodustoodete pluginal). ===== */

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

.mnp-new-products.woocommerce:not(.mnp-carousel) ul.products li.product {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
	float: none;
	display: flex;
	flex-direction: column;
}

@media (max-width: 640px) {
	.mnp-new-products.woocommerce:not(.mnp-carousel) ul.products {
		gap: 12px;
	}
}

/* Kaardi sisu (pilt/pealkiri/hind, WooCommerce'i enda tootelingi <a> sees)
   jääb oma loomulikku kõrgusesse - AINULT nupp (vt allpool .button reegel,
   margin-top:auto) lükatakse alati kaardi ALUMISSE serva, olenemata sellest,
   kas pealkiri mahub ühele või kahele reale. Seetõttu EI nulli me siin
   enam "viimase lapse" marginit üldiselt - vt täpsemat selgitust allpool
   nupu reegli juures. */

/* Kompaktsem, ühtlane pildi kõrgus (--mnp-img-height, administ muudetav). */
/* 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. */
.mnp-new-products .tms-card-media .et_shop_image {
	display: block !important;
	height: 100% !important;
	width: 100% !important;
}
.mnp-new-products.woocommerce ul.products li.product a img,
.mnp-new-products.woocommerce ul.products li.product img {
	width: 100% !important;
	height: var(--mnp-img-height, 160px) !important;
	object-fit: contain !important;
	background: #fff;
	display: block;
}

.mnp-new-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1em;
	font-weight: 700;
	margin: 12px 0 8px;
	line-height: 1.35;
	color: #1c1f22;
	transition: color 0.15s ease;
	/* Ei lõika pealkirja kunagi ära ega varja midagi - täisnähtav tekst.
	   Ühtlase kõrguse annab JS (vt mnp-carousel.js equalizeTitleHeights()),
	   mis mõõdab kõige pikema pealkirja tegeliku kõrguse ja annab selle
	   min-height'ina kõigile teistele sama sektsiooni pealkirjadele, nii
	   et hind algab alati samalt kõrguselt - ilma, et ükski pealkiri
	   jääks poolikuks.
	   TÜHISTAB (v1.4.9-st) tooriistakeskus-modern-shop plugina baasreegli
	   "-webkit-line-clamp:3; overflow:hidden;" (tms-tokens.css, lisatud
	   v1.37.23-s "Sinu võit"/nupu kõrguse ühtlustamise jaoks) - see
	   klammerdas SIINGI pealkirja 3 reale JA LÕIKAS PIKEMAD PEALKIRJAD
	   ÄRA, mis on täpselt vastupidine sellele, mida see plugin JS-iga
	   juba aastaid saavutab (klient andis tagasisidet, et pealkiri ei
	   tohi kunagi ära lõikuda ega millegi taha jääda). */
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
.mnp-new-products.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--mnp-accent);
}

/* Tootekoodi ja laoseisu näitamine/peitmine on admin seadetes valitav
   (Uued tooted -> Seaded -> Kuvamise seaded). Elemendid tulevad
   tooriistakeskus-modern-shop plugina tootekaardi mallist, kui see on
   aktiivne - kui mitte, pole neid elemente niikuinii ja reeglid on kahjutud. */
.mnp-new-products.mnp-hide-sku .tms-sku-tag {
	display: none !important;
}
.mnp-new-products.mnp-hide-stock .tms-stock-gauge {
	display: none !important;
}

.mnp-new-products .tms-card-brand {
	display: none !important;
}

.mnp-new-products.woocommerce ul.products li.product .price {
	font-size: 0.95em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* NOWRAP (v1.4.8-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. Sama
	   parandus tehti ka mate-sale-products plugina msp-frontend.css
	   failis, et mõlemad sektsioonid käituksid ühtemoodi. */
	flex-wrap: nowrap;
	margin-top: 8px !important;
	margin-bottom: 14px !important;
}

/* ---- Hind - sama "pill" väljanägemine, mis Soodustoodete pluginal ----
   Uued tooted ei ole tavaliselt sooduhinnaga, seega on siin tegu LIHTSA
   hinnaga (WooCommerce ei mässi seda "ins" elementi, kui sooduhinda pole -
   ainult puhas <span class="price">summa</span>). Kui tootel SIISKI on
   sooduhind (uus toode võib ju juhtumisi ka sooduhinnaga olla), kehtivad
   allpool ka .price del / .price ins reeglid - täpselt samad, mis
   Soodustoodete pluginal, et väljanägemine oleks kahe sektsiooni vahel
   ühtne. !important, sest teema/Divi määrab WooCommerce hinnale tihti
   samaväärse või kõrgema spetsiifilisusega reegleid. */
.mnp-new-products.woocommerce ul.products li.product .price {
	color: #1c1f22 !important;
}

.mnp-new-products.woocommerce ul.products li.product .price > .woocommerce-Price-amount,
.mnp-new-products.woocommerce ul.products li.product .price > .amount {
	display: inline-flex !important;
	align-items: center;
	background: var(--mnp-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);
}

.mnp-new-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;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.mnp-new-products.woocommerce ul.products li.product .price ins {
	order: 1;
	display: inline-flex !important;
	align-items: center;
	background: var(--mnp-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);
}

/* ---- Nupud (Lisa ostukorvi / Loe edasi) - sama täidisega tumesinine
   nupp, mis Soodustoodete pluginal, sõltumata sellest, kas WooCommerce
   annab tootele "add_to_cart_button" klassi (ostetav toode) või lihtsalt
   "button" klassi (nt "Tellimisel"/ei ole hetkel ostetav - WooCommerce
   näitab siis "Loe edasi" linki tootekaardi lingina, ilma "add_to_cart_
   button" klassita). Selektor katab MÕLEMAD, et kõik nupud jääksid
   visuaalselt ühtemoodi täidisega, mitte osa täidisega ja osa
   piirjoonega (vt kliendi tagasiside - vt README "Tehnilised detailid").

   "margin-top: auto" (mitte fikseeritud 10px) - nupp on li.product
   flex-column'i VIIMANE laps ning li.product ise on nüüd rea kõrgeima
   kaardi kõrgusele venitatud (vt "align-items: stretch" ülal ruudustiku/
   karusselli ul.products reeglites). Auto-margin "sööb" ära kogu
   kaardi sisu (pilt+pealkiri+hind) ja nupu vahele jääva vaba ruumi,
   mistõttu nupp jääb ALATI kaardi täpselt alumisse serva - sõltumata
   sellest, kas toote pealkiri mahub ühele või kahele reale ja on
   seetõttu naaberkaartidest lühem/pikem. Kliendi selgesõnaline soov:
   "Lisa ostukorvi" olgu alati samal real, olenemata pealkirja pikkusest. */
/* ÜHTNE "Lisa ostukorvi" disain KÕIKJAL saidil (klient soovis, et nupp
   ei erineks kusagil) - viidud täpselt vastavusse
   tooriistakeskus-modern-shop plugina .tms-product-card
   .add_to_cart_button kujundusega: sama nurgaraadius (10px, mitte 7px),
   sama fikseeritud kõrgus+padding, LISATUD ostukorvi ikoon (varem
   puudus siin), ja hõljutusel EI TÕSTA nuppu üles (varem
   translateY(-1px) - see oli vastuolus teise plugina selgesõnalise
   "hõljutus ei muuda midagi" nõudega). */
.mnp-new-products.woocommerce ul.products li.product > a.button,
.mnp-new-products.woocommerce ul.products li.product .button {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	width: 100% !important;
	margin: auto 0 0 !important;
	/* v1.37.16 (tooriistakeskus-modern-shop) sama viga: "all: unset"
	   lähtestab flex-shrink/flex-grow tagasi algväärtusteks (initial
	   flex-shrink on 1, MITTE 0!) - ilma eksplitsiitse ülekirjutamiseta
	   siin võib nupp flex-veeru sees (kaart on flex-direction:column)
	   grid/flex-rea venituse tõttu ikkagi kokku suruda või laiali
	   venida, hoolimata fikseeritud height'ist.
	   v1.37.18 (tooriistakeskus-modern-shop) KRIITILINE PARANDUS: eraldi
	   flex-shrink/flex-grow (ilma flex-basis'eta) ISE oli vigane - kui
	   flex-basis jääb "auto"-ks, kasutab flexbox height'i baasina, AGA
	   see fallback kaob, kui MÕNI TEINE reegel flex-basis'e otsesõnu
	   määrab (nt WooCommerce/Divi globaalne nupu-flex-reset) - siis
	   VÕIDAB see height üle TÄIELIKULT, isegi !important'iga, kuna
	   tegu on flexbox'i enda arvutusreegliga. Tulemus: nupp kadus
	   (kõrgus 0px). "flex" LÜHIVORMING määrab basis'e otsesõnu. */
	flex: 0 0 46px !important;
	height: 46px !important;
	padding: 0 14px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	border-radius: 10px !important;
	background: #123f6e !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.85em !important;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
/* "::before" CSS-mask ikoon EEMALDATUD (v1.4.10-st) - see kuvati
   TINGIMUSTETA (ilma ":not(.mpc-buy-enhanced)" kontrollita), samal ajal
   kui see plugin ISE lisab JS-iga (enhanceBuyButtons(), mnp-carousel.js)
   oma SVG ikooni nupu SISSE - tulemus oli KAKS IKOONI KORRAGA (kattudes/
   kõrvuti), mille kohta klient tagasisidet andis. tooriistakeskus-
   modern-shop plugina enda jagatud ::before reegel (tms-tokens.css,
   ":not(.mpc-buy-enhanced)::before") katab nüüd selle koha AINULT enne,
   kui see plugina JS on nupu jõudnud täiendada - vt selle reegli
   kommentaari klassinime "mpc-buy-enhanced" kohta, mida see plugin
   nüüd samuti kasutab (varem "mnp-buy-enhanced", vastas valesti). */

.mnp-new-products.woocommerce ul.products li.product .button:hover {
	background: #123f6e !important;
	transform: none !important;
}

.mnp-new-products.woocommerce ul.products li.product .button.loading {
	opacity: 0.6;
}

.mnp-new-products.woocommerce ul.products li.product .button.added {
	background: #3a7d34 !important;
}

/* Divi teema lisab GLOBAALSELT kõikidele .woocommerce a.button-tüüpi
   linkidele oma ETmodules-ikoonifondiga noole (::after) - eemaldame selle
   siin samal põhjusel, mis Soodustoodete pluginal. */
.mnp-new-products.woocommerce ul.products li.product .button::after {
	content: none !important;
	display: none !important;
}

.mnp-new-products .mnp-btn-icon {
	flex-shrink: 0;
}

.mnp-new-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 PEAL, ALUMISES PAREMAS
   nurgas (v1.4.7-st ÜHTLUSTATUD tooriistakeskus-modern-shop plugina
   vaikimisi asukohaga JA mate-sale-products plugina "Soodustooted"
   asukohaga - klient soovis, et ikoon oleks IGAL POOL samas kohas,
   kohe pärast tunnuspilti, paremal all nurgas. Varem oli see ÜLEVAL,
   adminis valitava asukohaga (vasak/kesk/parem üleval, vt endine
   MNP_Settings::COMPARE_POSITIONS) - see admin seade on nüüd CSS
   tasandil VISUAALSELT INERTNE (kõik kolm väärtust annavad sama
   tulemuse), kuna kolme eri asukoha võimaldamine oli täpselt see, mis
   tegi "Uued tooted" ja "Soodustooted" vahel ebaühtluse võimalikuks.
   Seadet ennast (admin lehel, shortcode'i parameetrina) ei eemaldatud
   koodist - see on kahjutu, lihtsalt enam midagi ei muuda.
   Markup tuleb mate-product-compare pluginalt (klassid mpc-compare-btn/
   mpc-compare-label, vt class-mnp-shortcode.php render_compare_button()) -
   siin muudame AINULT väljanägemise ikoon + hõljutusvihje kujuliseks ja
   positsioneerime selle absoluutselt; mujal saidil (poevaade, tootevaade)
   jääb mate-product-compare enda vaikimisi nupustiil muutumatuks, sest
   see reegel on skoobitud ainult .mnp-new-products alla.
   POSITSIONEERIMINE: nupp renderdub DOM-is TOOTELINGI <a> SEES, ENNE
   ".tms-card-media" avanemist (woocommerce_before_shop_loop_item hook),
   seega on tema positsioneerimise KONTEKST "li.product" (juba
   position:relative), MITTE ".tms-card-media" (nagu see on
   tooriistakeskus-modern-shop plugina enda vaikimisi kaardil, kus nupp
   renderdub OTSE selle konteineri sees). Seetõttu ei saa lihtsalt
   "bottom:12px" kasutada - "top" arvutatakse pildi kõrguse (--mnp-img-height)
   järgi, sama muster, mida mate-sale-products plugin oma msp-frontend.css
   failis juba kasutab ("Kaart" kujundusel on lisaks li.product endal
   padding, vt allpool eraldi reeglit selle jaoks). ---- */
.mnp-new-products.woocommerce ul.products li.product .mpc-compare-btn {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: calc(var(--mnp-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;
}

/* "Kaart" kujundusel on li.product endal padding (12px 12px 16px, sama
   väärtus, mis mate-sale-products plugina "Kaart" kujundus kasutab, vt
   selle plugina msp-frontend.css) - pilt algab seetõttu 12px võrra
   allpool/paremal, mitte täpselt li.product enda ülemisest/paremast
   servast. Nihutame ikooni sama võrra, et see jääks ka "Kaardi"
   kujundusel täpselt pildi (mitte kaardi enda) alumisse paremasse
   nurka - IDENTNE arvutus, mis mate-sale-products plugina omal. */
.mnp-new-products.mnp-style-card.woocommerce ul.products li.product .mpc-compare-btn {
	top: calc(var(--mnp-img-height, 160px) - 40px + 12px);
	right: 20px;
}

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

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

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

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

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

/* Vihje ilmub ÜLES (üle pildi) - nupp ise on nüüd kaardi/pildi ALUMISES
   servas (v1.4.7-st, vt ülal), nii et allpool poleks piisavalt ruumi
   (kaardi tekstiosa/hind jääks vihjele ette). Paremale joondatud, kuna
   nupp ise on alati paremas servas (samasugune muster, mis
   tooriistakeskus-modern-shop plugina ".tms-compare-tooltip" kasutab
   oma vaikimisi kaardil). */
.mnp-new-products.woocommerce ul.products li.product .mnp-compare-tooltip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: auto;
	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;
}

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

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

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

/* ===== Karussell (layout="carousel") - struktuur/mehaanika ===== */

.mnp-new-products.mnp-carousel {
	position: relative;
}

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

.mnp-new-products.mnp-carousel .mnp-carousel-viewport::-webkit-scrollbar {
	display: none;
}

.mnp-new-products.mnp-carousel ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
}

.mnp-new-products.mnp-carousel ul.products li.product {
	--mnp-effective-visible: var(--mnp-visible, 6);
	flex: 0 0 calc((100% - (var(--mnp-effective-visible) - 1) * 20px) / var(--mnp-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) {
	.mnp-new-products.mnp-carousel ul.products li.product {
		--mnp-effective-visible: min(var(--mnp-visible, 6), 4);
	}
}

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

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

.mnp-new-products.mnp-carousel .mnp-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;
}

.mnp-new-products.mnp-carousel .mnp-carousel-prev {
	left: -54px;
}
.mnp-new-products.mnp-carousel .mnp-carousel-next {
	right: -54px;
}

@media (max-width: 1400px) {
	.mnp-new-products.mnp-carousel .mnp-carousel-prev {
		left: 4px;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-next {
		right: 4px;
	}
}

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

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

.mnp-new-products.mnp-carousel.mnp-no-scroll-needed .mnp-carousel-nav {
	display: none !important;
}

.mnp-new-products.mnp-carousel .mnp-carousel-nav:disabled,
.mnp-new-products.mnp-carousel .mnp-carousel-nav.is-disabled {
	opacity: 0.3 !important;
	cursor: default !important;
	pointer-events: none;
}

@media (max-width: 480px) {
	.mnp-new-products.mnp-carousel .mnp-carousel-nav {
		width: 32px !important;
		height: 32px !important;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-nav .mnp-carousel-icon {
		width: 14px;
		height: 14px;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-prev {
		left: 2px;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-next {
		right: 2px;
	}
}

/* =====================================================================
   "UUS" SILT - kuvatakse tootepildi ülemises vasakus nurgas kõigi kolme
   kujunduse puhul (erinevalt Soodustoodete "-X%" sildist, mis kehtis
   ainult "Rõhutatud" kujunduse puhul, kuna uus toode ei pea olema
   sooduhinnaga). Sisse/välja lülitatav admin seadetest (show_badge).
   ===================================================================== */

.mnp-new-products.woocommerce ul.products li.product {
	position: relative;
}

.mnp-new-ribbon {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	background: var(--mnp-accent);
	color: #1c1f22;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mnp-new-products.mnp-hide-badge .mnp-new-ribbon {
	display: none !important;
}

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

/* ---- 1) Minimalistlik: vaikne, väike piirjoonega "UUS" pill ---- */
.mnp-new-products.mnp-style-minimal .mnp-new-ribbon {
	background: transparent;
	border: 2px solid var(--mnp-accent);
	color: #1c1f22;
	box-shadow: none;
}

/* ---- 2) Kaart: raam, ümarad nurgad, hõljutamisel tõusev vari + aktsentjoon ---- */
.mnp-new-products.mnp-style-card.woocommerce ul.products li.product {
	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;
}

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

.mnp-new-products.mnp-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;
}

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

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

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

/* ---- 3) Rõhutatud: jämedam pealkiri + suurem "UUS" silt ---- */
.mnp-new-products.mnp-style-bold.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 800;
}

.mnp-new-products.mnp-style-bold .mnp-new-ribbon {
	font-size: 12px;
	padding: 6px 11px;
}

/* ═══ 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. */
.mnp-new-header{ justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mnp-new-header-icon{ display:none; }
.mnp-new-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;
}
.mnp-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 */
}
.mnp-view-all-link--head:hover{ text-decoration:underline; }
@media (max-width:640px){
  .mnp-new-header-title{ font-size:21px !important; }
  .mnp-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. */
.mnp-new-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. */
.mnp-new-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) {
	.mnp-new-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.
   ═══════════════════════════════════════════════════════════════════════ */

/* Soodushind (ka uus toode võib sooduhinnaga olla): punane, nagu maketis. */
.mnp-new-products.woocommerce ul.products li.product .price ins {
	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 ON NAVY, MITTE PUNANE. Maketil „Uued tooted" plokki ei ole,
   seega siin ei ole mida kopeerida — aga punane tähendab selles poes
   SOODUSTUST. Uue toote tavahind punasena lubaks allahindlust, mida ei ole.
   Navy hoiab kirja ühtses paletis ja jätab punase soodushinnale. */
.mnp-new-products.woocommerce ul.products li.product .price > .woocommerce-Price-amount,
.mnp-new-products.woocommerce ul.products li.product .price > .amount {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: #123F6E !important;
	font-weight: 700 !important;
	font-size: 1.15em;
	text-decoration: none !important;
}

.mnp-new-products.woocommerce ul.products li.product .price del {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.mnp-new-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #123F6E;
}

/* ⚠ Sama kollase hover'i viga, mis Soodustoodetel — vt sealset kommentaari. */
.mnp-new-products.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: #0A2A5A;
}

.mnp-new-header-title{
  font-size:25px !important;
  letter-spacing:-0.01em;
}
@media (max-width:640px){
  .mnp-new-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(--mnp-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. */
.mnp-new-products .tms-card-media {
	aspect-ratio: auto !important;
	height: var(--mnp-img-height, 160px) !important;
	max-width: none !important;
}
.mnp-new-products.woocommerce ul.products li.product a img,
.mnp-new-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(--mnp-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. */
.mnp-new-products .tms-card-body {
	padding: 10px 12px 12px !important;
	gap: 0 !important;
}
.mnp-new-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. */
.mnp-new-products .tms-card-facts-row {
	margin: 0 0 6px !important;
}
.mnp-new-products .tms-card-price-row {
	margin-top: 0 !important;
	min-height: 0 !important;
}
.mnp-new-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. */
.mnp-new-products.woocommerce ul.products li.product .button,
.mnp-new-products.woocommerce ul.products li.product .add_to_cart_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. */
.mnp-view-all-link--head {
	color: #1E5BC6;
	gap: 12px;
}
/* ⚠ Vana reegel `.mnp-view-all-link .mnp-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. */
.mnp-view-all-icon {
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
}
.mnp-view-all-link--head:hover {
	color: #14459B;
}

/* ═══════════════════════════════════════════════════════════════════════
   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 ja tühistame `gap`-i ning vasaku lisapolstri, mis olid ikooni
      jaoks — muidu jääks sildi vasakusse serva ikooni-kujuline tühi auk. */
.mnp-new-products .tms-discount-icon {
	display: none !important;
}
.mnp-new-products .tms-discount-badge {
	gap: 0 !important;
	padding: 5px 10px !important;
}

/* 2) MINIMAALSED VAHED (kasutaja: „minimaalne vahe" kõigi nelja vahel).
      Varem 6px igal pool + 10px ülapolster. Nüüd 2px ja 6px. */
.mnp-new-products .tms-card-body {
	padding: 6px 10px 10px !important;
	gap: 0 !important;
}
.mnp-new-products.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 2px !important;   /* pilt -> pealkiri (ülapolster) ja pealkiri -> Laos */
}
.mnp-new-products .tms-card-facts-row {
	margin: 0 0 2px !important;   /* Laos -> hind */
}
.mnp-new-products .tms-card-price-row {
	margin-top: 0 !important;
	min-height: 0 !important;
}
.mnp-new-products.woocommerce ul.products li.product .button,
.mnp-new-products.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto !important;   /* 26.10.2026: nupp alati kaardi alaserva - kõik nupud samal kõrgusel (kaardid on stretch'itud) */
}
.mnp-new-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 `.mnp-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. */
.mnp-view-all-link--head {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}
.mnp-view-all-link--head:hover,
.mnp-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.
   ═══════════════════════════════════════════════════════════════════════════ */

.mnp-new-wrap{ padding-top:20px !important; padding-bottom:22px !important; }
@media (max-width:900px){
  .mnp-new-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. */
.mnp-view-all-link--head {
	color: #123F6E !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	gap: 7px !important;
}
.mnp-view-all-link--head:hover,
.mnp-view-all-link--head:focus {
	color: #123F6E !important;
	text-decoration: underline !important;
	background: none !important;
}
/* Nool sama suur, mis kategooriatel (14px, mitte 16px). */
.mnp-view-all-icon {
	width: 14px;
	height: 14px;
}
@media (max-width:640px){
	.mnp-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 `.mnp-new-products` SEES ja
   karusselli JS otsib neid tapselt sealt
   (`wrapper.querySelector('.mnp-carousel-prev')`). Nende tostmine paisesse
   lohuks karusselli — nupud lakkaksid tootamast.

   ⚠ LAHENDUS ILMA MARKUPITA: absoluutne element positsioneerub lahima
   `position: relative` esivanema jargi. Kui teha `.mnp-new-products`
   mobiilis `static`, hupab see ankur uhe tasandi ulespoole —
   `.mnp-new-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. */
	.mnp-new-wrap { position: relative; }
	.mnp-new-products.mnp-carousel { position: static; }

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

	/* „Vaata koiki" omaette reale keskele — paisereal ei ole talle enam
	   ruumi, kui molemas servas on nool. */
	.mnp-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 */
	.mnp-new-products.mnp-carousel .mnp-carousel-nav {
		top: 32px !important;
		transform: translateY(-50%) !important;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-prev { left: 0 !important; }
	.mnp-new-products.mnp-carousel .mnp-carousel-next { right: 0 !important; }

	/* Kitsal ekraanil ei ole varju vaja — nupud ei ole enam piltide peal. */
	.mnp-new-products.mnp-carousel .mnp-carousel-nav {
		width: 32px !important;
		height: 32px !important;
		box-shadow: none !important;
		border-color: #CFD8E3 !important;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-nav .mnp-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(--mnp-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 ────────────────────────────────────────── */
	.mnp-new-header {
		justify-content: space-between;
		min-height: 0;
		padding: 0;
		text-align: left;
	}
	.mnp-new-header-title { text-align: left; }
	.mnp-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. */
	.mnp-new-wrap { position: static; }
	.mnp-new-products.mnp-carousel { position: relative; }

	/* ── Nooled toote pealkirja kohale ────────────────────────────────── */
	.mnp-new-products.mnp-carousel .mnp-carousel-nav {
		top: calc(var(--mnp-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;
	}
	.mnp-new-products.mnp-carousel .mnp-carousel-prev { left: 2px !important; }
	.mnp-new-products.mnp-carousel .mnp-carousel-next { right: 2px !important; }
	.mnp-new-products.mnp-carousel .mnp-carousel-nav .mnp-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. */
	.mnp-new-products.mnp-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) {

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

	/* Vordlusnupp pildi ulemisse paremasse nurka. */
	.mnp-new-products .mpc-compare-btn,
	.mnp-new-products .tms-card-media .mpc-compare-btn--card,
	.mnp-new-products .mnp-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) {
	.mnp-new-products.mnp-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;
	}
}