/* Десктопная раскладка (kls-store.ru) — премиальный тёмно-золотой e-commerce слой
   поверх существующей мобильной вёрстки, полностью отдельным брейкпоинтом.
   ВАЖНО: ВСЁ в этом файле — внутри @media (min-width: 1024px). Ниже этой ширины
   файл не делает вообще ничего, мобильная версия (мини-апп-стиль) не меняется
   ни на пиксель. Владелец 2026-08-25: "не Telegram mini-app, растянутый на
   десктоп", подробное ТЗ по цветам/структуре — см. память проекта kls-store.ru. */

@media (min-width: 1024px) {

  body { background: #050505; }

  /* ---------- Общая ширина контента ---------- */
  #screens, #app-footer, #header {
    max-width: 1360px;
  }

  /* ---------- Шапка ---------- */
  #header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    padding: 18px 40px;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    max-width: none;
    width: 100%;
  }
  #header #logo { width: 48px; height: 48px; }
  #header h1 { font-size: 22px; }
  #header p { font-size: 13px; }
  #header > div { flex: none; }

  .header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
  }
  .header-nav-link {
    background: none;
    border: none;
    color: #C9C9C9;
    font: 600 15px/1 "Inter", sans-serif;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .header-nav-link:hover { color: #F5D76E; background: rgba(212, 175, 55, 0.08); }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
  }
  .header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #121212;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 999px;
    padding: 0 16px;
    height: 40px;
    width: 220px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.2s ease;
  }
  .header-search:focus-within {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    width: 280px;
  }
  .header-search-icon { width: 16px; height: 16px; color: #8A8A8A; flex: none; }
  .header-search-input {
    background: none;
    border: none;
    outline: none;
    color: #F5F5F5;
    font-size: 14px;
    width: 100%;
  }
  .header-search-input::placeholder { color: #6B6B6B; }

  .header-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: #121212;
    color: #E8E8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex: none;
  }
  .header-icon-btn:hover { border-color: #D4AF37; box-shadow: 0 0 12px rgba(212, 175, 55, 0.25); }
  .header-icon-btn .tab-icon { width: 20px; height: 20px; }
  .header-icon-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(155deg, #F5D9A8 0%, #D4AF37 100%);
    color: #171310;
    font: 700 11px/18px "Inter", sans-serif;
    text-align: center;
  }

  .header-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #D4AF37;
    background: none;
    color: #F5D76E;
    font: 600 14px/1 "Inter", sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    flex: none;
  }
  .header-profile-btn:hover { background: rgba(212, 175, 55, 0.1); box-shadow: 0 0 14px rgba(212, 175, 55, 0.25); }
  .header-profile-btn .tab-icon { width: 18px; height: 18px; }

  /* Мобильные sticky-шапка/нижняя навигация/назад-кнопка на десктопе не нужны —
     обычная навигация полностью через шапку выше. */
  .sticky-header, .bottom-tabs, .web-back-btn { display: none !important; }
  #screens { padding-bottom: 80px; }

  /* ---------- Hero ---------- */
  .home-hero {
    display: block;
    position: relative;
    text-align: center;
    padding: 96px 40px 64px;
    overflow: hidden;
  }
  .home-hero-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }
  .home-hero-title {
    position: relative;
    z-index: 1;
    margin: 0 0 20px;
    font: 800 56px/1.15 "Inter", sans-serif;
    color: #FFFFFF;
  }
  .home-hero-subtitle {
    position: relative;
    z-index: 1;
    margin: 0 auto 40px;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.5;
    color: #B8B8B8;
  }
  .home-hero-ctas {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .home-hero-cta-primary {
    height: 56px;
    padding: 0 36px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(155deg, #F5D9A8 0%, #D4AF37 60%, #B08A52 100%);
    color: #171310;
    font: 700 16px/1 "Inter", sans-serif;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .home-hero-cta-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 34px rgba(212, 175, 55, 0.5); }
  .home-hero-cta-outline {
    height: 56px;
    padding: 0 36px;
    border-radius: 12px;
    border: 1.5px solid #D4AF37;
    background: none;
    color: #F5D76E;
    font: 700 16px/1 "Inter", sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .home-hero-cta-outline:hover { background: rgba(212, 175, 55, 0.1); box-shadow: 0 0 20px rgba(212, 175, 55, 0.25); transform: translateY(-2px); }

  /* ---------- Категории — широкая 3-колоночная сетка вместо мобильного стека.
     renderCategoryGrid() в app.js делает grid.className = "home-big-cards"
     (перезаписывает класс, не добавляет) — поэтому селектор здесь ТОЛЬКО по
     .home-big-cards, а не .home-sections.home-big-cards (не совпало бы никогда). ---------- */
  #category-grid.home-big-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 0 40px 64px;
  }
  .home-big-card {
    min-height: 280px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08), 0 20px 50px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .home-big-card:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: #D4AF37;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 0 42px rgba(212, 175, 55, 0.3), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
  .home-big-card .home-big-card-title { font-size: 26px; }
  .home-big-card .ps-hub-card-subtitle { font-size: 15px; max-width: 380px; }

  /* ---------- "Хиты" — реальные топ-игры (Sony top10, region=TR), 5-колоночная
     сетка вместо мобильного горизонтального скролла. .home-teaser-card/-cover-wrap
     на мобильном имеют фиксированную ширину 118px (под скролл-ряд) — тут её
     переопределяем на 100%, чтобы карточка тянулась под колонку grid. ---------- */
  .home-hits { padding: 8px 40px 64px; }
  .home-section-title { font-size: 22px; margin-bottom: 24px; }
  .home-hits-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  .home-hits-grid .home-teaser-card { width: 100%; }
  .home-hits-grid .home-teaser-cover-wrap {
    width: 100%;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .home-hits-grid .home-teaser-card:hover .home-teaser-cover-wrap {
    border-color: #D4AF37;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
  }

  /* ---------- Блок доверия — статический контент, закрывает пустоту внизу
     главной (жалоба владельца 2026-08-25). ---------- */
  .home-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 40px 72px;
  }
  .home-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    background: #121212;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 14px;
  }
  .home-trust-item .tab-icon { width: 26px; height: 26px; color: #D4AF37; flex: none; }
  .home-trust-item div { display: flex; flex-direction: column; gap: 4px; }
  .home-trust-item b { color: #FFFFFF; font-size: 15px; }
  .home-trust-item span { color: #A8A8A8; font-size: 13px; line-height: 1.4; }

  /* ---------- Футер — НЕ переключаем на display:flex: мобильная база (screens.css)
     уже даёт нужный результат через обычный block-flow + text-align:center (ссылки
     в строке, #build-marker с width:100% естественно уходит на свою строку ниже,
     тоже по центру) — просто увеличиваем отступы/шрифт под десктоп. flex здесь
     ломал это: один flex-item с width:100% в flex-row не переносится на новую
     строку сам, а расталкивает соседей и уезжает вбок (баг, пойман 2026-08-25). */
  #app-footer {
    padding: 32px 40px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    margin-top: 40px;
    font-size: 13px;
  }
  #app-footer .dot { margin: 0 10px; }
  .footer-support-link {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
  }
  #build-marker { width: 100%; text-align: center; margin-top: 10px !important; }

  /* ---------- Вход/профиль/корзина/заказы — те же карточки, просто шире и без
     мобильных ограничений ширины (детальная десктопная перекомпоновка этих
     экранов — следующий этап, см. план). ---------- */
  #screen-my-orders, #screen-cart { max-width: 640px; margin: 0 auto; }

  /* ---------- PS Plus — кнопка покупки рядом с выбором тарифа, не в самом низу
     страницы (жалоба владельца 2026-08-25: "кнопка в пустоте"). Мобильный
     .sticky-cta-bar остаётся как есть (не трогаем), но на десктопе он скрыт
     ИМЕННО пока показан PS Plus (:has(.grid-psplus) — тот же #grid переиспользуется
     всеми режимами каталога, класс grid-psplus стоит только пока рендерится PS
     Plus, см. renderPsPlusGrid/renderGamesGrid в app.js), а вместо него — кнопка
     #psplus-desktop-cta прямо в сайдбаре выбора тарифа. */
  body:has(.grid-psplus) .sticky-cta-bar { display: none !important; }
  .grid-psplus {
    display: grid !important;
    grid-template-columns: 340px 1fr;
    align-items: start;
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 40px 64px;
  }
  .psplus-sticky {
    position: sticky;
    top: 96px;
    order: 2;
    background: #121212;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 24px;
  }
  .psplus-features-card { order: 1; }
  .psplus-desktop-cta {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(155deg, #F5D9A8 0%, #D4AF37 60%, #B08A52 100%);
    color: #171310;
    font: 700 15px/1 "Inter", sans-serif;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  .psplus-desktop-cta:hover { box-shadow: 0 0 20px rgba(212, 175, 55, 0.35); transform: translateY(-1px); }
}