/* Manto Online components: mini banners under the slider ("ticket" cards, emerald + indigo on purpose,
   so this strip stands apart from the brown/cream palette used everywhere else). */

html:root {
	--mo-emerald: #1E5C4A;
	--mo-emerald-hi: #2F8466;
	--mo-emerald-ink: #E6F4EC;
	--mo-indigo: #2B3367;
	--mo-indigo-hi: #4B57A6;
	--mo-indigo-ink: #E9ECFA;
}

/* both banner columns stretch to the same height */
html .elementor-element-20c8675 > .e-con-inner { align-items: stretch; }
html .elementor-element-87d28c4,
html .elementor-element-ef67db4,
html .elementor-element-87d28c4 > .elementor-widget-container,
html .elementor-element-ef67db4 > .elementor-widget-container {
	height: 100%;
	width: 100%;
}

/* "a.mo-mini" beats Elementor's ".elementor-widget-image a { display: inline-block }" */
html a.mo-mini {
	--ink: var(--mo-emerald-ink);
	--bg: var(--mo-emerald);
	--hi: var(--mo-emerald-hi);
	--notch: calc(100% - 128px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
	min-height: 158px;
	border-radius: 24px;
	background: radial-gradient(120% 160% at 100% 0%, var(--hi) 0%, var(--bg) 60%);
	color: var(--ink);
	text-align: right;
	text-decoration: none !important;
	/* ticket notches above and below the stub separator */
	-webkit-mask: radial-gradient(circle 12px at var(--notch) 0, #0000 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 12px at var(--notch) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 12px at var(--notch) 0, #0000 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 12px at var(--notch) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
	transition: transform .45s var(--mo-ease), filter .45s var(--mo-ease);
}
html a.mo-mini--post {
	--ink: var(--mo-indigo-ink);
	--bg: var(--mo-indigo);
	--hi: var(--mo-indigo-hi);
}
html a.mo-mini:hover {
	transform: translateY(-4px);
	filter: drop-shadow(0 22px 26px rgba(20, 24, 50, .35));
}
html a.mo-mini:focus-visible {
	outline: 3px solid var(--mo-taupe);
	outline-offset: 3px;
}

/* stub (right side in RTL) */
.mo-mini__stub {
	flex: 0 0 128px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-left: 2px dashed rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .06);
	text-align: center;
}
.mo-mini__stub b {
	font-size: 24px;
	font-weight: 900;
	line-height: 1.1;
}
.mo-mini__stub small {
	font-size: 12px;
	font-weight: 600;
	opacity: .8;
}
.mo-mini__ico {
	width: 52px;
	height: 52px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mo-truck { animation: mo-drive 2.6s ease-in-out infinite; }
@keyframes mo-drive {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(-2px, -1px); }
	50% { transform: translate(-4px, 0); }
	75% { transform: translate(-2px, -1px); }
}

/* body */
.mo-mini__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 22px 26px 30px;
}
.mo-mini__eyebrow {
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}
.mo-mini__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.6;
	color: inherit;
	text-wrap: balance;
}
.mo-mini__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	opacity: .9;
}
.mo-mini__cta span { transition: transform .35s var(--mo-ease); }
html a.mo-mini:hover .mo-mini__cta span { transform: translateX(-5px); }

/* free shipping: dashed road with a moving light at the bottom */
.mo-mini__road {
	position: absolute;
	right: 128px;
	left: 0;
	bottom: 14px;
	height: 2px;
	background: repeating-linear-gradient(to left, rgba(255, 255, 255, .35) 0 10px, transparent 10px 18px);
	animation: mo-road 1.2s linear infinite;
}
.mo-mini__road i {
	position: absolute;
	top: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 0 12px var(--ink);
	animation: mo-run 4s var(--mo-ease) infinite;
}
@keyframes mo-road { to { background-position: -18px 0; } }
@keyframes mo-run {
	from { right: 4%; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	to { right: 96%; opacity: 0; }
}

/* shipping time: order -> post -> delivered route */
.mo-mini__route {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	opacity: .9;
}
.mo-mini__route i {
	position: relative;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
}
.mo-mini__route i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: right;
	animation: mo-step 3.2s var(--mo-ease) infinite;
}
.mo-mini__route i:nth-of-type(2)::after { animation-delay: .8s; }
@keyframes mo-step {
	0% { transform: scaleX(0); }
	35%, 85% { transform: scaleX(1); }
	100% { transform: scaleX(1); opacity: 0; }
}

/* reveal on scroll (header.js adds .is-in); without JS the banners are simply visible */
html.mo-js a.mo-mini:not(.is-in) {
	opacity: 0;
	transform: translateY(26px);
}
html a.mo-mini.is-in { animation: mo-mini-in .9s var(--mo-ease) both; }
.elementor-element-ef67db4 a.mo-mini.is-in { animation-delay: .12s; }
@keyframes mo-mini-in {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	html a.mo-mini {
		min-height: 128px;
		border-radius: 20px;
		--notch: calc(100% - 96px);
	}
	.mo-mini__stub { flex-basis: 96px; }
	.mo-mini__stub b { font-size: 19px; }
	.mo-mini__ico { width: 40px; height: 40px; }
	.mo-mini__body { padding: 16px 16px 24px; gap: 6px; }
	.mo-mini__title { font-size: 15px; }
	.mo-mini__road { right: 96px; bottom: 10px; }
	.mo-mini__route { font-size: 11px; gap: 6px; }
	.mo-mini__route i { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	html a.mo-mini, html a.mo-mini.is-in, .mo-truck, .mo-mini__road, .mo-mini__road i, .mo-mini__route i::after {
		animation: none !important;
	}
	html.mo-js a.mo-mini:not(.is-in) { opacity: 1; transform: none; }
	.mo-mini__route i::after { transform: scaleX(1); }
}

/* Home "view all" button: brown text on the Soft Cashmere background (was white, unreadable) */
html .elementor-element-80eeea9 .elementor-button {
	color: var(--mo-brown) !important;
	fill: var(--mo-brown) !important;
}

/* ================= Follow banners: Instagram / Telegram (brand-tinted, outside the site palette on purpose) ================= */
html .elementor-element-69d7b7c > .elementor-container { align-items: stretch; }
/* the old star decoration showed up between the two new banners */
html .elementor-element-69d7b7c { background-image: none !important; }
html .elementor-element-5ea7407,
html .elementor-element-85b6825,
html .elementor-element-5ea7407 > .elementor-widget-container,
html .elementor-element-85b6825 > .elementor-widget-container { height: 100%; width: 100%; }

html a.mo-social {
	--a: #833AB4;
	--b: #E1306C;
	--c: #F77737;
	--ink: #FFF6FA;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	height: 100%;
	min-height: 140px;
	padding: 20px 22px;
	border-radius: 999px 28px 28px 999px;
	background: linear-gradient(120deg, var(--a) 0%, var(--b) 55%, var(--c) 100%);
	color: var(--ink);
	text-align: right;
	text-decoration: none !important;
	transition: transform .45s var(--mo-ease), box-shadow .45s var(--mo-ease);
}
html a.mo-social--tg {
	--a: #1C7ED6;
	--b: #2AABEE;
	--c: #5FD0F5;
	--ink: #F2FBFF;
	border-radius: 28px 999px 999px 28px;
}
html a.mo-social:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 40px -24px rgba(40, 20, 60, .6);
}
html a.mo-social:focus-visible { outline: 3px solid var(--mo-taupe); outline-offset: 3px; }

.mo-social__blob {
	position: absolute;
	z-index: -1;
	width: 240px;
	aspect-ratio: 1;
	left: -60px;
	top: -120px;
	border-radius: 42% 58% 60% 40%;
	background: rgba(255, 255, 255, .16);
	animation: mo-blob 9s ease-in-out infinite;
}
@keyframes mo-blob {
	0%, 100% { transform: rotate(0) translate(0, 0); border-radius: 42% 58% 60% 40%; }
	50% { transform: rotate(40deg) translate(20px, 18px); border-radius: 58% 42% 40% 60%; }
}
.mo-social__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 26px;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .45);
	transform: rotate(-8deg);
	animation: mo-tilt 4.5s ease-in-out infinite;
}
.mo-social__icon svg {
	width: 44px;
	height: 44px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mo-social__icon .mo-fill { fill: currentColor; stroke: none; }
@keyframes mo-tilt {
	0%, 100% { transform: rotate(-8deg) translateY(0); }
	50% { transform: rotate(4deg) translateY(-5px); }
}
.mo-social__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}
.mo-social__eyebrow {
	font-size: 12px;
	font-weight: 600;
	opacity: .9;
}
.mo-social__eyebrow bdi { direction: ltr; }
.mo-social__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.55;
	color: inherit;
	text-wrap: balance;
}
.mo-social__cta {
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	font-size: 13px;
	font-weight: 700;
	transition: background-color .3s ease;
}
html a.mo-social:hover .mo-social__cta { background: rgba(255, 255, 255, .32); }
.mo-social__go {
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--a);
	box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5);
	transition: transform .4s var(--mo-ease);
}
.mo-social__go svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html a.mo-social:hover .mo-social__go { transform: translateX(-6px) scale(1.06); }

/* reveal, same mechanism as the mini banners */
html.mo-js a.mo-social:not(.is-in) { opacity: 0; transform: translateY(24px); }
html a.mo-social.is-in { animation: mo-mini-in .9s var(--mo-ease) both; }
.elementor-element-85b6825 a.mo-social.is-in { animation-delay: .12s; }

@media (max-width: 767px) {
	html a.mo-social,
	html a.mo-social--tg {
		min-height: 112px;
		gap: 12px;
		padding: 14px 16px;
		border-radius: 24px;
	}
	.mo-social__icon { width: 60px; height: 60px; border-radius: 18px; }
	.mo-social__icon svg { width: 32px; height: 32px; }
	.mo-social__title { font-size: 15px; }
	.mo-social__go { width: 44px; height: 44px; }
	.mo-social__go svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.mo-social__blob, .mo-social__icon, html a.mo-social.is-in { animation: none !important; }
	html.mo-js a.mo-social:not(.is-in) { opacity: 1; transform: none; }
}