/* Altero — мобильная главная (до 478px), по согласованному прототипу.
   Секции «Миссия» и баннер — экран минус шапка (задано в Bricks),
   здесь — раскладка внутри них, точки слайдера и подсказка коллекции. */

@media (max-width: 767px) {
	html:is(:lang(ru), :lang(en)) #brxe-rdzkpz { line-height: 1.7; }
}

@media (max-width: 478px) {

	/* Высота экрана в px (--altero-vh ставит скрипт один раз): Safari на iPhone меняет svh,
	   пока прокручиваешь, — секции росли и сжимались, баннер «наезжал» на «Миссию». */
	body #brxe-jphfqh { height: calc(var(--altero-vh, 100svh) - var(--header-height)); }

	/* ---------- «Миссия»: 4 слайда, резиновая высота по макету 375×695 ---------- */
	body #brxe-hmueab { height: calc(100vw * 695 / 375); }
	body #brxe-rottiv { height: 100%; }
	body #brxe-rottiv > .img-card { height: 100%; overflow: hidden; }
	/* фото кадрируются, а не растягиваются (в Bricks стоит fill — на широких телефонах сплющивало) */
	body #brxe-rottiv > .img-card img:not(#brxe-rdzkpz + img) { width: 100%; height: 100%; object-fit: cover; }

	/* слайд с текстом: текст по центру свободного пространства над картинкой
	   (у картинки нет id в вёрстке — берём соседа текста) */
	body #brxe-rottiv > .img-card:has(> #brxe-rdzkpz) { display: flex; flex-direction: column; }
	body #brxe-rdzkpz { margin: auto; position: relative; top: 24px; text-align: center; width: 296px; max-width: calc(100% - 40px); padding: 0; font-size: 16px; flex-shrink: 0; }
	body #brxe-rdzkpz + img { flex: 0 1 auto; min-height: 0; margin-top: 0; width: 100%; max-height: 70%; object-fit: contain; object-position: bottom; }

	.mission-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; padding: 7px 10px;
		border-radius: 20px; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.mission-dots button { width: 18px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .3s, width .3s; }
	.mission-dots button.is-active { width: 28px; background: #fff; }

	/* Баннер на телефоне — одна картинка, собранная по макету (3-bottles-banner-mobile, мобильный источник фона в Bricks).
	   Высота — не меньше пропорции макета (1122×2070 без достроенного неба): на широких телефонах секция растёт
	   вместе с картинкой, а не срезает лицо; на высоких — экран, сверху добирается небо. */
	body #brxe-jphfqh { height: max(calc(var(--altero-vh, 100svh) - var(--header-height)), 184.5vw); }

	/* ---------- Коллекция ---------- */
	body #brxe-vwuzed { width: min-content; font-size: 30px; line-height: 1.05; } /* «Коллекция / масел» в две строки */
	body #brxe-gdbshu .slider-product-card__heading { font-size: 17px; }

	/* подсказка «листается»: один раз лента сдвигается и возвращается.
	   Двигаем саму ленту (translate складывается с transform от Splide), а не рамку .splide__track —
	   иначе вместе с ней уезжает обрезка и следующая карточка срезается.
	   --altero-nudge — половина карточки, считает скрипт. */
	body #brxe-gdbshu.is-nudging .splide__list { animation: altero-nudge 1.4s cubic-bezier(.45, 0, .25, 1); }
	@keyframes altero-nudge {
		0%, 100% { translate: 0; }
		35%, 60% { translate: var(--altero-nudge, -120px) 0; }
	}
}

/* Коллекция на телефоне (до 478; шире Bricks показывает другие, «десктопные» стрелки — их не трогаем):
   полоски вместо стрелок, как у «Миссии», но тёмные — фон тут белый.
   Стрелки скрыты сразу стилями (без мелькания до запуска скрипта); их контейнер под слайдером
   растянут и держит высоту — скрипт кладёт полоски в него, вёрстка не прыгает.
   Рамка и размеры полосок — как у «Миссии». Полоска — ::before (скруглена сама),
   кнопка выше полоски, ::after расширяет зону нажатия — чтобы попадать пальцем. */
@media (max-width: 478px) {
	body #brxe-hsyfyi { width: 100%; justify-content: center; align-items: center; min-height: 38px; }
	body #brxe-hsyfyi > .brxe-xproslidercontrol { display: none !important; }
	.collection-dots { display: flex; gap: 6px; padding: 0 10px; border-radius: 20px; background: rgba(0, 0, 0, .06); }
	.collection-dots button { position: relative; display: flex; align-items: center; width: 18px; height: 17px; padding: 0; border: 0;
		background: none; cursor: pointer; transition: width .3s; }
	.collection-dots button::before { content: ""; width: 100%; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .2); transition: background-color .3s; }
	.collection-dots button::after { content: ""; position: absolute; inset: -10px -3px; }
	.collection-dots button.is-active { width: 28px; }
	.collection-dots button.is-active::before { background: #1f1d1b; }
}

@media (max-width: 478px) and (prefers-reduced-motion: reduce) {
	body #brxe-gdbshu.is-nudging .splide__list { animation: none; }
}

/* ---------- Широкие телефоны 479–767 (30.10): тот же подход, что на телефоне ----------
   Без макета: «Миссия» — слайдер по два слайда (каждый в пропорции 375×695),
   баннер — отдельная картинка 4:5 (3-bottles-banner-tablet, источник mobile_landscape в Bricks). */
@media (min-width: 479px) and (max-width: 767px) {

	/* Первый экран — мобильная раскладка (как до 478 в Bricks): заголовок сверху, под ним вертикальная картинка.
	   Картинка не выше экрана и вписана целиком (рука с вилкой внизу), фон секции — в цвет картинки. */
	body #hero { padding: 0; overflow: clip; height: auto; background-color: #f0f0f0; aspect-ratio: auto; }
	body #brxe-lxfdqz { display: flex; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; }
	body #brxe-unxagm { width: 100%; padding-right: var(--gutter); padding-left: var(--gutter); }
	body #brxe-tscyvi { display: block; width: 100%; max-height: calc(var(--altero-vh, 100svh) - var(--header-height) - 9rem);
		object-fit: contain; object-position: 50% 100%; }
	body #brxe-uwcqbz { display: none; }

	body #brxe-hmueab { position: relative; overflow: clip; height: calc(50vw * 695 / 375); }
	body #brxe-rottiv { height: 100%; grid-template-columns: repeat(4, 50%); overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
	body #brxe-rottiv::-webkit-scrollbar { display: none; }
	body #brxe-rottiv > .img-card { height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
	body #brxe-rottiv > .img-card img:not(#brxe-rdzkpz + img) { width: 100%; height: 100%; object-fit: cover; }

	body #brxe-rottiv > .img-card:has(> #brxe-rdzkpz) { display: flex; flex-direction: column; }
	body #brxe-rdzkpz { margin: auto; position: relative; top: 24px; text-align: center; width: 296px; max-width: calc(100% - 32px); padding: 0; font-size: 15px; flex-shrink: 0; }
	body #brxe-rdzkpz + img { flex: 0 1 auto; min-height: 0; margin-top: 0; width: 100%; max-height: 70%; object-fit: contain; object-position: bottom; }

	.mission-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; padding: 7px 10px;
		border-radius: 20px; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.mission-dots button { width: 18px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .3s, width .3s; }
	.mission-dots button.is-active { width: 28px; background: #fff; }

	body #brxe-jphfqh { overflow: clip; height: 125vw; }
	body #brxe-smspqd { display: none; }
}