/* ===================================================================
   Компоненты интерфейса
   (версия ассетов сбрасывается автоматически хуком после правок CSS/JS)
   =================================================================== */

/* ---------- Кнопки ---------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--border);
  transition: transform var(--t-fast), background var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn--primary {
  --btn-bg: var(--brand-yellow);
  --btn-fg: var(--on-yellow);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(255, 210, 30, 0.25);
}
.btn--primary:hover { background: var(--brand-yellow-bright); box-shadow: 0 10px 26px rgba(255, 210, 30, 0.4); }

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

.btn--red { --btn-bg: var(--accent-red); --btn-fg: #fff; border-color: transparent; }
.btn--red:hover { background: var(--accent-red-deep); }

.btn--blue { --btn-bg: var(--accent-blue); --btn-fg: #fff; border-color: transparent; }
.btn--blue:hover { background: var(--accent-blue-deep); }
.btn--whatsapp { --btn-bg: #25D366; --btn-fg: #fff; border-color: transparent; }
.btn--whatsapp:hover { background: #1eb858; }

.btn--sm { padding: 8px 16px; font-size: 0.85rem; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 11px; aspect-ratio: 1; border-radius: var(--r-md); }

/* ---------- Бейджи / чипы ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text);
}
.badge--new { background: var(--accent-red); color: #fff; }
.badge--sale { background: var(--brand-yellow); color: var(--on-yellow); }
.badge--rent { background: var(--accent-blue); color: #fff; }
.badge--used { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.badge--platform { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--t-fast);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--brand-yellow);
  color: var(--on-yellow);
  border-color: transparent;
}

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* матовое стекло: вверху плотнее, ниже прозрачнее — как в bircinema/okko */
  background: linear-gradient(180deg, rgba(13, 14, 16, 0.96), rgba(13, 14, 16, 0.72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  /* авто-скрытие при скролле (как в bircinema) */
  transition: border-color 0.3s, background 0.3s, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { background: rgba(13, 14, 16, 0.94); border-bottom-color: var(--border); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 10px; margin-left: clamp(20px, 3vw, 56px); }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  transition: var(--t-fast);
  cursor: pointer;
}
.nav-link:hover { background: var(--surface-2); }
.nav-link__ic { display: inline-flex; }
.nav-link__ic svg, .nav-link__ic .ui-png { width: 20px; height: 20px; }
.ui-png { object-fit: contain; display: inline-block; vertical-align: middle; }
.nav-link > svg { width: 15px; height: 15px; color: var(--text-faint); transition: transform var(--t-fast); }
.has-mega:hover .nav-link > svg, .has-mega.is-open .nav-link > svg { transform: rotate(180deg); }

/* цвета бренд-иконок платформ */
.plat-ic--playstation { color: #4f93ff; }
.plat-ic--xbox { color: #6fbf3a; }
.plat-ic--nintendo { color: #ff5a5a; }

/* мега-меню */
.mega {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 440px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 120;
  overflow: hidden;
}
.has-mega:hover .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* широкий невидимый «мостик» поверх зазора — курсор не теряет hover (без дёрганья) */
.mega::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
/* постоянный мостик от кнопки (работает даже до открытия меню) */
.has-mega::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; z-index: 119;
}
.mega__cols { display: flex; gap: 32px; position: relative; z-index: 1; }
.mega__col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 12px; }
.mega__col a { display: block; padding: 7px 0; color: var(--text); font-weight: 600; font-size: 0.95rem; transition: var(--t-fast); }
.mega__col a:hover { color: var(--brand-yellow); }
.mega__all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px;
  color: var(--accent-blue); font-weight: 700; font-size: 0.92rem;
  position: relative; z-index: 1;
}
.mega__all svg { width: 16px; height: 16px; }
.mega__all:hover { color: var(--brand-yellow); }
.mega__wm {
  position: absolute;
  right: -18px; bottom: -8px;
  opacity: 0.07;
  pointer-events: none;
}
/* размер по высоте (ширина авто) — PS/Nintendo/Xbox разной пропорции, но одной высоты */
.mega__wm svg, .mega__wm .ui-png { height: 132px; width: auto; }

/* поиск в шапке */
/* WhatsApp в шапке (номер + иконка) */
.header-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;          /* прижимает WhatsApp + действия вправо */
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  transition: var(--t-fast);
}
.header-wa:hover { background: var(--surface-2); border-color: var(--border-strong); }
.header-wa__ic {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: #fff;
}
.header-wa__ic svg { width: 22px; height: 22px; }
/* в светлой теме иконка WhatsApp — фирменный зелёный (белая на светлом не видна) */
[data-theme="light"] .header-wa__ic { color: #25D366; }
.header-wa__num { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

/* Раскрывающийся поиск */
.search-box { position: relative; }
.search-box.is-open [data-search-btn] { background: var(--surface-2); color: var(--brand-yellow); }
.search-panel {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 130;
}
.search-box.is-open .search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.search-panel__form {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 10px 16px;
}
.search-panel__form svg { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
.search-panel__form input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 0.95rem; min-width: 0; }
.search-panel__rec { margin-top: 14px; }
.search-panel__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 8px; padding: 0 4px; }
.search-panel__list { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }
.search-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); transition: var(--t-fast); }
.search-item:hover { background: var(--surface-2); }
.search-item__img { width: 40px; height: 52px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); border-radius: 6px; overflow: hidden; padding: 3px; }
.search-item__img img { width: 100%; height: 100%; object-fit: contain; }
.search-item__img svg { width: 22px; height: 22px; color: var(--brand-yellow); }
.search-item__body { display: flex; flex-direction: column; min-width: 0; }
.search-item__title { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item__meta { font-size: 0.8rem; color: var(--text-muted); }
.search-panel__empty { text-align: center; color: var(--text-muted); padding: 16px; font-size: 0.9rem; }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Переключатель языка */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 40px; padding: 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; cursor: pointer;
  transition: var(--t-fast);
}
.lang-switch__btn:hover { background: var(--surface-2); }
.lang-switch__btn svg { width: 15px; height: 15px; color: var(--text-faint); transition: transform var(--t-fast); }
.lang-switch.is-open .lang-switch__btn > svg { transform: rotate(180deg); }
.lang-switch__globe { display: none; }   /* на десктопе — текстовая метка; планета только в моб. */
.lang-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 152px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 6px; box-shadow: var(--shadow-lg); z-index: 130;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 9px; border: none; background: none;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); cursor: pointer;
  transition: var(--t-fast);
}
.lang-opt:hover { background: var(--surface-2); color: var(--text); }
.lang-opt.is-active { background: var(--brand-yellow); color: var(--on-yellow); font-weight: 700; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--text);
  transition: var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accent-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
/* display:grid выше перебивал атрибут [hidden] — возвращаем скрытие при 0 */
.icon-btn .count[hidden] { display: none; }
.nav-toggle { display: none; }
/* доп. пункты (профиль/избранное/корзина/WhatsApp) — видны только в мобильном бургер-меню */
.nav-extra { display: none; }
.nav-extra .count {
  min-width: 18px; height: 18px; padding: 0 6px;
  display: grid; place-items: center; margin-left: auto;
  background: var(--accent-red); color: #fff;
  font-size: 0.72rem; font-weight: 800; border-radius: var(--r-pill);
}
.nav-extra .count[hidden] { display: none; }

/* Тонкая полоса-промо над шапкой */
.topbar {
  background: var(--brand-black);
  border-bottom: 1px solid var(--border);
  font-size: 0.83rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 38px;
}
.topbar a:hover { color: var(--brand-yellow); }
.topbar .topbar-contacts { display: flex; gap: 18px; color: var(--text-muted); }
.topbar .topbar-contacts strong { color: var(--text); font-weight: 700; }

/* ---------- Карточка товара ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 18px;
  /* фон под обложкой убран — обложка лежит прямо на фоне карточки */
  background: transparent;
}
.card__media svg, .card__media img { width: auto; height: 80%; max-width: 86%; object-fit: contain; }
.card__media img { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); transition: transform var(--t); }
/* при наведении анимируется только коробка с игрой, не вся карточка */
.card:hover .card__media img { transform: translateY(-7px) scale(1.05); }
/* обложки игр — фронтальный кейс, занимает почти всю высоту */
.card__media--cover { padding: 14px; }
.card__media--cover img { height: 92%; max-width: 92%; border-radius: 4px; }
/* этикетки — в правом верхнем углу, с заблюренным фоном, не на коробке */
.card__badges {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 3;
}
.card__badges .badge {
  padding: 3px 8px;
  font-size: 0.64rem;
  background: rgba(20, 21, 22, 0.35);
  color: var(--text);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.card__badges .badge--sale { background: rgba(232, 32, 42, 0.55); color: #fff; border-color: transparent; }
.card__badges .badge--new { background: rgba(232, 32, 42, 0.55); color: #fff; border-color: transparent; }
/* «İkinci əl» — чёткий синий тег с белым текстом */
.card__badges .badge--used { background: rgba(20, 102, 214, 0.92); color: #fff; border-color: transparent; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  flex: 1;
}
.card__platform { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; }

/* Бейдж платформы (бренд-иконка + название) */
.plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.plat-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.plat-badge--ps5  { color: #4f93ff; }
.plat-badge--ps4  { color: #4f93ff; }
.plat-badge--xbox { color: #6fbf3a; }
.plat-badge--switch { color: #ff5a5a; }
.plat-badge--multi { color: var(--text-faint); }

/* ===== Переключатель платформ — Apple Liquid Glass ===== */
.plat-switch {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  margin-bottom: 26px;
  flex-wrap: wrap;
  /* жидкое стекло: глубокий blur + saturate, многослойные тени для объёма */
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 12px 32px -10px rgba(17, 24, 39, 0.2),
    inset 0 2px 2px -1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px -1px rgba(17, 24, 39, 0.06);
}
[data-theme="dark"] .plat-switch {
  background: rgba(40, 42, 48, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 32px -10px rgba(0, 0, 0, 0.65),
    inset 0 2px 2px -1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px -1px rgba(0, 0, 0, 0.35);
}
/* «мокрый» блик-кромка сверху */
.plat-switch--glass::before {
  content: "";
  position: absolute;
  top: 1px; left: 1px; right: 1px; height: 48%;
  border-radius: var(--r-pill) var(--r-pill) 22px 22px / var(--r-pill) var(--r-pill) 11px 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none; z-index: 3;
}
[data-theme="dark"] .plat-switch--glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); }
/* интерактивный блик за курсором */
.plat-switch__glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: var(--r-pill);
  opacity: 0; transition: opacity 0.3s ease;
  /* светлая тема: на белом блик едва заметен — делаем чуть сильнее */
  background: radial-gradient(circle 85px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.90), transparent 100%);
  mix-blend-mode: overlay;
}
/* тёмная тема: overlay-белого на чёрном слишком яркий — приглушаем */
[data-theme="dark"] .plat-switch__glare {
  background: radial-gradient(circle 85px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.15), transparent 100%);
}
.plat-switch:hover .plat-switch__glare { opacity: 1; }
/* скользящая жёлтая «пилюля» активного таба */
.plat-switch__pill {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 0; height: 0;
  border-radius: var(--r-pill);
  background: var(--brand-yellow);
  box-shadow: 0 4px 14px rgba(255, 210, 30, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
    width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1),
    height 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.plat-switch__btn {
  position: relative; z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.plat-switch__btn svg, .plat-switch__btn .ui-png { width: 22px; height: 22px; }
.plat-switch__btn:hover { color: var(--text); }
.plat-switch__btn:active { transform: scale(0.93); }
.plat-switch__btn--playstation svg { color: #4f93ff; }
.plat-switch__btn--xbox svg { color: #6fbf3a; }
.plat-switch__btn--nintendo svg { color: #ff5a5a; }
.plat-switch__btn.is-active { color: var(--on-yellow); }
.plat-switch__btn.is-active svg { color: var(--on-yellow); }
/* белые PNG-иконки аксессуаров — слегка приглушены, а на активном (жёлтом) табе становятся тёмными */
.plat-switch__btn--gamepad .ui-png,
.plat-switch__btn--vr .ui-png,
.plat-switch__btn--headset .ui-png { opacity: 0.85; }
.plat-switch__btn--gamepad.is-active .ui-png,
.plat-switch__btn--vr.is-active .ui-png,
.plat-switch__btn--headset.is-active .ui-png { filter: brightness(0); opacity: 1; }

/* кнопки-фильтры (Новинки / Скидки) */
.filter-toggles { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); background: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  transition: var(--t-fast);
}
.filter-toggle svg { width: 16px; height: 16px; }
.filter-toggle--new { border-color: var(--accent-red); color: var(--accent-red); }
.filter-toggle--new:hover { background: rgba(232, 32, 42, 0.1); }
.filter-toggle--new.is-on { background: var(--accent-red); color: #fff; }
.filter-toggle--sale { border-color: #34c759; color: #34c759; }
.filter-toggle--sale:hover { background: rgba(52, 199, 89, 0.1); }
.filter-toggle--sale.is-on { background: #34c759; color: #fff; }
.filter-toggle--kids { border-color: var(--accent-blue); color: var(--accent-blue); }
.filter-toggle--kids:hover { background: rgba(20, 102, 214, 0.1); }
.filter-toggle--kids.is-on { background: var(--accent-blue); color: #fff; }

/* заголовок секции игр: переключатель справа */
.section-head--games { align-items: center; }
.section-head--games .plat-switch { margin-bottom: 0; }

/* кнопка «показать ещё» */
.games-more { display: flex; justify-content: center; margin-top: 30px; }
.games-more .btn svg { width: 18px; height: 18px; transition: transform var(--t); }
.games-more .btn.is-expanded svg { transform: rotate(180deg); }
@media (max-width: 560px) {
  .plat-switch { width: 100%; }
  .plat-switch__btn { flex: 1; justify-content: center; padding: 10px 8px; }
  .plat-switch__btn span { display: none; }
}
.card__title {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__title:hover { color: var(--brand-yellow); }
.card__rating { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--text-muted); }
.card__rating .stars { color: var(--brand-yellow); letter-spacing: 1px; }

.card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 6px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px; line-height: 1.1; }
.price__old { order: 2; font-size: 1.1rem; color: var(--text-faint); text-decoration: line-through; }
.price__now { order: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.01em; }
.price__now .cur { font-size: 0.58em; color: var(--text-muted); margin-left: 3px; font-weight: 700; }
.price--rent .price__now { color: var(--text); }
.card__rent-hint { order: 3; flex-basis: 100%; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.card__rent-hint b { color: var(--text); font-weight: 700; }

/* Плавающие кнопки в левом верхнем углу обложки (избранное + поделиться).
   Появляются при наведении на карточку; избранное остаётся видимым, если активно. */
.card__fav, .card__share {
  position: absolute; left: 6px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(40, 42, 48, 0.14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
  opacity: 0; transform: scale(0.85);
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.card__fav { top: 12px; }
.card__share { top: 54px; }
.card__fav svg, .card__share svg { width: 18px; height: 18px; transition: color var(--t-fast), fill var(--t-fast); }
.card__share svg { width: 16px; height: 16px; }
.card:hover .card__fav, .card:hover .card__share { opacity: 1; transform: scale(1); }
/* при наведении иконки меняют цвет: белые → жёлтые; активное (жёлтое) сердце → чёрное */
.card__fav:hover svg, .card__share:hover svg { color: var(--brand-yellow); }
.card__fav.is-active:hover svg { color: var(--on-yellow); }
/* в избранном — всегда видно, жёлтое залитое сердечко */
.card__fav.is-active { opacity: 1; transform: scale(1); color: var(--brand-yellow); }
.card__fav.is-active svg { fill: currentColor; }
/* на тач-устройствах ховера нет — показываем всегда */
@media (hover: none) { .card__fav, .card__share { opacity: 1; transform: scale(1); } }

/* Кнопка корзины — матовый жёлтый (стекло), без токсичного свечения.
   При наведении — чёрная иконка на белом фоне. */
.card__foot .btn--icon, .deal-card__buy .btn--icon {
  background: rgba(255, 210, 30, 0.82);
  backdrop-filter: blur(8px);
  color: var(--on-yellow);
  box-shadow: none;
  border: 1px solid rgba(255, 210, 30, 0.45);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.card__foot .btn--icon:hover, .deal-card__buy .btn--icon:hover {
  background: #fff;
  color: var(--brand-black);
  border-color: #fff;
  transform: translateY(-2px);
}
/* кнопка «в аренду» (ссылка) — синяя, без покупки */
.card__foot a.btn--icon {
  background: var(--accent-blue);
  color: #fff;
  border-color: transparent;
  backdrop-filter: none;
}
.card__foot a.btn--icon:hover {
  background: var(--accent-blue-deep);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
/* ---------- Мобильная сетка карточек: 2 в ряд, фото чуть меньше ---------- */
@media (max-width: 560px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card__media { padding: 14px; }
  .card__media img, .card__media svg { height: 74%; max-width: 82%; }
  .card__media--cover { padding: 11px; }
  .card__media--cover img { height: 86%; max-width: 88%; }
  .card__body { padding: 12px; gap: 6px; }
  /* цена и кнопка — в ОДИН ряд (карточка не растягивается, цена внизу рядом с корзиной).
     старая цена справа от новой в строку; шрифты компактные, чтобы влезали рядом с кнопкой */
  .card__foot .btn--icon { flex-shrink: 0; }
  .price { flex-wrap: nowrap; column-gap: 4px; }
  .price__now { font-size: 1.3rem; }
  .price__old { font-size: 0.78rem; }
  /* этикетки скидок/новинок над карточкой — ещё ~5% меньше */
  .card__badges { top: 10px; right: 10px; gap: 5px; }
  .card__badges .badge { padding: 2px 6px; font-size: 0.53rem; }
}

/* ---------- Категория-плитка ---------- */
.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: var(--t);
}
.cat-tile:hover { transform: translateY(-4px); border-color: var(--brand-yellow); }
.cat-tile__icon {
  position: absolute;
  top: -10px; right: -10px;
  width: 120px; height: 120px;
  color: rgba(255, 255, 255, 0.05);
  transition: var(--t);
}
.cat-tile__icon svg { width: 100%; height: 100%; }
.cat-tile:hover .cat-tile__icon { color: rgba(255, 210, 30, 0.12); transform: scale(1.08) rotate(-6deg); }
.cat-tile h3 { font-size: 1.15rem; }
.cat-tile p { color: var(--text-muted); font-size: 0.88rem; margin-top: 4px; }
.cat-tile .arrow { margin-top: 14px; color: var(--brand-yellow); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.cat-tile .arrow svg { width: 18px; height: 18px; }

/* ---------- Уведомление-«тост» ---------- */
.toast-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* предупреждение рядом с сердечком */
.fav-warn {
  position: absolute; z-index: 1100;
  display: flex; align-items: center; gap: 8px;
  max-width: 240px;
  padding: 9px 13px;
  background: var(--brand-black); color: #fff;
  border-radius: 12px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.25;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0; transform: translateY(-50%) translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fav-warn.fav-warn--left { transform: translateY(-50%) translateX(6px); }
.fav-warn.is-show { opacity: 1; transform: translateY(-50%) translateX(0); }
.fav-warn svg { width: 16px; height: 16px; color: #fff; fill: none; stroke: currentColor; flex: none; }
.fav-warn::before {
  content: ""; position: absolute; top: 50%; left: -5px; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: var(--brand-black);
}
.fav-warn--left::before { left: auto; right: -5px; border-right-color: transparent; border-left-color: var(--brand-black); }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  font-size: 0.92rem;
  animation: toast-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: 340px;
}
.toast svg { color: var(--brand-yellow); flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } }

/* ---------- Футер ---------- */
.site-footer {
  margin-top: auto;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding-block: 56px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 320px; }
.footer-col h4 { font-size: 0.95rem; margin-bottom: 16px; font-family: var(--font-display); }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-muted); font-size: 0.9rem; transition: var(--t-fast); }
.footer-col a:hover { color: var(--brand-yellow); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: var(--t-fast);
}
.footer-social a:hover { background: var(--brand-yellow); color: var(--on-yellow); border-color: transparent; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.footer-pay { display: flex; gap: 8px; align-items: center; }
.footer-pay span {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ---------- Адаптив шапки/футера ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 1024px) {
  .header-inner { gap: 12px; }
  /* .header-wa (который прижимал действия вправо) скрыт — прижимаем сами иконки */
  .header-actions { margin-left: auto; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;                 /* сброс базового margin-left, иначе меню сдвинуто и слева видна страница */
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);                       /* лёгкая обводка по краям попапа */
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    transform: translateY(-130%);
    transition: transform var(--t);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateY(0); }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: flex-start; padding: 14px; }
  .nav-link > svg { margin-left: auto; }
  .nav-toggle { display: grid; }
  .mega {
    position: static;
    min-width: 0;
    display: none;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    background: transparent;                 /* без белого блока — сливается с фоном меню */
    margin: 2px 0 8px 16px;
    padding: 2px 0 4px 14px;
    border-left: 2px solid var(--border-strong);   /* вложенность обозначена линией, а не плашкой */
  }
  .has-mega.is-open .mega { display: block; }
  /* раскрытая категория: лёгкая заливка + слово в цвет своей консоли */
  .has-mega.is-open > .nav-link { background: var(--surface-2); }
  .nav-item--playstation.is-open > .nav-link { color: #4f93ff; }   /* синий */
  .nav-item--xbox.is-open > .nav-link        { color: #6fbf3a; }   /* зелёный */
  .nav-item--nintendo.is-open > .nav-link    { color: #ff5a5a; }   /* красный */
  .has-mega.is-open > .nav-link > svg { color: inherit; }          /* шеврон в цвет слова */
  .mega__cols { flex-direction: column; gap: 8px; }
  .mega__col h4 { margin-bottom: 2px; }
  .mega__col a { padding: 9px 8px; border-radius: var(--r-sm); color: var(--text-muted); font-weight: 600; }
  .mega__col a:hover { background: var(--surface-2); color: var(--text); }
  .mega__all { margin: 6px 0 0 8px; }
  .mega__wm { display: none; }
  /* профиль/избранное/корзина/WhatsApp уезжают в бургер */
  .nav-extra {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .nav-link--act { width: 100%; justify-content: flex-start; padding: 14px; }
  /* в шапке остаются только поиск, язык и смена темы */
  .header-actions > a.icon-btn { display: none; }
  .header-wa { display: none; }
  /* лого чуть меньше */
  .brand img { height: 40px; }
  /* язык — иконкой-планетой, в один ряд с другими кнопками (42×42 как .icon-btn) */
  .lang-switch__btn { width: 42px; height: 42px; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: var(--r-md); }
  .lang-switch__cur, .lang-switch__btn > svg { display: none; }   /* скрыть метку и шеврон */
  .lang-switch__globe { display: inline-flex; }
  .lang-switch__globe svg { width: 22px; height: 22px; color: var(--text); }
}
@media (max-width: 860px) {
  .header-wa__num { display: none; }
  .header-wa { padding: 6px; border: 0; }
}
@media (max-width: 600px) {
  .brand img { height: 34px; }
  /* поиск-попап: фикс по центру экрана под шапкой, а не привязан к кнопке справа */
  .search-panel {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: 50%; right: auto;
    width: calc(100vw - 24px); max-width: 420px;
    transform: translateX(-50%) translateY(8px);
  }
  .search-box.is-open .search-panel { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}