/* ==========================================================================
   POE / KATEGOORIA VAADE
   ========================================================================== */

/* ⚠ 15.09.2026: JUURPÕHJUS suurele tühjale alale BREADCRUMB'I KOHAL.
   Divi teema (style.min.css) lisab reegli:
     "body:not(.et-tb) #main-content .container,
      body:not(.et-tb-has-header) #main-content .container
      { padding-top: 58px }"
   See on mõeldud KLASSIKALISE (vidinapõhise) päise jaoks - kui leht
   kasutab Divi Theme Builder päist (meie oma <header class="et-l
   et-l--header">), peaks body kandma klassi "et-tb-has-header", mis
   selle puhvri välistaks. Meie body seda klassi EI kanna, seega jääb
   58px "topelt" tühjaks ruumiks iga poe-/kategooria-/sildilehe
   ÜLAOSASSE, ilma nähtava põhjuseta.

   ⚠ PARANDATUD 15.09.2026 (varasem katse siin oli VIGANE): allolev
   reegel oli varem ".tms-shop-page #main-content .container" - see
   selektor EI SAA KUNAGI midagi tabada, kuna ".tms-shop-page" (vt
   archive-product.php, "tms-shop-content" div klass) on ISE #main-
   content .container SEES (järglane), mitte selle esivanem, nagu
   järglase-kombinaator eeldaks. See rida oli seega SURNUD KOOD - poe
   ülaosa tühi ala tõenäoliselt PÜSIS, kuigi kommentaar väitis vastupidist.
   ÕIGE parandus (tegelikult toimiv, BODY enda klassi peal, mitte poe
   sisu-wrapperi peal) elab nüüd tooriistakeskus-modern-shop plugina
   tms-tokens.css failis, reeglis "body.tms-scope-shop #main-content
   .container" (sama plokk, mis juba andis selle vaate laiuse/paddingu -
   lisati sinna lihtsalt "padding-top: 0 !important;" rida juurde). */

.tms-shop-header {
	/* 15.09.2026: vähendatud (var(--tms-space-6) 32px -> space-4 16px üleval,
	   space-4 16px -> space-3 12px all) - kasutaja märkis DevTools'iga, et
	   pealkirja kohal/all oli liiga palju tühja ruumi. */
	padding: var(--tms-space-4) 0 var(--tms-space-3);
}
.tms-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--tms-font-mono);
	font-size: .72rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin-bottom: var(--tms-space-3);
}
.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-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-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-breadcrumb a { color: inherit; text-decoration: none; }
.tms-breadcrumb a:hover { text-decoration: underline; }

.tms-shop-header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tms-space-4);
	flex-wrap: wrap;
}
.tms-shop-description {
	margin-top: var(--tms-space-3);
	max-width: 70ch;
	color: var(--tms-ink-soft);
}

.tms-shop-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--tms-space-7);
	align-items: start;
	padding-bottom: var(--tms-space-8);
}
@media (max-width: 900px) {
	.tms-shop-layout { grid-template-columns: 1fr; }
}

/* --- Filtrid --- */
.tms-shop-filters {
	position: sticky;
	top: var(--tms-space-4);
	background: var(--tms-surface);
	border: 1px solid var(--tms-border);
	border-radius: var(--tms-radius-lg);
	padding: var(--tms-space-5);
}
@media (max-width: 900px) {
	.tms-shop-filters { position: static; }
}
.tms-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--tms-space-4);
}
.tms-filters-reset {
	background: none;
	border: none;
	color: var(--tms-info);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}
.tms-filters-reset:hover { text-decoration: underline; }

.tms-filter-group {
	padding: var(--tms-space-4) 0;
	border-top: 1px solid var(--tms-border);
}
.tms-filter-group:first-of-type { border-top: none; padding-top: 0; }
.tms-filter-label {
	display: block;
	font-weight: 600;
	font-size: .88rem;
	margin-bottom: var(--tms-space-3);
}
.tms-filter-search {
	width: 100%;
	padding: 10px 12px;
}
.tms-price-inputs {
	display: flex;
	align-items: center;
	gap: var(--tms-space-2);
	color: var(--tms-ink-soft);
}
.tms-price-inputs input {
	width: 0;
	flex: 1;
	padding: 9px 10px;
	font-family: var(--tms-font-mono);
	font-size: .85rem;
}
.tms-filter-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--tms-space-2);
	max-height: 220px;
	overflow-y: auto;
	padding-right: 4px;
}
.tms-check {
	display: flex;
	align-items: flex-start;
	gap: var(--tms-space-2);
	font-size: .88rem;
	cursor: pointer;
}
.tms-check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--tms-accent);
}
/* 15.09.2026: bränditekst murrab nüüd vajadusel kahele reale, mitte ei
   käitu katkematu üherealisena (vt .tms-check enda align-items muutust
   center -> flex-start, et loendur jääks pikema, kaherealise nime korral
   ikka esimese reaga joonele, mitte ei tsentreeru mõlema rea vahele). */
.tms-check-label {
	flex: 1;
	min-width: 0;
}
.tms-check-count {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--tms-ink-soft);
	font-family: var(--tms-font-mono);
	font-size: .75rem;
	padding-top: 1px;
}

/* --- Tulemuste riba ---
   Nüüd omaette täislaiuses rida päise ja kaheveerulise paigutuse vahel
   (mitte tulemuste sees pesastatud), et filter ja tootegrid algaksid
   täpselt samalt kõrguselt. */
.tms-results-bar {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--tms-space-7);
	align-items: end;
	/* 15.09.2026: vähendatud (margin-bottom space-5 24px -> space-3 12px,
	   padding-top space-5 24px -> space-3 12px) - vt .tms-shop-header'i
	   juures sama kuupäeva selgitust. */
	margin: 0 auto var(--tms-space-3);
	padding-top: var(--tms-space-3);
	border-top: 1px solid var(--tms-border);
}
.tms-results-bar-spacer {
	visibility: hidden;
}
.tms-results-bar-grid-col {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--tms-space-4);
	flex-wrap: wrap;
}
@media (max-width: 900px) {
	.tms-results-bar { grid-template-columns: 1fr; gap: var(--tms-space-3); }
	.tms-results-bar-spacer { display: none; }
	.tms-results-bar-grid-col { grid-column: 1; justify-content: space-between; }
}
/* Toodete arvu ("125 toodet") klient ei soovinud siin näha. */
#tms-result-count {
	display: none;
}
.tms-sort-select {
	padding: 9px 32px 9px 12px;
	font-size: .85rem;
	font-weight: 500;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23565B60' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.tms-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tms-space-2);
	margin-bottom: var(--tms-space-4);
}
.tms-active-filters:empty { display: none; }
.tms-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tms-accent-soft);
	color: var(--tms-accent-ink);
	border-radius: 999px;
	padding: 5px 6px 5px 12px;
	font-size: .8rem;
	font-weight: 500;
}
.tms-filter-chip button {
	background: none;
	border: none;
	cursor: pointer;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	font-size: 1rem;
	line-height: 1;
}
.tms-filter-chip button:hover { background: rgba(0,0,0,.08); }

/* --- Tootegrid ---
   Vaikimisi (auto): auto-fill + piiratud veeru laius (200-240px), et
   tootepildid ei venitataks üle nende tegeliku resolutsiooni (mis teeks
   need ähmaseks/"moondunuks") - ekraanile mahub lihtsalt nii mitu
   tootekaarti, kui ruumi jätkub, kaartide suurus ise ei kasva.
   Admin saab WooCommerce -> Kaasaegne e-pood lehelt valida ka fikseeritud
   veergude arvu (.tms-product-grid-fixed), mis jagab ekraani laiuse
   täpselt selle arvu kaartide vahel - sel juhul VÕIVAD kaardid laiadel
   ekraanidel suuremaks minna (admin valik, teadlik kompromiss). */
.tms-product-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: var(--tms-space-5);
	transition: opacity .18s ease;
}
.tms-product-grid.tms-product-grid-fixed {
	grid-template-columns: repeat( var(--tms-shop-cols, 4), 1fr );
}
@media (max-width: 780px) {
	.tms-product-grid.tms-product-grid-fixed { grid-template-columns: repeat( 2, 1fr ); }
}
@media (max-width: 480px) {
	.tms-product-grid,
	.tms-product-grid.tms-product-grid-fixed { grid-template-columns: 1fr; }
}
.tms-product-grid.tms-is-loading { opacity: .45; pointer-events: none; }

.tms-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--tms-space-8) var(--tms-space-4);
	color: var(--tms-ink-soft);
}
.tms-empty-state h3 {
	font-family: var(--tms-font-display);
	font-size: 1.3rem;
	color: var(--tms-ink);
	margin-bottom: var(--tms-space-2);
}

/* Progressiivne laadimine (16.10.2026): ümbris on vaikimisi PEIDETUD (kerimisel laeb JS automaatselt); nähtavaks (.is-visible)
   muutub ainult varunupuna, kui IntersectionObserver puudub / andmesääst / automaatne laadimine ebaõnnestus. Nii on valmis
   lehe kõrgus täpselt sama mis varem (nuppu/vahet pole).
*/
.tms-load-more-wrap {
	display: none;
	text-align: center;
	margin-top: var(--tms-space-6);
}
.tms-load-more-wrap.is-visible { display: block; }
/* Vaatleja sihtmärk: 1px kõrge ja -1px ülemise vahega = netojalajälg 0. */
#tms-load-sentinel {
	height: 1px;
	margin-top: -1px;
	visibility: hidden;
	pointer-events: none;
	overflow-anchor: none;
}
/* Lehele /page/N/ saabunule 'Eelmised tooted' (lehe 1 välimus ei muutu). */
.tms-shop-results .tms-prev-page { margin: 0 0 var(--tms-space-4); }
/* Roomaja lehekülje-navigatsioon on screen-reader-text (nähtamatu); klaviatuuri fookuses ilmub nähtavale. */
.tms-shop-results .tms-crawl-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.tms-shop-results .tms-crawl-pagination.screen-reader-text:focus-within {
	position: static !important; width: auto; height: auto; margin: var(--tms-space-5) 0 0; overflow: visible; clip: auto; clip-path: none;
}

/* Klient soovis filtrite/tootegridi ala nii laiaks kui ekraan lubab, mitte
   1280px keskjoondatud kastis - eemaldame laiuspiirangu ainult poevaates
   (teised vaated jäävad puutumata). Külgedele jääb ikka väike hingamisruum
   tänu .tms-container enda paddingule (var(--tms-space-5) / mobiilis
   var(--tms-space-4)), mida see reegel ei puuduta. */
.tms-shop-page .tms-container {
	max-width: none;
}

/* ==========================================================================
   DIVI KÜLGRIBA VARUVÕRK
   Divi teema võib poe/kategooria lehele lisada oma vaikimisi külgriba
   (nt "Värsked postitused"), kui lehe/teema paigutuse seadetes pole "Ilma
   külgribata" valitud. Puhtaim lahendus on see Divi enda seadetest välja
   lülitada (Divi teema kohandaja -> WooCommerce, või konkreetse lehe/
   kategooria Divi seadetest "Sidebar" -> "No Sidebar"), aga see reegel
   toimib varuvõrguna, kui seadistus ei kata kõiki poe/kategooria vaateid.
   NB: see reegel EI ole .tms-reset konteineri sees, kuna #sidebar/#left-area
   on väljaspool meie plugina enda markup'i (Divi enda teema struktuur).
   ========================================================================== */
body.tms-scope-shop #sidebar {
	display: none !important;
}
body.tms-scope-shop #left-area {
	width: 100% !important;
	float: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIIL: FILTER KOKKUPANDAV, TOOTED ESIMESENA (14.09.2026)

   ENNE: `.tms-shop-layout` muutus <=900px uheveeruliseks ja kulgriba jai
   DOM-i jargi TOODETE ETTE. Mobiilis nagi kasutaja lehe avades ainult
   filtripaneeli — otsingukast, kategooriapuu, hinnavahemik, brandid — ja
   pidi tooteni joudmiseks umbes ekraanitaie kerima.

   NUUD: paneel on kokku pandud ja tema asemel on uherealine „Filtreeri"
   nupp. Tooted algavad kohe selle all.

   ⚠ MIKS `[data-filters-collapsible="1"]`: peitmine EI TOHI olla puhtalt
   CSS-i asi. Kui JS ei kaivitu (viga, blokeerija), jaaksid filtrid
   mobiilis igaveseks peitu ja neid ei saaks avada — nuppu ju keegi ei
   kuulaks. Selle atribuudi paneb JS ise; kuni seda ei ole, on kogu leht
   tapselt nagu enne. Vigane JS annab siis vana kaitumise, mitte katkise
   lehe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lauaarvutis pole kumbagi nuppu vaja — `display:none` eemaldab nupu ka
   gridi lahtriarvestusest, mitte ei jata tuhja lahtrit. */
.tms-filters-toggle,
.tms-filters-done {
	display: none;
}

@media (max-width: 900px) {

	.tms-shop-layout[data-filters-collapsible="1"] .tms-filters-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 12px 14px;
		background: var(--tms-surface);
		border: 1px solid var(--tms-border);
		border-radius: var(--tms-radius-lg);
		color: var(--tms-ink);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.tms-filters-toggle__label {
		flex: 1 1 auto;
		text-align: left;
	}

	/* Aktiivsete filtrite arv — ilma selleta ei ole kokkupandud paneeli
	   puhul kusagilt naha, et filter uldse tootab. */
	.tms-filters-toggle__count {
		flex: 0 0 auto;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 10px;
		background: var(--tms-info, #123F6E);
		color: #fff;
		font-size: .75rem;
		line-height: 20px;
		text-align: center;
	}
	.tms-filters-toggle__count[hidden] {
		display: none;
	}

	.tms-filters-toggle__chev {
		flex: 0 0 auto;
		transition: transform .18s ease;
	}
	.tms-filters-toggle[aria-expanded="true"] .tms-filters-toggle__chev {
		transform: rotate(180deg);
	}

	/* Paneel ise. */
	.tms-shop-layout[data-filters-collapsible="1"] .tms-shop-filters[data-open="0"] {
		display: none;
	}
	.tms-shop-layout[data-filters-collapsible="1"] .tms-shop-filters {
		margin-top: 10px;
	}

	.tms-shop-layout[data-filters-collapsible="1"] .tms-filters-done {
		display: block;
		width: 100%;
		margin-top: 18px;
		padding: 12px 14px;
		border: 0;
		border-radius: var(--tms-radius-lg);
		background: var(--tms-info, #123F6E);
		color: #fff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIILI TEEKONNARIBA POE-/KATEGOORIALEHEL (14.09.2026)

   Sama pohjus, mis tootelehel: „Esileht" ei utle mobiilis midagi, mida logo
   juba ei utleks. Kategooria nimi jaab ALLES — see on lehe enda identiteet,
   erinevalt tootelehest, kus sama nimi on kohe all H1-na.

   ⚠ `:nth-last-child(n+2)` noauab, et jareltulijaid oleks vahemalt uks —
   muidu peidaks see poe juurlehel ainsa ohvi ara.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

	.tms-shop-page .tms-crumb:first-child:nth-last-child(n+2) {
		display: none;
	}

	/* Nahtavaks jaanud esimene ohv: sile vasak serv. */
	.tms-shop-page .tms-crumb:nth-child(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%);
	}

	/* Kui ohve on tapselt kaks, jaab nahtavale uks — molemad servad siledad. */
	.tms-shop-page .tms-crumb:nth-child(2):last-child {
		clip-path: none;
	}
}