/* ============================================================================
 *  components.css — UI-компоненты дизайн-системы
 * ----------------------------------------------------------------------------
 *  Кнопки, карточки, поля ввода, бейджи, шапка, сайдбар, модальные окна,
 *  bottom sheet, skeleton, toast, степпер, метрики, аватары, рейтинг и др.
 *  Подключается после variables.css и base.css.
 * ========================================================================== */

/* ===========================================================================
 *  КНОПКИ
 * ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--color-primary-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}
.btn-primary:active { transform: translateY(0); background: var(--color-primary-dark); }

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 11px 24px;
}
.btn-secondary:hover { background: var(--color-primary-bg); color: var(--color-primary-dark); }

.btn-ghost {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-border); }

.btn-success { background: var(--color-success); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.btn-success:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-danger  { background: var(--color-danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: var(--fs-sm); }

/* Кнопка-иконка */
.btn-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--color-border); transform: scale(1.05); }
.btn-icon.btn-sm { width: 36px; height: 36px; }

/* Пульс при добавлении в корзину */
.btn-added { animation: addedPulse 0.3s ease; }

/* ===========================================================================
 *  КАРТОЧКИ
 * ========================================================================== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-static:hover { transform: none; box-shadow: var(--shadow-card); }
.card-body { padding: var(--space-5); }
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  font-weight: var(--fw-semibold);
}

/* Карточка магазина */
.shop-card { cursor: pointer; }
.shop-card__banner {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
}
.shop-card__banner img { width: 100%; height: 100%; object-fit: cover; }
.shop-card__banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 55%);
}
.shop-card__logo {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  border: 2px solid #fff;
  object-fit: cover; z-index: 1;
  background: #fff;
}
.shop-card__status {
  position: absolute; top: var(--space-3); right: var(--space-3);
  z-index: 1;
}
.shop-card__body { padding: var(--space-4); }
.shop-card__title { font-weight: var(--fw-semibold); color: var(--color-dark); margin-bottom: var(--space-1); }
.shop-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* Карточка товара */
.product-card { position: relative; cursor: pointer; }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__discount {
  position: absolute; top: var(--space-2); left: var(--space-2);
  background: var(--color-danger); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.product-card__fav {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  opacity: 0; transition: var(--transition);
}
.product-card:hover .product-card__fav { opacity: 1; }
.product-card__fav.is-active { color: var(--color-danger); }
.product-card__body { padding: var(--space-3); }
.product-card__title {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-dark); margin-bottom: var(--space-2);
  min-height: 2.5em;
}
.product-card__price { display: flex; align-items: baseline; gap: var(--space-2); }
.product-card__price-now { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-primary); }
.product-card__price-old { font-size: var(--fs-sm); color: var(--color-text-light); text-decoration: line-through; }
.product-card__shop { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.product-card__shop img { width: 20px; height: 20px; border-radius: 50%; }
.product-card__shop span { font-size: var(--fs-xs); color: var(--color-text-muted); }
.product-card__add {
  margin-top: var(--space-3); width: 100%;
  opacity: 1;
}
@media (hover: hover) {
  .product-card__add { opacity: 0; transform: translateY(4px); }
  .product-card:hover .product-card__add { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
 *  ПОЛЯ ВВОДА
 * ========================================================================== */
.input, .textarea, .select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: var(--transition);
  outline: none;
}
.textarea { resize: vertical; min-height: 100px; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-light); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.input.is-error, .textarea.is-error { border-color: var(--color-danger); }
.input:disabled { background: var(--color-surface-2); cursor: not-allowed; }

.field { margin-bottom: var(--space-4); }
.label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text);
}
.field-error { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-danger-text); }
.field-hint  { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Поле с иконкой (например, поиск) */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 44px; }
.input-group__icon {
  position: absolute; left: 14px;
  color: var(--color-text-light);
  display: flex; pointer-events: none;
}

/* ===========================================================================
 *  БЕЙДЖИ
 * ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  line-height: 1;
}
.badge-primary { background: var(--color-primary-bg); color: var(--color-primary); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.badge-neutral { background: var(--color-surface-2);  color: var(--color-text-muted); }

/* ===========================================================================
 *  ШАПКА
 * ========================================================================== */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center;
}
.header__inner {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
.header__logo { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-primary); flex-shrink: 0; }
.header__search { flex: 1; max-width: 560px; }
.header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (max-width: 768px) {
  .header { height: var(--header-height-mobile); }
  .header__search { display: none; }
}

/* ===========================================================================
 *  САЙДБАР (панели продавца/админа)
 * ========================================================================== */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: var(--z-sidebar);
}
.sidebar__logo { padding: var(--space-5); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-primary); }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-2); }
.sidebar__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: var(--transition-fast);
}
.sidebar__link i { font-size: 20px; }
.sidebar__link:hover { background: var(--color-surface-2); color: var(--color-text); }
.sidebar__link.is-active { background: var(--color-primary-bg); color: var(--color-primary); }
.sidebar__wallet {
  margin: var(--space-3); padding: var(--space-4);
  background: var(--color-primary-bg);
  border-radius: var(--radius-md);
}
.sidebar__wallet-label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.sidebar__wallet-amount { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-primary); }
.main { flex: 1; min-width: 0; background: var(--color-bg); }

@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
}

/* ===========================================================================
 *  МОДАЛЬНЫЕ ОКНА
 * ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--color-surface);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn 0.25s cubic-bezier(0.4,0,0.2,1);
}
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}
.modal__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.modal__body { padding: var(--space-5); }
.modal__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  display: flex; gap: var(--space-3); justify-content: flex-end;
}

/* ===========================================================================
 *  BOTTOM SHEET (мобиле)
 * ========================================================================== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end;
  animation: fadeIn 0.2s ease;
}
.sheet {
  background: var(--color-surface);
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: var(--space-5);
  max-height: 85vh; overflow-y: auto;
  animation: sheetUp 0.28s cubic-bezier(0.4,0,0.2,1);
}
.sheet__handle {
  width: 36px; height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
}

/* ===========================================================================
 *  SKELETON-ЗАГРУЗЧИК
 * ========================================================================== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #252540 25%, #2D2D4A 50%, #252540 75%);
  background-size: 200% 100%;
}
.skeleton-text { height: 0.85em; margin-bottom: var(--space-2); }
.skeleton-title { height: 1.2em; width: 60%; margin-bottom: var(--space-3); }
.skeleton-img { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-md); }
.skeleton-circle { border-radius: 50%; }

/* ===========================================================================
 *  TOAST-УВЕДОМЛЕНИЯ
 * ========================================================================== */
.toast-container {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 360px;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-dark); color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toastIn 0.3s ease both;
}
.toast.is-hiding { animation: toastOut 0.3s ease both; }
.toast i { font-size: 20px; flex-shrink: 0; }
.toast-success { background: var(--color-success); }
.toast-danger  { background: var(--color-danger); }
.toast-warning { background: var(--color-warning); color: var(--color-dark); }
.toast-info    { background: var(--color-info); }
@media (max-width: 640px) {
  .toast-container { left: var(--space-4); right: var(--space-4); max-width: none; }
}

/* ===========================================================================
 *  СТЕППЕР (оформление заказа)
 * ========================================================================== */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper__item { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-light); }
.stepper__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.stepper__item.is-active .stepper__dot { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.stepper__item.is-done .stepper__dot { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.stepper__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stepper__item.is-active .stepper__label { color: var(--color-primary); }
.stepper__line { flex: 1; height: 2px; background: var(--color-border); min-width: 24px; }
@media (max-width: 640px) {
  .stepper { flex-direction: column; align-items: flex-start; }
  .stepper__line { width: 2px; height: 16px; min-width: 0; margin-left: 13px; }
}

/* ===========================================================================
 *  МЕТРИКИ ДАШБОРДА
 * ========================================================================== */
.metric {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
.metric__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: var(--color-primary-bg); color: var(--color-primary);
}
.metric__icon--success { background: var(--color-success-bg); color: var(--color-success-text); }
.metric__icon--info    { background: var(--color-info-bg); color: var(--color-info-text); }
.metric__icon--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.metric__value { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color-dark); line-height: 1.1; }
.metric__label { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ===========================================================================
 *  АВАТАР, РЕЙТИНГ, ПЕРЕКЛЮЧАТЕЛЬ, ВКЛАДКИ, ЧИПЫ
 * ========================================================================== */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--color-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semibold); color: var(--color-text-muted);
}
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-sm); }
.avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }

.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating i { color: #FBBF24; font-size: 16px; }
.rating__value { font-weight: var(--fw-semibold); color: var(--color-dark); }
.rating__count { font-size: var(--fs-xs); color: var(--color-text-muted); }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--color-border); border-radius: var(--radius-full);
  transition: var(--transition);
}
.switch__slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: var(--transition);
}
.switch input:checked + .switch__slider { background: var(--color-primary); }
.switch input:checked + .switch__slider::before { transform: translateX(20px); }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 7px 14px; border-radius: var(--radius-full);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text); cursor: pointer;
  transition: var(--transition-fast);
}
.chip:hover { border-color: var(--color-primary); }
.chip.is-active { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }

/* ===========================================================================
 *  СПИННЕР, ПУСТОЕ СОСТОЯНИЕ, ПАГИНАЦИЯ, ВЫПАДАЮЩЕЕ МЕНЮ
 * ========================================================================== */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: var(--color-text-muted); }
.empty-state i { font-size: 48px; color: var(--color-text-light); margin-bottom: var(--space-4); }
.empty-state h3 { color: var(--color-text); margin-bottom: var(--space-2); }

.pagination { display: flex; gap: var(--space-1); justify-content: center; align-items: center; }
.pagination__item {
  min-width: 40px; height: 40px; padding: 0 var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text); transition: var(--transition-fast);
}
.pagination__item:hover { background: var(--color-surface-2); }
.pagination__item.is-active { background: var(--color-primary); color: #fff; }

.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: var(--z-dropdown);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px; padding: var(--space-2);
  animation: fadeInUp 0.18s ease both;
}
.dropdown__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
  color: var(--color-text); transition: var(--transition-fast);
}
.dropdown__item:hover { background: var(--color-surface-2); }

/* Сетка карточек каталога */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ============================================================================
 *  ВИЗУАЛЬНАЯ ОТДЕЛКА  (добавлено последним — сознательно переопределяет блоки выше)
 * ----------------------------------------------------------------------------
 *  Здесь нет ни одного нового класса и ни одной правки разметки: правила цепляются
 *  за те же селекторы, что и раньше. Это важно — всю вёрстку каталога рисует
 *  JavaScript, и любое переименование класса сломало бы страницу. Меняется только
 *  то, как элементы выглядят и как отвечают на действия.
 * ========================================================================== */

/* --- Типографика: плотность заголовков ------------------------------------
 *  Крупный текст с обычным межбуквенным расстоянием выглядит рыхлым. Небольшое
 *  отрицательное значение — то, чем «дорогие» интерфейсы отличаются от шаблонных.
 * ------------------------------------------------------------------------- */
h1 { letter-spacing: -0.028em; }
h2 { letter-spacing: -0.022em; }
h3 { letter-spacing: -0.015em; }

/* Цифры одинаковой ширины: цены в колонке не «пляшут» при смене значений,
   таймеры и суммы не дёргаются. */
.product-card__price-now, .product-card__price-old, .product-price__now, .product-price__old,
.metric__value, .rating, .sidebar__wallet-amount, .cart-row__qty, .badge {
  font-variant-numeric: tabular-nums;
}
.product-card__price-now { font-size: 1.1875rem; letter-spacing: -0.02em; }

::selection { background: rgba(var(--color-primary-rgb), 0.22); }

/* --- Доступность: видимое кольцо фокуса ------------------------------------
 *  Раньше при переходе по Tab не было видно, где находишься. :focus-visible
 *  срабатывает только на клавиатуру — на мышь ореол не появляется.
 * ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
.card:focus-visible, .tab:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-md);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  box-shadow: var(--ring);
}

/* --- Шапка -----------------------------------------------------------------
 *  Полупрозрачная с размытием: контент «проезжает» под ней, а не упирается в
 *  глухую белую плашку. Волосяная линия вместо тени — тень под липкой шапкой
 *  выглядит как артефакт, когда страница не прокручена.
 * ------------------------------------------------------------------------- */
.header {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none;
  border-bottom: 1px solid var(--color-border-light);
}
/* Старые браузеры без color-mix/backdrop-filter получают обычный непрозрачный фон */
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--color-surface); }
}
.header__logo { letter-spacing: -0.03em; font-size: 1.3125rem; }
.header__actions .btn-icon {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.header__actions .btn-icon:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
  transform: none;
}

/* --- Карточки --------------------------------------------------------------
 *  Подъём был 4px + резкая тень — карточка «прыгала». 2px с доводчиком читается
 *  как отклик, а не как анимация. Плюс лёгкий зум картинки: приём каталогов,
 *  который делает сетку живой, ничего не сдвигая (зум внутри overflow:hidden).
 * ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--color-border-light);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}
.card:active { transform: translateY(0); transition-duration: 0.06s; }

.product-card__media img, .shop-card__banner img {
  transition: transform 0.45s var(--ease-out);
}
.product-card:hover .product-card__media img,
.shop-card:hover .shop-card__banner img { transform: scale(1.045); }

/* Медиа-область карточки — это ссылка <a>, а у неё по умолчанию display:inline.
   На строчных элементах НЕ РАБОТАЮТ ни aspect-ratio, ни overflow:hidden — то есть
   заданный в блоке выше квадрат 1:1 не применялся никогда, и картинка растягивала
   карточку на свою высоту. Видно это было на главной во вкладке «Каталог товаров»
   и в блоке «Популярное»: у карточек разъезжалась высота, а название и цена
   уезжали за нижний край. На странице магазина порядок только потому, что там
   display:block прописан прямо в разметке. Одна строка чинит обе сетки —
   и заодно включает обрезку при увеличении картинки по наведению. */
.product-card__media { display: block; background: var(--color-surface-2); }

.product-card__title { line-height: 1.35; }
.product-card__body { padding: var(--space-4) var(--space-3) var(--space-3); }
.shop-card__title { font-size: 1.0625rem; letter-spacing: -0.015em; }

/* Кнопка «в корзину» больше не прячется целиком: на десктопе она была видна
   только при наведении — пользователь не знал, что товар можно добавить, не
   открывая карточку. Теперь она приглушена и проявляется при наведении. */
@media (hover: hover) {
  /* Кнопка видна всегда и в полную силу. Изначально она появлялась только при
     наведении — покупатель не знал, что товар можно положить в корзину, не
     открывая карточку. Приглушать её тоже нельзя: залитая оранжевым кнопка
     в полупрозрачности читается как «недоступна». */
  .product-card__add { opacity: 1; transform: none; }
}

/* --- Кнопки ----------------------------------------------------------------
 *  Оранжевое свечение под кнопкой убрано в токенах; здесь — движение и нажатие.
 * ------------------------------------------------------------------------- */
.btn { transition: background 0.18s ease, color 0.18s ease, box-shadow 0.22s var(--ease-out), transform 0.14s var(--ease-out); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.24), 0 10px 24px -6px rgba(var(--color-primary-rgb), 0.38); }
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-secondary { border-width: 1.5px; }
.btn-secondary:active, .btn-ghost:active { transform: scale(0.985); }

/* --- Чипы и бейджи ---------------------------------------------------------
 *  Чип — это фильтр: он должен выглядеть нажимаемым, а не подписью.
 * ------------------------------------------------------------------------- */
.chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: var(--transition-fast);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.chip.is-active { border-color: var(--color-primary); }
.badge { letter-spacing: 0.005em; }

/* --- Поля ввода ------------------------------------------------------------ */
.input, .textarea, .select { border-width: 1px; background: var(--color-surface-2); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-light); }
.input:focus, .textarea:focus, .select:focus { background: var(--color-surface); box-shadow: var(--ring); }

/* --- Сетки -----------------------------------------------------------------
 *  180px на десктопе давали до 7 колонок на широком экране: карточка уже, чем
 *  её собственный заголовок в две строки. 210px — 5–6 колонок и читаемое имя.
 *  minmax(0,1fr) вместо 1fr: у 1fr пол — min-content, из-за чего длинное слово
 *  или картинка распирают колонку и сетка вылезает за край экрана.
 * ------------------------------------------------------------------------- */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Заголовки разделов ---------------------------------------------------- */
.section-head h2 { font-size: 1.375rem; }
.section-head { margin-top: var(--space-10); }

/* --- Скелетоны -------------------------------------------------------------
 *  Мягче и медленнее: быстрый контрастный блик выглядит как ошибка отрисовки.
 * ------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 25%,
    color-mix(in srgb, var(--color-surface-2) 55%, var(--color-surface)) 50%,
    var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.9s ease-in-out infinite;
}

/* --- Полоса прокрутки (десктоп) -------------------------------------------- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; border: 3px solid var(--color-bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }
}

/* --- Уважение к системной настройке «меньше движения» ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Панель действий магазина ----------------------------------------------
 *  Было: четыре-пять одинаковых оранжевых контурных кнопок в ряд, переносящихся
 *  на вторую строку. Все кричат одинаково громко — глазу не за что зацепиться.
 *  Стало: главное действие («Забронировать стол», «Позвонить») — заливкой,
 *  остальное — спокойные вторичные кнопки с волосяной рамкой.
 * ------------------------------------------------------------------------- */
.shop-toolbar { gap: var(--space-2); align-items: center; }
.shop-toolbar .btn-secondary {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
}
.shop-toolbar .btn-secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-text-light);
  color: var(--color-dark);
}
.shop-toolbar .btn-secondary i { color: var(--color-text-muted); }
.shop-toolbar .btn-secondary:hover i { color: var(--color-primary); }

/* --- Вкладки ---------------------------------------------------------------- */
.tabs { gap: var(--space-1); }
.tab { transition: color 0.16s ease, border-color 0.16s ease; }

/* --- Заголовок главной на телефоне -----------------------------------------
 *  На узком экране он занимал три строки и отодвигал каталог за первый экран.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  main > h1:first-of-type { font-size: 1.0625rem !important; line-height: 1.3; margin-bottom: var(--space-4) !important; }
  .shop-hero__info { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
}

/* --- Хлебные крошки --------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--space-4); }
.breadcrumbs a { color: var(--color-text-muted); transition: color 0.15s ease; }

/* --- Подвал ------------------------------------------------------------------ */
.pub-footer { border-top: 1px solid var(--color-border-light); }
.pub-footer a { transition: color 0.15s ease; }