/*
Theme Name:   Lenguamar
Theme URI:    https://lenguamar.eu
Author:       Lenguamar OÜ
Description:  Lenguamar OÜ oma teema WordPressile ja WooCommerce'ile. Ilma lehepaigutajata — päis, jalus ja kujundussüsteem on teemas, sisu plokkides.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lenguamar
Tags:         woocommerce, custom-menu, featured-images, translation-ready, block-patterns
*/

/* ==========================================================================
   FONDID
   Roboto on teemas kaasas (ainult ladina ja ladina-laiendatud, kaalud
   400/500/700). Varem hostis neid Elementor ja URL-id olid seotud päris
   domeeniga, mis tähendas et testkeskkonnas laadisid fondid vale saidilt.
   ========================================================================== */

/* Roboto on muutuvfont: sama fail katab kogu kaaluvahemiku 100–900.
   Elementor deklareeris iga kaalu eraldi, kõik osutades samale failile —
   nii oli teemas kuus faili, millest neli olid duplikaadid. Kaks
   deklaratsiooni (ladina ja ladina-laiendatud) teevad sama töö ära. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/roboto-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/roboto-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   KUJUNDUSMUUTUJAD
   Kogu palett ja rütm ühest kohast. theme.json annab samad väärtused
   blokiredaktorile, et redaktor näeks välja nagu sait.
   ========================================================================== */

:root {
	--lg-ink: #1e293b;
	--lg-ink-soft: rgba(30, 41, 59, 0.78);
	--lg-ink-muted: rgba(30, 41, 59, 0.62);
	--lg-ink-hover: #334155;
	--lg-gold: #f4b943;
	--lg-cream: #fef8ec;
	--lg-cream-accent: #faeccb;
	--lg-line: #f0e4cb;
	--lg-rule: rgba(30, 41, 59, 0.16);
	--lg-white: #fff;

	/* Kuld kolmes rollis: hover-toon, ikoonijoon, tekst kreemjal taustal. */
	--lg-gold-hover: #eaa92c;
	--lg-gold-icon: #b8860b;
	--lg-gold-text: #8a6d1f;
	/* Liivakarva väljataust ja peen sisejoon kaartide sees. */
	--lg-sand: #faf8f2;
	--lg-line-soft: #f0ebdd;
	/* Veakeel: tekst, pehme raam. */
	--lg-error: #a03636;
	--lg-error-soft: #cf8d80;
	/* Kuldne fookushalo ja modalikate. */
	--lg-focus-ring: rgba(244, 185, 67, 0.22);
	--lg-overlay: rgba(30, 41, 59, 0.45);

	/* 1140 → 1400 → 1280 (omanik 14.08.2026: „pane 1400px peale", siis „seda on
	   palju pane 1280px peale ja vaata et kogu sisu kõikjal läheb laiemaks").
	   Sisu jääb 1280 − 2×20 = 1240 px. */
	--lg-container: 1280px;
	--lg-gutter: 20px;
	/* Leivapuru ümbritsev vahe — ÜLEVAL JA ALL SAMA (omanik 14.08.2026:
	   „üleval peab olema vahe täpselt sama mis on bredcrumpi ja lehe nimetuse
	   vahel, kõikjal"). Leivapuru rida seisab nüüd võrdsete vahede vahel, mitte
	   ei ripu päise küljes ega kleepu pealkirja külge.

	   KOLM KASUTAJAT, ÜKS ARV: `.lg-tee` (tavalehed), `.lg-shop` (Woo mähis,
	   sest tooteleht kannab leivapuru otse seal) ja `.lg-breadcrumb` alavahe.
	   Kolm kohta kolme arvuga oleks kolm võimalust lahku minna. */
	--lg-tee-vahe: 8px;

	--lg-head-h: 64px;
	--lg-head-h-compact: 56px;

	--lg-radius: 8px;
	--lg-radius-card: 16px;

	--lg-dur: 0.15s;
	--lg-ease: ease;
}

/* ==========================================================================
   BAAS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* `scrollbar-gutter: stable` hoiab keriba koha alati kinni.
   Ilma selleta nihkub kogu keskjoondatud sisu — menüü kaasa — 7,5px võrra iga
   kord, kui liigud kerivalt lehelt mittekerivale. Omaniku teade 10.08.2026:
   „kui minna Ettevõttele ja Koolidele lehele, liigub menüü element"; sama
   ostukorvis.

   Mõõdetud 1280x1400 vaateaknas: Kursused (sisu 1847px) kerib, seega
   `clientWidth` on 1265 ja konteineri vasak serv 62,5. Koolidele, Ettevõtetele,
   Kontakt ja Ostukorv mahuvad ära, `clientWidth` on 1280 ja serv 70,0. Vahe on
   pool keriba laiusest, sest konteiner on keskel.

   Miks mitte `overflow-y: scroll`: see näitaks keriba ka siis, kui kerida ei
   ole midagi. `stable` jätab ainult koha ja on ülekattega keribade puhul
   (nt macOS-i „näita kerimisel") tühitöö, mitte kahju. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	/* JALUS AKNA PÕHJA, KUI SISU ON LÜHEM (13.08.2026). Jaluses oli juba
	   `margin-top: auto`, aga see ei teinud midagi: `auto` marginaal vajab
	   flex-vanemat ja `body` oli tavaline plokk ilma kõrguseta. Lühikesel
	   lehel — näiteks osalejate nimekiri ühe õppijaga — jäi jaluse alla
	   mõõdetult 236,3 px valget ala.

	   `100dvh` teine kord: mobiilibrauseri aadressiriba muudab `100vh`
	   tähendust ja leht hüppab kerimisel. Vanemad brauserid, kes `dvh`-d ei
	   tunne, jäävad esimese rea juurde. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--lg-white);
	color: var(--lg-ink);
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: 1.05rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--lg-ink);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -0.015em; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p, ul, ol, blockquote, figure, table { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.35em; }

a { color: var(--lg-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--lg-ink-hover); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--lg-ink);
	outline-offset: 3px;
	border-radius: 3px;
}

blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--lg-gold);
	color: var(--lg-ink-soft);
}

hr { height: 1px; border: 0; background: var(--lg-rule); margin: 2.5em 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--lg-rule); text-align: left; }
th { font-weight: 600; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
pre { padding: 16px; background: var(--lg-cream); border-radius: var(--lg-radius); overflow-x: auto; }

/* Ligipääsetavus ------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.lg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 18px;
	background: var(--lg-ink);
	color: #fff;
	border-radius: 0 0 var(--lg-radius) 0;
}
.lg-skip:focus { left: 0; color: #fff; }

/* Vaatleja kleepuva päise jaoks ---------------------------------------- */
.lg-sentinel {
	position: absolute;
	top: 0; left: 0;
	width: 1px; height: 24px;
	pointer-events: none;
	visibility: hidden;
}

/* ==========================================================================
   PAIGUTUS
   ========================================================================== */

.lg-container {
	width: 100%;
	max-width: var(--lg-container);
	margin-inline: auto;
	padding-inline: var(--lg-gutter);
}

/* `flex: 1` sööb kogu vaba ruumi ja lükkab jaluse alla. `min-width: 0` hoiab
   ära klassikalise flex-lõksu, kus lai laps (tabel, pikk URL) venitab
   konteinerit ja tekitab horisontaalse kerimise.

   ISE KA FLEX-VEERG: `.lg-main` venib, aga tema laps ei veninud kaasa, ja
   haldusvaate kleepuv salvriba peatub oma vanema (`.lg-halda`) lõpus — mitte
   jaluse serval, nagu ta peaks. Mõõdetud: riba jäi 236,3 px jaluse kohale
   rippuma. Ahel peab olema terve: body → main → lehe juurplokk.

   Kontrollitud: kõigil vaadetel on `.lg-main`-il täpselt ÜKS laps (lehe
   juurplokk), seega veerusuund ei muuda ühegi lehe paigutust. */
.lg-main { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; }
/* Juurplokk venib kaasa AINULT seal, kus lehe põhi peab olema kinni püütud —
   haldusvaates, kus salvriba on kleepuv. Mujal jääb ta sisu kõrguseks, et
   lühike leht ei venitaks oma tausta üle terve akna. */
.lg-main > .lg-halda { flex: 1 0 auto; }

.lg-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding-block: 56px 72px;
}
body:not(.lg-no-sidebar) .lg-layout { grid-template-columns: minmax(0, 1fr) 300px; }

/* ÜLAVAHE ON 28, MITTE 48 (omanik 13.08.2026: „päise vahel liiga palju
   ruumi"). Varem oli siin 48 ja see oli teadlik ühtlustus — vt selle faili
   kommentaari `.lg-page--sisu-h1 .lg-entry` juures, kus 44 toodi 48 peale,
   et Kontakti pealkiri teistega ühele joonele saaks.

   Ühtlustus jääb, arv muutub: 28 on projektis juba olemas
   (`.lg-amps-leht { padding-block: 28px 56px }`) ja ta valiti omaniku enda
   nõudel „sama suur vahe kui õpetaja vaates". Nüüd on kõik neli kohta —
   lehepäis, sisust tulev H1, poe jaotis ja poeleht — samal 28-l. */
.lg-page-head { padding-block: 28px 8px; }
.lg-page-title { margin-bottom: 0.3em; }
.lg-page-desc, .lg-lead { color: var(--lg-ink-soft); font-size: 1.15rem; }

/* --- Lehe pealkiri kannab H2 mõõtu --------------------------------------
   Omaniku otsus 10.08.2026: kõigi lehtede pealkirjad sama suureks ja samale
   kõrgusele nagu Kursused lehel.

   Kursused pealkiri („Hispaania keele kursused") ON `h2` poe paigutuses —
   selle lehe `h1` on `screen-reader-text` ehk peidetud. Ülejäänud lehtedel on
   pealkiri `h1`. Mõõdetud 1280px juures: `h1` annab 43,52px
   (`clamp(2rem, 3.4vw, 3rem)`), `h2` 30,72px
   (`clamp(1.75rem, 2.4vw, 2.25rem)`). Kogu erinevus, mida silm nägi, tuli
   ainult sellest.

   Kirjasuurusest üksi ei piisa: `h1`-l on oma `line-height: 1.1` ja
   `letter-spacing: -0.02em`, seega kordame ka need H2 omadega. Muidu jääks
   sama kirjasuuruse juures reakõrgus erinevaks ja pealkiri maanduks teisele
   kõrgusele.

   `h1` jääb `h1`-ks — muutub ainult mõõt, mitte struktuur. */
.lg-page-title,
.lg-page--sisu-h1 .lg-entry > h1 {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Sisu voog: plokid saavad laiuse theme.json'ist, siin ainult vertikaalne
   rütm ja täislaiuse käitumine. */
.lg-entry > * { margin-inline: auto; max-width: var(--lg-container); padding-inline: var(--lg-gutter); }
.lg-entry > .alignwide { max-width: 1400px; }
.lg-entry > .alignfull { max-width: none; padding-inline: 0; }
.lg-entry { padding-block: 0 72px; }
.lg-front .lg-entry { padding-block: 0; }
/* Sisust tulev H1 tähendab, et `lg-page-head` jääb vahele — koos sellega kaob
   ka tema 48px ülapolster ja pealkiri jääb päise külge kinni. Anname selle
   siin tagasi. Esilehte see ei puuduta (vt page.php).

   48px, mitte 44px: `lg-page-head` annab 48 ja poe jaotis (`lg-pood__osa`) ka
   48. 44 oli ainus koht, mis reast välja jäi, ja just seetõttu istus Kontakti
   pealkiri 4px kõrgemal kui teised.

   SEE REEGEL KEHTIB AINULT SIIS, KUI LEIVAPURU EI OLE. Ta sündis enne
   leivapuru ja andis tagasi vahe, mille vahelejääv `.lg-page-head` kaasa
   võttis. Nüüd annab `.lg-tee` sama vahe juba ise ja kaks liitusid — Kontakti
   pealkiri seisis mõõdetult 87,77 px päise all seal, kus naabritel on 59,77.
   Nulli tagasi võtab `.lg-tee + .lg-entry` selles failis allpool. */
.lg-page--sisu-h1 .lg-entry { padding-top: 28px; }

/* ==========================================================================
   PÄIS
   ========================================================================== */

.lg-header {
	position: sticky;
	top: 0;
	z-index: 99;
	background: var(--lg-white);
	/* Ilma äärejooneta: lehe ülaosas sulab päis valge sisuga kokku ja
	   eristub alles kerimisel. See on teadlik valik. */
	transition: box-shadow 0.25s var(--lg-ease);
}
body.admin-bar .lg-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .lg-header { top: 46px; }
}

/* JOON, MITTE VARI (omanik 14.08.2026: „mulle ei meeldi sticky menüü shadow
   enam, peaks selle eemaldama ja asemele lisama alla vaevu märgatava kuldse
   heleda joone").

   Siin seisis kolmekihiline vari (2/10/24 px hajuvus), mis heitis sisu peale
   kuni 48 px tumedat udu — kerival lehel liikus see udu koos sisuga ja tegi
   päisest kihi, mis lehe kohal hõljub. Joon ütleb sama asja ühe piksliga:
   „päis lõpeb siit".

   VÄRV ON `--lg-line` (#f0e4cb), mitte uus toon. See on projekti oma hele
   kuldne joonevärv — sama, mis kaartide, tabelite ja ostukasti äärtel. Uus
   kuldne siin tähendaks, et päise joon ja kõik teised jooned on peaaegu
   ühesugused, ja „peaaegu" on halvem kui „sama".

   `box-shadow`, MITTE `border-bottom`: ääris lisaks päisele piksli kõrgust ja
   nihutaks kogu lehe sisu ühe piksli võrra kerimise hetkel. Vari jääb voogu
   välja ja pärib olemasoleva ülemineku. */
.lg-scrolled .lg-header {
	box-shadow: 0 1px 0 var(--lg-line);
}

/* Bränd vasakul, menüü ja ostukorv paremas servas. Vahe võtab brändi
   automaatne parem-marginaal, mis lükkab kõik järgnevad paremale — see
   töötab ka mobiilis, kus menüü on peidetud ja järele jääb ainult
   ostukorv+burger. space-between oleks menüü keskele surunud. */
.lg-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--lg-head-h);
	transition: min-height 0.18s var(--lg-ease);
}
.lg-scrolled .lg-header__inner { min-height: var(--lg-head-h-compact); }

/* Logo ------------------------------------------------------------------
   Stiiliraamat (Lenguamar stiiliraamat, august 2026) määrab lukustuse
   proportsioonid, mitte absoluutmõõdud. Kolm suhet, mida siin hoitakse:

     märgi kõrgus = 1,87 × nime kirjakõrgus
     märgi laius  = kõrgus × 96/88 (märgi enda vaateava)
     vahe märgi ja teksti vahel = ¼ märgi laiusest

   Kõik kolm tulevad ühest muutujast --lg-brand-nimi, seega mobiili jaoks
   piisab ainult selle muutmisest ja suhted tulevad kaasa.

   Nime suurus on valitud kokkutõmbunud päise järgi (--lg-head-h-compact,
   56px): märk 44px jätab üleval-all 6px õhku. Logo ise EI kahane kerimisel
   — omaniku nõue 09.08.2026 on, et logo oleks kõikjal ühesugune. */
.lg-brand {
	/* Mõõdud on TÄISARVUD pikslites, mitte calc()-i tulem. Suhted on samad,
	   mis stiiliraamat nõuab (märk 1,87 × nime kirjakõrgus, laius 12:11,
	   vahe ¼ märgi laiusest) — aga calc andis 43,98 × 47,98px ja murdarvuline
	   SVG langeb 1x ekraanil pikslite vahele: teekonnad muutuvad uduseks.
	   Omanik nägi seda väiksema resolutsiooniga ekraanil 10.08.2026.

	   44px on ainus mõistlik kõrgus, mis jagub 11-ga (viewBox on 96×88) ja
	   annab seega ka täisarvulise laiuse 48px. Nimi 1.471rem = 23,53px hoiab
	   suhte 1,870 täpselt paigas. */
	--lg-brand-nimi: 1.471rem;
	--lg-brand-mark: 44px;
	--lg-brand-mark-w: 48px;
	--lg-brand-vahe: 12px;

	/* Sama sinine, mis menüükirjadel kõrval (.lg-nav__list a) — omaniku
	   soovil 09.08.2026, et päise vasak ja parem pool oleksid ühte tooni.
	   Täis --lg-ink jäi menüü kõrval liiga tumedaks ja logo hüppas välja.
	   Märk pärib selle muutuja, seega toon on ühes kohas. */
	--lg-brand-sinine: rgba(30, 41, 59, 0.85);

	display: inline-flex;
	align-items: center;
	gap: var(--lg-brand-vahe);
	line-height: 1.1;
	color: var(--lg-brand-sinine);
	text-decoration: none;
}

/* Märk: avatud raamat. Vasak kaas tume, parem kuldne — nimi tuleb sõnadest
   lengua ja mar, seepärast on kaks poolt eri värvi.

   Kõrgus juhib laiust ja `aspect-ratio` hoiab vaateava suhte — stiiliraamat
   keelab venitamise. Suhe on kirjas siin, mitte jäetud `width: auto` hooleks:
   Safari arvutab SVG-le, millel puuduvad width/height atribuudid, laiuse
   viewBox'ist ebajärjekindlalt ja märk kukuks nulli. */
.lg-brand__mark {
	display: block;
	flex: none;
	height: var(--lg-brand-mark);
	/* Laius on määratud, mitte `auto` + aspect-ratio: viimane annaks
	   ümardamisel 47,9998px ja teravus kaoks. Suhe 48:44 = 12:11 on
	   viewBox'iga täpselt sama, seega kuju ei venita. */
	width: var(--lg-brand-mark-w);
	aspect-ratio: 96 / 88;
}
.lg-mark__leht--vasak { fill: var(--lg-brand-sinine); }
.lg-mark__leht--parem { fill: var(--lg-gold); }

.lg-brand__tekst { display: block; }
.lg-brand__nimi {
	display: block;
	font-size: var(--lg-brand-nimi);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.9;
}
/* Lõpusilp „mar" kuldselt, sama kollane mis märgi parem kaas. */
.lg-brand__mar { color: var(--lg-gold); }

/* Alarida on hall ja hõredate tähtedega — täpsustab nime, ei võistle
   sellega. Versaali teeb CSS, mitte tekst: ekraanilugeja loeb
   „Keelestuudio", silm näeb KEELESTUUDIO.

   Toon on stiiliraamatu hall (#4A4644), mitte kuldne: kaks kuldset elementi
   kõrvuti — silp „mar" ja terve alarida — võtaksid teineteiselt rõhu ära,
   ja hele kollane hõreda kirjaga hajuks valgel taustal laiali. */
.lg-brand__alarida {
	display: block;
	margin-top: 4px;
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #4a4644;
}
.lg-brand:hover { color: var(--lg-brand-sinine); opacity: 0.82; }

/* Tumedal taustal läheb vasak kaas valgeks, parem jääb kuldseks. */
.lg-brand--tume { color: #fff; }
.lg-brand--tume .lg-mark__leht--vasak { fill: #fff; }
.lg-brand--tume .lg-brand__alarida { color: rgba(255, 255, 255, 0.66); }

/* Flex-lapseks on mähis, mitte link ise — auto-marginaal peab olema siin.

   Mähis on ise ka flex: logo on inline-flex ja seisis muidu reakastis, kus
   allapoole jäi allapikkude jaoks tühi riba. See lükkas logo optiliselt
   päise ülaserva. Flex-konteinerina reakasti ei teki ja align-items
   tsentreerib logo päise kõrgusesse täpselt. */
.lg-header__brand {
	display: flex;
	align-items: center;
	margin-right: auto;
}
.custom-logo-link img { max-height: 44px; width: auto; }

/* Menüü --------------------------------------------------------------- */
.lg-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lg-nav__list li { margin: 0; }
.lg-nav__list a {
	display: inline-block;
	padding: 4px 18px 2px;
	color: rgba(30, 41, 59, 0.85);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--lg-dur) var(--lg-ease);
}
.lg-nav__list a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 2px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--lg-dur) var(--lg-ease);
}
.lg-nav__list li:hover > a,
.lg-nav__list a:focus-visible { color: var(--lg-ink); }
.lg-nav__list li:hover > a::after { opacity: 0.45; }

/* Aktiivne kirje peab olema kõige loetavam, mitte kõige vähem.
   current-menu-parent ja current_page_parent on WooCommerce'i tootelehe
   jaoks hädavajalikud — seal ei ole current-menu-item't. */
.lg-nav__list .current-menu-item > a,
.lg-nav__list .current_page_item > a,
.lg-nav__list .current-menu-parent > a,
.lg-nav__list .current_page_parent > a,
.lg-nav__list .current-menu-ancestor > a {
	color: var(--lg-ink);
}
.lg-nav__list .current-menu-item > a::after,
.lg-nav__list .current_page_item > a::after,
.lg-nav__list .current-menu-parent > a::after,
.lg-nav__list .current_page_parent > a::after,
.lg-nav__list .current-menu-ancestor > a::after { opacity: 1; }

/* Alammenüü ------------------------------------------------------------ */
.lg-nav__list li { position: relative; }
.lg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	box-shadow: 0 12px 28px -10px rgba(30, 41, 59, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease), visibility var(--lg-dur);
}
.lg-nav__list li:hover > .sub-menu,
.lg-nav__list li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
}
.lg-nav__list .sub-menu a { display: block; padding: 8px 16px; }
.lg-nav__list .sub-menu a::after { display: none; }

/* Ostukorv ------------------------------------------------------------- */
.lg-header__actions { display: flex; align-items: center; gap: 8px; }

/* Peamine tegevus on kerides alati käeulatuses. Kitsal ekraanil kaob,
   et bränd, korv ja burger ära mahuksid. */
.lg-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	color: var(--lg-ink);
	border-radius: 50%;
	text-decoration: none;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
.lg-cart:hover { background: rgba(30, 41, 59, 0.08); color: var(--lg-ink); }
.lg-cart__icon { width: 23px; height: 23px; }
.lg-cart__count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 18px;
	padding: 0 4px;
	background: var(--lg-ink);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	border-radius: 999px;
}

/* Kasutajaala ----------------------------------------------------------
   Külalisele raamiga nupp, mitte kuldne täisnupp (omaniku valik
   09.08.2026): sisselogimine ei ole selle lehe peamine tegu — ostmine on —
   ja kuldne nupp päises võistleks sisu „Osta" nuppudega. */
.lg-logi {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lg-ink);
	border: 1px solid var(--lg-rule);
	border-radius: var(--lg-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
.lg-logi:hover { background: var(--lg-sand); color: var(--lg-ink); }
.lg-logi__ikoon { width: 15px; height: 15px; flex: none; }

.lg-kasutaja { position: relative; }
.lg-kasutaja__nupp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 5px 5px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--lg-ink);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
.lg-kasutaja__nupp:hover,
.lg-kasutaja__nupp[aria-expanded="true"] {
	background: var(--lg-sand);
	border-color: var(--lg-line);
	color: var(--lg-ink);
}
/* Avatar on initsiaalidega, mitte pildiga: profiilipilte me ei kogu ja
   Gravatar tähendaks päringut võõrale serverile iga lehelaadimise juures. */
.lg-kasutaja__avatar {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	background: var(--lg-cream);
	border: 1.5px solid var(--lg-gold);
	border-radius: 50%;
	color: var(--lg-gold-text);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
/* Nimi on serveris juba esimeseks sõnaks lühendatud, aga üks sõna võib ka
   pikk olla — päis ei tohi selle pärast venida. */
.lg-kasutaja__nimi {
	font-size: 0.9rem;
	font-weight: 600;
	max-width: 10ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lg-kasutaja__nool {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--lg-ink-muted);
	transition: transform var(--lg-dur) var(--lg-ease);
}
.lg-kasutaja__nupp[aria-expanded="true"] .lg-kasutaja__nool { transform: rotate(180deg); }

.lg-kasutaja__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 238px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px -10px rgba(30, 41, 59, 0.24);
}
.lg-kasutaja__menu[hidden] { display: none; }
.lg-kasutaja__pea {
	padding: 10px 12px 11px;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--lg-line-soft);
}
.lg-kasutaja__pea-nimi { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.lg-kasutaja__pea-meil {
	display: block;
	margin-top: 2px;
	font-size: 0.79rem;
	color: var(--lg-ink-muted);
	word-break: break-all;
}
.lg-kasutaja__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	font-size: 0.9rem;
	color: var(--lg-ink);
	text-decoration: none;
	border-radius: 7px;
}
.lg-kasutaja__link:hover { background: var(--lg-sand); color: var(--lg-ink); }
.lg-kasutaja__ikoon { width: 16px; height: 16px; flex: none; color: var(--lg-gold-icon); }
.lg-kasutaja__joon { display: block; height: 1px; margin: 5px 8px; background: var(--lg-line-soft); }
.lg-kasutaja__link--vaikne { color: var(--lg-ink-muted); }
.lg-kasutaja__link--vaikne .lg-kasutaja__ikoon { color: var(--lg-ink-muted); }
.lg-kasutaja__link--vaikne:hover { color: var(--lg-ink); }

/* Sahtli kasutajaplokk: sama kirjete loend, teine kuju. */
.lg-drawer__kasutaja {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lg-line);
}
.lg-drawer__pea { display: flex; align-items: center; gap: 10px; padding: 4px 12px 12px; }
.lg-drawer__pea-tekst { min-width: 0; }
.lg-drawer__link,
.lg-drawer__logi {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	font-size: 1rem;
	color: var(--lg-ink);
	text-decoration: none;
	border-radius: 7px;
}
.lg-drawer__link:hover,
.lg-drawer__logi:hover { background: var(--lg-sand); color: var(--lg-ink); }
.lg-drawer__logi { font-weight: 700; color: var(--lg-gold-text); }
.lg-drawer__logi .lg-kasutaja__ikoon { color: var(--lg-gold-text); }

/* Hamburger ------------------------------------------------------------ */
.lg-burger {
	display: none;
	width: 42px; height: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.lg-burger__bar {
	display: block;
	width: 22px; height: 2px;
	margin: 4px auto;
	background: var(--lg-ink);
	transition: transform 0.2s var(--lg-ease), opacity 0.2s var(--lg-ease);
}
.lg-drawer-open .lg-burger__bar:first-child { transform: translateY(3px) rotate(45deg); }
.lg-drawer-open .lg-burger__bar:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Mobiilimenüü sahtel -------------------------------------------------- */
.lg-drawer {
	position: fixed;
	inset: var(--lg-head-h) 0 0;
	z-index: 98;
	background: rgba(30, 41, 59, 0.35);
	opacity: 0;
	transition: opacity 0.2s var(--lg-ease);
}
.lg-drawer-open .lg-drawer { opacity: 1; }
.lg-drawer__nav {
	/* Sahtel avaneb päise alt, seega järgib päise värvi. */
	background: var(--lg-white);
	box-shadow: 0 14px 28px -12px rgba(30, 41, 59, 0.3);
	padding: 12px var(--lg-gutter) 24px;
	transform: translateY(-8px);
	transition: transform 0.2s var(--lg-ease);
}
.lg-drawer-open .lg-drawer__nav { transform: none; }
.lg-drawer__list { margin: 0; padding: 0; list-style: none; }
.lg-drawer__list li { margin: 0; border-bottom: 1px solid rgba(30, 41, 59, 0.12); }
.lg-drawer__list li:last-child { border-bottom: 0; }
.lg-drawer__list a {
	display: block;
	padding: 14px 2px;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--lg-ink);
	text-decoration: none;
}
.lg-drawer__list .sub-menu { margin: 0 0 8px 14px; padding: 0; list-style: none; }
.lg-drawer-open { overflow: hidden; }

@media (max-width: 1024px) {
	.lg-nav { display: none; }
	.lg-burger { display: block; }

	/* Kasutajakirjed elavad kitsal ekraanil sahtlis, seega päise rippmenüü
	   ja sisselogimisnupp lähevad peitu. Avatar jääb: ta ütleb ühe pilguga,
	   kas oled sisse logitud, ja seda sahtel ei asenda. */
	.lg-logi,
	.lg-kasutaja__nimi,
	.lg-kasutaja__nool,
	.lg-kasutaja__menu { display: none; }
	.lg-kasutaja__nupp { padding: 5px; }
}
@media (min-width: 1025px) {
	.lg-drawer { display: none; }
	/* Töölaual on kasutajakirjed rippmenüüs — sahtli plokk oleks duplikaat. */
	.lg-drawer__kasutaja { display: none; }
}

/* ==========================================================================
   NUPUD
   ========================================================================== */

.lg-btn,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--lg-radius);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease), opacity var(--lg-dur) var(--lg-ease);
}
.lg-btn:hover, .wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-1px); }

.lg-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--lg-ink);
	color: #fff;
}
.lg-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--lg-ink-hover); color: #fff; }

/* Kuldne esmane nupp: hero avategevus. Päis on valge, seega kollane
   aktsent vajab lehel oma kohta. Tume tekst kuldsel annab kontrasti 8,3:1.
   Spetsiifika 0,4,0 võidab vaikimisi tumeda nupu reeglit (0,3,0).
   Teenusekaartide ja vihikuriiuli read läksid koos vana avalehega
   (15.08.2026) — uued plokid kasutavad .lg-btn--kuld klassi. */
.lg-hero__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--lg-gold);
	color: var(--lg-ink);
}
.lg-hero__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--lg-gold-hover);
	color: var(--lg-ink);
}

/* WP core annab outline-stiilile oma padding'u (0.667em) ja 2px ääris,
   :where()-reegliga mille spetsiifika on 0,1,0 — sama mis meie baasreegel,
   aga laetud hiljem. Seetõttu tuleb mõlemad siin uuesti öelda, muidu on
   outline-nupp täidetud nupust 5,7px madalam. */
.lg-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lg-ink);
	padding: 14px 26px;
	border-width: 1.5px;
	border-style: solid;
	border-color: rgba(30, 41, 59, 0.28);
}
.lg-btn--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(30, 41, 59, 0.06);
	border-color: rgba(30, 41, 59, 0.5);
	color: var(--lg-ink);
}

/* Kuldne modifikaator teema enda markupile (poekaardid jm) — sama toon,
   mis ülal plokinuppude kuldsel erandil. */
.lg-btn--kuld { background: var(--lg-gold); color: var(--lg-ink); }
.lg-btn--kuld:hover { background: var(--lg-gold-hover); color: var(--lg-ink); }

/* ==========================================================================
   VORMID
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	max-width: 100%;
	padding: 11px 14px;
	background: var(--lg-white);
	border: 1px solid rgba(30, 41, 59, 0.2);
	border-radius: var(--lg-radius);
	font: inherit;
	color: var(--lg-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--lg-ink); outline: none; }
label { display: inline-block; margin-bottom: 4px; font-size: 0.92rem; color: var(--lg-ink-soft); }

.lg-search { display: flex; gap: 8px; align-items: stretch; }
.lg-search__field { flex: 1 1 auto; }
.lg-search__submit { flex: 0 0 auto; }

/* ==========================================================================
   POSTITUSED JA ARHIIVID
   ========================================================================== */

.lg-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }

.lg-card {
	display: flex;
	flex-direction: column;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	overflow: hidden;
}
.lg-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lg-card__body { padding: 20px 22px 24px; }
.lg-card__title { font-size: 1.2rem; margin-bottom: 0.35em; }
.lg-card__title a { text-decoration: none; }
.lg-card__title a:hover { text-decoration: underline; }
.lg-card__excerpt { color: var(--lg-ink-soft); font-size: 0.97rem; }
.lg-card__excerpt p:last-child { margin-bottom: 0; }

.lg-meta { margin: 0 0 0.6em; font-size: 0.85rem; color: var(--lg-ink-muted); }

.lg-single__media { padding-block: 8px 24px; }
.lg-single__media img { width: 100%; border-radius: var(--lg-radius-card); }

.lg-empty { color: var(--lg-ink-soft); }

/* Lehekülgede navigatsioon --------------------------------------------- */
.wp-block-query-pagination, .navigation.pagination { margin-top: 40px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	text-decoration: none;
}
.navigation.pagination .page-numbers.current { background: var(--lg-ink); color: #fff; border-color: var(--lg-ink); }

.post-navigation { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--lg-rule); }
.post-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.lg-navlabel { display: block; font-size: 0.8rem; color: var(--lg-ink-muted); }

/* Külgriba ------------------------------------------------------------- */
.lg-sidebar .widget { margin-bottom: 32px; }
.lg-sidebar .widget-title { font-size: 1.05rem; margin-bottom: 0.6em; }
.lg-sidebar ul { list-style: none; padding: 0; }

/* Kommentaarid --------------------------------------------------------- */
.lg-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--lg-rule); }
.lg-comments__list { list-style: none; padding: 0; }
.lg-comments__list ol { list-style: none; padding-left: 24px; }
.lg-comments .comment-body { padding: 16px 0; border-bottom: 1px solid var(--lg-rule); }

/* ==========================================================================
   JALUS
   ========================================================================== */

.lg-footer {
	display: flex;
	flex-direction: column;
	/* Sama taust ka konteineril: kõrvutiste plokkide vahele jääb mõnel
	   suumitasemel alampiksli õmblus, mille alt paistaks lehe taust. */
	background: var(--lg-gold);
	color: var(--lg-ink);
	margin-top: auto;
}

.lg-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr;
	gap: 24px 48px;
	align-items: start;
	padding-block: 56px 40px;
}

.lg-footer a { color: var(--lg-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.lg-footer a:hover, .lg-footer a:focus-visible { border-bottom-color: var(--lg-ink); }

.lg-footer .widget { margin: 0; }
.lg-footer .widget-title,
.lg-footer .lg-foot__title {
	margin: 0 0 18px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lg-ink-soft);
	line-height: 1.3;
}
.lg-footer .menu,
.lg-footer .lg-foot__list { list-style: none; margin: 0; padding: 0; }
.lg-footer .menu li,
.lg-footer .lg-foot__list li { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.5; }
.lg-footer .menu li:last-child,
.lg-footer .lg-foot__list li:last-child { margin-bottom: 0; }

.lg-foot__brand { margin: 0 0 10px; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.lg-foot__text { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.65; }
.lg-foot__label { display: block; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--lg-ink-soft); margin-bottom: 2px; }
.lg-foot__company {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--lg-rule);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--lg-ink-soft);
}

.lg-foot__social { display: flex; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.lg-foot__social li { margin: 0; }
.lg-foot__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: rgba(30, 41, 59, 0.09);
	border-radius: 50%;
	border-bottom: 0;
	transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease);
}
.lg-foot__social a:hover { background: var(--lg-ink); border-bottom: 0; transform: translateY(-2px); }
.lg-foot__social svg { width: 19px; height: 19px; fill: var(--lg-ink); }
.lg-foot__social a:hover svg { fill: var(--lg-gold); }

.lg-foot__ctawrap { margin: 18px 0 0; }
/* Spetsiifilisus peab ületama .lg-footer a reeglit (0,2,0), muidu jääb
   nupu tekst tumedaks tumedal taustal ehk nähtamatuks. */
.lg-footer .lg-foot__cta {
	display: inline-block;
	padding: 11px 22px;
	background: var(--lg-ink);
	color: #fff;
	border-radius: var(--lg-radius);
	border-bottom: 0;
	font-size: 0.92rem;
	font-weight: 600;
}
.lg-footer .lg-foot__cta:hover { opacity: 0.88; border-bottom: 0; color: #fff; }

/* Alumine riba --------------------------------------------------------- */
/* ==========================================================================
   KOMPAKTNE JALUS — õpetaja töölehed
   Kavand: kavandid/kompaktne-jalus-prototuup.html (omanik 13.08.2026)

   MÕÕDETUD ENNE: suur jalus 375,16 px lauaarvutis ja 954,20 mobiilis — 36,9%
   ja 43,7% kogu lehest. Õpiampsude nimekirjal oli ta lehe kõige kõrgem üksik
   plokk. Kompaktne on 51,64 ja 84,08.

   MIKS VAIKNE, MITTE LIHTSALT VÄIKSEM KOLLANE. Kollane on saidi kutse värv.
   Salvriba on nüüd lehe põrand ja tema kohal seisab kollane „Salvesta"; kollane
   jalus vahetult tema all tähendaks kaht kutset kõrvuti, millest ainult üks on
   tegu. Vaikne jalus laseb ribal olla ainus asi, mis lehe allservas hüüab.
   ========================================================================== */
.lg-footer--kompaktne {
	background: var(--lg-sand);
	border-top: 1px solid var(--lg-line);
	color: var(--lg-ink-muted);
}
/* LAIAL EKRAANIL SEDA JALUST EI OLE: tema sisu (copyright ja juriidilised
   lingid) istub tööriba vasakus tsoonis, mis on alati akna servas
   (`koolitused/assets/css/haldus.css`, `.lg-toriba__juur`). Kaks korda sama
   asja ühel lehel oleks müra.

   PEIDAB CSS, MITTE SERVER. Server ei tea ekraani laiust; ta renderdab jaluse
   alati ja CSS otsustab, kummal pool 860 px piiri ta nähtav on. Sama
   murdepunkt on ribas, kus juriidika tsoon kaob — nii ei saa tekkida laiust,
   kus lingid on korraga mõlemas või kummaski mitte. */
@media (min-width: 861px) {
	/* `:has()`, MITTE PALJAS PEITMINE. Tööriba on ainult vormilehtedel —
	   seaded, ampsu vorm, osalejad; koondvaatel ja ampsude nimekirjal teda ei
	   ole. Tingimusteta peitmine jättis need lehed laial ekraanil ilma igasuguse
	   jaluseta: riba ei olnud ja jalus oli peidetud.

	   Kui brauser `:has()`-i ei tunne (Chrome <105, Safari <15.4), jääb jalus
	   nähtavaks ja tööribaga lehel on juriidika kaks korda. Dubleeriv info on
	   ohutum kui puuduv. */
	body:has( .lg-toriba ) .lg-footer--kompaktne { display: none; }
}
/* Sisu joondub LEHEGA, mitte ei ole lihtsalt keskel: `.lg-container` annab
   sama veeru, kus seisavad nimekirja päis (vasak serv 162,5) ja rea
   tegevusnupp (parem serv 1262,5). Vana jaluse sisu oli keskjoondatud ja ei
   langenud kokku millegagi. */
.lg-footer__kompakt {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px 24px; flex-wrap: wrap;
	padding-block: 14px;
	font-size: 0.82rem;
}
.lg-footer__kompakt .lg-copy { margin: 0; }
/* `list-style: none` ja nullitud polster: menüü tuleb `items_wrap` kaudu ilma
   `<ul>`-ita, aga `<li>`-d kannavad brauseri vaikestiili. */
.lg-footer__lingid { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
/* `margin: 0` on kohustuslik: teema menüüloendid annavad teisele ja
   järgnevatele `li`-dele ülemise marginaali (mõõdetud 4,59 px), mis
   ühereas ei eralda midagi, vaid kasvatab kogu jaluse kõrgust. */
.lg-footer__lingid li { list-style: none; margin: 0; }
/* `inline-block` + päritud reakõrgus: inline-lingi kastikõrgus tuleb muidu
   kirjatüübi meetrikast, mitte reakõrgusest, ja lingid olid mõõdetult 26,23 px
   kõrged, kui copyright kõrval oli 22,44. Vahe kandus jaluse kõrgusesse. */
.lg-footer__lingid a { display: inline-block; line-height: inherit; }
/* Teema annab jaluse linkidele tumeda tindi — kompaktses jaluses on nad
   kõrvalinfo, mitte sisu. */
.lg-footer--kompaktne a { color: var(--lg-ink-muted); }
.lg-footer--kompaktne a:hover,
.lg-footer--kompaktne a:focus-visible { color: var(--lg-ink); border-bottom-color: var(--lg-ink); }

@media (max-width: 620px) {
	/* Kitsal ekraanil kaks rida, mõlemad vasakule: keskele koondatuna loeksid
	   copyright ja lingid ühe seguse plokina. */
	.lg-footer__kompakt { justify-content: flex-start; }
	.lg-footer__lingid { gap: 14px; }
}

.lg-footer__bottom { border-top: 1px solid var(--lg-rule); padding-block: 20px; }
.lg-footer__bottom-inner {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px 14px;
	flex-wrap: wrap;
}
/* Eraldajad seovad autoriõiguse ja lingid üheks reaks. Ilma nendeta
   luges see kolme eraldi tükina.
   .lg-legal-nav peab olema flex: plokk-elemendina tekitaks ::before
   eraldaja omaenda rea ja lükkaks lingiloendi selle alla. */
.lg-legal-nav {
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.lg-footer__bottom-inner > * + *::before,
.lg-legal-nav__list li + li::before {
	content: "·";
	color: var(--lg-ink-muted);
}
/* Loendi eraldaja istub li sees selle alguses, seega vahe ul-i gap'ist
   tekib ainult punkti ette — järele tuleb see eraldi anda. */
.lg-legal-nav__list li + li::before { margin-right: 14px; }
.lg-copy { margin: 0; font-size: 0.85rem; color: var(--lg-ink-soft); }
.lg-legal-nav__list {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	margin: 0; padding: 0; list-style: none;
}
.lg-legal-nav__list li { margin: 0; }
.lg-legal-nav__list a { font-size: 0.85rem; color: var(--lg-ink-soft); }
.lg-legal-nav__list a:hover { color: var(--lg-ink); border-bottom-color: var(--lg-ink); }

/* Ühele reale mahub see riba kuni ~525 px vaateni. Kitsamal ekraanil murduks
   see ise, aga siis jääks lingirea algusesse rippuv eraldaja. Seepärast
   läheb riba allpool teadlikult kahele reale ja eraldaja kaob. */
@media (max-width: 560px) {
	.lg-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.lg-footer__bottom-inner > * + *::before { content: none; }
}

/* ==========================================================================
   POE AVAVAADE

   Kureeritud vaade (inc/pood.php): kursused valgel, materjalid kreemjal
   ribal — sama vahelduv rütm mis avalehel. Sektsioonid on täislaiuses,
   konteiner elab sees, seega 100vw-trikke pole vaja.
   ========================================================================== */

.lg-pood__osa { padding-block: 28px 56px; scroll-margin-top: var(--lg-head-h); }
.lg-pood__osa--materjalid { background: var(--lg-cream); padding-block: 52px 76px; }
.lg-pood__sisu { max-width: var(--lg-container); margin-inline: auto; padding-inline: var(--lg-gutter); }
/* Poe sektsiooni pealkiri on kas h1 (esimene) või h2 — kuju on ühine, sest
   silt sõltub sellest, mitmes sektsioon on, mitte sellest, kui suur pealkiri
   peaks olema. */
.lg-pood__osa h1, .lg-pood__osa h2 { margin: 0 0 4px; }
.lg-pood__kirjeldus { margin: 0 0 24px; color: var(--lg-ink-muted); }

/* --- Kursusekaardid ----------------------------------------------------- */
.lg-pood__kursused {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
/* Baastüpograafia "li + li" vahe nihutaks ruudustikukaarte — vahed annab gap. */
.lg-pood__kursused > li + li, .lg-pood__tooted > li + li, .lg-pood__info > li + li,
.t-kaas__read > li + li, .t-fakt > li + li, .t-spec__loend > li + li { margin-top: 0; }
.lg-pood__kursus {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 22px 24px 24px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
/* Esiletõstetud kursus ("Uutele õpilastele") — sama keel mis materjalide
   "Parim valik" kaardil. Paksem raam kompenseeritakse paddingust. */
.lg-pood__kursus--esile { border: 2px solid var(--lg-gold); padding: 21px 23px 23px; }

/* Jätkukursuse sihtrühma rea ikoon on terassinine (tagasiside
   meesavataride toon) — eristub kuldsetest ajaridadest vaikselt. */
.lg-pood__info svg.lg-ikoon-sinine { color: #49719a; }
.lg-pood__tase {
	display: inline-block; padding: 3px 13px;
	background: var(--lg-gold); color: var(--lg-ink);
	border-radius: 999px; font-size: 0.82rem; font-weight: 600;
}
.lg-pood__kursus h3 { margin: 0 0 12px; font-size: 1.22rem; }
/* Tasemesilt elab pealkirja JÄREL samal real (omaniku otsus 09.08.2026):
   nimi on peamine, tase täpsustus. Eraldi rida raiskaks ruumi. */
.lg-pood__kursus h3 .lg-pood__tase { margin-left: 9px; vertical-align: 0.15em; }
.lg-pood__kursus h3 a, .lg-pood__rida h3 a, .lg-pood__toode h3 a { color: inherit; text-decoration: none; }
.lg-pood__info {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 6px;
	color: var(--lg-ink-soft); font-size: 0.95rem;
}
/* Võtmefaktid (kuupäev, kellaaeg) tõusevad pehmest reast esile. */
.lg-pood__info strong { color: var(--lg-ink); font-weight: 600; }
.lg-pood__info svg { vertical-align: -3px; margin-right: 9px; color: var(--lg-gold); }
/* Ligipääsu rida („Ligipääs olemas · ostsid 10.08.2026") on kaardi tähtsaim
   rida — tema tõttu ei ole see kaart enam müügipakkumine, vaid õppija oma
   kursus. Ilma selle reeglita nägi ta välja täpselt nagu ajarida (testija leid
   10.08.2026). Ikoon jääb kuldseks, nagu teistel ridadel. */
.lg-pood__info--ligipaas { color: var(--lg-ink); font-weight: 600; }
.lg-pood__jalus {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	width: 100%; margin-top: auto; padding-top: 16px;
}
.lg-pood__hind { font-size: 1.12rem; font-weight: 600; }
.lg-pood__hind del { margin-right: 6px; color: var(--lg-ink-muted); font-size: 0.92rem; font-weight: 400; }
.lg-pood__hind ins { text-decoration: none; }
.lg-pood__jalus .lg-btn, .lg-pood__rida .lg-btn { padding: 10px 18px; font-size: 0.9rem; }
/* Kui hind on kadunud (kursus juba täies mahus olemas), jääb jalusesse ainult
   nupp. `space-between` jätaks ta vasakusse serva — nupp peab jääma sinna, kus
   ta kõigil teistel kaartidel on. */
.lg-pood__jalus--nupp { justify-content: flex-end; }

/* --- Reakaart (omas tempos kursus) -------------------------------------- */
.lg-pood__rida {
	display: flex; align-items: center; gap: 16px;
	margin-top: 20px; padding: 16px 20px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
.lg-pood__rida > svg { flex: none; color: var(--lg-gold); }
.lg-pood__rida h3 { margin: 0 0 2px; font-size: 1.05rem; }
.lg-pood__rida p { margin: 0; color: var(--lg-ink-muted); font-size: 0.95rem; }
.lg-pood__rida .lg-btn { margin-left: auto; white-space: nowrap; }

/* --- Materjalikaardid ---------------------------------------------------- */
/* `auto-fit`, MITTE `auto-fill` (omanik 14.08.2026: „kuna leht läks laiemaks,
   tuleks ümber mõelda"). `auto-fill` täidab rea veergudega ka siis, kui sisu ei
   ole: konteineri kasvades 1100 → 1240 px mahtus varasema nelja veeru asemel
   VIIS, viies jäi tühjaks ja kaardid läksid 260-lt 232 px peale — laiem leht
   tegi kaardid väiksemaks. `auto-fit` jagab rea nende vahel, keda tõesti on.

   260, mitte 230: neli toodet 1240 px sisus annavad 292 px kaardi, mis on
   A4-kaanele parajad 417 px kõrgust. Omanik 14.08.2026: „jah, 4 reas on õige." */
.lg-pood__tooted {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
}
.lg-pood__toode {
	position: relative;
	display: flex; flex-direction: column;
	padding: 16px 16px 18px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	text-align: center;
}
/* Kuldne raam on 1px paksem — kompenseerime paddingust, et kaardid ei nihkuks. */
.lg-pood__toode--esile { border: 2px solid var(--lg-gold); padding: 15px 15px 17px; }
.lg-pood__silt {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	padding: 2px 11px; white-space: nowrap;
	background: var(--lg-gold); color: var(--lg-ink);
	border-radius: 999px; font-size: 0.76rem; font-weight: 600;
}
/* Kursusekaardil on märgis vasakus servas, kaardi enda paddingu joonel
   (omaniku otsus 09.08.2026): keskel katkestas see raami keset pealkirja.
   Materjalikaardi „Parim valik" jääb keskele — seal on kaart kitsam ja
   silt kannab teist rolli. */
.lg-pood__kursus .lg-pood__silt { left: 24px; transform: none; }
/* PESA VÕTAB KUJU PILDILT (omanik 14.08.2026: „materjali pilt ei tohi kaotsi
   minna osaliselt"). Suhte kirjutab server `<a>`-i `style`-i sisse pildi enda
   metaandmetest; kindel suhe jätaks PDF-toote kaanele, mis on 1754×1240 ehk
   lamedam kui lai, tohutud ribad. Raam ja liivakarva taust on samad, mis
   tootelehe kaanel — valge kaas valgel kaardil jääks muidu ilma piirita. */
.lg-pood__kaas {
	position: relative;
	display: block; overflow: hidden;
	background: var(--lg-sand);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
}
.lg-pood__kaas img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── KAANESILT ────────────────────────────────────────────────────────────
   Omanik 14.08.2026: „mul oleks sinna vaja uut elementi, mis läheks pildi
   peale ja kuhu ma saan kirjutada." Tekst tuleb halduse väljalt, vt
   inc/woo/kaanesilt.php.

   ALL, MITTE ÜLEVAL: kaanel on üleval pealkiri ja all kirjastaja rida. Silt
   katab paratamatult midagi ja kirjastaja nimi on odavam kaotus kui pealkiri,
   mille järgi ostja toote ära tunneb.

   TERVE RIBA, MITTE NURGALIPIK: omaniku kaks näidisteksti on 21 ja 35 märki
   ja lipik lõikaks pikema. Riba mahutab mõõdetult mõlemad ühele reale (1440,
   1000, 585 ja 500 px aknas, igal pool 30,6 px) ja pikema teksti korral
   lihtsalt kasvab, ilma et kuju muutuks.

   KULDNE, MITTE UUS VÄRV: saidil on üks rõhuvärv ja tema tähendus on „vaata
   siia". Tekst on tume, sest kuldsel on valge loetamatu — sama valik, mis
   „Lisa korvi" nupul.

   RIBA ON PILDI PEAL, MITTE TEMA ALL: sildiga ja sildita kaart on täpselt sama
   kõrge (mõõdetud 570 px kõigil neljal), seega rida ei lähe sakiliseks. */
.lg-pood__kaanesilt {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 7px 12px;
	background: var(--lg-gold); color: var(--lg-ink);
	font-size: 0.8rem; font-weight: 700; line-height: 1.3;
	text-align: center; text-wrap: balance;
}

/* ==========================================================================
   ÜLDINE TEATERIBA
   Senised teateribad olid iga allika omad (WPFormsi kinnitus, WooCommerce'i
   teated). `.lg-teade` on sama kuju ilma allikat teadmata — praegu kasutab
   seda tasuta kursusega liitumine (koolitused_tasuta_teateriba()).
   ========================================================================== */
.lg-teade {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 20px;
	padding: 11px 16px;
	border-radius: var(--lg-radius);
	font-size: 0.88rem;
}
.lg-teade::before {
	content: "";
	display: block;
	flex: none;
	width: 17px;
	height: 17px;
	background: currentcolor;
}
.lg-teade--ok { background: #eaf5ee; color: #1a5c31; }
.lg-teade--ok::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lg-teade--viga { background: #fdeceb; color: #b42318; }
.lg-teade--viga::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   TASUTA KURSUSE PLOKK
   Seisab kursuste ruudustiku EES ja on tahtlikult teine kuju: kreemjas
   täidis ja lai vorm, mitte ruudustiku lahter. Kuld jääb ka esiletõstetud
   kaardile (omaniku otsus 10.08.2026) — kaks kuldset raami kohakuti on
   teadlik valik, mitte kahe silmis nägemata jäänud kokkusattumus.
   ========================================================================== */
.lg-pood__tasuta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0 0 20px;
	padding: 21px 23px 23px;
	background: var(--lg-cream);
	border: 2px solid var(--lg-gold);
	border-radius: var(--lg-radius-card);
}
/* Märgis vasakus servas kaardi paddingu joonel — sama koht, kus
   kursusekaardil (.lg-pood__kursus .lg-pood__silt). */
.lg-pood__tasuta .lg-pood__silt { left: 23px; transform: none; }
.lg-pood__tasuta-sisu { flex: 1 1 auto; min-width: 0; }
.lg-pood__tasuta-nimi { margin: 0 0 12px; font-size: 1.32rem; }
.lg-pood__tasuta-nimi a { color: inherit; text-decoration: none; }
.lg-pood__tasuta-nimi .lg-pood__tase { margin-left: 9px; vertical-align: 0.15em; }
.lg-pood__tasuta-tegu {
	flex: none;
	width: 400px;
	/* Veerg on ise flex-veerg, et NUPP ÜKSI läheks paremasse serva.
	   Sisse logitud kasutajal e-posti välja ei ole ja 400px veergu jäi ainult
	   nupp — vasakusse serva jäetuna rippus ta keset plokki õhus (omaniku
	   teade 10.08.2026). Paremas servas joondub ta ploki polstriga ja on samas
	   kohas, kus külalise vaates, kus väli ja nupp veeru täidavad. */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
/* Vorm peab veeru laiuse säilitama, muidu kukuks väli sisu laiusele. */
.lg-pood__tasuta .lg-tasuta__vorm { width: 100%; }

/* --- Info-read kõrvuti, tegevus ühel real (omaniku valik 10.08.2026) -----
   Enne oli plokk 227px kõrge, aga tekst ainult 94px: tegevusveerg oli virnas
   (silt + väli + nupp + kaherealine abitekst) 179px kõrge ja
   `align-items: center` jättis teksti keskele õhku rippuma — 87px tühja ruumi.

   Kaks muudatust koos: info-read lähevad pealkirja alla ÜHELE reale ja väli
   ning nupp kõrvuti. Tekst kasutab siis laiust ja tegevus kõrgust vähem.

   Read on `flex-wrap: wrap` peal: kolme rea ja pikkade Zoomi-aegadega ei mahu
   need alati ühele reale ja murduv teine rida on parem kui väljaulatuv plokk. */
.lg-pood__tasuta .lg-pood__info {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 24px;
}

/* --- liitumisvorm (markup tuleb pluginast) --- */
.lg-tasuta__vorm { margin: 0; }
.lg-tasuta__silt {
	display: block;
	margin-bottom: 5px;
	color: var(--lg-ink);
	font-size: 0.82rem;
	font-weight: 600;
}
.lg-tasuta__sisend {
	width: 100%;
	margin-bottom: 8px;
	padding: 10px 13px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	font: inherit;
	font-size: 0.95rem;
	color: var(--lg-ink);
}
.lg-tasuta__sisend:focus {
	outline: none;
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}
/* Nupp täidab veeru: kitsas veerus näeb poolik nupp juhuslik välja. */
.lg-tasuta__nupp { display: block; width: 100%; text-align: center; }

/* Väli ja nupp kõrvuti AINULT poe plokis. Kursuse müügilehel elab sama vorm
   kitsas külgveerus, kus kõrvuti nad ei mahuks — seal jääb virn. */
.lg-pood__tasuta .lg-tasuta__vorm {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}
.lg-pood__tasuta .lg-tasuta__silt { width: 100%; }
.lg-pood__tasuta .lg-tasuta__sisend {
	flex: 1 1 auto;
	/* Alampiir sunnib nupu omale reale enne, kui väli loetamatuks kitseneb. */
	min-width: 190px;
	width: auto;
	margin-bottom: 0;
}
.lg-pood__tasuta .lg-tasuta__nupp {
	display: inline-block;
	width: auto;
	white-space: nowrap;
}
/* Kui väli puudub, on nupp vormis ainus element — surume ta paremasse serva,
   samasse kohta, kus ta külalise vaates niikuinii on (viimane element pärast
   välja). */
.lg-pood__tasuta .lg-tasuta__vorm { justify-content: flex-end; }
.lg-pood__tasuta .lg-tasuta__abi { width: 100%; }
.lg-tasuta__abi {
	margin: 7px 0 0;
	color: var(--lg-ink-muted);
	font-size: 0.78rem;
	line-height: 1.45;
}

/* Kitsal ekraanil laotub plokk ühte veergu.
   Piir on 900px, mitte 700: 400px tegevusveerg jätab 768px ekraanil tekstile
   ainult ~250px ja pealkiri murdus kolmele reale (mõõdetud 10.08.2026).
   900px juures jääb tekstile ~430px, mis kannab pealkirja kahel real. */
@media (max-width: 900px) {
	.lg-pood__tasuta { flex-direction: column; align-items: stretch; gap: 18px; }
	.lg-pood__tasuta-tegu { width: auto; }
	/* Kitsal ekraanil läheb nupp omale reale ja täidab laiuse — 375px sees
	   ei ole väljal ja nupul kõrvuti mõtet. */
	.lg-pood__tasuta .lg-tasuta__sisend { flex-basis: 100%; }
	.lg-pood__tasuta .lg-tasuta__nupp { width: 100%; }
}

/* Pealkiri on vaikne, hind kannab ainsana rasvast rõhku — hierarhia. */
/* PEALKIRI OLI LIIGA VÄIKE (omanik 14.08.2026). Mõõdetud: nimi 14,72 px /
   kaal 400 ja hind tema all 18,88 px / kaal 600 — kaardi kõige suurem tekst
   oli HIND, mitte see, mida ostetakse. Nüüd 16,8 px / 600 ja tumedam toon;
   hind jääb omale mõõdule, aga ei ole enam kaardi peategelane.

   `flex-grow` LÄHEB ÄRA: kaanepildid on eri kujuga, seega kaardid on eri
   kõrgusega ja venitatud pealkiri ajas nupud ühes reas eri kõrgusele. Ruumi
   võtab nüüd nupp ise (`margin-top: auto`), mis on rea põhjas sirge. */
.lg-pood__toode h3 { margin: 12px 0 6px; font-size: 1.05rem; line-height: 1.4; font-weight: 600; }
.lg-pood__toode h3 a { color: var(--lg-ink); }
.lg-pood__toode .lg-btn { margin-top: auto; }
.lg-pood__toode .lg-pood__hind--toode { font-size: 1.18rem; margin-bottom: 14px; }
.lg-pood__hind--toode s { margin-right: 4px; font-size: 0.85rem; font-weight: 400; color: var(--lg-ink-muted); }
.lg-pood__saast {
	display: inline-block; padding: 1px 8px; margin-left: 4px;
	background: var(--lg-cream); border: 1px solid var(--lg-gold);
	border-radius: 999px;
	font-size: 0.72rem; font-weight: 600; color: var(--lg-gold-text);
	vertical-align: 3px; white-space: nowrap;
}
.lg-pood__toode .lg-btn { margin-top: auto; padding: 9px 14px; font-size: 0.88rem; }
/* --- Korviteavitus (korv.js) ---------------------------------------------
   Toode lisatakse AJAX-iga, leht jääb samaks; kinnitus tuleb toastina
   paremale alla. aria-live pesa loob JS. */
.lg-toast-pesa {
	position: fixed; right: 20px; bottom: 20px; z-index: 400;
	display: grid; gap: 10px;
	max-width: min(360px, calc(100vw - 40px));
}
.lg-toast {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	padding: 13px 16px;
	background: var(--lg-white); color: var(--lg-ink);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	box-shadow: 0 6px 20px -8px rgba(30, 41, 59, 0.25);
	font-size: 0.92rem; line-height: 1.45;
	opacity: 0; transform: translateY(8px);
	transition: opacity 0.25s var(--lg-ease), transform 0.25s var(--lg-ease);
}
.lg-toast--sees { opacity: 1; transform: none; }
.lg-toast a { color: var(--lg-gold-text); font-weight: 600; white-space: nowrap; }
.lg-toast--viga { border-left: 4px solid #c24040; }

/* Mini-korvikaart: silt + nimi + summa, all korviseis ja nupp */
.lg-toast--korv { display: block; padding: 14px 16px; }
.lg-toast__rida1 { display: flex; align-items: center; gap: 10px; }
.lg-toast__rida1 .lg-pood__tase { flex: none; font-size: 0.72rem; padding: 2px 9px; }
.lg-toast__nimi { flex: 1; font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.lg-toast__summa { flex: none; font-weight: 600; }
.lg-toast__rida2 { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lg-toast__info { flex: 1; font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-toast .lg-toast__nupp { padding: 6px 12px; font-size: 0.82rem; font-weight: 600; color: var(--lg-ink); white-space: nowrap; }

@media (max-width: 719px) {
	.lg-pood__kursused { grid-template-columns: 1fr; }
	.lg-pood__rida { flex-wrap: wrap; }
	.lg-pood__rida .lg-btn { margin-left: 42px; }
}

/* ==========================================================================
   KURSUSE DETAILVAADE

   Teema oma mall (tutor/single-course.php) — Tutori UI-d ega varasid siin
   ei ole. Vasakul kirjeldus, paremal ostukast, all kreemjas õpetajariba.
   ========================================================================== */

.lg-kursus__sisu { max-width: var(--lg-container); margin-inline: auto; padding: 40px var(--lg-gutter) 64px; }

.lg-kursus__pais h1 { margin: 0 0 6px; }
/* Tasemesilt elab pealkirja JÄREL samal real, pealkirja mõõtu kasvatatuna. */
.lg-kursus__tase { font-size: 1rem; padding: 5px 16px; margin-left: 12px; vertical-align: 0.35em; }
.lg-kursus__alapealkiri { margin: 0; color: var(--lg-ink-muted); font-size: 1.08rem; }

.lg-kursus__veerud {
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px; align-items: start;
	margin-top: 32px;
}
.lg-kursus__kirjeldus h2 { margin: 0 0 14px; font-size: 1.45rem; }
.lg-kursus__kirjeldus p { line-height: 1.65; }

.lg-kursus__kast {
	padding: 24px 26px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	/* Kast püsib kerides silme ees — kirjeldus võib kasvada pikaks. */
	position: sticky; top: calc(var(--lg-head-h) + 20px);
}
.lg-kursus__hind { margin: 0 0 14px; font-size: 1.6rem; }
.lg-kursus__hind del { font-size: 1rem; }
.lg-kursus__olek { margin: 0 0 14px; font-weight: 600; }
.lg-kursus__osta { width: 100%; }
.lg-kursus__info {
	list-style: none; margin: 18px 0 0; padding: 16px 0 0;
	border-top: 1px solid var(--lg-line);
	display: grid; gap: 9px;
	color: var(--lg-ink-soft); font-size: 0.95rem;
}
.lg-kursus__info li + li { margin-top: 0; }
.lg-kursus__info svg { vertical-align: -3px; margin-right: 9px; color: var(--lg-gold); }
/* Teisesed teed ostukasti all: kursuste nimekiri ja kontakt kõrvuti. */
.lg-kursus__lisanupud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.lg-kursus__lisanupud .lg-btn { padding: 9px 8px; font-size: 0.88rem; white-space: nowrap; }

.lg-kursus__opetaja { background: var(--lg-cream); padding-block: 26px; }
.lg-kursus__opetaja-sisu {
	max-width: var(--lg-container); margin-inline: auto; padding-inline: var(--lg-gutter);
	display: flex; align-items: center; gap: 16px;
}
.lg-kursus__ring {
	flex: none; width: 46px; height: 46px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--lg-cream-accent); color: var(--lg-gold-text);
	font-weight: 600; font-size: 0.95rem;
}
/* Pildiga õpetaja: sama ring, aga foto täidab selle. `object-fit` hoiab näo
   proportsioonis ka siis, kui üleslaaditud pilt ei ole ruut. */
.lg-kursus__ring--pilt { object-fit: cover; background: var(--lg-cream-accent); }
.lg-kursus__nimi { margin: 0; font-weight: 600; }
.lg-kursus__roll { margin: 0; color: var(--lg-ink-muted); font-size: 0.92rem; }
.lg-kursus__opetaja-sisu .lg-btn { margin-left: auto; padding: 10px 18px; font-size: 0.9rem; white-space: nowrap; }

@media (max-width: 859px) {
	.lg-kursus__veerud { grid-template-columns: 1fr; gap: 28px; }
	.lg-kursus__kast { position: static; }
	.lg-kursus__opetaja-sisu { flex-wrap: wrap; }
	.lg-kursus__opetaja-sisu .lg-btn { margin-left: 62px; }
}

/* Nädalahind poe- ja kursuselehel (vt inc/woocommerce.php hinnafiltrit). */
.lg-hind-nadal { font-size: 0.78em; font-weight: 400; color: var(--lg-ink-muted); }
.lg-kursus__soodusvihje { margin: 10px 0 0; text-align: center; font-size: 0.85rem; color: var(--lg-ink-muted); }

/* --- Nädalate valiku modal ----------------------------------------------
   Avaneb "Lisa ostukorvi" nupust (assets/js/kursus.js). Ilma JS-ita jääb
   peidetuks ja nupp töötab tavalise lingina. */
.lg-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lg-modal[hidden] { display: none; }
.lg-modal__taust { position: absolute; inset: 0; background: var(--lg-overlay); }
body.lg-modal-avatud { overflow: hidden; }

.lg-modal__aken {
	position: relative;
	width: min(430px, 100%);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	padding: 24px 26px;
	background: var(--lg-white);
	border-radius: var(--lg-radius-card);
	box-shadow: 0 18px 50px -12px rgba(30, 41, 59, 0.35);
}
.lg-modal__sulge {
	position: absolute; top: 10px; right: 12px;
	padding: 4px 10px;
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--lg-ink-muted);
}
.lg-modal__sulge:hover { color: var(--lg-ink); }
.lg-modal__pealkiri { margin: 0; font-size: 1.25rem; }
.lg-modal__alapealkiri { margin: 4px 0 18px; font-size: 0.92rem; color: var(--lg-ink-muted); }

/* Juurdeostja seisurida: ütleb, mitu nädalat tal juba on. Ilma selleta
   tunduks stepperi ülempiir suvaline. */
.lg-modal__seis {
	display: flex; align-items: center; gap: 8px;
	margin: -8px 0 18px;
	padding: 9px 13px;
	background: var(--lg-cream);
	border-radius: var(--lg-radius);
	font-size: 0.88rem; font-weight: 600; color: var(--lg-gold-text);
}
.lg-modal__seis svg { flex: none; color: var(--lg-gold-icon); }

.lg-modal__valik {
	position: relative;
	padding: 13px 14px; margin-bottom: 10px;
	border: 2px solid var(--lg-line);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
/* Valik paistab taustast, mitte raadioringist: sisend on peidus (klaviatuurile
   ja ekraanilugejale alles), valitud kaart saab kreemja tausta ja kuldse raami. */
.lg-modal__valik input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-modal__valik--valitud { background: var(--lg-cream); border-color: var(--lg-gold); }
.lg-modal__valik:has(input:focus-visible) { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
/* Pealkiri on täislaiuses ülareal; hind, stepper ja kogusumma all omal real. */
.lg-modal__valik-nimi { display: block; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.lg-modal__valik-alune { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lg-modal__valik-info { flex: 1; font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-modal__valik-info s { margin-right: 2px; }
.lg-modal__silt {
	position: absolute; top: -10px; left: 14px;
	padding: 1px 10px; white-space: nowrap;
	background: var(--lg-gold); color: var(--lg-ink);
	border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
/* Märgis ulatub kaardist üles — jäta talle eelmise kaardi alt õhku. */
.lg-modal__valik--esile { margin-top: 18px; }
/* Kindel laius, et kasvav summa (45 -> 225 -> 1 215) stepperit ei nihutaks. */
.lg-modal__summa { min-width: 6em; text-align: right; font-weight: 600; font-size: 0.98rem; white-space: nowrap; }
.lg-modal__summa s { font-weight: 400; font-size: 0.82rem; color: var(--lg-ink-muted); margin-right: 4px; }

.lg-modal__stepper { display: inline-flex; align-items: center; border: 1px solid rgba(30, 41, 59, 0.25); border-radius: var(--lg-radius); }
.lg-modal__stepper button {
	padding: 4px 11px;
	background: none; border: 0; cursor: pointer;
	font-size: 1rem; color: var(--lg-ink-soft);
}
.lg-modal__stepper button:hover { color: var(--lg-ink); background: rgba(30, 41, 59, 0.05); }
.lg-modal__stepper output { min-width: 26px; text-align: center; font-weight: 600; font-size: 0.95rem; }

.lg-modal__kinnita { width: 100%; margin-top: 8px; }
.lg-modal__jalus { margin: 12px 0 0; text-align: center; font-size: 0.82rem; color: var(--lg-ink-muted); }

/* Töövihikute soovitus pärast kursuse lisamist: kaardid tulevad poe
   materjalisektsiooni funktsioonist (.lg-pood__tooted/__toode), siin on
   ainult modali laius nelja veeru jaoks ja väiksed erisused. */
/* NELI KAARTI RITTA, SAMA MÕÕDUGA MIS POES (omanik 14.08.2026: „püüame mitte
   muuta suuruseid, vaid paigutada 4 tk ritta, nagu õppematerjalide lehel").

   MÕÕDETUD ENNE: aken 1120 px, polster 26+26, seega ruudustikule jäi 1053 ja
   `auto-fit, minmax(260px, 1fr)` tegi sellest KOLM veergu à 335 px — kaardid
   olid poe omadest (292) laiemad ja neljas kukkus teisele reale.

   ARV EI OLE VALITUD, VAID ARVUTATUD: neli 292 px kaarti ja kolm 24 px vahet
   on 1240 px sisu; polster 26+26 teeb aknaks 1292. Sama tehe, mis annab
   õppematerjalide lehel 1240 px sisulaiuse — seega kaart on poes ja modalis
   ÜHES mõõdus, mitte kahes.

   `min(…, 100%)` jääb: kitsamal ekraanil kahaneb aken ja ruudustik langeb ise
   kolme, kahe ja ühe veeru peale. */
#lg-soovitusmodal .lg-modal__aken { width: min(1292px, 100%); }
.lg-soovitus-pakk { margin-top: 6px; }
.lg-soovitus-pakk .lg-pood__toode { background: var(--lg-white); }
/* "Lisatud" on kinnitus, mitte kustunud nupp: linnuke, kuldne raam,
   soe toon — sama keel mis säästupillil. */
.lg-soovitus__lisa--lisatud {
	pointer-events: none;
	background: var(--lg-cream);
	border: 1.5px solid var(--lg-gold);
	color: var(--lg-gold-text);
}
/* NUPUALA (omanik 14.08.2026: „Seal kus on Ei, aitäh, peaks ka olema nupp
   Ostukorvi, nupude ala tuleks kavandada").
   Kavand: kavandid/soovitusmodal-prototuup.html.

   MIS ENNE OLI: üks tuhm nupp, mõõdetult 113 × 37 px, KESKEL. Keskel seisev
   üksik nupp ei ütle, kumb pool on edasi ja kumb tagasi; „Ostukorvi" on see,
   mida modal tegelikult teenib, seega tema on kuldne ja rea LÕPUS — sama
   keel, mis „Lisa korvi" kaardil. „Ei, aitäh" jääb alles ja jääb tuhmiks:
   väljapääs peab olema nähtav, mitte peidus ristikese taga.

   RIBA ON KLEEPUV, SEST MÕÕT NÄITAS AUKU: 613 px kõrguses vaateaknas on modal
   573 px ja kerib — vana nupp jäi siis EKRAANIST VÄLJA ja modalil ei olnud
   ühtegi nähtavat väljapääsu peale ristikese. Arvud EI OLE valitud, vaid
   võetud akna polstrist (`.lg-modal__aken` = 24px 26px): negatiivsed veerised
   viivad riba akna servani ja `bottom: -24px` lubab tal alumise polstri jagu
   üle ulatuda, seega ta istub täpselt akna serval. Ülemine joon, mitte
   taustaplokk — sama valik, mis kleepuval päisel. */
.lg-soovitus__nupud {
	position: sticky; bottom: -24px;
	display: flex; align-items: center; justify-content: flex-end;
	gap: 12px;
	margin: 20px -26px -24px;
	padding: 16px 26px;
	background: var(--lg-white);
	border-top: 1px solid var(--lg-line);
	border-radius: 0 0 var(--lg-radius-card) var(--lg-radius-card);
}
.lg-soovitus__ei { display: inline-flex; width: auto; margin: 0; padding: 9px 22px; font-size: 0.9rem; }
.lg-soovitus__korv { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; font-size: 0.9rem; }

@media (max-width: 480px) {
	.lg-modal__valik-alune { flex-wrap: wrap; }
	.lg-modal__valik-info { flex-basis: 100%; }
}

/* ==========================================================================
   OSTUKORV

   Teema mall woocommerce/cart/cart.php: kursused ja materjalid eraldi
   rühmades, kokkuvõte paremal. Kursusel kogus = nädalad.
   ========================================================================== */

.lg-korv { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; align-items: start; }
/* Ridade sabaveerg (× ja raadiotäpp) — üks laius, et hinnad joonduks. */
.lg-korv { --lg-korv-saba: 26px; }

.lg-korv__ryhm {
	margin: 0 0 10px;
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--lg-gold-text);
}
.lg-korv__rida + .lg-korv__ryhm { margin-top: 26px; }

/* Iga rida on pehme kaart — sama keel mis mujal saidil. */
.lg-korv__rida {
	display: flex; align-items: center; gap: 13px;
	padding: 13px 15px; margin-bottom: 10px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: 14px;
}
.lg-korv__pilt { flex: none; width: 48px; }
.lg-korv__pilt img { width: 48px; height: auto; border-radius: 6px; display: block; }
.lg-korv__rida .lg-pood__tase { flex: none; }
.lg-korv__nimi { flex: 1; min-width: 0; }
.lg-korv__nimi p { margin: 0; }
.lg-korv__nimi a { color: inherit; text-decoration: none; font-weight: 600; }
.lg-korv__nimi a:hover { text-decoration: underline; }
.lg-korv__hind { font-size: 0.9rem; color: var(--lg-ink-muted); }
.lg-korv__hind s { margin-right: 4px; }
/* Soodusinfo elab hinnarea sees — eraldi rida venitas kaardi kõrgeks. */
/* Soodusmärgis pillina: ei murdu poole lause pealt reale nagu tekst. */
.lg-korv__soodus {
	display: inline-block; padding: 1px 8px; margin-left: 4px;
	font-size: 0.72rem; font-weight: 600; white-space: nowrap;
	color: var(--lg-gold-text); background: var(--lg-cream);
	border: 1px solid rgba(201, 154, 63, 0.45); border-radius: 999px;
	vertical-align: 1px;
}

/* Kindel laius (stepper ~7em + vahe + "näd"): stepperid seisavad
   kõigil ridadel samal joonel, ka kui ühikut pole. Em-ides, et
   kirjasuuruse muutus ei lööks veergu paigast. */
.lg-korv__kogus { display: inline-flex; align-items: center; gap: 7px; flex: none; width: 8.8em; }
.lg-korv__stepper { display: inline-flex; align-items: center; background: var(--lg-sand); border: 1px solid rgba(30, 41, 59, 0.2); border-radius: var(--lg-radius); }
.lg-korv__stepper button {
	padding: 4px 11px;
	background: none; border: 0; cursor: pointer;
	font-size: 1rem; color: var(--lg-ink-soft);
}
.lg-korv__stepper button:hover { color: var(--lg-ink); background: rgba(30, 41, 59, 0.05); }
.lg-korv__stepper input {
	width: 3.2em; padding: 4px 0; text-align: center;
	border: 0; background: none; font: inherit; font-weight: 600;
	-moz-appearance: textfield; appearance: textfield;
}
.lg-korv__stepper input::-webkit-outer-spin-button,
.lg-korv__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lg-korv__yhik { font-size: 0.88rem; color: var(--lg-ink-muted); }

.lg-korv__vahesumma { flex: none; min-width: 84px; text-align: right; font-weight: 600; }
/* Sabaveeru laius käib flex-lapsel (.product-remove mähis); link ise on
   inline ja laiust ei võtaks. */
.product-remove { flex: none; width: var(--lg-korv-saba); text-align: center; }
.lg-korv__eemalda { display: inline-block; width: 100%; padding: 2px 0; color: var(--lg-ink-muted); text-decoration: none; font-size: 1.2rem; }
.lg-korv__eemalda:hover { color: var(--lg-ink); }

.lg-korv__uuenda { margin-top: 18px; padding: 10px 18px; font-size: 0.9rem; }
.lg-korv--js .lg-korv__uuenda { position: absolute; left: -9999px; }

/* --- Kokkuvõte: kolm tsooni (kupong / kättetoimetamine / summad) -------- */
.lg-korv__kokku {
	padding: 0; overflow: hidden;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	position: sticky; top: calc(var(--lg-head-h) + 20px);
}

/* Sooduskood on kasti tipus otse valgel taustal — peenike joon eraldab
   summaridadest. Väli kannab kassa väljade stiili (liivataust, õrn
   raam, kuldne fookus), kuldne Rakenda-nupp elab välja sees paremal. */
.lg-korv__kupong {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--lg-line);
}
.lg-korv__kupong-vali {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 4px 4px 2px;
	background: var(--lg-sand);
	border: 1px solid rgba(30, 41, 59, 0.12);
	border-radius: 8px;
	transition: background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.lg-korv__kupong-vali:focus-within {
	background: var(--lg-white);
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}
/* Suurem kiri; sisestatud kood on paks ja tume, kohatäide tavaline. */
.lg-korv__kupong input {
	flex: 1; min-width: 0; padding: 7px 11px;
	background: transparent; border: none;
	font-size: 0.97rem; font-weight: 700; color: var(--lg-ink);
	letter-spacing: 0.02em;
}
.lg-korv__kupong input:focus { border: none; outline: none; background: transparent; }
.lg-korv__kupong input::placeholder { color: #b5ad9c; font-weight: 400; letter-spacing: normal; }
.lg-korv__kupong .lg-btn {
	flex: none; align-self: stretch; margin: 0;
	display: inline-flex; align-items: center;
	padding: 0 14px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
	border-radius: 6px;
}
.lg-korv__kupong .lg-btn:hover { transform: none; }

/* --- Kättetoimetamise valik ---------------------------------------------
   Elab vasakul toodete all omaette rühmana — sama koht, kus kassa teda
   infona näitab. Kaks kompaktset valikurida üksteise all: ikoon, nimi ja
   selgitus, hind ning raadiotäpp; automaadivalik valitud rea sees.
   Raadio ise on peidus, klõps käib sildil. Sektsioon on tootekaartidega
   sama lai, et paremasse serva ei jääks auku. */
.lg-korv__tarne { margin-top: 26px; }
.lg-korv__tarnevalik {
	border: 1px solid var(--lg-line); border-radius: 12px;
	background: var(--lg-white);
	transition: background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
.lg-korv__tarnevalik + .lg-korv__tarnevalik { margin-top: 8px; }
.lg-korv__tarnevalik--valitud,
.lg-korv__tarnevalik:has(input:checked) { background: var(--lg-cream); border-color: var(--lg-gold); }
.lg-korv__tarnevalik:has(input:focus-visible) { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
.lg-korv__tarnerida {
	display: flex; align-items: center; gap: 13px;
	padding: 11px 15px; margin: 0;
	/* Globaalne label-reegel (0.92rem, ink-soft) kahandaks hinna toodete
	   vahesummast väiksemaks — rida pärib kirja tavaliselt nagu tooteread. */
	font-size: inherit; color: var(--lg-ink);
	cursor: pointer;
}
.lg-korv__tarnerida input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-korv__tarneikoon { flex: none; color: #a89968; }
.lg-korv__tarnevalik--valitud .lg-korv__tarneikoon,
.lg-korv__tarnevalik:has(input:checked) .lg-korv__tarneikoon { color: var(--lg-gold-icon); }
.lg-korv__tarnetekst { flex: 1; min-width: 0; }
.lg-korv__tarnenimi { display: block; font-weight: 600; font-size: 0.92rem; }
/* Vedaja sõnamärk nime asemel — sama otsus mis tootelehel, põhjused
   `inc/woo/tarne.php`-s. `block` hoiab ta oma real, sest siin ta EI OLE lause
   sees, vaid ongi kogu nimerida.

   KÕRGUS ON ÜKS TEKSTIRIDA, mitte valitud arv. Kaks tarnevalikut on kõrvuti
   nuppudena ja peavad olema ühesuurused; kindla 21 px juures mõõtsin nende
   ridadeks 64,11 ja 67,39 px, sest teine valik kannab teksti, mille rida on
   `line-height: 1.65` (body, style.css:141) ehk 24,28 px. `1.65em` võtab
   sama arvu sealtsamast — kui reakõrgus kunagi muutub, tuleb logo kaasa. */
.lg-korv__tarnenimi .lg-korv__tarnelogo { display: block; height: 1.65em; width: auto; }
.lg-korv__tarneselgitus { display: block; font-size: 0.8rem; color: var(--lg-ink-muted); }
/* Sama suurus ja kaal kui toodete vahesummal — hinnaveerg on ühtne. */
.lg-korv__tarnehind { flex: none; min-width: 84px; text-align: right; font-weight: 600; white-space: nowrap; }
.lg-korv__tarnetapp {
	flex: none; width: 17px; height: 17px;
	/* Külgvarud venitavad täpi sabaveeru laiuseks — hinnad joonduvad
	   tooteridadega ühte veergu. */
	margin: 0 calc((var(--lg-korv-saba) - 17px) / 2);
	border: 1.5px solid var(--lg-line); border-radius: 50%;
	background: var(--lg-white);
	transition: border var(--lg-dur) var(--lg-ease);
}
.lg-korv__tarnevalik--valitud .lg-korv__tarnetapp,
.lg-korv__tarnevalik:has(input:checked) .lg-korv__tarnetapp { border: 5px solid var(--lg-gold); }
/* Vasak taane = rea padding + ikoon + vahe, et valik algaks nime alt. */
.lg-korv__tarneautomaat { padding: 0 15px 12px calc(15px + 20px + 13px); }
.lg-korv__tarneautomaat .lg-valik { margin-top: 0; }
/* Kui SmartPosti pole valitud, on valik nähtaval, aga passiivne.
   Klassi hoiavad server ja korv.js — ei sõltu :has() toest. */
.lg-korv__tarnevalik:not(.lg-korv__tarnevalik--valitud) .lg-korv__tarneautomaat { opacity: 0.5; }
.lg-valik__nupp:disabled { cursor: default; }

/* --- Otsitav pakiautomaadi valik ----------------------------------------- */
.lg-valik { position: relative; margin-top: 8px; }
.lg-valik__nupp {
	display: flex; align-items: center; gap: 9px;
	width: 100%; padding: 10px 12px;
	background: var(--lg-white);
	border: 2px solid var(--lg-line); border-radius: 10px;
	font: inherit; font-size: 0.92rem; color: var(--lg-ink-muted);
	cursor: pointer; text-align: left;
}
.lg-valik__nupp--valitud { border-color: var(--lg-gold); color: var(--lg-ink); }
.lg-valik__nupp svg:first-child { color: var(--lg-gold-icon); flex: none; }
.lg-valik__nupp svg:last-child { margin-left: auto; color: var(--lg-ink-muted); flex: none; }
.lg-valik__tekst { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-valik__paneel {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
	background: var(--lg-white);
	border: 1px solid var(--lg-line); border-radius: 12px;
	box-shadow: 0 14px 34px -10px rgba(30, 41, 59, 0.3);
	overflow: hidden;
}
/* Kui nupu all pole paneeli jagu ruumi, avaneb ta nupu kohale —
   suuna mõõdab korv.js avamise hetkel. Vari samuti üles. */
.lg-valik__paneel--yles {
	top: auto; bottom: calc(100% + 6px);
	box-shadow: 0 -14px 34px -10px rgba(30, 41, 59, 0.3);
}
/* Otsinguväli: kompaktne, luubiga, kuldse fookusega — baasvormide suur
   tume raam siia ei sobi. */
.lg-valik__otsikast { position: relative; margin: 10px 10px 8px; }
.lg-valik__otsikast svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--lg-ink-muted); pointer-events: none; }
.lg-valik__paneel .lg-valik__otsing {
	width: 100%; margin: 0;
	padding: 8px 12px 8px 33px;
	font-size: 0.9rem;
	background: var(--lg-sand);
	border: 1px solid rgba(30, 41, 59, 0.14);
	border-radius: 9px;
}
.lg-valik__paneel .lg-valik__otsing:focus {
	outline: none;
	background: var(--lg-white);
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}
.lg-valik__loend {
	list-style: none; margin: 0; padding: 0 0 8px;
	max-height: 250px; overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--lg-gold) transparent;
}
.lg-valik__loend::-webkit-scrollbar { width: 7px; }
.lg-valik__loend::-webkit-scrollbar-thumb { background: var(--lg-gold); border-radius: 4px; }
.lg-valik__loend::-webkit-scrollbar-track { background: transparent; }
.lg-valik__loend li + li { margin-top: 0; }
.lg-valik__linn {
	padding: 10px 14px 4px;
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--lg-ink-muted);
}
.lg-valik__linn:first-child { padding-top: 2px; }
.lg-valik__koht {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 14px;
	font-size: 0.9rem; line-height: 1.4;
	cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
/* Otsing peidab read hidden-atribuudiga; display-reegel lööks selle üle. */
.lg-valik__koht[hidden], .lg-valik__linn[hidden] { display: none; }
.lg-valik__koht:hover, .lg-valik__koht:focus { background: var(--lg-cream); outline: none; }
.lg-valik__koht[aria-selected="true"] { background: var(--lg-cream); font-weight: 600; color: #6d5615; }
.lg-valik__koht[aria-selected="true"]::after {
	content: ""; margin-left: auto; flex: none;
	width: 14px; height: 14px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
}

/* --- Summad ---------------------------------------------------------------
   Ikooniread (kuldne märk kreemjas ruudukeses) ilma vahejoonteta;
   Kokku kreemjal ribal nagu tšeki kokkuvõtteplaat. Sama plokk korvis
   ja kassas. */
.lg-korv__summad { padding: 12px 16px 16px; }
.lg-summad__rida { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; }
.lg-summad__ikoon {
	flex: none; width: 28px; height: 28px;
	border-radius: 8px; background: var(--lg-cream);
	display: flex; align-items: center; justify-content: center;
	color: var(--lg-gold-icon);
}
.lg-summad__silt { flex: 1; color: var(--lg-ink-soft); }
/* Sooduskoodi kood ise on paks ja tume. */
.lg-summad__silt strong { font-weight: 700; color: var(--lg-ink); }
.lg-summad__summa { font-weight: 600; }
/* "tasuta" on sõna, mitte number — kuldne ja tavakaalus. */
.lg-summad__summa--tasuta { font-weight: 400; color: var(--lg-gold-text); }
/* Eemalda-pill kupongi nime järel; hover vihjab punasega. */
.lg-summad__eemalda {
	display: inline-block; margin-left: 8px; padding: 2px 9px;
	border: 1px solid #ddd5c2; border-radius: 999px;
	background: var(--lg-white);
	font-size: 0.7rem; color: var(--lg-ink-muted);
	text-decoration: none; vertical-align: 1px;
	transition: color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
.lg-summad__eemalda:hover { color: var(--lg-error); border-color: var(--lg-error-soft); }
.lg-summad__kokku {
	display: flex; align-items: center; gap: 10px;
	margin-top: 8px; padding: 11px 14px;
	background: var(--lg-cream); border-radius: 10px;
}
.lg-summad__kokku .lg-summad__silt { font-weight: 600; color: var(--lg-ink); font-size: 0.95rem; }
.lg-summad__kokkusumma { font-weight: 600; font-size: 1.25rem; }
.lg-korv__maksma { width: 100%; margin-top: 16px; }
/* Turvarida kuldse lukuga kreemjas ringis — korvis ja kassas sama. */
.lg-turvarida {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	margin: 12px 0 0;
	font-size: 0.8rem; color: var(--lg-ink-soft);
}
.lg-turvarida__lukk {
	flex: none; width: 22px; height: 22px;
	border-radius: 50%; background: var(--lg-cream);
	display: flex; align-items: center; justify-content: center;
	color: var(--lg-gold-icon);
}
.lg-kassa__jalus .lg-turvarida { margin: 0; }

@media (max-width: 859px) {
	.lg-korv { grid-template-columns: 1fr; gap: 28px; }
	.lg-korv__kokku { position: static; }
	.lg-korv__rida { flex-wrap: wrap; }
	.lg-korv__nimi { flex-basis: calc(100% - 120px); }
	.lg-korv__vahesumma { margin-left: auto; }
}

/* ==========================================================================
   KASSA

   Vasakul tellimuse lukus ülevaade (samad kaardiread mis ostukorvis,
   ilma muutmisnuppudeta) + tarneinfo ja summad; paremal kleepuv kaart
   kontaktandmete, makseviisi ja esitamise nupuga. Aadressi ei küsita.
   ========================================================================== */

form.checkout.lg-kassa {
	display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 36px; align-items: start;
}
/* Woo checkout.js torkab veateated vormi esimeseks lapseks ja meie
   template prindib serveriteated sinna ise — ilma täisrea-reeglita
   nihutaksid nad grid'i veerud paigast ära. */
form.checkout.lg-kassa > .woocommerce-NoticeGroup,
form.checkout.lg-kassa > .woocommerce-notices-wrapper,
form.checkout.lg-kassa > .woocommerce-error,
form.checkout.lg-kassa > .woocommerce-message,
form.checkout.lg-kassa > .woocommerce-info { grid-column: 1 / -1; min-width: 0; }
/* Tühi teadete mähis ei tohi tühja grid-rida (ja rea vahet) tekitada. */
form.checkout.lg-kassa > .woocommerce-notices-wrapper:empty { display: none; }

/* Lukus tarneinfo kaart */
.lg-kassa__tarne { background: var(--lg-cream); }
.lg-kassa__tarne-ikoon { flex: none; color: var(--lg-gold-icon); }
.lg-kassa__tarne--puudu { border-color: #c24040; }
.lg-kassa__tarne--puudu .lg-korv__hind { color: var(--lg-error); }

.lg-kassa__vihje { margin: 8px 0 0; font-size: 0.82rem; color: var(--lg-ink-muted); }
.lg-kassa__summakast { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lg-line); }

/* Parem kaart */
.lg-kassa__vorm {
	padding: 18px 20px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	position: sticky; top: calc(var(--lg-head-h) + 20px);
}
.lg-kassa__vorm h3 { margin: 0 0 12px; font-size: 1.15rem; }
.lg-kassa__vorm h3:not(:first-child) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lg-line); }

/* --- Ostjatüübi tabid ----------------------------------------------------
   Kreem riba kaardi tipus, valitud tab valge kuldse raamiga — sama
   keel mis korvi tarnevalikul. Raadio on peidus, klõps käib sildil. */
.lg-ostja {
	display: flex; padding: 3px; margin: 0 0 14px;
	background: var(--lg-sand);
	border: 1px solid var(--lg-line); border-radius: 10px;
}
.lg-ostja__tab {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 8px 0; margin: 0;
	border: 1.5px solid transparent; border-radius: 8px;
	font-size: 0.92rem; font-weight: 600; color: var(--lg-ink-muted);
	cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease);
}
.lg-ostja__tab input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-ostja__tab svg { flex: none; }
.lg-ostja__tab--valitud { background: var(--lg-white); border-color: var(--lg-gold); color: var(--lg-ink); }
.lg-ostja__tab--valitud svg { color: var(--lg-gold-icon); }
.lg-ostja__tab:has(input:focus-visible) { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
/* Tabid + pealkiri on üks plokk — vahejoont nende vahele ei käi. */
.lg-kassa__vorm .lg-ostja + h3 { margin-top: 0; padding-top: 0; border-top: 0; }

.lg-kassa__andmed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
/* form-elemendiga selektor lööb Woo 47% laiuse (form .form-row-first) üle. */
form.lg-kassa .lg-kassa__andmed .form-row { grid-column: 1 / -1; width: 100%; float: none; margin: 0; padding: 0; position: relative; }
form.lg-kassa .lg-kassa__andmed .form-row-first { grid-column: 1; }
form.lg-kassa .lg-kassa__andmed .form-row-last { grid-column: 2; }
/* Ettevõtteväljad paistavad ainult ettevõttevalikul (klass vormil,
   lülitab korv.js; algseisu paneb server POST-i järgi). */
form.lg-kassa .lg-kassa__andmed .lg-ettevote-vali { display: none; }
form.lg-kassa.lg-kassa--ettevote .lg-kassa__andmed .lg-ettevote-vali { display: block; }
/* Väike silt välja kohal — jääb nähtavale ka täidetud väljal.
   Fookuses läheb silt kuldseks koos välja raamiga. */
.lg-kassa__andmed label {
	display: block; margin: 0 0 3px 2px;
	font-size: 0.68rem; font-weight: 600;
	letter-spacing: 0.04em; text-transform: uppercase;
	color: #9a917e;
}
/* Woo "(valikuline)" lisand on müra; tärn pärib sildi värvi. Woo abbr
   katab nõutud väljad, ettevõtteväljad (Woo silmis vabatahtlikud, aga
   serveri valvatud) saavad tärni siit. */
.lg-kassa__andmed label .optional { display: none; }
/* form-selektor lööb Woo punase tärni (.woocommerce form .form-row
   .required) üle — tärn pärib sildi värvi. Ettevõtteväljade tärn on
   sildi tekstis (inc/woocommerce.php), et veaikoon jääks tärni taha. */
form.lg-kassa .lg-kassa__andmed label .required { color: inherit; text-decoration: none; border-bottom: 0; }
.lg-kassa__andmed .form-row:focus-within label { color: var(--lg-gold-text); }
.lg-kassa__andmed .woocommerce-input-wrapper { display: block; width: 100%; }
/* Pehmed liivakarva väljad, fookuses valge kuldse rõngaga — sama keel
   mis automaadiotsingu väljal. Selektoris on form + input.input-text,
   et Woo enda väljastiil (0,3,2) üle lüüa. Madal profiil: silt kannab
   konteksti, väli ise on õhem. */
form.lg-kassa .lg-kassa__andmed input.input-text {
	width: 100%; padding: 7px 11px;
	background: var(--lg-sand);
	border: 1px solid rgba(30, 41, 59, 0.12);
	border-radius: 8px;
	color: var(--lg-ink);
	font: inherit; font-size: 0.88rem;
}
form.lg-kassa .lg-kassa__andmed input.input-text::placeholder { color: #b5ad9c; }
/* Woo roheline "kõik korras" raam ei kuulu paletti: korras väli saab
   kuldse raami nagu valitud pangalink. Tühi vabatahtlik väli (nähtav
   kohatäide) jääb neutraalseks. */
form.lg-kassa .lg-kassa__andmed .form-row.woocommerce-validated input.input-text:not(:focus) { border-color: rgba(30, 41, 59, 0.12); }
/* Sisemine vari annab teise piksli — raam on pangalingi 2px-ga sama
   paks, aga väli ei nihku (borderi laius jääb 1px). */
form.lg-kassa .lg-kassa__andmed .form-row.woocommerce-validated input.input-text:not(:focus):not(:placeholder-shown) {
	border-color: var(--lg-gold);
	box-shadow: inset 0 0 0 1px var(--lg-gold);
}

/* Brauseri automaattäite sinakas taust maha: background'i autofill ei
   kuula, aga hiiglaslik sisemine varjutäide värvib välja meie tooni.
   Kuldne korras-ring ja fookusehelo käivad täite ette samasse pinusse.
   WebKit ja Firefox eraldi plokkides — tundmatu selektor rikuks terve
   loendi. */
form.lg-kassa .lg-kassa__andmed input.input-text:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 1000px var(--lg-sand);
	-webkit-text-fill-color: var(--lg-ink);
	caret-color: var(--lg-ink);
}
form.lg-kassa .lg-kassa__andmed .form-row.woocommerce-validated input.input-text:not(:focus):not(:placeholder-shown):-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 1px var(--lg-gold), inset 0 0 0 1000px var(--lg-sand);
}
form.lg-kassa .lg-kassa__andmed input.input-text:focus:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 1000px var(--lg-white), 0 0 0 3px var(--lg-focus-ring);
}
form.lg-kassa .lg-kassa__andmed input.input-text:autofill {
	box-shadow: inset 0 0 0 1000px var(--lg-sand);
}
form.lg-kassa .lg-kassa__andmed .form-row.woocommerce-validated input.input-text:not(:focus):not(:placeholder-shown):autofill {
	box-shadow: inset 0 0 0 1px var(--lg-gold), inset 0 0 0 1000px var(--lg-sand);
}
form.lg-kassa .lg-kassa__andmed input.input-text:focus:autofill {
	box-shadow: inset 0 0 0 1000px var(--lg-white), 0 0 0 3px var(--lg-focus-ring);
}

/* --- Valideerimisvead: ikoon vihjemulliga --------------------------------
   Viga on väike roostepunane (!) ikoon välja sees paremal; hiir, fookus
   või koputus avab tumeda mulli täpse teatega (korv.js tõstab Woo lause
   data-lg-vihje atribuuti). Väli saab mahe-punaka raami; silt EI
   punasta. Need reeglid on validated-kulla järel, et vigane olek
   võidaks viigi korral. */
.lg-viga-ikoon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; flex: none;
	background: var(--lg-error); border-radius: 50%;
	color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
	letter-spacing: normal; text-transform: none;
	cursor: help; position: relative;
}
.lg-viga-ikoon:focus { outline: 2px solid rgba(160, 54, 54, 0.35); outline-offset: 1px; }
/* Mull avaneb ikooni kohal paremale (ikoonid elavad siltide järel
   vasakus servas). */
.lg-viga-ikoon:hover::after, .lg-viga-ikoon:focus::after {
	content: attr(data-lg-vihje);
	position: absolute; bottom: calc(100% + 7px); left: -8px;
	background: var(--lg-ink); color: #fdf9ef;
	padding: 7px 11px; border-radius: 8px;
	font-size: 0.78rem; font-weight: 400; line-height: 1.45;
	white-space: nowrap; z-index: 40;
}
.lg-viga-ikoon:hover::before, .lg-viga-ikoon:focus::before {
	content: ""; position: absolute; bottom: calc(100% + 2px); left: 4px;
	border: 5px solid transparent; border-top-color: var(--lg-ink);
	z-index: 41;
}
/* Väljavea ikoon istub sildi järel (korv.js tõstab ta sildi sisse).
   Värv üle korratud, et Woo enda inline-teate punane kiri ei jätaks
   "!"-i tumeda ringi taustal nähtamatuks. */
form.lg-kassa .lg-kassa__andmed label .lg-viga-ikoon {
	width: 15px; height: 15px; font-size: 10.5px;
	margin: 0 0 0 6px; padding: 0;
	vertical-align: text-bottom;
	color: #fff;
}
/* Enne kui korv.js teate ikooniks vormistab, toorlauset ei näidata. */
form.lg-kassa .lg-kassa__andmed .checkout-inline-error-message:not(.lg-viga-ikoon) { display: none; }
/* Vigane olek paistab alles pärast esimest esitust (--proovitud paneb
   korv.js): välja puudutamine ja tühjaks jätmine üksi viga ei näita —
   enne esitust surutakse ka Woo enda punane maha. */
form.lg-kassa:not(.lg-kassa--proovitud) .lg-kassa__andmed .form-row.woocommerce-invalid input.input-text { border-color: rgba(30, 41, 59, 0.12); box-shadow: none; }
form.lg-kassa:not(.lg-kassa--proovitud) .lg-kassa__andmed .form-row.woocommerce-invalid label { color: #9a917e; }
form.lg-kassa.lg-kassa--proovitud .lg-kassa__andmed .form-row.woocommerce-invalid input.input-text { border-color: var(--lg-error-soft); box-shadow: none; }
form.lg-kassa.lg-kassa--proovitud .lg-kassa__andmed .form-row.woocommerce-invalid label { color: var(--lg-error); }
form.lg-kassa .lg-kassa__andmed input.input-text:focus {
	outline: none;
	background: var(--lg-white);
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}

/* Riiki ei näidata: ainus lubatud riik on Eesti, väärtus postitub niigi. */
.woocommerce-checkout #billing_country_field { display: none; }

/* Pangalogod: klõps valib panga, Montonio suunab otse sinna. */
.lg-pangad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg-pangad__pank {
	display: flex; align-items: center; justify-content: center;
	padding: 13px 10px;
	background: var(--lg-white);
	border: 2px solid var(--lg-line); border-radius: 10px;
	cursor: pointer;
	transition: border-color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.lg-pangad__pank:hover { border-color: var(--lg-gold); }
.lg-pangad__pank--valitud { background: var(--lg-cream); border-color: var(--lg-gold); }
.lg-pangad__pank img { max-height: 22px; max-width: 100%; }

/* Makseviisi alamsektsioonid: sildid nagu korvi rühmapealkirjad.
   Flex hoiab veaikooni sildi kõrval. */
.lg-makseviis__silt {
	display: flex; align-items: center; gap: 7px;
	margin: 0 0 8px;
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--lg-gold-text);
}
.lg-makseviis__silt .lg-viga-ikoon { width: 15px; height: 15px; font-size: 10.5px; }
.lg-makseviis__silt--viga { color: var(--lg-error); }
.lg-pangad + .lg-makseviis__silt { margin-top: 14px; }

/* Arve alusel maksed: täisrea kaardid ikooni, nime ja selgitusega. */
.lg-arvega { display: flex; flex-direction: column; gap: 8px; }
.lg-arvega__valik {
	display: flex; align-items: center; gap: 10px;
	width: 100%; padding: 10px 14px;
	background: var(--lg-white);
	border: 2px solid var(--lg-line); border-radius: 10px;
	font: inherit; text-align: left; cursor: pointer;
	transition: border-color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.lg-arvega__valik:hover { border-color: var(--lg-gold); }
.lg-arvega__valik--valitud { background: var(--lg-cream); border-color: var(--lg-gold); }
.lg-arvega__valik svg { flex: none; color: var(--lg-gold-icon); }
.lg-arvega__tekst { flex: 1; min-width: 0; }
.lg-arvega__nimi { display: block; font-size: 0.92rem; font-weight: 600; color: var(--lg-ink); }
.lg-arvega__selgitus { display: block; font-size: 0.8rem; color: var(--lg-ink-muted); }
/* E-arve paistab ainult ettevõttevalikul (sama klass mis väljadel). */
form.lg-kassa .lg-arvega__valik.lg-ettevote-vali { display: none; }
form.lg-kassa.lg-kassa--ettevote .lg-arvega__valik.lg-ettevote-vali { display: flex; }

/* Makseviisid samas kaardikeeles mis valikud mujal; loend ise on peidus —
   pank valitakse logodelt, ainus värav (Montonio pangamaksed) on niigi
   valitud. Tingimused ja "Esita tellimus" jäävad nähtavale. */
.lg-kassa #payment { background: transparent; }
.lg-kassa #payment ul.payment_methods { display: none; }
.woocommerce-checkout .lg-kassa #payment div.payment_box { margin: 8px 0 0; padding: 0; font-size: 0.88rem; color: var(--lg-ink-muted); background: transparent; }
.woocommerce-checkout .lg-kassa #payment div.payment_box::before { content: none; }

/* Tingimused ja uudiskiri raamideta ridadena: tekst vasakul, ring
   paremal, tingimuste rea all peenike joon — nagu vaikne seadete
   loend. Ring ON checkbox ise (appearance: none) — Woo valideerimine
   ja POST käivad muutmata kujul. */
.lg-kassa .woocommerce-terms-and-conditions-wrapper { margin: 8px 0 0; }
.lg-kassa .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }
/* label.checkbox-selektor viigistab Woo omaga (.woocommerce form
   .form-row label.checkbox { display: inline }) ja hilisemana võidab. */
form.lg-kassa .woocommerce-terms-and-conditions-wrapper label.checkbox,
form.lg-kassa .lg-uudiskiri label.checkbox {
	/* Ilma gap'ita: Woo &nbsp; tekib anonüümse flex-lapsena ja iga gap
	   tema ümber nihutaks rida; vahed käivad marginitega ja font-size 0
	   nullib nbsp laiuse — päris tekst saab suuruse spanilt tagasi. */
	display: flex; align-items: center;
	margin: 0; padding: 11px 2px;
	font-size: 0; color: var(--lg-ink);
	cursor: pointer;
}
.lg-kassa .woocommerce-terms-and-conditions-wrapper label.checkbox > span:not(.lg-viga-ikoon),
.lg-kassa .lg-uudiskiri label.checkbox > span:not(.lg-viga-ikoon) { font-size: 0.85rem; }
form.lg-kassa .woocommerce-terms-and-conditions-wrapper label.checkbox { border-bottom: 1px solid var(--lg-line-soft); }
/* Uudiskiri on vabatahtlik — tekst mahedam, valituna tavavärvi. */
form.lg-kassa .lg-uudiskiri label.checkbox { color: var(--lg-ink-soft); }
form.lg-kassa .lg-uudiskiri label.checkbox:has(input:checked) { color: var(--lg-ink); }
/* Tekst ei veni — vaba ruum elab teksti/ikooni ja ringi vahel. */
.lg-kassa .woocommerce-terms-and-conditions-wrapper label > span:not(.lg-viga-ikoon),
.lg-kassa .lg-uudiskiri label > span:not(.lg-viga-ikoon) { flex: none; order: 1; }
.lg-terms-viga { order: 2; margin-left: 8px; }
form.lg-kassa #terms, form.lg-kassa #lg_uudiskiri { order: 3; }
.lg-kassa .woocommerce-terms-and-conditions-wrapper a { color: inherit; }
.lg-kassa .woocommerce-terms-and-conditions-wrapper .required { display: none; }
form.lg-kassa #terms,
form.lg-kassa #lg_uudiskiri {
	appearance: none; -webkit-appearance: none;
	display: inline-block; flex: none;
	/* Auto-vasakveeris lükkab ringi rea paremasse serva. */
	width: 19px; height: 19px; margin: 0 0 0 auto;
	border: 1.5px solid #cfc7b4; border-radius: 50%;
	background: var(--lg-white);
	position: relative; cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
form.lg-kassa #terms:checked,
form.lg-kassa #lg_uudiskiri:checked { background: #c99a3f; border-color: #c99a3f; }
form.lg-kassa #terms:checked::after,
form.lg-kassa #lg_uudiskiri:checked::after {
	content: ""; position: absolute; inset: 2px;
	background: #fff;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
}
form.lg-kassa #terms:focus-visible,
form.lg-kassa #lg_uudiskiri:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
/* Uudiskirja rida tingimuste ja nupu vahel. */
form.lg-kassa .lg-uudiskiri { margin: 0; padding: 0; }
/* Woo joonistaks vigasele linnukesele punase outline'i — veaolek on
   real endal. */
form.lg-kassa .woocommerce-invalid #terms { outline: none; }
/* Veaolek pärast esitust: ring mahe-punakas, tekst punane. */
form.lg-kassa.lg-kassa--proovitud .woocommerce-invalid #terms:not(:checked) { border-color: var(--lg-error-soft); }
form.lg-kassa.lg-kassa--proovitud .woocommerce-invalid .woocommerce-terms-and-conditions-checkbox-text { color: var(--lg-error); }

/* --- Tellimuse kinnitusleht ----------------------------------------------
   Üks keskne veerg: kinnituspea faktipillidega, kokkuvõte kassa
   keeles, lõpunupud. Ootel makse saab makseandmete kasti. */
.lg-kinnitus { max-width: 720px; margin: 0 auto; }
.lg-kinnitus__pea { text-align: center; padding: 8px 0 26px; }
.lg-kinnitus__ring {
	width: 62px; height: 62px; margin: 0 auto 18px;
	border-radius: 50%; background: var(--lg-gold); color: var(--lg-ink);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 8px var(--lg-cream);
}
.lg-kinnitus__ring--ootel { background: var(--lg-cream-accent); }
.lg-kinnitus__ring--viga { background: #f3ddd6; color: var(--lg-error); }
.lg-kinnitus__pea h1 { font-size: 1.9rem; margin: 0 0 8px; }
.lg-kinnitus__alarida { color: var(--lg-ink-soft); font-size: 0.98rem; margin: 0 auto; max-width: 480px; }
.lg-kinnitus__faktid { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.lg-kinnitus__fakt {
	display: flex; align-items: center; gap: 7px;
	background: var(--lg-cream); border-radius: 999px;
	padding: 7px 14px; font-size: 0.85rem; color: var(--lg-ink-soft);
}
.lg-kinnitus__fakt strong { color: var(--lg-ink); font-weight: 600; }

.lg-kinnitus__kaart {
	background: var(--lg-white); border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card); padding: 22px 24px; margin-top: 22px;
}
.lg-kinnitus__kaart h2 { font-size: 1.05rem; margin: 0 0 4px; }

.lg-kinnitus__ryhm {
	font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--lg-ink-muted); font-weight: 600; margin: 16px 0 4px;
}

/* Tootekaardid: pilt (või kreemjas ikooniruut) + nimi + hind. */
.lg-toode { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.lg-toode + .lg-toode { border-top: 1px solid #f6f1e4; }
.lg-toode__pilt {
	flex: none; width: 56px; height: 56px; border-radius: 10px;
	background: var(--lg-cream); border: 1px solid var(--lg-line);
	display: flex; align-items: center; justify-content: center;
	color: var(--lg-gold-icon); overflow: hidden;
}
.lg-toode__pilt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-toode__info { flex: 1; min-width: 0; }
.lg-toode__info b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.lg-toode__info > span { font-size: 0.84rem; color: var(--lg-ink-muted); }
.lg-toode__hind { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; font-size: 0.95rem; }
.lg-kinnitus__rida { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.92rem; }
.lg-kinnitus__rida--toode { color: var(--lg-ink-soft); }
.lg-kinnitus__silt { flex: 1; color: var(--lg-ink-soft); }
.lg-kinnitus__silt strong { font-weight: 700; color: var(--lg-ink); }
.lg-kinnitus__summa { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-kinnitus__silt + .lg-kinnitus__summa { margin-left: 0; }
.lg-kinnitus__vaherida { border-top: 1px solid var(--lg-line-soft); margin-top: 10px; padding-top: 2px; }
.lg-kinnitus__kokku {
	display: flex; align-items: center; margin-top: 12px;
	background: var(--lg-cream); border-radius: 10px; padding: 13px 16px;
	font-weight: 700;
}
.lg-kinnitus__kokku .lg-kinnitus__summa { font-size: 1.05rem; }

.lg-kinnitus__andmed { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 6px 0 0; }
.lg-kinnitus__andmed dt {
	font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--lg-ink-muted); font-weight: 600; margin: 14px 0 3px;
}
.lg-kinnitus__andmed dd { font-size: 0.9rem; color: var(--lg-ink-soft); margin: 0; }

.lg-kinnitus__infokast {
	background: var(--lg-cream); border-radius: var(--lg-radius-card);
	padding: 20px 24px; margin-top: 22px;
}
.lg-kinnitus__infokast h2 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 9px; }
.lg-kinnitus__infokast p { font-size: 0.88rem; color: var(--lg-ink-soft); margin: 0 0 12px; }
.lg-kinnitus__rekv { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: 0.9rem; margin: 0; }
.lg-kinnitus__rekv dt { color: var(--lg-ink-muted); }
.lg-kinnitus__rekv dd { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }

.lg-kinnitus__lopp { text-align: center; margin-top: 30px; }
.lg-kinnitus__nupud { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lg-kinnitus__abi { margin-top: 18px; font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-kinnitus__abi a { color: var(--lg-ink-soft); }

@media (max-width: 640px) {
	.lg-kinnitus__pea h1 { font-size: 1.55rem; }
	.lg-kinnitus__andmed { grid-template-columns: 1fr; }
	.lg-kinnitus__nupud { flex-direction: column; align-items: stretch; }
}

/* --- Tingimuste ja privaatsuse modalid -----------------------------------
   Tume kate, soe valge kaart; sisu kerib kaardi sees kuldse ribaga.
   "Nõustun tingimustega" paneb korv.js kaudu ka linnukese. */
.lg-leht-modal { position: fixed; inset: 0; z-index: 220; }
.lg-leht-modal__kate { position: absolute; inset: 0; background: var(--lg-overlay); }
.lg-leht-modal__kaart {
	position: relative;
	width: min(640px, calc(100% - 32px));
	max-height: min(84vh, 720px);
	margin: max(48px, 8vh) auto 0;
	display: flex; flex-direction: column;
	background: var(--lg-white);
	border-radius: 14px;
	box-shadow: 0 24px 60px -20px var(--lg-overlay);
	overflow: hidden;
}
.lg-leht-modal__pea {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--lg-line);
}
.lg-leht-modal__pea h2 { flex: 1; margin: 0; font-size: 1.15rem; }
.lg-leht-modal__rist {
	flex: none; width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	background: var(--lg-sand); border: 0; border-radius: 8px;
	color: var(--lg-ink-muted); cursor: pointer;
	transition: color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.lg-leht-modal__rist:hover { color: var(--lg-ink); background: var(--lg-cream); }
.lg-leht-modal__sisu {
	padding: 16px 18px;
	overflow-y: auto; overscroll-behavior: contain;
	font-size: 0.9rem; line-height: 1.65;
	scrollbar-width: thin; scrollbar-color: var(--lg-gold) transparent;
}
.lg-leht-modal__sisu::-webkit-scrollbar { width: 7px; }
.lg-leht-modal__sisu::-webkit-scrollbar-thumb { background: var(--lg-gold); border-radius: 4px; }
.lg-leht-modal__sisu::-webkit-scrollbar-track { background: transparent; }
.lg-leht-modal__sisu h2, .lg-leht-modal__sisu h3 { font-size: 1rem; margin: 18px 0 6px; }
.lg-leht-modal__sisu h2:first-child, .lg-leht-modal__sisu h3:first-child { margin-top: 0; }
.lg-leht-modal__jalus {
	display: flex; gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--lg-line);
}
.lg-leht-modal__jalus .lg-btn { flex: 1; justify-content: center; }
body.lg-modal-lahti { overflow: hidden; }
@media (max-width: 640px) {
	.lg-leht-modal__kaart {
		width: calc(100% - 16px);
		max-height: calc(100dvh - 16px);
		margin: 8px auto 0;
	}
}

/* Kassa pealkirjarida: pealkiri vasakul, tagasi-nupp paremal serval. */
.lg-page-head--reaga { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-kassa__tagasi { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 0.88rem; }

/* Jalus nupu all: ainult pisike juriidiline rida. Woo ujutab nupu
   paremale — clear toob jaluse nupu alla; vahe käib paddinguga, mida
   float-kontekst õgida ei saa. */
.lg-kassa__jalus { clear: both; margin: 0; padding-top: 12px; }
.lg-kassa__oigus { margin: 6px 0 0; text-align: center; font-size: 0.7rem; color: #b5ad9c; }
.lg-kassa__oigus a { color: inherit; }

/* Woo paneb place-order reale 1em polstri — ilma selleta on nupp
   sama lai kui ülemised plokid (Kokku plaat, nõusolekuread). */
form.lg-kassa #payment .form-row.place-order { padding: 0; margin: 0; }
.lg-kassa #place_order {
	width: 100%; margin-top: 16px;
	background: var(--lg-gold); color: var(--lg-ink);
	border: 1.5px solid transparent; border-radius: var(--lg-radius);
	padding: 14px 26px; font-size: 1rem; font-weight: 600; cursor: pointer;
	transition: transform var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.lg-kassa #place_order:hover { background: var(--lg-gold-hover); transform: translateY(-1px); }

@media (max-width: 859px) {
	form.checkout.lg-kassa { grid-template-columns: 1fr; gap: 26px; }
	.lg-kassa__vorm { position: static; }
}

/* ==========================================================================
   WOOCOMMERCE
   ========================================================================== */

/* Ülavahe tuleb samast muutujast, mis `.lg-tee` — tooteleht kannab leivapuru
   otse selle mähise sees, ilma `.lg-tee`-ta, ja peab ikka teistega ühel joonel
   olema. Mõõdetud enne: tooteleht 28,00, kõik muud lehed 16,00. */
.lg-shop { padding-block: var(--lg-tee-vahe) 72px; }

/* VAHE TULEB KONTEINERILT, MITTE LEIVAPURULT. Oma 24 px ülapolstriga liitus
   ta konteineri omaga ja tootelehel algas leivapuru mõõdetult 72 px päise alt,
   samal ajal kui kõik muud lehed algavad 28-lt. Alumine vahe jääb: tema järel
   tuleb sisu, mitte järgmine polster. */
.lg-breadcrumb { padding-block: 0 var(--lg-tee-vahe); font-size: 0.9rem; color: var(--lg-ink-muted); }
/* ÜKS RIDA, ALATI — muidu ei ole pealkiri samal kõrgusel.
   Mõõdetud 485 px juures: kolmelüliline tee murdus kahele reale kahel
   kursuselehel („5-päevane väljakutse …", DEMO) ja lükkas nende pealkirja
   59,77-lt 83,53 peale. Kõik ülejäänud lehed olid 59,77 — seega vahe ei
   tulnud kujundusest, vaid sellest, kui pikk on ühe kursuse nimi.

   KÄRBUB VIIMANE LÜLI, MITTE LINGID. Viimane lüli on koht, kus sa juba oled,
   ja tema täisnimi seisab kohe all pealkirjas — teda on ohutum lõigata kui
   ülemisi linke, mis on ainus, mille pärast leivapuru üldse olemas on.
   `min-width: 0` on `flex`-lapsel kohustuslik: ilma temata ei lühene ta
   allapoole oma sisu laiust ja `text-overflow` ei tee midagi. */
.lg-breadcrumb { display: flex; align-items: baseline; white-space: nowrap; }
.lg-breadcrumb > [aria-current] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lg-breadcrumb > a { flex: none; }
/* Leivapuru mähis lehtedel kannab sama 28 px ülavahet, mis mujal — ja
   VÕTAB SELLE ÜLE lehepäiselt: kaks polstrit üksteise järel liidaksid end
   kokku ja pealkiri vajuks veel allapoole, mitte ülespoole. */
/* 28 -> 16 (omanik 14.08.2026: „breadcrumpsi ja headeri vahel on liiga suur
   vahe, vähenda"). 28 tuli projekti rütmist — sama arv, mis lehepäisel ja poe
   jaotisel — aga leivapuru EI OLE lehe sisu, vaid päise järg: ta ütleb, kus sa
   oled, mitte mida sa loed. Nii tihedamalt seotuna loeb ta end päise juurde,
   nagu ta sisuliselt kuulubki.

   Arv on ainult siin: kõik, mis leivapuru järel tuleb, saab oma ülavahe
   nulliks (`.lg-tee + …` allpool), seega pealkirja kõrgus liigub tervel saidil
   koos selle reaga — mõõdetult 59,77 -> 47,77 px päise alt. */
.lg-tee { padding-top: var(--lg-tee-vahe); }
/* ÜLAVAHE ON ÜKS, MITTE KAKS — ükskõik mis leivapuru järel tuleb.
   Omanik 14.08.2026: „bredcrumps ja lehe pealkiri oleks kõigil avalikel
   lehtedel samal kõrgusel pealkirja ja headeri suhtes."

   Mõõdetud enne: leivapuru seisis kõikjal õigesti 28,00 px päise all, aga
   pealkiri oli KUUES eri kohas — 0,00 · 28,00 · 59,77 · 68,00 · 84,00 ·
   87,77. Osa sellest on mallides (vt page.php, index.php, 404.php,
   inc/pood.php), aga kaks juhtu on siin: iga plokk, mis kannab oma 28 px
   ülavahet, liidab selle leivapuru omale.

   Siht on 28 (leivapuru ülavahe) + 31,77 (leivapuru rida koos oma 8 px
   alavahega) = 59,77. See ei ole uus arv — nii seisab pealkiri juba seitsmel
   lehel. Allolev nimekiri kasvab iga uue plokiga, mis leivapuru järele tuleb;
   ta on TEADLIKULT ühes reas, sest laiali unustatakse ta ära (sama lugu, mis
   `li + li` nullimisega selles failis). */
.lg-tee + .lg-page-head,
.lg-tee + .lg-entry,
.lg-tee + .lg-layout,
.lg-tee + .lg-pood__osa,
.lg-page-head + .lg-layout,
.lg-page-head + .lg-404 { padding-top: 0; }
/* Kursuse müügileht kannab oma ülavahet LAPSEL, mitte iseendal
   (`.lg-kursus__sisu { padding: 40px … }`), seega ta ei mahu ülemisse ritta.
   Sama töö, teine kuju. */
.lg-tee + .lg-kursus > .lg-kursus__sisu { padding-top: 0; }
.lg-breadcrumb a { color: var(--lg-ink-muted); }
.lg-breadcrumb__sep { margin: 0 6px; opacity: 0.6; }

.lg-shop__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-bottom: 32px; padding-bottom: 20px;
	border-bottom: 1px solid var(--lg-rule);
}
.lg-shop__bar .woocommerce-result-count { margin: 0; color: var(--lg-ink-soft); font-size: 0.95rem; }
.lg-shop__bar .woocommerce-ordering { margin: 0; }
.lg-shop__bar select { width: auto; min-width: 200px; }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 32px 24px;
	margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--lg-radius-card);
	margin-bottom: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.02rem !important;
	font-weight: 600;
	line-height: 1.35;
	padding: 0 !important;
	margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
	display: block;
	margin-bottom: 14px;
	color: var(--lg-ink) !important;
	font-size: 1rem;
	font-weight: 600;
}
.woocommerce ul.products li.product .price del { opacity: 0.5; font-weight: 400; }
.woocommerce ul.products li.product .button { margin: 0; }
.woocommerce span.onsale {
	background: var(--lg-ink);
	color: #fff;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	padding: 4px 12px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	top: 10px; left: 10px; right: auto;
	margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOOTE DETAILVAADE — raamatupoe muster (kavand kavandid/toote-vaade-prototuup.html)

   MÕÕDETUD ENNE (päris leht, Töölehtede kogumik 1. osa, 22 €, 5 pilti):
   · OSTUNUPP 968 px lehe algusest lauaarvutis, 1853 px mobiilis;
   · leht 2611 px / mobiilis 4504 px;
   · H1 kolmel real, 158,39 px;
   · lühikirjeldus 109 sõna (579,27 px) seisab hinna ja nupu VAHEL;
   · sakid „Kirjeldus" ja „Arvustused (0)", arvustusi ei ole ühtegi.

   KOLM TSOONI, MITTE KAKS (omanik 13.08.2026: „kasuta parimaid praktikaid
   e-poodidelt, kes müüvad raamatuid"). Raamatupoed on ühes asjas ühte meelt
   ja see ei ole juhus:

     KAAS vasakul — kitsas, sest raamatu kaas on püstformaadis ja tema töö on
     lasta ennast ära tunda, mitte lugeda;
     SISU keskel — pealkiri, lühiandmed, kirjeldus ja tehniline tabel ühes
     lugemisveerus;
     OSTUKAST paremal — kitsas, kleepuv, ainult ostuotsuse asjad: hind,
     saadavus, tarne, nupp.

   Kahene paigutus, mida ma eelmises versioonis proovisin, ajas ostukasti
   686 px laiaks — see ei ole ostukast, vaid riba. Kolmene hoiab iga tsooni
   oma laiuses ja täidab konteineri jäägita.
   ══════════════════════════════════════════════════════════════════════════ */

/* KLASSI NIMI ON `t-vore`, MITTE `t-raam` (14.08.2026). `.t-raam` oli juba
   võetud — õpetaja töölaua tabeliraam (koolitused/assets/css/opetaja.css,
   13.08.2026) —, ja teema CSS laaditakse IGAL lehel, ka plugina vaadetes.
   Seega see reegel muutis töölaua tabeliraami kolmeveeruliseks võreks ja
   tabel kukkus esimesse 320 px veergu: mõõdetult 342 px tabel 1240 px raami
   sees. Teema klassinimi on praktikas globaalne nimi; plugina oma ei ole. */
.t-vore {
	display: grid; align-items: start;
	/* 320 + 32 + 448 + 32 + 268 = 1100. Keskveerg 448 px on ~58 märki real —
	   lugemisrida, mitte tabel. Ostukast 268 on raamatupoe oma mõõt: ta peab
	   mahtuma silma alla koos hinna ja nupuga, mitte kandma teksti. */
	grid-template-columns: 320px minmax(0, 1fr) 268px;
	/* LAIUS TULEB KONTEINERIST, mitte omaenda laest (omanik 14.08.2026: „vaata
	   et kogu sisu kõikjal läheb laiemaks"). Vahepeal seisis siin
	   `max-width: 1100px`, et keskveerg jääks kavandi 448 peale; 1280 px
	   konteineris annab `1fr` talle 588 px ehk ~76 märki real. See on
	   lugemisrea ülemine ots, mitte üle selle — 1400 juures oleks olnud 708 px
	   ja ~92 märki, ja SEE oli liiga palju. Kaas ja ostukast jäävad oma
	   mõõtu: kaas 320 (A4 suhe) ja ostukast 268 (mahub silma alla koos hinna
	   ja nupuga) — laiemaks minnes ei ütleks kumbki midagi rohkem. */
	gap: 0 32px;
	/* ÜLAVAHE TULEB LEIVAPURULT, mitte siit (omanik 14.08.2026: „üleval peab
	   olema vahe täpselt sama mis on bredcrumpi ja lehe nimetuse vahel,
	   kõikjal"). Siin seisis `margin-top: 22px` ja ta liitus leivapuru enda
	   8 px alavahega: mõõdetult 30 px alla, 8 px üles. Nüüd on mõlemad 8 —
	   sama arv, mis igal teisel lehel, ja ta tuleb `--lg-tee-vahe`-st. */
}
/* Selgesõnaline paigutus, mitte allika järjekord — nii saab pealkiri võtta
   terve laiuse ja mobiilis saab plokid ostujärjekorda seada.

   PEALKIRI ON OMA REAL, ÜLE KOLME VEERU (omanik 14.08.2026: „toote detailis
   viime pealkirja nagu kõigil teistel lehtedel on, ühtlusta"). Enne seisis ta
   keskveerus koos kirjeldusega ja algas mõõdetult 76,77 px päise alt, kui
   kõigil teistel lehtedel algab pealkiri 39,77 pealt — kaanepilt ja ostukast
   olid temast KÕRGEMAL. Nüüd on järjekord sama, mis igal muul lehel: tee,
   pealkiri, siis sisu. */
.t-pea  { grid-column: 1 / -1; grid-row: 1; }
.t-kaas { grid-column: 1; grid-row: 3; }
.t-info { grid-column: 2; grid-row: 3; }
.t-ost  { grid-column: 3; grid-row: 3; }

/* ── KAAS ─────────────────────────────────────────────────────────────────
   RAAM ON A4, sest pildid on A4. Mõõdetud kõik neli toodet:
     galeriilehed (8 tk)  463–470 × 656–660  suhe 0,706–0,713 → A4 püsti 0–1%
     kaanefotod   (3 tk)  1686 × 2528        suhe 0,667       → 6% kitsam
     PDF-toote kaas       1754 × 1240        suhe 1,415       → A4 PIKALI
   A4 püsti on 210/297 = 0,707; raam saab täpselt selle kuju ja leht täidab
   ta jäägita.

   `--lg-a4` on MUUTUJA, sest sama suhe on korraga raamil ja pisipiltidel;
   kahes kohas kirjutatud „210 / 297" läheks esimese puudutuse juures lahku.

   `contain`, MITTE `cover`: kaanefoto on 6% kitsam ja PDF-toote kaas hoopis
   pikali — `cover` kärbiks neilt tüki maha. */
:root { --lg-a4: 210 / 297; }
.t-kaas__pea {
	display: block; margin: 0;
	aspect-ratio: var(--lg-a4);
	background: var(--lg-sand); border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card); overflow: hidden;
}
.t-kaas__pea img {
	display: block; width: 100%; height: 100%; object-fit: contain;
	background: var(--lg-sand);
}
/* ── PISIPILDID ───────────────────────────────────────────────────────────
   ALLIKAS ON LÕIKAMATA MÕÕT. Teostus küsis `thumbnail`-i, mis on WordPressis
   RUUDU KUJULINE KÕVA LÕIGE (150×150). A4-pesas jäi sellest alles 70,7% —
   mõõdetud: iga pisipilt kaotas ülevalt ja alt 14,9 px, kokku 29,3% lehest.
   Töölehe pisipilt näitas keskmist kolmandikku ja pealkiri jäi välja.

   `medium` on sama pildi LÕIKAMATA variant (210×300, mõõdetud). Tema suhe on
   0,700 ja pesa 0,707 — kärbet jääb 1%, mis on serva ümardus, mitte sisu. */
.t-kaas__read {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	margin: 8px 0 0; list-style: none; padding: 0;
}
/* BAASTÜPOGRAAFIA VAHE MAHA (omanik 13.08.2026: „kõrgustes on jõnks sees").
   `style.css` rida 162 annab `li + li { margin-top: 0.35em }` — see on õige
   tekstiloendis ja vale ruudustikus. Mõõdetud tagajärg: esimene pisipilt
   seisis 646,64 juures ja ülejäänud kolm 652,52 — 5,88 px madalamal, sest
   ruudustiku element kaotab marginali jagu kõrgust ja nihkub alla.

   Teema TEAB seda lõksu ja on ta kolmele loendile juba nullinud (rida 1141,
   kommentaar „Baastüpograafia li + li vahe nihutaks ruudustikukaarte — vahed
   annab gap"). See on neljas; teostuses käib ta samasse ritta, mitte omaette
   reeglina. */
.t-kaas__read > li + li { margin-top: 0; }
.t-kaas__pisi {
	display: block; position: relative;
	border: 1px solid var(--lg-line); border-radius: 8px;
	overflow: hidden; background: var(--lg-sand); cursor: pointer;
	transition: border-color .12s, box-shadow .12s, transform .12s;
}
.t-kaas__pisi img { display: block; width: 100%; aspect-ratio: var(--lg-a4); object-fit: cover; }
.t-kaas__pisi:hover { border-color: var(--lg-rule); transform: translateY(-1px); }
/* VALITUD PISIPILT: RING KÄIB SISSE, MITTE VÄLJA (omanik 13.08.2026: „see osa
   natuke häirib").

   Esimene katse andis valitule välise rõnga (`box-shadow: 0 0 0 2px #fff,
   0 0 0 4px gold`). Rõngas ei võta paigutuses ruumi, aga ta JOONISTUB kastist
   välja — ja mõõt näitas, mida see maksab:

     · valitud pisipilt algas 162,50, sama joon mis kaanel ja andmekaardil,
       aga rõngas läks 4 px sellest veel VASAKULE ja astus veerust välja;
     · vahe 1↔2 oli 8 px, millest rõngas sõi 4 → nähtavalt 4 px, samal ajal
       kui 2↔3 ja 3↔4 jäid 8 px. Rida luges ebaühtlase rütmiga.

   Sissepoole joonistatud ring ei puuduta kumbagi: kast jääb 74 px, vasak
   serv joonele ja vahed võrdseks. `::after`, sest `box-shadow: inset` läheks
   pildi ALLA — pilt katab kasti tervenisti. */
.t-kaas__pisi::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	pointer-events: none; transition: box-shadow .12s;
}
.t-kaas__pisi--on {
	border-color: var(--lg-gold);
	box-shadow: none;
	transform: none;
}
/* Kuld servas, valge tema ja pildi vahel: ainult kuld kadus heleda lehe peal
   ära, sest leht ise on valge. Esimene vari on PEAL, seega kuld kirjutatakse
   valge peale ja alles jääb 2 px kulda + 1 px valget. */
.t-kaas__pisi--on::after {
	box-shadow: inset 0 0 0 2px var(--lg-gold), inset 0 0 0 3px var(--lg-white, #fff);
}
.t-kaas__pisi:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 3px; }

/* ── SUURENDAMINE ─────────────────────────────────────────────────────────
   KLÕPS PILDIL AVAB SUURENDUSE. Praegu klõps peapildil ei tee midagi: Woo oma
   photoswipe on välja lülitatud (ta maksis mõõdetult 27 kB JS + 3,5 kB CSS
   galerii eest, mida me ei kasuta) ja asemele ei tulnud midagi.

   Töölehe ostja tahab ENNE OSTU LUGEDA, mis lehel kirjas on. 318 px lai A4
   on ~40 DPI — sealt ei loe midagi. Suurendus on selle toote juures ostuargument,
   mitte ilu.

   NUPP ON LISAKS KLÕPSULE, mitte selle asemel: klõps pildil on ootuspärane,
   aga nähtamatu. Luup nurgas ütleb, et see leht seda oskab. */
.t-kaas__pea { position: relative; cursor: zoom-in; }
.t-kaas__lupp {
	position: absolute; right: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px; border: 1px solid var(--lg-line); border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	font-size: 0.76rem; font-weight: 700; color: var(--lg-ink-soft);
	box-shadow: 0 1px 6px rgba(4, 25, 44, .12);
}
.t-kaas__lupp svg { flex: none; width: 14px; height: 14px; color: var(--lg-gold-icon); }
/* Loendur ütleb, kui palju veel on — ilma temata ei tea ostja, kas neli
   pisipilti on kõik või algus. */
.t-kaas__arv {
	position: absolute; left: 10px; bottom: 10px;
	padding: 4px 9px; border-radius: 999px;
	background: rgba(4, 25, 44, .72); color: #fff;
	font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── SUURENDUSE KIHT ──────────────────────────────────────────────────────
   OMA KIHT, MITTE TEEK. Photoswipe koos UI ja kahe CSS-iga oli 31 kB; siin
   on vaja katet, pilti, kahte noolt ja loendurit.

   `dialog` EI OLE kasutusel: teema toetab brausereid, kus `showModal()`
   fookuslõks käitub erinevalt, ja meil on juba oma modal (`.lg-modal`,
   nädalate valik). Kiht järgib sama mustrit. */
.t-suur {
	position: fixed; inset: 0; z-index: 400;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(4, 25, 44, .86);
}
.t-suur[hidden] { display: none; }
.t-suur__pilt {
	max-width: min(92vw, 1100px); max-height: 88vh;
	width: auto; height: auto; object-fit: contain;
	border-radius: 6px; background: var(--lg-sand);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.t-suur__nupp {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center;
	width: 48px; height: 48px; border-radius: 50%;
	border: 0; background: rgba(255, 255, 255, .92); color: var(--lg-ink);
	cursor: pointer;
}
.t-suur__nupp:hover { background: #fff; }
.t-suur__nupp--eelmine { left: 16px; }
.t-suur__nupp--jargmine { right: 16px; }
.t-suur__sulge {
	position: absolute; top: 16px; right: 16px;
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 0; background: rgba(255, 255, 255, .92); color: var(--lg-ink);
	cursor: pointer;
}
.t-suur__arv {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); color: var(--lg-ink);
	font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
	/* Puutel ei ole hõljumist ega täpset sihtimist: nooled lähevad alla ritta,
	   kus pöial on. 48 px on juba puutesihiku mõõt. */
	.t-suur__nupp { top: auto; bottom: 18px; transform: none; }
	.t-suur__nupp--eelmine { left: 18px; }
	.t-suur__nupp--jargmine { right: 18px; }
	.t-suur__arv { bottom: 30px; }
	.t-suur__pilt { max-height: 76vh; }
}

/* ── PEA JA FAKTIRIBA ─────────────────────────────────────────────────────
   Teostab kinnitatud kavandi kavandid/toote-vaade-prototuup.html (viies voor
   14.08.2026). Kavandis on kirjas neli katset, mis enne läbi kukkusid, ja iga
   mõõt; siin on ainult see, mida CSS teadma peab.

   PEALKIRI ON SAMA MÕÕTU, MIS IGAL TEISEL LEHEL (omanik 14.08.2026: „kas
   pealkirja suurus ei peaks olema sama mis muudel lehtede pealkirjad").
   Mõõdetud kolm eri mõõtu ühel saidil: lehed 34,20 px / kaal 600, TOOTELEHT
   27,20 / 800, kursuse müügileht 48,00 / 600. Tooteleht oli väiksem JA
   paksem — kaks erinevust korraga, kumbki kirjutamata. 27,2 sündis siis, kui
   pealkiri elas 448 px keskveerus; nüüd on ta 1240 px lai ja see põhjus on
   ära. Arv on `.lg-page-title` oma, mitte uuesti kirjutatud. */
.t-pea { margin-bottom: 0; }
.t-pea__nimi {
	/* 10 px, mitte 0,6em (mõõdetult 20,03): riba ei ole järgmine PLOKK, vaid
	   pealkirja järelrida (omanik: „liiguta natuke pealkirjale lähemale"). */
	margin: 0 0 10px;
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
	color: var(--lg-ink);
}

/* FAKTIRIBA — PALJAS RIDA, MITTE PLOKK.
   Neli katset, iga kord omaniku vastusega:
     1. liik + 3 fakti sisuveerus, kirjelduse peal   „see plokk on kuidagi laiali"
     2. kõik andmed paneeliks kaane all              „pane pealkirja alla, enne pilte ja sisu"
     3. 7 lahtrit, sildid, kreemjas kast raamiga     „tagasihoidlikumaks, tuleb liialt esile"
     4. 5 kirjet, ainult ikoonid, kaks juuksekarva   „ülemine ja alumine joon ära"

   Riba kõrgus käis nende vooruga 90,5 -> 43,3 -> 19,3 px. Lõplik kuju ei ole
   plokk, mida märgatakse, vaid rida, mida loetakse.

   SILTE EI OLE, seega sõnastuse kannab VÄÄRTUS ISE („113 lehekülge", mitte
   „113") ja ta tuleb Woo atribuudist, mitte koodist — vt
   `lenguamar_toote_luhiandmed()`.

   IKOON ON TUHMIM KUI TEKST. Kuldne oli kolmandas voorus liiga tugev: ikooni
   töö on kirjeid teineteisest eristada, mitte rida kirjuks teha. */
.t-fakt {
	grid-column: 1 / -1; grid-row: 2;
	list-style: none; margin: 0 0 26px; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px 26px;
}
.t-fakt__kirje {
	display: flex; align-items: center; gap: 8px;
	margin: 0;
	font-size: 0.86rem; line-height: 1.4;
	color: var(--lg-ink-soft);
}
.t-fakt__kirje svg {
	flex: none; width: 15px; height: 15px;
	color: var(--lg-ink-muted); opacity: 0.75;
}

/* ── SISUVEERG ────────────────────────────────────────────────────────────
   SAKKE EI OLE. Neid oli kaks — „Kirjeldus" ja „Arvustused (0)" — ja
   arvustusi ei ole saidil ühtegi. Ühe sisuga sakiriba on lüliti, millel on
   üks asend: ta nõuab klõpsu, et näidata seda, mis oleks võinud niigi
   seista. Arvustuste vorm kutsub hinnangut tootele, mida keegi ei ole
   hinnanud. */
.t-osa + .t-osa { margin-top: 30px; }
.t-osa__pealkiri { margin: 0 0 12px; font-size: 1.1rem; font-weight: 800; color: var(--lg-ink); }
.t-osa__sisu { line-height: 1.75; color: var(--lg-ink-soft); }
.t-osa__sisu > :first-child { margin-top: 0; }
.t-osa__sisu ul { margin: 12px 0; padding-left: 20px; }
.t-osa__sisu li { margin: 6px 0; }
.t-osa__sisu strong { color: var(--lg-ink); }

/* ── TEHNILINE TABEL ──────────────────────────────────────────────────────
   RAAMATUPOE KOHUSTUSLIK OSA. Kõik nad kannavad sedasama: formaat, maht,
   köide, keel, kirjastaja. Meil seisavad needsamad asjad praegu proosas
   („A4 formaadis 113 lehekülge materjali…") ja osa neist ei ole üldse kirjas.

   MÕÕDETUD: ühelgi neljal tootel EI OLE ühtegi Woo atribuuti, SKU-d ega
   mõõtu. Tabel on koht, mis need välja nõuab — ja siis on nad andmed, mitte
   lause. */
/* TABEL ON KAANE ALL, mitte sisuveerus (omanik 13.08.2026: „Tehnilised andmed
   tõsta pildi ploki alla").

   See on ka raamatupoe oma koht: andmed kuuluvad eseme juurde, mitte
   müügiteksti sisse. Kaanetsoon on 320 px ja lõpeb pisipiltidega — tema all
   on täpselt see tühi ruum, mille A4 kaas kõrvale jätab.

   KITSAS VEERG NÕUAB TEIST KUJU. 448 px juures mahtus nimi ja väärtus
   kõrvuti; 320 px juures ei mahu („Katmata, sobib pliiatsi ja pastakaga" on
   üksi 200 px). Nimi läheb väärtuse PEALE, väiksemas kirjas — sama muster,
   mis kassa kokkuvõttes. */
/* ── TEHNILISED ANDMED ───────────────────────────────────────────────────
   ASUKOHT ON ÕIGE, KUJU EI OLNUD (omanik 13.08.2026). Esimene katse pani
   nime väärtuse PEALE ja iga rida sai kaks rida kirja — mõõdetud plokk oli
   419,36 px kuue fakti kohta, ehk 70 px rea kohta. See ei ole tabel, vaid
   vorm: kitsas veerg täitus ära ja andmed lugesid aeglasemalt kui müügitekst
   nende kõrval.

   Nüüd on nad ÜHEL REAL: nimi vasakul vaikselt, väärtus paremal rasvaselt.
   Ruudustik hoiab kaks tulpa joonel ka siis, kui väärtus murdub kahele reale
   („Katmata, sobib pliiatsi ja pastakaga"). Kaart annab neile piiri — sama
   kuju, mis ostukastil, sest mõlemad on andmed, mitte jutt. */
.t-spec {
	margin-top: 22px; padding: 16px 18px;
	border: 1px solid var(--lg-line); border-radius: var(--lg-radius-card);
	background: var(--lg-white, #fff);
}
.t-spec__pealkiri {
	margin: 0 0 10px; font-size: 0.72rem; font-weight: 800;
	letter-spacing: 0.07em; text-transform: uppercase; color: var(--lg-ink-muted);
}
.t-spec__loend { list-style: none; margin: 0; padding: 0; }
.t-spec__loend > li {
	display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px;
	align-items: baseline;
	padding: 7px 0; border-top: 1px solid var(--lg-line-soft);
}
.t-spec__loend > li:first-child { border-top: 0; padding-top: 0; }
.t-spec__nimi { font-size: 0.78rem; color: var(--lg-ink-muted); }
.t-spec__vaartus { font-size: 0.86rem; font-weight: 600; color: var(--lg-ink); }

/* ── OSTUKAST ─────────────────────────────────────────────────────────────
   Kleepuv valem on SAMA, mis projekti neljal muul kleepuval elemendil — vt
   opriba.css „Kleepuvad külgribad nihkuvad riba võrra alla". Kuju on sama,
   mis kursuse müügilehe `.lg-kursus__kast`: pood ei tohi kahte eri ostukasti
   kanda. */
.t-ost {
	position: sticky; top: calc(var(--lg-head-h, 64px) + var(--lg-riba-h, 0px) + 20px);
	padding: 20px;
	background: var(--lg-white, #fff);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
.t-ost__hind {
	display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
	margin: 0 0 4px;
	font-size: 1.8rem; font-weight: 800; color: var(--lg-ink);
}
/* `<s>` JA `<del>` MÕLEMAD. Teema oma hinnaesitus
   (`lenguamar_toote_hind_html()`) annab `<s>`, Woo oma `<del>` — ja ainult
   `del` reegel jättis vana hinna mõõdetult 28,8 px suuruseks, sama suureks
   kui uus. Kaks hinda ühes suuruses ei ütle, kumb kehtib. */
.t-ost__hind del,
.t-ost__hind s { font-size: 0.95rem; font-weight: 400; color: var(--lg-ink-muted); }
/* ── SOODUSHIND ──────────────────────────────────────────────────────────
   WOO ANNAB `<del>` JA `<ins>`, ja `<ins>` on brauseris ALLA JOONITUD.
   Mõõdetud tootel 730: uus hind 28,8 px, kaal 800 ja `text-decoration:
   underline` — 97,67 px pikk joon suurima teksti all kogu kastis. Keegi ei
   ole seda valinud; see on `<ins>` elemendi vaikimisi kuju.

   SÄÄST ON EURODES, MITTE PROTSENTIDES: 15% nõuab peast arvutamist, „−7 €"
   mitte. Sama valik on poe kaardil juba tehtud
   (`lenguamar_toote_hind_html()`), seega pood ja tooteleht ütlevad soodust
   ühtemoodi.

   VANA HIND EI OLE PUNANE: punane tähendab sellel saidil viga (vormiväljad,
   „Sisu ei ole" õpetaja töölaual). Läbikriipsutus ütleb sama asja ilma
   häirekellata. */
.t-ost__hind ins { text-decoration: none; }
/* SÄÄSTUKIIP TULEB POE OMA KLASSIST (`.lg-pood__saast`), sest hinna paneb
   kokku `lenguamar_toote_hind_html()` — seesama funktsioon, mida kasutavad poe
   kaardid. Ostukastis on ta suurema hinna kõrval ja vajab kuldset tausta:
   kaardi kreemjas toon (mõõdetud rgb(254,248,236)) kadus 28,8 px numbrite
   kõrval ära. */
.t-ost__hind .lg-pood__saast {
	padding: 3px 10px; border-radius: 999px;
	background: var(--lg-gold); color: var(--lg-ink);
	font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em;
	white-space: nowrap;
}

/* KÄIBEMAKSU RIDA ON ÄRA (omanik 13.08.2026: „seda ei ole"). Woo maksuarvestus
   on välja lülitatud (`woocommerce_calc_taxes = no`, mõõdetud), seega lause
   rääkis maksust, mida pood ei arvesta. Teostuses oli ta juba
   `wc_tax_enabled()` taga ja päris lehel ei ilmunudki — kavand näitas teda
   ekslikult. */
/* SAADAVUS ON RAAMATUPOE ESIMENE ASI HINNA JÄREL — „kas ma saan selle kätte"
   otsustab ostu sama palju kui hind. Andmed on olemas
   (`$toode->get_stock_status()`), aga täna ei näita neid keegi. */
.t-ost__seis {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 14px; font-size: 0.88rem; font-weight: 600; color: var(--lg-ink);
}
.t-ost__tuli { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3f8f5c; }
/* ── KOGUS NUPPUDEGA ──────────────────────────────────────────────────────
   OLEMASOLEV KOMPONENT, MITTE UUS (omanik 13.08.2026: „toote kogust peab
   saama lisada nupudest"). Ostukorvi lehel on stepper juba olemas —
   `.lg-korv__stepper` (style.css) ja tema klõpsukuular `korv.js`-is. Sama
   toode peab korvis ja tootelehel ühtemoodi välja nägema, seega tuleb siia
   seesama klass, mitte teine samasugune.

   Paljas `input[type=number]` jäi kahel põhjusel maha: brauseri omad nooled
   on ~10 px kõrged (puutesihikuks kõlbmatud) ja mobiilis neid ei ole üldse. */
/* STEPPER OMAL REAL, NUPP TÄISLAIUSES. Kõrvuti mahtus mõõdetult stepper
   108,20 ja nupp 107,80 px — 226 px kastis jagasid nad ruumi pooleks ja
   esmane tegu ei olnud enam suurim asi kastis. Ostukast on 268 px lai; siin
   ei ole kõrvuti ruumi kahele. */
.t-ost__rida { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.t-ost__rida .t-ost__nupp { width: 100%; }
.t-ost__rida .lg-korv__stepper { background: var(--lg-white, #fff); }
.t-ost__rida .lg-korv__stepper button { padding: 0 12px; min-height: 44px; line-height: 1; }
.t-ost__rida .lg-korv__stepper input { width: 2.6em; font-size: 0.95rem; }
/* KULDNE NUPP. Praegu on tootelehe „Lisa korvi" tume ja poe kaartidel kuldne
   — kaks värvi ühe ja sama teo jaoks kahel lehel. */
.t-ost__nupp { width: 100%; justify-content: center; padding: 12px 14px; font-size: 0.92rem; }
.t-ost__read {
	list-style: none; margin: 16px 0 0; padding: 16px 0 0;
	border-top: 1px solid var(--lg-line); display: grid; gap: 10px;
}
.t-ost__info { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; line-height: 1.45; color: var(--lg-ink-muted); }
.t-ost__info svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--lg-gold-icon); }
.t-ost__info b { color: var(--lg-ink-soft); font-weight: 700; }
/* ── VEDAJA SÕNAMÄRK NIME ASEMEL ──────────────────────────────────────────
   Omanik 14.08.2026: „paneks SmartPosti teksti asemele logo, et logo oleks
   suuremalt näha, hetkel on liiga väike."

   ÕIGE FAIL, MITTE SUUREM MÕÕT. Montoniol on kaks: `smartpost-rect.svg`
   (64×40) on logo KASTIS — hele ümarnurkne plaat, mille sees sõnamärk hõivab
   `getBBox()` järgi 22,2% kõrgusest, ehk 18 px pesas 4,0 px tähti. Paljas
   `smartposti.svg` (433,89×95,28) on 88,5% tinti: sama 18 px pesa annab
   15,9 px. Kolm korda suurem märk, null pikslit lisa rea kõrgusesse.
   Fail elab teemas (`assets/img/`), põhjus on `inc/woo/tarne.php`-s.

   18 px ON LAGI. Suhe on 4,55, seega iga kõrguse piksel maksab 4,55 px
   laiust; 226 px reasisus murdub lause 20 px juures kaheks (mõõdetud 40,00 px
   vs 18,69) ja tarnest saaks ostukasti suurim asi — aga tarne ei ole
   ostuotsus.

   `display: inline-block` on kohustuslik: teema oma `img { display: block }`
   murrab rea pildi mõlemalt poolt. Mõõt andis reale 54,09 px seal, kus
   naabrid on 18,55 — ja süüdi ei olnud tekst, vaid pildi kuju: logota mahtus
   sama lause ühele reale.

   KAKS KLASSI, MITTE ÜKS: Woo `.woocommerce img { height: auto }` on (0,1,1)
   ja lööb paljast `.t-ost__logo` (0,1,0) maha ka siis, kui see rida on failis
   viimane. Sama lõks mis WPFormsiga.

   `-0.38em` EI OLE SILMA JÄRGI: sõnamärgi alusjoon on `getBBox()` järgi 69,5
   ehk 72,9% kõrgusest („p" saba läheb 89,8-ni). Vaikimisi istub asendatud
   elemendi ALUMINE SERV alusjoonel, mis tõstaks märgi 4,87 px liiga kõrgele.
   Mõõt pärast: teksti alusjoon 401,28, sõnamärgi oma 401,26. */
.t-ost__info .t-ost__logo {
	display: inline-block; vertical-align: -0.38em;
	height: 18px; width: auto;
}

/* SEOTUD TOOTEID EI OLE (omanik 14.08.2026: „võta toote detailist ära ka plokk
   — Teised õppematerjalid"). Siin seisid `.t-teised` reeglid; plokk ise on
   mallist maas, seega ka nemad.

   ÜKS MÕÕDETUD LEID JÄÄB KIRJA, sest ta kehtib igal pool, kus kaanepilti
   näidatakse: seotud toodete pildil oli kord kõrguse lagi (190 px, mobiilis
   150) ja `object-fit: contain` liivakarval taustal. Lagi lahendas ühe hätta
   — 500 px vaates oli iga kaanepilt 411 × 577 ja kolm kaarti 2321 px — aga
   tekitas teise: lauaarvutis paistis taust 41,2% ulatuses (46,5 px kummalgi
   küljel) ja mobiilis 74,5% (153 px). Pilt ei vaja raami, mille sisse ta ei
   mahu; mobiili hädale on õige ravim KITSAM VEERG, mitte madalam pesa. */

@media (max-width: 1000px) {
	/* Kolmandat veergu ei ole enam kuhugi panna: ostukast läheb pealkirja alla
	   samasse veergu ja sisu tuleb terve laiuse peale. */
	.t-vore { grid-template-columns: 320px minmax(0, 1fr); }
	.t-pea  { grid-column: 1 / -1; grid-row: 1; }
	.t-kaas { grid-column: 1; grid-row: 3; }
	.t-ost  { grid-column: 2; grid-row: 3; position: static; }
	.t-info { grid-column: 1 / -1; grid-row: 4; margin-top: 30px; }
}

/* VAIKIMISI PEIDUS, ja see rida peab seisma media-query EES. Esimene katse
   kirjutas ta faili lõppu: `.t-riba { display: none }` ja
   `@media … { .t-riba { display: grid } }` on mõlemad (0,1,0), seega otsustas
   järjekord ja riba oli mõõdetult `display: none` ka 500 px juures. */
.t-riba { display: none; }

@media (max-width: 700px) {
	/* Ühes veerus lähevad plokid RAAMATUPOE MOBIILIJÄRJEKORDA: pealkiri, kaas,
	   ost, siis kirjeldus. Nii on ostuotsuse kolm asja — mis see on, mis ta
	   välja näeb, mis ta maksab — esimesel ekraanitäiel, ja tekst tuleb alles
	   siis, kui neid on juba nähtud.

	   `grid-row` ja `grid-column` tuleb nullida, muidu jäävad plokid kahe
	   veeru paigutusse kinni ja kattuvad. */
	.t-vore { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.t-pea, .t-fakt, .t-kaas, .t-info, .t-ost { grid-column: auto; grid-row: auto; }
	/* JÄRJEKORD TULEB `order`-IST, MITTE ALLIKAST. Riba jäi esimeses teostuses
	   ilma ja sai vaikimisi 0 — mõõt näitas teda kavandis PEALKIRJAST KÕRGEMAL,
	   vahe −159,72 px. Tema koht on kohe pealkirja järel. */
	.t-pea  { order: 0; }
	.t-fakt { order: 1; margin-bottom: 0; gap: 8px 18px; }
	/* Mobiilis on pealkiri väiksem, seega ka tema alavahe võib olla väiksem —
	   10 px oleks siin proportsioonis liiga suur. */
	.t-pea__nimi { margin-bottom: 6px; }
	/* Kaas on mobiilis 240 px, mitte 300: A4 teeb 300-st 424 px kõrguse pildi ja
	   mõõdetult lükkas ta ostunupu 996 px allapoole. 240 → 339. */
	.t-kaas { order: 2; width: min(100%, 240px); }
	.t-ost  { order: 3; }
	.t-info { order: 4; margin-top: 0; }
	.t-pea__meta { margin-bottom: 0; }
	.t-pea__nimi { font-size: 1.35rem; }
	/* KAKS VEERGU, MITTE ÜKS. Poe ruudustik on `minmax(230px, 1fr)` ja 445 px
	   juures annab see ühe veeru — kaanepilt 411 px lai ja 587 kõrge. Kaks
	   veergu teevad temast 215 × 307 ja kolm kaarti mahuvad kahte ritta. */
	/* Stepperi nupp on lauaarvutis 33,34 px lai — hiirele piisab, pöidlale
	   mitte. Puutesihiku nõue on 44 px MÕLEMAS mõõdus (TODO.md). */
	.t-ost__rida .lg-korv__stepper button { min-width: 44px; }

	/* KLEEPUV OSTURIBA — see on mobiilikaubanduse oma vastus küsimusele „kus on
	   nupp". Mõõdetud: isegi pärast kaane kahandamist on nupp lehe sees ~800 px
	   allpool, sest pealkiri, pilt ja saadavus tulevad enne. Riba teeb asukoha
	   ebaoluliseks: hind ja nupp on ekraani all servas kogu aeg.

	   PROTOTÜÜBIS ON TA ALATI NÄHTAV. Päris lehel peaks ta ilmuma alles siis,
	   kui ostukast on üles kerinud — see nõuab `IntersectionObserver`-it ja on
	   teostuse, mitte kavandi asi. Ilma JS-ita jääb riba nähtavaks ja leht
	   töötab; sellepärast on ta ka siin nii. */
	.t-riba {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--lg-white, #fff);
		border-top: 1px solid var(--lg-line);
		box-shadow: 0 -4px 16px rgba(4, 25, 44, 0.08);
	}
	.t-riba__hind { font-size: 1.15rem; font-weight: 800; color: var(--lg-ink); }
	.t-riba__nupp { width: 100%; justify-content: center; padding: 12px 14px; min-height: 44px; }
	/* Riba katab lehe alaserva — jalus vajab tema jagu ruumi, muidu jääb
	   viimane rida tema alla. */
	.lg-footer { padding-bottom: 72px; }
}

/* Ostukorv ja kassa ---------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--lg-cream); }
.woocommerce-checkout h3 { font-size: 1.2rem; }

.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px;
	background: var(--lg-ink);
	color: #fff;
	border-radius: var(--lg-radius);
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--lg-ink-hover); color: #fff; transform: translateY(-1px);
}
.woocommerce a.button.wc-forward:not(.checkout-button) {
	background: transparent; color: var(--lg-ink);
	border: 1.5px solid rgba(30, 41, 59, 0.28);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--lg-gold);
	background: var(--lg-cream);
	border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
	color: var(--lg-ink);
}
/* WooCommerce'i konto skript (account-i18n.js) fokuseerib lehe esimese
   mittetühja `[role="alert"]` teate, et ekraanilugeja selle ette loeks, ja
   annab talle selleks `tabindex="-1"`. Chrome joonistab programmiliselt
   fokuseeritud elemendi ümber oma sinise vaikerõnga — see oli see sinine
   kast teate ümber (omaniku teade 10.08.2026).

   Rõngas ei kanna siin infot: `tabindex="-1"` element ei ole Tab-iga
   tabatav, seega klaviatuurikasutaja ei satu sinna kunagi. Teate
   kohaletoimetamise teeb `role="alert"` ja fookuse liigutamine, mitte
   nähtav rõngas. Valija piirdub elementidega, millele skript tabindexi
   pani — päriselt tabatav teade (kui selline kunagi tuleks) jääks rõngata. */
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus,
.woocommerce-error[tabindex="-1"]:focus { outline: none; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--lg-ink); }
.woocommerce-error { border-left-color: #b42318; }

/* WooCommerce paneb teate sisse oma `.button` klassiga nupu (nt „Kinnita
   e-posti aadress" ostude lehel). Ilma selleta jääks sinna admin-halli
   ristkülik keset kreemjat kasti. Teade ise on flex, et nupp ja tekst
   istuksid ühel real ja mähkuksid kitsal ekraanil. */
.woocommerce-message, .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.woocommerce-message > .button,
.woocommerce-info > .button {
	order: 2;
	margin: 0;
	padding: 8px 15px;
	font-size: 0.87rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lg-ink);
	background: var(--lg-gold);
	border: 0;
	border-radius: var(--lg-radius);
	text-decoration: none;
}
.woocommerce-message > .button:hover,
.woocommerce-info > .button:hover { background: var(--lg-gold-hover); color: var(--lg-ink); }

/* E-posti kinnituse teated --------------------------------------------
   Ostude lehe teated: üleskutse aadressi kinnitada, tulemus („link on
   saadetud") ja tõrge („link on aegunud"). Vaikimisi on nad jõulised kastid
   — 2em püstpolster ja 3.5em vasak polster WooCommerce'i oma fondiglüüfi
   jaoks. See on liiga vali millegi jaoks, mida enamik õppijaid kunagi ei
   näe: kutselingi kasutamine kinnitab aadressi ise ära (WC teeb seda
   `after_password_reset` peal). Omaniku valik 10.08.2026: peen riba meie
   oma ikoonidega.

   `:has()` valib välja täpselt need teated — märgiks on `span`, mille
   lenguamar_kinnitusteade() lisab. Nii jäävad korvi ja kassa teated oma
   senise kujuga. Veateade on `ul > li`, seega seal on märk lapselaps —
   sellepärast kaks eri valijat, mitte üks lapsevalija. */
.woocommerce-info:has(> .lg-kinnita__tekst),
.woocommerce-message:has(> .lg-kinnita__tekst),
.woocommerce-error:has(.lg-kinnita__tekst) {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 11px 16px;
	border: 0;
	border-radius: var(--lg-radius);
	font-size: 0.88rem;
}
.woocommerce-info:has(> .lg-kinnita__tekst) { color: var(--lg-gold-text); }
/* Edu ja tõrge kannavad oma tähendust värviga, muidu on vorm sama. Toonid
   on samad, mis ostukaartide seisumärgistel (.lg-margis--ok jt), et konto
   alal ei tekiks teist paletti. */
.woocommerce-message:has(> .lg-kinnita__tekst) { background: #eaf5ee; color: #1a5c31; }
.woocommerce-error:has(.lg-kinnita__tekst) { background: #fdeceb; color: #8a231c; }
/* Veateate `ul` toob kaasa loendi polstri ja täpid. */
.woocommerce-error:has(.lg-kinnita__tekst) { list-style: none; }
.woocommerce-error:has(.lg-kinnita__tekst) > li {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ikoon on WC glüüfi asemel mask meie joonisest. Glüüf tuleb kolmest WC
   reeglist korraga (kahekordne `content`, `display: table` clearfix,
   absoluutne asend), seega iga omadus vajab oma vastet — muidu jääb
   pseudoelement kastist välja hõljuma. */
.woocommerce-info:has(> .lg-kinnita__tekst)::before,
.woocommerce-message:has(> .lg-kinnita__tekst)::before,
.woocommerce-error:has(.lg-kinnita__tekst)::before {
	content: "";
	position: static;
	display: block;
	flex: none;
	width: 17px;
	height: 17px;
	background: currentcolor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* Ümbrik: „kinnita aadress" ja „link on teel" räägivad mõlemad postkastist. */
.woocommerce-info:has(> .lg-kinnita__tekst)::before {
	background: var(--lg-gold-icon);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%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='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
/* Linnuke ringis. */
.woocommerce-message:has(> .lg-kinnita__tekst)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%3E%3C/svg%3E");
}
/* Hüüumärk ringis. */
.woocommerce-error:has(.lg-kinnita__tekst)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E");
}
/* WC lisab clearfixi ka `::after`-iga; flex-ribal jätaks see tühja veeru. */
.woocommerce-info:has(> .lg-kinnita__tekst)::after,
.woocommerce-message:has(> .lg-kinnita__tekst)::after { content: none; }
.lg-kinnita__tekst { flex: 1; min-width: 14ch; }
/* Nupp on raamiga, mitte kuldne: riba on info, mitte üleskutse, ja kuldne
   plokk kisuks kogu lehel silma. Tekst on markupis alati nupu ees, seega
   piisab õesvalijast. Valija on (0,4,1), et võita WC oma
   `.woocommerce:where(…) a.button` (0,2,1) — muidu jääb nupp halliks.

   Raam on `--lg-gold-icon`, mitte harilik `--lg-rule`: kreemjal taustal jääb
   `--lg-rule` 1,35:1 peale, aga WCAG 1.4.11 nõuab juhtelemendi piirilt 3:1.
   Tumekuld annab 3,08:1 ja on sama värv, mis riba ikoonil. */
.woocommerce-account .woocommerce-info .lg-kinnita__tekst ~ a.button {
	margin: 0 0 0 auto;
	padding: 7px 14px;
	background: transparent;
	color: var(--lg-ink);
	border: 1px solid var(--lg-gold-icon);
	border-radius: var(--lg-radius);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}
.woocommerce-account .woocommerce-info .lg-kinnita__tekst ~ a.button:hover {
	background: #fff;
	border-color: var(--lg-gold-text);
	color: var(--lg-ink);
}

/* Konto ---------------------------------------------------------------
   WooCommerce'i külgriba asemel vahekaardid: kolm kirjet ei vaja 240px
   veergu ja ostude read tahavad kogu laiust. Külgriba kolib kitsal ekraanil
   niikuinii ülespoole — teeme selle kohe nii. Omaniku valik 10.08.2026. */
.lg-konto__tabid {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--lg-line);
}
.lg-konto__tab {
	margin-bottom: -2px;
	padding: 9px 16px;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--lg-ink-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.lg-konto__tab:hover { color: var(--lg-ink); }
.lg-konto__tab--on { color: var(--lg-ink); border-bottom-color: var(--lg-gold); }

/* WooCommerce paneb sisu ja navigatsiooni kahte veergu — vahekaartidega on
   see ühes tulbas. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin: 0; }

/* Ostukaart ------------------------------------------------------------ */
.lg-ost {
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	overflow: hidden;
}
.lg-ost__pea {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 18px;
	background: var(--lg-sand);
	border-bottom: 1px solid var(--lg-line);
}
.lg-ost__nr { font-weight: 800; font-size: 0.95rem; }
.lg-ost__kp { font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-ost__summa {
	margin-left: auto;
	font-weight: 800;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.lg-ost__rida {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--lg-line-soft);
}
.lg-ost__rida:last-of-type { border-bottom: 0; }
.lg-ost__ikoon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	background: var(--lg-cream);
	color: var(--lg-gold-text);
	border-radius: var(--lg-radius);
}
.lg-ost__ikoon svg { width: 19px; height: 19px; }
.lg-ost__sisu { flex: 1; min-width: 0; }
.lg-ost__nimi { display: block; font-weight: 600; font-size: 0.95rem; }
.lg-ost__meta { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--lg-ink-muted); }
.lg-ost__tegu { flex: none; margin-left: auto; }
.lg-ost__jalus {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 18px;
	border-top: 1px dashed var(--lg-line);
}
.lg-ost__makse { font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-ost__teod { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lg-ost__leheküljed { display: flex; gap: 8px; margin-top: 18px; }

/* Üksik ost --------------------------------------------------------------
   Sama kaart, mis nimekirjas, aga kaks lisaosa: rea hind ja summade loend.
   Nimekirjas neid ei ole — seal kannab summat ainult kaardi pea. */
.lg-ost--yks { margin-bottom: 18px; }
.lg-ost__rea-summa {
	flex: none;
	font-size: 0.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Summad on `dl`, mitte tabel: paarid ilma päiseta ei vaja tabeli
   semantikat ja `dl` mähkub kitsal ekraanil ilma horisontaalset kerimist
   tekitamata. Read on `div`-ides, et grid saaks paare koos hoida. */
.lg-ost__summad {
	margin: 0;
	padding: 13px 18px;
	border-top: 1px solid var(--lg-line-soft);
	background: var(--lg-sand);
	font-size: 0.88rem;
}
.lg-ost__summa-rida {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 3px 0;
}
.lg-ost__summa-rida dt { color: var(--lg-ink-muted); }
.lg-ost__summa-rida dd {
	margin: 0 0 0 auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Transpordireal on hinna järel kaks `small`-i: veoteenus ja Montoniolt
   pakiautomaadi nimi. Need jäävad reasiseseks ja mähkuvad — `display: block`
   siin ei sobi, sest WooCommerce eraldab need `&nbsp;`-idega ja igast
   tekstisõlmest saaks siis omaette tühi rida. */
.lg-ost__summa-rida dd small { font-size: 0.82em; color: var(--lg-ink-muted); }
.lg-ost__summa-rida--order_total {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--lg-line);
	font-size: 1rem;
	font-weight: 800;
}
.lg-ost__summa-rida--order_total dt { color: var(--lg-ink); }

/* Tellimuse käik ja ostja andmed */
.lg-ost__margkused, .lg-ost__andmed { margin-bottom: 18px; }
.lg-ost__logi { margin: 0; padding: 0; list-style: none; }
.lg-ost__logi-kirje + .lg-ost__logi-kirje {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--lg-line-soft);
}
.lg-ost__logi-kp { display: block; font-size: 0.8rem; color: var(--lg-ink-muted); }
.lg-ost__logi-tekst { margin-top: 3px; font-size: 0.92rem; }
.lg-ost__logi-tekst p { margin: 0; }
.lg-ost__logi-tekst p + p { margin-top: 6px; }

.lg-ost__andmed-ruudustik {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	align-items: start;
}
.lg-ost__aadress-silt {
	margin: 0 0 5px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lg-ink-muted);
}
.lg-ost__aadress address { font-style: normal; font-size: 0.92rem; line-height: 1.55; }
.lg-ost__kontakt { margin: 0; font-size: 0.92rem; }
.lg-ost__kontakt + .lg-ost__kontakt { margin-top: 3px; }
.lg-ost__kontakt a { color: var(--lg-ink); }

/* Seisumärgis ---------------------------------------------------------- */
.lg-margis {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}
.lg-margis--ok { background: #eaf5ee; color: #1a5c31; }
.lg-margis--ootel { background: var(--lg-cream); color: var(--lg-gold-text); }
.lg-margis--tyhi { background: #eceef1; color: var(--lg-ink-muted); }

/* Tühi olek -----------------------------------------------------------
   WooCommerce ütleb „Ühtegi tellimust pole veel esitatud." ja jätab
   kasutaja tupikusse — siin on ka tee edasi. */
.lg-tyhi {
	padding: 40px 24px;
	text-align: center;
	background: var(--lg-sand);
	border: 1px dashed var(--lg-rule);
	border-radius: var(--lg-radius-card);
}
.lg-tyhi__ikoon { width: 36px; height: 36px; margin-bottom: 12px; color: var(--lg-gold-icon); }
.lg-tyhi__pealkiri { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.lg-tyhi__tekst {
	max-width: 44ch;
	margin: 0 auto 16px;
	font-size: 0.92rem;
	color: var(--lg-ink-soft);
}

/* Konto vorm -----------------------------------------------------------
   Kaks kaarti kõrvuti (omaniku soov 10.08.2026): „Sinu andmed" ja „Parool"
   on eri ülesanded ja üksteise all sundis vorm kerima, kuigi ruumi oli.
   `align-items: start` hoiab kaardid oma kõrgusel — muidu venitaks lühem
   kaart end pikema järgi. Salvestusnupp läheb üle mõlema veeru.

   Laiust ei piira: omanik soovis 10.08.2026, et kaardid täidaksid sisuala.
   Varasem `max-width: 840px` jättis paremale servale tühja riba. */
.lg-konto__vorm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}
.lg-konto__salvesta {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
/* WooCommerce'i enda teated ja konksude väljund vormi sees ei tohi veergu
   kitsalt jaguneda. */
.lg-konto__vorm > .woocommerce-message,
.lg-konto__vorm > .woocommerce-info,
.lg-konto__vorm > .woocommerce-error { grid-column: 1 / -1; }

.lg-kaart {
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	overflow: hidden;
}
.lg-kaart__pea {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 20px;
	background: var(--lg-sand);
	border-bottom: 1px solid var(--lg-line);
	font-size: 0.95rem;
	font-weight: 700;
}
.lg-kaart__ikoon { width: 17px; height: 17px; flex: none; color: var(--lg-gold-icon); }
.lg-kaart__sisu { padding: 20px; }

.lg-vali { margin: 0 0 16px; }
.lg-vali:last-child { margin-bottom: 0; }
.lg-vali > label { display: block; margin-bottom: 5px; font-size: 0.84rem; font-weight: 600; }
.lg-vali-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg-sisend {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 0.95rem;
	color: var(--lg-ink);
	background: #fff;
	border: 1px solid var(--lg-rule);
	border-radius: var(--lg-radius);
}
.lg-sisend:focus { outline: 2px solid var(--lg-gold); outline-offset: -1px; border-color: var(--lg-gold); }
.lg-abi { display: block; margin-top: 5px; font-size: 0.8rem; line-height: 1.45; color: var(--lg-ink-muted); }

/* Vaikne nupp: „Vaata tellimust" ei võistle „Maksa" nupuga. */
.lg-btn--vaikne { border-color: transparent; color: var(--lg-ink-muted); }
.lg-btn--vaikne:hover { border-color: var(--lg-rule); color: var(--lg-ink); }

/* ==========================================================================
   KOHANEMINE
   ========================================================================== */

@media (max-width: 1024px) {
	body:not(.lg-no-sidebar) .lg-layout { grid-template-columns: minmax(0, 1fr); }
	/* Ostukaardi read mähkuvad: nimi ja nupp ei mahu kõrvuti. */
	.lg-ost__rida { flex-wrap: wrap; }
	.lg-ost__tegu { margin-left: 51px; }
	.lg-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
}

@media (max-width: 700px) {
	/* Logo EI kahane enam kitsal ekraanil. Iga teine suurus tähendaks uut
	   murdarvulist mõõtu (1,28rem andis 38,3 × 41,8px) ja sellega udust
	   SVG-d — ainus järgmine täisarvuline samm oleks 33px, mis on nähtavalt
	   väiksem. Lukustus on 176px lai ja mahub 375px ekraanile korvi ning
	   menüünupu kõrvale ~85px varuga. Omaniku nõue on niikuinii üks logo
	   kõikjal (09.08.2026). */
	.lg-brand__alarida { letter-spacing: 0.3em; }

	.lg-footer__top { grid-template-columns: 1fr; gap: 32px; padding-block: 40px 32px; }
	.lg-footer__bottom-inner { justify-content: flex-start; }
	.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
	.lg-layout { padding-block: 32px 48px; }
	.lg-page-head { padding-block: 32px 4px; }
}

/* ==========================================================================
   HERO JA TEENUSED
   Sektsioonid on plokkidena sisus (vt patterns/), siin on nende kujundus.
   Võti: portree alumine serv langeb kokku kreemja sektsiooni ülaservaga —
   pildil on kõva lõikeserv ja värvimuutus seletab selle ära.
   ========================================================================== */

.lg-hero {
	padding-block: 40px 0;
	background: var(--lg-white);
}
/* Veergude konteiner on .lg-hero ise, mitte välimine mähis. */
.lg-hero { margin-bottom: 0; gap: 48px; }

.lg-hero__title { margin-bottom: 20px; }
.lg-hero__lead {
	margin: 0 0 28px;
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--lg-ink-soft);
	/* 46ch → 56ch (omanik 15.08.2026: „seda võib natuke laiemaks teha") —
	   kolm kitsast rida hingab laiemaks. */
	max-width: 56ch;
}

.lg-hero__actions { gap: 12px; margin-bottom: 22px; }

/* Faktirea ja kreemja ala vahe oli varem juhuslik ülejääk: portree venitas
   veeru tekstist kõrgemaks. Madalal aknal portree kahanes, ülejääk kadus ja
   faktid istusid vastu sektsioonipiiri. Nüüd on vahe päriselt olemas ja
   võrdne juhtlõigu ja nuppude vahega. */
.lg-hero__body { padding-bottom: 28px; }

/* Faktirida: kreemjad ringid linnukesega — sama kujundikeel mis teenuste
   kaartide ikoonidel. */
.lg-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.lg-hero__facts li {
	display: flex; align-items: center; gap: 7px; margin: 0;
	font-size: 0.9rem; line-height: 1.4; color: var(--lg-ink-muted);
}
.lg-hero__facts li::before {
	content: "";
	flex: 0 0 auto;
	width: 16px; height: 16px;
	border-radius: 50%;
	background-color: var(--lg-cream-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%23a97c12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Portree ja kreemjas kujund ------------------------------------------- */
.lg-hero__media { position: relative; align-self: stretch; display: flex; justify-content: flex-end; }

/* Pildiplokil ei ole eraldi klassi, seega sihitakse seda media veeru sees.
   Plokk on täpselt pildi laiune, mis teeb sellest ringi õige ankru. */
.lg-hero__media > .wp-block-image {
	position: relative;
	z-index: 1;
	/* Portree tekstile lähemale, „et tekiks tervik" (omanik 15.08.2026).
	   Nihe otsitud kavandis neljas voorus: marginaaliga jooksis pilt veeru
	   vasakusse serva kinni (mõõdetud liikumine jäi 26,7 px), seega viimane
	   osa käib transform'iga, mis veeru piire ei tunne. Ring on ::before
	   sama ploki küljes ja liigub kaasa. */
	margin: 0 58px 0 auto;
	transform: translateX(-50px);
	align-self: flex-end;
}
/* Kõrgus on määratud, laius tuleb kuvasuhtest. max-height'iga jäi laius
   srcset-i valiku hooleks (brauser annab tihedusega korrigeeritud
   loomuliku laiuse), mis andis eri vaadetes eri suurusi. */
.lg-hero__media > .wp-block-image img {
	display: block;
	position: relative;
	z-index: 1;
	/* Alampiir: madalal aknal lõpetab portree (ja koos sellega ring)
	   kahanemise. Ilma selleta muutus hero madalal aknal aina lamedamaks. */
	height: clamp(380px, 52vh, 500px);
	width: auto;
}

/* Kreemjas ring on PILDI peal, mitte veerul. Veerule seotud ring jäi
   keskele ka siis, kui madal aken kahandas portreed 52vh võrra — portree
   nihkus paremasse serva ja ring tema alt välja. Nüüd on ring pildi laiuse
   protsent, seega need kahanevad koos.
   Ulatub 64 px sektsioonipiirist allapoole ja on kreemja sektsiooniga sama
   tooni, seega alumine kaar kaob sektsiooni sisse — loeb nagu kreemjas ala
   kerkiks teenuste plokist portree taha. */
.lg-hero__media > .wp-block-image::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -76px;
	transform: translateX(-50%);
	/* Ring on pildist laiem, et portree istuks kreemjas kujundi sees, mitte
	   selle serval (omaniku soov 09.08.2026: taust natuke suuremaks).
	   124% × 1,2 = 149% + 2% (omanik 15.08.2026: „tausta 2% suuremaks"). */
	width: 152%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--lg-cream);
	z-index: 0;
	pointer-events: none;
}

/* Sidekriipsuga liitsõnad ei tohi kriipsu kohalt murduda ("e-õpe"). */
.lg-hero .lg-nb { white-space: nowrap; }

/* --- Õpikeskkond -------------------------------------------------------
   „Teenused" asemel (omanik 14.08.2026: „hetkel on see sektsioon väga väga
   igav"): kübar + pealkiri + sissejuhatus, üheksa võimalust kolmes veerus
   ja all „Kust alustada?" rada. Telefoni-eelvaade elas siin 14.–15.08.2026
   ja läks maha omaniku otsusega („eemaldame mobiili pildi") — tema ehitus
   on kirjas kavandi jaluses. Märgendi annab [lg_keskkond]
   (inc/avaleht.php); kavand: kavandid/avaleht-prototuup.html.
   ----------------------------------------------------------------------- */

:root {
	/* PAARI LAIUS ON SAIDI SISULAIUS, MITTE OMA ARV (kavandi mõõt
	   14.08.2026): 1188 keskel andis kolm eri vertikaali ühel lehel.
	   360 + 48 + 832 = 1240 = --lg-container − 2 × gutter — kõik samal
	   joonel, millel seisab kogu ülejäänud leht. */
	/* -tel ja -jutt muutujad läksid koos telefoni-eelvaatega (15.08.2026);
	   paar tähendab nüüd lihtsalt sisujoont. */
	--lg-paar-vahe: 48px;
	--lg-paar: 1240px;
}

/* Jutt ja aken kõrvuti. Telefon on VASAKUL (omanik 14.08.2026: „mobiil
   pigem vasakule") — kangelasriba portree on paremal ja telefon samas
   servas tähendas kahte pilti üksteise all. Polster on siin, mitte
   sektsioonil: sektsioon on lehe laiune, konteinerijoone paneb grid. */
.lg-keskkond__grid {
	max-width: calc(var(--lg-paar) + 2 * var(--lg-gutter));
	margin-inline: auto;
	padding-inline: var(--lg-gutter);
	/* ÜKS VEERG (omanik 15.08.2026 õhtul): telefon läks maha ja jutt saab
	   terve paari laiuse. Võre jääb alles, et laius/joondus tuleks samast
	   kohast, kust enne — ainult veerge on üks. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: center;
	gap: var(--lg-paar-vahe);
	align-items: start;
}
/* Piir on paari TÄISLAIUS, mitte vana jutuveeru 832 — telefonita kuulub
   kogu rida jutule. */
.lg-keskkond__jutt { max-width: none; }

/* Kübarariba: sama kiibikuju, mis raja „TASUTA"-l ja toote kaanesildil. */
.lg-keskkond__kubar {
	display: inline-block; margin: 0 0 12px; padding: 4px 12px;
	background: var(--lg-cream-accent); color: var(--lg-gold-text);
	border-radius: 999px;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.lg-keskkond__jutt h2 { margin: 0 0 12px; }
.lg-keskkond__lead { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.65; color: var(--lg-ink-soft); }

/* Üheksa võimalust kolmes veerus (3 × 3 täpselt), ikoon värvilisel plaadil
   EES, mitte peal. ÜKS TOON (omanik 15.08.2026: „muuda need ikoonid kõik
   esimese tulba värvidega") — kogu võre on kuldne, nagu saidi muu keel. */
.lg-keskkond__faktid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 22px;
}
.lg-keskkond__faktid li {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--lg-ink-soft);
}
.lg-keskkond__faktid li > span { min-width: 0; }
/* Pealkiri on OMAL real: kolmes veerus on rida lühike ja koos kooloniga
   murduks lause kohe pärast koolonit. */
.lg-keskkond__faktid li b { display: block; margin-bottom: 2px; font-size: 0.94rem; color: var(--lg-ink); font-weight: 700; }
.lg-plaat {
	flex: none;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
}
.lg-plaat svg { width: 20px; height: 20px; }
.lg-plaat--kuld { background: var(--lg-cream-accent); color: var(--lg-gold-text); }

/* ── „Kust alustada?" rada ───────────────────────────────────────────────
   Kolm sammu RIDADENA kõrvuti, igaüks kaks tekstirida kõrge: ring vasakul,
   nimi ja kirjeldus keskel, nupp paremal (kavandi neljas katse — kolm
   võrdset karpi ei lugenud teena). Esimene samm on esile tõstetud: rada
   algab siit ja see on ainus tasuta tegu. */
.lg-rada {
	max-width: calc(var(--lg-paar) + 2 * var(--lg-gutter));
	margin: 32px auto 0;
	padding-inline: var(--lg-gutter);
}
/* Pealkiri keskel, joon mõlemal pool. */
.lg-rada__pealkiri {
	max-width: none; margin: 0 0 14px;
	display: flex; align-items: center; gap: 18px;
	font-size: 1.1rem; font-weight: 700; color: var(--lg-ink);
}
.lg-rada__pealkiri::before, .lg-rada__pealkiri::after {
	content: ""; flex: 1 1 auto; height: 0;
	border-top: 1px solid var(--lg-line);
}
.lg-rada__sammud {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.lg-rada__samm {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	margin: 0; padding: 12px 16px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
.lg-rada__samm--esile { border-color: var(--lg-gold); background: #fffdf5; }
.lg-rada__punkt {
	grid-area: 1 / 1 / 3 / 2; align-self: center;
	display: grid; place-items: center;
	width: 28px; height: 28px;
	border: 2px solid var(--lg-gold); border-radius: 50%;
	background: var(--lg-cream);
	font-size: 0.84rem; font-weight: 800; color: var(--lg-gold-text);
}
.lg-rada__samm--esile .lg-rada__punkt { background: var(--lg-gold); color: var(--lg-ink); }
.lg-rada__sisu { grid-area: 1 / 2 / 3 / 3; min-width: 0; }
.lg-rada__nimi { display: block; font-size: 0.98rem; font-weight: 700; color: var(--lg-ink); }
.lg-rada__jutt { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.45; color: var(--lg-ink-soft); }
/* Nupp on erandina väiksem — teema .lg-btn 49 px kandis madalas kaardis
   üle poole kõrgusest. */
.lg-rada__nupp {
	grid-area: 1 / 3 / 3 / 4; align-self: center;
	padding: 7px 14px; font-size: 0.82rem;
}

/* Kolm veergu ainult siis, kui neid jagub (kavandi mõõt 1024 px aknas:
   kolme veeru juures jäi kirjele 172,3 px ja lause muutus viierealiseks). */
@media (max-width: 1100px) {
	.lg-keskkond__faktid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.lg-keskkond__faktid { grid-template-columns: 1fr; }
}

/* --- Õpetaja sektsioon --------------------------------------------------
   „Kes on Mery?" + „Haridus ja kogemus" on ÜKS sektsioon (omanik
   15.08.2026): sama paarivõre, mis õpikeskkonnal, aga PEEGELPILDIS — sisu
   vasakul, foto paremal. Foto on samas kaardikeeles, mis telefon ja
   sammud (raadius + pehme vari); originaalkaader tumeda fooniga (Vision-
   väljalõige kreemjal käis 15.08 korraks läbi — omanik: „see ei sobi"). */
.lg-opetaja__grid {
	max-width: calc(var(--lg-paar) + 2 * var(--lg-gutter));
	margin-inline: auto;
	padding-inline: var(--lg-gutter);
	/* 440, mitte 380: 2:3 foto on siis 660 px ja lõpeb tekstiveeruga
	   peaaegu koos (kavandi mõõt: 380 juures jäi 116,7 px tühja). */
	display: grid; grid-template-columns: minmax(0, 1fr) 440px;
	gap: 48px; align-items: start;
}
.lg-opetaja__jutt h2 { margin: 0 0 14px; }
.lg-opetaja__jutt > p { margin: 0 0 14px; color: var(--lg-ink-soft); line-height: 1.65; }
.lg-opetaja__cv-pealkiri { margin: 26px 0 12px; font-size: 1.15rem; font-weight: 700; color: var(--lg-ink); }
.lg-opetaja__fb {
	display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
	margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--lg-line);
}
.lg-opetaja__fb p { flex: 1 1 320px; margin: 0; font-size: 0.92rem; color: var(--lg-ink-muted); }
.lg-opetaja__foto { margin: 0; }
.lg-opetaja__foto img {
	display: block; width: 100%; height: auto;
	border-radius: var(--lg-radius-card);
	box-shadow: 0 18px 40px -20px rgba(30, 41, 59, 0.28);
}
@media (max-width: 900px) {
	.lg-opetaja__grid { grid-template-columns: 1fr; gap: 28px; }
	.lg-opetaja__foto { max-width: 420px; }
}

@media (max-width: 1024px) {
	/* WP genereerib igale veeruplokile oma .wp-container-core-columns-is-layout-*
	   reegli { flex-wrap: nowrap } ja lisab veergudele inline flex-basis'e.
	   Mõlemad tuleb üle kirjutada, muidu veerud ei virnastu vaid kahanevad. */
	.lg-hero { flex-wrap: wrap !important; }
	.lg-hero__body, .lg-hero__media { flex-basis: 100% !important; }
	.lg-hero__media { margin-top: 32px; justify-content: center; }
	/* Töölaual surub margin-left:auto portree paremasse serva; koondvaates
	   peab see olema keskel — ka töölaua nihe (transform) tuleb maha võtta. */
	.lg-hero__media > .wp-block-image { margin-inline: auto; transform: none; }
	.lg-hero__media > .wp-block-image::before { width: 118%; bottom: -58px; }
}

@media (max-width: 700px) {
	.lg-hero { padding-block: 28px 0; }
	/* Väiksem alampiir: maastikuasendis telefonil (nt 812x375) oleks 380px
	   portree kogu vaatest kõrgem. */
	.lg-hero__media > .wp-block-image img { height: clamp(300px, 52vh, 500px); }
	/* Telefonis on pilt peaaegu ekraanilaiune, seega laiem ring ulatuks
	   servast välja ja tekitaks horisontaalse kerimise. Siin kasvab ring
	   vaid nii palju, kui ekraanile ära mahub. */
	.lg-hero__media > .wp-block-image::before { width: 110%; bottom: -46px; }
	.lg-hero__lead { font-size: 1.05rem; }
	.lg-hero__actions .wp-block-button, .lg-hero__actions .wp-block-button__link { width: 100%; }
}

/* --- Töövihikud --------------------------------------------------------
   Valge riba õpetaja sektsiooni ja kreemja tagasiside vahel: pealkiri
   üleval, all PÄRIS POE KAARDID ([lg_tooted] — täpselt sama märgend, mis
   /oppematerjalid/ lehel; üks funktsioon, kaks lehte, nad ei saa lahku
   minna). Käsitsi kirjutatud riiul müüs vanemat asja odavama hinnaga kui
   pood — vt kavandi MIKS-i.
   ----------------------------------------------------------------------- */

/* Ülapolster 40, mitte 88: vahe õpetaja sektsioonini oli 152 px (omanik
   15.08.2026: „siin on liiga suur vahe"); 88 oli vana kahe-ploki aja jääk,
   kus vahel istus kreemjas CV-riba. */
.lg-entry > .lg-vihikud { padding-block: 40px 64px; }

.lg-vihikud__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.lg-vihikud__intro h2 { margin: 0 0 6px; }
.lg-vihikud__intro p { margin: 0; color: var(--lg-ink-soft); }

/* Kreemjas paneel tuli riiuli alt ära: päris tootekaardil ON juba oma
   valge raam — kast kasti sees andis kaks raami ja kreemja triibu, mida
   poes ei ole. */
.lg-vihikud__riiul {
	display: block;
	background: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.lg-entry > .lg-vihikud { padding-block: 40px 48px; }
}

/* ==========================================================================
   TAGASISIDE
   Vestlusvoog nagu sõnumirakenduses: avatar + nimi ja iga lõik oma mullina.
   Aken on kindla kõrgusega ja kerib vaates olles ise, lõputu ringina
   (JS kahekordistab sisu — vt nav.js). Rull kiirendab, hiir peal = paus.
   Ilma JS-ita (ja prefers-reduced-motion puhul) on kõik arvustused aknas
   olemas ja käsitsi keritavad.
   ========================================================================== */

/* Tutvustuskaart voo kõrval: valge kaart kuldse tsitaadiringiga, mis
   ulatub üle kaardi ülaserva. Nupp on kaardi põhjas (margin-top: auto). */
.lg-trust__inner { gap: 36px !important; margin-bottom: 0; }
/* Kaart on täpselt sisu kõrgune (ei veni voo kõrguseks) ja istub üleval. */
.lg-trust__intro { display: flex; align-items: flex-start; }
.lg-trust__kaart {
	position: relative;
	flex: 1 1 auto;
	margin-top: 26px;
	padding: 46px 24px 24px;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
.lg-trust__kaart::before {
	content: "\201C";
	position: absolute;
	top: -26px;
	left: 26px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--lg-gold);
	color: var(--lg-ink);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 44px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
}
.lg-trust__kaart h2 {
	margin: 0 0 12px;
	font-size: 1.875rem;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.lg-trust__kaart p { margin: 0 0 16px; font-size: 0.97rem; color: var(--lg-ink-soft); }

/* Kattuvad initsiaaliringid — sotsiaalne tõend, sama ringikeel mis voos. */
.lg-tst-pakk { display: flex; align-items: center; margin: 0 0 20px; }
.lg-tst-pakk__ring {
	width: 34px;
	height: 34px;
	font-size: 0.75rem;
	border: 2px solid var(--lg-white);
}
.lg-tst-pakk__ring + .lg-tst-pakk__ring { margin-left: -9px; }
.lg-tst-pakk__veel { margin-left: 10px; font-size: 0.85rem; color: var(--lg-ink-muted); }
.lg-trust__kaart .wp-block-buttons { margin-bottom: 0; }

/* Virnastumisel (WP veerud murduvad 781px) saab kaart alumise vahe,
   et voog ei alga kohe nupu alt. */
@media (max-width: 781px) {
	.lg-trust__kaart { margin-bottom: 8px; }
}

.lg-tst__aken { position: relative; }
.lg-tst__voog {
	position: relative;
	height: 460px;
	/* Alumine siseruum: viimase mulli vari (ulatub ~10px alla) ei tohi
	   akna serva vastu ära lõikuda. */
	padding-bottom: 14px;
	/* scroll-behavior peab olema vaikimisi (auto): drift juhib positsiooni
	   ise ja smooth teeks selle võbelevaks. */
	/* Kerimisriba paremal, ilma rajata, alati nähtaval — ka ringi ajal,
	   kus pide liigub driftiga kaasa ja hüppab ringi alguses üles (aus
	   pilt: ring algas otsast). overflow: scroll hoiab riba püsivalt. */
	overflow-y: scroll;
	scrollbar-color: var(--lg-gold) transparent;
	/* Voo sees servani jõudes EI kandu kerimine lehele edasi — leht kerib
	   ainult siis, kui kursor/sõrm on voost väljas. */
	overscroll-behavior: contain;
}
/* Webkitis teeb kohandatud stiil ribast püsiva (mitte üle sisu hõljuva) —
   kuldne pide on alati näha ja lohistatav. */
/* Native-riba on JS-ita varulahendus; JS peidab selle ja joonistab oma
   suure pideme (native pideme suurust ei saa igal pool juhtida). */
.lg-tst__voog::-webkit-scrollbar { width: 12px; }
.lg-tst__voog::-webkit-scrollbar-track { background: transparent; }
.lg-tst__voog::-webkit-scrollbar-thumb { background: var(--lg-gold); border-radius: 8px; }
.lg-tst__voog::-webkit-scrollbar-thumb:hover { background: var(--lg-gold-hover); }
.lg-tst--oma .lg-tst__voog { scrollbar-width: none; }
.lg-tst--oma .lg-tst__voog::-webkit-scrollbar { display: none; }

/* Rada: täiskõrguses soe liivakarva renn, milles pide liigub — algus ja
   lõpp on nähtavad, positsioon arusaadav. Ainult JS-iga (nagu pide ise). */
.lg-tst--oma .lg-tst__aken::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 12px;
	background: #f2e6ca;
	border-radius: 6px;
	z-index: 1;
	pointer-events: none;
}

/* Oma pide: kuldne käepide, alati sama suur, igas brauseris sama.
   Liigub kerimisega sünkroonis (JS, transform) ja on lohistatav.
   Õrn vari istutab pideme raja SISSE, mitte selle peale. */
.lg-tst__pide {
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	height: 72px;
	background: var(--lg-gold);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(30, 41, 59, 0.18);
	cursor: grab;
	touch-action: none;
	z-index: 2;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
.lg-tst__pide:hover { background: var(--lg-gold-hover); }
.lg-tst__pide:active { cursor: grabbing; }

.lg-tst__item { margin: 0 0 26px; }
.lg-tst__item:last-child { margin-bottom: 0; }

.lg-tst__isik { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lg-tst__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lg-cream-accent);
}
img.lg-tst__avatar { object-fit: cover; }
/* Initsiaalid, kui pilti ei ole — sama toonipaar mis linnukestel.
   Kolm lähestikust tooni roteeruvad nimede kaupa, et inimesed oleksid
   eristatavad; pakis ja voos kannab sama inimene sama tooni. */
span.lg-tst__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: #a97c12;
}
/* span-eesliide hoiab spetsiifika võrdsena baasreegliga (span.lg-tst__avatar),
   muidu jääks tähtede värv alati kuldseks. */
span.lg-tst__avatar--t1 { background: #f6e3b8; color: var(--lg-gold-text); }
span.lg-tst__avatar--t2 { background: #fdeed4; }
/* Sugu määrab värvi, kui halduses täidetud: naine roosa, mees helesinine.
   Pastellid samas küllastusklassis kreemi-kulla toonidega. */
span.lg-tst__avatar--naine { background: #f9dee3; color: #a5586d; }
span.lg-tst__avatar--mees { background: #dcebf7; color: #49719a; }
.lg-tst__nimi { font-size: 0.95rem; font-weight: 600; color: var(--lg-ink); }
/* Valikuline kuupäev nime järel — vaikne metainfo, mitte konkurent. */
.lg-tst__kp { font-size: 0.82rem; color: var(--lg-ink-muted); }

/* Iga lõik on oma mull. Esimese mulli ülemine vasak nurk on teravam —
   see on "saba", mis ütleb: sõnum. */
.lg-tst__mullid p {
	/* Mull on sisu laiune — eri pikkusega mullid annavad päris vestluse
	   rütmi. Lagi on seotud rajaga: pikk mull lõpeb 28px enne rennist
	   (12px rada + õhk), mitte kaugemal ega lähemal.
	   Pehme vari asendab äärist: sama keel mis töövihikute kaantel. */
	max-width: calc(100% - 40px);
	width: fit-content;
	margin: 0 0 6px;
	padding: 14px 18px;
	background: var(--lg-white);
	border-radius: 16px;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--lg-ink-soft);
	box-shadow: 0 3px 10px -5px rgba(30, 41, 59, 0.18);
}
.lg-tst__mullid p:first-child { border-top-left-radius: 4px; }
.lg-tst__mullid p:last-child { margin-bottom: 0; }

/* Hajumised mõlemas servas: ringis "kaovad" sõnumid mõlemas suunas.
   Värv = kreemjas ala, mille peal voog istub. */
.lg-tst__fade {
	position: absolute;
	left: 0;
	/* parem serv jätab rajale ruumi, et hajutus rada ei tooniks */
	right: 24px;
	pointer-events: none;
}
.lg-tst__fade--yla {
	top: 0;
	height: 40px;
	background: linear-gradient(to top, rgba(254, 248, 236, 0), var(--lg-cream));
}
.lg-tst__fade--all {
	bottom: 0;
	height: 48px;
	background: linear-gradient(to bottom, rgba(254, 248, 236, 0), var(--lg-cream));
}

/* Mobiilis on aken kaks korda kõrgem: kitsal ekraanil on mullid pikemad
   ja 320px näitaks korraga vaevu üht arvustust. */
@media (max-width: 700px) {
	.lg-tst__voog { height: 640px; }
}

/* ==========================================================================
   PLOKISISU KOHENDUSED
   Migratsioon tõi sektsioonid plokkidena; need on vaikimisi konteineri
   laiused, aga kreemjas ala peab ulatuma ekraani servani nagu varem.
   ========================================================================== */

/* Täislaiuses kreemjas ala: element venib sisuala laiuseks, aga sisu jääb
   konteineri joonele. Nii moodustavad pealkiri ja kaardiruudustik ühe
   katkematu ploki, mille peal portree ring lõpeb.
   ------------------------------------------------------------------------
   Siin EI TOHI kasutada 100vw: vw sisaldab vertikaalse kerimisriba laiust,
   seega 100vw on ~15px laiem kui tegelik sisuala ja leht sai horisontaalse
   kerimise. .lg-entry on juba täpselt sisuala laiune ja ilma padding'uta,
   seega piisab max-width'i tühistamisest — element täidab oma konteineri
   ise ja kerimisriba arvestub automaatselt.
   Protsent padding'us arvutatakse samuti .lg-entry laiusest, mis hoiab sisu
   .lg-container'iga ühel joonel. */
.lg-entry > .lg-trust {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--lg-gutter), calc(50% - var(--lg-container) / 2 + var(--lg-gutter)));
	background-color: var(--lg-cream);
}
/* Õpikeskkond on lehe laiune ILMA sektsioonipolstrita: konteinerijoone
   paneb .lg-keskkond__grid ja rada saab endale terve akna (omanik
   14.08.2026: „see sektsioon lehe laiuselt"). */
.lg-entry > .lg-keskkond {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 44px 44px;
	background-color: var(--lg-cream);
}
/* Õpetaja sektsioon on valge paarivõre; ankur #mery elab siin. */
.lg-entry > .lg-opetaja {
	width: auto;
	max-width: none;
	margin-inline: 0;
	/* Alt 40, mitte 64: vahe vihikute pealkirjani oli 64 + 88 = 152 px
	   (omanik 15.08.2026: „siin on liiga suur vahe"). */
	padding-block: 64px 40px;
	scroll-margin-top: var(--lg-head-h);
}
/* Ankruga hüpe (#tagasiside) maandub sektsiooni tausta algusesse nii, et
   kleepuv päis seda ei kata. */
.lg-entry > .lg-trust { scroll-margin-top: var(--lg-head-h); }

/* Hiigelsuur läbipaistev tsitaadimärk — kajab kaardi kuldsele ringile,
   sisu on z-indexiga selle peal. */
.lg-entry > .lg-trust { position: relative; overflow: hidden; }
.lg-entry > .lg-trust::after {
	content: "\201D";
	position: absolute;
	top: 8px;
	right: 24px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 220px;
	line-height: 1;
	color: rgba(244, 185, 67, 0.14);
	pointer-events: none;
}
.lg-trust__inner { position: relative; z-index: 1; }

.lg-entry > .lg-trust   { padding-block: 84px 72px; }

/* --- Mery jagatud osad --------------------------------------------------
   Vana kahe riba Mery-sektsioon (lugu valgel + CV kreemjal) läks 15.08.2026
   koos avalehe uue kujuga maha; asemel on .lg-opetaja paarivõre (ülal).
   Alles on kaks klassi, mida uus märgend edasi kasutab: avalõigu konks
   (.lg-mery__lead) ja CV linnukestega loetelu (.lg-mery__facts).
   -------------------------------------------------------------------- */

/* Avalõik on konks, mitte kehatekst — suurem ja heledam kiri eristab selle
   järgnevast jutustusest; kuldne vasakjoon on sama motiiv mis
   tsitaadiplokkidel. */
.lg-mery__lead {
	margin: 0 0 24px;
	padding-left: 20px;
	border-left: 3px solid var(--lg-gold);
}
.lg-mery__lead p {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--lg-ink-soft);
	text-wrap: pretty;
}

/* CV: loetelu kreemjate linnukestega, sama motiiv mis hero faktireal. */
.lg-mery__facts { margin: 0; padding: 0; list-style: none; }
.lg-mery__facts li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 38px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--lg-ink-soft);
}
.lg-mery__facts li:last-child { margin-bottom: 0; }
.lg-mery__facts li strong { color: var(--lg-ink); font-weight: 600; }
.lg-mery__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--lg-cream-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%23a97c12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 700px) {
	.lg-mery__lead p { font-size: 1.15rem; }
}

/* Hero peab ulatuma kreemja alani ilma vahedeta, et portree serv ja
   sektsioonipiir langeksid kokku. */
.lg-entry > .lg-hero { margin-bottom: 0; padding-bottom: 0; }
.lg-hero__media { align-self: stretch; }

@media (max-width: 700px) {
	.lg-entry > .lg-trust { padding-block: 40px 48px; }
}

/* ==========================================================================
   NÄHTAVUSE ABIKLASSID
   Elementoril olid oma hide_desktop / hide_tablet / hide_mobile seaded.
   Migratsioon neid ei kandnud üle, seega need klassid täidavad sama rolli
   ja on plokiredaktoris käsitsi lisatavad.
   ========================================================================== */

@media (min-width: 1025px) {
	.lg-hide-desktop { display: none !important; }
}
@media (min-width: 701px) and (max-width: 1024px) {
	.lg-hide-tablet { display: none !important; }
}
@media (max-width: 700px) {
	.lg-hide-mobile { display: none !important; }
}

@media (max-width: 900px) {
	/* Konto vorm ühte veergu: kaks kaarti kõrvuti vajavad ruumi, mida
	   tahvlil enam ei ole. */
	.lg-konto__vorm { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.lg-vali-paar { grid-template-columns: 1fr; }
	.lg-konto__tab { padding: 9px 12px; font-size: 0.9rem; }
	.lg-ost__summa { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   KONTAKT
   Omaniku valik 10.08.2026: vasakul kreemjas kaart suure fotoga, selle all
   kanalid eraldi tahvlitena, paremal vorm valges kaardis. Paigutuse annab
   `[lg_kontakt]` lühikood (inc/kontakt.php).

   Esimene katse pani foto raamita valgele ja kanalid tüpograafilise loendina.
   Mõõdetuna oli vasak veerg 426px lai tulp ~200px laia sisuga — ta luges
   pildiallkirjana, mitte poolena, ja jäi kõrvaloleva tiheda vormipaneeli
   vastu kaaluta. Nüüd on mõlemal pool objektid.
   ========================================================================== */

.lg-kontakt {
	display: grid;
	grid-template-columns: 4fr 6fr;
	gap: 22px;
	align-items: start;
	padding-block: 4px 8px;
}

/* --- Vasak veerg: kaart + kanalid --- */
.lg-kontakt__kaart {
	padding: 26px 22px 22px;
	background: var(--lg-cream);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	text-align: center;
}
/* Valge rõngas eraldab foto kreemjast taustast. `box-shadow`, mitte `border`:
   ääris kasvaks ringi mõõtu ja nihutaks keskjoondust. */
.lg-kontakt__foto {
	display: block;
	width: 168px;
	height: 168px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 6px #fff, 0 3px 14px rgba(30, 41, 59, 0.12);
}
.lg-kontakt__nimi { margin: 17px 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.lg-kontakt__roll { margin: 2px 0 0; font-size: 0.87rem; color: var(--lg-ink-muted); }
/* Vastamise lubadus jääb foto juurde: see on lubadus inimeselt, mitte kanali
   omadus. Pill valgel taustal, et kreemjas kaardis eristuks. */
.lg-kontakt__vastus {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 15px 0 0;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: 999px;
	font-size: 0.81rem;
	color: var(--lg-gold-text);
}
.lg-kontakt__vastus svg { width: 14px; height: 14px; flex: none; }

.lg-kontakt__kanalid { display: grid; gap: 9px; margin-top: 14px; }
/* Terve tahvel on link, mitte ainult tekst: vana loendis oli sihtmärk
   „info@lenguamar.eu" ~130px lai, nüüd on kogu 426x68px riba. Telefonis on
   see vahe otsustav. */
.lg-kontakt__kanal {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	color: var(--lg-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lg-kontakt__kanal:hover, .lg-kontakt__kanal:focus-visible {
	border-color: var(--lg-gold-icon);
	background: var(--lg-cream);
}
.lg-kontakt__ikoon {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--lg-cream);
	color: var(--lg-gold-icon);
	border-radius: var(--lg-radius);
	transition: background-color 0.15s ease;
}
/* Hiire all vahetuvad tahvli ja ikooni taustad — ikoon jääb nähtavaks. */
.lg-kontakt__kanal:hover .lg-kontakt__ikoon,
.lg-kontakt__kanal:focus-visible .lg-kontakt__ikoon { background: #fff; }
.lg-kontakt__ikoon svg { width: 17px; height: 17px; }
.lg-kontakt__sisu { flex: 1; min-width: 0; }
.lg-kontakt__silt {
	display: block;
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lg-ink-muted);
}
.lg-kontakt__vaartus {
	display: block;
	font-size: 0.93rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lg-kontakt__nool { flex: none; color: var(--lg-ink-muted); }
.lg-kontakt__nool svg { display: block; width: 15px; height: 15px; }

/* --- Parem veerg: vorm --- */
/* `overflow: hidden` siin EI TOHI olla: rippmenüü paneel on absoluutne ja
   kaart lõikaks selle ära niipea, kui loend kaardi servast välja ulatub.
   Pearibale anname ümardused otse, mille pärast see kunagi `overflow`-ga
   lahendatud oli. */
.lg-kontakt__vorm {
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
}
.lg-kontakt__vorm-pea {
	margin: 0;
	padding: 14px 22px;
	background: var(--lg-sand);
	border-bottom: 1px solid var(--lg-line);
	/* Ümardus otse, sest kaart ei tohi `overflow: hidden`-it kasutada (vt ülal).
	   1px vähem kui kaardil, et liivakas taust ei paistaks äärise alt välja. */
	border-radius: calc(var(--lg-radius-card) - 1px) calc(var(--lg-radius-card) - 1px) 0 0;
	font-size: 0.98rem;
	font-weight: 700;
}
.lg-kontakt__vorm-sisu { padding: 22px; }
/* WPFormsi konteineril on `margin: 24px auto`, mis liitub paneeli polstriga:
   pea ja esimese välja vahele jäi 46px, nupu alla 47px. Meie paneelis annab
   vahe polster, seega marginaal läheb nulli.

   Valija peegeldab plugina oma `div.wpforms-container-full:not(:empty)`
   mustrit ja lisab meie klassi. Nende valija on (0,2,1) — `:not(:empty)`
   loeb pseudoklassina —, seega lühem `.lg-kontakt__vorm-sisu
   div.wpforms-container` jäi täpselt viiki ja kaotas järjekorra tõttu
   (WPFormsi CSS laaditakse teemast hiljem). Nüüd on (0,3,1). */
.lg-kontakt__vorm-sisu div.wpforms-container-full:not(:empty) { margin: 0; }

/* --- WPForms ------------------------------------------------------------
   Vorm on „modern markup" režiimis, mis avaldab kogu kujunduse CSS-muutujatena
   `:root` peal. Kirjutame need `.wpforms-container` peal üle: muutujad
   pärinevad, seega kogu vormi sisu saab uued väärtused ilma pluginat puutumata.
   Muutujate juures spetsiifilisus ei loe — `:root` ja `.wpforms-container` on
   eri elemendid, ja konteineri oma väärtus võidab tema alampuu jaoks alati.

   Ülejäänud reeglid vajavad KÕRGET spetsiifilisust. WPFormsi CSS laaditakse
   teemast hiljem, sest vorm renderdatakse lühikoodi sees ehk pärast
   `wp_head`-i — võrdse spetsiifilisuse korral võidab järjekord ja see on
   plugina kasuks. Sellepärast on allpool `div.wpforms-container .wpforms-form`
   eesliide: see annab ühe elemendi ja ühe klassi rohkem kui plugina kõige
   spetsiifilisem muster.

   Üle kirjutame kõigile saidi vormidele, mitte ainult Kontaktile — WPFormsi
   vorm on veel väljakutse lehel ja küsimustikel, ja pooleldi teemastatud sait
   oleks halvem kui teemastamata. */
/*
 * NB: siin on ainult värvid ja ümardused. Mõõte (`--wpforms-*-size-*`) siit
 * muuta ei saa: WPForms väljastab need eraldi `#wpforms-578` blokis, mille
 * ID-valija (1,0,0) võidab iga klassivalija. Nende ülekirjutamine tähendaks
 * iga vormi ID järgi eraldi reeglit — jätame mõõdud plugina omaks (43px
 * sisend, 41px nupp, 16px silt), sest need on niikuinii mõistlikud.
 */
.wpforms-container {
	--wpforms-field-border-radius: var(--lg-radius);
	--wpforms-field-border-color: var(--lg-rule);
	--wpforms-field-border-color-spare: var(--lg-rule);
	--wpforms-field-background-color: #fff;
	--wpforms-field-text-color: var(--lg-ink);
	--wpforms-field-menu-color: #fff;

	--wpforms-label-color: var(--lg-ink);
	--wpforms-label-sublabel-color: var(--lg-ink-muted);
	/* Veateate punane: sama toon, mis WooCommerce'i veakastil. */
	--wpforms-label-error-color: #b42318;

	--wpforms-button-background-color: var(--lg-gold);
	--wpforms-button-border-color: var(--lg-gold);
	--wpforms-button-text-color: var(--lg-ink);
	--wpforms-button-border-radius: var(--lg-radius);
}
/* Väljad täidavad oma veeru.

   WPFormsi vaikesuurus „medium" annab `max-width: 60%`, mis jättis väljad
   veerust lühemaks: „Nimi" täitis 174px oma 290px veerust ja „Teema" 360px
   oma 601px-st. Tekstiala 60% ei puudutanud, seega vorm nägi rebenenud välja —
   kolm eri laiust neljal väljal. Omaniku teade 10.08.2026.

   Puudutame ainult `medium`-i: see on WPFormsi vaikeväärtus, mida keegi ei ole
   teadlikult valinud. `small` jääb 25% peale — kui keegi tulevikus lühikese
   välja (nt sihtnumber) valib, siis ta mõtles seda.

   Valija on (0,4,2), sest plugina oma `.wpforms-container input.wpforms-field-medium`
   on (0,2,1) ja WPFormsi CSS laaditakse teemast hiljem — viik läheks plugina
   kasuks. Pluginal on sama 100% reegel olemas, aga see istub
   mobiilimurdepunkti sees ja töölaual ei rakendu. */
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}

/* Sildid on saidil poolpaksud — muutujaga saab ainult suuruse, mitte kaalu. */
div.wpforms-container .wpforms-form .wpforms-field-label { font-weight: 600; }
/* Kohustusliku välja tärn eraldi kuldseks: muutuja `--wpforms-label-error-color`
   teenindab ka veateateid, mis peavad punaseks jääma. */
div.wpforms-container .wpforms-form .wpforms-required-label { color: var(--lg-gold-icon); }
/* Nupp: muutujad annavad värvi, hoveri peame ise lisama. */
div.wpforms-container .wpforms-form button.wpforms-submit {
	font-weight: 700;
	transition: background-color 0.15s ease;
}
div.wpforms-container .wpforms-form button.wpforms-submit:hover,
div.wpforms-container .wpforms-form button.wpforms-submit:focus {
	background-color: var(--lg-gold-hover);
}
/* Fookus on saidiülene muster (2px tint), mitte plugina oma. */
div.wpforms-container .wpforms-form input:focus-visible,
div.wpforms-container .wpforms-form select:focus-visible,
div.wpforms-container .wpforms-form textarea:focus-visible,
div.wpforms-container .wpforms-form button.wpforms-submit:focus-visible {
	outline: 2px solid var(--lg-ink);
	outline-offset: 2px;
}
/* Kreemjal paneelil oleks valge tekstiala serv nähtamatu ilma äärist rõhutamata. */
.lg-kontakt__vorm div.wpforms-container .wpforms-form textarea { min-height: 122px; }

@media (max-width: 860px) {
	.lg-kontakt { grid-template-columns: 1fr; gap: 18px; }
	/* Telefonis on foto väiksem, et kaart ei võtaks tervet esimest ekraani. */
	.lg-kontakt__foto { width: 132px; height: 132px; }
	.lg-kontakt__kaart { padding: 20px 16px 18px; }
	.lg-kontakt__vorm-pea { padding: 12px 16px; font-size: 0.93rem; }
	.lg-kontakt__vorm-sisu { padding: 16px; }
}

/* WPFormsi `wpforms-one-half` on püsiv `calc(50% - 10px)` ilma ühtegi
   murdepunkti — telefonis jääks „Nimi" ja „E-post" alla 150px laiaks ja
   kohatäide („kadri@näide.ee") ei mahuks ära. Paneme poolikud üksteise alla.
   Katame kõik WPFormsi laiusklassid, mitte ainult praegu kasutusel olevad:
   järgmine vorm võib kasutada kolmandikke. */
@media (max-width: 620px) {
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-two-fourths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-three-sixths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-third,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-two-thirds,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-fourth,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-three-fourths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-fifth,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-two-fifths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-three-fifths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-four-fifths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-sixth,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-two-sixths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-four-sixths,
	div.wpforms-container .wpforms-form .wpforms-field.wpforms-five-sixths {
		float: none;
		width: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
   OMA RIPPMENÜÜ
   Iga `select` saab nähtava kihi (assets/js/vorm.js). Kuju tuleb kassa
   pakiautomaadi valikust (`.lg-valik`) — omaniku otsus 10.08.2026 —, aga
   otsikast ilmub ainult pikkade loendite juures.

   Pärisselect jääb DOM-i ja on endiselt see, mis vormiga koos ära saadetakse.
   Peidame ta nii, et ta jääks fookusahelast välja, aga ei kaoks vormiandmetest:
   `display: none` teeks mõlemad, `opacity` üksi jätaks ta klõpsatavaks.
   ========================================================================== */

/* Iga lapsreegel kannab `.lg-ripp` eesliidet, seega kaks klassi. See ei ole
   ilu, vaid vajadus: WPFormsi lähtestus `div.wpforms-container-full *` on
   (0,1,1) ja nullib polstri, äärise, tausta, varju JA `position`-i igal
   järeltulijal. Ilma eesliiteta jäi `display: flex` küll peale, aga polster ja
   ääris kadusid — rippmenüü nägi vormis välja nagu paljas tekstiloend
   (10.08.2026). Kahe klassiga võidame, sest klasside arvu võrreldakse enne
   elemente. */
.lg-ripp { position: relative; }
/* Juurel on sama häda ja tema puhul on tagajärg hullem: kui `position` jääb
   lähtestuse tõttu `static`-uks, ei ole `.lg-ripp` enam paneeli
   positsioneerimise alus. Paneel hakkab arvestama kaugemat esivanemat, mistõttu
   `top: calc(100% + 6px)` mõõdetakse VALE elemendi kõrgusest: töölaual tekkis
   nupu ja paneeli vahele suur tühik ning telefonis maandus paneel ekraanilt
   välja, nii et tundus, nagu select ei avanekski. Omaniku teade 10.08.2026. */
.wpforms-container .lg-ripp { position: relative; }
/* Rippmenüüga välja EI TOHI lõigata.
   WPFormsil on reegel
     div.wpforms-container .wpforms-form .wpforms-field:not(…6 erandit)
       { overflow-x: hidden }
   ja `overflow-x: hidden` teeb `overflow-y` automaatselt `auto`-ks — väljast
   saab lõikav kast. Avatud paneel ulatub definitsiooni järgi väljast välja ja
   nii kadus ta ära: telefonis nägi see välja, nagu jääks paneel järgmise
   („Sõnum") välja alla peitu (omaniku teade 10.08.2026; mõõdetud 375px laiuses
   — välja kast 954..1066, paneel 791..997 ehk 163px lõigati pealt maha).

   Plugin ise jätab sellest reeglist välja OMA rippmenüü
   (`wpforms-field-select-style-modern`) — täpselt sama vajaduse pärast. Meie
   ei saa seda klassi laenata, sest sellega tuleks kaasa hunnik Choices.js-i
   stiile, mille markupit meil ei ole.

   `!important` on siin ainus mõistlik tee: valija spetsiifilisus on (0,9,1),
   sest iga `:not()` loeb oma argumendi järgi klassina. Sama numbri kokku
   ajamine tähendaks kümne klassiga valijat, mis ei ütleks lugejale midagi.
   Klassi paneb vorm.js sellele väljale, mille sees rippmenüü päriselt on —
   ülejäänud väljad jäävad plugina lõike alla, nagu plugin tahtis. */
.wpforms-container .wpforms-field.lg-vali--ripp { overflow: visible !important; }
.lg-ripp .lg-ripp__algne {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}
.lg-ripp .lg-ripp__nupp {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 10px 12px;
	background: var(--lg-white);
	border: 2px solid var(--lg-line);
	border-radius: 10px;
	font: inherit;
	font-size: 0.92rem;
	color: var(--lg-ink-muted);
	text-align: left;
	cursor: pointer;
}
/* Valik tehtud → kuldne ääris ja tume tekst. Sama signaal,
mis kassas. */
.lg-ripp .lg-ripp__nupp--valitud { border-color: var(--lg-gold); color: var(--lg-ink); }
.lg-ripp .lg-ripp__nupp:focus-visible {
	outline: none;
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}
.lg-ripp .lg-ripp__nupp:disabled {
	background: var(--lg-sand);
	color: rgba(30, 41, 59, 0.38);
	cursor: default;
}
.lg-ripp .lg-ripp__tekst {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lg-ripp .lg-ripp__kaar {
	flex: none;
	width: 15px;
	height: 15px;
	margin-left: auto;
	color: var(--lg-ink-muted);
	transition: transform 0.15s var(--lg-ease);
}
.lg-ripp .lg-ripp__nupp--avatud .lg-ripp__kaar { transform: rotate(180deg); }

.lg-ripp .lg-ripp__paneel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	background: var(--lg-white);
	border: 1px solid var(--lg-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px -10px rgba(30, 41, 59, 0.3);
	overflow: hidden;
}
/* Kui nupu all ei mahu,
avaneb paneel ülespoole — suuna mõõdab vorm.js
   avamise hetkel,
sest leht kerib vahepeal. */
.lg-ripp .lg-ripp__paneel--yles {
	top: auto;
	bottom: calc(100% + 6px);
	box-shadow: 0 -14px 34px -10px rgba(30, 41, 59, 0.3);
}
.lg-ripp .lg-ripp__loend {
	list-style: none;
	margin: 0;
	padding: 6px 0 8px;
	max-height: 250px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--lg-gold) transparent;
}
.lg-ripp .lg-ripp__loend::-webkit-scrollbar { width: 7px; }
.lg-ripp .lg-ripp__loend::-webkit-scrollbar-thumb { background: var(--lg-gold); border-radius: 4px; }
.lg-ripp .lg-ripp__loend::-webkit-scrollbar-track { background: transparent; }
.lg-ripp .lg-ripp__loend li + li { margin-top: 0; }
.lg-ripp .lg-ripp__ryhm {
	padding: 10px 14px 4px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--lg-ink-muted);
}
.lg-ripp .lg-ripp__ryhm:first-child { padding-top: 2px; }
.lg-ripp .lg-ripp__valik {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 0.9rem;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color var(--lg-dur) var(--lg-ease);
}
/* Otsing peidab read `hidden`-iga; display-reegel lööks selle üle. */
.lg-ripp .lg-ripp__valik[hidden],
.lg-ripp .lg-ripp__ryhm[hidden] { display: none; }
.lg-ripp .lg-ripp__valik:hover { background: var(--lg-cream); }
/* Klahviga liikumine saab kuldse serva,
et see eristuks hiirega hõljumisest —
   muidu ei tea klaviatuurikasutaja,
kus ta on,
kui hiir on mõne rea kohal. */
.lg-ripp .lg-ripp__valik--klahv { background: var(--lg-cream); box-shadow: inset 2px 0 0 var(--lg-gold); }
.lg-ripp .lg-ripp__valik[aria-selected="true"] { background: var(--lg-cream); font-weight: 600; color: #6d5615; }
.lg-ripp .lg-ripp__valik[aria-selected="true"]::after {
	content: "";
	margin-left: auto;
	flex: none;
	width: 14px;
	height: 14px;
	background: currentcolor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5.5 5.5L20 7"/></svg>') center / contain no-repeat;
}
.lg-ripp .lg-ripp__valik[aria-disabled="true"] { color: var(--lg-ink-muted); cursor: default; }
.lg-ripp .lg-ripp__otsikast { position: relative; margin: 10px 10px 6px; }
.lg-ripp .lg-ripp__otsikast svg {
	position: absolute;
	left: 11px;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	color: var(--lg-ink-muted);
	pointer-events: none;
}
.lg-ripp .lg-ripp__otsing {
	width: 100%;
	margin: 0;
	padding: 8px 12px 8px 33px;
	font: inherit;
	font-size: 0.9rem;
	background: var(--lg-sand);
	border: 1px solid rgba(30, 41, 59, 0.14);
	border-radius: 9px;
}
.lg-ripp .lg-ripp__otsing:focus {
	outline: none;
	background: var(--lg-white);
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}

/* ==========================================================================
   VORMI VALIDEERIMINE JA TEATED (WPForms)
   Omaniku soov 10.08.2026: sama loogika ja stiilid, mis kassas.
   ========================================================================== */

/* WPFormsi enda punane lause välja all läheb peitu — vorm.js tõstab teksti
   `.lg-viga-ikoon` mulli sisse, täpselt nagu korv.js teeb kassas. Peidame
   `label`-i ja `em`-i (WPFormsi „modern markup" kasutab `em`-i), mitte kogu
   välja, sest sama klass on ka tühjal pesal.

   `!important` on siin ainus tee. jQuery Validate ei näita teadet klassiga,
   vaid `$(error).show()`-ga, mis kirjutab elemendile REASISESE stiili
   `style="display: inline"` (mõõdetud testserveris 10.08.2026). Reasisene
   stiil võidab iga valija, ükskõik kui spetsiifiline — enne seda oli reegel
   juba (0,3,2) ja kaotas ikkagi, nii et lause paistis ikooni kõrval ära. */
div.wpforms-container .wpforms-form label.wpforms-error,
div.wpforms-container .wpforms-form em.wpforms-error { display: none !important; }

/* Vigane olek paistab alles pärast esimest esitust: `lg-vorm--proovitud`
   paneb vorm.js. Enne seda ei noomita kedagi, kes alles täidab. */
div.wpforms-container .wpforms-form .lg-vali--vigane .wpforms-field-label { color: var(--lg-error); }
div.wpforms-container .wpforms-form.lg-vorm:not(.lg-vorm--proovitud) .lg-vali--vigane .wpforms-field-label { color: inherit; }
div.wpforms-container .wpforms-form.lg-vorm:not(.lg-vorm--proovitud) .lg-viga-ikoon { display: none; }

/* Ikoon vajab siin oma mõõdud tagasi. Plugina lähtestus
   `div.wpforms-container-full *` (0,1,1) nullib `width`, `background`,
   `border-radius`, `margin` ja `position`, ja kuna WPFormsi CSS tuleb teemast
   HILJEM, kaotab lihtne `.lg-viga-ikoon` (0,1,0) viigi. Mõõdetud testserveris
   10.08.2026: ikoon oli 4,3px lai, läbipaistva taustaga ja nurgeline — ehk
   praktiliselt olematu. `div.wpforms-container` viib valija (0,2,1) peale.

   Mõõdud on kassa omad (`form.lg-kassa ... .lg-viga-ikoon`), et sama märk
   näeks vormis ja kassas ühtemoodi välja. */
div.wpforms-container .lg-viga-ikoon {
	display: inline-flex; align-items: center; justify-content: center;
	position: relative;
	width: 15px; height: 15px; flex: none;
	margin: 0 0 0 6px; padding: 0;
	background: var(--lg-error); border-radius: 50%;
	color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1;
	/* Joondus keskele, mõõdetud 10.08.2026 (omaniku teade: „punased mullid ei
	   ole labeliga tsentris, on natuke allpool"). `text-bottom` — kassa oma —
	   jättis ikooni keskme 2,00px sildi teksti keskmest allapoole, `middle`
	   1,27px. Viimane 1,27px tuleb sellest, et `middle` joondab x-kõrguse, mis
	   ei ole tähtede optiline kesk. `top` nihutab ilma paigutust puutumata ja
	   `em` hoiab nihke õiges suhtes, kui sildi font kunagi muutub. */
	vertical-align: middle; top: -0.08em;
	cursor: help; overflow: visible;
}
/* Mull ja tema nool: lähtestus ulatub ka pseudoelementideni, seega kordame
   siin needki üle. */
div.wpforms-container .lg-viga-ikoon:hover::after,
div.wpforms-container .lg-viga-ikoon:focus::after {
	content: attr(data-lg-vihje);
	position: absolute; bottom: calc(100% + 7px); left: -8px;
	width: max-content; max-width: 240px;
	padding: 7px 11px;
	background: var(--lg-ink); border-radius: 8px;
	color: #fdf9ef;
	font-size: 0.78rem; font-weight: 400; line-height: 1.45;
	white-space: normal; z-index: 40;
}
div.wpforms-container .lg-viga-ikoon:hover::before,
div.wpforms-container .lg-viga-ikoon:focus::before {
	content: ""; position: absolute; bottom: calc(100% + 2px); left: 4px;
	width: 0; height: 0;
	background: none;
	border: 5px solid transparent; border-top-color: var(--lg-ink);
	z-index: 41;
}

div.wpforms-container .wpforms-form.lg-vorm--proovitud .lg-vali--vigane input,
div.wpforms-container .wpforms-form.lg-vorm--proovitud .lg-vali--vigane textarea,
div.wpforms-container .wpforms-form.lg-vorm--proovitud .lg-vali--vigane select {
	border-color: var(--lg-error-soft);
	box-shadow: none;
}
div.wpforms-container .wpforms-form.lg-vorm--proovitud .lg-vali--vigane .lg-ripp__nupp {
	border-color: var(--lg-error-soft);
}

/* Fookus on kuldne ka vigasel väljal: parandamise hetkel ei ole vaja punast
   korrata, vaja on näidata, kus kursor on. */
div.wpforms-container .wpforms-form input:focus,
div.wpforms-container .wpforms-form textarea:focus,
div.wpforms-container .wpforms-form select:focus {
	outline: none;
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 3px var(--lg-focus-ring);
}

/* --- Kinnitus ja üldine viga: saidi teateribad ------------------------
   WPForms annab kinnitusele erekollakasrohelise kasti (#e0ffc7) ja veale
   paljas punase teksti. Mõlemad saavad sama kuju, mis on konto lehe
   teadetel — nii ütleb sait õnnestumist ja tõrget ühtemoodi, ükskõik kust
   see tuleb.

   MÕLEMAD konteineri klassid peavad valijas olema. Pluginal on täpselt sama
   kuju `div.wpforms-container-full .wpforms-confirmation-container-full`
   (0,2,1); viigi korral võidab hilisem laadimine ja WPFormsi CSS tuleb
   teemast hiljem. Mõõdetud testserveris 10.08.2026: kinnitusriba oli endiselt
   #e0ffc7 taustaga, 1px rohelise äärega ja 15px polstriga ehk plugina oma —
   ainult `display: flex` oli meie, sest seda plugin ei sea. `div.wpforms-container.wpforms-container-full`
   viib meid (0,3,1) peale. Mõlemad klassid on WPFormsi ümbrisel alati. */
div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full,
div.wpforms-container.wpforms-container-full div[submit-success] > .wpforms-confirmation-container-full {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 11px 16px;
	background: #eaf5ee;
	border: 0;
	border-radius: var(--lg-radius);
	color: #1a5c31;
	font-size: 0.88rem;
}
div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full::before,
div.wpforms-container.wpforms-container-full div[submit-success] > .wpforms-confirmation-container-full::before {
	content: "";
	display: block;
	flex: none;
	width: 17px;
	height: 17px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.4l3.1 3.1 6-6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* WPFormsi mall paneb teate `<p>` sisse; ribal ei ole tal oma marginaali vaja. */
div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full p,
div.wpforms-container.wpforms-container-full div[submit-success] > .wpforms-confirmation-container-full p { margin: 0; }

div.wpforms-container .wpforms-form .wpforms-error-container {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 16px;
	padding: 11px 16px;
	background: #fdeceb;
	border-radius: var(--lg-radius);
	color: #8a231c;
	font-size: 0.88rem;
	font-weight: 400;
}
div.wpforms-container .wpforms-form .wpforms-error-container::before {
	content: "";
	display: block;
	flex: none;
	width: 17px;
	height: 17px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
div.wpforms-container .wpforms-form .wpforms-error-container p { margin: 0; }
/* WPForms lisab teatesse ekraanilugejale mõeldud peidetud sildi; ribal ei
   tohi see nähtava teksti ette tulla. */
div.wpforms-container .wpforms-form .wpforms-error-container .wpforms-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}