/* Еко Няшки — нова шапка, мегаменю, пошук, нижня панель і футер (режим перегляду, html.ec-on).
 * Тема робить кнопки квадратними й успадковує шрифт з !important — у кнопках :not(#_) і !important. */

html.ec-on #masthead, html.ec-on #colophon, html.ec-on #scrollToTopBtn, html.ec-on #ast-scroll-top { display: none !important; }

.ech-strip, .ech, .ecm, .ecft, .ecb {
	--ec-ink: #1F2A1A; --ec-muted: #5B6455; --ec-green: #3F7A22; --ec-green-dark: #2C5A16; --ec-leaf: #7AAF42;
	--ec-soft: #F6F8F2; --ec-line: #E6E9E0; --ec-cream: #F1F6EA;
	font-family: Manrope, system-ui, -apple-system, sans-serif; color: var(--ec-ink); font-size: 15px; line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
.ech-strip *, .ech *, .ecm *, .ecft *, .ecb * { box-sizing: border-box; }
.ech a, .ech-strip a, .ecm a, .ecft a, .ecb a { text-decoration: none !important; }
.ec-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ec-i { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.ec-badge {
	position: absolute; top: -6px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
	background: #F2709A; color: #fff; font: 800 11px/19px Manrope, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.ec-badge[hidden] { display: none; }
.ec-badge.is-puff { animation: ec-badge-puff .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes ec-badge-puff { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Смуга над шапкою */
.ech-strip { background: var(--ec-cream); font-size: 13px; color: var(--ec-muted); }
.ech-strip .ec-wrap { display: flex; align-items: center; gap: 24px; min-height: 36px; }
.ech-strip__ship, .ech-strip__perks { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ech-strip__perks b { color: var(--ec-green-dark); font-weight: 700; }
.ech-strip .ec-i { width: 17px; height: 17px; color: var(--ec-green); }
.ech-strip__links { margin-left: auto; display: flex; gap: 20px; }
.ech-strip__links a { color: var(--ec-muted) !important; font-weight: 600; }
.ech-strip__links a:hover { color: var(--ec-green) !important; }

/* Шапка: прилипає, ховається при прокрутці вниз і з'являється при прокрутці вгору */
.ech { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--ec-line); transition: transform .25s ease, box-shadow .25s ease; }
.admin-bar .ech { top: 32px; }
.ech.is-stuck { box-shadow: 0 6px 24px rgba(31, 42, 26, .08); }
.ech.is-away { transform: translateY(-100%); }
.ech__row { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.ech__logo { flex: 0 0 auto; display: block; }
.ech__logo img { display: block; width: 150px; height: auto; }
.ech .ech__burger:not(#_) { display: none; }
.ech .ech__cat:not(#_) {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px 0 18px !important; border: 0 !important;
	border-radius: 999px !important; background: var(--ec-green) !important; color: #fff !important; font: 700 16px Manrope, sans-serif !important;
	cursor: pointer; box-shadow: 0 6px 16px rgba(63, 122, 34, .25); transition: background-color .15s;
}
.ech .ech__cat:not(#_):hover, .ech .ech__cat[aria-expanded="true"]:not(#_) { background: var(--ec-green-dark) !important; }

.ech__search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; margin: 0; }
.ech__search input[type="search"] {
	width: 100%; height: 48px; margin: 0; padding: 0 56px 0 20px !important; border: 2px solid var(--ec-green) !important; border-radius: 999px !important;
	background: #fff !important; color: var(--ec-ink) !important; font: 600 15px Manrope, sans-serif !important; outline: 0; box-shadow: none !important;
	-webkit-appearance: none; appearance: none;
}
.ech__search input::placeholder { color: #9AA093; font-weight: 500; }
.ech__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ech .ech__sgo:not(#_) {
	position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: var(--ec-green) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ech .ech__sgo .ec-i { width: 19px; height: 19px; }
.ech .ech__sback:not(#_) { display: none; }

.ech__phone { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--ec-ink) !important; }
.ech__phone .ec-i { color: var(--ec-green); }
.ech__phone span { display: flex; flex-direction: column; line-height: 1.2; }
.ech__phone b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.ech__phone small { font-size: 12px; color: var(--ec-muted); white-space: nowrap; }
.ech__icon { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; color: var(--ec-ink) !important; font-size: 12px; font-weight: 600; }
.ech__icon:hover { color: var(--ec-green) !important; }
.ech__icon .ec-i { width: 26px; height: 26px; }
.ech__chat .ec-i { color: #229ED9; }
.ech__cico { position: relative; display: block; }
.ech__cart span[data-ec-sum] { white-space: nowrap; }
.ech__cart.has-items span[data-ec-sum] { color: var(--ec-green-dark); font-weight: 800; }

/* Мегаменю */
.ech-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--ec-line); box-shadow: 0 30px 60px rgba(31, 42, 26, .18); }
.ech-mega[hidden] { display: none; }
.ech-mega::after { content: ""; position: fixed; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(20, 26, 16, .35); z-index: -1; pointer-events: none; }
.ech-mega__box { display: flex; gap: 28px; padding-top: 18px; padding-bottom: 26px; max-height: calc(100vh - 140px); overflow: auto; }
.ech-mega__list { list-style: none; margin: 0; padding: 0; flex: 0 0 280px; border-right: 1px solid var(--ec-line); padding-right: 16px; }
.ech-mega__list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--ec-ink) !important; font-weight: 700; }
.ech-mega__list a img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--ec-soft); }
.ech-mega__list a span { flex: 1; }
.ech-mega__list a .ec-i { width: 16px; height: 16px; color: #A6AC9F; }
.ech-mega__list a.is-on, .ech-mega__list a:hover { background: var(--ec-cream); color: var(--ec-green-dark) !important; }
.ech-mega__pane { flex: 1; min-width: 0; }
.ech-mega__pane[hidden] { display: none; }
.ech-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
.ech-mega__head b { font-size: 22px; font-weight: 800; }
.ech-mega__head a { color: var(--ec-green) !important; font-weight: 700; }
.ech-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ech-mega__it { display: flex; flex-direction: column; gap: 6px; color: var(--ec-ink) !important; }
.ech-mega__img { display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #F4F5F0; }
.ech-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ech-mega__it:hover .ech-mega__img img { transform: scale(1.04); }
.ech-mega__nm { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ech-mega__it small { font-size: 13px; color: var(--ec-muted); font-weight: 600; }

/* Підказки пошуку */
.ech__sugg {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; background: #fff; border-radius: 18px; padding: 8px;
	box-shadow: 0 20px 50px rgba(31, 42, 26, .2); max-height: 70vh; overflow: auto;
}
.ech__sugg[hidden] { display: none; }
.ech__sugg h6 { margin: 8px 10px 6px; font: 700 12px Manrope, sans-serif; color: var(--ec-muted); text-transform: uppercase; letter-spacing: .5px; }
.ech__sugg a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; color: var(--ec-ink) !important; }
.ech__sugg a:hover, .ech__sugg a.is-act { background: var(--ec-soft); }
.ech__sugg img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #F4F5F0; flex: 0 0 auto; }
.ech__sugg .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.3; }
.ech__sugg .nm mark { background: none; color: var(--ec-green-dark); font-weight: 800; padding: 0; }
.ech__sugg .pr { font-weight: 800; white-space: nowrap; }
.ech__sugg .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 10px 8px; }
.ech__sugg .chips a { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--ec-cream); font-weight: 700; font-size: 13px; color: var(--ec-green-dark) !important; }
.ech__sugg .all { justify-content: center; font-weight: 800; color: var(--ec-green) !important; }
.ech__sugg .empty { padding: 14px 10px; color: var(--ec-muted); }

/* Мобільне меню-каталог */
.ecm { position: fixed; inset: 0; z-index: 2147483000; }
.ecm[hidden] { display: none; }
.ecm__bg { position: absolute; inset: 0; background: rgba(20, 26, 16, .45); opacity: 0; transition: opacity .22s; }
.ecm__panel {
	position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 400px); background: #fff; overflow: auto; overscroll-behavior: contain;
	transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.ecm.is-open .ecm__bg { opacity: 1; }
.ecm.is-open .ecm__panel { transform: none; }
html.ecm-lock { overflow: hidden; }
.ecm__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--ec-line); }
.ecm__head b { font-size: 20px; font-weight: 800; }
.ecm .ecm__x:not(#_) { width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--ec-soft) !important; color: var(--ec-ink) !important; display: flex; align-items: center; justify-content: center; }
.ecm__list { list-style: none; margin: 0; padding: 8px 8px 0; }
.ecm__list > li { border-bottom: 1px solid var(--ec-line); }
.ecm .ecm__it, .ecm .ecm__it:not(#_) {
	width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 8px !important; border: 0 !important; border-radius: 14px !important;
	background: transparent !important; color: var(--ec-ink) !important; font: 700 16px Manrope, sans-serif !important; text-align: left; cursor: pointer;
}
.ecm__it > span:not(.ecm__img) { flex: 1; }
.ecm__img { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--ec-soft); flex: 0 0 auto; }
.ecm__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecm__it small { color: var(--ec-muted); font-weight: 600; font-size: 13px; }
.ecm__it .ec-i { width: 18px; height: 18px; color: #A6AC9F; transition: transform .2s; }
.ecm__it[aria-expanded="true"] .ec-i { transform: rotate(90deg); }
.ecm__sub { list-style: none; margin: 0 0 8px 70px; padding: 0; }
.ecm__sub[hidden] { display: none; }
.ecm__sub a { display: flex; justify-content: space-between; padding: 9px 8px; color: var(--ec-ink) !important; font-weight: 600; font-size: 15px; }
.ecm__sub small { color: var(--ec-muted); }
.ecm__links { display: flex; flex-direction: column; padding: 12px 16px; gap: 2px; }
.ecm__links a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ec-ink) !important; font-weight: 600; }
.ecm__links .ec-i { color: var(--ec-green); }
.ecm__contact { margin: 4px 16px 0; padding: 16px; border-radius: 18px; background: var(--ec-cream); display: flex; flex-direction: column; gap: 12px; }
.ecm__call { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--ec-ink) !important; }
.ecm__call .ec-i { color: var(--ec-green); }
.ecm__msg { display: flex; gap: 8px; }
.ecm__msg a { flex: 1; text-align: center; padding: 11px; border-radius: 999px; font-weight: 700; color: #fff !important; }
.is-tg { background: #229ED9; }
.is-viber { background: #7360F2; }

/* Нижня панель (телефон) */
.ecb { display: none; }

.ecb-tip {
	position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 2147482950; max-width: calc(100% - 32px);
	padding: 10px 16px; border-radius: 14px; background: #1F2A1A; color: #fff; font: 700 14px/1.3 Manrope, sans-serif; text-align: center;
	opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.ecb-tip.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Футер */
.ecft { background: var(--ec-soft); margin-top: 48px; color: var(--ec-ink); }
.ecft__perks { background: #fff; border-top: 1px solid var(--ec-line); border-bottom: 1px solid var(--ec-line); }
.ecft__perks .ec-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.ecft__perks div { display: flex; align-items: center; gap: 12px; }
.ecft__perks .ec-i { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--ec-cream); color: var(--ec-green); }
.ecft__perks span { display: flex; flex-direction: column; font-size: 13px; color: var(--ec-muted); line-height: 1.35; }
.ecft__perks b { font-size: 15px; color: var(--ec-ink); }
.ecft__main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.ecft__brand img { width: 150px; height: auto; display: block; }
.ecft__brand p { margin: 14px 0 16px; color: var(--ec-muted); font-size: 14px; line-height: 1.55; max-width: 330px; }
.ecft__soc { display: flex; gap: 10px; }
.ecft__soc a { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ec-green) !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(31, 42, 26, .06); transition: transform .15s; }
.ecft__soc a:hover { transform: translateY(-2px); }
.ecft__soc svg { width: 21px; height: 21px; }
.ecft__col summary, .ecft__h { display: block; font-size: 16px; font-weight: 800; margin-bottom: 14px; list-style: none; color: var(--ec-ink); }
.ecft__col summary::-webkit-details-marker { display: none; }
.ecft__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ecft__col a { color: var(--ec-muted) !important; font-weight: 600; font-size: 14.5px; }
.ecft__col a:hover { color: var(--ec-green) !important; }
.ecft__contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ecft__tel { font-size: 24px; font-weight: 800; color: var(--ec-ink) !important; letter-spacing: -.3px; }
.ecft__msg { display: flex; gap: 8px; }
.ecft__msg a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 14px; }
.ecft__msg .ec-i { width: 18px; height: 18px; }
.ecft__mail { color: var(--ec-muted) !important; font-weight: 600; font-size: 14px; }
.ecft__pay { border-top: 1px solid var(--ec-line); }
.ecft__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; }
.ecft__chips span { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--ec-line); font-size: 13px; font-weight: 700; color: var(--ec-muted); }
.ecft__legal { border-top: 1px solid var(--ec-line); font-size: 13px; color: #858B7F; }
.ecft__legal .ec-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 20px; }

/* ---------- Планшет і телефон ---------- */
@media (max-width: 1279px) { .ech-strip__ship { display: none; } }
@media (max-width: 1100px) {
	.ech__phone { display: none; }
}
@media (max-width: 959px) {
	.ec-wrap { padding: 0 16px; }
	.ech-strip .ec-wrap { justify-content: center; min-height: 32px; font-size: 12.5px; }
	.ech-strip__links { display: none; }
	.ech__row { flex-wrap: wrap; gap: 6px 10px; min-height: 0; padding-top: 6px; padding-bottom: 10px; }
	.ech .ech__burger:not(#_) {
		display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; padding: 0 !important; border: 0 !important;
		border-radius: 50% !important; background: transparent !important; color: var(--ec-ink) !important;
	}
	.ech .ech__burger .ec-i { width: 26px; height: 26px; }
	.ech__logo img { width: 124px; }
	.ech .ech__cat:not(#_) { display: none; }
	.ech__chat { margin-left: auto; }
	.ech__icon { min-width: 44px; font-size: 11px; }
	.ech__icon .ec-i { width: 25px; height: 25px; }
	.ech__cart span[data-ec-sum] { display: none; }
	.ech__search { order: 10; flex: 1 0 100%; }
	.ech__search input[type="search"] { height: 46px; border-width: 1.5px !important; background: var(--ec-soft) !important; border-color: var(--ec-line) !important; font-size: 16px !important; }
	.ech__search input[type="search"]:focus { border-color: var(--ec-green) !important; background: #fff !important; }
	.ech .ech__sgo:not(#_) { width: 36px; height: 36px; }
	/* Пошук на весь екран */
	.ech.is-search { z-index: 2147483001; transform: none; }
	.ech.is-search .ech__search { position: fixed; inset: 0; z-index: 2; background: #fff; padding: 10px 12px; align-items: flex-start; flex-wrap: wrap; align-content: flex-start; }
	.ech.is-search .ech__sback:not(#_) {
		display: flex; align-items: center; justify-content: center; width: 44px; height: 46px; margin-right: 6px; padding: 0 !important; border: 0 !important;
		background: transparent !important; color: var(--ec-ink) !important; border-radius: 50% !important;
	}
	.ech.is-search .ech__search input[type="search"] { flex: 1; width: auto; }
	.ech.is-search .ech__sgo:not(#_) { right: 17px; top: 15px; }
	.ech.is-search .ech__sugg { position: static; flex: 1 0 100%; box-shadow: none; padding: 8px 0; max-height: none; margin-top: 6px; }
	.ech-mega { display: none !important; }

	.ecb {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482900; background: rgba(255, 255, 255, .97);
		backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
		border-top: 1px solid var(--ec-line); padding: 4px 4px env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(31, 42, 26, .06);
	}
	.ecb > a, .ecb > button, .ecb > button:not(#_) {
		flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 56px; justify-content: center; padding: 0 !important;
		border: 0 !important; border-radius: 14px !important; background: transparent !important; color: #6E7568 !important;
		font: 600 11px Manrope, sans-serif !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
	}
	.ecb .ec-i { width: 24px; height: 24px; }
	.ecb .is-act { color: var(--ec-green) !important; }
	.ecb .is-act .ec-i { stroke-width: 2.3; }
	.ecb [data-ecb="chat"] .ec-i { color: #229ED9; }
	html.ec-on body:not(.ec-card-page) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	/* Кошик тепер у нижній панелі: плаваючу кнопку й чат SendPulse на телефоні ховаємо (на картці товару — своя панель) */
	html.ec-on body:not(.ec-card-page) #ecf, html.ec-on body:not(.ec-card-page) sp-live-chat { display: none !important; }
	html.ec-on body.ec-card-page .ecb { display: none; }

	.ecft { margin-top: 32px; }
	.ecft__perks .ec-wrap { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; padding-bottom: 18px; }
	.ecft__perks .ec-i { width: 40px; height: 40px; padding: 9px; }
	.ecft__perks b { font-size: 13.5px; }
	.ecft__perks span { font-size: 12px; }
	.ecft__main { grid-template-columns: 1fr; gap: 0; padding-top: 24px; padding-bottom: 8px; }
	.ecft__brand { padding-bottom: 20px; }
	.ecft__col { border-top: 1px solid var(--ec-line); }
	.ecft__col summary { margin: 0; padding: 16px 0; display: flex; justify-content: space-between; cursor: pointer; }
	.ecft__col summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ec-green); font-weight: 600; }
	.ecft__col[open] summary::after { content: "−"; }
	.ecft__col ul { padding-bottom: 16px; }
	.ecft__contact { border-top: 1px solid var(--ec-line); padding: 18px 0 20px; }
	.ecft__legal .ec-wrap { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.ech, .ecm__panel, .ecm__bg { transition: none; }
}
/* Тема дає кнопкам свій розмір і розрідження літер — у нижній панелі прибираємо */
.ecb span:not(.ech__cico) { font: 600 11px/1.2 Manrope, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
/* Менше порожнечі між шапкою й вмістом */
html.ec-on #primary { margin-top: 24px !important; }
@media (max-width: 959px) { html.ec-on #primary { margin-top: 12px !important; } }
/* Спільне правило для пар кнопок: на телефоні завжди в один ряд, рівної ширини, текст в один рядок.
 * Довгі підписи мають коротку версію: .ec-lg — лише ПК, .ec-sm — лише телефон. */
.ec-sm { display: none; }
@media (max-width: 600px) { .ec-lg { display: none !important; } .ec-sm { display: inline !important; } }
/* Ніщо не повинно розширювати сторінку вбік (clip не ламає липку шапку, на відміну від hidden) */
html.ec-on, html.ec-on body { overflow-x: clip; max-width: 100%; }
@media (max-width: 959px) {
	.ech-strip .ec-wrap { overflow: hidden; }
	.ech-strip__perks { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }
	.ech-strip__perks .ec-i { display: inline-block; vertical-align: -3px; margin-right: 4px; }
}
/* Меню й пошук на телефоні: висота — видима область, прокрутка не «протікає» на сторінку */
.ecm { height: 100vh; height: var(--ec-vh, 100dvh); bottom: auto; }
.ecm__bg { touch-action: none; }
.ecm__panel { padding-top: env(safe-area-inset-top); }
@media (max-width: 959px) {
	.ech.is-search .ech__search { height: var(--ec-vh, 100dvh); bottom: auto; overflow-y: auto; overscroll-behavior: contain; padding-top: calc(10px + env(safe-area-inset-top)); }
}
.ecm { top: 0; bottom: auto; height: 100vh; height: 100lvh; }
.ecm__panel { padding-bottom: calc(24px + var(--ec-kb, 0px) + env(safe-area-inset-bottom)); }
@media (max-width: 959px) {
	.ech.is-search .ech__search { height: 100vh; height: 100lvh; padding-bottom: var(--ec-kb, 0px); }
}
/* v0.21: у новому Safari панелі браузера напівпрозорі й лежать поверх сайту. Щоб у щілину між ними й нашою
 * шапкою/нижньою панеллю не було видно сторінку — продовжуємо їхній фон за край екрана. */
html.ec-on { background: #fff; }
html.ec-on .ech::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; background: #fff; pointer-events: none; }
@media (max-width: 959px) {
	html.ec-on .ech { padding-top: env(safe-area-inset-top); }
	.ecb { padding-bottom: max(4px, env(safe-area-inset-bottom)); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.ecb::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 200px; background: #fff; pointer-events: none; }
}
/* Смуга з порогами — поверх білого «продовження» шапки, щоб її було видно */
html.ec-on .ech-strip { position: relative; z-index: 1001; }
/* v0.21.3: напівпрозорі панелі iOS (Safari, Telegram) показують те, що вже прокрутилось за край екрана.
 * Закриваємо обидва краї білими шарами, прив'язаними до самого екрана, — незалежно від того,
 * де зараз шапка (вона ховається при прокрутці вниз). */
@media (max-width: 959px) {
	html.ec-on::before, html.ec-on::after { content: ""; position: fixed; left: 0; right: 0; height: 400px; background: #fff; z-index: 999; pointer-events: none; }
	html.ec-on::before { bottom: 100%; }
	html.ec-on::after { top: 100%; }
}
/* Рівні рядки в заголовках і коротких підписах, «гарні» абзаци без однослівних хвостів */
html.ec-on :is(.ehm, .ecft, .ech-strip, .ecc, .ect, .ecd, .ehw, .ety, .ec-card, .ecm) :is(h1, h2, h3, b, strong, small, dt, summary, figcaption, .ect__name, .ecd__name) { text-wrap: balance; }
html.ec-on :is(.ehm, .ecft, .ecc, .ect, .ecd, .ehw, .ety, .ec-card) :is(p, span, em, dd, li, blockquote) { text-wrap: pretty; }
.ech__sload { display: flex; align-items: center; gap: 10px; padding: 10px; font: 700 14px Manrope, sans-serif; color: #5B6455; }
.ech__sload i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #DDF0CF; border-top-color: #3F7A22; animation: ech-spin .7s linear infinite; }
@keyframes ech-spin { to { transform: rotate(360deg); } }
.ech__sk { height: 56px; margin: 4px 0; border-radius: 12px; background: linear-gradient(100deg, #F1F4EC 30%, #F9FBF6 50%, #F1F4EC 70%) 0 0 / 300% 100%; animation: ech-shine 1.2s linear infinite; }
@keyframes ech-shine { to { background-position: -150% 0; } }
/* Якщо скрипти не ввімкнули новий дизайн (?newcard=0) — серверна розмітка нового не показується */
html:not(.ec-on) .ec-chrome { display: none !important; }
html.ec-on .ec-chrome { display: contents; }