/* ===================================================================
   KonsolOyun.az — клеевой слой поверх дизайн-токенов вёрстки.
   Здесь только правки для интеграции с OpenCart (формы, корзина,
   страницы аккаунта/чекаута), которых нет в исходной вёрстке.
   Базовый дизайн живёт в tokens/base/components/pages.css.
   =================================================================== */

/* ── Изоляция витрины: body/container не должны перебиваться сторонними CSS ── */
body {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
.container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}
@media (max-width: 480px) {
  .container { padding-inline: var(--gutter) !important; }
}
/* Veltoo-оверлей body::before не используется в новой шапке */
body::before { content: none !important; display: none !important; }

/* ── Шапка: data-glyph вместо прямого svg (селекторы .nav-link > svg в components.css) ── */
.nav-link > [data-glyph] { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-link > [data-glyph] svg {
  width: 15px; height: 15px; color: var(--text-faint);
  transition: transform var(--t-fast);
}
.has-mega:hover .nav-link > [data-glyph] svg,
.has-mega.is-open .nav-link > [data-glyph] svg { transform: rotate(180deg); }
@media (max-width: 1024px) {
  .nav-link > [data-glyph] { margin-left: auto; }
  .has-mega.is-open > .nav-link > [data-glyph] svg { color: inherit; }
}

/* На время переноса: нейтрализуем остатки утилит Tailwind/Veltoo,
   которые могли остаться в ещё не переведённых шаблонах. */
.mx-auto { margin-inline: auto; }

/* ── Каталог: glue поверх дизайна вёрстки ── */
.is-hidden { display: none !important; }

.section-title--page { margin: 0 0 var(--space-4, 16px); font-size: clamp(1.4rem, 3vw, 2rem); }

.category-desc { margin-bottom: var(--space-4, 16px); color: var(--c-muted, #94a3b8); }

.catalog-main { min-width: 0; }

.filters__apply { width: 100%; margin-top: var(--space-3, 12px); justify-content: center; }

.filters__reset { background: none; border: 0; cursor: pointer; color: var(--c-primary, #6366f1); font: inherit; text-decoration: none; }

.filters__empty { color: var(--c-muted, #94a3b8); font-size: .9rem; }

/* Нативный селект сортировки в стиле кнопок тулбара */
.ko-sort {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 14px;
  border: 1px solid var(--c-border, #2a2f3a);
  border-radius: var(--radius-md, 10px);
  background: var(--c-surface, #161a22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--c-text, #e5e7eb);
  font: inherit;
  cursor: pointer;
}
.ko-sort:focus { outline: 2px solid var(--c-primary, #6366f1); outline-offset: 1px; }

.empty-state { padding: var(--space-6, 24px) 0; display: grid; gap: var(--space-4, 16px); justify-items: start; }

/* ── Рейтинг-звёзды (нативные отзывы) ── */
.pm-rate { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.pm-rate__count { font-size: .85rem; color: var(--c-muted, #94a3b8); }
.stars { display: inline-flex; gap: 2px; }
.stars .star { width: 16px; height: 16px; color: var(--c-border, #2a2f3a); display: inline-flex; }
.stars .star svg { width: 100%; height: 100%; }
.stars .star.is-on { color: #f5a623; }