/* ============================================================================
   AleksFurs — слой компонентов.

   Порядок подключения: tokens → app (сброс, типографика, шапка) → components →
   pages (раскладки страниц). Чем специфичнее слой, тем позже он подключается:
   страница вправе поправить компонент, компонент — базу, но не наоборот.

   Правила слоя:
   1. Ни одного сырого числа: размеры, отступы, цвета и длительности — из токенов.
   2. У каждого интерактивного компонента шесть состояний:
      default / hover / active / focus-visible / disabled / loading.
   3. Фокус виден всегда. Обводка не снимается ни у одного элемента.
   4. transition вешается на конкретные свойства: `all` поверх переменной темы
      оставляет залипший цвет при переключении светлой и тёмной.
   5. Зона нажатия интерактивного элемента — не меньше --tap-min.
   ========================================================================= */

/* ── Видимый фокус ────────────────────────────────────────────────────────
   Один приём на все компоненты: двойное кольцо читается и на светлом фоне,
   и на цветной подложке кнопки. */
.btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.icon-btn:focus-visible,
.pill:focus-visible,
.chip:focus-visible,
.size-chip:has(input:focus-visible),
.tab:focus-visible,
.pagination__num:focus-visible,
.pagination__btn:focus-visible,
.card a:focus-visible,
.delivery:has(input:focus-visible),
.check:has(input:focus-visible) {
  outline: 2px solid var(--color-accent-ink, #FF5A6B);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── Кнопки ───────────────────────────────────────────────────────────────
   Прописной узкий гротеск с разрядкой, прямые углы. Кнопка — это заявление,
   а не приглашение, поэтому без мягких теней и скруглений. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2, 8px);
  min-height: var(--tap-min, 44px);
  padding: var(--space-3, 12px) var(--space-6, 24px);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0);
  background: var(--color-accent, #C8102E);
  color: var(--color-on-accent, #ffffff);
  font-family: var(--font-display, 'Arial Narrow', Arial, sans-serif);
  font-size: var(--text-base, 16px);
  line-height: 1.1;
  font-weight: var(--weight-medium, 500);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center; cursor: pointer;
  transition: background-color var(--duration-fast, 120ms) var(--ease, ease),
              border-color var(--duration-fast, 120ms) var(--ease, ease),
              color var(--duration-fast, 120ms) var(--ease, ease),
              box-shadow var(--duration-fast, 120ms) var(--ease, ease),
              transform var(--duration-fast, 120ms) var(--ease, ease),
              opacity var(--duration-fast, 120ms) var(--ease, ease);
}
.btn:hover { background: var(--color-accent-hover, #A50C25); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
  pointer-events: none;
}
.btn svg { width: 19px; height: 19px; flex: none; }

/* Загрузка: ширина кнопки не должна прыгать, иначе макет дёргается под пальцем. */
.btn[aria-busy="true"],
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"] > *,
.btn.is-loading > * { visibility: hidden; }
.btn[aria-busy="true"]::after,
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--color-on-accent, #fff) 30%, transparent);
  border-top-color: var(--color-on-accent, #ffffff);
  border-radius: var(--radius-full, 999px);
  animation: spin .7s linear infinite;
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong, #948370);
  color: var(--color-text, #1d1815);
}
.btn--ghost:hover {
  background: var(--color-text, #F4F1EC);
  border-color: var(--color-text, #F4F1EC);
  color: var(--color-bg, #0A0A0B);
}
.btn--ghost[aria-busy="true"]::after,
.btn--ghost.is-loading::after {
  border-color: color-mix(in srgb, var(--color-text, #1d1815) 25%, transparent);
  border-top-color: var(--color-text, #1d1815);
}

.btn--dark { background: var(--color-text, #F4F1EC); color: var(--color-bg, #0A0A0B); }
.btn--dark:hover { background: var(--color-text-muted, #BDB8B0); }

.btn--gold { background: var(--color-gold, #8a6a34); color: var(--color-on-gold, #ffffff); }
.btn--gold:hover { background: var(--color-gold, #8a6a34); filter: brightness(.9); }

.btn--danger { background: var(--color-danger, #a32c2c); color: var(--color-on-danger, #ffffff); }
.btn--danger:hover { background: var(--color-danger, #a32c2c); filter: brightness(.9); }

/* Размеры. Малый вариант — единственный, кому разрешено быть ниже зоны нажатия:
   он живёт в плотных таблицах панели, где палец не основной способ ввода. */
.btn--sm {
  min-height: 36px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-sm, 14px);
  border-radius: var(--radius-sm, 6px);
}
.btn--lg {
  min-height: 56px;
  padding: var(--space-4, 16px) var(--space-8, 32px);
  font-size: var(--text-lg, 20px);
}
.btn--block { width: 100%; }

/* ── Поля ввода ───────────────────────────────────────────────────────────*/
.field { display: block; margin-bottom: var(--space-4, 16px); }
.field__label {
  display: block;
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-muted, #4a423b);
  margin-bottom: var(--space-2, 8px);
}
.field__label .req { color: var(--color-accent-ink, #FF5A6B); }
.field__hint {
  font-size: var(--text-xs, 12px); line-height: var(--leading-xs, 1.4);
  color: var(--color-text-subtle, #6f635a);
  margin-top: var(--space-1, 4px);
}
.field__err {
  display: flex; align-items: flex-start; gap: var(--space-1, 4px);
  font-size: var(--text-xs, 12px); line-height: var(--leading-xs, 1.4);
  color: var(--color-danger, #a32c2c);
  font-weight: var(--weight-medium, 500);
  margin-top: var(--space-1, 4px);
}
/* Иконка без явного размера во flex-строке растягивается на всю доступную
   высоту — в витрине это дало предупреждение во весь экран. */
.field__err svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap-min, 44px);
  padding: var(--space-3, 12px) var(--space-3, 12px);
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border-strong, #948370);
  border-radius: var(--radius-md, 10px);
  color: var(--color-text, #1d1815);
  font-size: var(--text-base, 16px);
  line-height: var(--leading-sm, 1.45);
  transition: border-color var(--duration-fast, 120ms) var(--ease, ease),
              box-shadow var(--duration-fast, 120ms) var(--ease, ease),
              background-color var(--duration-fast, 120ms) var(--ease, ease);
}
.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: var(--color-text-subtle, #6f635a); }

/* Поле в фокусе подсвечивается кольцом, а не только цветом границы:
   на цветовую разницу полагаться нельзя. */
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-accent-ink, #FF5A6B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #8c2f39) 18%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle, #6f635a); }

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-bg-muted, #f3ede6);
  color: var(--color-text-subtle, #6f635a);
  cursor: not-allowed;
  border-color: var(--color-border, #e6ddd2);
}
.input:read-only:not(:disabled) { background: var(--color-surface-muted, #fbf8f5); }

/* Ошибка помечается и цветом, и атрибутом — читалка объявит её вслух. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger, #a32c2c);
  background: var(--color-danger-soft, #fbecec);
}
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #a32c2c) 18%, transparent);
}

.textarea { min-height: 96px; resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--space-8, 32px);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f635a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3, 12px) center;
}
.select:disabled { cursor: not-allowed; }

/* ── Флажки и переключатели ───────────────────────────────────────────────*/
.check {
  display: flex; gap: var(--space-3, 12px); align-items: flex-start;
  /* Зона нажатия по всей строке: попасть в квадратик 17px пальцем нельзя. */
  min-height: var(--tap-min, 44px);
  padding: var(--space-2, 8px) 0;
  cursor: pointer;
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
}
.check input {
  margin: 2px 0 0; width: 20px; height: 20px; flex: none;
  accent-color: var(--color-accent, #8c2f39);
  cursor: pointer;
}
.check input:disabled { cursor: not-allowed; }
.check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.check--inline { min-height: 0; padding: 0; }

.row {
  display: grid; gap: var(--space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ── Чипы и бейджи ────────────────────────────────────────────────────────*/
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.pill, .chip {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  min-height: 36px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
  border: 1px solid var(--color-border-strong, #948370);
  border-radius: var(--radius-sm, 0);
  background: transparent;
  color: var(--color-text-muted, #BDB8B0);
  cursor: pointer;
  letter-spacing: .04em;
  transition: background-color var(--duration-fast, 120ms) var(--ease, ease),
              border-color var(--duration-fast, 120ms) var(--ease, ease),
              color var(--duration-fast, 120ms) var(--ease, ease);
}
.pill:hover, .chip:hover {
  border-color: var(--color-text-subtle, #6f635a);
  color: var(--color-text, #1d1815);
}
.pill:active, .chip:active { background: var(--color-bg-muted, #f3ede6); }
.pill.is-active, .chip.is-active {
  background: var(--color-accent, #8c2f39);
  border-color: var(--color-accent, #8c2f39);
  color: var(--color-on-accent, #ffffff);
}
.pill[aria-disabled="true"], .chip[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}
.pill--reset { border-style: dashed; }

/* Метка на карточке — не интерактивна, поэтому без состояний.
   Прямоугольник прописными: лежит на белой фотографии в любой теме сайта. */
.tag {
  display: inline-flex; align-items: center;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--text-xs, 12px); line-height: 1.2;
  font-weight: var(--weight-semi, 600);
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--radius-sm, 0);
  background: var(--photo-ink, #0A0A0B);
  color: var(--photo-paper, #F4F1EC);
}
.tag--sale { background: var(--color-accent, #C8102E); color: var(--color-on-accent, #fff); }
.tag--new  { background: var(--photo-ink, #0A0A0B);   color: var(--photo-paper, #F4F1EC); }
.tag--out  { background: var(--photo-paper, #F4F1EC); color: var(--photo-ink, #0A0A0B); }
.tag--hit  { background: var(--color-gold, #D4B27A);  color: var(--color-on-gold, #111); }

.status {
  display: inline-flex; align-items: center; gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 0);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: var(--text-xs, 12px); line-height: var(--leading-xs, 1.4);
  font-weight: var(--weight-medium, 500);
}
.status--ok   { background: var(--color-success-soft, #eaf3ee); color: var(--color-success, #2f6f4f); }
.status--warn { background: var(--color-warning-soft, #fbf2e2); color: var(--color-warning, #8a5e14); }
.status--err  { background: var(--color-danger-soft, #fbecec);  color: var(--color-danger, #a32c2c); }

/* ── Табы ─────────────────────────────────────────────────────────────────*/
.tabs {
  display: flex; gap: var(--space-1, 4px);
  border-bottom: 1px solid var(--color-border, #e6ddd2);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-2, 8px);
  min-height: var(--tap-min, 44px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: none; background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-muted, #BDB8B0);
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
  letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: color var(--duration-fast, 120ms) var(--ease, ease),
              border-color var(--duration-fast, 120ms) var(--ease, ease),
              background-color var(--duration-fast, 120ms) var(--ease, ease);
}
.tab:hover { color: var(--color-text, #1d1815); background: var(--color-bg-muted, #f3ede6); }
.tab[aria-selected="true"], .tab.is-active {
  color: var(--color-accent-ink, #FF5A6B);
  border-bottom-color: var(--color-accent, #8c2f39);
  font-weight: var(--weight-medium, 500);
}
.tab[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Таблицы ──────────────────────────────────────────────────────────────*/
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
}
.table th {
  text-align: left;
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-2, 8px) 0;
  font-size: var(--text-xs, 12px); line-height: var(--leading-xs, 1.4);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-subtle, #6f635a);
  font-weight: var(--weight-semi, 600);
  border-bottom: 1px solid var(--color-border, #e6ddd2);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--color-border, #e6ddd2);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--duration-fast, 120ms) var(--ease, ease); }
.table tbody tr:hover { background: var(--color-surface-muted, #fbf8f5); }
.table tr.is-off { opacity: .55; }

/* ── Пагинация ────────────────────────────────────────────────────────────*/
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--space-1, 4px);
  align-items: center; justify-content: center;
  margin: var(--space-8, 32px) 0 var(--space-2, 8px);
}
.pagination__num, .pagination__btn {
  font-family: var(--font-display, 'Arial Narrow', Arial, sans-serif);
  letter-spacing: .06em;
  min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px);
  padding: 0 var(--space-3, 12px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #ffffff);
  color: var(--color-text-muted, #4a423b);
  font-size: var(--text-sm, 14px);
  transition: background-color var(--duration-fast, 120ms) var(--ease, ease),
              border-color var(--duration-fast, 120ms) var(--ease, ease),
              color var(--duration-fast, 120ms) var(--ease, ease);
}
.pagination__num:hover, .pagination__btn:hover {
  border-color: var(--color-text-subtle, #6f635a);
  color: var(--color-text, #1d1815);
}
.pagination__num:active, .pagination__btn:active { background: var(--color-bg-muted, #f3ede6); }
.pagination__num.is-active {
  background: var(--color-accent, #8c2f39);
  border-color: var(--color-accent, #8c2f39);
  color: var(--color-on-accent, #ffffff);
  font-weight: var(--weight-semi, 600);
}
.pagination__gap { padding: 0 var(--space-1, 4px); color: var(--color-text-subtle, #6f635a); }

/* ── Уведомления и пустые состояния ───────────────────────────────────────*/
.notice {
  display: flex; gap: var(--space-3, 12px); align-items: flex-start;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-muted, #fbf8f5);
  font-size: var(--text-sm, 14px); line-height: var(--leading-sm, 1.45);
}
.notice svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.notice--ok {
  background: var(--color-success-soft, #eaf3ee);
  border-color: color-mix(in srgb, var(--color-success, #2f6f4f) 30%, transparent);
}
.notice--warn {
  background: var(--color-warning-soft, #fbf2e2);
  border-color: color-mix(in srgb, var(--color-warning, #8a5e14) 32%, transparent);
}
.notice--err {
  background: var(--color-danger-soft, #fbecec);
  border-color: color-mix(in srgb, var(--color-danger, #a32c2c) 32%, transparent);
}

.empty { text-align: center; padding: var(--space-16, 64px) var(--space-4, 16px); }
.empty__art { font-size: var(--text-3xl, 40px); margin-bottom: var(--space-3, 12px); opacity: .5; }
.empty h3 { margin-bottom: var(--space-2, 8px); }

/* Состояние ошибки страницы — отличается от уведомления тем, что занимает экран. */
.state-error {
  display: grid; gap: var(--space-3, 12px); justify-items: center;
  text-align: center; padding: var(--space-16, 64px) var(--space-4, 16px);
}
.state-error__code {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--text-3xl, 40px);
  color: var(--color-border-strong, #948370);
  line-height: 1;
}

/* ── Загрузка ─────────────────────────────────────────────────────────────*/
.spinner {
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: var(--radius-full, 999px);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-muted, #f3ede6) 25%,
    var(--color-border, #e6ddd2) 37%,
    var(--color-bg-muted, #f3ede6) 63%);
  background-size: 400% 100%;
  animation: shimmer calc(var(--duration-slow, 500ms) * 2.6) ease-in-out infinite;
  border-radius: var(--radius-md, 10px);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.skeleton--text { height: 1em; margin-bottom: var(--space-2, 8px); }
.skeleton--title { height: 1.4em; width: 60%; margin-bottom: var(--space-3, 12px); }
.skeleton--media { aspect-ratio: 3/4; width: 100%; }

/* Читалка не должна зачитывать полосы загрузки как содержимое. */
.skeleton[aria-hidden="true"] { pointer-events: none; }

/* ── Утилиты вместо инлайн-стилей ─────────────────────────────────────────
   Раньше эти объявления писались прямо в разметке (87 мест). Инлайн-стиль
   бьёт любой слой оформления и не переключается вместе с темой. */
.u-mt-0  { margin-top: 0; }
.u-mt-1  { margin-top: var(--space-1, 4px); }
.u-mt-2  { margin-top: var(--space-2, 8px); }
.u-mt-3  { margin-top: var(--space-3, 12px); }
.u-mt-4  { margin-top: var(--space-4, 16px); }
.u-mt-6  { margin-top: var(--space-6, 24px); }
.u-mb-0  { margin-bottom: 0; }
.u-mb-2  { margin-bottom: var(--space-2, 8px); }
.u-mb-3  { margin-bottom: var(--space-3, 12px); }
.u-mb-4  { margin-bottom: var(--space-4, 16px); }
.u-ml-auto { margin-left: auto; }
.u-w-full  { width: 100%; }
.u-measure { max-width: 62ch; }
.u-measure-sm { max-width: 34ch; }
.u-text-accent { color: var(--color-accent-ink, #FF5A6B); }
.u-text-ok     { color: var(--color-success, #2f6f4f); }
.u-text-warn   { color: var(--color-warning, #8a5e14); }
.u-text-err    { color: var(--color-danger, #a32c2c); }
.u-flush { margin: 0; }
/* Длинное название товара обрезается, а не распирает колонку. */
.u-truncate {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.u-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Плотный вертикальный ритм внутри формы: раньше задавался инлайн как --gap. */
.stack--tight { --gap: var(--space-3, 12px); }
.stack--loose { --gap: var(--space-6, 24px); }

/* Миниатюра товара в строке заказа или панели. */
.thumb {
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
  background: var(--color-bg-muted, #f3ede6);
}

.u-center-x { display: flex; justify-content: center; }
.u-items-end { align-items: end; }
.u-pull-up { margin-top: calc(var(--space-2, 8px) * -1); }
.u-col-narrow { width: 38%; }
.u-mb-6 { margin-bottom: var(--space-6, 24px); }

/* ── Заголовки и ширины страниц ───────────────────────────────────────────
   Раньше задавались инлайн: font-size:19px/20px и max-width в разметке. */
.panel__title {
  font-size: var(--text-lg, 20px);
  line-height: var(--leading-lg, 1.35);
  font-family: var(--font-display, Georgia, serif);
  font-weight: var(--weight-semi, 600);
  margin-bottom: var(--space-3, 12px);
}
.u-text-lg { font-size: var(--text-lg, 20px); line-height: var(--leading-lg, 1.35); }

.page--narrow   { max-width: 560px; }
.page--readable { max-width: 760px; }
.page--mid      { max-width: 920px; }
.page--wide     { max-width: 1000px; }

/* ── Витрина дизайн-системы ───────────────────────────────────────────────*/
.uikit { padding-bottom: var(--space-16, 64px); }
.uikit__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6, 24px); flex-wrap: wrap;
  margin-bottom: var(--space-8, 32px);
}
.uikit__section { margin-bottom: var(--space-8, 32px); }
.uikit__row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-4, 16px); align-items: center;
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--color-border, #e6ddd2);
}
.uikit__row:last-child { border-bottom: none; }
.uikit__demo { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
.uikit__scale { display: grid; gap: var(--space-2, 8px); margin-bottom: var(--space-6, 24px); }
.uikit__scale-item { display: flex; align-items: center; gap: var(--space-3, 12px); }
.uikit__bar { height: 12px; background: var(--color-accent, #8c2f39); border-radius: var(--radius-sm, 6px); }
.uikit__type { display: grid; gap: var(--space-3, 12px); }
.uikit__type-item { display: flex; align-items: baseline; gap: var(--space-4, 16px); flex-wrap: wrap; }
.uikit__swatches {
  display: grid; gap: var(--space-2, 8px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.uikit__swatch {
  display: grid; gap: var(--space-1, 4px);
  padding: var(--space-4, 16px);
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: var(--radius-md, 10px);
}
.uikit__swatch b { font-size: var(--text-lg, 20px); }
@media (max-width: 768px) {
  .uikit__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2, 8px); }
}

/* ── Зона нажатия на сенсорных экранах ────────────────────────────────────
   Палец не попадает в 32 пикселя. Но раздувать саму кнопку не нужно:
   псевдоэлемент растягивает область нажатия до 44×44, а выглядит элемент
   по-прежнему компактно. Правило включается только там, где указатель
   грубый — на мыши компактность важнее. */
@media (pointer: coarse) {
  /* Избранное и «Увеличить» уже стоят абсолютно поверх фото — это и так
     опора для расширителя. Прежнее `position: relative` здесь перебивало
     слой базы (он подключён раньше), и на телефоне сердечко выпадало
     из угла фотографии под неё, в поток карточки. */
  .line__del,
  .btn--sm,
  .qty__btn,
  .toast__close {
    position: relative;
  }
  .fav::after,
  .gallery__zoom::after,
  .line__del::after,
  .btn--sm::after,
  .qty__btn::after,
  .toast__close::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, var(--tap-min, 44px));
    height: max(100%, var(--tap-min, 44px));
    transform: translate(-50%, -50%);
  }
  /* Внутри строки корзины кнопки стоят рядом: расширенные зоны не должны
     перекрывать друг друга, иначе промах превратится в чужое действие. */
  .line__qty { gap: var(--space-1, 4px); }
}

/* ── Блокировка прокрутки под оверлеем ────────────────────────────────────
   Без компенсации ширины полосы прокрутки страница дёргается вбок в момент
   открытия: полоса исчезает, и содержимое становится шире. */
body.is-scroll-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
}
/* Шапка зафиксирована и живёт вне потока — её нужно сдвинуть отдельно. */
body.is-scroll-locked .header { padding-right: var(--scrollbar-gap, 0px); }

/* Счётчик кадров в полноэкранном просмотре */
.lightbox__counter {
  position: absolute; left: 50%; bottom: var(--space-6, 24px);
  transform: translateX(-50%);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: rgba(255, 255, 255, .14);
  border-radius: var(--radius-full, 999px);
  color: #fff; font-size: var(--text-sm, 14px);
  font-variant-numeric: tabular-nums;
}