.g4d-footer {
	background: var( --g4d-bg, #1a1a1a );
	color: var( --g4d-text, #e5e5e5 );
	font-family: var( --g4d-font, inherit );
	padding: var( --g4d-padding, 60px 0 30px 0 );
	border-top: var( --g4d-border-top, none );
	box-sizing: border-box;
}

.g4d-footer * {
	box-sizing: border-box;
}

.g4d-footer__inner {
	max-width: var( --g4d-container, 1200px );
	margin: 0 auto;
	padding: 0 20px;
}

.g4d-footer__columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: var( --g4d-gap, 40px );
}

.g4d-footer__column h4 {
	color: var( --g4d-heading, #fff );
	margin: 0 0 16px 0;
	/* 15.09.2026: see väärtus jääb ALATI allpool oleva "maketil väiksem"
	   reegli (sama selektor, hilisem samas failis) alla - kaskaad võidab
	   selle üle. Hoitud siin SAMA väärtusena, et keegi ei eksiks järgmisel
	   muutmisel (kaks vastuolulist arvu samas failis segadust ei tekita). */
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.g4d-footer__column a {
	color: var( --g4d-link, #cfcfcf );
	text-decoration: none;
	transition: color 0.15s ease;
}

.g4d-footer__column a:hover,
.g4d-footer__column a:focus {
	color: var( --g4d-link-hover, #fff );
}

.g4d-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.g4d-footer__menu li {
	margin-bottom: 10px;
}

.g4d-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.g4d-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	line-height: 1.4;
}

.g4d-footer__contact li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var( --g4d-accent, currentColor );
}

.g4d-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.g4d-footer__social a {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --g4d-icon-bg, rgba( 255, 255, 255, 0.1 ) );
	border-radius: var( --g4d-icon-radius, 50% );
	color: var( --g4d-icon-color, #fff );
}

.g4d-footer__social a:hover {
	background: var( --g4d-accent, rgba( 255, 255, 255, 0.2 ) );
	color: var( --g4d-icon-color, #fff );
}

.g4d-footer__text {
	line-height: 1.6;
}

.g4d-footer__bottom {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba( 128, 128, 128, 0.2 );
	text-align: center;
	font-size: 13px;
	opacity: 0.8;
}

/* ---- Usaldusmärgis ("Turvaline ostukoht") ----
   Kuvatakse ühes kolmest asukohast, vastavalt admini valikule. Pilt ise
   kuvatakse alati algupärases proportsioonis, ilma taustakaardita. */
.g4d-trust-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
a.g4d-trust-badge {
	cursor: pointer;
}
a.g4d-trust-badge:hover {
	transform: translateY( -2px );
}
.g4d-trust-badge-img {
	display: block;
	width: auto;
	height: auto;
	max-height: var( --g4d-badge-size, 60px );
	max-width: calc( var( --g4d-badge-size, 60px ) * 1.8 );
	object-fit: contain;
}

/* Paigutus 1: sotsiaalmeedia veeru pealkirja kõrval. */
.g4d-footer__column-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.g4d-footer__column-head h4 {
	margin: 0;
}
.g4d-footer__column-head .g4d-trust-badge {
	margin-left: auto;
}

/* Paigutus 2: jaluse üleval paremas nurgas. */
.g4d-footer--badge-corner .g4d-footer__inner {
	position: relative;
}
.g4d-footer--badge-corner .g4d-trust-badge {
	position: absolute;
	top: 0;
	right: 20px;
}

/* Paigutus 3: all, koos autoriõiguse reaga (ja "column" tagavaravariant). */
.g4d-footer__bottom--with-badge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	text-align: left;
}
.g4d-footer__bottom--with-badge .g4d-footer__copyright {
	text-align: left;
}

@media ( max-width: 640px ) {
	.g4d-footer__columns {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.g4d-footer__social {
		justify-content: center;
	}
	.g4d-footer__contact li {
		justify-content: center;
	}
	.g4d-footer__column-head {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	.g4d-footer__column-head .g4d-trust-badge {
		margin-left: 0;
	}
	.g4d-footer--badge-corner .g4d-trust-badge {
		position: static;
		display: flex;
		justify-content: center;
		margin: 0 0 20px;
	}
	.g4d-footer__bottom--with-badge {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.g4d-footer__bottom--with-badge .g4d-footer__copyright {
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   JALUS MAKETI JÄRGI (14.09.2026, PDF lk 1)

   Värvid tulevad admini seadetest (inline `--g4d-*` muutujad) — need pani
   paika ühekordne üleminek plugina põhifailis. SIIN on ainult see, mida
   seaded EI KATA: veergude vahejooned, alumise riba oma tume taust,
   pealkirjade tüpograafia ja nimekirjade täpid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Veerud ──────────────────────────────────────────────────────────────
   Maketil on veergude vahel õhuke püstjoon. `auto-fit`/`minmax` jätab
   veergude arvu paindlikuks (kitsal ekraanil vähem veerge), seega joont EI
   SAA panna kindla järjekorranumbri järgi — `border-left` igal veerul + esimese
   tühistamine annab õige tulemuse igal veergude arvul. */
.g4d-footer__columns {
	gap: 0;
	align-items: start;
}
.g4d-footer__column {
	padding: 4px 0 4px 40px;
	border-left: 1px solid var( --g4d-border-color, rgba(255,255,255,0.14) );
}
.g4d-footer__column:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Veeru pealkiri (v1.5.0, 15.09.2026: klient soovis suuremaks nii telos
   kui arvutis - kummalgi polnud varem eraldi @media reeglit, seega üks
   muudatus mõjutab automaatselt mõlemat). Suurus valitud vastavuses
   tooriistakeskus-modern-shop plugina .tms-h3 tokeniga (tms-tokens.css),
   sama "väike pealkiri" skaala mis mujal saidil juba kasutusel. */
.g4d-footer__column h4 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 14px;
}

/* ── „Kasulikud lingid" täppidega, nagu maketil ──────────────────────── */
.g4d-footer__menu {
	list-style: disc;
	padding-left: 18px;
}
.g4d-footer__menu li {
	margin-bottom: 7px;
}
.g4d-footer__menu li::marker {
	color: var( --g4d-accent, #F2DA49 );
}

.g4d-footer__contact li {
	margin-bottom: 9px;
}

/* ── Alumine riba ─────────────────────────────────────────────────────────
   ⚠ Maketil on alumine riba TUMEDAM kui jalus ise ja ulatub serva­st
   servani, mitte ainult sisulaiuses. `.g4d-footer__bottom` on aga
   `.g4d-footer__inner` SEES (max-width 1240px), seega tavaline taust kataks
   ainult selle. Pseudoelement murrab 100vw laiuseks ja maalib riba TAHA.

   NB: see on sama tehnika, mille ma avalehe sektsioonidelt eemaldasin — seal
   oli see vale, sest riba PIDI jääma sisu laiuseks. Siin on vastupidi:
   makett näitab serva-servani riba. Sama tehnika, vastupidine nõue. */
.g4d-footer__bottom {
	position: relative;
	margin-top: 36px;
	padding: 16px 0;
	border-top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
}
.g4d-footer__bottom::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: rgba( 0, 0, 0, 0.22 );
	z-index: 0;
}
.g4d-footer__bottom > * {
	position: relative;
	z-index: 1;
}

.g4d-footer__madein {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}
.g4d-footer__flag {
	display: block;
	border-radius: 2px;
	flex: 0 0 auto;
}

/* ── Mobiil ──────────────────────────────────────────────────────────────
   Püstjooned muutuvad kitsal ekraanil rõhtjoonteks — veerud on siis
   üksteise all, ja `border-left` jookseks teksti kõrvale mõttetu tikuna. */
@media (max-width: 780px) {
	.g4d-footer__columns {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.g4d-footer__column {
		padding: 18px 0;
		border-left: 0;
		border-top: 1px solid var( --g4d-border-color, rgba(255,255,255,0.14) );
	}
	.g4d-footer__column:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.g4d-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

/* ═══ JALUSE ÜLEJÄÄNUD MAKETI-ERINEVUSED (14.09.2026) ═══════════════════
   Esimene voor puudutas ainult värve. See voor katab ülesehituse.
   ═════════════════════════════════════════════════════════════════════ */

/* ── BRÄNDIVEERG (logo + slogan) ─────────────────────────────────────────
   Maketil on esimene veerg kollane logo-sõnamärk ja selle all üherealine
   slogan „Tööriistad, mis teevad tööd ära." — PEALKIRJATA.

   ⚠ MIKS SIIN EI OLE UUT VEERUTÜÜPI: plugina „tekst" tüüp laseb sisu läbi
   `wp_kses_post()`, mis lubab nii `<img>` kui `<p>` — brändiplokk mahub
   sinna ilma ühegi uue admini väljata. Uue veerutüübi lisamine tähendaks
   muudatusi neljas kohas (vaikeväärtused, puhastus, renderdus, admini JS),
   millest viimast ma siin testida ei saa. Kasu oleks kosmeetiline, risk
   päris. Stiil paneme paika, sisu läheb tekstiväljale. */
.g4d-footer__column--text img {
	display: block;
	height: 38px;
	width: auto;
	max-width: 100%;
	margin: 0 0 14px;
}
.g4d-footer__column--text p:last-child {
	margin-bottom: 0;
}
.g4d-footer__text {
	font-size: 14.5px;
	line-height: 1.55;
}

/* ── SOTSIAALIKOONID ─────────────────────────────────────────────────────
   Ikoonistiil `plain` tuleb seadetest (vt maybe_migrate_makett_icons).
   Siin ainult mõõt ja vahe — maketil on need selgelt suuremad kui meie
   vaikimisi 20px ja seisavad hõredamalt. */
.g4d-footer__social {
	gap: 16px;
}
.g4d-footer__social a {
	width: 34px;
	height: 34px;
}
.g4d-footer__social a svg {
	width: 100%;
	height: 100%;
}
.g4d-footer__social a:hover {
	opacity: 0.75;
}

/* ── KONTAKTIVEERG ───────────────────────────────────────────────────────
   Ikoon ja tekst maketil ühel joonel, ikoon pisut tuhmim kui tekst —
   see hoiab pilgu tekstil, mitte ikoonireal. */
.g4d-footer__contact li {
	align-items: center;
}
.g4d-footer__contact li svg {
	opacity: 0.75;
	flex: 0 0 auto;
}

/* ═══ TEKSTIVEERU PILT (nt jaluse logo) — 14.09.2026 ═══════════════════
   Asendab varasema lahenduse, kus pilt tuli tekstivälja <img> märgendina
   käsitsi kirjutada. Mõõdud on siin, mitte admini väljal: logo peab olema
   kõigil lehtedel ühtlane ja mitte sõltuma sellest, millise faili keegi
   parasjagu üles laadis. */
.g4d-footer__text-image,
.g4d-footer__text-image-link {
	display: block;
	margin: 0 0 14px;
}
.g4d-footer__text-image {
	height: 38px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.g4d-footer__text-image-link {
	width: fit-content;
}
.g4d-footer__text-image-link:hover .g4d-footer__text-image,
.g4d-footer__text-image-link:focus .g4d-footer__text-image {
	opacity: 0.85;
}

@media (max-width: 780px) {
	.g4d-footer__text-image { height: 34px; }
}

/* ═══ JALUSE IKOONID JA TÄPID VALGEKS (14.09.2026) ═══════════════════════
   Enne: kontaktiikoonid ja nimekirja täpid võtsid värvi `--g4d-accent`
   muutujast (kollane #F2DA49) ja ikoonid olid lisaks 0.75 läbipaistvusega.

   ⚠ MIKS `color`, MITTE `fill`/`stroke`: kõik jaluse ikoonid on inline SVG,
   mis kasutavad `fill="currentColor"` / `stroke="currentColor"` (kontrollitud:
   8 + 6 esinemist render-failis). Seega piisab `color` määramisest — `fill`
   ja `stroke` järgnevad ise. Otse `fill` määramine murraks joonikoonid, mille
   täidis PEABKI jääma tühjaks. */

.g4d-footer__contact li svg {
	color: #FFFFFF;
	opacity: 1;
}

.g4d-footer__menu li::marker {
	color: #FFFFFF;
}

/* Sotsiaalikoonid on juba valged (`--g4d-icon-color`), aga kirjutame üle ka
   need, et kogu jaluse ikoonipilt oleks ühest kohast juhitav. */
.g4d-footer__social a {
	color: #FFFFFF;
}

/* ═══ IKOONID TÄIESTI VALGED, ILMA LÄBIPAISTVUSETA (14.09.2026) ═════════
   Eelmine voor pani ikoonidele valge VÄRVI, aga failis oli veel kolm
   `opacity` reeglit, mis tuhmistasid neid sellest sõltumata:

       rida 376  .g4d-footer__social a:hover   opacity: 0.75
       rida 386  .g4d-footer__contact li svg   opacity: 0.75
       rida 107  .g4d-footer__bottom           opacity: 0.8

   ⚠ `opacity` EI OLE VÄRV — seda ei saa `color` määramisega üle kirjutada.
   Element jääb poolläbipaistvaks ka siis, kui värv on puhas valge, sest
   läbipaistvus rakendub KOGU elemendile pärast värvi arvutamist. Just
   sellepärast ei aidanud eelmine parandus lõpuni.

   Alumise riba tekst jääb pisut tuhmiks TEADLIKULT — see on autoriõiguse
   rida, mis ei pea ikoonidega sama tugev olema. Ütle, kui see ka valgeks. */

.g4d-footer .g4d-footer__contact li svg,
.g4d-footer .g4d-footer__social a,
.g4d-footer .g4d-footer__social a:hover,
.g4d-footer .g4d-footer__social a:focus,
.g4d-footer .g4d-footer__social a svg {
	opacity: 1 !important;
	color: #FFFFFF !important;
}

/* Hover annab nüüd tagasisidet SUURUSEGA, mitte tuhmumisega — nii jääb
   ikoon täisvalgeks ka hiire all. */
.g4d-footer .g4d-footer__social a {
	transition: transform .15s ease;
}
.g4d-footer .g4d-footer__social a:hover,
.g4d-footer .g4d-footer__social a:focus {
	transform: scale(1.12);
}

/* Nimekirja täpid — `::marker` ei päri `opacity`, aga kirjutame värvi
   kõrgema spetsiifilisusega üle, et ükski varasem reegel ei võidaks. */
.g4d-footer .g4d-footer__menu li::marker {
	color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIILI JOONDUS (14.09.2026)

   ENNE: kogu jalus oli mobiilis `text-align: center` ja kontaktiread lisaks
   `justify-content: center`. Iga rea ikoon algas seetottu ERINEVALT kohalt —
   tapselt nii kaugelt, kui tema enda teksti pikkus ette naegi. „Kasulikud
   lingid" oli veel halvem: tekst keskel, aga tapid `padding-left: 18px`
   pealt — tapid uhes veerus, tekst neist eemal holjumas.

   NUUD: iga veeru SISU on kuni 300px laiune plokk, mis on lehe keskel
   (`margin: 0 auto`), ja ploki SEES on koik vasakule joondatud. Nii on
   pealkiri, ikoonid, tekstid ja tapid koik uhel ja samal vasakjoonel, aga
   plokid ise moovad lehel keskjoondatuna.

   ⚠ MIKS `max-width` LAPSELE, MITTE VEERULE ENDALE: veerul on mobiilis
   `border-top` eraldusjoon. Kui piiraks veeru laiust, tombuks ka see joon
   300px peale kokku ja jalus naeks katki valja. Laste piiramine jatab joone
   ule kogu laiuse.

   ⚠ LOGO ON ERAND: see peab olema LEHE keskel, mitte teksti vasakjoonel.
   Seetottu tuhistab `--text` veerg ploki piirangu ja keskjoondab.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 780px) {

	/* Veerg ise jaab ule kogu laiuse (eraldusjoone parast), sisu keskele. */
	.g4d-footer__columns {
		text-align: left;
	}
	.g4d-footer__column {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: left;
	}

	/* Sisuplokk: uhesugune laius koigil veergudel => uhesugune vasakjoon. */
	.g4d-footer__column > * {
		width: 100%;
		max-width: 300px;
	}

	/* ── Kontakt: ikoon vasakul, koik ikoonid uhel joonel ──────────────── */
	.g4d-footer__contact li {
		justify-content: flex-start;
		text-align: left;
	}

	/*
	 * ── Kasulikud lingid: tapp TAPSELT kontaktiikooni kohale ──────────
	 *
	 * ⚠ MIKS PARIS TAPP SIIN EI SOBI: `list-style: disc` tapi asukoht
	 * tuleb `padding-left`-ist ja see EI OLE sama moot, mis kontaktirea
	 * ikooni laius. Kumba `padding-left`-i ka ei valiks, kas tapid VOI
	 * tekstid jaavad kontaktiveeruga nihkesse — molemat korraga ei saa.
	 *
	 * Seetottu ehitan lingirea tapselt sama kujuga nagu kontaktirea:
	 * 16px lai marker + 10px vahe + tekst. Tapp joonistatakse
	 * `radial-gradient`-iga tapselt selle 16px kasti keskele, kuhu jaab
	 * ka kontaktiikooni kese. Nii on tapid ikoonidega uhel joonel JA
	 * tekstid tekstidega uhel joonel.
	 */
	.g4d-footer__menu {
		list-style: none;
		padding-left: 0;
		text-align: left;
	}
	.g4d-footer__menu li {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		line-height: 1.4;
	}
	.g4d-footer__menu li::before {
		content: '';
		flex: 0 0 16px;
		height: 16px;
		margin-top: 3px;   /* sama, mis kontaktiikoonil */
		background: radial-gradient( circle at center, #FFFFFF 0 2.5px, transparent 2.6px );
	}

	.g4d-footer__social {
		justify-content: flex-start;
	}

	/* ── Logoveerg: lehe keskele ──────────────────────────────────────── */
	.g4d-footer__column--text {
		align-items: center;
	}
	.g4d-footer__column--text > * {
		max-width: none;
		text-align: center;
	}
	.g4d-footer__column--text .g4d-footer__text-image {
		display: block;
		width: auto;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.g4d-footer__text-image-link {
		width: auto;
		display: block;
		text-align: center;
	}
}