/* ==========================================================================
   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;
	--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-cartpanel,
.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-cartpanel__head,
.sk-card-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 16px 16px 8px;
}

.sk-cartpanel__title,
.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-cartpanel__count { margin-left: auto; color: var(--sk-ink-muted); font-size: 13px; }

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

.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; }

/* --------------------------------------------------------------------------
   Корзина в правой панели (§16.2, §17)
   -------------------------------------------------------------------------- */

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

.sk-cartline {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 10px 0;
	border-bottom: 1px solid var(--sk-border);
}

.sk-cartline:last-of-type { border-bottom: 0; }

.sk-cartline__media {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--sk-radius-xs);
	background: var(--sk-bg-page);
	overflow: hidden;
}

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

.sk-cartline__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-cartline__name { font-size: 14px; line-height: 1.25; color: var(--sk-ink); }
.sk-cartline__meta { color: var(--sk-ink-muted); font-size: 12px; }
.sk-cartline__sum { font-size: 14px; font-weight: 600; white-space: nowrap; }

.sk-cartline__remove {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

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

.sk-cartpanel__foot {
	flex: none;
	padding: 12px 16px 16px;
	border-top: 1px solid var(--sk-border);
}

.sk-cartpanel__note { margin: 8px 0 0; color: var(--sk-ink-muted); font-size: 12px; text-align: center; }

/* Пилюля действия/минимума заказа (§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; }

.sk-hero__slide {
	position: relative;
	width: 320px;
	height: 180px;
	border-radius: var(--sk-radius-card);
	overflow: hidden;
	background: var(--sk-bg-subtle);
}

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

.sk-hero__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

/* 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; }

/* --------------------------------------------------------------------------
   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-body .container { max-width: none; }   /* полная ширина, как и .sk-container */
.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: 260px; height: 146px; }
	.sk-aside { width: 100%; }
}

@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; }
}