/*
 * Smartmarket — вид всего сайта (вторая версия оформления).
 *
 * Порядок: основа → шапка и панель → детали (кнопки, ярлыки, «пилюли»)
 * → товары → экраны → шторки → подвал.
 *
 * ЧТО ИЗМЕНИЛОСЬ ПРОТИВ ПЕРВОЙ ВЕРСИИ И ПОЧЕМУ. Первая была «жёлтая шапка,
 * белые карточки с тенью на сером»: много цвета и много рамок, глаз не знал,
 * куда смотреть. Здесь страница белая, цвет — только у действия, а товары
 * разделяет воздух, а не тени:
 *
 *   • шапка — в цвете бренда (жёлтая), поля и кнопки в ней белые;
 *     «когда привезём» — мелкой строкой над адресом;
 *   • фото товара лежит на светло-сером «колодце» и сливается с ним
 *     (`mix-blend-mode: multiply`: у фотографий каталога белый фон);
 *   • цена — первой и самой крупной строкой карточки;
 *   • «+» на углу фото, после нажатия — жёлтая полоса «− 1 +» во всю ширину;
 *   • отделы — плитки с подписью сверху и картинкой в углу;
 *   • тень есть только у того, что плавает НАД страницей.
 *
 * Правила, выученные дорогой ценой на соседнем сайте и записанные здесь:
 *
 *   • одноколоночной сетке колонка задаётся явно — `minmax(0, 1fr)`:
 *     без неё сетка растягивается по самой длинной ленте внутри;
 *   • у элемента флекса `min-width: auto` — лента не листается, пока
 *     цепочку над ней не разжали `min-width: 0`;
 *   • бесконечная анимация — только пока идёт загрузка, и только
 *     на `transform`/`opacity`;
 *   • поле ввода — не мельче 16 px: иначе Safari на iPhone увеличивает
 *     страницу и не возвращает масштаб.
 */

/* ── Основа ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 200px; }

body.sa {
	margin: 0;
	background: var(--sa-bg);
	color: var(--sa-ink);
	font: 500 var(--sa-fs-md)/1.42 var(--sa-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	overflow-x: clip;
}
/* Корзина, касса, «спасибо», кабинет: белые блоки на сером — форме нужны границы блоков. */
body.sa-view-cart, body.sa-view-checkout, body.sa-view-thanks, body.sa-view-account { background: var(--sa-canvas); }

.sa img { max-width: 100%; height: auto; display: block; }
.sa a { color: var(--sa-ink); text-decoration: none; }
.sa h1, .sa h2, .sa h3 { margin: 0; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; }
.sa p { margin: 0 0 12px; }
.sa button, .sa input, .sa select, .sa textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.sa button { cursor: pointer; }
.sa [hidden] { display: none !important; }
.sa :focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; border-radius: 8px; }

.sa-skip { position: absolute; left: -999px; top: 0; z-index: 1000; padding: 10px 14px; background: var(--sa-surface); }
.sa-skip:focus { left: 8px; top: 8px; }

/* Подписи для читалок экрана: WooCommerce печатает их в полях и кнопках. */
.screen-reader-text, .sa .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.sa-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sa-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--sa-w);
	margin: 0 auto;
	padding: 8px var(--sa-g) calc(var(--sa-tab-h) + var(--sa-safe-b) + 88px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-content: start;
}
.sa-muted { color: var(--sa-ink-2); font-size: var(--sa-fs-md); }
.sa-i { width: 22px; height: 22px; flex: 0 0 auto; }

/* ── Шапка ───────────────────────────────────────────────────────── */

.sa-bar {
	position: sticky;
	top: calc(8px - var(--sa-bar-top)); /* верхняя строка уезжает, поиск остаётся — с воздухом в 8 px над ним */
	z-index: 60;
	/*
	 * Шапка — в цвете бренда: по ней сайт узнают с первого взгляда. Всё, что
	 * в ней нажимают (поиск, меню, кабинет), — белое на жёлтом; корзина —
	 * вторым цветом бренда, зелёным: жёлтая кнопка на жёлтой шапке пропала бы.
	 */
	background: var(--sa-brand);
	color: var(--sa-brand-ink);
}
.sa-bar-in {
	max-width: var(--sa-w); margin: 0 auto;
	padding: 0 var(--sa-g) 10px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "lead addr menu" "search search search";
	align-items: center;
	column-gap: 12px;
}
.sa-logo, .sa-bar-back { grid-area: lead; }
.sa-logo { display: inline-flex; align-items: center; }
/* Знак показывается целиком: скруглённые углы срезали сам рисунок. */
.sa-logo-img { width: 40px; height: 40px; border-radius: 0; object-fit: contain; }
.sa-logo-text { font-weight: 800; font-size: var(--sa-fs-lg); letter-spacing: -0.03em; }

/* «Когда и куда»: мелкая строка про доставку и адрес под ней. */
.sa-addr {
	grid-area: addr;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; justify-items: start; align-content: center;
	min-width: 0; height: var(--sa-bar-top); padding: 0;
	border: 0; background: none; text-align: left;
}
.sa-addr-k {
	display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 15px;
	color: var(--sa-brand-ink); font-size: var(--sa-fs-xs); font-weight: 700; line-height: 1.25; opacity: 0.86;
}
.sa-addr-k .sa-i { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.sa-addr-k > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sa-addr-v { display: flex; align-items: center; gap: 2px; max-width: 100%; font-size: var(--sa-fs-base); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.sa-addr-v .sa-i { width: 18px; height: 18px; color: var(--sa-brand-ink); opacity: 0.6; stroke-width: 2.2; }
.sa-addr-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sa-bar-menu { grid-area: menu; }

.sa-bar-search {
	grid-area: search;
	display: flex; align-items: center; gap: 10px;
	height: 46px; padding: 0 14px;
	border-radius: var(--sa-r-sm);
	background: var(--sa-surface); color: var(--sa-ink-3);
	transition: box-shadow var(--sa-d1);
}
.sa-bar-search:focus-within { box-shadow: inset 0 0 0 2px var(--sa-ink); }
.sa-bar-search .sa-i { width: 20px; height: 20px; stroke-width: 2.1; }
.sa-bar-search input {
	flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
	font-size: 16px; font-weight: 500; color: var(--sa-ink); -webkit-appearance: none; appearance: none;
}
.sa-bar-search input::placeholder { color: var(--sa-ink-3); opacity: 1; }
.sa-bar-search input::-webkit-search-cancel-button { display: none; }
.sa-bar-nav { display: none; }

/* Касса и «спасибо»: одна строка — назад, название, замок. Белая: на шаге оплаты ничто не отвлекает. */
.sa-bar--focus { top: 0; background: var(--sa-bg); color: var(--sa-ink); box-shadow: 0 1px 0 var(--sa-line); }
/* В шапке кнопки белые на цвете бренда; на белой шапке кассы — серые, как везде. */
.sa-bar:not(.sa-bar--focus) .sa-ibtn { background: rgba(255, 255, 255, 0.62); }
.sa-bar:not(.sa-bar--focus) .sa-ibtn:active { background: #fff; }
.sa-bar--focus .sa-bar-in { grid-template-areas: "lead title secure"; grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: 0; height: var(--sa-bar-top); }
/* Корзина на телефоне: искать тут нечего, шапка — одна строка. */
@media (max-width: 899.98px) {
	.sa-bar--slim { top: 0; }
	.sa-bar--slim .sa-bar-in { grid-template-areas: "lead addr menu"; padding-bottom: 0; }
	.sa-bar--slim .sa-bar-search { display: none; }
}
.sa-bar-title { grid-area: title; font-weight: 800; font-size: var(--sa-fs-lg); letter-spacing: -0.02em; }
.sa-bar-secure { grid-area: secure; display: inline-flex; color: var(--sa-ink-3); }

.sa-ibtn {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: var(--sa-fill); color: var(--sa-ink) !important;
	transition: transform var(--sa-d1) var(--sa-ease), background var(--sa-d1);
}
.sa-ibtn:active { transform: scale(0.92); background: var(--sa-fill-2); }
.sa-ibtn .sa-i { width: 20px; height: 20px; stroke-width: 2.1; }

.sa-count {
	display: inline-grid; place-items: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: var(--sa-r-pill);
	background: var(--sa-brand); color: var(--sa-brand-ink);
	font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
	.sa-bar { top: 0; }
	.sa-bar-in {
		grid-template-columns: auto minmax(170px, 270px) minmax(0, 1fr) auto auto;
		grid-template-areas: "lead addr search nav menu";
		column-gap: 20px;
		padding: 12px var(--sa-g);
	}
	.sa-addr { height: 46px; }
	.sa-logo-img { width: 44px; height: 44px; }
	.sa-bar-nav { grid-area: nav; display: flex; align-items: center; gap: 10px; }
	.sa-ibtn { width: 46px; height: 46px; }
	.sa-cartbtn {
		position: relative;
		display: inline-flex; align-items: center; gap: 8px;
		height: 46px; padding: 0 18px;
		border-radius: var(--sa-r-sm);
		background: var(--sa-accent); color: #fff !important;
		font-weight: 800; font-variant-numeric: tabular-nums;
		transition: filter var(--sa-d1), transform var(--sa-d1) var(--sa-ease);
	}
	.sa-cartbtn:hover { filter: brightness(0.94); }
	.sa-cartbtn:active { transform: scale(0.97); }
	.sa-cartbtn .sa-i { width: 20px; height: 20px; stroke-width: 2.1; }
	.sa-cartbtn .sa-count { background: #fff; color: var(--sa-accent); }
	.sa-bar--focus .sa-bar-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead title secure"; height: 70px; padding: 0 var(--sa-g); }
}

/* ── Нижняя панель (телефон) ─────────────────────────────────────── */

.sa-tabs {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
	background: var(--sa-bg);
	box-shadow: 0 -1px 0 var(--sa-line);
	padding-bottom: var(--sa-safe-b);
}
.sa-tabs-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; height: var(--sa-tab-h); }
.sa-tab {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: var(--sa-ink-3) !important; font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.sa-tab .sa-i { width: 24px; height: 24px; stroke-width: 1.9; }
.sa-tab.is-on { color: var(--sa-ink) !important; }
.sa-tab.is-on .sa-i { stroke-width: 2.3; }
.sa-tab-i { position: relative; display: inline-flex; transition: transform var(--sa-d1) var(--sa-ease); }
.sa-tab-i .sa-count { position: absolute; top: -5px; left: 14px; box-shadow: 0 0 0 2px var(--sa-bg); }
.sa-tab:active .sa-tab-i { transform: scale(0.88); }

/* «Корзина · сумма»: единственная цветная вещь на экране каталога. */
.sa-cartbar {
	position: fixed; left: 12px; right: 12px;
	bottom: calc(var(--sa-tab-h) + var(--sa-safe-b) + 8px);
	z-index: 65;
	display: flex; align-items: center; gap: 12px;
	max-width: 520px; margin: 0 auto;
	height: 56px; padding: 0 20px 0 10px;
	border-radius: var(--sa-r-md);
	background: var(--sa-brand); color: var(--sa-brand-ink) !important;
	font-size: var(--sa-fs-base); font-weight: 800; letter-spacing: -0.015em;
	box-shadow: var(--sa-sh-2);
	animation: sa-rise var(--sa-d3) var(--sa-ease);
}
.sa-cartbar:active { background: var(--sa-brand-press); }
.sa-cartbar-n {
	display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
	border-radius: 12px; background: rgba(33, 32, 31, 0.1); font-variant-numeric: tabular-nums;
}
.sa-cartbar-l { flex: 1; }
.sa-cartbar-s { font-variant-numeric: tabular-nums; }
@keyframes sa-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 900px) {
	.sa-tabs, .sa-cartbar { display: none !important; }
	.sa-main { padding-top: 16px; padding-bottom: 72px; gap: 40px; }
}

/* ── Кнопки ──────────────────────────────────────────────────────── */

.sa-btn, .sa .button, .sa button.button, .sa a.button, .sa input.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 10px 22px;
	border: 0; border-radius: var(--sa-r-sm);
	background: var(--sa-brand); color: var(--sa-brand-ink) !important;
	font-size: var(--sa-fs-md); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-align: center; text-decoration: none;
	transition: transform var(--sa-d1) var(--sa-ease), background var(--sa-d1);
}
.sa-btn:hover, .sa .button:hover { background: var(--sa-brand-press); }
.sa-btn:active, .sa .button:active { transform: scale(0.98); background: var(--sa-brand-press); }
.sa-btn[disabled], .sa .button[disabled], .sa .button.disabled { background: var(--sa-fill-2); color: var(--sa-ink-3) !important; cursor: not-allowed; }
.sa-btn--soft, .sa-btn--soft:hover { background: var(--sa-fill); color: var(--sa-ink) !important; }
.sa-btn--soft:active { background: var(--sa-fill-2); }
.sa-btn--block { display: flex; width: 100%; }
.sa-btn--lg { min-height: 56px; border-radius: var(--sa-r-md); font-size: var(--sa-fs-base); font-weight: 800; justify-content: space-between; padding: 12px 22px; font-variant-numeric: tabular-nums; }
.sa-btn--lg > span:only-child { margin: 0 auto; }
.sa-btn--sm { min-height: 36px; padding: 6px 14px; border-radius: 12px; font-size: var(--sa-fs-sm); }
.sa .smc-btn-danger, .sa .smc-btn-danger:hover { background: var(--sa-bad); color: #fff !important; }
.sa-linkbtn { border: 0; background: none; padding: 0; color: var(--sa-ink); font-weight: 700; font-size: inherit; text-decoration: underline; text-decoration-color: var(--sa-fill-3); text-underline-offset: 3px; }

/* ── Ярлыки, заметки, «пилюли» ───────────────────────────────────── */

.sa-badge {
	position: absolute; top: 8px; left: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	height: 22px; padding: 0 7px;
	border-radius: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: -0.01em; line-height: 1;
}
.sa-badge--promo, .sa-badge--sale { background: var(--sa-promo); color: var(--sa-promo-ink); }
.sa-badge--gift { background: var(--sa-brand); color: var(--sa-brand-ink); }
.sa-badge--lg { height: 30px; font-size: 15px; padding: 0 11px; border-radius: 10px; top: 14px; left: 14px; }

.sa-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; font-size: var(--sa-fs-xs); font-weight: 700; width: fit-content; }
.sa-tag--promo { background: var(--sa-promo-soft); color: var(--sa-promo); }
.sa-tag--hint { background: var(--sa-fill); color: var(--sa-ink-2); }
.sa-tag--gift { background: var(--sa-gift-soft); color: var(--sa-gift); }

.sa-note {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 0; padding: 12px 14px;
	border-radius: var(--sa-r-sm);
	background: var(--sa-fill); color: var(--sa-ink-2);
	font-size: var(--sa-fs-sm); font-weight: 600;
}
.sa-note .sa-i { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.3; }
.sa-note--ok { background: var(--sa-ok-soft); color: var(--sa-ok); font-weight: 700; }
.sa-note--warn { background: var(--sa-warn-soft); color: var(--sa-warn); }
.sa-note--bad { background: var(--sa-bad-soft); color: var(--sa-bad); }
.sa-note a { font-weight: 800; margin-left: 4px; color: inherit; text-decoration: underline; }

.sa-chips { min-width: 0; margin: 0 calc(var(--sa-g) * -1); }
.sa-chips-in { display: flex; gap: 6px; overflow-x: auto; padding: 2px var(--sa-g) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-chips-in::-webkit-scrollbar { display: none; }
.sa-chip {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 38px; padding: 6px 14px;
	border: 0; border-radius: 12px;
	background: var(--sa-fill); color: var(--sa-ink) !important;
	font-size: 14px; font-weight: 700; white-space: nowrap;
	transition: background var(--sa-d1), color var(--sa-d1);
}
.sa-chip:active { background: var(--sa-fill-2); }

/* Категории над выдачей поиска: полка целиком — прямой ответ на запрос. */
.sa-srcats { margin: 0 0 16px; }
.sa-srcats-t { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--sa-ink-3); }
.sa-srcats-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.sa-srcat {
	display: flex; align-items: center; gap: 10px; min-width: 0;
	padding: 10px 12px; border-radius: 14px;
	background: var(--sa-fill); color: var(--sa-ink) !important;
	transition: background var(--sa-d1);
}
.sa-srcat:active { background: var(--sa-fill-2); }
.sa-srcat-e { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; font-size: 18px; }
.sa-srcat-e .sa-i { width: 18px; height: 18px; }
.sa-srcat-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sa-srcat-n strong { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-srcat-n small { font-size: 12px; color: var(--sa-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-srcat > .sa-i { flex: 0 0 16px; width: 16px; height: 16px; color: var(--sa-ink-3); }
.sa-chip.is-on { background: var(--sa-ink); color: #fff !important; }


/* ── Разделы и ленты ─────────────────────────────────────────────── */

.sa-sec { min-width: 0; }
.sa-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sa-sec-h h2 { font-size: var(--sa-fs-xl); min-width: 0; text-wrap: balance; }
.sa-sec-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; color: var(--sa-ink-2) !important; font-size: 14px; font-weight: 700; }
.sa-sec-more .sa-i { width: 16px; height: 16px; stroke-width: 2.4; }

.sa-rail {
	display: flex; gap: 10px;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--sa-g); /* без него привязка ставит первую карточку к самому краю экрана */
	margin: 0 calc(var(--sa-g) * -1); padding: 0 var(--sa-g) 4px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sa-rail::-webkit-scrollbar { display: none; }
.sa-rail > .sa-card { flex: 0 0 124px; scroll-snap-align: start; }
@media (min-width: 600px) { .sa-rail { gap: 14px; } .sa-rail > .sa-card { flex-basis: 152px; } }
@media (min-width: 900px) { .sa-rail > .sa-card { flex-basis: 172px; } }

/*
 * Сетка товаров: три карточки в ряд на телефоне (как в приложениях доставки —
 * в экран помещается девять товаров, а не четыре). Число колонок выводит
 * браузер из наименьшей ширины карточки: у телефона уже 344 px их две.
 */
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 8px; }
@media (min-width: 560px) { .sa-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 14px; } }
@media (min-width: 900px) { .sa-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 32px 18px; } }
.sa-more { display: flex; justify-content: center; padding: 8px 0; min-height: 60px; }

/* ── Карточка товара ─────────────────────────────────────────────── */

.sa-card { position: relative; min-width: 0; display: flex; flex-direction: column; }
.sa-card-m { position: relative; }
.sa-card-img {
	position: relative; display: block; aspect-ratio: 1; overflow: hidden;
	border-radius: var(--sa-r-md);
	background: var(--sa-fill);
}
/* Белый фон фотографии сливается с «колодцем»: видно товар, а не прямоугольник вокруг него. */
.sa-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform var(--sa-d2) var(--sa-ease); }
@media (hover: hover) { .sa-card:hover .sa-card-img img { transform: scale(1.05); } }
.sa-card-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sa-ink-3); }
.sa-card-b { display: flex; flex-direction: column; gap: 3px; padding: 8px 2px 0; }
/* Цена — первой: её ищут глазами. Цена по акции красная, прежняя — мелко и после неё. */
.sa-card-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--sa-ink); }
.sa-card-p del { order: 2; color: var(--sa-ink-3); font-weight: 600; font-size: 12px; letter-spacing: -0.01em; }
.sa-card-p ins { text-decoration: none; color: var(--sa-promo); }
.sa-card-n {
	color: var(--sa-ink) !important; font-size: 13px; font-weight: 500; line-height: 1.28; letter-spacing: -0.005em;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.sa-card-rule { color: var(--sa-promo); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.sa-card-out { color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 700; }
.sa-card.is-out .sa-card-img img { opacity: 0.4; filter: grayscale(1); }

/*
 * Счётчик: в свёрнутом виде — белый «+» на углу фото; после первого нажатия
 * раскрывается в жёлтую полосу «− 1 +» по ширине фото. Что лежит в корзине,
 * видно по цвету, не читая числа.
 */
.sa-step {
	display: inline-flex; align-items: center;
	height: 36px; border-radius: 12px;
	background: var(--sa-surface); color: var(--sa-ink);
	box-shadow: var(--sa-sh-1);
	transition: background var(--sa-d1);
}
.sa-card-m > .sa-step { position: absolute; right: 6px; bottom: 6px; z-index: 2; max-width: calc(100% - 12px); }
.sa-step-b {
	display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
	border: 0; border-radius: 12px; background: transparent; color: inherit;
	transition: transform var(--sa-d1) var(--sa-ease);
}
.sa-step-b .sa-i { width: 20px; height: 20px; stroke-width: 2.4; }
.sa-step-b:active { transform: scale(0.82); }
/* Число — поле ввода: его можно набрать. Не мельче 16 px, иначе Safari на iPhone увеличивает страницу при нажатии. */
.sa-step-n {
	min-width: 0; max-width: 0; width: 0; height: 28px; padding: 0; overflow: hidden;
	border: 0; border-radius: 8px; outline: 0; background: none; color: inherit;
	text-align: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
	-webkit-appearance: none; appearance: none; -moz-appearance: textfield;
}
.sa-step-n:focus { background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 2px var(--sa-ink); }
.sa-step-minus { width: 0; overflow: hidden; opacity: 0; }
.sa-step.is-on { background: var(--sa-brand); color: var(--sa-brand-ink); box-shadow: none; }
.sa-card-m > .sa-step.is-on { left: 6px; justify-content: space-between; }
.sa-step.is-on .sa-step-minus { width: 36px; opacity: 1; }
.sa-step.is-on .sa-step-n { min-width: 30px; max-width: none; width: 30px; flex: 0 0 30px; }
.sa-step.is-pop { animation: sa-bump 320ms var(--sa-spring); }
@keyframes sa-bump { 40% { transform: scale(1.08); } }

.sa-step--lg { width: 100%; height: 56px; justify-content: center; border-radius: var(--sa-r-md); background: var(--sa-brand); color: var(--sa-brand-ink); box-shadow: none; }
.sa-step--lg .sa-step-b { width: 56px; height: 56px; }
.sa-step--lg .sa-step-plus { width: auto; padding: 0 20px; gap: 8px; display: inline-flex; align-items: center; font-size: var(--sa-fs-base); font-weight: 800; }
/*
 * Пока товара в корзине нет, вся полоса — одна кнопка «в корзину», и подпись стоит по её центру.
 * Спрятанный «минус» занимал свои 56 px (правило размера кнопок сильнее правила «спрятан»),
 * и подпись уезжала вправо на половину этой ширины.
 */
.sa-step--lg:not(.is-on) .sa-step-minus { width: 0; }
.sa-step--lg:not(.is-on) .sa-step-plus { flex: 1 1 auto; width: 100%; justify-content: center; }
/* Товар уже в корзине — кнопка успокаивается: жёлтой на экране остаётся одна, «в корзину». */
.sa-step--lg.is-on { justify-content: space-between; background: var(--sa-fill); color: var(--sa-ink); }
.sa-step--lg.is-on .sa-step-l { display: none; }
.sa-step--lg.is-on .sa-step-plus { width: 56px; padding: 0; justify-content: center; }
.sa-step--lg.is-on .sa-step-n { font-size: var(--sa-fs-lg); width: 72px; flex-basis: 72px; height: 40px; }

.sa-step--cart { height: 36px; background: var(--sa-fill); color: var(--sa-ink); box-shadow: none; }
.sa-step--cart .sa-step-minus { width: 36px; opacity: 1; }
.sa-step--cart .sa-step-n { min-width: 30px; max-width: none; width: 30px; flex: 0 0 30px; }
.sa-step--cart.is-on { background: var(--sa-fill); color: var(--sa-ink); }

/* Заглушка ленты: мерцает, только пока лента правда грузится. */
.sa-skel .sa-card-b { display: grid; gap: 6px; padding-top: 10px; }
.sa-skel .sa-card-b i { display: block; height: 12px; border-radius: 6px; background: var(--sa-fill); }
.sa-skel .sa-card-b i:first-child { width: 46%; height: 16px; }
.sa-sec--lazy.is-loading .sa-skel { animation: sa-pulse 1.1s ease-in-out infinite alternate; }
@keyframes sa-pulse { to { opacity: 0.45; } }

/* ── Главная ─────────────────────────────────────────────────────── */

.sa-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.sa-home-h1 { font-size: var(--sa-fs-xl); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; max-width: 18em; }
@media (min-width: 900px) { .sa-home-h1 { font-size: var(--sa-fs-3xl); } }

/* Три факта — лентой небольших плашек, а не тремя карточками во весь экран. */
.sa-facts { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--sa-g) * -1); padding: 0 var(--sa-g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-facts::-webkit-scrollbar { display: none; }
.sa-fact { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; max-width: 78vw; padding: 9px 16px 9px 9px; border-radius: var(--sa-r-sm); background: var(--sa-fill); }
.sa-fact-i { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: var(--sa-surface); color: var(--sa-ink); }
.sa-fact-i .sa-i { width: 19px; height: 19px; stroke-width: 2; }
.sa-fact-t { min-width: 0; }
.sa-fact strong { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; white-space: nowrap; }
.sa-fact-t span { display: block; color: var(--sa-ink-2); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) {
	.sa-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; overflow: visible; }
	.sa-fact { max-width: none; padding: 12px 18px 12px 12px; }
	.sa-fact-i { width: 44px; height: 44px; border-radius: 13px; }
	.sa-fact strong { font-size: var(--sa-fs-md); }
	.sa-fact-t span { font-size: var(--sa-fs-sm); }
}

/* Баннеры — небольшими карточками в ленту: видно два, и под ними сразу отделы. */
.sa-banners { min-width: 0; margin: 0 calc(var(--sa-g) * -1); }
.sa-banners-in { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--sa-g); padding: 0 var(--sa-g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-banners-in::-webkit-scrollbar { display: none; }
.sa-banner { flex: 0 0 min(62%, 250px); scroll-snap-align: start; border-radius: var(--sa-r-lg); overflow: hidden; background: var(--sa-fill); transition: transform var(--sa-d1) var(--sa-ease); }
.sa-banner:active { transform: scale(0.98); }
/* Картинку не обрезаем: на баннерах текст стоит у самого края. */
.sa-banner img { width: 100%; height: auto; }
@media (min-width: 700px) { .sa-banners-in { gap: 14px; } .sa-banner { flex-basis: 30%; } }
@media (min-width: 1100px) { .sa-banner { flex-basis: calc((100% - 14px * 4) / 5); } }
/* Два широких баннера рядом: на телефоне — лентой (второй выглядывает), шире — в два столбца. */
.sa-pair { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--sa-g); margin: 0 calc(var(--sa-g) * -1); padding: 0 var(--sa-g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-pair::-webkit-scrollbar { display: none; }
.sa-pair-i { flex: 0 0 78%; scroll-snap-align: start; border-radius: var(--sa-r-lg); overflow: hidden; background: var(--sa-fill); }
.sa-pair-i img { width: 100%; aspect-ratio: 35 / 9; object-fit: cover; }
.sa-pair--one .sa-pair-i { flex-basis: 100%; }
@media (min-width: 700px) {
	.sa-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow: visible; margin: 0; padding: 0; }
	.sa-pair--one { grid-template-columns: minmax(0, 640px); }
}

/*
 * Отделы — плитки: подпись сверху, картинка или значок в нижнем углу.
 * Три в ряд на телефоне; высота от ширины, чтобы сетка оставалась ровной
 * при названии в одну строку и в три.
 */
.sa-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .sa-depts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) { .sa-depts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { .sa-depts { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.sa-dept {
	position: relative; overflow: hidden;
	display: block; aspect-ratio: 1 / 0.96; padding: 10px 10px 0;
	border-radius: var(--sa-r-md);
	background: var(--sa-fill); color: var(--sa-ink) !important;
	transition: transform var(--sa-d1) var(--sa-ease), background var(--sa-d1);
}
.sa-dept:active { transform: scale(0.97); background: var(--sa-fill-2); }
@media (hover: hover) { .sa-dept:hover { background: var(--sa-fill-2); } }
.sa-dept-n { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Значок крупный и чуть выходит за угол плитки: так он читается картинкой отдела, а не смайлом в тексте. */
.sa-dept-e { position: absolute; right: -2px; bottom: -4px; font-size: 46px; line-height: 1; }
.sa-dept--deals, .sa-dept--deals:hover { background: var(--sa-brand); color: var(--sa-brand-ink) !important; }
.sa-dept--deals .sa-dept-e { font-size: 48px; font-weight: 800; letter-spacing: -0.05em; right: 10px; bottom: 2px; }
@media (min-width: 900px) {
	.sa-dept { padding: 14px 14px 0; }
	.sa-dept-n { font-size: 14px; }
	.sa-dept-e { font-size: 58px; right: 2px; bottom: -2px; }
}

.sa-giftsec-note { margin: -8px 0 14px; }
.sa-giftcard .sa-card-b { gap: 6px; flex: 1 1 auto; }
/* Кнопки подарков — на одной линии, сколько бы строк ни заняло название. */
.sa-giftcard .sa-card-b > .sa-btn { margin-top: auto; }
.sa-giftcard.is-locked { opacity: 0.55; }
.sa-giftcard.is-picked .sa-card-img { box-shadow: inset 0 0 0 2.5px var(--sa-ink); }
.sa-giftcard .sa-btn--sm { align-self: stretch; padding-inline: 8px; }
.sa-btn--ghost { background: none; color: var(--sa-ink-2) !important; }
.sa-btn--ghost:hover { background: var(--sa-fill); }

/* ── Заголовок страницы, крошка ──────────────────────────────────── */

.sa-pagehead h1 { font-size: var(--sa-fs-2xl); letter-spacing: -0.035em; }
.sa-pagehead .sa-muted { margin: 6px 0 0; }
.sa-crumb { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 6px; color: var(--sa-ink-2) !important; font-size: 14px; font-weight: 700; }
.sa-crumb .sa-i { width: 16px; height: 16px; stroke-width: 2.3; }
@media (min-width: 900px) { .sa-pagehead h1 { font-size: var(--sa-fs-3xl); } }

/* ── Товар ───────────────────────────────────────────────────────── */

.sa-pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sa-pd-img { position: relative; aspect-ratio: 1; border-radius: var(--sa-r-lg); background: var(--sa-fill); overflow: hidden; }
.sa-pd-img img { width: 100%; height: 100%; object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.sa-pd-b { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sa-pd-n { font-size: var(--sa-fs-xl); letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.sa-pd-alt { margin: -6px 0 0; color: var(--sa-ink-2); font-size: var(--sa-fs-md); }
.sa-pd-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; font-size: var(--sa-fs-2xl); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.sa-pd-p del { order: 2; color: var(--sa-ink-3); font-size: 0.56em; font-weight: 600; letter-spacing: -0.01em; }
.sa-pd-p ins { text-decoration: none; color: var(--sa-promo); }
.sa-pd-promo { display: flex; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--sa-r-sm); background: var(--sa-promo-soft); color: var(--sa-promo); font-size: var(--sa-fs-sm); font-weight: 600; }
.sa-pd-promo .sa-i { width: 18px; height: 18px; margin-top: 1px; }
.sa-pd-promo span { color: var(--sa-ink); }
.sa-pd-promo strong { color: var(--sa-promo); font-weight: 800; }
.sa-pd-d { color: var(--sa-ink-2); font-size: var(--sa-fs-md); line-height: 1.5; }
.sa-pd-note { color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 500; margin: 0; }
.sa-product-hooks:empty { display: none; }
@media (min-width: 820px) {
	.sa-product .sa-pd { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 44px; align-items: start; }
	.sa-product .sa-pd-n { font-size: var(--sa-fs-3xl); }
	.sa-product .sa-pd-b { gap: 16px; padding-top: 8px; }
	.sa-product .sa-step--lg { max-width: 360px; }
}

/* ── Пустой экран, загрузка ──────────────────────────────────────── */

.sa-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 16px; text-align: center; }
.sa-empty-i { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 26px; background: var(--sa-fill); color: var(--sa-ink-3); margin-bottom: 6px; }
.sa-empty-i .sa-i { width: 32px; height: 32px; }
.sa-empty h2 { font-size: var(--sa-fs-xl); }
.sa-empty p { color: var(--sa-ink-2); max-width: 340px; }
.sa-empty .sa-btn { margin-top: 6px; }
.sa-loading { width: 30px; height: 30px; margin: 48px auto; border-radius: 50%; border: 3px solid var(--sa-fill-2); border-top-color: var(--sa-ink); animation: sa-spin 0.7s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* ── Шторки ──────────────────────────────────────────────────────── */

.sa-scrim { position: fixed; inset: 0; z-index: 90; background: var(--sa-scrim); opacity: 0; transition: opacity var(--sa-d2) var(--sa-ease); touch-action: none; }
.sa-scrim.is-open { opacity: 1; }
html.sa-locked, html.sa-locked body { overflow: hidden; }

.sa-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
	display: flex; flex-direction: column;
	max-height: min(90vh, 90dvh);
	border-radius: var(--sa-r-xl) var(--sa-r-xl) 0 0;
	background: var(--sa-bg);
	transform: translateY(104%);
	transition: transform var(--sa-d3) var(--sa-ease);
	padding-bottom: var(--sa-safe-b);
	/* Прокрутка шторки не передаётся странице под ней; смахивание вниз закрывает шторку (см. app.js). */
	overscroll-behavior: contain;
}
.sa-sheet.is-open { transform: none; }
.sa-sheet--tall { height: min(90vh, 90dvh); }
/* «Ручка» наверху шторки: говорит, что это шторка, а не новая страница. */
.sa-sheet:not(.sa-sheet--side)::before { content: ""; flex: 0 0 auto; align-self: center; width: 36px; height: 4px; margin: 8px 0 0; border-radius: 4px; background: var(--sa-fill-3); }
.sa-sheet-h { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 20px; }
.sa-sheet-h strong { flex: 1; font-size: var(--sa-fs-xl); font-weight: 800; letter-spacing: -0.03em; }
.sa-sheet-h .sa-logo-img { width: 40px; height: 40px; }
.sa-sheet-b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; -webkit-overflow-scrolling: touch; min-height: 0; }
.sa-sheet-x { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--sa-surface); box-shadow: var(--sa-sh-1); }
.sa-sheet--product .sa-sheet-b { padding-top: 8px; }

.sa-sheet--side { top: 0; right: auto; width: min(86vw, 360px); max-height: none; border-radius: 0 var(--sa-r-xl) var(--sa-r-xl) 0; transform: translateX(-104%); }
.sa-sheet--side.is-open { transform: none; }
.sa-sheet--side .sa-sheet-h { padding-top: 16px; }

@media (min-width: 900px) {
	.sa-sheet:not(.sa-sheet--side) {
		left: 50%; right: auto; bottom: auto; top: 50%;
		width: min(540px, 92vw); max-height: 86vh;
		border-radius: var(--sa-r-xl);
		box-shadow: var(--sa-sh-3);
		transform: translate(-50%, -46%) scale(0.97); opacity: 0;
		transition: transform var(--sa-d2) var(--sa-ease), opacity var(--sa-d2);
	}
	.sa-sheet:not(.sa-sheet--side)::before { display: none; }
	.sa-sheet:not(.sa-sheet--side).is-open { transform: translate(-50%, -50%); opacity: 1; }
	.sa-sheet-h { padding: 18px 18px 10px 26px; }
	.sa-sheet-b { padding: 8px 26px 26px; }
	.sa-sheet--tall { height: 86vh; }
	.sa-sheet--product { width: min(900px, 94vw) !important; }
	.sa-sheet--product .sa-sheet-b { padding: 26px; }
	.sa-sheet--product .sa-pd { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; align-items: start; }
	.sa-sheet[data-sa-sheet="cart"] { left: auto !important; right: 0 !important; top: 0 !important; height: 100vh; max-height: none !important; width: min(460px, 92vw) !important; border-radius: var(--sa-r-xl) 0 0 var(--sa-r-xl) !important; transform: translateX(104%) !important; opacity: 1 !important; }
	.sa-sheet[data-sa-sheet="cart"].is-open { transform: none !important; }
}

.sa-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: var(--sa-r-sm); background: var(--sa-fill); color: var(--sa-ink-3); min-width: 0; }
.sa-search .sa-i { width: 20px; height: 20px; stroke-width: 2.1; }
.sa-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 500; color: var(--sa-ink); -webkit-appearance: none; appearance: none; }
.sa-search input::-webkit-search-cancel-button { display: none; }
/* Рамка фокуса — у всего поля, а не у строки ввода внутри него: иначе в сером поле появляется второе, с чёрной каймой. */
.sa .sa-search input:focus-visible, .sa .sa-step-n:focus-visible { outline: 0; }
.sa-search:focus-within { background: var(--sa-surface); box-shadow: inset 0 0 0 2px var(--sa-ink); }
.sa-search-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-search-more { display: flex; justify-content: center; margin-top: 20px; }

/* Поля: заполнены серым, без рамки; рамка появляется только у поля, в котором печатают. */
.sa-field { display: grid; gap: 6px; margin-bottom: 14px; font-size: var(--sa-fs-sm); font-weight: 700; color: var(--sa-ink-2); min-width: 0; }
.sa-field input {
	width: 100%; height: 52px; padding: 0 16px;
	border: 0; border-radius: var(--sa-r-sm);
	background: var(--sa-fill); font-size: 16px; font-weight: 600; color: var(--sa-ink);
	box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--sa-d1), background var(--sa-d1);
	-webkit-appearance: none; appearance: none;
}
.sa-field input::placeholder { color: var(--sa-ink-3); font-weight: 500; opacity: 1; }
.sa-field input:focus { outline: 0; background: var(--sa-surface); box-shadow: inset 0 0 0 2px var(--sa-ink); }
.sa-field-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.sa-addr-msg { padding: 12px 14px; border-radius: var(--sa-r-sm); background: var(--sa-bad-soft); color: var(--sa-bad); font-size: var(--sa-fs-sm); font-weight: 600; }
.sa-addrform .sa-btn { min-height: 56px; border-radius: var(--sa-r-md); font-size: var(--sa-fs-base); font-weight: 800; margin-top: 4px; }

.sa-menu { display: grid; margin: 0 -10px 16px; }
.sa-menu-a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 10px; border-radius: var(--sa-r-sm); color: var(--sa-ink) !important; font-size: var(--sa-fs-base); font-weight: 700; letter-spacing: -0.015em; }
.sa-menu-a:active { background: var(--sa-fill); }
@media (hover: hover) { .sa-menu-a:hover { background: var(--sa-fill); } }
.sa-menu-a .sa-i { color: var(--sa-ink-3); width: 22px; height: 22px; }
/* Языки — переключатель из двух половин, а не две отдельные кнопки. */
.sa-langs { display: flex; gap: 0; padding: 4px; margin-bottom: 16px; border-radius: var(--sa-r-sm); background: var(--sa-fill); }
.sa-lang { flex: 1; display: grid; place-items: center; min-height: 40px; border-radius: 11px; color: var(--sa-ink-2) !important; font-weight: 700; font-size: 14px; }
.sa-lang.is-on { background: var(--sa-surface); color: var(--sa-ink) !important; box-shadow: 0 1px 4px rgba(33, 32, 31, 0.12); }
.sa-menu-contact { display: grid; gap: 4px; margin-bottom: 18px; }
.sa-menu-contact .sa-btn { margin-bottom: 6px; }
.sa-menu-line { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--sa-ink-2) !important; font-size: var(--sa-fs-md); font-weight: 600; }
.sa-menu-line .sa-i { width: 20px; height: 20px; color: var(--sa-ink-3); }
.sa-stores { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-store { display: grid; padding: 8px 16px; border-radius: 12px; background: var(--sa-ink); color: #fff !important; line-height: 1.15; }
.sa-store small { font-size: 10px; font-weight: 500; opacity: 0.75; }
.sa-store strong { font-size: var(--sa-fs-md); font-weight: 700; }
html.sm-in-app .sa-stores { display: none; }

.sa-toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--sa-tab-h) + var(--sa-safe-b) + 76px); z-index: 120; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 var(--sa-g); }
.sa-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 12px 18px; border-radius: var(--sa-r-sm); background: var(--sa-ink); color: #fff; font-size: var(--sa-fs-sm); font-weight: 600; box-shadow: var(--sa-sh-3); animation: sa-rise var(--sa-d3) var(--sa-ease); }
.sa-toast button { border: 0; background: none; color: var(--sa-brand); font-weight: 800; padding: 0; }
@media (min-width: 900px) { .sa-toasts { bottom: 28px; } }

/* ── Корзина ─────────────────────────────────────────────────────── */

.sa-cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sa-cart-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.sa-cart-dest {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px;
	border: 0; border-radius: var(--sa-r-lg); background: var(--sa-surface); text-align: left;
}
.sa-cart-dest > span { flex: 1; display: grid; min-width: 0; gap: 1px; }
.sa-cart-dest small { color: var(--sa-ink-2); font-size: var(--sa-fs-xs); font-weight: 600; }
.sa-cart-dest strong { font-size: var(--sa-fs-md); font-weight: 800; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cart-dest > .sa-i:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--sa-fill); color: var(--sa-ink); }
.sa-cart-dest > .sa-i:last-child { color: var(--sa-ink-3); width: 18px; height: 18px; stroke-width: 2.3; }

/* Прогресс: подпись и тонкая полоса. Жёлтая полоса — та же, что у кнопки: «доберите — и нажмёте». */
.sa-prog { padding: 14px 16px; border-radius: var(--sa-r-lg); background: var(--sa-surface); }
.sa-prog-t { font-size: var(--sa-fs-sm); font-weight: 600; color: var(--sa-ink-2); margin-bottom: 10px; }
.sa-prog-t strong { color: var(--sa-ink); font-weight: 800; }
.sa-prog-b { height: 6px; border-radius: 99px; background: var(--sa-fill-2); overflow: hidden; }
.sa-prog-b i { display: block; height: 100%; border-radius: 99px; background: var(--sa-brand); transition: width var(--sa-d3) var(--sa-ease); }
.sa-prog--warn .sa-prog-b i { background: var(--sa-ink); }
.sa-prog--gift { margin-bottom: 12px; }

.sa-lines { list-style: none; margin: 0; padding: 4px 16px; border-radius: var(--sa-r-lg); background: var(--sa-surface); }
.sa-line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; box-shadow: 0 1px 0 var(--sa-line); }
.sa-line:last-child { box-shadow: none; }
/* «Если товара нет» — своей строкой под товаром, во всю ширину. */
.sa-line-x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -4px; }
.sa-line-xl { color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 600; }
/* Кнопки «лучшая замена / не заменять» (разметка ядра): общее правило для кнопок сайта задаёт им шрифт крупнее — возвращаем свой. */
.sa .smc-repl-b { font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; }
@media (max-width: 479.98px) { .sa-line-xl { display: none; } .sa-line-x { margin-top: -2px; } }
.sa-line-img { display: block; width: 60px; height: 60px; border-radius: var(--sa-r-sm); background: var(--sa-fill); overflow: hidden; }
.sa-line-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.sa-line-b { display: grid; gap: 3px; min-width: 0; }
.sa-line-n { color: var(--sa-ink) !important; font-size: 14px; font-weight: 600; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-line-u { color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 600; }
.sa-line-u del { margin-right: 4px; }
.sa-line-r { display: grid; justify-items: end; gap: 6px; }
.sa-line-t { font-size: var(--sa-fs-md); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sa-line--gift .sa-line-t { color: var(--sa-accent); }

.sa-cart-gift { padding: 16px; border-radius: var(--sa-r-lg); background: var(--sa-surface); min-width: 0; }
.sa-cart-gift .sa-prog { padding: 0; background: none; }
.sa-cart-gift .sa-rail { margin: 0 -16px; padding: 0 16px 2px; scroll-padding-inline: 16px; }
.sa-cart-gift h3 { font-size: var(--sa-fs-lg); margin-bottom: 12px; }
.sa-cart-side { display: grid; gap: 12px; align-content: start; padding: 18px 16px 16px; border-radius: var(--sa-r-lg); background: var(--sa-surface); }
.sa-totals { display: grid; gap: 9px; margin: 0; }
.sa-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sa-totals dt { color: var(--sa-ink-2); font-weight: 500; }
.sa-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-totals-saved dt, .sa-totals-saved dd { color: var(--sa-accent); }
.sa-totals-sum { padding-top: 12px; box-shadow: 0 -1px 0 var(--sa-line); font-size: var(--sa-fs-lg) !important; letter-spacing: -0.02em; }
.sa-totals-sum dt { color: var(--sa-ink); font-weight: 800; }
.sa-totals-sum dd { font-weight: 800; }
.sa-totals-vat { margin: -6px 0 2px; color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 500; text-align: right; }
@media (min-width: 900px) {
	.sa-cart--page { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
	.sa-cart--page .sa-cart-side { position: sticky; top: 92px; padding: 24px; }
	.sa-lines { padding: 8px 24px; }
	.sa-line { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; }
	.sa-line-img { width: 72px; height: 72px; }
	.sa-line-n { font-size: var(--sa-fs-md); }
}
/* В шторке корзина лежит на белом — её блоки серые. */
.sa-cart--sheet .sa-cart-side { padding: 4px 0 0; background: none; }
.sa-cart--sheet .sa-lines { padding: 0; background: none; }
.sa-cart--sheet .sa-cart-dest, .sa-cart--sheet .sa-prog { background: var(--sa-fill); }
.sa-cart--sheet .sa-cart-dest > .sa-i:first-child { background: var(--sa-surface); }
.sa-cart--sheet .sa-prog-b { background: var(--sa-fill-3); }
/* «Запаситесь»: тяжёлое и непортящееся — довод и лента товаров. */
.sa-stockup { padding: 16px; border-radius: var(--sa-r-lg); background: var(--sa-surface); min-width: 0; }
.sa-stockup-h { display: flex; gap: 12px; align-items: flex-start; }
.sa-stockup-e { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sa-fill); font-size: 21px; }
.sa-stockup-h h3 { margin: 0 0 3px; font-size: var(--sa-fs-lg); line-height: 1.2; text-wrap: balance; }
.sa-stockup-h p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--sa-ink-3); }
.sa-stockup-h p strong { color: var(--sa-ink); font-weight: 700; }
.sa-stockup-why { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sa-stockup-why li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--sa-fill); font-size: 12.5px; font-weight: 600; }
.sa-stockup .sa-rail { margin: 14px -16px 0; padding: 0 16px 2px; scroll-padding-inline: 16px; }
.sa-cart--sheet .sa-stockup { padding: 0; background: none; }
.sa-cart--sheet .sa-stockup-e { background: var(--sa-fill); }
.sa-cart--sheet .sa-stockup .sa-rail { margin-inline: calc(var(--sa-g) * -1); padding-inline: var(--sa-g); }
.sa-cart--sheet .sa-cart-gift { padding: 0; }
.sa-cart--sheet .sa-cart-gift .sa-prog { padding: 14px 16px; background: var(--sa-fill); }
.sa-cart--sheet .sa-cart-gift .sa-rail { margin: 0 -20px; padding: 0 20px 2px; }

/* ── Страницы ────────────────────────────────────────────────────── */

.sa-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.sa-page-title { font-size: var(--sa-fs-2xl); letter-spacing: -0.035em; }
.sa-rich { font-size: var(--sa-fs-base); font-weight: 500; line-height: 1.6; color: var(--sa-ink); min-width: 0; overflow-wrap: anywhere; }
.sa-rich a { text-decoration: underline; text-decoration-color: var(--sa-fill-3); text-underline-offset: 3px; font-weight: 700; }
.sa-rich h1 { font-size: var(--sa-fs-2xl); margin: 0 0 14px; }
.sa-rich h2 { font-size: var(--sa-fs-xl); margin: 30px 0 10px; }
.sa-rich h3 { font-size: var(--sa-fs-lg); margin: 22px 0 8px; }
.sa-rich img { border-radius: var(--sa-r-lg); }
.sa-rich ul, .sa-rich ol { padding-left: 22px; margin: 0 0 14px; }
.sa-rich table, .sa-dfacts table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sa-rich th, .sa-rich td, .sa-dfacts th, .sa-dfacts td { padding: 11px 12px; box-shadow: 0 1px 0 var(--sa-line); text-align: left; vertical-align: top; }
.sa-tablewrap { overflow-x: auto; margin: 0 0 12px; border-radius: var(--sa-r-md); background: var(--sa-fill); }
.sa-tablewrap tr:last-child td { box-shadow: none; }
.sa-dfacts h2 { font-size: var(--sa-fs-xl); margin-bottom: 14px; }
.sa-dfacts th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sa-ink-2); }
@media (max-width: 520px) { .sa-dfacts td, .sa-dfacts th { padding: 10px 9px; font-size: var(--sa-fs-sm); } .sa-dfacts th { font-size: 10px; } }
.sa-faq { border-radius: var(--sa-r-md); background: var(--sa-fill); margin-bottom: 8px; }
.sa-faq summary { padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after { content: "+"; float: right; font-size: 20px; line-height: 1; color: var(--sa-ink-3); }
.sa-faq[open] summary::after { content: "−"; }
.sa-faq > div { padding: 0 18px 16px; color: var(--sa-ink-2); }
.sa-infobox { padding: 18px; border-radius: var(--sa-r-md); background: var(--sa-fill); margin-bottom: 10px; }
.sa-infobox h3 { margin: 0 0 6px; }

.sa-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 700px) { .sa-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.sa-contact-card { display: grid; gap: 3px; padding: 18px; border-radius: var(--sa-r-md); background: var(--sa-fill); color: var(--sa-ink) !important; font-weight: 800; transition: background var(--sa-d1); }
.sa-contact-card:active { background: var(--sa-fill-2); }
.sa-contact-card .sa-i { width: 44px; height: 44px; padding: 11px; margin-bottom: 8px; border-radius: 14px; background: var(--sa-surface); color: var(--sa-ink); }
.sa-contact-card span { color: var(--sa-ink-2); font-size: var(--sa-fs-sm); font-weight: 500; }

.smc-reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 16px; }
.smc-reviews-score { font-size: var(--sa-fs-3xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.smc-reviews-stars, .smc-review-meta span { color: var(--sa-brand); letter-spacing: 1px; }
.smc-reviews-count { color: var(--sa-ink-2); font-size: var(--sa-fs-sm); font-weight: 600; }
.smc-reviews-write { margin-left: auto; font-weight: 700; font-size: 14px; text-decoration: underline; text-decoration-color: var(--sa-fill-3); text-underline-offset: 3px; }
.smc-reviews-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 760px) { .sa-reviews-teaser .smc-reviews-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.smc-review { padding: 18px; border-radius: var(--sa-r-md); background: var(--sa-fill); }
.smc-review header { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; margin-bottom: 10px; }
.smc-review-avatar { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--sa-surface); color: var(--sa-ink); font-weight: 800; }
.smc-review-name { font-weight: 800; letter-spacing: -0.015em; }
.smc-review-meta { color: var(--sa-ink-3); font-size: var(--sa-fs-xs); font-weight: 600; }
.smc-review p { margin: 0; color: var(--sa-ink-2); font-size: 14px; line-height: 1.5; }
.sa-reviews-teaser .smc-review p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.smc-reviews-more { margin: 16px 0 0; text-align: center; font-weight: 700; }
.sa-reviews-teaser .smc-reviews-more { display: none; }

/* ── Подвал ──────────────────────────────────────────────────────── */

.sa-foot { background: var(--sa-fill); color: var(--sa-ink-2); padding: 32px var(--sa-g) calc(var(--sa-tab-h) + var(--sa-safe-b) + 32px); font-size: 14px; font-weight: 500; }
body.sa-view-cart .sa-foot, body.sa-view-thanks .sa-foot, body.sa-view-account .sa-foot { background: var(--sa-surface); }
.sa-foot-in { max-width: var(--sa-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sa-foot-brand { display: flex; align-items: center; gap: 14px; }
.sa-foot-brand p { margin: 0; max-width: 300px; color: var(--sa-ink); font-weight: 700; letter-spacing: -0.015em; }
.sa-foot-brand .sa-logo-img { width: 52px; height: 52px; }
.sa-foot-links { display: grid; gap: 12px; }
.sa-foot a { color: var(--sa-ink) !important; font-weight: 600; }
.sa-foot .sa-store { color: #fff !important; }
.sa-social { display: flex; gap: 16px; margin-top: 16px; }
.sa-foot-copy { max-width: var(--sa-w); margin: 26px auto 0; color: var(--sa-ink-3); font-size: var(--sa-fs-xs); }
@media (min-width: 900px) {
	.sa-foot { padding: 44px var(--sa-g) 32px; }
	.sa-foot-in { grid-template-columns: 1.2fr 1fr 1fr; }
}
.sa-view-checkout .sa-main { padding-bottom: 130px; }

/* Чат Tidio — над нижней панелью, а не на ней. */
@media (max-width: 899px) { #tidio-chat iframe { bottom: calc(var(--sa-tab-h) + var(--sa-safe-b) + 8px) !important; } }

@media (prefers-reduced-motion: reduce) {
	.sa *, .sa *::before, .sa *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── Лента отделов (третья сборка) ───────────────────────────────── */

/*
 * Лента отделов и ряды полок под ней прилипают под шапкой и видны на всех
 * экранах каталога. Середину страницы под ними подменяет скрипт — сама лента
 * остаётся на месте и не прыгает к началу.
 *
 * Высота прилипания — высота шапки в прилипшем виде: на телефоне от шапки
 * остаётся строка поиска (64 px), на компьютере шапка — одна строка (70 px).
 */
.sa-nav { position: sticky; top: 64px; z-index: 50; background: var(--sa-bg); min-width: 0; }
.sa-nav-w { max-width: var(--sa-w); margin: 0 auto; padding: 10px 0 8px; min-width: 0; }
.sa-nav-depts, .sa-nav-rows { min-width: 0; }
.sa-nav-in { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--sa-g); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-nav-in::-webkit-scrollbar { display: none; }
.sa-nd {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 7px;
	height: 44px; padding: 0 15px 0 10px;
	border-radius: var(--sa-r-sm);
	background: var(--sa-fill); color: var(--sa-ink) !important;
	font-size: 14px; font-weight: 700; white-space: nowrap; letter-spacing: -0.01em;
	transition: background var(--sa-d1), color var(--sa-d1);
}
.sa-nd:active { background: var(--sa-fill-2); }
.sa-nd-e { display: grid; place-items: center; width: 26px; height: 26px; font-size: 20px; line-height: 1; }
.sa-nd-e .sa-i { width: 20px; height: 20px; stroke-width: 2.1; }
.sa-nd-e b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--sa-promo); color: #fff; font-size: 13px; font-weight: 800; }
.sa-nd.is-on { background: var(--sa-ink); color: #fff !important; }
/* Значок выбранного отдела — на светлой плашке: тёмный значок (лапки, вино) на тёмной пилюле пропадал совсем. */
.sa-nd.is-on .sa-nd-e:not(:has(b)):not(:has(.sa-i)) { border-radius: 8px; background: #fff; font-size: 17px; }
@media (hover: hover) { .sa-nd:not(.is-on):hover { background: var(--sa-fill-2); } }
/* Ряды полок внутри ленты: отступы свои, без выноса за край (лента и так во всю ширину). */
.sa-nav-rows .sa-chips { margin: 8px 0 0; }
.sa-nav-rows .sa-chips-in { padding: 0 var(--sa-g); }
.sa-nav-rows .sa-chip { min-height: 36px; padding: 5px 13px; font-size: 13.5px; }
/* Вторая ступень (подполки) — тише первой: выбранное не чёрное, а обведённое. */
.sa-nav-rows .sa-chips + .sa-chips .sa-chip { background: none; box-shadow: inset 0 0 0 1.5px var(--sa-fill-2); font-weight: 600; }
.sa-nav-rows .sa-chips + .sa-chips .sa-chip.is-on { background: var(--sa-fill); box-shadow: inset 0 0 0 1.5px var(--sa-ink); color: var(--sa-ink) !important; font-weight: 700; }
/* Под лентой — тонкая черта, когда страница поехала: иначе товары уезжают под неё без границы. */
.sa-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sa-line); }
@media (min-width: 900px) {
	.sa-nav { top: 70px; }
	.sa-nav-w { padding: 14px 0 10px; }
}
/* С лентой над страницей верхний отступ середины меньше: воздух уже дала лента. */
.sa-nav + .sa-main { padding-top: 14px; }

/* Середина страницы меняется: прежняя гаснет, новая проявляется. */
.sa-main { transition: opacity var(--sa-d1); }
.sa-main.is-swapping { opacity: 0.4; pointer-events: none; }

/* ── Ленты на компьютере: тянуть мышью, стрелки ──────────────────── */

.is-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; -webkit-user-select: none; }
.is-dragging * { pointer-events: none; }
.sa-xhost { position: relative; }
.sa-xarrow {
	position: absolute; z-index: 6; transform: translateY(-50%);
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--sa-surface); color: var(--sa-ink);
	box-shadow: var(--sa-sh-2);
	opacity: 0; transition: opacity var(--sa-d1), transform var(--sa-d1) var(--sa-ease);
}
.sa-xarrow--prev { left: 4px; }
.sa-xarrow--next { right: 4px; }
.sa-xhost:hover > .sa-xarrow { opacity: 1; }
.sa-xarrow:active { transform: translateY(-50%) scale(0.92); }
/* У лент, вынесенных за край страницы, стрелки стоят у края содержимого. */
.sa-sec > .sa-xarrow--prev, .sa-main > .sa-xarrow--prev { left: -6px; }
.sa-sec > .sa-xarrow--next, .sa-main > .sa-xarrow--next { right: -6px; }
@media (hover: none), (pointer: coarse) { .sa-xarrow { display: none; } }

/* ── Мини-корзина на компьютере: панель справа ───────────────────── */

@media (min-width: 900px) {
	.sa-sheet.sa-sheet--drawer:not(.sa-sheet--side) {
		left: auto; right: 0; top: 0; bottom: 0;
		width: min(460px, 94vw); height: 100%; max-height: none;
		border-radius: var(--sa-r-xl) 0 0 var(--sa-r-xl);
		transform: translateX(104%); opacity: 1;
		transition: transform var(--sa-d3) var(--sa-ease);
	}
	.sa-sheet.sa-sheet--drawer:not(.sa-sheet--side).is-open { transform: none; }
}

/* ── Страницы: сервис, контакты, компаниям, условия ──────────────── */

/*
 * ТЕКСТ ЭТИХ СТРАНИЦ ЛЕЖИТ В САМОЙ СТРАНИЦЕ WordPress — блоками редактора: заголовки, абзацы
 * и списки стоят подряд, без обёрток-разделов. Поэтому расстояния задаёт не сетка, а отступ
 * ПЕРЕД элементом: 14px перед чем угодно, 32px перед заголовком раздела и после вводной фразы.
 *
 * Отступ сверху у прямых детей `.sa-doc` задают только правила этого блока. Составным частям
 * ниже (шаги, зоны, часы) `margin` целиком писать нельзя: правило той же силы, стоящее позже,
 * молча обнулило бы расстояние между разделами.
 *
 * Столбик — флексом, а не обычным потоком: в потоке соседние отступы схлопываются в больший,
 * а здесь складываются. У абзаца есть отступ и снизу (12px): после вводной фразы и после
 * пояснения под таблицей воздуха больше, чем между заголовком и его текстом.
 */
.sa-doc { display: flex; flex-direction: column; max-width: 880px; width: 100%; margin: 0 auto; padding-top: 8px; }
.sa-doc > * { margin: 14px 0 0; min-width: 0; }
.sa-doc > p { margin: 14px 0 12px; max-width: 66ch; color: var(--sa-ink-2); font-size: var(--sa-fs-base); line-height: 1.6; }
.sa-doc > ul, .sa-doc > ol { padding-left: 22px; color: var(--sa-ink-2); line-height: 1.6; }
.sa-doc > p a, .sa-doc > ul:not(.sa-links) a, .sa-doc > ol a { text-decoration: underline; text-decoration-color: var(--sa-fill-3); text-underline-offset: 3px; font-weight: 700; }
.sa-doc > h1 { margin-top: 12px; font-size: clamp(28px, 6.4vw, 44px); letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; }
.sa-doc > h2 { margin-top: 32px; font-size: var(--sa-fs-xl); letter-spacing: -0.03em; scroll-margin-top: 150px; }
.sa-doc > h3 { margin-top: 22px; font-size: var(--sa-fs-lg); }
.sa-doc > img, .sa-doc > figure img { border-radius: var(--sa-r-lg); }
.sa-doc > :first-child { margin-top: 0; }
.sa-doc > .sa-doc-k { max-width: none; color: var(--sa-accent); font-size: var(--sa-fs-sm); font-weight: 800; letter-spacing: 0.06em; line-height: 1.42; text-transform: uppercase; }
.sa-doc > .sa-doc-lead { margin-top: 12px; max-width: 60ch; font-weight: 500; line-height: 1.5; }
@media (min-width: 700px) { .sa-doc > .sa-doc-lead { font-size: var(--sa-fs-lg); } }
.sa-doc > .sa-doc-lead + * { margin-top: 32px; }
.sa-doc > .sa-doc-note { max-width: none; font-size: 14px; line-height: 1.5; }
/* Тому, кто правит страницу: слово в скобках с опечаткой. Покупатель его не видит вовсе. */
.sa-live-miss { padding: 1px 6px; border-radius: 6px; background: var(--sa-brand); color: var(--sa-brand-ink); font-weight: 700; }
/* Группа блоков без внутренней обёртки (`pages.php`); если её кто-то вернёт — она не должна ломать сетку. */
.sa-doc .wp-block-group__inner-container { display: contents; }

.sa-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* На телефоне плитка лежит строкой — значок слева, текст справа: столбиком три плитки занимали бы целый экран. */
.sa-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-content: start; padding: 16px; border-radius: var(--sa-r-lg); background: var(--sa-fill); }
.sa-tile > h3 { grid-column: 2; margin: 0; font-size: var(--sa-fs-base); font-weight: 800; letter-spacing: -0.025em; line-height: 1.42; }
.sa-tile > p { grid-column: 2; margin: 0; color: var(--sa-ink-2); font-size: 14px; line-height: 1.45; }
.sa-tile > .sa-tile-i { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sa-surface); color: var(--sa-ink); font-size: 22px; line-height: 1; }
@media (min-width: 620px) {
	.sa-tile { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px; }
	.sa-tile > h3, .sa-tile > p { grid-column: auto; }
	.sa-tile > .sa-tile-i { grid-column: auto; grid-row: auto; margin-bottom: 10px; }
}
.sa-tile-i .sa-i { width: 22px; height: 22px; stroke-width: 2; }
@media (min-width: 620px) { .sa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 860px) { .sa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 859.98px) { .sa-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sa-tiles--3 .sa-tile { padding: 16px; } }

/* Шаг — пункт списка: название жирным, перенос строки, пояснение. Перенос прячем: название и так стоит своей строкой. */
.sa-doc > .sa-steps { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: sa-step; }
.sa-steps > li { counter-increment: sa-step; position: relative; padding: 18px 18px 18px 66px; border-radius: var(--sa-r-lg); background: var(--sa-fill); color: var(--sa-ink-2); font-size: 14px; line-height: 1.45; }
.sa-steps > li::before { content: counter(sa-step); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--sa-brand); color: var(--sa-brand-ink); font-size: var(--sa-fs-md); font-weight: 800; line-height: 1; }
.sa-steps > li > strong { display: block; margin-bottom: 3px; color: var(--sa-ink); font-size: var(--sa-fs-md); font-weight: 800; letter-spacing: -0.02em; line-height: 1.42; }
.sa-steps > li > br { display: none; }
@media (min-width: 760px) { .sa-doc > .sa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.sa-zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sa-zone { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--sa-r-lg); background: var(--sa-fill); }
.sa-zone h3 { font-size: var(--sa-fs-lg); }
.sa-zone-t { margin: 0; color: var(--sa-ink-2); font-size: 14px; line-height: 1.5; }
.sa-zone dl { display: grid; gap: 0; margin: 4px 0 0; padding: 4px 14px; border-radius: var(--sa-r-sm); background: var(--sa-surface); }
.sa-zone dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; box-shadow: 0 1px 0 var(--sa-line); font-size: 14px; }
.sa-zone dl > div:last-child { box-shadow: none; }
.sa-zone dt { color: var(--sa-ink-2); }
.sa-zone dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.sa-zone .is-good dt, .sa-zone .is-good dd { color: var(--sa-accent); }
@media (min-width: 760px) { .sa-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

.sa-hours { display: grid; gap: 0; padding: 4px 20px; border-radius: var(--sa-r-lg); background: var(--sa-fill); }
.sa-hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; box-shadow: 0 1px 0 var(--sa-fill-3); }
.sa-hours > div:last-child { box-shadow: none; }
.sa-hours dt { font-weight: 700; }
.sa-hours dd { margin: 0; display: grid; justify-items: end; gap: 1px; text-align: right; }
.sa-hours dd strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.sa-hours dd span { color: var(--sa-ink-2); font-size: var(--sa-fs-sm); }

/* Вопрос с ответом: ответ — абзац прямо внутри, без обёртки. */
.sa-doc > .sa-faq { margin-bottom: 0; border-radius: var(--sa-r-md); }
.sa-doc > .sa-faq + .sa-faq { margin-top: 8px; }
.sa-doc .sa-faq summary { display: flex; justify-content: space-between; gap: 14px; padding: 17px 20px; font-weight: 700; letter-spacing: -0.01em; }
.sa-doc .sa-faq summary::after { float: none; flex: 0 0 auto; }
.sa-doc .sa-faq > p, .sa-doc .sa-faq > ul, .sa-doc .sa-faq > ol { margin: 0; padding: 0 20px 18px; max-width: calc(68ch + 40px); color: var(--sa-ink-2); line-height: 1.6; }
.sa-doc .sa-faq > ul, .sa-doc .sa-faq > ol { padding-left: 40px; }

.sa-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 26px 22px; border-radius: var(--sa-r-xl); background: var(--sa-fill); }
.sa-doc > .sa-cta { margin-top: 32px; }
.sa-cta > h2 { margin: 0; font-size: var(--sa-fs-xl); letter-spacing: -0.03em; }
.sa-cta > p { margin: 0; color: var(--sa-ink-2); }
.sa-cta > .sa-cta-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sa-cta-b .sa-btn { min-height: 50px; }
@media (min-width: 760px) {
	.sa-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 30px; }
	.sa-cta > h2, .sa-cta > p { grid-column: 1; }
	.sa-cta > .sa-cta-b { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

.sa-contact-card--main { background: var(--sa-brand); }
.sa-contact-card--main span { color: var(--sa-brand-ink); opacity: 0.75; }
/* Ссылки списком: стрелка и галочка нарисованы стилем — в тексте страницы их нет, и стереть их правкой текста нельзя. */
.sa-doc > .sa-links { list-style: none; padding: 4px 20px; border-radius: var(--sa-r-lg); background: var(--sa-fill); line-height: 1.42; }
.sa-links > li { box-shadow: 0 1px 0 var(--sa-fill-3); }
.sa-links > li:last-child { box-shadow: none; }
.sa-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; color: var(--sa-ink); font-weight: 700; }
.sa-links a::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 5px; border: solid var(--sa-ink-3); border-width: 2.3px 2.3px 0 0; transform: rotate(45deg); }
.sa-doc > .sa-ticks { list-style: none; padding: 0; display: grid; gap: 10px; line-height: 1.5; }
.sa-ticks > li { position: relative; min-height: 22px; padding-left: 34px; }
.sa-ticks > li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 8px; background: var(--sa-accent-soft); }
.sa-ticks > li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--sa-accent); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }

/* Правовые страницы: оглавление и пронумерованные разделы. Номер раздела считает стиль — в тексте его нет. */
.sa-toc { padding: 18px 20px; border-radius: var(--sa-r-lg); background: var(--sa-fill); }
.sa-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px 24px; counter-reset: sa-toc; }
.sa-toc li { counter-increment: sa-toc; }
.sa-toc a { display: flex; gap: 10px; font-weight: 600; font-size: 14.5px; }
.sa-toc a::before { content: counter(sa-toc); flex: 0 0 22px; color: var(--sa-ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .sa-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-doc--legal { counter-reset: sa-sec; }
.sa-doc--legal > h2 { counter-increment: sa-sec; display: flex; align-items: baseline; gap: 12px; margin-top: 30px; font-size: var(--sa-fs-lg); letter-spacing: -0.025em; }
.sa-doc--legal > h2::before { content: counter(sa-sec); flex: 0 0 auto; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 9px; background: var(--sa-fill); color: var(--sa-ink-2); font-size: var(--sa-fs-sm); font-weight: 800; letter-spacing: 0; transform: translateY(-2px); }
.sa-doc--legal > p { margin: 10px 0 0; max-width: 70ch; line-height: 1.65; overflow-wrap: anywhere; }
.sa-doc--legal > .sa-doc-k { margin: 0 0 12px; }
.sa-doc--legal > .sa-doc-lead { margin: 12px 0; max-width: 60ch; line-height: 1.5; }
.sa-doc--legal > .sa-toc + h2 { margin-top: 32px; }
.sa-doc--legal > .sa-doc-note { margin: 32px 0 12px; max-width: none; line-height: 1.5; }