/* ==========================================================================
   TOOTEVAADE
   ========================================================================== */

.tms-product-page .tms-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: var(--tms-space-4) 0 0;
	font-family: var(--tms-font-mono);
	font-size: .72rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.tms-product-page .tms-crumb {
	display: inline-flex;
	align-items: center;
	background: var(--tms-surface-2);
	color: var(--tms-ink-soft);
	padding: 8px 20px 8px 16px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	white-space: nowrap;
}
.tms-product-page .tms-crumb:not(:first-child) {
	padding: 8px 20px 8px 24px;
	margin-left: -10px;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.tms-product-page .tms-crumb:last-child {
	background: var(--tms-accent);
	color: var(--tms-accent-ink);
	font-weight: 700;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.tms-product-page .tms-breadcrumb a { color: inherit; text-decoration: none; }

/* Pealkiri - nüüd täislaiuses, galerii+kokkuvõtte paigutuse KOHAL (klient soovis
   seda esimesena, mitte kokkuvõtte veeru sees). */
.tms-product-page .product_title.entry-title {
	font-family: var(--tms-font-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	line-height: 1.1;
	color: var(--tms-ink);
	margin: var(--tms-space-3) 0 0;
}
.tms-product-page .tms-breadcrumb a:hover { text-decoration: underline; }

/* v1.77.0, 15.09.2026, kliendi soov ("võtame toote lehel sidebari ära"):
   kategooriate külgriba (.tms-pd-categories, mobiili nupp .tms-pd-cats-
   toggle) EEMALDATUD tootelehelt täielikult - vt content-single-product.php.
   .tms-pd-outer jääb alles AINULT ühe lapsega (.tms-pd-layout), seega
   varasem "240px 1fr" kaheveeruline grid lihtsustus üheks veeruks. */
.tms-pd-outer {
	padding-top: var(--tms-space-5);
}

/* GRID-ALADEGA PAIGUTUS (v1.75.0, 15.09.2026, kliendi soov: sama
   vahekaardi-loogika ka lauaarvutisse, "päisena" veeru ülaosas, mitte
   pildi all fikseeritud plokina). Nimelised alad asendasid varasema
   lihtsa auto-paigutuse ("grid-column:1" spec-plokil), sest galerii
   (ala "gallery") peab nüüd ULATUMA MÕLEMA rea kohale, samal ajal kui
   vahekaardiriba ("tabbar") ja aktiivne paneel ("panel") jagavad
   parema veeru KAHTE rida. .tms-pd-summary JA .tms-spec-block saavad
   MÕLEMAD ala "panel" - nad asuvad SAMAS lahtris (kattuvad), ja ainult
   üks korraga on nähtav (vt allpool "Vaikimisi olek" kommentaari) -
   sama põhimõte, mis mobiilis juba v1.72.0-st toimis. */
.tms-pd-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	/* 18.09.2026: eraldi "spec" rida EEMALDATUD uuesti - kliendi soov oli,
	   et tehnilised andmed ilmuksid TÄPSELT sinna, kus kirjeldus oli, mitte
	   terve kokkuvõtte alla. ".tms-spec-block" elab nüüd ".tms-pd-summary"
	   SEES (vt tms_output_spec_strip() hooki tms-single-product-hooks.php
	   failis, "order:3", sama koht mis ".tms-pd-fulldesc"-il), mitte enam
	   omaette "panel"-i JÄRGSE grid-reana - seega tagasi kahe rea juurde. */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"gallery tabbar"
		"gallery panel";
	gap: var(--tms-space-7);
	padding-bottom: var(--tms-space-6);
	align-items: start;
	max-width: 1600px;
}
@media (max-width: 860px) {
	.tms-pd-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"gallery"
			"tabbar"
			"panel";
	}
}

/* Vahekaardid "Üldandmed" / "Tehnilised andmed" - v1.72.0-st (15.09.2026)
   mobiilis, v1.75.0-st (15.09.2026) ka LAUAARVUTIS, kliendi selgesõnalisel
   soovil ("mitte pildi all, vaid päises, samamoodi nagu mobiilis, kerides
   stikyks"). Riba renderdub ainult siis, kui tootel on tehnilisi andmeid
   (vt content-single-product.php) - kui pole, näidatakse .tms-pd-summary
   paneeli lihtsalt tavapäraselt, ilma vahekaartideta. */
.tms-pd-tabbar {
	grid-area: tabbar;
	display: flex;
	gap: 2px;
	background: var(--tms-surface-2);
	border-radius: var(--tms-radius-md);
	padding: 3px;
	margin-bottom: var(--tms-space-3);
	/*
	 * KLEEPUV RIBA (v1.74.0/v1.75.0, 15.09.2026, kliendi soov). Lauaarvutis
	 * PÄIS EI OLE kleepuv/fikseeritud (vt tooriistakeskus-header plugina
	 * .tkh-sticky-row, mis rakendub AINULT @media max-width:900px), seega
	 * piisab lauaarvutis väikesest hingamisruumist ülal (var(--tms-space-4)).
	 * Mobiilis (≤860px, allpool) on offset SUUREM (56px), sest seal jääb
	 * riba KOMPAKTSE KLEEPUVA PÄISE alla, kui kasutaja on juba nii kaugele
	 * kerinud, et päis on ise kleepunud (vt selle arvutuse pikemat
	 * selgitust allpool oleva media query sees).
	 */
	position: sticky;
	top: var(--tms-space-4);
	z-index: 5;
}
@media (max-width: 860px) {
	.tms-pd-tabbar {
		margin-bottom: 0;
		margin-top: var(--tms-space-4);
		/*
		 * `top` väärtus on TAHTLIKULT sama arvutus, mis tooriistakeskus-
		 * header pluginas .tkh-header.is-stuck .tkh-sticky-row kõrgus
		 * (tkh-header.css: 8px padding-top + 40px nupu kõrgus + 8px
		 * padding-bottom = 56px, PLUSS sama env(safe-area-inset-top)
		 * mündiga telefoni "kulba" jaoks) - ilma selleta jääks
		 * vahekaardiriba KOMPAKTSE PÄISE ALLA peitu. Kaks eraldi
		 * pluginat, kaks eraldi CSS-faili, KAVATSUSLIKULT mitte jagatud
		 * muutuja kaudu (deploy käib pluginate kaupa, eraldi) - kui päise
		 * kompaktse riba kõrgus kunagi muutub, tuleb see väärtus SIIN
		 * käsitsi kaasa uuendada.
		 */
		top: calc(56px + env(safe-area-inset-top, 0px));
	}
}
.tms-pd-tab {
	flex: 1 1 0;
	padding: 10px 8px;
	border: 0;
	border-radius: var(--tms-radius-sm);
	background: transparent;
	color: var(--tms-ink-soft);
	font-family: var(--tms-font-body);
	font-weight: 600;
	font-size: .86rem;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
/* AKTIIVNE VAHEKAART - saidi kollane (v1.75.0, kliendi soov: "üldandmed
   võiks värvuda meie saidi kollaseks kui on alguses avatud ja kui avatud
   tehnilised andmed, siis see kollaseks" - st kumb parasjagu aktiivne,
   see värvub kollaseks, mitte konkreetne nupp püsivalt). */
.tms-pd-tab.is-active {
	background: var(--tms-accent);
	color: var(--tms-accent-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Vaikimisi olek: kokkuvõte nähtav, spetsid peidus - vastab "summary"
   vahekaardi vaikimisi aktiivsele olekule mallis (button.is-active).
   KEHTIB NÜÜD KÕIKIDEL LAIUSTEL (v1.75.0-st) - varem ainult mobiilis.
   ⚠ 18.09.2026, kliendi soov: hind/tarneinfo/"Lisa ostukorvi"
   (".tms-pd-summary") EI TOHI "Tehnilised andmed" valimisel kaduda -
   varem jagasid ".tms-pd-summary" ja ".tms-spec-block" sama
   "grid-area:panel" lahtrit ja ainult üks oli korraga nähtav (vt
   ülal ".tms-pd-layout" muudatust - spetsidel on nüüd OMA "grid-area:
   spec" rida, ei kattu enam kokkuvõttega). ".tms-pd-summary" on
   seetõttu nüüd ALATI nähtav.

   ⚠ 18.09.2026, TÄPSUSTUS (kasutaja: "vahetuma peaks ainult info...
   ülejäänud osa jääb nii nagu alguses kuvatakse") - kui KOGU
   ".tms-pd-summary" jääb muutumatuks JA spetsid lihtsalt lisatakse
   selle alla, ei "vaheta" tegelikult miski kohta enam kunagi, mis
   nägi kasutaja jaoks välja nagu vahekaardid ei tee enam midagi.
   Lahendus: ".tms-pd-summary" SEES on täpselt ÜKS element, mis pole
   püsiv ostuinfo - täiskirjeldus (".tms-pd-fulldesc", vt
   tms_output_full_description() tms-single-product-hooks.php failis).
   SEE üksi vahetub tehniliste andmetega, kõik muu kokkuvõttes
   (bränd, hind, laoseis, hinnang, tarneinfo, ostukorvi vorm) jääb
   muutumatuks - vt allpool ".tms-pd-fulldesc" reeglit. */
.tms-pd-layout .tms-spec-block {
	display: none;
}
.tms-pd-layout[data-mobile-tab="specs"] .tms-spec-block {
	display: block;
}
.tms-pd-layout[data-mobile-tab="specs"] .tms-pd-fulldesc {
	display: none;
}

/*
 * KAITSE MOBIILI SAHTLI VASTU (v1.75.0, 15.09.2026, kliendi teatatud viga:
 * kleepuv vahekaardiriba JA kampaaniasilt (.tms-pd-campaign-box, pildi
 * peal) jäid mobiilimenüü avades sellest "läbi kumama"). JUURPÕHJUS pole
 * lõpuni kindel (tooriistakeskus-header'i .tkh-drawer on position:fixed
 * z-index:9999, mis peaks tavaliselt kõigest üle jääma) - kahtlusalune on
 * see, et sahtli avamisel pannakse <body>-le JS-iga "position:fixed"
 * kerimise lukustamiseks (vt tkh-header.js), mis CSS spetsifikatsiooni
 * järgi tekitab <body>-le UUE pinu-konteksti (fixed-positsiooniga
 * elemendid loovad selle ALATI, olenemata z-index'ist) ja võib
 * ümber korraldada, kuidas selle sees olevad kleepuvad/positsioneeritud
 * elemendid teiste samasse konteksti jäävate elementidega võrreldes
 * paika lähevad. Selle asemel, et püüda z-index'iga "võidu joosta",
 * kasutame KINDLAT lahendust: tooriistakeskus-header lisab sahtli
 * avamisel <body>-le klassi "tkh-drawer-open" (vt tkh-header.js) - selle
 * olemasolul peidame need kaks elementi otseselt, sõltumata sellest,
 * MIKS nad muidu läbi paistaksid.
 */
body.tkh-drawer-open .tms-pd-tabbar,
body.tkh-drawer-open .tms-pd-campaign-box,
body.tkh-drawer-open .tms-sticky-addtocart {
	visibility: hidden !important;
}

/* --- Galerii (taaskasutab WC tuuma markup/JS, siin ainult paigutus) --- */
.tms-pd-gallery {
	grid-area: gallery;
	position: relative;
}

/* --- Toote video (16.10.2026) - piltide ALL, SAMA veeru sees, sama
   max-laiusega nagu galerii ise, et mõlemad jäävad optiliselt üheks
   veeruks. Plugin tooriistakeskus-product-video; vt
   content-single-product.php tpv_render_product_video() kutset.

   17.10.2026: klient ei soovinud "Video" pealkirja (h2 eemaldatud
   class-tpv-data.php renderist) ja soovis mitme video puhul sama
   paigutust nagu toote pildigalerii - üks (tunnusvideo) suurelt
   (.tms-pd-video__main), ülejäänud väikese ribana all
   (.tms-pd-video__thumbs > .tms-pd-video__thumb, horisontaalselt
   kerritav, kui ei mahu). Ühe video puhul .tms-pd-video__thumbs
   elementi lihtsalt ei renderdata.

   Samal päeval: klõps väikesel videol tõstab selle suure asemele ja
   käivitab (assets/front.js, laetakse ainult kui pisipilte on). Vahetus
   toimub AINULT .tms-pd-video__media sisu vahel - .tms-pd-video__main ja
   .tms-pd-video__thumb ise jäävad paika, nii et suuruste CSS allpool ei
   pea JS-iga kooskõlas püsima. .tms-pd-video__play-icon on läbipaistev
   kiht KOGU pisipildi (ka võõra iframe'i) peal, et klõps üldse kohale
   jõuaks - iframe-sisesed klõpsud ei levi kunagi vanema lehe JS-ini. */
.tms-pd-video {
	margin-top: var(--tms-space-4);
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: var(--tms-space-3);
}
.tms-pd-video__thumbs {
	display: flex;
	gap: var(--tms-space-2);
	overflow-x: auto;
	padding-bottom: 2px;
}
.tms-pd-video__thumb {
	position: relative;
	flex: 0 0 110px;
	width: 110px;
	cursor: pointer;
}
.tms-pd-video__thumb .tms-pd-video__el,
.tms-pd-video__thumb .tms-pd-video__embed {
	border-radius: var(--tms-radius-md, 6px);
}
.tms-pd-video__play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.1rem;
	background: rgba(0, 0, 0, .2);
	border-radius: var(--tms-radius-md, 6px);
	opacity: 0;
	transition: opacity .15s ease;
}
.tms-pd-video__thumb:hover .tms-pd-video__play-icon,
.tms-pd-video__thumb:focus-visible .tms-pd-video__play-icon {
	opacity: 1;
}
.tms-pd-video__el {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--tms-radius-lg);
	background: #000;
	object-fit: contain;
}
/* WordPressi oEmbed (wp_oembed_get) tagastab <iframe> kõvakodeeritud
   width/height atribuutidega - klassikaline "responsiivse iframe" trikk:
   mähis annab suhte, iframe ise täidab selle absoluutpositsiooniga. */
.tms-pd-video__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--tms-radius-lg);
	overflow: hidden;
	background: #000;
}
.tms-pd-video__embed iframe,
.tms-pd-video__embed embed,
.tms-pd-video__embed object {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
.tms-pd-gallery .woocommerce-product-gallery {
	background: var(--tms-surface);
	border: 1px solid var(--tms-border);
	border-radius: var(--tms-radius-lg);
	padding: var(--tms-space-4);
	/* WooCommerce'i enda tuum-CSS sisaldab vana reeglit ".images { width:48%;
	   float:left; }" (sama probleem, mis varem .summary klassiga) - see
	   mähis kannab WC vaikimisi klassi "images", nii et tabab meid samamoodi.
	   Nullime selle üle, AGA ei venita pilti täisulatuses (see hägustaks
	   pilti, kui algne foto on väiksema resolutsiooniga) - piirame mõistliku
	   suurusega ja tsentreerime veeru sees. */
	width: auto !important;
	max-width: 520px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}
.tms-pd-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--tms-radius-md);
	/* width:100% (Divi teema globaalne pildireegel, tavaliselt !important)
	   venitas pilti alati konteineri täislaiusele, isegi kui originaal on
	   väiksem (221x168 näiteks renderdus 486x369-le, 2.2x suurendus - selgelt
	   hägune). max-width + !important võidab Divi reegli üle. */
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto;
	display: block;
}
.tms-pd-gallery .flex-control-thumbs {
	display: flex !important;
	gap: var(--tms-space-2);
	margin-top: var(--tms-space-3) !important;
	flex-wrap: wrap;
}
.tms-pd-gallery .flex-control-thumbs li {
	width: 64px;
	height: 64px;
}
.tms-pd-gallery .flex-control-thumbs img {
	border-radius: var(--tms-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	object-fit: contain;
	background: var(--tms-surface-2);
}
.tms-pd-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--tms-accent);
}
.tms-pd-gallery .onsale {
	position: absolute !important;
	top: var(--tms-space-4) !important;
	left: var(--tms-space-4) !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 2;
	/* Fikseeritud ring vahetati auto-laiusega pillikujuliseks siltiks,
	   et mahutada protsent (nt "-30%"), mitte ainult üksik "%" märk. */
	width: auto !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: none !important;
	border-radius: 999px !important;
	background-color: var(--tms-accent) !important;
	color: var(--tms-accent-ink) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: var(--tms-shadow-md);
}
.tms-pd-gallery .onsale::before {
	/* --tms-discount-label seatakse PHP-st (content-single-product.php)
	   tegeliku arvutatud protsendiga - vt sama põhjendust tms-tokens.css
	   failis (.tms-card-media .onsale::before). */
	content: var(--tms-discount-label, "%");
	display: block;
	white-space: nowrap;
	font-family: var(--tms-font-display);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
}
/* Vt sama põhjendust tms-tokens.css failis (.tms-card-media .onsale.onsale) -
   Divi võidab taustavärvi eest ka siin, kui klassi ei kordata. */
.tms-pd-gallery .onsale.onsale {
	background-color: var(--tms-accent) !important;
	color: var(--tms-accent-ink) !important;
}
/* "-X%" EEMALDATUD TOOTELEHE PILDILT (v1.56.0, kasutaja otsus 15.09.2026) -
   AINULT sealt: mujal (tootekaardid poes/Uued tooted/Soodustooted) jääb
   "-X%" alles, kuna see reegel on scoped ".tms-pd-gallery" (tootelehe
   galerii) alla, mitte globaalne .onsale reegel. Element ise jääb DOM-i
   (WooCommerce'i enda woocommerce_show_product_sale_flash väljund) - lihtsalt
   ei renderdu visuaalselt, mis on lihtsam/ohutum kui hook'i eemaldamine. */
.tms-pd-gallery .onsale {
	display: none !important;
}

/* ÜHTNE KOLLANE RAAM pildi ülevasakus nurgas (v1.56.0, kasutaja otsus
   15.09.2026): kampaania nimi + "Sinu võit: X €" SAMAS raamis, mitte enam
   kaks eraldi silti (v1.53.0/v1.54.0/v1.55.0 vahepealsed versioonid).
   "-X%" on nüüd pildilt eemaldatud (vt ülal), seega raam võib olla otse
   var(--tms-space-4) kohal, ilma nihketa. Värv on saidi enda peamine
   kollane (--tms-accent, "logo kollane" - vt tms-tokens.css), sama toon,
   mida "Sinu võit" silt juba varem kasutas.
   ⚠ PAREM ülanurk jääb vabaks WooCommerce'i PhotoSwipe suurendusikooni
   jaoks (vt varasemat selgitust, mis oli enne selle rea kustutamist siin -
   ikoon lisatakse JS-iga, meie CSS-is ei ole seda kuidagi hallata). */
.tms-pd-gallery .tms-pd-campaign-box {
	position: absolute;
	top: var(--tms-space-4);
	left: var(--tms-space-4);
	right: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	max-width: calc(100% - 2 * var(--tms-space-4));
	padding: 8px 14px;
	border-radius: var(--tms-radius-md, 8px);
	background: var(--tms-accent);
	color: var(--tms-accent-ink);
	box-shadow: var(--tms-shadow-md);
}
/* Sildid raami SEES on tavaline tekst, mitte enam oma eraldi pill/taust -
   baasklassid (.tms-savings-tag tms-tokens.css'ist) nullitakse siin, sest
   raam ise juba annab tausta/varju/positsiooni. */
.tms-pd-gallery .tms-pd-campaign-box .tms-campaign-tag {
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--tms-font-body);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tms-pd-gallery .tms-pd-campaign-box .tms-savings-tag {
	position: static;
	top: auto;
	right: auto;
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: var(--tms-font-display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	white-space: nowrap;
}

/* --- Kokkuvõtte paneel --- */
.tms-pd-summary {
	grid-area: panel;
	/*
	 * POLE ENAM ISESEISVALT KLEEPUV (v1.75.0, 15.09.2026) - varem oli siin
	 * "position:sticky; top:var(--tms-space-4)" (ostukorvi-plokk "jälgis"
	 * kerimist, kui galerii veerg oli pikem). Nüüd, kui .tms-pd-summary ja
	 * .tms-spec-block jagavad SAMA "panel" ala ja ÜLAL on juba OMAETE
	 * kleepuv vahekaardiriba (.tms-pd-tabbar), jäeti paneel enda ise
	 * TEADLIKULT tavapäraseks (kerib lehega kaasa) - kahe eraldi kleepuva
	 * elemendi virnastamine (riba + paneel, erinevate "top" nihetega)
	 * oleks lisanud märkimisväärse põimumis-/kattumisriski väikese kasu
	 * eest. Kui klient soovib ostukorvi-ploki eraldi kleepuvust tagasi,
	 * saab selle taastada "top: calc(<tabbar kõrgus> + <tabbar top>)"
	 * väärtusega.
	 */
	display: flex;
	flex-direction: column;
	gap: var(--tms-space-3);
	/* WooCommerce'i enda tuum-CSS (woocommerce.css) sisaldab vana reeglit
	   ".summary { width:48%; float:right; }", mis on mõeldud vaikimisi
	   float-põhisele paigutusele. Kuna see element kannab ühilduvuse mõttes
	   ka WC klasse "summary entry-summary", tabab see reegel meid endiselt
	   ja kitsendab paneeli valesti - nullime selle siin otseselt üle. */
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

.tms-pd-brand {
	text-transform: uppercase;
	order: 1;
	/* Ülekirjutab jagatud .tms-mono-tag (mono font, .72rem) - päise font
	   ja suurem kiri, ilma et see mõjutaks .tms-mono-tag klassi mujal.
	   BEBAS NEUE EEMALDATUD 10.09.2026 - see oli jäänuk, mis jäi alles
	   siis kui Bebas Neue muidu v1.37.12-s eemaldati (vt selgitust
	   .tms-pd-sku-stock-line juures allpool). Just see rida tekitas
	   tagasisides kurdetud „STIHL" eraldi fondi tootelehel. */
	font-family: var(--tms-font-display);
	font-size: 1.15rem;
	letter-spacing: .02em;
}

/* Logovariant (15.09.2026) - vt tms_output_brand(). ".tms-pd-brand" enda
   "order:1" kehtib ka siin, sest klass jääb peal - ainult teksti-spetsiifika
   (uppercase, font, letter-spacing) ei puuduta pilti. */
.tms-pd-brand--logo {
	display: inline-block;
	text-transform: none;
}
.tms-pd-brand-logo {
	display: block;
	max-height: 42px;
	max-width: 220px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ⚠ order 3 = HINNA (order 4) KOHAL. Sisu on TAISMAHUS (kärbe eemaldatud
   14.09.2026); asukoht hinna kohal on kasutaja otsus samast kuupaevast.
   Vt tms_output_full_description() - seal on moodetud pikkusjaotus. */
/* ═══════════════════════════════════════════════════════════════════════════
   "OMADUSED" - PEALKIRI + LOEND KIRJELDUSE SEES (15.09.2026)

   PHP (tms_format_omadused_list()) teisendab kirjelduse sisemise
   "Omadused" / "&gt; ..." tekstirea struktuuriks: <h3> + <ul><li>. Siin
   on AINULT vormindus, mitte struktuur - kui muudad struktuuri, muuda
   PHP-s; kui muudad valjanagemist, muuda siin.

   ⚠ MOLEMAD REEGLID KASUTAVAD !important. 15.09.2026 avastati, et Divi
   teema nullib h2 (ja tostenaoliselt teised h1-h6) polstri ILMA meie
   plugina teadmata - vt tms-spec-block__title kommentaari. Sama oht
   kehtib h3/ul/li kohta, seega kaitseme end ette, mitte ei oota jargmist
   "miks see ei tootanud" juhtumit.
   ═══════════════════════════════════════════════════════════════════════════ */
.tms-pd-summary .tms-desc-features-title {
	margin: var(--tms-space-4) 0 var(--tms-space-2) !important;
	padding: 0 !important;
	color: var(--tms-header-blue) !important;
	font-family: var(--tms-font-body) !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.tms-pd-summary .tms-desc-features-list {
	margin: 0 0 var(--tms-space-4) !important;
	padding: 0 !important;
	list-style: none !important;
}
.tms-pd-summary .tms-desc-features-list li {
	position: relative;
	margin: 0 !important;
	padding: 3px 0 3px var(--tms-space-4) !important;
	color: var(--tms-ink) !important;
	font-size: 1rem !important;
	line-height: 1.55 !important;
}
/* Pärisbullet, mitte teksti sees rippuv "&gt;" - vaikse ümmarguse
   täpina, joondatud esimese tekstireaga (mitte kogu rea kõrgusega). */
.tms-pd-summary .tms-desc-features-list li::before {
	/*
	 * ⚠ !important on siin HADAVAJALIK, mitte laisk kasutus. Sama fail
	 * (tms-tokens.css) sisaldab olemasolevat rida:
	 *
	 *     .tms-reset li::before, .tms-reset ul li::before {
	 *         content: none !important; display: none !important;
	 *     }
	 *
	 * See on saidiylene kaitse Divi enda injekteeritud li-tappide vastu
	 * ja meie uus loend on TAPSELT ".tms-reset ul li" struktuur (vt
	 * markup: `<div class="tms-reset tms-product-page">...<ul
	 * class="tms-desc-features-list"><li>`). "content:none !important"
	 * kustutab pseudoelemendi TAIELIKULT, olenemata sellest, mis
	 * vaartuse meie oma "content" reegel annab - !important voidab
	 * alati suurema spetsiifilisuse ule. Avastati 15.09.2026: taepp oli
	 * CSS-is olemas ja korrektne, aga ei renderdunud kunagi.
	 */
	content: '' !important;
	display: block !important;
	position: absolute;
	left: 2px;
	top: .68em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tms-header-blue);
}

.tms-pd-summary .woocommerce-product-details__short-description {
	order: 3;
	color: var(--tms-ink);
	line-height: 1.6;
	/* Kliendi soov: suurem kiri, boldita. font-weight normal !important,
	   kuna Divi globaalsed lõigustiilid kipuvad siia bold'i suruma
	   (vt tms-korduvad Divi konfliktimustrid - !important läbivalt). */
	font-size: 1.05rem;
	font-weight: 400 !important;
	/* 18.10.2026: see kast näitab nüüd lühikirjeldust, mis olemasolevatel
	   toodetel sisaldab tagasiühilduvuse mõttes kopeeritud täiskirjeldust
	   (vt tms-single-product-hooks.php tms_output_full_description() ja
	   tracker) - see võib olla pikk (mõõdetud kuni ~2300px). Kerimispiir,
	   et lehekülg ei venikks liiga pikaks ostunupu/hinna suhtes. */
	max-height: 420px;
	overflow-y: auto;
	padding-right: 6px;
}
/* LÕIKUDE VAHE (15.09.2026, kasutaja soov: "reavahed ja lõigud oleksid
   paremini välja paistvad"). JUURPÕHJUS ilma selleta: wc_format_content()
   (tms_output_full_description PHP-s) jookseb sisu läbi wpautop()'i, mis
   MURRAB kirjelduse korrektselt <p>...</p> plokkideks - aga see konteiner
   kannab ".tms-reset" klassi (vt content-single-product.php markup) ja
   tms-tokens.css sisaldab saidiülest kaitsereeglit
   ".tms-reset ... p { margin:0; padding:0 }" (Divi vastu, vt selle
   kommentaari) - see nullis KÕIKIDE lõikude vahe, mistõttu tekst nägi
   välja üheainsa tihedana tekstiplokina, mitte eraldi lõikudena, olenemata
   sellest, kui selgelt lähtetekst lõike eristas.
   ⚠ !important on siin sama põhjusega vajalik, mis "Omadused" loendil ja
   "Tehnilised andmed" pealkirjal ülal - Divi enda globaalne p-reegel võib
   samamoodi vahele segada, kaitseme end ette. */
.tms-pd-summary .woocommerce-product-details__short-description p {
	margin: 0 0 var(--tms-space-4) !important;
	padding: 0 !important;
}
.tms-pd-summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0 !important;
}

/* ⚠ TÄIENDUS (15.09.2026), kasutaja võrdles vana lehega otse
   (tooriistakeskus.ee/product/pid/19364/bid/19419 vs meie sama toode) -
   ülalolev <p>-vahe üksi EI PIISA. JUURPÕHJUS: vanal lehel oli iga lause
   OMAETTE <div>, eraldatud tühja `<div>&nbsp;</div>`'iga - see nägi välja
   nagu eraldi lõigud. Kraapimisel läks see struktuur kaduma: meie
   `get_description()` toores sisus on lausete vahel PÄRIS ÜKSIKUD
   reavahetused (\n), mitte topelt (\n\n) - ja wpautop() (wc_format_content
   sees) muudab üksiku reavahetuse `<br>`-iks, mitte uueks `<p>`-ks. Tulemus:
   PEAAEGU KÕIK meie tooted (nt see WIPER F28) renderduvad ÜHE AINSA <p>
   sees, kus laused on lahutatud ainult <br>-ga - ülalolev p-margin ei saa
   siis midagi teha, sest <p>-piiri lihtsalt ei tekigi.
   LAHENDUS: anname igale <br>-le endale "lõigu" välimuse - <br> on
   tavaliselt tühi inline-element ilma kastita, aga display:block + tühi
   content annab talle oma rea JA allpool oleva vahe, ilma HTML-i (toorest
   andmest tuletatud struktuuri) puutumata. Nii näeb IGA lause välja nagu
   omaette lõik, sarnaselt vana lehega. */
.tms-pd-summary .woocommerce-product-details__short-description br {
	content: "" !important;
	display: block !important;
	margin-bottom: var(--tms-space-4) !important;
}

.tms-pd-summary .price {
	order: 4;
	font-family: var(--tms-font-display);
	font-weight: 700;
	font-size: 2rem;
	color: var(--tms-ink);
}
.tms-pd-summary .price del {
	font-family: var(--tms-font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--tms-ink-soft);
	margin-right: var(--tms-space-2);
}
.tms-pd-summary .price ins { text-decoration: none; color: var(--tms-danger); }

/* Sama order väärtus, mis hinnal (4) - hind renderdub DOM-is enne
   (sama hook-prioriteet 8, aga hind registreeriti enne), nii et
   võrdse order väärtuse korral lahendab brauser järjekorra DOM-i
   järgi: hind, siis kohe "Sinu võit". */
.tms-pd-savings {
	order: 4;
	align-self: flex-start;
	margin-top: 4px;
}

/* "Pakkumine kehtib kuni X" (v1.54.0) - kohe "Sinu võit" järel, SAMA order
   väärtus (4), sest DOM-i järjekord (hind, "Sinu võit", siis see) lahendab
   võrdse order'i korral järjekorra juba õigesti - vt tms_output_savings
   järel registreeritud tms_output_campaign_validity() hooki. Kuvatakse
   ainult siis, kui element üldse renderdub (vt PHP - kuupäeva puudumisel
   ei renderdu midagi). */
.tms-pd-campaign-validity {
	order: 4;
	align-self: flex-start;
	margin-top: 2px;
	font-family: var(--tms-font-body);
	font-size: .8rem;
	color: var(--tms-ink-soft);
}

/* order: 5 - vahetult PÄRAST hinda/"Sinu võitu" (order 4). Tootekood
   ja laoseis kuvatakse nüüd KOOS ühel real (vt tms_output_sku_stock_line()
   PHP-s) - "Tootekood: 994913 | Laos (10 tk)". Varem oli tootekood ja
   laoseis kaks eraldi elementi (order 5 ja 6); need on nüüd üks
   wrapper-div (.tms-pd-sku-stock-line), nii et eraldi .tms-pd-stock
   order-reeglit enam vaja pole (see jääb wrapper'i sisemiseks flex-
   lapseks, mitte enam .tms-pd-summary otseseks flex-lapseks). */
.tms-pd-sku-stock-line {
	order: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	/* Bebas Neue EEMALDATUD (v1.37.12) - see on puhas suurtähefont ilma
	   korraliku väiketähe kujuta, mistõttu "Tootekood: 994913" nägi
	   välja nagu CAPS LOCK, kuigi text-transform:uppercase polnud
	   kusagil seatud - see on fondi enda disain. Kasutame selle asemel
	   tms-mono fonti (IBM Plex Mono, sama mis algne SKU-silt kasutas),
	   suurem kiri jääb alles. */
	font-family: var(--tms-font-mono);
	font-size: 1.15rem;
	letter-spacing: .01em;
}
.tms-pd-sku-stock-line .tms-pd-sku {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}
.tms-pd-sku-stock-sep {
	color: var(--tms-border-strong, var(--tms-border));
	font-family: inherit;
	font-size: 1rem;
}
.tms-pd-stock {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

/* WooCommerce'i enda vaikimisi laoseisu tekst (wc_get_stock_html(), mis
   renderdub natiivselt osana ostukorvi vormist/lisa-ostukorvi mallist,
   klass "stock" ilma meie "tms-pd-stock" klassita) - see DUBLEERIB meie
   kohandatud laoseisu näidikut (.tms-pd-stock, "Laos (X tk)"). Diagnostika
   kinnitas selle olemasolu (<p class="stock in-stock">10 laos</p>) eraldi
   #tms-pd-summary lapsena, väljaspool meie enda woocommerce_single_product_summary
   konksu ümberkorraldust (see element ei tule läbi hooki, vaid on
   sisse köidetud otse WooCommerce'i add-to-cart mallifaili, mida see
   plugin ei kirjuta üle) - peidame selle, et vältida kahte erinevat
   laoseisu teksti samal lehel. */
#tms-pd-summary > p.stock:not(.tms-pd-stock) { display: none !important; }

.tms-pd-summary .woocommerce-product-rating { order: 7; display: flex; align-items: center; gap: 8px; }
.tms-pd-summary .star-rating { font-size: .95rem; }

/* ⚠ Vorming muudetud 14.09.2026 (v1.44.0): virnastatud (silt yleval,
   vaartus all) -> YHE-REALINE (silt vasakul, vaartus paremal). Samuti
   kadus 4-rea piir, seega siin on nyyd KOIK tehnilised andmed.
   Yhe-realine mahutab ~35% rohkem ridu samale korgusele. */
/* ─── TEHNILISED ANDMED ─────────────────────────────────────────────────
   Asub GALERII veerus, pildi all (v1.47.0). Stiil on ASUKOHAST SOLTUMATU
   ehk ilma .tms-pd-gallery prefiksita - nii ei lagune see, kui plokk
   kunagi uuesti liigub.

   Kompaktsuse voti: rea korgus on 26px (padding 4px + ~18px sisu), mitte
   vaikimisi. Eraldajaks on hairline 1px rgba, mitte tais raamjoon - raam
   iga rea umber teeks tiheda tabeli myraks.
   `order` EI OLE enam maaratud: galerii veerg ei ole flex-konteiner. */
.tms-spec-block {
	/* v1.71.0, 15.09.2026: oli OTSENE .tms-pd-layout grid-laps, oma
	   "grid-area". v1.75.0: jagas "panel" ala .tms-pd-summary'ga (üks
	   korraga nähtav) - PEITIS hinna/ostukorvi "Tehnilised andmed"
	   valimisel.
	   18.09.2026 (2. voor): kliendi soov oli, et spetsid ilmuksid TÄPSELT
	   kirjelduse kohale, mitte terve kokkuvõtte ALLA (esimese katse
	   tulemus, kui plokk sai oma "spec" grid-rea) - vt tms-single-
	   product-hooks.php tms_output_spec_strip() hooki, mis nüüd renderdab
	   SIIA, ".tms-pd-summary" SISSE, sama "order:3" peale, mis
	   ".tms-pd-fulldesc" (vt seal pikemat selgitust). See element ON
	   seega nüüd ".tms-pd-summary" tavaline flex-laps, mitte enam
	   ".tms-pd-layout" oma grid-laps - "grid-area" pole enam asjakohane,
	   "order" asendab seda. */
	order: 3;
	margin-top: 0;
	/* ⚠ Valitud disain (14.09.2026): PAISE-SININE pealkirjariba, valge keha.
	   Varem prooviti 5 varianti (kollane / sinine pais / teras / tume /
	   triip+zebra) ajutise ?tms-disain= valijaga - see on nyyd eemaldatud.

	   Keha on VALGE, mitte surface-2: sinine riba annab plokile juba
	   kuju, taustavarv lisaks teeks ploki liiga raskeks.
	   padding:0 + overflow:hidden - et riba ulatuks servani ja
	   border-radius loikaks tema nurgad kaasa. */
	background: var(--tms-surface);
	border: 1px solid var(--tms-border);
	border-radius: var(--tms-radius-md);
	padding: 0;
	overflow: hidden;
}
.tms-spec-block__title {
	margin: 0;
	/* ⚠ Riba oli 14.09.2026 seisuga ~36px ehk kitsas triip. Pohjus oli
	   KAHEKORDNE: (1) --tms-font-display on Barlow CONDENSED, mis on
	   olemuselt kitsas, ja (2) kraad oli ainult .82rem (~13px). Vaike
	   kraad kitsas fondis suurkirjas naeb alati kokkusurutud valja.
	   Nyyd: suurem kraad + rohkem vertikaalset ohku = ~48px riba,
	   mis loeb plokipaisena, mitte eraldusjoonena.

	   ⚠ PARANDUS 15.09.2026 (kliendi ekraanipilt): 24px vasak polster
	   ("--tms-space-5") jai visuaalselt liiga vahe umara nurga ("--tms-
	   radius-md" 10px) juurde - esimene taht ("T") naib nurgakaarega
	   peaaegu kokku puutuvat, kuigi tegelikult ei kattu. Toostatud
	   "--tms-space-6"-le (32px), et taht saaks selgelt hingamisruumi.
	   Riba korgus samal pohjusel tostetud ~48px -> ~54px (16/17px
	   ulal/all, varem 14/13px).

	   ⚠ TEINE VOOR (15.09.2026): "--tms-space-6" (32px) klapib PIKSLI
	   TAPSUSELT alumise "tms-spec-strip" polstriga, aga klient naeb
	   siiski "T"-d tabeli servale lahemal kui alumisi silte. Pohjus on
	   OPTILINE, mitte CSS-viga: pealkiri on --tms-font-display (Barlow
	   Condensed) RASVASES SUURTAHES, alumised sildid on tavakaaluga
	   kehafont - suure rasvase suurtahe "T" vasak "sisemine kant"
	   (ink) on glyph-kastis loomuomaselt narmam kui tavafondi tahtedel,
	   nii et sama px-polster loeb silmale VAHEMANA. Lahendus: anname
	   pealkirjale KINDLALT ROHKEM ruumi kui allpoolne rida, mitte enam
	   pikslitapselt sama - "--tms-space-6 + 8px" = 40px.

	   ⚠ KOLMAS VOOR (15.09.2026) - PARIS JUURPOHJUS LEITUD. Optilise
	   selgituse kaks eelmist parandust EI TOIMINUD, sest polster ei
	   jouagi kunagi ekraanile - klient mootis brauseri konsoolis
	   `getComputedStyle`-iga: "padding-left: 0px, padding-right: 0px".
	   MOLEMAD varasemad voorud kirjutasid CSS-i oigesti, aga Divi teema
	   `h2 { padding: 0 !important }` (builder'i baas-CSS, laeb meie
	   pluginast HILJEM) voitis meie reegli taielikult - number ei olnud
	   "vale suurusega", vaid NULL kogu aeg, ka enne seda parandust.

	   Kaardi enda VASAK serv naib klienti seni petnud: `.tms-spec-block`
	   umarnurk (border-radius + overflow:hidden) joonistab visuaalse
	   kaare, mis eemal T-st NAEB nagu polster - see ei olnud kunagi
	   pariselt polster, vaid nurga enda kuju.

	   `!important` on siin OIGUSTATUD (mitte labimoodne kasutus), sest
	   Divi enda reegel on `!important` - ilma vastu panemata ei saagi
	   meie reegel kunagi voita, sonltumata pikslivaartusest. */
	padding: 16px calc(var(--tms-space-6) + 8px) 17px !important;
	background: var(--tms-header-blue);
	border-bottom: 0;
	color: #fff;
	font-family: var(--tms-font-display);
	font-size: 1.1rem;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	/* Suurema kraadi juures ei ole nii palju tahevahet vaja - .1em
	   hakkaks sonu laiali kiskuma. */
	letter-spacing: .06em;
}
/* ⚠ YKS VEERG, mitte kaks (v1.49.0 - loetavuse parandus).
   Mootdetud 80 tootel, 258 spec-rida: mediaan 25 marki, 75% 43 marki,
   90% 62 marki. Kahe veeru puhul on veerg ~300px ehk ~40 marki, seega
   **26% ridadest murdus rabalaks**. Yhes veerus (~640px, ~85 marki)
   murdub ainult ~1%. Kahe veeru tihedus ei olnud seda hinda vaart. */
.tms-spec-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	/* Plokil endal on padding:0 (sinine riba servani), seega sisu
	   hingamisruum tuleb siit.
	   ⚠ VASAK/PAREM POLSTER (15.09.2026): baasjoon on sama, mida
	   pealkiri kasutab ("--tms-space-6"), + pealkirjal endal on peal
	   veel 8px lisa (vt ".tms-spec-block__title" kommentaari - optiline
	   pohjus, rasvane suurtaht font vajab tavafondist rohkem hingamis-
	   ruumi, et sama px-polster ei loeks silmale vahemana). Read
	   jaavad seega pealkirjast VEIDI vasakpoolsemale - see on tahtlik,
	   mitte joondusviga. */
	padding: var(--tms-space-3) var(--tms-space-6);
}
/* Rida on ISE grid: silt kindlas veerus, vaartus kindlas veerus.
   ⚠ MIKS MITTE flex + space-between: siis lendab vaartus rea PAREMASSE
   SERVA ja luhikese sildi puhul jaab nende vahele suur tyhi ala - silm
   kaotab seose. Nyyd on MOLEMAD veerud joondatud: sildid algavad yhelt
   jooneit ja vaartused samuti. See on klassikaline spetsifikatsioonitabel.

   Vaartus on VASAKULE joondatud (mitte paremale) - paremjoondus teeb
   ragged vasakserva, mida on rohkem rida skannides raskem jalgida. */
.tms-spec-strip-row {
	display: grid;
	grid-template-columns: minmax(0, 42%) 1fr;
	align-items: baseline;
	gap: var(--tms-space-4);
	padding: 6px 0;
	/* .07 oli peaaegu nahtamatu; .11 annab reale piiri ilma et tabel
	   muutuks triibuliseks. */
	/* Sinakas hairline, mitte neutraalne hall - seob read pealkirjaribaga. */
	border-bottom: 1px solid rgba(18, 63, 110, .13);
}
.tms-spec-strip-row:last-child { border-bottom: 0; }
.tms-spec-strip-row dt {
	font-family: var(--tms-font-body);
	/* .78rem (~12.5px) oli kehatekstiks liiga vaike. */
	font-size: .84rem;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tms-ink-soft);
	min-width: 0;
}
.tms-spec-strip-row dd {
	margin: 0;
	font-weight: 600;
	font-size: .88rem;
	line-height: 1.45;
	text-align: left;
	min-width: 0;
	color: var(--tms-header-blue);
	font-variant-numeric: tabular-nums;
}
/* Kitsal telefonil ei mahu kaks veergu silt+vaartus paare loetavalt. */
@media (max-width: 480px) {
	.tms-spec-strip { grid-template-columns: 1fr; }
}

.tms-pd-delivery {
	order: 9;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: var(--tms-space-3) var(--tms-space-4);
	background: var(--tms-info-soft);
	border-radius: var(--tms-radius-md);
	font-size: .85rem;
	color: var(--tms-ink);
	line-height: 1.5;
}
.tms-pd-delivery-icon {
	flex-shrink: 0;
	color: var(--tms-info);
	margin-top: 1px;
}
.tms-pd-delivery-text p { margin: 0 0 6px; }
.tms-pd-delivery-text p:last-child { margin-bottom: 0; }

.tms-pd-summary form.cart {
	order: 11;
	display: flex;
	align-items: center;
	gap: var(--tms-space-3);
	flex-wrap: wrap;
	margin-top: var(--tms-space-2);
}
.tms-pd-summary .quantity {
	display: flex;
}
.tms-pd-summary .quantity .qty {
	width: 76px;
	text-align: center;
	padding: 13px 8px;
	font-family: var(--tms-font-mono);
	font-size: 1rem;
	border-radius: var(--tms-radius-sm);
}
/* ÜHTNE "Lisa ostukorvi" disain KÕIKJAL (klient soovis, et nupp ei
   erineks kusagil) - kopeeritud täpselt samaks, mis .tms-product-card
   .add_to_cart_button kasutab (vt tms-tokens.css, seal on ka pikem
   juurpõhjuse selgitus algse sinise disaini valiku kohta). Varem oli
   see nupp KOLLANE (var(--tms-accent)), ilma ikoonita, teistsuguse
   nurgaraadiusega - nüüd sama sinine (#123f6e), ikooniga, sama
   nurgaraadius (var(--tms-radius-md)), hõljutusel EI muutu (nagu
   kaardi nupp). */
.tms-pd-summary .single_add_to_cart_button {
	flex: 1;
	min-width: 180px;
	/* v1.37.18: flex-basis peab olema selgesõnaline (mitte lootma, et
	   height "kannab üle"), vt tms-tokens.css .add_to_cart_button
	   juures olevat pikemat selgitust sama vea kohta. min-width:180px
	   jääb "flex:1" laienemise piiranguks (nupp saab kasvada, aga mitte
	   180px-ist kitsamaks minna). */
	height: 54px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px !important;
	background: #123f6e !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: .95rem !important;
	padding: 0 24px !important;
	border-radius: var(--tms-radius-md) !important;
	text-align: center;
	transition: background-color .15s ease;
	transform: none !important;
}
.tms-pd-summary .single_add_to_cart_button::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.tms-pd-summary .single_add_to_cart_button:hover { background: #123f6e !important; color: #fff !important; }
.tms-pd-summary .single_add_to_cart_button.loading { opacity: .6; }
.tms-pd-summary .single_add_to_cart_button.disabled {
	background: var(--tms-surface-2) !important;
	color: var(--tms-ink-soft) !important;
	cursor: not-allowed;
}
.tms-pd-summary .single_add_to_cart_button.disabled::before { display: none; }

.tms-pd-summary .product_meta {
	order: 12;
	font-size: .82rem;
	color: var(--tms-ink-soft);
	padding-top: var(--tms-space-3);
	border-top: 1px solid var(--tms-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tms-pd-summary .product_meta a { color: var(--tms-info); }

/* Variatsioonide tabel (variable tooted) - taaskasutab WC JS-i, restailime ainult */
.tms-pd-summary table.variations { order: 10; width: 100%; }
.tms-pd-summary table.variations td { padding: 6px 0; }
.tms-pd-summary table.variations select {
	width: 100%;
	padding: 10px 12px;
}
.tms-pd-summary .woocommerce-variation-price .price { font-size: 1.4rem; }
.tms-pd-summary .woocommerce-variation-add-to-cart { order: 11; width: 100%; }

/* --- Tabid (Kirjeldus / Lisainfo / Arvustused) --- */
.tms-pd-tabs .woocommerce-tabs { padding-bottom: var(--tms-space-8); }
.tms-pd-tabs ul.tabs {
	display: flex;
	gap: var(--tms-space-5);
	border-bottom: 1px solid var(--tms-border);
	margin-bottom: var(--tms-space-5) !important;
}
.tms-pd-tabs ul.tabs li {
	padding: 0 0 var(--tms-space-3);
}
.tms-pd-tabs ul.tabs li a {
	font-family: var(--tms-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tms-ink-soft);
}
.tms-pd-tabs ul.tabs li.active {
	border-bottom: 3px solid var(--tms-accent);
	margin-bottom: -1px;
}
.tms-pd-tabs ul.tabs li.active a { color: var(--tms-ink); }
.tms-pd-tabs .woocommerce-Tabs-panel { max-width: 80ch; line-height: 1.7; }
.tms-pd-tabs table.woocommerce-product-attributes {
	width: 100%;
	max-width: 640px;
	border-collapse: collapse;
}
.tms-pd-tabs table.woocommerce-product-attributes th,
.tms-pd-tabs table.woocommerce-product-attributes td {
	text-align: left;
	padding: var(--tms-space-3) var(--tms-space-3) var(--tms-space-3) 0;
	border-bottom: 1px solid var(--tms-border);
	font-size: .92rem;
}
.tms-pd-tabs table.woocommerce-product-attributes th {
	font-weight: 600;
	width: 40%;
	color: var(--tms-ink-soft);
}

/* Seotud tooted / ülesmüük paigutus ja stiil on nüüd jagatud tms-tokens.css
   failis (kasutusel nii siin kui ostukorvi ristmüügis), et tootevaade ja
   ostukorv näitaksid tootekaarte täpselt samamoodi, mis poe tootegrid. */

/* --- Mobiilne kleepuv ostukorvi riba --- */
.tms-sticky-addtocart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--tms-surface);
	border-top: 1px solid var(--tms-border);
	box-shadow: var(--tms-shadow-lg);
	z-index: 40;
	transform: translateY(100%);
	transition: transform .2s ease;
}
.tms-sticky-addtocart.is-visible { transform: translateY(0); }
.tms-sticky-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tms-space-3);
	padding: var(--tms-space-3) var(--tms-space-4);
}
.tms-sticky-info { display: flex; flex-direction: column; min-width: 0; }
.tms-sticky-name {
	font-size: .78rem;
	color: var(--tms-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40vw;
}
.tms-sticky-price { font-family: var(--tms-font-display); font-weight: 700; font-size: 1.1rem; }

/* Nupurühm (võrdlus + lisa ostukorvi) riba paremas servas (v1.73.0) -
   vt tms_render_compare_button_sticky() class-tms-product-helpers.php
   failis, miks eraldi klass, mitte .mpc-compare-btn--card taaskasutus. */
.tms-sticky-actions {
	display: flex;
	align-items: center;
	gap: var(--tms-space-2);
	flex-shrink: 0;
}
.mpc-compare-btn--sticky {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tms-border);
	border-radius: var(--tms-radius-sm, 8px);
	background: var(--tms-surface);
	color: var(--tms-ink);
}
.mpc-compare-btn--sticky:hover,
.mpc-compare-btn--sticky:focus-visible {
	border-color: var(--tms-ink-soft);
}
.mpc-compare-btn--sticky[aria-pressed='true'] {
	background: var(--tms-accent);
	border-color: var(--tms-accent);
	color: #1C1F22;
}
@media (min-width: 861px) {
	.tms-sticky-addtocart { display: none; }
}

/* Klient soovis alguses tootevaate täislaiust (nagu poevaates), aga kuna
   tootevaatel on üldiselt vähem sisu (üks pilt, lühike tekst), jättis
   täislaius pildi ja teksti vahele suure tühja vahe laial ekraanil.
   Piirame mõistliku 1400px peale ja tsentreerime - kehtib ühtselt pealkirja,
   sisu ja seotud toodete sektsioonidele, et need kõik samal real joonduksid. */
.tms-product-page .tms-container {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* MOBIILI KATEGOORIAPUU/NUPU CSS (varem siin, 14.09.2026-st) EEMALDATUD
   v1.77.0-s (15.09.2026) koos külgriba enda eemaldamisega tootelehelt -
   vt .tms-pd-outer juures olevat kommentaari ülal. */

/* ═══════════════════════════════════════════════════════════════════════════
   „SINU VOIT" EI TOHI HULJUDA LEHE ULANURGAS (14.09.2026)

   ⚠ JUURPOHJUS: baasreegel `.tms-savings-tag` (tms-tokens.css) on
   `position: absolute; top: ...; right: ...`, sest TOOTEKAARDIL on see
   nurgasilt pildi peal. Tooteleht kasutab SAMA klassi (`.tms-pd-savings`)
   ja EI LAHTESTANUD positsiooni — kommentaar tms-tokens.css failis utleb
   seda isegi valja, aga lahtestust ennast ei olnud.

   Absoluutne element otsib lahima positsioneeritud esivanema. Tootelehe
   kokkuvotteveerg ei ole positsioneeritud, seega ronis silt puust ules
   valja ja maandus lehe ulemisse paremasse nurka — tapselt teekonnariba
   peale.

   `position: static` paneb ta tagasi tavalisse voogu. Koik ulejaanu
   (`order: 4`, `align-self`, `margin-top`) oli juba olemas ja eeldaski
   voos olevat elementi — ainult see uks rida oli puudu.
   ═══════════════════════════════════════════════════════════════════════════ */

.tms-product-page .tms-pd-savings {
	position: static;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIILI TEEKONNARIBA: LUHEM (14.09.2026)

   Mobiilis ei mahu „Esileht > Aiatehnika > Robotniidukid > Robotniiduk
   AL-KO Robolinho® 700i, 700m²" uhelegi ekraanile. Kaks otsa on kasutule:
   „Esileht" viib sinna, kuhu viib ka logo, ja toote nimi on kohe teekonna-
   riba all H1-na niigi olemas.

   ⚠ MIKS `:nth-last-child(n+3)` JA `:nth-child(n+3)`, MITTE LIHTSALT
   `:first-child` / `:last-child`: kategooriata tootel on teekonnariba
   ainult „Esileht > Toote nimi" — need kaks tingimust noauvad, et
   peitmine kaib alles siis, kui ka kolmas ohvi on olemas. Muidu jaaks
   riba mobiilis TAIESTI tuhjaks.

   ⚠ MIKS KUJUREEGLID KORDUVAD: ohvid on `clip-path`-iga noolekujulised.
   Esimesel on sile vasak serv, viimasel sile parem serv ja rohuvarv. Kui
   need kaks ara peita, peavad need omadused liikuma JARGMISELE ja
   EELMISELE — muidu jaaks nahtava riba algusesse nooleots, mis ei osuta
   millelegi.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	/* „Esileht" ara — ainult siis, kui ohve on vahemalt kolm. */
	.tms-product-page .tms-crumb:first-child:nth-last-child(n+3) {
		display: none;
	}

	/* Toote nimi ara — sama tingimus teiselt poolt. */
	.tms-product-page .tms-crumb:last-child:nth-child(n+3) {
		display: none;
	}

	/* Nahtavaks jaanud esimene ohv: sile vasak serv, ilma negatiivse
	   margin'ita (see oli molemad ohvid teineteise sisse libistamiseks). */
	.tms-product-page .tms-crumb:nth-child(2):nth-last-child(n+2) {
		margin-left: 0;
		padding: 8px 20px 8px 16px;
		clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	}

	/* Nahtavaks jaanud viimane ohv saab rohuvarvi. */
	.tms-product-page .tms-crumb:nth-last-child(2):nth-child(n+2) {
		background: var(--tms-accent);
		color: var(--tms-accent-ink);
		font-weight: 700;
	}

	/* Tapselt kolm ohvi => nahtavale jaab ainult uks. Siis ei ole tal
	   kummalgi pool naabrit, kelle poole osutada — molemad servad siledad. */
	.tms-product-page .tms-crumb:nth-child(2):nth-last-child(2) {
		clip-path: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOTEVAATE HINNAD AVALEHEGA UHTE NAKKU (14.09.2026)

   VORDLUSALUS — avalehe „Soodustooted"/„Uued tooted" (msp/mnp):
       soodushind   #F00000, rasvane, ILMA taustata, ILMA allakriipsuta
       tavahind     #9A9A9A, tavakaal, labikriipsutatud, 0.85 lapipaistvus
       jarjekord    soodushind EES, labikriipsutatud tavahind jareltulijana

   TOOTEVAATES OLI KOLM ERINEVUST:
     1. soodushind oli `--tms-danger` = #B23A34 (tuhm telliskivipunane),
        mitte sama puhas punane, mis avalehel;
     2. tavahind tuli EES (WooCommerce paneb `<del>` markupis esimeseks) —
        avalehel on ta soodushinna JAREL;
     3. seotud toodete kaartidel oli soodushind kollases „pillis" — see
        kujundus jai ajast, mil „Uute toodete" kaardid nagid samamoodi
        valja; need said hiljem punase hinna, seotud tooted mitte.

   ⚠ MOOTKAVA JAAB TOOTEVAATE OMAKS. Avalehel on hind 0.95em, siin 2rem —
   see ei ole viga, vaid tahtlik hierarhia (detailvaates on hind lehe
   peamine number). Uhtlustan VARVI, KAALU ja JARJEKORRA, mitte suurust.

   ⚠ EKRAANILUGEJALE OHUTU: `<del>` ja `<ins>` on markupis `aria-hidden`
   ja tegelik loetav tekst tuleb `.screen-reader-text` elementidest, mis
   jaavad DOM-i jarjekorda. Visuaalne umberjarjestamine ei muuda seda,
   mida ekraanilugeja ette loeb.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Toote peamine hind ──────────────────────────────────────────── */
.tms-product-page .tms-pd-summary .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
}
.tms-product-page .tms-pd-summary .price ins {
	order: 1;
	background: none !important;
	color: #F00000 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.tms-product-page .tms-pd-summary .price del {
	order: 2;
	/* Vana `margin-right` oli selleks, et eraldada tavahind TEMA JAREL
	   tulevast soodushinnast. Nuud on ta ise jareltulija ja vahe tuleb
	   `.price` gap'ist — margin jataks siia topeltvahe. */
	margin-right: 0;
	color: #9A9A9A !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	opacity: 0.85;
}

/* ── 2) Kleepuv osturiba ────────────────────────────────────────────────
   ⚠ SIIA EI ULATU ULEMISED REEGLID. JS kopeerib `.price` elemendi SISU
   (`$price.html()`) `.tms-sticky-price` sisse — `<del>` ja `<ins>` ei ole
   seal enam `.price` sees, seega `.price del` neid ei taba. Ilma selleta
   jaaks kleepuval ribal vana kujundus ja lehel oleks korraga kaks eri
   moodi hinda. */
.tms-product-page .tms-sticky-price,
.tms-sticky-addtocart .tms-sticky-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
}
.tms-product-page .tms-sticky-price ins,
.tms-sticky-addtocart .tms-sticky-price ins {
	order: 1;
	background: none !important;
	color: #F00000 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.tms-product-page .tms-sticky-price del,
.tms-sticky-addtocart .tms-sticky-price del {
	order: 2;
	color: #9A9A9A !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	opacity: 0.85;
}

/* ── 3) Seotud toodete kaardid ──────────────────────────────────────────
   Tavahinnaga toote kollane „pill" JAAB ALLES — tapselt nii on ka avalehe
   „Uute toodete" kaartidel (`.price > .woocommerce-Price-amount` on seal
   pill). Muutub ainult SOODUSTOOTE kuvamine.

   ⚠ VALIJA ON SIHILIKULT RASKE: olemasolevad reeglid tms-tokens.css failis
   on `!important`-iga, seega ainuke viis nende ule kirjutada on suurem
   spetsiifilisus. `li.product.sale` annab selle ja piirab muudatuse
   korraga ainult soodustoodetele. */
.related.products ul.products li.product.sale .tms-card-price-row .price ins {
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: #F00000 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.related.products ul.products li.product.sale .tms-card-price-row .price del {
	color: #9A9A9A !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTO KUUMAKSE OTSE HINNA ALL (26.10.2026, omaniku otsus: "tõsta hinna alla")

   Varem renderdus ESTO kalkulaator (logo + "Kuumakse alates X € / N kuud") ostukorvi
   vormi SEES, "Lisa ostukorvi" nupu järel (esto-payment-methods valik
   esto_calculator_hook = woocommerce_after_add_to_cart_button). Nüüd on valik
   woocommerce_single_product_summary (prioriteet 10): <p class="esto-calculator"> on
   .tms-pd-summary OTSENE laps, DOM-is hiljem kui hind (8), "Sinu võit" (8) ja
   tootekood/laoseis (9). Visuaalse koha määrab - nagu kõigil teistel kokkuvõtte
   ridadel - CSS "order": hind = 4, ESTO = 4 (DOM-is hinna järel, seega kohe hinna all),
   "Sinu võit" + "Pakkumine kehtib kuni" nihkuvad ESTO järele (5); tootekoodi/laoseisu
   rida on samuti 5 ja DOM-is hiljem, seega jääb nende järele. Ilma selle reeglita
   saaks ESTO order 0 ja hüppaks kokkuvõtte ALGUSESSE - seetõttu tuleb see CSS enne
   ESTO valiku vahetamist üles viia.
   Kui ESTO valik pannakse tagasi vormi sisse (woocommerce_after_add_to_cart_button), ei ole
   ESTO enam kokkuvõtte otsene laps, need reeglid ei kohaldu ja vana välimus taastub ise.
   Tootekaartide (.esto-calculator-loop), ostukorvi ja kassa HTML-i see ei mõjuta.
   ═══════════════════════════════════════════════════════════════════════════ */
.tms-pd-summary > .esto-calculator {
	order: 4;
	align-self: flex-start;
	margin: 0;
}
.tms-pd-summary > .tms-pd-savings,
.tms-pd-summary > .tms-pd-campaign-validity {
	order: 5;
}