/*
 * UV-Lambid: base styles and shared components. Values come from the design canvas (kujundus/kavand/Stiil.dc.html).
 * Desktop artboards are 1440 px, mobile 390 px. The header switches to the mobile layout below 1024 px,
 * text and sections below 768 px.
 */

@font-face {
	font-family: 'Instrument Sans';
	src: url('../../fonts/InstrumentSans-var.woff2') format('woff2');
	font-weight: 400 700; /* weight axis only; width fixed at 100 % and the glyphs cut to Latin, Estonian and punctuation */
	font-style: normal;
	font-display: swap;
}
/* Instrument Sans has no Cyrillic: Russian letters come from Golos Text under the same family name, so Latin letters,
   numbers and model codes stay in Instrument Sans. The browser loads it only for a page with Cyrillic text (docs/tolked.md). */
@font-face {
	font-family: 'Instrument Sans';
	src: url('../../fonts/GolosText-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
	/* Dark: hero, technology, contact */
	--navy: #07122B;
	--navy-paneel: #0D1B3E;
	--navy-kaart: #13284F;
	--navy-jalus: #050D20;
	--tume-joon: rgba(255, 255, 255, 0.08);
	--tume-kontuur: rgba(255, 255, 255, 0.35);
	--tume-tekst: #FFFFFF;
	--tume-menuu: #E6EAF5;
	--tume-tekst-2: #C9D2E6;
	--tume-tekst-3: #8E9BB8;
	/* Light: products and deciding */
	--hele: #FAFAF8;
	--liiv: #F1EFE9;
	--valge: #FFFFFF;
	--joon: #E4E1DA;
	--joon-2: #EDEBE5;
	--sisend-joon: #C8C4BB;
	--keelatud: #D9D6CF;
	--tekst: #1E1F22;
	--tekst-2: #4A4742;
	--tekst-3: #6B6660;
	/* Accent and links */
	--aktsent: #6C4CFF;
	--aktsent-hover: #5A42C8;
	--aktsent-kuma: rgba(108, 76, 255, 0.45);
	--aktsent-pehme: rgba(108, 76, 255, 0.2);
	--link: #5A42C8;
	--link-hover: #43309A;
	--link-tume: #B9ACFF;
	--link-tume-hover: #D7CFFF;
	/* Safety and states */
	--ohutu: #1F5D3F;
	--ohutu-taust: #E2F0E6;
	--tuhi: #7A4A00;
	--tuhi-taust: #FBEDD3;
	--hoiatus-joon: #F3D49B;
	--hoiatus-tekst: #5C3D00;
	--hoiatus-ikoon: #9A6200;
	--ohutu-tume: #3DDCCB;
	--tuhi-tume: #FFC46B;
	--viga: #B42318;
	--hea: #1F7A50;
	/* Shape */
	--r-nupp: 999px;
	--r-paneel: 24px;
	--r-kaart: 20px;
	--r-plokk: 16px;
	--r-akordion: 14px;
	--r-sisend: 12px;
	--r-logo: 10px;
	--vari-kaart: 0 1px 2px rgba(30, 31, 34, 0.06), 0 10px 28px -16px rgba(30, 31, 34, 0.22);
	--vari-otsus: 0 1px 2px rgba(30, 31, 34, 0.06), 0 12px 32px -18px rgba(30, 31, 34, 0.25);
	--vari-vaike: 0 1px 2px rgba(30, 31, 34, 0.06);
	/* Layout */
	--konteiner: 1280px;
	--serv: 32px;
	--sektsioon: 96px;
	--kiri: 'Instrument Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (max-width: 767px) {
	:root {
		--serv: 16px;
		--sektsioon: 56px;
	}
}

/* ---------- Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 16px;
}

body {
	margin: 0;
	background: var(--hele);
	color: var(--tekst);
	font-family: var(--kiri);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
	body { font-size: 16px; line-height: 1.5; }
}

img, svg, video { max-width: 100%; height: auto; }
/* Icons inside flex buttons and links keep their size instead of shrinking. */
.nupp > svg, .pais__korv > svg, .pais__menuunupp > svg, .ohutusmark > svg { flex: none; }
img { display: block; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
.tume a { color: var(--link-tume); }
.tume a:hover { color: var(--link-tume-hover); }

:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.tume :focus-visible { outline-color: var(--tume-tekst); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0; }

.mono { font-family: var(--kiri); font-variant-numeric: tabular-nums; }

.konteiner {
	width: 100%;
	max-width: calc(var(--konteiner) + 2 * var(--serv)); /* 1280 px content, as in the artboards */
	margin: 0 auto;
	padding-left: var(--serv);
	padding-right: var(--serv);
}

.tume { background: var(--navy); color: var(--tume-tekst); }

/* Copy that differs between the desktop and mobile artboards */
@media (min-width: 768px) { .vaid-mobiil { display: none !important; } }
@media (max-width: 767px) { .vaid-arvuti { display: none !important; } }

.ekraanilugejale {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.jata-vahele {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--valge);
	color: var(--tekst);
	border-radius: var(--r-nupp);
	font-weight: 600;
}
.jata-vahele:focus { top: 12px; }

/* Eyebrow label above headings */
.silt-ulemine {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tekst-3);
}
.silt-ulemine--vaike { font-size: 12px; }
.tume .silt-ulemine { color: var(--tume-tekst-3); }

/* Headings: desktop sizes from the artboards, mobile from the 390 px versions */
.pealkiri-1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
.pealkiri-2 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; }
.pealkiri-3 { font-size: 22px; line-height: 1.2; }

/* ---------- Buttons (≥ 44 px) ---------- */

.nupp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-nupp);
	background: var(--aktsent);
	color: var(--tume-tekst);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-out, transform 0.15s ease-out, border-color 0.15s ease-out;
}
a.nupp, .tume a.nupp { color: var(--tume-tekst); }
.nupp:hover { background: var(--aktsent-hover); color: var(--tume-tekst); }
.nupp:active { transform: scale(0.98); }

.nupp--teisene, a.nupp--teisene {
	background: var(--valge);
	color: var(--tekst);
	border: 1px solid var(--sisend-joon);
	padding: 0 20px;
}
.nupp--teisene:hover { background: var(--valge); color: var(--tekst); border-color: var(--tekst); }

.nupp--kontuur, a.nupp--kontuur {
	background: var(--valge);
	color: var(--tekst);
	border: 1px solid var(--tekst);
	padding: 0 20px;
}
.nupp--kontuur:hover { background: var(--liiv); color: var(--tekst); }

.nupp--tume-kontuur, .tume a.nupp--tume-kontuur {
	background: transparent;
	color: var(--tume-tekst);
	border: 1px solid var(--tume-kontuur);
	padding: 0 20px;
}
.nupp--tume-kontuur:hover { background: rgba(255, 255, 255, 0.06); color: var(--tume-tekst); border-color: rgba(255, 255, 255, 0.6); }

.nupp--tekst, a.nupp--tekst {
	background: none;
	color: var(--link);
	padding: 0 8px;
}
.nupp--tekst:hover { background: none; color: var(--link-hover); }
.tume .nupp--tekst { color: var(--link-tume); }

/* Small buttons stay 44 px high so they are easy to tap. */
.nupp--vaike { min-height: 44px; padding: 0 16px; font-size: 14px; }
.nupp--riba { min-height: 48px; padding: 0 8px; font-size: 13px; }

.nupp[aria-disabled="true"], .nupp:disabled {
	background: var(--keelatud);
	color: var(--tekst-2);
	cursor: not-allowed;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nupp { transition: none; }
	.nupp:active { transform: none; }
}

/* ---------- Safety labels ---------- */

.ohutusmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-nupp);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.ohutusmark svg { flex: none; }
.ohutusmark--ohutu { color: var(--ohutu); background: var(--ohutu-taust); }
.ohutusmark--tuhi { color: var(--tuhi); background: var(--tuhi-taust); }
.ohutusmark--tume { background: var(--navy-kaart); }
.ohutusmark--tume.ohutusmark--ohutu { color: var(--ohutu-tume); }
.ohutusmark--tume.ohutusmark--tuhi { color: var(--tuhi-tume); }
.ohutusmark--vaike { font-size: 12px; padding: 4px 10px; }

/* ---------- Prices ---------- */

.hind { font-size: 20px; font-weight: 700; }
.hind__km { font-size: 13px; color: var(--tekst-3); }
.hind__bruto { font-size: 12px; color: var(--tekst-3); }

.hinnaplokk__hind { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.hinnaplokk .hind__km { font-size: 14px; }
.hinnaplokk__bruto { font-size: 13px; color: var(--tekst-3); }

.mudel { font-size: 12px; color: var(--tekst-3); }

/* ---------- Product card ---------- */

.tootekaart {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-kaart);
	background: var(--valge);
	box-shadow: var(--vari-kaart);
}
.tootekaart__foto {
	position: relative;
	padding: 22px;
	background: var(--liiv);
}
/* Product photos always sit on sand so pictures of different quality look alike. */
.tootefoto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.tootekaart__pilt--suum { transform: scale(1.3); }
.tootekaart__fotolink { display: block; }
.tootekaart__sildid {
	position: absolute;
	left: 14px;
	top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tootekaart__sisu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px 20px;
	flex: 1;
}
.tootekaart__nimi { font-size: 19px; font-weight: 600; line-height: 1.2; }
.tootekaart__nimi a {
	--puude: calc((44px - 1.2em) / 2); /* 44 px tap target without changing the card layout */
	display: block;
	padding: var(--puude) 0;
	margin: calc(-1 * var(--puude)) 0;
	color: var(--tekst);
	text-decoration: none;
}
.tootekaart__nimi a:hover { color: var(--link); }
.tootekaart__tekst { font-size: 14px; color: var(--tekst-2); }
.tootekaart__jalg {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--joon-2);
}
.tootekaart__nupud { display: flex; gap: 6px; }

/* ---------- Form fields ---------- */

.vali { display: grid; gap: 6px; }
.vali label, .vali__silt { font-size: 13px; font-weight: 600; }
.sisend, .vali input:not([type="checkbox"]):not([type="radio"]), .vali select, .vali textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--sisend-joon);
	border-radius: var(--r-sisend);
	background: var(--valge);
	color: var(--tekst);
	font: inherit;
	font-size: 16px; /* 16 px keeps iOS from zooming in */
}
.sisend[aria-invalid="true"], .vali input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]), .vali select[aria-invalid="true"], .vali textarea[aria-invalid="true"] { border: 2px solid var(--viga); }
.sisend:disabled, .vali :disabled { background: var(--liiv); color: var(--tekst-3); }
.vali__viga { font-size: 12px; color: var(--viga); }

/* ---------- Header ---------- */

.pais { border-bottom: 1px solid var(--tume-joon); }
.pais__rida {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* tap target around the smaller image */
}
.logo--jalus { justify-self: start; }

.pais__menuu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 500;
}
.tume .pais__menuu a {
	color: var(--tume-menuu);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 2px solid transparent;
}
.tume .pais__menuu a:hover { color: var(--tume-tekst); }
.tume .pais__menuu a[aria-current="page"] { color: var(--tume-tekst); border-bottom-color: var(--aktsent); }
.pais__menuu-telefon { display: none !important; }
/* The lowercase letters of the logo sit about 11% of its height below the image centre; lift the image so they share
   one line with the menu, phone, button text and cart icon. */
.pais .logo img { transform: translateY(-10%); }
@media (min-width: 1280px) {
	.pais .logo { margin-right: 20px; } /* 48 px to the menu, more than between menu items, so the logo stands apart */
	.pais__paneel { display: contents; } /* the menu sits in the header row */
}

.tume .pais__telefon {
	color: var(--tume-menuu);
	text-decoration: none;
	font-size: 14px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.pais__kontakt { font-size: 14px; padding: 0 18px; }

.tume .pais__korv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	color: var(--tume-tekst);
	text-decoration: none;
}
.korvi-arv {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--r-nupp);
	background: var(--aktsent);
	color: var(--tume-tekst);
	font-size: 13px;
	line-height: 1;
}
.korvi-arv--tume { min-width: 20px; height: 20px; font-size: 12px; background: var(--tekst); }

.pais__menuunupp {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tume-tekst);
	cursor: pointer;
}

/* Checkout header: steps instead of the menu */
.pais--kassa .pais__rida { flex-wrap: nowrap; justify-content: space-between; }
.kassa-sammud {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--tume-tekst-3);
}
.tume .kassa-sammud a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tume-tekst-2); text-decoration: none; }
.kassa-sammud li { display: flex; align-items: center; }
.kassa-sammud__nimi { margin-left: 0.3em; } /* the step number and name are flex items, so the space between them is lost */
.kassa-sammud [aria-current="step"] { color: var(--tume-tekst); font-weight: 600; }
.pais__ikoonnupp { display: none; }

@media (max-width: 1279px) {
	/* Below 1280 px the menu links and the language switcher open in a panel under the header row
	   (Avaleht-mobiil.dc.html, Keelevahetaja.dc.html): with the switcher the full header no longer fits one row. */
	.pais:not(.pais--kassa) .pais__rida { flex-wrap: nowrap; gap: 2px 20px; }
	.pais:not(.pais--kassa) .logo { margin-right: auto; }
	.pais__menuunupp { display: inline-flex; }
	.pais:not(.pais--kassa) .keel { display: none; }
	.pais__paneel {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		z-index: 30;
		flex-direction: column;
		gap: 16px;
		padding: 8px var(--serv) 20px;
		background: var(--navy-paneel);
		border-bottom: 1px solid var(--tume-joon);
	}
	.pais { position: relative; }
	.pais.on-avatud .pais__paneel { display: flex; }
	.pais__menuu { flex-direction: column; gap: 2px; flex: none; }
	.pais__paneel .keel-segment { display: block; max-width: 420px; } /* beats the default display: none further down */
	/* Without JavaScript the menu is a plain list under the logo and the button is hidden. */
	html:not(.js) .pais__rida { flex-wrap: wrap; }
	html:not(.js) .pais__paneel { display: flex; position: static; width: 100%; padding: 0 0 8px; background: none; border: 0; }
	html:not(.js) .pais__menuunupp { display: none; }
	.tume .pais__menuu a {
		min-height: 48px;
		font-size: 17px;
		font-weight: 600;
		color: var(--tume-tekst);
		border-bottom: 1px solid var(--tume-joon);
	}
	.tume .pais__menuu a[aria-current="page"] { border-bottom-color: var(--tume-joon); }
	.tume .pais__menuu a:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.pais:not(.pais--kassa) .pais__rida { padding-top: 12px; padding-bottom: 12px; }
	.pais:not(.pais--kassa) .logo img { height: 30px; width: auto; }
	/* the phone number stays in the header row, so the panel does not repeat it */
}
@media (max-width: 1023px) {
	.pais__rida { flex-wrap: nowrap; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
	.pais .logo { margin-right: auto; }
	.pais .logo img { height: 26px; width: auto; }
	.pais__telefon, .pais__kontakt { display: none !important; }
	.korvi-arv { min-width: 20px; height: 20px; font-size: 12px; }
	.tume .pais__korv { gap: 4px; }

	.tume .pais__menuu .pais__menuu-telefon {
		display: flex !important;
		margin-top: 8px;
		min-height: 44px;
		font-size: 15px;
		font-weight: 400;
		color: var(--link-tume);
		border: 0;
	}
	/* Mobile checkout (Kassa-mobiil.dc.html): back to cart, steps, call button; no logo. */
	.pais--kassa .logo { display: none; }
	.tume .pais__ikoonnupp {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		color: var(--tume-tekst);
		text-decoration: none;
	}
	.pais--kassa .kassa-sammud { gap: 14px; font-size: 13px; white-space: nowrap; }
}


/* Narrow phones: the checkout header also has the language button, so only the current step keeps its name
   (Keelevahetaja.dc.html); the others stay as numbers and their names stay for screen readers. */
@media (max-width: 479px) {
	.pais--kassa .kassa-sammud li:not([aria-current]) .kassa-sammud__nimi {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.pais--kassa .keel__nupp { padding: 0 4px 0 8px; }
}

/* ---------- Footer ---------- */

.jalus {
	background: var(--navy-jalus);
	border-top: 1px solid var(--tume-joon);
	color: var(--tume-tekst-2);
	font-size: 14px;
}
.tume.jalus a {
	display: inline-flex;
	align-items: center;
	min-height: 24px; /* WCAG 2.2 AA with a mouse; 44 px on touch screens below */
	color: var(--tume-tekst-2);
	text-decoration: none;
}
.tume.jalus a:hover { color: var(--tume-tekst); text-decoration: underline; }
.tume.jalus a.logo { min-height: 44px; }
.tume.jalus a.logo:hover { text-decoration: none; }
.jalus__veerud {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 28px;
}
.jalus__tutvustus { display: grid; gap: 12px; align-content: start; }
.jalus__tutvustus p, .jalus__vaike { color: var(--tume-tekst-3); }
.jalus__veerg { display: grid; gap: 8px; align-content: start; }
.jalus__veerg .silt-ulemine { font-size: 12px; }
.jalus__autor {
	padding-top: 18px;
	padding-bottom: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--tume-tekst-3);
	font-size: 13px;
}
.jalus--ohuke { border-top: 0; }
.jalus__rida {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-top: 32px;
	padding-bottom: 32px;
}
.jalus__lingid { display: flex; flex-wrap: wrap; gap: 4px 24px; }

@media (max-width: 1023px) {
	.jalus__veerud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.jalus__veerud { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
	.jalus__rida { padding-top: 24px; padding-bottom: 24px; }
	.jalus__lingid { gap: 0 16px; }
}
@media (max-width: 767px), (pointer: coarse) {
	.tume.jalus a { min-height: 44px; }
	.jalus__veerg { gap: 0; }
}

/* ---------- Language switcher (Keelevahetaja.dc.html, partials/keelevahetaja.php) ---------- */

.lipp {
	display: block;
	flex: none;
	width: 22px;
	height: 16px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35);
}

/* Flag button and its panel: the header from 1280 px, and the checkout header */
.keel { position: relative; }
.keel__nupp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 8px 0 12px;
	border: 0;
	border-radius: var(--r-nupp);
	background: none;
	color: var(--tume-menuu);
	font: inherit;
	cursor: pointer;
}
.keel__nupp:hover, .keel.on-avatud .keel__nupp { background: rgba(255, 255, 255, 0.08); }
.keel__nupp > svg { transition: transform 0.15s ease; }
.keel.on-avatud .keel__nupp > svg { transform: rotate(180deg); }
.keel__paneel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	width: 216px;
	margin: 0;
	padding: 6px;
	box-sizing: border-box;
	list-style: none;
	background: var(--navy-paneel);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-plokk);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}
.keel.on-avatud .keel__paneel { display: grid; gap: 2px; }
.keel__valik, .tume .keel__valik {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--tume-tekst-2);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.keel__valik span { flex: 1; }
.keel__valik:hover, .tume .keel__valik:hover { background: rgba(255, 255, 255, 0.06); color: var(--tume-tekst); }
.keel__valik[aria-current], .tume .keel__valik[aria-current] { color: var(--tume-tekst); font-weight: 600; }
.keel__valik > svg { color: var(--link-tume); }
@media (prefers-reduced-motion: reduce) { .keel__nupp > svg { transition: none; } }
/* Without JavaScript: the three flags in a row, names for screen readers */
html:not(.js) .keel__nupp { display: none; }
html:not(.js) .keel__paneel { display: flex; position: static; width: auto; padding: 0; gap: 2px; background: none; border: 0; box-shadow: none; }
html:not(.js) .keel__valik { padding: 0 8px; }
html:not(.js) .keel__valik span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Three equal parts in the menu panel below 1280 px (Avaleht-mobiil.dc.html) */
.keel-segment { display: none; }
.keel-segment__silt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tume-tekst-3);
}
.keel-segment__valikud {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin: 8px 0 0;
	padding: 4px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--r-nupp);
}
.keel-segment__valik, .tume .keel-segment__valik {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border-radius: var(--r-nupp);
	color: var(--tume-menuu);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.keel-segment__valik:hover { background: rgba(255, 255, 255, 0.06); }
.keel-segment__valik[aria-current], .tume .keel-segment__valik[aria-current] { background: var(--valge); color: var(--navy); }

/* Footer row */
.jalus__keeled { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.jalus__autor:has(.jalus__keeled) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.tume.jalus .jalus__keel { gap: 8px; }
.tume.jalus .jalus__keel[aria-current] { color: var(--tume-tekst); font-weight: 600; }

/* ---------- Mobile bottom bar ---------- */

.alumine-riba { display: none; }

@media (max-width: 1023px) {
	.alumine-riba {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		position: sticky;
		bottom: 0;
		z-index: 20;
		padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
		background: var(--valge);
		border-top: 1px solid var(--joon);
	}
}


/* ---------- Interactive components (homepage and product pages) ---------- */

.ei-murdu { white-space: nowrap; }
.sektsioon { padding-top: var(--sektsioon); padding-bottom: var(--sektsioon); }
.nupp--suur { min-height: 48px; padding: 0 26px; font-size: 15px; }

.kiip {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--sisend-joon);
	border-radius: var(--r-nupp);
	background: var(--valge);
	color: var(--tekst);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.kiip[aria-pressed="true"] { border-color: var(--tekst); background: var(--tekst); color: var(--tume-tekst); }
.kiip--hele { font-weight: 500; padding: 10px 18px; }

/* Empty: invisible but present, so screen readers announce the first message (a newly shown region is often missed). */
.korviteade:empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.korviteade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 20px;
	padding: 14px 18px;
	border: 1px solid var(--sisend-joon);
	border-radius: var(--r-akordion);
	background: var(--valge);
	font-size: 15px;
}
.korviteade a { font-size: 14px; font-weight: 600; }

/* Accessory chip (cart rows, product decision card): ticked, it goes into the cart with the device. */
.lisakiip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--sisend-joon);
	border-radius: var(--r-nupp);
	background: var(--valge);
	font-size: 13px;
	cursor: pointer;
}
.lisakiip:has(input:checked) { border-color: var(--tekst); background: var(--liiv); }
.lisakiip input { width: 16px; height: 16px; margin: 0; accent-color: var(--aktsent); }
.lisakiip__hind { color: var(--tekst-3); }

.tume-hoiatus { grid-column: 1 / -1; }

.tyybilyliti {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-plokk);
	background: rgba(255, 255, 255, .06);
}
.tyybilyliti button {
	flex: 1;
	display: grid;
	gap: 3px;
	justify-items: start;
	align-content: center;
	min-height: 56px;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--r-sisend);
	background: transparent;
	color: var(--tume-tekst-2);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.tyybilyliti button[aria-pressed="true"] { background: rgba(108, 76, 255, .28); box-shadow: inset 0 0 0 1px #8E78FF; color: var(--tume-tekst); }
.tyybilyliti__nimi { font-size: 15px; font-weight: 600; }
.tyybilyliti__silt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.tyybilyliti__silt > span { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tyybilyliti__silt--ohutu { color: var(--ohutu-tume); }
.tyybilyliti__silt--tuhi { color: var(--tuhi-tume); }

.tehnoloogia__punktid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tehnoloogia__punktid li { display: grid; }
.tehnoloogia__punkt { grid-area: 1 / 1; display: flex; gap: 14px; align-items: flex-start; }
.tehnoloogia__punkt strong { color: var(--tume-tekst); }
.tehnoloogia__nr {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--aktsent);
	color: var(--tume-tekst);
	font-weight: 600;
}

/* Text of the other device keeps its place (no jump), hidden from view and screen readers. */
.tehnoloogia[data-tyyp="retsi"] [data-tyybile="otse"],
.tehnoloogia[data-tyyp="otse"] [data-tyybile="retsi"] { visibility: hidden; }
.tehnoloogia[data-tyyp="retsi"] [data-ainult-tyybile][data-tyybile="otse"],
.tehnoloogia[data-tyyp="otse"] [data-ainult-tyybile][data-tyybile="retsi"] { display: none; }

.tume-hoiatus {
	display: flex;
	gap: 12px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 196, 107, .3);
	border-radius: var(--r-plokk);
	background: rgba(255, 196, 107, .08);
	font-size: 14px;
	color: #FBE3BF;
}
.tume-hoiatus svg { flex: none; color: var(--tuhi-tume); }
.tume-hoiatus strong { color: var(--tume-tekst); }

.sammunupp {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--r-nupp);
	background: rgba(255, 255, 255, .08);
	color: var(--tume-tekst);
	font: inherit;
	cursor: pointer;
}
.sammunupp:hover { background: rgba(255, 255, 255, .14); }

.joonis { padding: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-kaart); background: var(--navy-paneel); }
.joonis__ala { aspect-ratio: 2 / 1; }
.joonis__ala > svg { display: block; width: 100%; height: auto; }
.joonis__svg [data-kui]:not(.on-nahtav) { display: none; }

.valija__rida { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.valija__rida label { font-size: 14px; font-weight: 600; }
.valija__samm { display: inline-flex; align-items: center; gap: 6px; }
.valija__vaartus { font-size: 20px; font-weight: 600; text-align: center; }
.ymarnupp {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--sisend-joon);
	border-radius: var(--r-nupp);
	background: var(--valge);
	color: var(--tekst);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.liugur { width: 100%; min-height: 44px; margin: 8px 0 0; accent-color: var(--aktsent); }
.liugur__piirid { display: flex; justify-content: space-between; font-size: 14px; color: var(--tekst-2); }

/* ---------- Accordions (FAQ, Health Board on phones) ---------- */

/* Without JavaScript every answer is open (the buttons need a script). */
html:not(.js) .akordion__sisu[hidden] { display: block; }
html:not(.js) .akordion__mark { visibility: hidden; }

.akordion { display: grid; gap: 8px; }
.akordion__osa { border: 1px solid var(--joon); border-radius: var(--r-akordion); background: var(--valge); }
.akordion__nupp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 56px;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--r-akordion);
	background: none;
	color: var(--tekst);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.akordion__mark { color: var(--tekst-3); }
.akordion__sisu { padding: 0 20px 18px; font-size: 15px; color: var(--tekst-2); }
.akordion__nupp--ikoon { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px; }
.akordion__nupp--ikoon .akordion__mark { text-align: right; }
.akordion__nupp--ikoon .terviseamet__ikoon { width: 28px; height: 28px; border-radius: 8px; }
.akordion__nupp--ikoon .terviseamet__ikoon svg { width: 15px; height: 15px; }

@media (max-width: 767px) {
	.korviteade { display: block; padding: 12px 14px; border-radius: var(--r-sisend); font-size: 14px; }
	.lisakiip { gap: 6px; padding: 0 10px; font-size: 12px; }
	.joonis { margin-top: 8px; padding: 14px; border-radius: var(--r-plokk); }
	.tume-hoiatus { padding: 14px 16px; border-radius: var(--r-akordion); font-size: 13px; }
	.akordion__nupp { gap: 12px; min-height: 52px; padding: 12px 14px; font-size: 15px; }
	.akordion__nupp--ikoon { gap: 10px; }
	.akordion__sisu { padding: 0 14px 14px; font-size: 14px; }
	.akordion__sisu--ikoon { padding-left: 52px; }
	.valija__rida label, .valija__kysimus { font-size: 13px; }
	.valija__vaartus { font-size: 18px; }
	.liugur { margin-top: 6px; }
	.valija__rida label, .valija__kysimus { font-size: 13px; }
}

.valija__vaartus { min-width: var(--laius, auto); }
@media (max-width: 767px) { .valija__vaartus { min-width: var(--laius-m, var(--laius, auto)); } }

/* ---------- Contact panel "Jäta kontakt" (Tagasihelistamine.dc.html) ---------- */

html:has(.kontaktipaneel[open]) { overflow: hidden; }
.kontaktipaneel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--valge);
	color: var(--tekst);
	box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.4);
	overflow-y: auto;
}
.kontaktipaneel::backdrop { background: rgba(7, 18, 43, 0.35); }
.kontaktipaneel[open] { animation: kp-sisse 0.22s ease-out; }
@keyframes kp-sisse { from { transform: translateX(32px); opacity: 0; } }
.kontaktipaneel__sisu { display: grid; gap: 14px; align-content: start; min-height: 100%; padding: 28px; }
.kontaktipaneel__pais { display: flex; justify-content: space-between; align-items: center; }
.kontaktipaneel__pealkiri { font-size: 22px; }
.kontaktipaneel__pealkiri:focus { outline: none; }
.kontaktipaneel__sulge {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin-right: -10px;
	border: 0;
	border-radius: var(--r-nupp);
	background: none;
	color: var(--tekst);
	cursor: pointer;
}
.kontaktipaneel__sulge:hover { background: var(--liiv); }
.kontaktipaneel__vorm { display: grid; gap: 14px; }
.kontaktipaneel__vorm[hidden], .kontaktipaneel__valmis[hidden], .kontaktipaneel__kontekst[hidden], .kontaktipaneel [hidden] { display: none; }
.kontaktipaneel__sissejuhatus { font-size: 14px; color: var(--tekst-2); }
.kontaktipaneel__kontekst {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--r-sisend);
	background: var(--liiv);
	font-size: 13px;
}
.kontaktipaneel__kontekst img { width: 44px; height: 32px; object-fit: contain; mix-blend-mode: multiply; }
.kontaktipaneel__kontekst-tekst { flex: 1; }
.kontaktipaneel__eemalda {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--link);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.kontaktivorm__viga { display: flex; gap: 6px; font-size: 13px; }
.kontaktivorm__viga[hidden] { display: none; }
.kontaktivorm__viga svg { flex: none; margin-top: 2px; }
.kontaktipaneel__saada { min-height: 50px; }
.kontaktipaneel__saada[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.kontaktipaneel__markus { font-size: 12px; color: var(--tekst-3); }
.kontaktivorm__lopp { position: absolute; left: -9999px; }
.kontaktipaneel__valmis { display: grid; gap: 14px; }
.kontaktipaneel__kinnitus { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-plokk); background: var(--ohutu-taust); }
.kontaktipaneel__linnuke { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--valge); color: var(--ohutu); }
.kontaktipaneel__aitah { font-size: 18px; font-weight: 700; color: var(--ohutu); }
.kontaktipaneel__kontakt { font-size: 14px; }
.kontaktipaneel__kontakt a { color: var(--tekst); }
.kontaktipaneel__kaasa { font-size: 13px; color: var(--tekst-2); }
/* First way: call now (the quickest); the form is the second way */
.kontaktipaneel__helista {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 18px 14px 14px;
	border-radius: var(--r-plokk);
	background: var(--aktsent);
	color: var(--tume-tekst);
	text-decoration: none;
	box-shadow: 0 12px 28px -16px var(--aktsent-kuma);
	transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}
.kontaktipaneel__helista:hover { background: var(--aktsent-hover); color: var(--tume-tekst); }
.kontaktipaneel__helista:active { transform: scale(0.98); }
.kontaktipaneel__helista-ikoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.kontaktipaneel__helista-tekst { display: grid; gap: 2px; }
.kontaktipaneel__helista-silt { font-size: 14px; font-weight: 500; }
.kontaktipaneel__helista-nr { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.kontaktipaneel__helista-nool { font-size: 20px; transition: transform 0.15s ease-out; }
.kontaktipaneel__helista:hover .kontaktipaneel__helista-nool { transform: translateX(3px); }
.kontaktipaneel__eraldaja { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 13px; color: var(--tekst-3); }
.kontaktipaneel__eraldaja::before, .kontaktipaneel__eraldaja::after { content: ""; flex: 1; height: 1px; background: var(--joon); }
.kontaktipaneel__vormi-pais { display: grid; gap: 4px; }
.kontaktipaneel__vormi-pealkiri { font-size: 17px; line-height: 1.25; }
.kontaktipaneel__vormi-tekst { font-size: 14px; color: var(--tekst-2); }

/* Phones: bottom sheet */
@media (max-width: 767px) {
	.kontaktipaneel {
		inset: auto 0 0 0;
		width: 100%;
		height: auto;
		max-height: 92dvh;
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.5);
	}
	.kontaktipaneel[open] { animation-name: kp-yles; }
	@keyframes kp-yles { from { transform: translateY(40px); opacity: 0; } }
	.kontaktipaneel__sisu { gap: 12px; min-height: 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.kontaktipaneel__sang { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--sisend-joon); }
	.kontaktipaneel__pealkiri { font-size: 20px; }
	.kontaktipaneel__vorm { gap: 12px; }
	.kontaktipaneel__kontekst { gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12px; }
	.kontaktivorm__viga { font-size: 12px; }
	.kontaktipaneel__markus { font-size: 11px; text-align: center; }
	.kontaktipaneel__helista { gap: 12px; padding: 12px 16px 12px 12px; }
	.kontaktipaneel__helista-ikoon { width: 42px; height: 42px; }
	.kontaktipaneel__helista-silt { font-size: 13px; }
	.kontaktipaneel__helista-nr { font-size: 20px; }
	.kontaktipaneel__eraldaja { margin: 0; }
	.kontaktipaneel__vormi-pealkiri { font-size: 16px; }
	.kontaktipaneel__vormi-tekst { font-size: 13px; }
	.kontaktipaneel__kinnitus { gap: 8px; padding: 16px; border-radius: var(--r-akordion); }
	.kontaktipaneel__aitah { font-size: 17px; }
	.kontaktipaneel__kontakt { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.kontaktipaneel[open] { animation: none; }
}

/* ---------- Breadcrumb (product pages, catalog) ---------- */

.leivapuru { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--tekst-3); }
.leivapuru a { display: inline-flex; align-items: center; min-height: 24px; color: var(--tekst-3); }
.leivapuru [aria-current] { color: var(--tekst); }

/* ---------- Tables (product pages, catalog comparison) ---------- */

.tabelikaart { overflow-x: auto; border-radius: var(--r-kaart); background: var(--valge); box-shadow: var(--vari-vaike); }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th {
	padding: 14px 12px;
	border-bottom: 1px solid var(--joon-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	color: var(--tekst-3);
}
.tabel td { padding: 14px 12px; border-bottom: 1px solid var(--joon-2); }
.tabel th:first-child, .tabel td:first-child { padding-left: 18px; }
.tabel th:last-child, .tabel td:last-child { padding-right: 18px; }
.tabel .paremale { text-align: right; }
.tabel tr.on-valitud { background: var(--liiv); }
.tabel__nimi { font-weight: 600; }
.tabel__kood { font-size: 12px; color: var(--tekst-3); }
.tabel__hind { font-weight: 600; }
.tabel td a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; font-weight: 600; }
.tabel__valitud { font-size: 14px; font-weight: 600; color: var(--tekst-3); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel__jalus { font-size: 14px; color: var(--tekst-2); }
.tabel__jalus a { font-weight: 600; }

/* ---------- Content pages (terms, privacy, contact) ---------- */

.leht { padding-top: 64px; padding-bottom: var(--sektsioon); }
.leht__sisu { max-width: 760px; }
.leht__sisu > * + * { margin-top: 1em; }
.leht__sisu h1 { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -0.02em; margin-bottom: 0.6em; }
.leht__sisu h2 { font-size: 24px; margin-top: 1.6em; }
.leht__sisu h3 { font-size: 19px; margin-top: 1.4em; }
.leht__sisu ul, .leht__sisu ol { padding-left: 1.2em; }
.leht__sisu table { border-collapse: collapse; width: 100%; }
.leht__sisu th, .leht__sisu td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--joon); }

/* Withdrawal form (page-taganemine.php) */
.taganemine { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px 16px; padding: 28px; border: 1px solid var(--joon); border-radius: var(--r-kaart); background: var(--valge); box-shadow: var(--vari-kaart); }
.taganemine .vali { min-width: 0; }
.taganemine__lai, .taganemine__teade { grid-column: 1 / -1; }
.taganemine__abi { font-size: 12px; color: var(--tekst-3); }
.taganemine__teade { margin: 0; padding: 12px 14px; border-radius: var(--r-sisend); font-size: 14px; }
.taganemine__teade--edu { background: var(--ohutu-taust); color: var(--ohutu); }
.taganemine__teade--viga { background: #FDECEA; color: var(--viga); }

@media (max-width: 767px) {
	.leht { padding-top: 32px; }
	.taganemine { grid-template-columns: 1fr; padding: 16px; }
}

/* ---------- Content pages (Sisuleht.dc.html / -mobiil): page.php, page-taganemine.php ---------- */

.sisupais { background: var(--liiv); border-bottom: 1px solid var(--joon); }
.sisupais__ruudustik { display: grid; gap: 24px; padding-top: 40px; padding-bottom: 48px; align-items: end; }
.sisupais__ruudustik--myyja { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; }
.sisupais__tekst { display: grid; gap: 14px; justify-items: start; }
.sisupais__leivapuru { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--tekst-3); }
.sisupais__leivapuru a { color: var(--tekst-3); }
.sisupais__leivapuru a:hover { color: var(--tekst); }
.sisupais__pealkiri { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.sisupais__juhatus { max-width: 620px; font-size: 18px; color: var(--tekst-2); }
.sisupais__kehtib { margin-top: 4px; padding: 6px 12px; border: 1px solid var(--joon); border-radius: var(--r-nupp); background: var(--valge); font-size: 13px; font-weight: 600; }
.sisupais__myyja { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid var(--joon); border-radius: var(--r-plokk); background: var(--valge); font-size: 14px; }
.sisupais__myyja strong { font-size: 16px; }
.sisupais__myyja-andmed { color: var(--tekst-2); }
.sisupais__myyja-kontakt { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--joon-2); }
.sisupais__myyja-kontakt a:first-child { font-weight: 600; color: var(--tekst); text-decoration: none; }

.luhidalt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 40px; }
.luhidalt__kaart { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--joon); border-radius: var(--r-plokk); background: var(--valge); }
.luhidalt__ikoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #EEEAFF; color: var(--link); }
.luhidalt__tekst { font-size: 14px; color: var(--tekst-2); }

.sisuleht__keha { display: grid; gap: 40px; padding-top: 40px; padding-bottom: var(--sektsioon); }
.sisuleht__keha--sisukord { grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; }

.sisukord { position: sticky; top: 24px; display: grid; gap: 16px; }
.sisukord__nupp { display: none; }
.sisukord__nimekiri { display: grid; gap: 2px; }
.sisukord__pealkiri { padding: 0 12px 8px; }
.sisukord__nimekiri a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; min-height: 40px; padding: 4px 12px; border-radius: 10px; color: var(--tekst-2); font-size: 15px; text-decoration: none; }
.sisukord__nimekiri a .mono { color: #8A857D; font-size: 14px; }
.sisukord__nimekiri a:hover { color: var(--tekst); background: var(--liiv); }
.sisukord__nimekiri a[aria-current] { color: var(--tekst); background: var(--liiv); font-weight: 600; }
.sisukord__nimekiri a[aria-current] .mono { color: var(--link); }
.sisukord__lisa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 16px 12px 0; border-top: 1px solid var(--joon); font-size: 14px; font-weight: 600; }

/* The text column */
.sisu { max-width: 760px; min-width: 0; font-size: 17px; line-height: 1.7; color: #2B2C30; }
.sisu > * + * { margin-top: 16px; }
.sisu > p:first-child { font-size: 18px; color: var(--tekst-2); }
.sisu__osa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 40px !important; padding-top: 40px; border-top: 1px solid var(--joon); font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--tekst); scroll-margin-top: 24px; }
.sisu > .sisu__osa:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.sisu__nr { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--link); }
.sisu__osa .sihtryhm__silt { align-self: center; letter-spacing: 0; }
.sisu h3 { font-size: 20px; margin-top: 28px; color: var(--tekst); }
.sisu ul { display: grid; gap: 10px; padding-left: 20px; }
.sisu table { border-collapse: collapse; width: 100%; }
.sisu th, .sisu td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--joon); }

/* Numbered steps */
.sisu ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; counter-reset: samm; font-size: 15px; line-height: 1.5; }
.sisu ol > li { counter-increment: samm; display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--joon); border-radius: 14px; background: var(--valge); }
.sisu ol > li::before { content: counter(samm); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #EDEBE5; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sisu ol > li:first-child::before { background: var(--aktsent); color: var(--tume-tekst); }

/* A rule for one kind of buyer, and two side by side */
.sihtryhm { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border: 1px solid var(--joon); border-radius: 14px; background: var(--valge); font-size: 16px; line-height: 1.65; }
.sihtryhm__silt, .sihtryhm__silt--ettevote { justify-self: start; display: inline-block; padding: 3px 10px; border-radius: var(--r-nupp); background: #E7E5DF; color: var(--tekst); font-size: 12px; font-weight: 600; line-height: 1.5; }
.sihtryhm--era .sihtryhm__silt, .sihtryhm__silt--era { background: #EEEAFF; color: #4A35B8; }
.sihtryhmad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Call-out with a button ([[kast: …]] in the text) */
.sisukast { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 22px; border: 1px solid var(--joon); border-radius: var(--r-plokk); background: var(--valge); }
.sisukast__tekst { display: grid; gap: 4px; font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.sisukast__pealkiri { font-size: 17px; font-weight: 600; color: var(--tekst); }
.sisukast__nupp { white-space: nowrap; }

.sisukontakt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 48px !important; padding: 32px 36px; border-radius: var(--r-kaart); line-height: 1.55; }
.sisukontakt__tekst { display: grid; gap: 6px; font-size: 15px; color: var(--tume-tekst-2); }
.sisukontakt__pealkiri { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--tume-tekst); }
.sisukontakt__lingid { display: grid; gap: 6px; justify-items: end; }
.sisukontakt__lingid a { color: var(--link-tume); }
.sisukontakt__lingid a.sisukontakt__telefon { color: var(--tume-tekst); font-size: 22px; font-weight: 600; text-decoration: none; }

@media (max-width: 1023px) {
	.sisupais__ruudustik--myyja { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.luhidalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sisuleht__keha--sisukord { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.sisukord { position: static; }
	.sisukord__kast { border: 1px solid var(--joon); border-radius: 14px; background: var(--valge); }
	.sisukord__nupp { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
	.sisukord__nupp::-webkit-details-marker { display: none; }
	.sisukord__kast[open] .sisukord__nupp svg { transform: rotate(180deg); }
	.sisukord__pealkiri { display: none; }
	.sisukord__nimekiri { padding: 0 8px 8px; }
	.sisukord__nimekiri a { min-height: 44px; }
	.sisukord__lisa { display: none; }
}

@media (max-width: 767px) {
	.sisupais__ruudustik { padding-top: 20px; padding-bottom: 24px; gap: 16px; }
	.sisupais__tekst { gap: 10px; }
	.sisupais__juhatus { font-size: 15px; }
	.sisupais__kehtib { font-size: 12px; }
	.sisupais__myyja { padding: 16px; }
	.luhidalt { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }
	.luhidalt__kaart { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 14px 16px; border-radius: 0; border-bottom-width: 0; }
	.luhidalt__kaart:first-child { border-radius: var(--r-plokk) var(--r-plokk) 0 0; }
	.luhidalt__kaart:last-child { border-radius: 0 0 var(--r-plokk) var(--r-plokk); border-bottom-width: 1px; }
	.luhidalt__ikoon { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; }
	.luhidalt__pealkiri { font-size: 15px; }
	.luhidalt__tekst { font-size: 13px; }
	.sisuleht__keha { padding-top: 16px; gap: 8px; }
	.sisu { font-size: 16px; line-height: 1.65; }
	.sisu > p:first-child { font-size: 16px; }
	.sisu > * + * { margin-top: 12px; }
	.sisu__osa { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 28px !important; padding-top: 28px; font-size: 23px; }
	.sisu__nr { font-size: 13px; }
	.sisu ol { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.sisu ol > li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: none; }
	.sihtryhmad { grid-template-columns: minmax(0, 1fr); }
	.sihtryhm { padding: 16px; font-size: 15px; line-height: 1.6; }
	.sisukast { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
	.sisukontakt { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px !important; padding: 22px 20px; }
	.sisukontakt__lingid { justify-items: start; }
	.sisukontakt__pealkiri { font-size: 19px; }
	.sisukontakt__lingid a.sisukontakt__telefon { font-size: 20px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* Headings without a number (pages with fewer than three sections, the withdrawal page) and the form in the text */
.sisu h2:not(.sisu__osa) { margin-top: 40px; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--tekst); }
.sisu blockquote { margin: 0; padding: 16px 20px; border-radius: 14px; background: var(--liiv); font-size: 16px; }

/* Withdrawal page (page-taganemine.php): form card left, how it goes right */
.taganemisleht { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.taganemisleht__vorm { scroll-margin-top: 24px; }
.taganemine__pais { grid-column: 1 / -1; display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--joon-2); }
.taganemine__pealkiri { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.taganemine__saada { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 4px; }
.taganemine--saadetud { grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.6; color: var(--tekst-2); }
.taganemine--saadetud .taganemine__pealkiri { color: var(--tekst); }
.taganemine__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ohutu-taust); color: var(--ohutu); }
.taganemisleht__kylg { position: sticky; top: 24px; font-size: 15px; line-height: 1.6; }
.taganemisleht__kylg > h2:not(.sisu__osa) { margin-top: 0; font-size: 20px; }
.taganemisleht__kylg ol { grid-template-columns: minmax(0, 1fr); gap: 14px; font-size: 15px; }
.taganemisleht__kylg ol > li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: none; }
.taganemisleht__kylg .sihtryhm { font-size: 15px; line-height: 1.6; padding: 16px 18px; }
.taganemisleht__kontakt { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid var(--joon); }
.taganemisleht__kontakt .silt-ulemine { margin-bottom: 4px; }
.taganemisleht__kontakt a.mono { font-size: 18px; font-weight: 600; color: var(--tekst); text-decoration: none; }

@media (max-width: 1023px) {
	.taganemisleht { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.taganemisleht__kylg { position: static; }
}
@media (max-width: 767px) {
	.taganemine { padding: 20px 16px; }
	.taganemisleht { gap: 32px; }
}