/* ==========================================================================
   Rasta theme for OpenCart 3.0.3.x
   --------------------------------------------------------------------------
   Design tokens (--sk-*) are injected by the
   `catalog/view/* /before` event handler in
   catalog/controller/extension/theme/rasta.php, or inlined by
   common/header.twig. Every value below has a fallback so the stylesheet is
   also usable standalone.

   Reference: docs/SITE-DESIGN-SPEC.md (измерения живого сайта 27.09.2026)
   и docs/research/samokat-site/ (скриншоты + JSON с computed styles)
   ========================================================================== */

:root {
	/* ═══ Палитра — ИЗМЕРЕНО на живом samokat.ru 27.09.2026 ═══════════════
	   См. docs/SITE-DESIGN-SPEC.md §3 (частоты встречаемости цветов). */
	--sk-primary: #FF6B2C;          /* наш акцент: заливки, бейджи, графика */
	--sk-primary-strong: #C2410C;   /* фон кнопок с белым текстом: контраст ≈5.2:1
	                                   (на сайте белый на #FF335F даёт 3.6:1 — ниже нормы) */
	--sk-primary-dark: #E85A1B;
	--sk-primary-light: #FF8F5C;
	--sk-primary-soft: #FFF1E9;

	--sk-ink: #000000;              /* основной текст (1748 элементов) */
	--sk-ink-2: #404040;            /* второй текст (412) */
	--sk-ink-muted: #595959;        /* третий текст (170) */
	--sk-muted: #A6A6A6;            /* приглушённый (48) */
	--sk-ink-placeholder: rgba(89, 89, 89, 0.3);
	--sk-bg-page: #F2F2F2;
	--sk-bg-card: #FFFFFF;
	--sk-bg-subtle: #F2F2F2;
	--sk-border: rgba(89, 89, 89, 0.3);   /* измерено: разделители */
	--sk-border-strong: #A6A6A6;
	--sk-success: #00B749;                /* зелёный — только выгода/статусы */

	/* ═══ Радиусы — шкала из семи значений (§5) ══════════════════════════ */
	--sk-radius-xs: 6px;         /* мелкие элементы внутри карточек */
	--sk-radius-card: 14px;      /* плитки товаров — самый частый радиус */
	--sk-radius-md: 18px;        /* промежуточные блоки */
	--sk-radius-panel: 24px;     /* боковые панели, карточка адреса */
	--sk-radius-popup: 32px;     /* всплывающие панели, панель товара */
	--sk-radius-button: 1000px;  /* все кнопки — пилюля */
	--sk-radius-badge: 10px;

	/* ═══ Типографика — один Inter, иерархия размером и весом (§4) ═══════ */
	--sk-font-family: "Inter", Avenir, Helvetica, Arial, sans-serif;
	--sk-font-size-body: 16px;   /* 1244 элемента — основа */
	--sk-font-size-h1: 40px;     /* названия категорий */
	--sk-font-size-h2: 32px;     /* заголовок полки */
	--sk-font-size-h3: 28px;
	--sk-font-size-h4: 20px;
	--sk-font-size-sm: 14px;
	--sk-font-size-xs: 13px;
	--sk-font-size-badge: 10px;
	--sk-fw-bold: 700;
	--sk-fw-semibold: 600;
	--sk-lh-body: 1.4;
	--sk-lh-heading: 1.15;

	/* ═══ Тени — на сайте их всего две (§7) ═════════════════════════════ */
	--sk-shadow-card: 0 3px 20px rgba(0, 0, 0, 0.08);
	--sk-shadow-float: 0 0 10px 5px rgba(0, 0, 0, 0.10);
	--sk-overlay: rgba(0, 0, 0, 0.4);
	--sk-overlay-panel: rgba(0, 0, 0, 0.8);

	/* ═══ Каркас из трёх зон — измеренная геометрия (§1) ════════════════ */
	--sk-header-h: 80px;          /* шапка fixed, во всю ширину */
	--sk-sidebar-w: 236px;        /* левая панель каталога, x=16 */
	--sk-sidebar-gap: 16px;
	--sk-aside-w: 336px;          /* правая панель: адрес и корзина */
	--sk-panel-w: 483px;          /* панель корзины/чата, 483×836 */
	--sk-panel-h: 836px;
	/* Модальное окно корзины (референс samokat.ru/cart): по центру поверх
	   каталога, две колонки — список позиций и сводка. Раньше корзина висела
	   постоянной колонкой в .sk-aside — владелец попросил модальное окно. */
	--sk-cartmodal-w: 1120px;
	--sk-cartmodal-h: 836px;
	--sk-product-panel-w: 978px;  /* панель товара, 978×836 */
	--sk-product-col-left: 474px;
	--sk-product-col-right: 456px;

	/* Обе панели fixed, поэтому их положение считается от вьюпорта. На 1440
	   (ширина макета 1425 при классической полосе прокрутки 15 px) это даёт
	   ровно x=16 w=236 слева и x=1073 w=336 справа. На более широких экранах
	   --sk-shell-offset сдвигает панели вместе с центрированной колонкой
	   контента (значение уточняет rasta.js по documentElement.clientWidth,
	   здесь — запасной вариант для первого кадра). */
	/* ПОЛНАЯ ШИРИНА (по требованию владельца): каркас больше не центрируется
	   под макет 1440 — боковые панели прижаты к краям вьюпорта, а центральная
	   колонка занимает всё оставшееся место. На 1920 это даёт панели у самых
	   краёв (по 16 px отступа) вместо пустых полей по бокам.
	   Значения ниже — «нет ограничения»; rasta.js больше не пересчитывает
	   смещение. */
	--sk-shell-max: none;
	--sk-shell-offset: 0px;
	--sk-main-w: none;            /* центральная колонка тянется на всю ширину */
	--sk-sidebar-content-h: calc(100vh - var(--sk-header-h) - 32px); /* 788 при 900 */

	/* ═══ Кнопки (§6) ══════════════════════════════════════════════════ */
	--sk-btn-h: 36px;             /* главная и вторичная */
	--sk-btn-h-header: 56px;      /* кнопка в шапке */
	--sk-icon-btn: 36px;          /* круглая иконка 36×36 */

	--sk-space-unit: 8px;
	--sk-card-pad: 16px;
	--sk-grid-gap: 20px;
	--sk-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
	--sk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body.sk-body {
	margin: 0;
	background: var(--sk-bg-page);
	color: var(--sk-ink);
	font-family: var(--sk-font-family);
	font-size: var(--sk-font-size-body);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

body.sk-body.sk-noscroll { overflow: hidden; }

.sk-body h1, .sk-body h2, .sk-body h3, .sk-body h4 {
	margin: 0 0 calc(var(--sk-space-unit) * 2);
	font-weight: 600;
	line-height: 1.25;
	color: var(--sk-ink);
}

.sk-body h1 { font-size: 28px; }
.sk-body h2 { font-size: 22px; }
.sk-body h3 { font-size: 18px; }

.sk-body a { color: var(--sk-ink); text-decoration: none; }
.sk-body a:hover { color: var(--sk-primary); }

.sk-body img { max-width: 100%; height: auto; }

.sk-body button { font-family: inherit; font-size: inherit; }

.sk-container {
	width: 100%;
	max-width: none;              /* полная ширина: без центрирующей рамки 1440 */
	margin: 0 auto;
	padding: 0 20px;
}

.sk-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The reference design uses one strong accent; everything else stays neutral. */
.sk-text-muted { color: var(--sk-ink-muted); }
.sk-text-success { color: var(--sk-success); }
.sk-text-primary { color: var(--sk-primary); }

/* --------------------------------------------------------------------------
   Buttons / pills / chips
   -------------------------------------------------------------------------- */

.sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--sk-btn-h);       /* измерено: 36px (§6) */
	padding: 0 20px;
	border: 0;
	border-radius: var(--sk-radius-button);
	/* Тёмный оттенок того же тона: белый текст на #FF6B2C даёт 2.8:1,
	   на #C2410C — ≈5.2:1. Яркий акцент остаётся заливкам и графике. */
	background: var(--sk-primary-strong);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background .15s var(--sk-ease), transform .15s var(--sk-spring);
}

.sk-btn:hover { background: var(--sk-primary-dark); color: #fff; }
.sk-btn:active { transform: scale(0.97); }

.sk-btn--block { width: 100%; }
.sk-btn--lg { min-height: 56px; font-size: 16px; }

.sk-btn--ghost {
	background: var(--sk-bg-subtle);
	color: var(--sk-ink);
}

.sk-btn--ghost:hover { background: var(--sk-border); color: var(--sk-ink); }

.sk-btn--outline {
	background: #fff;
	color: var(--sk-primary);
	box-shadow: inset 0 0 0 1.5px var(--sk-primary);
}

.sk-btn--outline:hover { background: var(--sk-primary-soft); color: var(--sk-primary); }

.sk-btn[disabled], .sk-btn.is-disabled {
	background: var(--sk-border);
	color: var(--sk-ink-placeholder);
	cursor: not-allowed;
}

/* Rounded icon button (support / account / cart in the header). */
.sk-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	min-width: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-subtle);
	color: var(--sk-ink);
	font-size: 14px;
	cursor: pointer;
	transition: background .15s var(--sk-ease);
}

.sk-iconbtn:hover { background: var(--sk-border); color: var(--sk-ink); }
.sk-iconbtn svg { width: 20px; height: 20px; flex: none; }

.sk-iconbtn__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--sk-primary);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* Chips — category / attribute filters (§3.5). */
.sk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 calc(var(--sk-space-unit) * 3);
}

.sk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-page);
	color: var(--sk-ink);
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s var(--sk-ease);
}

.sk-chip:hover { background: var(--sk-border); color: var(--sk-ink); }

.sk-chip.is-active {
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
}

.sk-chip svg { width: 16px; height: 16px; }

.sk-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--sk-radius-badge);
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
	font-size: 12px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Header (§3.1) — logo, big search, support, account, cart
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Зона 1 — ШАПКА (§1, §16.3)
   Измерено на живом сайте: position fixed, высота 80, фон белый,
   border-radius 0 0 32px 32px, padding 16px, z-index 5, одна тень.
   -------------------------------------------------------------------------- */

.sk-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	height: var(--sk-header-h);
	background: var(--sk-bg-card);
	border-bottom: 0;
	border-radius: 0 0 var(--sk-radius-popup) var(--sk-radius-popup);
	box-shadow: var(--sk-shadow-card);
}

.sk-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--sk-header-h);
	max-width: var(--sk-shell-max);
	margin: 0 auto;
	padding: 16px;
}

/* Компактный адрес+ETA в шапке планшета/мобильного (§18.3). */
.sk-maddr {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	padding: 4px 6px;
	border: 0;
	border-radius: var(--sk-radius-xs);
	background: transparent;
	color: var(--sk-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sk-maddr__value {
	max-width: 100%;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk-maddr__eta { color: var(--sk-ink-muted); font-size: 13px; line-height: 1.2; }
.sk-maddr:hover { background: var(--sk-bg-page); }

/* NOTE: .sk-body a (0,1,1) outranks a bare .sk-logo (0,1,0), so the logo colour
   must be declared with the same or higher specificity — otherwise the wordmark
   and the currentColor SVG mark inherit the ink colour. */
.sk-body .sk-logo,
.sk-body .sk-logo:hover {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	color: var(--sk-primary);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.sk-logo img { display: block; height: 32px; width: auto; }
.sk-logo__mark { width: 30px; height: 30px; flex: none; }

/* Слово «rasta» рядом со знаком: строчными и жирным (§1). Цвет — чернильный, а
   не акцентный: персимоновая плашка уже несёт бренд-цвет, слово её не дублирует.
   Текст берётся из theme_rasta_brand_name, поэтому логотип не нужно
   перерисовывать при переименовании. */
.sk-body .sk-logo__word {
	color: var(--sk-ink);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

/* Search is the primary navigation channel — it takes the central width. */
.sk-search {
	position: relative;
	flex: 1 1 auto;
	max-width: none;
}

/* Поиск отдельной строкой (§18.3) — только в мобильной вёрстке. */
.sk-search--row { display: none; }

.sk-search__input {
	width: 100%;
	height: var(--sk-btn-h-header);          /* измерено: 56 px */
	padding: 0 16px 0 46px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-page);
	color: var(--sk-ink);
	font-family: inherit;
	font-size: var(--sk-font-size-sm);       /* измерено: 14 px (§18.2) */
	outline: none;
	transition: box-shadow .15s var(--sk-ease), background .15s var(--sk-ease);
}

.sk-search__input::placeholder { color: var(--sk-ink-placeholder); }

.sk-search__input:focus {
	background: var(--sk-bg-card);
	box-shadow: inset 0 0 0 1.5px var(--sk-primary);
}

.sk-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: var(--sk-ink-muted);
	pointer-events: none;
}

.sk-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: none;
}

/* --------------------------------------------------------------------------
   Переключатель языка RU / UZ / EN (штатный маршрут common/language)
   --------------------------------------------------------------------------
   Два экземпляра одного и того же HTML: в шапке (справа, рядом с профилем и
   корзиной) и в нижнем листе «Категории». На узких экранах шапка переполнена
   (логотип + адрес + поиск + три иконки), поэтому ниже 1200px остаётся только
   переключатель в листе/панели — геометрия шапки 80px при этом не меняется. */

.sk-lang {
	margin: 0;
}

.sk-lang-slot {
	display: block;
	flex: none;
}

.sk-lang-slot--sheet {
	display: none;
	padding: 8px 8px 4px;
}

.sk-lang__list {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--sk-border);
	border-radius: 1000px;
	background: var(--sk-bg-page);
}

.sk-lang__item {
	min-width: 34px;
	height: 26px;
	padding: 0 8px;
	border: 0;
	border-radius: 1000px;
	background: transparent;
	color: var(--sk-ink-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s var(--sk-ease), color .15s var(--sk-ease);
}

.sk-lang__item:hover {
	color: var(--sk-ink);
}

.sk-lang__item.is-active {
	background: var(--sk-ink);
	color: #fff;
}

@media (max-width: 1200px) {
	.sk-lang-slot--header { display: none; }
	.sk-lang-slot--sheet { display: block; }
}

/* --------------------------------------------------------------------------
   Shell — sticky category sidebar (§3.2) + content column
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Зоны 2–4 — КАРКАС ИЗ ТРЁХ ЗОН (§1)
   --------------------------------------------------------------------------
   Шапка fixed 80 px → обе боковые панели начинаются от y=80, тоже fixed, и не
   двигаются при прокрутке: прокручивается только центральная колонка. Так же
   устроен живой samokat.ru: панели position: fixed (замерено), а документ при
   этом скроллится (scrollHeight ≈ 8458 на 8458-пиксельной главной) — то есть
   двигается именно центральная колонка, панели стоят на месте.

   Замерено при окне 1440×900 (ширина макета 1425 при полосе прокрутки 15 px):
     • левая панель  x=16   w=236  h=820  padding 16px 0
     • содержимое    x=16   w=236  h=788 (100vh − 80 − 32)
     • правая панель x=1073 w=336  h=820  padding 16px 0
     • центральная колонка x=268…1072 (max-width 804)
   -------------------------------------------------------------------------- */

.sk-shell { display: block; }

/* Центральная колонка — единственная прокручиваемая часть каркаса. */
.sk-main {
	margin-left: calc(var(--sk-shell-offset) + var(--sk-sidebar-gap) + var(--sk-sidebar-w) + var(--sk-sidebar-gap));
	margin-right: calc(var(--sk-shell-offset) + var(--sk-aside-w) + var(--sk-sidebar-gap) * 2);
	max-width: var(--sk-main-w);
	min-width: 0;
	padding-top: calc(var(--sk-header-h) + 32px);
	padding-bottom: 24px;
}

/* Зона 2 — левая панель: дерево каталога. */
.sk-sidebar {
	position: fixed;
	top: var(--sk-header-h);
	left: calc(var(--sk-shell-offset) + var(--sk-sidebar-gap));
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: var(--sk-sidebar-w);
	height: calc(100vh - var(--sk-header-h));
	padding: 16px 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.sk-sidebar__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 8px;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.sk-sidebar__list { margin: 0; padding: 0; list-style: none; }

.sk-sidebar__item > a,
.sk-sidebar__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.sk-sidebar__item > a:hover,
.sk-sidebar__toggle:hover { background: var(--sk-bg-page); color: var(--sk-ink); }

/* Активная категория/подкатегория — приглушённая акцентная подложка. */
.sk-sidebar__item.is-active > a,
.sk-sidebar__item.is-active > .sk-sidebar__toggle { background: var(--sk-primary-soft); color: var(--sk-primary); }
.sk-sidebar__item.is-active .sk-sidebar__name { font-weight: 600; }
.sk-sidebar__sub li.is-active > a { background: var(--sk-primary-soft); color: var(--sk-primary); font-weight: 600; }

.sk-sidebar__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk-sidebar__count {
	flex: none;
	color: var(--sk-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.sk-sidebar__item.is-active .sk-sidebar__count { color: var(--sk-primary); }

/* Round colour "sticker" icons (§2.5): photo, emoji or first letter. */
.sk-sidebar__sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
	font-size: 16px;
	line-height: 1;
}

.sk-sidebar__sticker--img { object-fit: cover; background: var(--sk-bg-page); }
.sk-sidebar__sticker--home svg { width: 18px; height: 18px; }
.sk-sidebar__sticker--home { background: var(--sk-bg-page); color: var(--sk-ink-2); }

/* Цветные подложки «наклеек» — по кругу, чтобы дерево не было однотонным. */
.sk-sticker-c1 { background: #FFF1E9; color: #C2410C; }
.sk-sticker-c2 { background: #EAF9F0; color: #0A7C3A; }
.sk-sticker-c3 { background: #EEF3FF; color: #2B5BD7; }
.sk-sticker-c4 { background: #FDF0F6; color: #B4266B; }
.sk-sticker-c5 { background: #FFF8E1; color: #96690B; }

.sk-sidebar__caret { flex: none; width: 16px; height: 16px; color: var(--sk-border-strong); transition: transform .2s var(--sk-ease); }
.sk-sidebar__item.is-open .sk-sidebar__caret { transform: rotate(90deg); }

.sk-sidebar__sub {
	display: none;
	margin: 0 0 4px;
	padding: 0 0 0 42px;
	list-style: none;
}

.sk-sidebar__item.is-open .sk-sidebar__sub { display: block; }

.sk-sidebar__sub a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--sk-ink-muted);
	font-size: 13px;
}

.sk-sidebar__sub a:hover { background: var(--sk-bg-page); color: var(--sk-ink); }

/* Зона 4 — правая панель: адрес, ETA, корзина. */
.sk-aside {
	position: fixed;
	top: var(--sk-header-h);
	right: calc(var(--sk-shell-offset) + var(--sk-sidebar-gap));
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: var(--sk-aside-w);
	height: calc(100vh - var(--sk-header-h));
	padding: 16px 0;
	background: transparent;
}

/* Внутри панели одновременно живёт только один «вид»: адрес+корзина,
   список адресов или форма нового адреса (§16.1). */
.sk-aside__view {
	display: none;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
}

.sk-aside__view.is-active { display: flex; }

/* Открытая панель адреса/ящик стоит выше затемнения (#sk-overlay, z-index 290),
   иначе .sk-overlay перехватывал бы клики по самой панели. Базовое значение
   z-index у панели — 1, как в замере живого сайта (§16.3). */
.sk-aside.is-open { z-index: 300; }

.sk-btn--back { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Блок адреса и ETA (§16.1 шаг 1)
   -------------------------------------------------------------------------- */

.sk-addr {
	display: block;
	flex: none;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
	color: var(--sk-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: box-shadow .15s var(--sk-ease);
}

.sk-addr:hover { box-shadow: var(--sk-shadow-float); }

.sk-addr__head { display: flex; align-items: center; gap: 8px; }
.sk-addr__label { flex: 1 1 auto; color: var(--sk-ink-muted); font-size: 13px; }
.sk-addr__caret { width: 16px; height: 16px; flex: none; color: var(--sk-ink-muted); }

.sk-addr__value {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
}

.sk-addr__eta { display: block; margin-top: 4px; color: var(--sk-ink-muted); font-size: 14px; }
.sk-addr.is-empty .sk-addr__value { color: var(--sk-ink-muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   Карточка-панель правой колонки (список адресов, форма адреса)
   -------------------------------------------------------------------------- */

.sk-card-panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
	overflow: hidden;
}

.sk-card-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 16px 16px 8px;
}

.sk-card-panel__title { margin: 0; font-size: 20px; font-weight: var(--sk-fw-bold); line-height: 1.2; }
.sk-card-panel__title { flex: 1 1 auto; }

.sk-card-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 16px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sk-card-panel__foot { flex: none; padding: 12px 16px 16px; }

/* --------------------------------------------------------------------------
   Мини-итог корзины в правой панели (§17)

   В панели больше НЕТ списка позиций — только количество, сумма и пилюля
   «Продолжить», открывающая модальное окно корзины. Так владелец видит одно
   представление корзины в каждый момент: панель → модалка, страница
   checkout/cart → своя раскладка .sk-cart.
   -------------------------------------------------------------------------- */

.sk-minisum {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: none;
	padding: 16px;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
}

.sk-minisum__row { display: flex; align-items: baseline; gap: 8px; }
.sk-minisum__label { flex: 1 1 auto; color: var(--sk-ink-muted); font-size: 13px; }
.sk-minisum__count { color: var(--sk-ink-muted); font-size: 13px; font-weight: 600; }
.sk-minisum__total { font-size: 24px; font-weight: var(--sk-fw-bold); line-height: 1.15; }
.sk-minisum__note { margin: 0; color: var(--sk-ink-muted); font-size: 12px; text-align: center; }

/* --------------------------------------------------------------------------
   Карта зоны доставки в правой панели (§10)

   Leaflet + OpenStreetMap; файлы библиотеки лежат внутри темы
   (catalog/view/javascript/leaflet/), поэтому внешний CDN не нужен. Поверх
   карты — карточка зоны: «Доставка N минут» + выбранный адрес. Если
   библиотека или тайлы недоступны, .sk-map__fallback показывает аккуратную
   заглушку — панель не ломается.
   -------------------------------------------------------------------------- */

.sk-map {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: 220px;
	border-radius: var(--sk-radius-panel);
	background: #E8ECEF;
	box-shadow: var(--sk-shadow-card);
	overflow: hidden;
}

.sk-map__canvas { position: absolute; inset: 0; z-index: 0; background: #E8ECEF; }

/* Leaflet рисует свои контролы 36×36 — подгоняем под пилюли темы. */
.sk-map__canvas .leaflet-control-zoom a {
	width: 32px;
	height: 32px;
	line-height: 30px;
	color: var(--sk-ink);
}

.sk-map__canvas .leaflet-control-attribution {
	background: rgba(255, 255, 255, .78);
	font-size: 10px;
}

/* Копирайт OSM приподнят над карточкой зоны — иначе он ложился ей на низ. */
.sk-map__canvas .leaflet-bottom { bottom: 74px; }

.sk-map__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	background: repeating-linear-gradient(135deg, #EDF1F4 0 12px, #E3E9ED 12px 24px);
	color: var(--sk-ink-muted);
	font-size: 12px;
	text-align: center;
}

.sk-map__fallback svg { width: 40px; height: 40px; color: var(--sk-border-strong); }

/* Карточка зоны поверх тайлов: у Leaflet панели z-index 200–700. */
.sk-map__card {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 800;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 18px;
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-float);
}

.sk-map__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
}

.sk-map__pin svg { width: 18px; height: 18px; }
.sk-map__zone { display: flex; flex-direction: column; min-width: 0; }
.sk-map__eta { font-size: 14px; font-weight: 600; }

.sk-map__addr {
	overflow: hidden;
	color: var(--sk-ink-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Пилюля действия/минимума заказа (§6): высота 56, радиус 1000. */
.sk-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-primary);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.sk-body a.sk-pill, .sk-body a.sk-pill:hover { color: #fff; }
.sk-pill:hover { background: var(--sk-primary-strong); }

.sk-pill.is-disabled,
.sk-pill[disabled] {
	background: var(--sk-bg-page);
	color: var(--sk-ink-muted);
	cursor: not-allowed;
}

/* Пустое состояние корзины: линейный курьер + текст (§16.2). */
.sk-empty--panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	padding: 24px 8px;
	text-align: center;
}

.sk-courier { width: 128px; height: 96px; color: var(--sk-border-strong); }
.sk-empty__text { margin: 0; color: var(--sk-ink-muted); font-size: 14px; line-height: 1.35; }

/* --------------------------------------------------------------------------
   «Выбрать адрес» + «Новый адрес» (§16.1 шаги 2–6)
   -------------------------------------------------------------------------- */

.sk-addrlist { margin: 0; padding: 0; list-style: none; }

.sk-addrlist li { border-bottom: 1px solid var(--sk-border); }
.sk-addrlist li:last-child { border-bottom: 0; }

.sk-addrlist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: var(--sk-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sk-addrlist__text { flex: 1 1 auto; min-width: 0; }
.sk-addrlist__street { display: block; font-size: 14px; font-weight: 600; }
.sk-addrlist__meta { display: block; margin-top: 2px; color: var(--sk-ink-muted); font-size: 12px; }

.sk-addrlist__check {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--sk-primary);
	visibility: hidden;
}

.sk-addrlist__item.is-selected .sk-addrlist__check { visibility: visible; }
.sk-addrlist__empty { color: var(--sk-ink-muted); font-size: 13px; }

.sk-suggest {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	border-radius: var(--sk-radius-xs);
	background: var(--sk-bg-page);
	overflow: hidden;
}

.sk-suggest li { border-bottom: 1px solid var(--sk-border); }
.sk-suggest li:last-child { border-bottom: 0; }

.sk-suggest button {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	color: var(--sk-ink);
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.sk-suggest button:hover { background: var(--sk-primary-soft); }
.sk-suggest__meta { display: block; color: var(--sk-ink-muted); font-size: 12px; }

.sk-addrdetails { margin-top: 4px; }
.sk-field-row { display: flex; gap: 10px; }
.sk-field-row .sk-field { flex: 1 1 0; }

.sk-addrdetails__eta { margin: 4px 0 0; color: var(--sk-success); font-size: 13px; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.sk-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 calc(var(--sk-space-unit) * 2);
	padding: 0;
	list-style: none;
	color: var(--sk-ink-muted);
	font-size: 13px;
}

.sk-crumbs li + li::before { content: "·"; margin-right: 6px; color: var(--sk-border-strong); }
.sk-crumbs a { color: var(--sk-ink-muted); }
.sk-crumbs a:hover { color: var(--sk-primary); }

/* --------------------------------------------------------------------------
   Hero (§3.4.1) — editorial banner carousel
   -------------------------------------------------------------------------- */

.sk-hero { margin-bottom: calc(var(--sk-space-unit) * 4); }

.sk-hero__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: calc(var(--sk-space-unit) * 2);
}

.sk-hero__title { font-size: 28px; font-weight: 600; margin: 0; }
.sk-hero__sub { color: var(--sk-ink-muted); font-size: 15px; margin: 4px 0 0; }

.sk-rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.sk-rail::-webkit-scrollbar { display: none; }
.sk-rail > * { scroll-snap-align: start; flex: none; }

/* Баннеры: исходники 1140×380 (3:1) — показываем 2 в ряд в СВОЕЙ пропорции,
   чтобы ничего не обрезалось. Для квадратных карточек-фото нужны квадратные исходники. */
.sk-hero__slide {
	position: relative;
	flex: none;
	width: calc((100% - 16px) / 2);
	height: auto;
	aspect-ratio: 1140 / 380;
	border-radius: var(--sk-radius-card);
	overflow: hidden;
	background: var(--sk-bg-subtle);
	box-shadow: var(--sk-shadow-card);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sk-hero__slide:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 20, 40, .16); }

.sk-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0) 58%);
	pointer-events: none;
}

.sk-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.sk-hero__caption {
	position: absolute;
	left: 0; right: 0; top: 0;
	padding: 14px 16px;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	z-index: 1;
}

/* Promo tiles (§3.4.2) */
.sk-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sk-grid-gap);
}

.sk-tile {
	position: relative;
	min-height: 132px;
	padding: 18px;
	border-radius: var(--sk-radius-card);
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
	overflow: hidden;
}

.sk-tile--neutral { background: var(--sk-bg-card); color: var(--sk-ink); box-shadow: var(--sk-shadow-card); }
.sk-tile--green { background: #EAF9F0; color: var(--sk-success); }
.sk-tile__title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.sk-tile__text { font-size: 13px; margin: 0; opacity: .85; }
.sk-tile img { position: absolute; right: 0; bottom: 0; max-height: 100%; }

.sk-tile__flag {
	position: absolute;
	top: 12px; right: 12px;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .85);
	color: var(--sk-ink-muted);
	font-size: 11px;
	line-height: 22px;
}

/* --------------------------------------------------------------------------
   Shelves (§3.4.3-3.4.5) — H2 + horizontal product rail
   -------------------------------------------------------------------------- */

.sk-shelf { margin-bottom: calc(var(--sk-space-unit) * 5); }

.sk-shelf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: calc(var(--sk-space-unit) * 2);
}

.sk-shelf__title { font-size: 22px; font-weight: 600; margin: 0; }

.sk-shelf__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sk-ink-muted);
	font-size: 14px;
	white-space: nowrap;
}

.sk-shelf__more:hover { color: var(--sk-primary); }

/* Grid-of-blocks variant (module rendering into a normal grid). */
.sk-shelf__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sk-grid-gap);
}

/* --------------------------------------------------------------------------
   Product card (§3.6) — the single most important component
   -------------------------------------------------------------------------- */

.sk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--sk-bg-card);
	border-radius: var(--sk-radius-card);
	box-shadow: var(--sk-shadow-card);
	overflow: hidden;
	transition: box-shadow .15s var(--sk-ease), transform .15s var(--sk-spring);
}

.sk-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }

.sk-card--rail { width: 200px; }

.sk-card__media {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%; /* square photo area on white */
	background: var(--sk-bg-card);
}

.sk-card__img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 10px;
}

/* Placeholder strategy: the live catalogue has almost no photography, so the
   no-image state must still look intentional. */
.sk-card__img--empty {
	object-fit: contain;
	opacity: .5;
	padding: 22%;
}

/* §17.3: бейдж скидки — тёмная пилюля в левом нижнем углу фото. */
.sk-card__badges {
	position: absolute;
	left: 10px; bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	z-index: 2;
}

.sk-card__discount {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 1000px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.sk-card__flag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 1000px;
	background: #fff;
	color: var(--sk-ink-muted);
	font-size: 11px;
}

.sk-card__flag--success { background: #EAF9F0; color: var(--sk-success); }

/* Quantity overlay shown over the photo when the item is in the cart (§3.8). */
.sk-card__incart {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .72);
	color: var(--sk-ink);
	font-size: 34px;
	font-weight: 700;
	z-index: 1;
}

.sk-card.is-incart .sk-card__incart { display: flex; }

.sk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--sk-card-pad);
	padding-top: 4px;
	gap: 4px;
}

.sk-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	min-height: 2.6em;
}

.sk-card__title a { color: var(--sk-ink); }
.sk-card.is-lines-1 .sk-card__title { -webkit-line-clamp: 1; min-height: 1.3em; }

.sk-card__sub {
	margin: 0;
	color: var(--sk-ink-muted);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sk-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	min-height: 44px;
}

/* --- цена: пилюля [ цена + ] / [ − цена + ] (§17.1) ----------------------- */

.sk-card__pricewrap {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Зачёркнутая старая цена стоит СНАРУЖИ пилюли, слева от неё. */
.sk-card__old {
	color: var(--sk-ink-muted);
	font-size: 13px;
	text-decoration: line-through;
	white-space: nowrap;
}

/* Пилюля: измерено на samokat.ru — 101 × 36, border-radius 1000px, фон акцент.
   Растягивается по содержимому (min-width фиксирует измеренную ширину). */
.sk-card__actions {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	height: 36px;
	min-width: 101px;
	padding: 0 10px;
	border-radius: 1000px;
	background: var(--sk-primary);
	color: #fff;
}

.sk-card__now {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* Состояние «нет остатка»: обычный текст цены, без пилюли. */
.sk-card__now--plain {
	color: var(--sk-ink);
	font-size: 17px;
}

.sk-card__add,
.sk-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: transform .12s var(--sk-spring), opacity .12s var(--sk-ease);
}

.sk-card__add:hover,
.sk-card__step:hover { opacity: .82; }
.sk-card__add:active,
.sk-card__step:active { transform: scale(.86); }
.sk-card__add svg,
.sk-card__step svg { width: 20px; height: 20px; }

/* «−» появляется только в состоянии «в корзине» — та же пилюля-степпер. */
.sk-card__step { display: none; }
.sk-card.is-incart .sk-card__step { display: inline-flex; }
.sk-card.is-incart .sk-card__old { display: none; }

.sk-card__outofstock {
	color: var(--sk-ink-muted);
	font-size: 12px;
	white-space: nowrap;
	margin-left: auto;
}

/* §17.3: зелёный текст выгоды/доставки. */
.sk-card__benefit {
	margin: 0;
	color: var(--sk-success);
	font-size: 12px;
	line-height: 1.3;
}

.sk-card__foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	min-height: 36px;
}

/* card_title_lines = 1 (класс на <body>, см. common/header.twig). */
.sk-lines-1 .sk-card__title { -webkit-line-clamp: 1; min-height: 1.3em; }

/* --------------------------------------------------------------------------
   Category listing (§3.5)
   -------------------------------------------------------------------------- */

.sk-page__head { margin-bottom: calc(var(--sk-space-unit) * 2); }
.sk-page__title { font-size: 28px; font-weight: 600; margin: 0; }

.sk-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: calc(var(--sk-space-unit) * 2);
}

.sk-toolbar__select {
	height: 40px;
	padding: 0 36px 0 16px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-page) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 14px;
	appearance: none;
	cursor: pointer;
}

.sk-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sk-grid-gap);
}

.sk-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: calc(var(--sk-space-unit) * 5) 0;
}

.sk-pagination a, .sk-pagination span, .sk-pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-card);
	color: var(--sk-ink);
	font-size: 14px;
}

.sk-pagination .is-active, .sk-pagination strong { background: var(--sk-primary); color: #fff; }

/* --------------------------------------------------------------------------
   PDP (§3.7) — галерея панели товара; сама панель описана в блоке §18.1 ниже.
   -------------------------------------------------------------------------- */

.sk-pdp__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }

.sk-pdp__thumb {
	width: 68px; height: 68px;
	padding: 0;
	border: 1.5px solid transparent;
	border-radius: 12px;
	background: var(--sk-bg-subtle);
	overflow: hidden;
	cursor: pointer;
}

.sk-pdp__thumb.is-active { border-color: var(--sk-primary); }
.sk-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }

.sk-pdp__title { font-size: 28px; font-weight: 600; margin: 0 0 8px; }


.sk-qty {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 6px;
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-page);
	flex: none;
}

.sk-qty__btn {
	width: 36px; height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sk-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sk-qty__btn:hover { background: #fff; }

.sk-qty__input {
	width: 44px;
	border: 0;
	background: transparent;
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

.sk-qty__input::-webkit-outer-spin-button,
.sk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Accordions: Состав / Пищевая ценность / О товаре / Хранение */
.sk-acc { border-top: 1px solid var(--sk-border); }

.sk-acc__item { border-bottom: 1px solid var(--sk-border); }

.sk-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: transparent;
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.sk-acc__head svg { width: 20px; height: 20px; color: var(--sk-border-strong); transition: transform .2s var(--sk-ease); }
.sk-acc__item.is-open .sk-acc__head svg { transform: rotate(180deg); }

.sk-acc__body { display: none; padding: 0 0 18px; color: var(--sk-ink-muted); font-size: 14px; }
.sk-acc__item.is-open .sk-acc__body { display: block; }

.sk-acc__body table { width: 100%; border-collapse: collapse; }
.sk-acc__body td { padding: 6px 0; border-bottom: 1px solid var(--sk-border); }

/* --------------------------------------------------------------------------
   Cart (§3.8) — mini cart + full cart
   -------------------------------------------------------------------------- */

.sk-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
}

.sk-panel {
	padding: 20px;
	border-radius: var(--sk-radius-card);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
}

.sk-panel__title { font-size: 18px; font-weight: 600; margin: 0 0 16px; }

.sk-cartrow {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--sk-border);
}

.sk-cartrow:last-child { border-bottom: 0; }

.sk-cartrow__img {
	width: 96px; height: 96px;
	border-radius: 12px;
	background: var(--sk-bg-subtle);
	object-fit: contain;
	padding: 6px;
}

.sk-cartrow__name { font-size: 15px; font-weight: 400; margin: 0 0 4px; }
.sk-cartrow__meta { color: var(--sk-ink-muted); font-size: 13px; margin: 0 0 8px; }
.sk-cartrow__price { text-align: right; white-space: nowrap; }

.sk-cartrow__remove {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-ink-muted);
	font-size: 13px;
	cursor: pointer;
}

.sk-cartrow__remove:hover { color: var(--sk-primary); }

.sk-totals { width: 100%; border-collapse: collapse; }
.sk-totals td { padding: 8px 0; font-size: 15px; }
.sk-totals td:last-child { text-align: right; white-space: nowrap; }
.sk-totals tr.is-grand td { padding-top: 14px; font-size: 24px; font-weight: 600; }

.sk-empty { padding: 56px 20px; text-align: center; }
.sk-empty__art { width: 140px; height: 140px; margin: 0 auto 20px; color: var(--sk-border); }
.sk-empty__title { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.sk-empty__text { color: var(--sk-ink-muted); font-size: 15px; margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   Checkout (§3.9)
   -------------------------------------------------------------------------- */

.sk-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }

.sk-field { margin-bottom: 16px; }

.sk-field__label {
	display: block;
	margin-bottom: 6px;
	color: var(--sk-ink-muted);
	font-size: 13px;
}

.sk-input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--sk-border);
	border-radius: var(--sk-radius-button);
	background: var(--sk-bg-card);
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color .15s var(--sk-ease);
}

.sk-input:focus { border-color: var(--sk-primary); }
.sk-input::placeholder { color: var(--sk-ink-placeholder); }

textarea.sk-input { height: auto; min-height: 96px; padding: 14px 16px; border-radius: 16px; resize: vertical; }

.sk-field.has-error .sk-input { border-color: var(--sk-primary); }

.sk-form__error { margin-top: 4px; color: var(--sk-primary); font-size: 12px; }

.sk-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	margin-bottom: 8px;
	border: 1.5px solid var(--sk-border);
	border-radius: var(--sk-radius-card);
	cursor: pointer;
}

.sk-radio:hover { border-color: var(--sk-border-strong); }
.sk-radio input { accent-color: var(--sk-primary); }

.sk-radio.is-active { border-color: var(--sk-primary); background: var(--sk-primary-soft); }

/* --------------------------------------------------------------------------
   Залипающая пилюля суммы — мобильный (§18.3): 112×48, радиус 1000px,
   акцентный фон, текст «{сумма} / {ETA} минут». На десктопе её роль играет
   правая панель, поэтому здесь она скрыта (показывает rasta.js).
   -------------------------------------------------------------------------- */

.sk-stickybar {
	position: fixed;
	right: 12px;
	bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	z-index: 120;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	min-height: 48px;
	padding: 6px 16px;
	border-radius: var(--sk-radius-button);
	background: var(--sk-primary);
	color: #fff;
	box-shadow: var(--sk-shadow-card);
}

.sk-body a.sk-stickybar, .sk-body a.sk-stickybar:hover { color: #fff; }

.sk-stickybar__sum { font-size: 14px; font-weight: 700; line-height: 1.15; }
.sk-stickybar__eta { font-size: 11px; line-height: 1.15; opacity: .9; }

/* --------------------------------------------------------------------------
   Bottom navigation (mobile, app-like)
   -------------------------------------------------------------------------- */

.sk-bottomnav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 110;
	display: none;
	grid-template-columns: repeat(4, 1fr);
	background: var(--sk-bg-card);
	border-top: 1px solid var(--sk-border);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sk-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 4px;
	border: 0;
	background: transparent;
	color: var(--sk-ink-muted);
	font-size: 11px;
	cursor: pointer;
}

.sk-bottomnav__item svg { width: 22px; height: 22px; }
.sk-bottomnav__item.is-active { color: var(--sk-primary); }

/* --------------------------------------------------------------------------
   Footer (§3.4.6 / §6)
   -------------------------------------------------------------------------- */

.sk-footer {
	margin-top: calc(var(--sk-space-unit) * 6);
	padding: 40px 0;
	background: var(--sk-bg-card);
	border-top: 1px solid var(--sk-border);
}

.sk-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
}

.sk-footer__title { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

.sk-footer__list { margin: 0; padding: 0; list-style: none; }
.sk-footer__list li { margin-bottom: 8px; }
.sk-footer__list a, .sk-footer__list span { color: var(--sk-ink-muted); font-size: 14px; }
.sk-footer__list a:hover { color: var(--sk-primary); }

.sk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--sk-border);
	color: var(--sk-ink-muted);
	font-size: 13px;
}

.sk-footer__social { display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.sk-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 14px 16px;
	border-radius: var(--sk-radius-card);
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
	font-size: 14px;
}

.sk-alert--success { background: #EAF9F0; color: var(--sk-success); }
.sk-alert--info { background: var(--sk-bg-card); color: var(--sk-ink-muted); }

.sk-alert .close {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sk-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 600;
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	padding: 14px 22px;
	border-radius: var(--sk-radius-button);
	background: var(--sk-ink);
	color: #fff;
	font-size: 14px;
	transition: opacity .2s var(--sk-ease), transform .2s var(--sk-ease);
}

.sk-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.sk-overlay {
	position: fixed;
	inset: 0;
	z-index: 290;
	display: none;
	background: rgba(0, 0, 0, .45);
}

.sk-overlay.is-open { display: block; }

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО КОРЗИНЫ (§17, референс samokat.ru/cart)
   --------------------------------------------------------------------------
   Корзина «как у Самоката»: затемнение rgba(0,0,0,.4), белая панель по центру
   экрана с радиусом 32, две колонки внутри — широкая со списком позиций и
   кросс-сейлом, узкая со скидками и «Итого». Открывается по иконке корзины в
   шапке, по пилюле «Продолжить» из правой панели и по залипающей пилюле суммы
   на мобильном; закрывается по ✕, по клику на затемнение и по Esc.
   Появление — transition .3s (панель чуть поднимается и проявляется).

   z-index 340 — выше .sk-aside.is-open (300) и #sk-overlay (290), иначе
   клики по открытому модальному окну перехватывала бы панель адреса.
   ========================================================================== */

.sk-cartmodal {
	position: fixed;
	inset: 0;
	z-index: 340;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--sk-ease), visibility .3s var(--sk-ease);
}

/* `hidden` должен побеждать display:flex — до открытия окна его нет в потоке. */
.sk-cartmodal[hidden] { display: none !important; }

.sk-cartmodal.is-open { opacity: 1; visibility: visible; }

.sk-cartmodal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--sk-overlay);
}

.sk-cartmodal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(var(--sk-cartmodal-w), 100%);
	max-height: min(var(--sk-cartmodal-h), calc(100vh - 64px));
	border-radius: var(--sk-radius-popup);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-float);
	overflow: hidden;
	transform: translateY(14px) scale(.985);
	transition: transform .3s var(--sk-ease);
}

.sk-cartmodal.is-open .sk-cartmodal__panel { transform: none; }

.sk-cartmodal__head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
	padding: 24px 24px 8px;
}

/* Заголовок окна = выбранный адрес (расписывает rasta.js). Клик открывает
   панель «Выбрать адрес» — то есть сменить адрес прямо из корзины. */
.sk-cartmodal__addr {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-ink);
	font: inherit;
	font-size: 20px;
	font-weight: var(--sk-fw-bold);
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.sk-cartmodal__addr:hover { color: var(--sk-primary); }
.sk-cartmodal__pin { width: 22px; height: 22px; flex: none; color: var(--sk-primary); }

.sk-cartmodal__addr-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk-cartmodal__close { flex: none; }

.sk-cartmodal__body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* Тело окна — две колонки: слева позиции и кросс-сейл, справа скидки и итог. */
.sk-cartmodal .sk-cm {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	width: 100%;
	min-height: 0;
	padding: 8px 24px 24px;
	overflow: hidden;
}

.sk-cartmodal .sk-cm__main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-right: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sk-cartmodal .sk-cm__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: var(--sk-fw-bold);
	line-height: 1.2;
}

.sk-cartmodal .sk-cm__subtitle {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: var(--sk-fw-bold);
	line-height: 1.25;
}

.sk-cartmodal .sk-cm__lines { border-top: 1px solid var(--sk-border); }

.sk-cartmodal .sk-cm__line {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--sk-border);
}

.sk-cartmodal .sk-cm__media {
	display: block;
	width: 96px;
	height: 96px;
	flex: none;
	border-radius: var(--sk-radius-card);
	background: var(--sk-bg-page);
	overflow: hidden;
}

.sk-cartmodal .sk-cm__media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
}

.sk-cartmodal .sk-cm__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-cartmodal .sk-cm__name { color: var(--sk-ink); font-size: 15px; line-height: 1.3; }
.sk-cartmodal .sk-cm__opt { margin: 0; color: var(--sk-ink-muted); font-size: 13px; }
.sk-cartmodal .sk-cm__prices { display: flex; align-items: baseline; gap: 8px; }
.sk-cartmodal .sk-cm__old { color: var(--sk-ink-muted); font-size: 13px; }
.sk-cartmodal .sk-cm__now { font-size: 17px; font-weight: var(--sk-fw-semibold); }
.sk-cartmodal .sk-cm__foot { display: flex; align-items: center; gap: 16px; }
.sk-cartmodal .sk-cm__qty { height: 40px; }
.sk-cartmodal .sk-cm__qty .sk-qty__btn { width: 30px; height: 30px; font-size: 18px; }

.sk-cartmodal .sk-qty__value {
	min-width: 32px;
	font-size: 16px;
	font-weight: var(--sk-fw-semibold);
	text-align: center;
}

.sk-cartmodal .sk-cm__remove {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.sk-cartmodal .sk-cm__remove:hover { color: var(--sk-primary); }
.sk-cartmodal .sk-cm__sum { font-size: 16px; font-weight: var(--sk-fw-semibold); white-space: nowrap; }

/* Кросс-сейл «Добавить к заказу?» — горизонтальная лента мини-карточек. */
.sk-cartmodal .sk-cm__cross { padding-top: 20px; }
.sk-cartmodal .sk-cm__rail { padding-bottom: 8px; }

.sk-minicard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 148px;
	flex: none;
}

.sk-minicard__media {
	position: relative;
	display: block;
	height: 148px;
	border-radius: var(--sk-radius-card);
	background: var(--sk-bg-page);
	overflow: hidden;
}

.sk-minicard__media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 8px;
	object-fit: contain;
}

.sk-minicard__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: var(--sk-radius-badge);
	background: var(--sk-ink);
	color: #fff;
	font-size: 11px;
	font-weight: var(--sk-fw-semibold);
}

.sk-minicard__qty {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--sk-primary);
	color: #fff;
	font-size: 12px;
	font-weight: var(--sk-fw-bold);
}

.sk-minicard__name {
	height: 34px;
	overflow: hidden;
	color: var(--sk-ink);
	font-size: 13px;
	line-height: 1.3;
}

.sk-minicard__price { display: flex; align-items: center; gap: 8px; }
.sk-minicard__old { color: var(--sk-ink-muted); font-size: 12px; }

.sk-minicard__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 6px 0 14px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-primary);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: var(--sk-fw-semibold);
	cursor: pointer;
}

.sk-minicard__pill:hover { background: var(--sk-primary-strong); }

.sk-minicard__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .24);
}

.sk-minicard__plus svg { width: 14px; height: 14px; }

/* Метка адреса на карте — css-кружок (Leaflet divIcon), чтобы не зависеть от
   PNG-иконок Leaflet и всегда быть в акцентном цвете темы. */
.sk-map-pin { background: transparent; border: 0; }

.sk-map-pin span {
	display: block;
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--sk-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Правая узкая колонка: «Скидки и выгода», сводка и «Продолжить». */
.sk-cartmodal .sk-cm__side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 20px;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-page);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sk-cartmodal .sk-promo { margin: 0 0 16px; }
.sk-cartmodal .sk-promo__label { display: block; margin-bottom: 6px; color: var(--sk-ink-muted); font-size: 13px; }
.sk-cartmodal .sk-promo__row { display: flex; gap: 8px; }
.sk-cartmodal .sk-promo__input { flex: 1 1 auto; min-width: 0; height: 44px; }

.sk-cartmodal .sk-promo__btn {
	flex: none;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sk-radius-button);
	background: var(--sk-ink);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: var(--sk-fw-semibold);
	cursor: pointer;
}

.sk-cartmodal .sk-promo__btn:hover { background: var(--sk-primary-strong); }
.sk-cartmodal .sk-promo__msg { margin: 8px 0 0; color: var(--sk-ink-muted); font-size: 13px; }
.sk-cartmodal .sk-promo__msg.is-error { color: var(--sk-primary-strong); }

.sk-cartmodal .sk-cm__cta { margin-top: 16px; }
.sk-cartmodal .sk-cm__note { margin: 8px 0 0; color: var(--sk-ink-muted); font-size: 12px; text-align: center; }
.sk-cartmodal .sk-cm__note--empty { margin-bottom: 8px; font-size: 13px; }
.sk-cartmodal .sk-empty__hint { margin: 0; color: var(--sk-muted); font-size: 13px; }
.sk-cartmodal .sk-cm__main .sk-empty--panel { min-height: 320px; }

/* --------------------------------------------------------------------------
   Fallback styling for stock OpenCart pages that this theme does not override
   (account, information, checkout steps, mail templates, ...). They keep
   Bootstrap markup, so we only soften the container/palette here.
   -------------------------------------------------------------------------- */

.sk-body .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	background: transparent;
	list-style: none;
	font-size: 13px;
}

.sk-body .btn-primary { background: var(--sk-primary); border-color: var(--sk-primary); border-radius: var(--sk-radius-button); }
.sk-body .btn-primary:hover { background: var(--sk-primary-dark); border-color: var(--sk-primary-dark); }
.sk-body .btn { border-radius: var(--sk-radius-button); }
.sk-body .form-control { border-radius: 12px; }
.sk-body .table-bordered { background: var(--sk-bg-card); border-radius: var(--sk-radius-card); }
.sk-body .panel, .sk-body .well { border-radius: var(--sk-radius-card); }
.sk-body #content { padding-bottom: 24px; }
/* Полная ширина, как и .sk-container. Bootstrap задаёт .container фиксированные
   1170 px и центрирует его — внутри .sk-main (x=268, ширина 789 на 1440) такой
   блок вылезал за вьюпорт на 13 px, то есть давал горизонтальную прокрутку на
   страницах, для которых у темы нет своего шаблона (оформление, контакты, вход,
   информация). width:auto возвращает контейнеру ширину родителя. */
.sk-body .container { max-width: none; width: auto; }
.sk-body .alert { border-radius: var(--sk-radius-card); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive — каркас из трёх зон деградирует так же, как на samokat.ru (§18.3):
     • ≥1201 px — три зоны как есть;
     • 993–1200 px (планшет) — правая панель превращается в выдвижной ящик,
       который открывается адресом в шапке или иконкой корзины;
     • ≤992 px — левая панель превращается в нижний лист «Категории»
       (штатный механизм темы), правая — в такой же выдвижной ящик;
     • ≤768 px — в шапке вместо логотипа адрес и ETA, поиск отдельной строкой,
       внизу залипающая пилюля суммы.
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	.sk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sk-shelf__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Планшет: правая панель — выдвижной ящик справа. */
@media (max-width: 1200px) {
	.sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sk-shelf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sk-cart, .sk-checkout { grid-template-columns: minmax(0, 1fr); }

	.sk-main {
		margin-left: calc(var(--sk-sidebar-gap) + var(--sk-sidebar-w) + var(--sk-sidebar-gap));
		margin-right: var(--sk-sidebar-gap);
		max-width: none;
	}

	.sk-maddr { display: flex; }

	.sk-aside {
		right: 0;
		width: var(--sk-aside-w);
		padding: 16px var(--sk-sidebar-gap);
		background: var(--sk-bg-page);
		box-shadow: var(--sk-shadow-float);
		transform: translateX(calc(100% + 24px));
		transition: transform .3s var(--sk-ease);
	}

	.sk-aside.is-open { transform: translateX(0); }
}

/* Мобильный/узкий планшет: обе панели — выдвижные, левая — нижним листом. */
@media (max-width: 992px) {
	.sk-main { margin: 0; padding-left: var(--sk-sidebar-gap); padding-right: var(--sk-sidebar-gap); }
	.sk-header__inner { gap: 12px; }

	/* Левая панель превращается в нижний лист (bottom sheet). */
	.sk-sidebar {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 300;
		width: auto;
		height: auto;
		max-height: 80vh;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--sk-bg-card);
		border-radius: 20px 20px 0 0;
		box-shadow: var(--sk-shadow-float);
		transform: translateY(100%);
		transition: transform .28s var(--sk-ease);
	}

	.sk-sidebar.is-open { transform: translateY(0); }
	.sk-sidebar__card { border-radius: 0; box-shadow: none; padding: 0; }

	.sk-aside { width: min(var(--sk-aside-w), 100%); }
}

@media (max-width: 768px) {
	.sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.sk-shelf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.sk-container { padding-left: 12px; padding-right: 12px; }
	.sk-main { padding-left: 12px; padding-right: 12px; }
	.sk-hero__title, .sk-page__title, .sk-pdp__title { font-size: 22px; }
	.sk-card--rail { width: 152px; }
	.sk-card__title { font-size: 14px; }
	.sk-card__media { padding-top: 90%; }
	.sk-card__img { padding: 6px; }
	/* §18.3: логотипа в шапке нет, поиск не в шапке, а отдельной строкой. */
	.sk-body .sk-logo, .sk-body .sk-logo:hover { display: none; }
	.sk-search:not(.sk-search--row) { display: none; }
	.sk-search--row { display: block; margin: 0 0 16px; }
	.sk-maddr { flex: 1 1 auto; }
	.sk-header__inner { gap: 8px; padding: 12px; }
	.sk-header__label { display: none; }
	.sk-iconbtn { padding: 0; min-width: 40px; height: 40px; }
	.sk-bottomnav { display: grid; }
	.sk-body { padding-bottom: 0; }
	.sk-footer { padding-bottom: 80px; }
	.sk-cartrow { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
	.sk-cartrow__img { width: 72px; height: 72px; }
}

@media (max-width: 560px) {
	.sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-hero__slide { width: 100%; }   /* на узких экранах баннер во всю ширину, пропорция сохраняется */
	.sk-aside { width: 100%; }
}

/* --------------------------------------------------------------------------
   Адаптив модального окна корзины и карты (§17, §10)

   До 1200 px правая панель — выдвижной ящик, поэтому карта уезжает вместе с
   ней (отдельного места на экране она не занимает). Само модальное окно до
   992 px из двух колонок становится одной и прокручивается целиком; на
   телефоне это почти полноэкранный лист с теми же скруглениями.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.sk-map { min-height: 200px; }
}

@media (max-width: 992px) {
	.sk-cartmodal { padding: 16px; }

	/* Одна колонка. Именно block, а не grid: у grid-элементов стоит
	   min-height:0, и в ограниченной по высоте сетке они сжимались ниже
	   своего содержимого — кросс-сейл наезжал на блок «Скидки и выгода». */
	.sk-cartmodal .sk-cm {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.sk-cartmodal .sk-cm__main { overflow: visible; padding-right: 0; }
	.sk-cartmodal .sk-cm__side { margin-top: 24px; overflow: visible; }
}

@media (max-width: 560px) {
	.sk-cartmodal { padding: 8px; }

	.sk-cartmodal__panel {
		max-height: calc(100vh - 16px);
		border-radius: 24px;
	}

	.sk-cartmodal__head { padding: 16px 16px 8px; }
	.sk-cartmodal .sk-cm { padding: 8px 16px 16px; }

	.sk-cartmodal .sk-cm__line {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 10px;
	}

	.sk-cartmodal .sk-cm__media { width: 72px; height: 72px; }
	.sk-cartmodal .sk-cm__name { font-size: 14px; }
	.sk-cartmodal .sk-cm__sum { font-size: 15px; }
}

@media print {
	.sk-header, .sk-sidebar, .sk-aside, .sk-bottomnav, .sk-stickybar, .sk-footer { display: none !important; }
	.sk-main { margin: 0 !important; max-width: none; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Rail items — a fixed-width slot that holds a full-width .sk-card. The rail
   itself only scrolls horizontally (§3.4/§3.5: "on mobile the grid scrolls
   horizontally").
   -------------------------------------------------------------------------- */

.sk-rail__item {
	width: 200px;
	flex: none;
	display: flex;
}

.sk-rail__item > .sk-card { width: 100%; }

/* Badges sit above the photo but must never swallow the link click. */
.sk-card__badges { pointer-events: none; }

.sk-card__more { font-size: 14px; color: var(--sk-primary); }

/* Layout columns kept for OpenCart layouts that still assign modules to
   column_left / column_right. */
.sk-column-left, .sk-column-right { margin-top: 24px; }

/* Category tiles use the same sticker vocabulary as the sidebar. */
.sk-tile { display: block; text-decoration: none; cursor: pointer; }

@media (max-width: 1400px) { .sk-rail__item { width: 190px; } }
@media (max-width: 1200px) { .sk-rail__item { width: 180px; } }
@media (max-width: 992px)  { .sk-rail__item { width: 170px; } }
@media (max-width: 768px)  { .sk-rail__item { width: 152px; } }
@media (max-width: 560px)  { .sk-rail__item { width: 140px; } }

/* --------------------------------------------------------------------------
   Подвал внутри центральной колонки.
   Занимает те же жёлоба, что и .sk-main, чтобы не уезжать под fixed-панели;
   сам подвал при этом прокручивается вместе с колонкой (§1: движется только
   центр).
   -------------------------------------------------------------------------- */

.sk-footer > .sk-container {
	margin-left: calc(var(--sk-shell-offset) + var(--sk-sidebar-gap) + var(--sk-sidebar-w) + var(--sk-sidebar-gap));
	margin-right: calc(var(--sk-shell-offset) + var(--sk-aside-w) + var(--sk-sidebar-gap) * 2);
	max-width: var(--sk-main-w);
	/* ВАЖНО: width:auto, а не 100%. У .sk-container стоит width:100%, и вместе с
	   боковыми полями 268/368 px это вылезало за вьюпорт на 268 px (горизонтальная
	   полоса прокрутки) — раньше спасал max-width: 804px, а при полной ширине его
	   нет. С auto ширина считается за вычетом полей. */
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1200px) {
	.sk-footer > .sk-container {
		margin-left: calc(var(--sk-sidebar-gap) + var(--sk-sidebar-w) + var(--sk-sidebar-gap));
		margin-right: var(--sk-sidebar-gap);
		max-width: none;
	}
}

@media (max-width: 992px) {
	.sk-footer > .sk-container {
		margin: 0;
		padding-left: var(--sk-sidebar-gap);
		padding-right: var(--sk-sidebar-gap);
	}
}

/* =========================================================================
   §17.1 — цена и «+» в ОДНОЙ акцентной пилюле (см. блок «цена» выше).
   Здесь остаются только правила, которые обязаны идти после раскладки карточки.
   ========================================================================= */
.sk-card__more { font-size: 14px; color: var(--sk-primary); }

/* `hidden` должен побеждать любые display:* — иначе .sk-kbju[hidden]
   (display:flex) и .sk-filterbar[hidden] продолжают рисоваться. */
[hidden] { display: none !important; }

/* ==========================================================================
   §17.2 — страница категории: чипы подкатегорий, атрибутивные чипы, фильтры.

   Чипы — серые пилюли, активная тёмная; переполнение сворачивается в «+N»
   (сворачивает сам JS: он измеряет ширину строки и прячет хвост).
   ========================================================================== */

.sk-chips {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 16px;
	overflow: hidden;
}

.sk-chips--filters {
	flex-wrap: wrap;
	overflow: visible;
	margin-bottom: calc(var(--sk-space-unit) * 2);
}

.sk-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	flex: none;
	padding: 0 14px;
	border: 0;
	border-radius: 1000px;
	background: var(--sk-bg-page);
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s var(--sk-ease), color .15s var(--sk-ease);
}

.sk-chip:hover { background: var(--sk-border); }

/* Активный чип — тёмный (§17.2). */
.sk-chip.is-active,
.sk-chip.is-active:hover {
	background: var(--sk-ink);
	color: #fff;
}

.sk-chip svg { width: 16px; height: 16px; flex: none; }

.sk-chip--icon { padding-left: 12px; }

.sk-chip--more { font-weight: 600; }

/* Бренд: пилюля с выпадающим списком. */
.sk-chipdrop { position: relative; flex: none; }

.sk-chipdrop__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: none;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-float);
}

.sk-chipdrop.is-open .sk-chipdrop__menu { display: block; }

.sk-chipdrop__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	color: var(--sk-ink);
	font-size: 14px;
	text-decoration: none;
}

.sk-chipdrop__menu a:hover { background: var(--sk-bg-page); }
.sk-chipdrop__count { color: var(--sk-ink-placeholder); font-size: 13px; }

/* Панель фильтров, открываемая чипом с иконкой. */
.sk-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 calc(var(--sk-space-unit) * 3);
	padding: 16px;
	border-radius: var(--sk-radius-panel);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
}

/* ==========================================================================
   §18.1 — панель товара (PDP). Измерено на samokat.ru:
   панель 978 × 836, radius 32, тень rgba(0,0,0,.1) 0 0 10px 5px,
   затемнение rgba(0,0,0,.8), z-index 102, колонки 474 / 456,
   sticky-блок покупки 432 × 128, кнопки-кружки 36 × 36.
   ========================================================================== */

:root {
	--sk-pdp-w: 978px;
	--sk-pdp-h: 836px;
	--sk-pdp-col-left: 474px;
	--sk-pdp-col-right: 456px;
	--sk-pdp-buy-w: 432px;
	--sk-pdp-buy-h: 128px;
	--sk-pdp-top: 32px;
}

.sk-pdp-layer {
	position: fixed;
	inset: 0;
	z-index: 102;
	display: none;
}

.sk-pdp-layer.is-open { display: block; }

.sk-pdp-layer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	opacity: 0;
	transition: opacity .3s var(--sk-ease);
}

.sk-pdp-layer.is-open .sk-pdp-layer__scrim { opacity: 1; }

/* Две круглые кнопки 36 × 36 — вне панели, справа сверху, поверх затемнения. */
.sk-pdp-layer__tools {
	position: absolute;
	top: 44px;
	right: 40px;
	z-index: 2;
	display: flex;
	gap: 12px;
}

.sk-roundbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sk-bg-page);
	color: var(--sk-ink);
	cursor: pointer;
	transition: background .15s var(--sk-ease), transform .15s var(--sk-spring);
}

.sk-roundbtn:hover { background: var(--sk-border); }
.sk-roundbtn:active { transform: scale(.9); }
.sk-roundbtn svg { width: 18px; height: 18px; }

.sk-pdp-panel {
	position: absolute;
	top: var(--sk-pdp-top);
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: var(--sk-pdp-col-left) var(--sk-pdp-col-right);
	width: var(--sk-pdp-w);
	height: var(--sk-pdp-h);
	padding: 24px;
	border-radius: 32px;
	background: var(--sk-bg-card);
	box-shadow: rgba(0, 0, 0, .1) 0 0 10px 5px;
	overflow: hidden;
	transition: transform .3s var(--sk-ease), opacity .3s var(--sk-ease);
}

/* Панель выезжает снизу (transition .3s), как на сайте. */
.sk-pdp-layer:not(.is-open) .sk-pdp-panel { opacity: 0; transform: translate(-50%, 24px); }

.sk-pdp-panel__left,
.sk-pdp-panel__right {
	min-width: 0;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.sk-pdp-panel__left { padding-right: 16px; }

.sk-pdp-panel__right {
	padding-left: 16px;
	/* Запас под sticky-блок покупки. Адаптивный: rasta.js снимает его классом
	   .is-pdp-short, когда содержимое колонки короче самой панели — тогда
	   прокрутки нет, пилюля и так стоит в потоке, и запас лишь уводил бы её
	   вниз пустой полосой. На длинном товаре запас остаётся, поэтому таблица
	   характеристик докручивается из-под блока, а не прячется под ним. */
	--sk-pdp-buy-reserve: calc(var(--sk-pdp-buy-h) + 16px);
}

.sk-pdp-panel__right.is-pdp-short,
.sk-pdp-panel__right.is-pdp-measuring { --sk-pdp-buy-reserve: 0px; }

.sk-pdp-panel__left::-webkit-scrollbar,
.sk-pdp-panel__right::-webkit-scrollbar { width: 0; }

.sk-crumbs--panel { margin-bottom: 16px; }
.sk-crumbs--panel li { font-size: 13px; }

.sk-pdp__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background: var(--sk-bg-page);
	overflow: hidden;
}

.sk-pdp__photo img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 16px;
}

.sk-pdp__badge {
	position: absolute;
	left: 12px; bottom: 12px;
	z-index: 2;
}

.sk-pdp__title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #000;
}

.sk-pdp__vol { margin: 0 0 16px; color: var(--sk-ink-muted); font-size: 14px; }

.sk-pdp__rule { height: 1px; margin: 0 0 16px; border: 0; background: rgba(89, 89, 89, .3); }

.sk-pdp__desc {
	color: var(--sk-ink);
	font-size: 14px;
	line-height: 1.45;
	margin-bottom: 20px;
}

.sk-pdp__desc p { margin: 0 0 8px; }

/* --- КБЖУ: переключатель «В 100 граммах» / «На весь продукт» -------------- */

.sk-nutrition { margin-bottom: 20px; }

.sk-seg {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 16px;
	border-radius: 1000px;
	background: var(--sk-bg-page);
}

.sk-seg__btn {
	height: 32px;
	padding: 0 16px;
	border: 0;
	border-radius: 1000px;
	background: transparent;
	color: var(--sk-ink);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.sk-seg__btn.is-active { background: var(--sk-ink); color: #fff; }

.sk-kbju { display: flex; flex-wrap: wrap; gap: 40px; }

.sk-kbju__item { display: flex; flex-direction: column; gap: 2px; }
.sk-kbju__value { color: #000; font-size: 28px; font-weight: 700; line-height: 1.1; }
.sk-kbju__label { color: var(--sk-ink-muted); font-size: 12px; }

/* --- Таблица характеристик: подпись серым слева, значение тёмным справа --- */

.sk-specs { width: 100%; border-collapse: collapse; margin-bottom: 24px; }

.sk-specs td {
	padding: 14px 0;
	border-bottom: 1px solid rgba(89, 89, 89, .3);
	font-size: 14px;
	vertical-align: top;
}

.sk-specs td:first-child { color: var(--sk-ink-muted); width: 50%; padding-right: 16px; }
.sk-specs td:last-child { color: var(--sk-ink); text-align: right; }

/* --- Sticky-блок покупки 432 × 128 --------------------------------------- */

.sk-pdp-buy {
	position: sticky;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-pdp-buy-w);
	height: var(--sk-pdp-buy-h);
	/* Дефект 2.1: нижний отступ прокручиваемого содержимого правой колонки —
	   высота блока покупки (128) + зазор (16). Отступ сделан верхним полем
	   самого sticky-блока, а не padding-bottom колонки: так таблица
	   характеристик докручивается до конца и на финальной прокрутке не
	   попадает под блок, а сам блок остаётся прижатым к низу колонки (при
	   padding у колонки под ним на последнем экране оставалась бы пустая
	   полоса). Величина живёт в --sk-pdp-buy-reserve и обнуляется на коротком
	   товаре (класс .is-pdp-short, ставит rasta.js). Ниже в медиазапросе
	   высота блока другая — там отступ переопределён. */
	margin: var(--sk-pdp-buy-reserve, calc(var(--sk-pdp-buy-h) + 16px)) auto 0;
	padding-top: 28px;
	background: var(--sk-bg-card);
}

.sk-pdp-buy__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 64px;
	padding: 0 24px;
	border-radius: 1000px;
	background: var(--sk-primary);
	color: #fff;
}

.sk-pdp-buy__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: transform .12s var(--sk-spring), opacity .12s var(--sk-ease);
}

.sk-pdp-buy__btn:hover { opacity: .85; }
.sk-pdp-buy__btn:active { transform: scale(.88); }
.sk-pdp-buy__btn svg { width: 22px; height: 22px; }

.sk-pdp-buy__label {
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.sk-pdp-buy__out { color: var(--sk-ink-muted); font-size: 16px; }

.sk-pdp-buy__form { display: flex; align-items: center; gap: 12px; width: 100%; }
.sk-pdp-buy__form .sk-btn { flex: 1 1 auto; }

/* --- «Что ещё пригодится»: кросс-сейл, у первой карточки бейдж «Комбо» ---- */

.sk-combo { margin-top: 24px; }

.sk-combo__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; }

.sk-combo__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.sk-combo__item { position: relative; }

.sk-combo__flag {
	/* Дефект 2.2: бейдж «Комбо» стоял в левом НИЖНЕМ углу карточки (bottom: 8px)
	   и в исходном положении колонки уходил ниже края панели — его не было
	   видно, хотя в разметке он был. Теперь он в левом ВЕРХНЕМ углу фото: виден
	   сразу, как только полка кросс-сейла попала в экран, и не спорит с
	   акцентной пилюлей цены внизу карточки. Фон — чернильный, чтобы бейдж
	   читался поверх любого фото (белый на белой карточке сливался). */
	position: absolute;
	left: 8px; top: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 1000px;
	background: var(--sk-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	box-shadow: var(--sk-shadow-card);
}

/* В кросс-сейле карточки компактнее: узкая колонка панели. */
.sk-combo__item .sk-card__title { font-size: 13px; }
.sk-combo__item .sk-card__body { padding: 8px; padding-top: 0; }
.sk-combo__item .sk-card__actions { min-width: 0; height: 32px; padding: 0 8px; gap: 4px; }
.sk-combo__item .sk-card__now { font-size: 13px; }
.sk-combo__item .sk-card__add,
.sk-combo__item .sk-card__step { width: 16px; height: 16px; }
.sk-combo__item .sk-card__add svg,
.sk-combo__item .sk-card__step svg { width: 16px; height: 16px; }

/* --- адаптив панели ------------------------------------------------------ */

@media (max-width: 1100px) {
	.sk-pdp-panel {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: min-content;
		width: min(var(--sk-pdp-w), calc(100vw - 32px));
		height: min(var(--sk-pdp-h), calc(100vh - 64px));
		overflow-y: auto;
	}

	.sk-pdp-panel__left,
	.sk-pdp-panel__right { height: auto; overflow: visible; padding: 0; }

	.sk-pdp-layer__tools { top: 12px; right: 12px; }
	/* Высота блока покупки здесь auto (около 80 px) — отступ над ним остаётся
	   тем же правилом «высота блока + зазор», но считается от фактической
	   высоты, поэтому задан в пикселях от --sk-pdp-buy-h для консистентности. */
	.sk-pdp-buy { width: 100%; height: auto; padding: 16px 0 0; margin: calc(var(--sk-pdp-buy-h) + 16px) auto 0; }
}


/* --------------------------------------------------------------------------
   Категории-карточки (§3.4.3) — стена разделов как у samokat.ru:
   фото + название + счётчик товаров, 5 в ряд
   -------------------------------------------------------------------------- */

.sk-cats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sk-grid-gap);
}

.sk-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 12px 14px;
	border-radius: var(--sk-radius-card);
	background: var(--sk-bg-card);
	box-shadow: var(--sk-shadow-card);
	color: var(--sk-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.sk-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(20, 20, 40, .14); color: var(--sk-ink); }

.sk-cat__img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--sk-bg-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sk-cat__img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sk-cat__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	min-height: 32px;
}

.sk-cat__count { font-size: 11px; color: var(--sk-ink-muted); }

@media (max-width: 1100px) {
	.sk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sk-cat__emoji { font-size: 34px; line-height: 1; }


/* ==========================================================================
   SAMOKAT-GEOMETRY (точь-в-точь по samokat.ru) — перекрывает прежние правила
   ========================================================================== */

/* Баннеры: 4 карточки в ряд, портретные (4:5), текст поверх слева вверху */
.sk-rail {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	overflow: visible;
	scroll-snap-type: none;
}

.sk-hero__slide {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--sk-bg-subtle);
}

.sk-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.sk-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.sk-hero__caption {
	position: absolute;
	left: 0; right: 0; top: 0;
	padding: 14px 16px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
	z-index: 2;
}

/* Акции: розовые плитки как у Samokat */
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.sk-tile {
	position: relative;
	min-height: 232px;
	padding: 18px;
	border-radius: 16px;
	background: linear-gradient(150deg, #ff3d71 0%, #ff7bac 100%);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.sk-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(255, 61, 113, .28); color: #fff; }
.sk-tile__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.sk-tile__text { font-size: 13px; margin: 0; opacity: .95; }
.sk-tile img { position: absolute; right: -12px; bottom: -12px; max-height: 62%; border-radius: 12px; }

.sk-tile--neutral, .sk-tile--green { background: linear-gradient(150deg, #ff3d71 0%, #ff7bac 100%); color: #fff; }

/* Категории: плитки 5 в ряд с круглой иконкой (как в левом меню Samokat) */
.sk-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1200px) {
	.sk-rail { gap: 10px; }
	.sk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sk-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Главные категории с заголовком + подкатегории карточками (шаг 1) */
.sk-catgroup { margin-top: 22px; }
.sk-catgroup:first-of-type { margin-top: 10px; }
.sk-catgroup__title { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.sk-catgroup__title a { color: var(--sk-ink); text-decoration: none; }
.sk-catgroup__title a:hover { color: var(--sk-primary); }


/* ==========================================================================
   ШАГ 3 (по правкам владельца): баннеры — карусель в один ряд,
   товары — пропорция 3:4, бренды — карусель логотипов
   ========================================================================== */

/* Баннеры: карусель — один ряд, карточки 3:4, прокрутка со снапом */
.sk-rail {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.sk-rail::-webkit-scrollbar { display: none; }
.sk-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

.sk-hero__slide {
	width: 244px;
	height: auto;
	aspect-ratio: 3 / 4;
}

/* Бренды: карусель в один ряд */
.sk-brands, .sk-marks, .sk-brand-rail {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.sk-brands::-webkit-scrollbar, .sk-marks::-webkit-scrollbar, .sk-brand-rail::-webkit-scrollbar { display: none; }
.sk-brands > *, .sk-marks > *, .sk-brand-rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Карточка товара: фото 3:4 (как у samokat.ru) */
.sk-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--sk-radius-card);
	overflow: hidden;
	background: var(--sk-bg-subtle);
}

.sk-card__img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 900px) {
	.sk-hero__slide { width: 210px; }
}


/* Категории: ровно 3 карточки в ряд на любом экране (правка владельца) */
.sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }


/* ПРАВКА ВЛАДЕЛЬЦА: карточки категорий — 3:4 (портрет), 3 в ряд */
.sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.sk-cat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 10px;
  border-radius: 16px;
  background: var(--sk-bg-card);
  box-shadow: var(--sk-shadow-card);
  overflow: hidden;
}

.sk-cat__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 16px 16px 0 0;
  background: var(--sk-bg-subtle);
  overflow: hidden;
  display: block;
}

.sk-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-cat__emoji { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; }
.sk-cat__name { padding: 0 10px; text-align: left; min-height: 0; font-size: 13px; }

@media (max-width: 820px)  { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 520px)  { .sk-cat__name { font-size: 12px; } }


/* ПРАВКА ВЛАДЕЛЬЦА (2): подкатегории на сайте — 5 в один ряд */
.sk-cats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px; }
@media (max-width: 1100px) { .sk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 820px)  { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; } }