/*
Theme Name: Mag Opony
Theme URI: https://magopony24.pl/
Description: Lekki motyw serwisu Mag Opony Gdańsk — bez Elementora. Odwzorowuje dotychczasowy wygląd natywnymi szablonami PHP i CSS.
Author: SemTree
Version: 0.3.0
Requires PHP: 7.4
Text Domain: magopony
*/

/* =========================================================
   Tokeny globalne — 1:1 z Elementor Kit "Zestaw domyślny" (ID 238)
   ========================================================= */
:root {
	/* Kolory systemowe */
	--mo-primary: #000000;
	--mo-secondary: #54595F;
	--mo-text: #494949;
	--mo-accent: #DD3333;
	--mo-bg: #FBFAF9;

	/* Kolory pomocnicze (z warstwy komponentów) */
	--mo-white: #FFFFFF;
	--mo-line: #E6EAEF;
	--mo-muted: #6B7787;
	--mo-dropdown: #777777;
	--mo-dropdown-hover: #EAEAEA;

	/* Typografia — ZMIERZONA na oryginale, nie z tokenow Kita.
	   Kit definiuje tokeny typografii na Roboto/Roboto Slab, ALE to tylko
	   definicje zmiennych. Realnie wygrywa bazowy CSS Kita:
	     .elementor-kit-238 { font-family:"Lato" }  -> body, menu, kafle, teksty
	     .elementor-kit-238 h1..h4 { font-family:"Source Sans Pro" }
	   Stopka (szablon 83) uzywa "Poppins".
	   Skan oryginalu: Lato 417 elementow, Source Sans Pro 12, Poppins 5,
	   Roboto/Roboto Slab -> 0 (ladowane, ale NIEUZYWANE = martwy balast). */
	--mo-font-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mo-font-head: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mo-font-footer: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mo-fw-primary: 600;
	--mo-fw-text: 400;
	--mo-fw-accent: 500;

	/* Layout */
	--mo-container: 1140px;   /* treść strony  — Kit: .e-con{--container-max-width:1140px} */
	--mo-header-w: 1440px;    /* rzędy headera — post-82.css: --content-width:1440px @min-width:768 */
	--mo-viewport-lg: 1025px;
	--mo-radius: 8px;
}

/* Reset minimalny */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--mo-bg);
	color: var(--mo-text);
	font-family: var(--mo-font-base);
	font-weight: var(--mo-fw-text);
	font-size: 1em;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mo-font-head);
	color: var(--mo-primary);
	margin: 0 0 .5em;
}
/* Odpowiednik widgetu heading Elementora: `.elementor-heading-title{margin:0;line-height:1}`.
   Uzywamy tam, gdzie w oryginale stoi widget heading (a nie naglowek w tresci). */
.mo-h1, .mo-h2, .mo-h3 { margin: 0; line-height: 1; }

/* Divider — 2ee01d3 / f8f47e8 / 40ad5e0a / 700ef61a: solid, accent, 3.1px,
   padding-block 15px w Elementorze. Tu margin-block: dla flex-itema wychodzi
   na to samo (marginesy flex-itemow sie NIE zlewaja), a outer = 15+2.2+15
   = 32.2 px — zmierzone 1:1 na oryginale.
   UWAGA: regula MUSI byc w style.css (ladowanym wszedzie), a nie w home.css
   (tylko front page) — inaczej dividery na podstronach uslug i modeli aut
   maja wysokosc 0. To byl realny bug: `.mo-divider` uzywaja rowniez
   template-parts/single-service.php i single-serwis.php. */
.mo-divider {
	display: block;
	width: 100%;
	border-top: 3.1px solid var(--mo-accent);
	margin-block: 15px;
}
/* Rozmiary/wagi z Kita (post-238.css). h1 bez wagi -> domyslny bold 700. */
h1 { font-weight: 700; }
h2 { font-size: 1.7em; font-weight: 600; }
h3 { font-size: 1.4em; font-weight: 600; }
h4 { font-size: 1.2em; }
a { color: var(--mo-accent); }
img { max-width: 100%; height: auto; }

/* Klasy wyrownania z motywu Hello (oryginal):
   `img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image
   { display:block }`. UWAGA: Hello NIE dodaje `margin-inline:auto`, wiec
   obrazek z klasa `aligncenter` w oryginale realnie NIE JEST wysrodkowany —
   jest tylko blokowy i dosuniety do lewej (zmierzone: marginLeft=0px).
   Odtwarzamy WYNIK. Bez tej reguly <img> zostaje inline i line-box dokłada
   ~9.5px pod obrazkiem (to byla delta w tresci CPT `serwis`).
   Klas .aligncenter uzywaja tez tresci wpisow blogowych i pole ACF `opis`. */
img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image { display: block; }

/* Okruszki (Yoast). Wartosci ZMIERZONE na oryginale, nie zgadniete:
     .elementor-widget-breadcrumbs { font-size:.85em }      -> 13.6px
     .elementor-widget-breadcrumbs p { margin-bottom:0 }     -> mB 0, mT 1em
     line-height: 1.15 -> 15.64px. To NIE jest `normal` — motyw Hello ma
     jawne `line-height:1.15` w swoim style.css i to dziedziczy sie na okruszki.
     (Nasz motyw ma w body line-height:1.6, wiec tu trzeba podac wprost.)
     kolor tekstu #000, linki #494949 (--text), fw 400
   Zmierzone: p 15.6 + margin-top 13.6 = 29.2 px wysokosci bloku okruszkow.
   Rodzic MUSI byc BFC (flex), inaczej margin-top nawigacji wycieknie na zewnatrz. */
.mo-crumbs { font-size: .85em; line-height: 1.15; margin-top: 1em; color: var(--mo-primary); }
.mo-crumbs a { color: var(--mo-text); text-decoration: none; }
.mo-crumbs a:hover { color: var(--mo-accent); }

.mo-shell { max-width: var(--mo-container); margin-inline: auto; padding: 0 20px; }

/* Rzędy headera: 1440 px i BEZ paddingu bocznego — dokładnie jak e-con-inner w oryginale.
   Uwaga: margin-inline zamiast skrótu `margin`, żeby żadna późniejsza reguła
   nie zbiła auto-centrowania (to był bug „logo nie na środku"). */
.mo-shell--header { max-width: var(--mo-header-w); padding: 0; }

/* =========================================================
   Dostępność
   ========================================================= */
.mo-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--mo-accent); color: #fff; padding: 10px 16px;
}
.mo-skip:focus { left: 0; }

/* =========================================================
   HEADER — odwzorowanie szablonu Elementora #82
   ========================================================= */
.mo-header { background: var(--mo-white); }

/* ---- Górny pasek: 5 równych kolumn 280px + gap 10px = 1440px ---- */
.mo-topbar { background: var(--mo-white); }
.mo-topbar__inner {
	display: flex;
	align-items: stretch;
	gap: 10px;
	padding-top: 10px;
}
.mo-topbar__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mo-topbar__col--fb { align-items: flex-start; }

.mo-topbar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;                    /* .elementor-button-content-wrapper: flex, gap 5px */
	padding: 12px 24px;          /* .elementor-button */
	font-size: 15px;
	line-height: 1;
	font-weight: 400;            /* oryginał: 400, nie 600 */
	text-decoration: none;
	color: var(--mo-secondary);
	background: transparent;
	transition: color .2s ease;
}
.mo-topbar__link:hover { color: var(--mo-accent); }
.mo-topbar__link--accent { color: var(--mo-accent); font-weight: 800; }

.mo-topbar__fb {
	display: inline-flex;
	margin-top: 12px;            /* .elementor-element-28c277d > .elementor-widget-container */
	color: var(--mo-secondary);
	transition: color .2s ease;
}
.mo-topbar__fb:hover { color: var(--mo-accent); }
.mo-topbar__fb .mo-i { width: 20px; height: 20px; }
/* Ikony w przyciskach topbara: 15x15 (zmierzone na oryginale) */
.mo-topbar__link .mo-i { width: 15px; height: 15px; flex: none; }

.mo-topbar--mobile { display: none; }

/* c21ee09 — kontener-pozostałość w oryginale (przezroczysty, bez treści).
   ZMIERZONE: 5.10px. Bez tego header ma 176.3 zamiast 181.4. */
.mo-header__gap { height: 5.1px; }

/* ---- Rząd z logo: 3 równe kolumny 473px + gap 10px ---- */
.mo-logobar__inner { display: flex; align-items: stretch; gap: 10px; }
.mo-logobar__col { flex: 1 1 0; min-width: 0; }
.mo-logobar__col--logo { display: block; }
.mo-logobar .mo-logo { display: block; margin: 7px 0; }
.mo-logobar .mo-logo__img { width: 45%; display: block; margin-inline: auto; }

/* ---- Pasek nawigacji (sticky) ---- */
.mo-navbar {
	background: var(--mo-bg);
	border-bottom: 1px solid var(--mo-accent);
}
.mo-navbar.is-stuck {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.mo-navbar__inner {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
}
.mo-navbar__logo { display: none; }

/* Menu — Elementor "align-justify": li i a mają flex-grow:1, a treść wyśrodkowaną.
   .mo-nav musi mieć flex:1, inaczej zwija się do szerokości treści (to był bug #2). */
.mo-nav { flex: 1; min-width: 0; }
.mo-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; width: 100%;
}
.mo-menu > li { flex: 1 1 auto; display: flex; position: relative; }
.mo-menu > li > a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 10px 20px;
	color: var(--mo-secondary);
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 20px;          /* oryginał: .elementor-item line-height:20px -> li h=40 */
	transition: color .2s ease;
}
.mo-menu > li > a:hover,
.mo-menu > li.current-menu-item > a,
.mo-menu > li.current-menu-parent > a,
.mo-menu > li.current-menu-ancestor > a { color: var(--mo-accent); }

/* Wskaźnik "framed / corners" — e--pointer-framed e--animation-corners */
.mo-menu > li > a::before,
.mo-menu > li > a::after {
	content: "";
	position: absolute; inset: 0;
	border: 0 solid var(--mo-accent);
	opacity: 0;
	transition: opacity .2s, transform .4s;
	pointer-events: none;
}
.mo-menu > li > a::before {
	border-width: 1px 0 0 1px;
	transform: scale3d(.2, .2, 1);
	transform-origin: 0 0;
}
.mo-menu > li > a::after {
	border-width: 0 1px 1px 0;
	transform: scale3d(.2, .2, 1);
	transform-origin: 100% 100%;
}
.mo-menu > li > a:hover::before,
.mo-menu > li > a:hover::after,
.mo-menu > li > a:focus-visible::before,
.mo-menu > li > a:focus-visible::after,
.mo-menu > li.current-menu-item > a::before,
.mo-menu > li.current-menu-item > a::after {
	opacity: 1;
	transform: scale3d(1, 1, 1);
}

/* Strzałka przy pozycjach z podmenu (odpowiednik span.sub-arrow) */
.mo-caret { display: flex; align-items: center; padding-left: 10px; flex: none; }
.mo-caret .mo-i { width: 1em; height: 1em; display: block; }

/* Podmenu.
   Oryginal ma `margin-top:11px !important`, czyli 11px odstepu miedzy pozycja
   a podmenu. U niego to nie przeszkadza, bo podmenu obsluguje JS (SmartMenus)
   z opoznieniem zamykania. Przy czystym CSS-owym :hover ten odstep to MARTWA
   STREFA — kursor traci `li:hover` i podmenu znika, zanim da sie w nie wejsc.
   Dlatego odstep robimy PADDINGIEM (nalezy do obszaru hover), a tlo przycinamy
   do content-boxa, zeby wygladalo dokladnie jak margines. */
.mo-menu .sub-menu {
	list-style: none; margin: 0;
	padding: 11px 0 0;
	background-clip: content-box;
	position: absolute; top: 100%; left: 0; min-width: 290px; z-index: 50;
	background-color: var(--mo-dropdown);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
}
.mo-menu li:hover > .sub-menu, .mo-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mo-menu .sub-menu a {
	display: block; padding: 7px 20px;
	color: var(--mo-white); text-decoration: none;
	font-size: 1.2em; font-weight: 300; line-height: 1.4;
}
.mo-menu .sub-menu a:hover,
.mo-menu .sub-menu .current-menu-item > a { background: var(--mo-dropdown-hover); color: var(--mo-accent); }

/* Hamburger */
.mo-burger {
	display: none; margin-left: auto;
	background: var(--mo-bg); color: var(--mo-accent);
	border: 1px solid currentColor; border-radius: 3px;
	padding: 9px 10px; cursor: pointer;
}
.mo-burger span { display: block; width: 20px; height: 2px; background: currentColor; }
.mo-burger span + span { margin-top: 4px; }

/* =========================================================
   FOOTER — odwzorowanie szablonu Elementora #83
   Wartosci zmierzone na oryginale, nie zalozone.
   ========================================================= */
.mo-footer {
	background: #F0F0F0;              /* c43bdd9 */
	color: var(--mo-text);
	padding: 10px 0;
	/* Motyw Hello (oryginal) ma bazowe line-height:1.15; nasz body ma 1.6.
	   Zmierzone w stopce: WSZYSTKO leci na 18.4px (=1.15*16). Bez tego kolumna
	   brand ma 318.4 zamiast 300 (logo +6.7, lista +23.8, ikona FB -4).
	   WYJATEK: copy/credits (Poppins) maja lh 1.5 — patrz nizej. */
	line-height: 1.15;
}
.mo-footer__inner { max-width: 1280px; margin-inline: auto; }   /* --content-width:1280px */

/* Rzad gorny d9f3a57: gap 10, padding 10px 0, border-bottom 1px #B9B9B9 */
.mo-footer__top {
	display: flex; flex-direction: row; align-items: stretch;
	gap: 10px; padding: 10px 0;
	border-bottom: 1px solid #B9B9B9;
}
.mo-footer__brand {
	width: 25.614%; flex: 0 1 auto; min-width: 0;   /* min-width:0 — 25.614%
	   + 74.386% + gap 10 > 100%, wiec kolumny MUSZA moc sie skurczyc.
	   Bez tego min-content kolumny brand blokuje shrink i @900 wychodzi 216
	   zamiast 213.6 (mapa oddaje cala roznice). */
	display: flex; flex-direction: column;
	gap: 30px; padding: 10px;
}
.mo-footer__logo { text-align: start; }                 /* 5dfda97 */
/* ZMIERZONE: w oryginale <img> ma display:inline-block + vertical-align:middle,
   przez co widget ma dokladnie wysokosc obrazka (70.9). Domyslne inline+baseline
   dokladalo miejsce na descender (+4px). */
.mo-footer__logo .mo-logo__img { display: inline-block; vertical-align: middle; }
.mo-footer__logo .mo-logo__img { width: 70%; }
.mo-footer__map { width: 74.386%; flex: 0 1 auto; min-width: 0; }   /* e5723f0 */
.mo-footer__map iframe { width: 100%; height: 300px; border: 0; display: block; }

/* 277625a / 772a964: Poppins z line-height 1.5 (zmierzone: copy 24/16,
   credits 19.2/12.8). Stopka ma bazowe 1.15, wiec tu trzeba podac wprost. */
.mo-footer__copy span, .mo-footer__credits span { line-height: 1.5; }

/* Lista kontaktowa 37d61ac: padding-left 30px, odstep pozycji 20px, font 1.1em */
.mo-contact { list-style: none; margin: 0; padding: 0 0 0 30px; }
.mo-contact li { display: flex; align-items: center; gap: 12px; font-size: 1.1em; }
.mo-contact li:not(:last-child) { padding-bottom: 10px; }
.mo-contact li:not(:first-child) { margin-top: 10px; }
.mo-contact a { color: var(--mo-text); text-decoration: none; }
.mo-contact a:hover { color: var(--mo-accent); }
.mo-contact .mo-i { width: 15px; height: 15px; flex: none; color: var(--mo-text); }

/* Ikona FB e087b68: framed square, 26px, padding 7px, border 1px accent -> 42x42 */
/* e087b68 — widget jest BLOKIEM z line-height 18.4 i fs 16; ikona to
   inline-block 42.2px -> line-box 46.2px. To te 46.2, nie 42.2, wchodzi
   do wysokosci kolumny brand. */
.mo-footer__fb { display: block; }
.mo-fb-icon {
	/* ZMIERZONE: oryginal ma <a> jako inline-block ze svg display:block.
	   To wazne dla WYSOKOSCI RODZICA: inline-block bez wlasnych line-boxow ma
	   baseline na dolnej krawedzi, wiec siada na linii bazowej i strut dokłada
	   pod nim descender -> widget 46.2 = 42.2 + 3.8. `inline-flex` liczy
	   baseline z pierwszego flex-itema i dawal 42.2 (kolumna brand -4px).
	   Wysokosc <a>: svg 26 + padding 2x7 + border 2x1.11 = 42.2. */
	display: inline-block;
	padding: 7px;
	font-size: 26px; line-height: 26px;
	color: var(--mo-accent); border: 1px solid var(--mo-accent);
}
.mo-fb-icon .mo-i { display: block; }
.mo-fb-icon .mo-i { width: 26px; height: 26px; }
.mo-fb-icon:hover { background: var(--mo-accent); color: #fff; }

/* Rzad dolny 8b7e546: 4 kolumny 25/25/15/35, gap 10, padding 0 0 5px */
.mo-footer__bottom {
	display: flex; flex-direction: row; align-items: stretch;
	gap: 10px; padding: 0 0 5px;
}
.mo-footer__copy { width: 25%; flex: 0 1 auto; padding: 10px; }
.mo-footer__spacer1 { width: 25%; flex: 0 1 auto; }
.mo-footer__spacer2 { width: 15%; flex: 0 1 auto; }
.mo-footer__credits { width: 35%; flex: 0 1 auto; padding: 10px; text-align: end; }

.mo-footer__copy span {                                  /* 277625a */
	font-family: var(--mo-font-footer);
	font-size: 1em; font-weight: 500; line-height: 1.5em;
	color: var(--mo-text);
}
.mo-footer__credits span {                               /* 772a964 */
	font-family: var(--mo-font-footer);
	font-size: .8em; font-weight: 400; line-height: 1.5em;
}
.mo-footer__credits a { color: #FC4A1A; text-decoration: none; }

/* =========================================================
   Responsywność — próg 1025px jak w kicie (viewport_lg)
   ========================================================= */
@media (max-width: 1024px) {
	/* Przelacznik topbarow = breakpoint TABLET.
	   Oryginal: bialy 22c7960 ma `elementor-hidden-tablet elementor-hidden-mobile`,
	   czarny c61955a ma `elementor-hidden-desktop`. */
	.mo-topbar--desktop { display: none; }
	.mo-topbar--mobile { display: block; background: #000000; }   /* c61955a: bg CZARNE */
	/* c61955a: e-con-inner ma padding 10px 0 0 -> rzad 65 = 10 + 55.
	   Wczesniej bylo padding-top:0 i wychodzilo 55 (delta -10). */
	.mo-topbar--mobile .mo-topbar__inner { gap: 10px; padding-top: 10px; }
	/* 1f53dfb / 9c87a49: oba linki BIALE i fw 400 — takze „Umow sie online".
	   UWAGA: padding `20px 0` jest TYLKO @767. Na tablecie linki maja dalej
	   desktopowe 12px 24px -> rzad 49 (10 + 39), a nie 65. Zmierzone @900. */
	.mo-topbar--mobile .mo-topbar__link,
	.mo-topbar--mobile .mo-topbar__link--accent {
		color: #FFFFFF; font-weight: 400;
	}
	.mo-topbar--mobile .mo-topbar__link:hover { color: var(--mo-accent); }
	.mo-logobar { display: none; }

	/* Rzad d2244f5: logo 58% (padding-left 10) | burger 38% (padding-right 20) */
	.mo-navbar__inner { justify-content: space-between; align-items: center; padding-bottom: 0; }
	.mo-navbar__logo { display: block; width: 58%; padding-left: 10px; }
	.mo-navbar__logo .mo-logo__img { width: 100%; margin: 7px 0; }   /* -> 205px @390 */
	.mo-burger {
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		width: 62px; height: 62px; gap: 7px; padding: 10px;
		margin-right: 20px;
	}
	.mo-burger span { width: 40px; height: 4px; }        /* --nav-menu-icon-size:40px */
	.mo-burger span + span { margin-top: 0; }

	.mo-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--mo-dropdown); z-index: 60;
		flex: none;
	}
	.mo-nav.is-open { display: block; }
	.mo-navbar { position: relative; }
	.mo-menu { flex-direction: column; }
	.mo-menu > li { flex: none; }
	.mo-menu > li > a {
		color: var(--mo-white); font-size: 1.7em; padding: 14px 18px;
		justify-content: flex-start;
	}
	.mo-menu > li > a::before, .mo-menu > li > a::after { display: none; }
	.mo-menu > li > a:hover { background: var(--mo-dropdown-hover); color: var(--mo-accent); }
	.mo-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		min-width: 0; display: none; background: #6b6b6b;
		margin-top: 0; padding-top: 0; background-clip: border-box;
	}
	.mo-menu li.is-open > .sub-menu { display: block; }
	.mo-menu .sub-menu a { font-size: 1.2em; padding: 14px 30px; }

	/* Stopka @1024: ZMIERZONE na oryginale (@900) — uklad zostaje TAKI SAM jak
	   na desktopie: rzad gorny nadal `row` (brand 25.6% + mapa 74.4%), rzad
	   dolny nadal `row`, copy do lewej, credits do prawej, logo do lewej,
	   lista kontaktowa dalej z padding-left:30. Zmienia sie WYLACZNIE padding
	   stopki: outer 0 20px + inner 30px 0 => 30px 20px.
	   (Wczesniej bylo tu przeniesione zachowanie MOBILNE — kolumna, centrowanie,
	   kontakt bez wciecia — czego oryginal na tablecie nie robi.) */
	.mo-footer { padding: 30px 20px; }
}

/* =========================================================
   Mobile — próg 767 (osobno, bo Elementor ma inne wartości niż na tablecie)
   ========================================================= */
@media (max-width: 767px) {
	/* c61955a @767: linki maja padding 20px 0 -> rzad 65 = 10 + 55 */
	.mo-topbar--mobile .mo-topbar__link,
	.mo-topbar--mobile .mo-topbar__link--accent { padding: 20px 0; }

	/* Stopka @767 — ZMIERZONE: outer 0 10px + inner 10px 0 => 10px.
	   Rzedy zostaja `row`, ale dostaja --flex-wrap-mobile:wrap i kolumny
	   rozjezdzaja sie na 100%. */
	.mo-footer { padding: 10px; }
	.mo-footer__top { flex-wrap: wrap; }
	.mo-footer__brand, .mo-footer__map { width: 100%; }
	.mo-footer__bottom { flex-wrap: wrap; }
	.mo-footer__copy, .mo-footer__credits { width: 100%; text-align: center; }
	.mo-footer__spacer1, .mo-footer__spacer2 { display: none; }
	.mo-footer__copy span { font-size: 1.2em; }          /* 277625a @767: 19.2px */
	.mo-footer__credits span { font-size: .7em; }        /* 772a964 @767: 11.2px */
}