templates/catalog.html.twig line 1

Open in your IDE?
  1. <!doctype html>
  2. <html lang="ru">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.     <title>Каталог — PlayPapa</title>
  7.     <script>
  8.       (() => {
  9.         window.__preloaderStart = performance.now();
  10.         try {
  11.           const requestedTheme = new URLSearchParams(window.location.search).get("theme");
  12.           const savedTheme = localStorage.getItem("playpapa-theme");
  13.           const theme = requestedTheme || savedTheme;
  14.           document.documentElement.dataset.theme = theme === "dark" ? "dark" : "light";
  15.         } catch {
  16.           document.documentElement.dataset.theme = "light";
  17.         }
  18.         try {
  19.           if ("scrollRestoration" in history) history.scrollRestoration = "manual";
  20.           if (!window.location.hash || window.location.hash === "#") {
  21.             window.addEventListener("load", () => requestAnimationFrame(() => window.scrollTo(0, 0)), { once: true });
  22.           }
  23.         } catch {}
  24.       })();
  25.     </script>
  26.     <script>
  27.       window.playpapaCatalog = {{ catalog_payload_json|default('{"products":[],"total":0}')|raw }};
  28.       window.playpapaCatalogState = {
  29.         category: "{{ catalog_active_category|default('all')|e('js') }}",
  30.         query: "{{ catalog_query|default('')|e('js') }}",
  31.         sort: "{{ catalog_active_sort|default('popular')|e('js') }}"
  32.       };
  33.     </script>
  34.     <script>
  35.       tailwind = {
  36.         config: {
  37.           theme: {
  38.             extend: {
  39.               colors: {
  40.                 papa: "#268bf3",
  41.                 ink: "#202838",
  42.                 soft: "#f2f4f8",
  43.               },
  44.             },
  45.           },
  46.         },
  47.       };
  48.     </script>
  49.     <script src="https://cdn.tailwindcss.com" defer></script>
  50.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  51.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  52.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet" />
  53.     <link rel="icon" type="image/svg+xml" href="./assets/blogger-playpapa-logo.svg" />
  54.     <link rel="stylesheet" href="./frame.css" />
  55.     <link rel="stylesheet" href="./styles.css" />
  56.     <link rel="stylesheet" href="./catalog.css" />
  57.     <link rel="stylesheet" href="/auth-local.css" />
  59.   </head>
  60.   <body class="preloader-active catalog-page">
  61.     <div class="page-preloader" id="pagePreloader" role="status" aria-label="Загрузка">
  62.       <div class="preloader-inner">
  63.         <div class="preloader-dots" aria-hidden="true">
  64.           <span></span>
  65.           <span></span>
  66.           <span></span>
  67.         </div>
  68.         <div class="preloader-text">Загрузка...</div>
  69.       </div>
  70.     </div>
  72.     <header class="site-header">
  73.       <div class="shell header-inner">
  74.         <a class="logo-link" href="/">
  75.           <img src="./assets/logo.svg" alt="PlayPapa" />
  76.         </a>
  78.         <div class="theme-switch" aria-label="Переключение темы">
  79.           <button class="theme-btn is-active" type="button" data-theme="light" aria-label="Светлая тема" aria-pressed="true">
  80.             <img src="./assets/white-theme.svg" alt="" />
  81.           </button>
  82.           <button class="theme-btn" type="button" data-theme="dark" aria-label="Темная тема" aria-pressed="false">
  83.             <img src="./assets/dark-theme.svg" alt="" />
  84.           </button>
  85.         </div>
  87.         <button class="catalog-btn" type="button" aria-label="Каталог" aria-expanded="false" aria-controls="catalogMegaMenu">
  88.           <img src="./assets/catalog.svg" alt="" />
  89.           <span>Каталог</span>
  90.         </button>
  92.         <form class="search-form" action="#">
  93.           <input type="search" placeholder="Игра, приложение или услуга..." />
  94.           <button class="search-favorite" type="button" aria-label="Избранное">
  95.             <img src="./assets/favorite.svg" alt="" />
  96.           </button>
  97.           <button class="search-submit" type="submit" aria-label="Найти">
  98.             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  99.               <path d="m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
  100.             </svg>
  101.           </button>
  102.         </form>
  104.         <button class="bonus-btn" aria-label="Бонусы">
  105.           <img src="./assets/bonus.svg" alt="Бонусы" />
  106.         </button>
  108.         <div class="profile-menu">
  109.           <button class="profile-btn" type="button" aria-label="Профиль" aria-expanded="false" aria-controls="profilePopover">
  110.             <img src="./assets/profile.svg" alt="" />
  111.             <span class="profile-toggle-indicator" aria-hidden="true">
  112.               <svg viewBox="0 0 12 8" fill="none">
  113.                 <path d="m2 2 4 4 4-4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
  114.               </svg>
  115.             </span>
  116.           </button>
  118.           <section class="profile-popover" id="profilePopover" aria-hidden="true" aria-label="Меню профиля" inert>
  119.             <div class="profile-popover-heading">
  120.               <h2>Вы не авторизованы</h2>
  121.               <p>
  122.                 <span>Войдите, чтобы видеть бонусы и</span>
  123.                 <span>рефералов</span>
  124.               </p>
  125.             </div>
  127.             <nav class="profile-popover-nav" aria-label="Разделы профиля">
  128.               <button class="profile-menu-item" type="button" disabled>
  129.                 <img class="profile-menu-icon" src="./assets/profile-menu-profile.svg" alt="" />
  130.                 <span>Профиль</span>
  131.               </button>
  132.               <button class="profile-menu-item" type="button" disabled>
  133.                 <img class="profile-menu-icon" src="./assets/profile-menu-referrals.svg" alt="" />
  134.                 <span>Рефералы</span>
  135.               </button>
  136.               <button class="profile-menu-item" type="button" disabled>
  137.                 <img class="profile-menu-icon" src="./assets/profile-menu-bonus.svg" alt="" />
  138.                 <span>Бонусы</span>
  139.               </button>
  140.               <button class="profile-menu-item" type="button" disabled>
  141.                 <img class="profile-menu-icon" src="./assets/profile-menu-topup.svg" alt="" />
  142.                 <span>Пополнить</span>
  143.               </button>
  144.               <button class="profile-menu-item profile-help" type="button">
  145.                 <img class="profile-menu-icon" src="./assets/profile-menu-help.svg" alt="" />
  146.                 <span>Помощь</span>
  147.               </button>
  148.               <button class="profile-menu-item profile-login" type="button" data-auth-open="login">
  149.                 <img class="profile-menu-icon" src="./assets/profile-menu-login.svg" alt="" />
  150.                 <span>Войти</span>
  151.               </button>
  152.             </nav>
  153.           </section>
  154.         </div>
  155.       </div>
  157.       <div class="catalog-layer" id="catalogMegaMenu" aria-hidden="true" inert>
  158.         <div class="shell catalog-mega" role="dialog" aria-label="Каталог товаров">
  159.           <aside class="catalog-sidebar" aria-label="Разделы каталога">
  160.             <button class="catalog-side-link is-active" type="button">
  161.               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7.5 8.2h9a4.5 4.5 0 0 1 4.2 6.1l-1.1 2.8a2.2 2.2 0 0 1-3.7.7l-1.2-1.5H9.3l-1.2 1.5a2.2 2.2 0 0 1-3.7-.7l-1.1-2.8a4.5 4.5 0 0 1 4.2-6.1Z" stroke="currentColor" stroke-width="1.8"/><path d="M8 11v3m-1.5-1.5h3M16.5 11.7h.01m2 2h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  162.               <span>Игры и игровые сервисы</span>
  163.               <span class="catalog-chevron" aria-hidden="true">›</span>
  164.             </button>
  165.             <button class="catalog-side-link" type="button">
  166.               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m12 2.8 8.1 5.5L12 21.2 3.9 8.3 12 2.8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m3.9 8.3 5.1.2 3-5.7 3 5.7 5.1-.2M9 8.5l3 12.7 3-12.7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  167.               <span>Игровые ценности</span>
  168.               <span class="catalog-chevron" aria-hidden="true">›</span>
  169.             </button>
  170.             <button class="catalog-side-link" type="button">
  171.               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="6.2" y="2.5" width="11.6" height="19" rx="2.2" stroke="currentColor" stroke-width="1.8"/><path d="M10 5h4m-2 13.5h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  172.               <span>Мобильные игры</span>
  173.               <span class="catalog-chevron" aria-hidden="true">›</span>
  174.             </button>
  175.             <button class="catalog-side-link" type="button">
  176.               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3.4 12h17.2M12 3c2.2 2.5 3.3 5.5 3.3 9S14.2 18.5 12 21c-2.2-2.5-3.3-5.5-3.3-9S9.8 5.5 12 3Z" stroke="currentColor" stroke-width="1.5"/></svg>
  177.               <span>Сервисы и соцсети</span>
  178.               <span class="catalog-chevron" aria-hidden="true">›</span>
  179.             </button>
  180.             <button class="catalog-side-link" type="button">
  181.               <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="4.2" width="18" height="12.3" rx="1.8" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 20h7M12 16.5V20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  182.               <span>Программы</span>
  183.               <span class="catalog-chevron" aria-hidden="true">›</span>
  184.             </button>
  185.           </aside>
  187.           <div class="catalog-content">
  188.             <section class="catalog-showcase" aria-labelledby="catalogFeaturedTitle">
  189.               <h2 id="catalogFeaturedTitle">Игры и игровые сервисы <span aria-hidden="true">›</span></h2>
  190.               <div class="catalog-showcase-row" id="catalogFeatured"></div>
  191.             </section>
  193.             <section class="catalog-showcase catalog-new" aria-labelledby="catalogNewTitle">
  194.               <h2 id="catalogNewTitle">Новинки и предзаказы <span aria-hidden="true">›</span></h2>
  195.               <div class="catalog-showcase-row" id="catalogNew"></div>
  196.             </section>
  198.             <div class="catalog-platforms">
  199.               <section class="catalog-link-group">
  200.                 <h3>Steam <span aria-hidden="true">›</span></h3>
  201.                 <a href="#">Игры и DLC</a>
  202.                 <a href="#">Пополнение баланса</a>
  203.                 <a href="#">Подарочные карты</a>
  204.                 <a href="#">Коллекционные карточки</a>
  205.                 <a href="#">Смена региона</a>
  206.               </section>
  207.               <section class="catalog-link-group">
  208.                 <h3>PlayStation <span aria-hidden="true">›</span></h3>
  209.                 <a href="#">Игры и DLC</a>
  210.                 <a href="#">Пополнение баланса</a>
  211.                 <a href="#">Новые аккаунты</a>
  212.                 <a href="#">PS Plus</a>
  213.                 <a href="#">EA Play</a>
  214.               </section>
  215.               <section class="catalog-link-group">
  216.                 <h3>Xbox <span aria-hidden="true">›</span></h3>
  217.                 <a href="#">Игры и DLC</a>
  218.                 <a href="#">Пополнение баланса</a>
  219.                 <a href="#">Новые аккаунты</a>
  220.                 <a href="#">Xbox Game Pass</a>
  221.                 <a href="#">Услуги</a>
  222.               </section>
  223.               <section class="catalog-link-group">
  224.                 <h3>Nintendo <span aria-hidden="true">›</span></h3>
  225.                 <a href="#">Игры и DLC</a>
  226.                 <a href="#">Подарочные карты</a>
  227.                 <a href="#">Новые аккаунты</a>
  228.                 <a href="#">NS Online</a>
  229.               </section>
  230.               <section class="catalog-link-group">
  231.                 <h3>Battle.net <span aria-hidden="true">›</span></h3>
  232.                 <a href="#">World of Warcraft</a>
  233.                 <a href="#">Подарочные карты</a>
  234.                 <a href="#">Прямое пополнение</a>
  235.                 <a href="#">Новые аккаунты</a>
  236.                 <a href="#">Смена региона</a>
  237.               </section>
  238.             </div>
  239.           </div>
  240.         </div>
  241.       </div>
  242.     </header>
  244.     <main>
  245.       <section class="shell catalog-official" aria-labelledby="catalogOfficialTitle">
  246.         <div class="catalog-official-head">
  247.           <span class="catalog-shield" aria-hidden="true">
  248.             <svg viewBox="0 0 24 24" fill="none">
  249.               <path d="M12 3.2 19 6v5.4c0 4.4-2.8 7.9-7 9.4-4.2-1.5-7-5-7-9.4V6l7-2.8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
  250.               <path d="m9.3 12.1 1.8 1.8 3.9-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  251.             </svg>
  252.           </span>
  253.           <h1 id="catalogOfficialTitle">Официально от PlayPapa</h1>
  254.           <div class="catalog-official-actions" aria-label="Навигация по подборке">
  255.             <button class="catalog-official-arrow" type="button" data-official-scroll="prev" aria-label="Предыдущие товары">
  256.               <img class="catalog-arrow-icon catalog-arrow-left" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" />
  257.             </button>
  258.             <button class="catalog-official-arrow" type="button" data-official-scroll="next" aria-label="Следующие товары">
  259.               <img class="catalog-arrow-icon catalog-arrow-right" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" />
  260.             </button>
  261.           </div>
  262.         </div>
  263.         <div class="product-grid catalog-feature-grid" data-products="catalog-featured" data-count="10"></div>
  264.       </section>
  266.       <section class="shell catalog-page-layout" aria-label="Каталог товаров">
  267.         <aside class="catalog-filter-panel" id="catalogFilterPanel" aria-label="Фильтры каталога">
  268.           <div class="catalog-filter-head">
  269.             <img src="./assets/filter-candle.svg" alt="" />
  270.             <b>Фильтр</b>
  271.             <button class="catalog-mobile-filter-close" type="button" aria-label="Закрыть фильтр">
  272.               <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
  273.                 <path d="m4 4 8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
  274.               </svg>
  275.             </button>
  276.           </div>
  278.           <section class="filter-group" hidden aria-hidden="true">
  279.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Способ получения <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  280.             <div class="filter-group-body">
  281.               <label class="filter-check"><input type="checkbox" /> <span>Без входа в аккаунт</span></label>
  282.               <label class="filter-check"><input type="checkbox" /> <span>Со входом в аккаунт</span></label>
  283.               <label class="filter-check"><input type="checkbox" /> <span>Аккаунт с лицензией</span></label>
  284.             </div>
  285.           </section>
  287.           <section class="filter-group">
  288.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Тип <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  289.             <div class="filter-group-body">
  290.               {% for typeFilter in catalog_type_filters|default([]) %}
  291.                 <label class="filter-check"><input type="checkbox" value="{{ typeFilter.id }}" data-filter-type="type" /> <span>{{ typeFilter.label }}</span></label>
  292.               {% endfor %}
  293.             </div>
  294.           </section>
  296.           <section class="filter-group">
  297.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Жанр <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  298.             <div class="filter-group-body">
  299.               {% for genreFilter in catalog_genre_filters|default([]) %}
  300.                 <label class="filter-check"><input type="checkbox" value="{{ genreFilter.id }}" data-filter-type="genre" /> <span>{{ genreFilter.label }}</span></label>
  301.               {% endfor %}
  302.             </div>
  303.           </section>
  305.           <section class="filter-group filter-price-group" data-price-filter data-min-price="1" data-max-price="10000" data-price-step="100">
  306.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Цена <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  307.             <div class="filter-group-body">
  308.               <div class="filter-price-row">
  309.                 <label><span>от</span><input type="text" inputmode="numeric" value="1" data-price-min-input /><b>₽</b></label>
  310.                 <label><span>до</span><input type="text" inputmode="numeric" value="10000" data-price-max-input /><b>₽</b></label>
  311.               </div>
  312.               <div class="filter-range">
  313.                 <span></span>
  314.                 <i></i>
  315.                 <b></b>
  316.               </div>
  317.               <div class="filter-range-labels"><span>1</span><span>10000</span></div>
  318.             </div>
  319.           </section>
  321.           <section class="filter-group" hidden aria-hidden="true">
  322.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Сервисы <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  323.             <div class="filter-group-body">
  324.               <label class="filter-check"><input type="checkbox" /> <span>Steam</span></label>
  325.               <label class="filter-check"><input type="checkbox" /> <span>xBox</span></label>
  326.             </div>
  327.           </section>
  329.           <div class="filter-actions">
  330.             <button class="filter-apply" type="button">Применить <span hidden>0</span></button>
  331.             <button class="filter-reset" type="button">Сбросить</button>
  332.           </div>
  333.         </aside>
  335.         <section class="catalog-results" aria-label="Список товаров">
  336.           <div class="catalog-controls">
  337.             <nav class="catalog-category-tabs" aria-label="Категории товаров">
  338.               {% for categoryFilter in catalog_category_filters|default([]) %}
  339.                 <a
  340.                   class="chip {{ categoryFilter.active ? 'is-active' : '' }}"
  341.                   href="{{ categoryFilter.url }}"
  342.                   data-catalog-category="{{ categoryFilter.id }}"
  343.                   aria-current="{{ categoryFilter.active ? 'true' : 'false' }}"
  344.                 >
  345.                   <img src="./assets/{{ categoryFilter.icon }}" alt="" />{{ categoryFilter.label }}
  346.                 </a>
  347.               {% endfor %}
  348.             </nav>
  350.             <div class="catalog-toolbar">
  351.               <label class="catalog-search">
  352.                 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  353.                   <path d="m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" />
  354.                 </svg>
  355.                 <input type="search" placeholder="Поиск по названию" value="{{ catalog_query|default('') }}" data-catalog-search />
  356.               </label>
  357.               <button class="catalog-pill catalog-pill-green" type="button"><img src="./assets/catalog-sale.svg" alt="" />Скидка</button>
  358.               <button class="catalog-pill catalog-pill-orange" type="button"><img src="./assets/catalog-flash.svg" alt="" />Хит продаж</button>
  359.               <button class="catalog-pill catalog-pill-blue" type="button"><img src="./assets/catalog-reviews.svg" alt="" />Лучшие отзывы</button>
  360.             </div>
  361.           </div>
  363.           <div class="catalog-mobile-filterbar" aria-label="Фильтры и сортировка">
  364.             <div class="catalog-mobile-filter-row">
  365.               <button class="catalog-mobile-filter-btn" type="button" aria-expanded="false" aria-controls="catalogFilterPanel">
  366.                 <img src="./assets/filter-candle.svg" alt="" />
  367.                 <span>Фильтр</span>
  368.                 <b {{ catalog_active_category|default('all') == 'all' ? 'hidden' : '' }}>{{ catalog_active_category|default('all') == 'all' ? '0' : '1' }}</b>
  369.               </button>
  370.               <button class="catalog-mobile-sort" type="button" aria-expanded="false" aria-controls="catalogMobileSortPanel">
  371.                 <img class="catalog-sort-direction-icon" src="./assets/sort-arrow-3.svg" alt="" aria-hidden="true" />
  372.                 <span class="catalog-mobile-sort-label">Популярные</span>
  373.               </button>
  374.             </div>
  375.             <div class="catalog-mobile-tags" aria-label="Активные фильтры">
  376.               {% if catalog_active_category|default('all') == 'all' %}
  377.                 <button type="button" disabled>Все товары</button>
  378.               {% else %}
  379.                 {% set activeCategoryLabel = 'Категория' %}
  380.                 {% for categoryFilter in catalog_category_filters|default([]) %}
  381.                   {% if categoryFilter.id == catalog_active_category|default('all') %}
  382.                     {% set activeCategoryLabel = categoryFilter.label %}
  383.                   {% endif %}
  384.                 {% endfor %}
  385.                 <a href="{{ path('catalog', catalog_query|default('') ? {'q': catalog_query} : {}) }}">{{ activeCategoryLabel }} <span aria-hidden="true">×</span></a>
  386.                 <a href="{{ path('catalog') }}">Сбросить</a>
  387.               {% endif %}
  388.             </div>
  389.             <div class="catalog-mobile-sort-panel" id="catalogMobileSortPanel" aria-hidden="true" inert>
  390.               <button class="is-selected" type="button" data-sort-value="popular" data-sort-label="Популярные">Популярные <span aria-hidden="true">✓</span></button>
  391.               <button type="button" data-sort-value="price_asc" data-sort-label="Сначала дешёвые">Сначала дешёвые <span aria-hidden="true">✓</span></button>
  392.               <button type="button" data-sort-value="price_desc" data-sort-label="Сначала дорогие">Сначала дорогие <span aria-hidden="true">✓</span></button>
  393.               <button type="button" data-sort-value="new" data-sort-label="Сначала новинки">Сначала новинки <span aria-hidden="true">✓</span></button>
  394.               <button type="button" data-sort-value="rating" data-sort-label="По рейтингу">По рейтингу <span aria-hidden="true">✓</span></button>
  395.             </div>
  396.           </div>
  398.           <div class="catalog-meta-row">
  399.             <p class="catalog-total">Всего {{ catalog_total|default(catalog_products|default([])|length) }} товаров</p>
  400.             <div class="catalog-sort-row">
  401.               <button class="catalog-sort-icon" type="button" aria-label="Сортировать по цене">
  402.                 <img class="catalog-sort-direction-icon" src="./assets/sort-arrow-3.svg" alt="" aria-hidden="true" />
  403.               </button>
  404.               <button class="catalog-sort-icon" type="button" aria-label="Фильтр сортировки">
  405.                 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
  406.                   <path d="M4 5h12M6 10h10M9 15h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
  407.                 </svg>
  408.               </button>
  409.               <button class="catalog-sort" type="button">Популярные</button>
  410.             </div>
  411.           </div>
  413.           <div class="product-grid catalog-product-grid catalog-product-grid-primary" data-products="catalog-results-grid-primary" data-count="12"></div>
  415.           <section class="topup-row catalog-topup-row" aria-label="Пополнение Steam">
  416.             <div class="topup-info">
  417.               <img src="./assets/steam-topup.png" alt="" />
  418.               <div>
  419.                 <div class="topup-title">
  420.                   Пополнение Steam
  421.                   <span>5%</span>
  422.                 </div>
  423.                 <button class="promo-small" type="button" aria-expanded="false" aria-controls="topupPromoSection">
  424.                   <span class="promo-small-label">Ввести промокод</span>
  425.                   <svg viewBox="0 0 16 16" fill="none"><path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" /></svg>
  426.                 </button>
  427.               </div>
  428.             </div>
  430.             <label class="form-field login-field">
  431.               <img src="./assets/profile-gray.svg" alt="" />
  432.               <input type="text" name="steam-login" placeholder="Логин Steam" />
  433.               <span class="field-info" aria-hidden="true"><img src="./assets/info-i.svg" alt="" /></span>
  434.             </label>
  436.             <div class="form-field amount-field">
  437.               <div class="amount-field-shell">
  438.                 <span class="currency-mark" aria-hidden="true">
  439.                   <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none">
  440.                     <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  441.                   </svg>
  442.                 </span>
  443.                 <label class="amount-control">
  444.                   <small>Сумма</small>
  445.                   <span class="amount-value">
  446.                     <input type="text" name="amount" inputmode="numeric" value="500" maxlength="6" aria-label="Сумма" aria-expanded="false" aria-controls="topupQuickPopover" />
  447.                     <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none" aria-hidden="true">
  448.                       <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  449.                     </svg>
  450.                   </span>
  451.                 </label>
  452.                 <span class="currency-tabs" role="group" aria-label="Валюта">
  453.                   <button type="button" aria-label="Доллар">
  454.                     <svg class="currency-svg currency-svg-dollar" viewBox="0 0 10 16" fill="none" aria-hidden="true">
  455.                       <path d="M4.56073 13.3121C3.66473 13.3121 2.80607 13.1948 1.98473 12.9601C1.1634 12.7148 0.502068 12.4001 0.000734389 12.0161L0.880734 10.0641C1.36073 10.4055 1.92607 10.6881 2.57673 10.9121C3.23807 11.1255 3.90473 11.2321 4.57673 11.2321C5.08873 11.2321 5.4994 11.1841 5.80873 11.0881C6.12873 10.9815 6.3634 10.8375 6.51273 10.6561C6.66207 10.4748 6.73673 10.2668 6.73673 10.0321C6.73673 9.73345 6.6194 9.49878 6.38473 9.32812C6.15007 9.14678 5.84073 9.00278 5.45673 8.89612C5.07273 8.77878 4.64607 8.67212 4.17673 8.57612C3.71807 8.46945 3.25407 8.34145 2.78473 8.19212C2.32607 8.04278 1.90473 7.85078 1.52073 7.61612C1.13673 7.38145 0.822068 7.07212 0.576734 6.68812C0.342068 6.30412 0.224734 5.81345 0.224734 5.21612C0.224734 4.57612 0.395401 3.99478 0.736734 3.47212C1.08873 2.93878 1.6114 2.51745 2.30473 2.20812C3.00873 1.88812 3.88873 1.72812 4.94473 1.72812C5.64873 1.72812 6.34207 1.81345 7.02473 1.98412C7.7074 2.14412 8.31007 2.38945 8.83274 2.72012L8.03273 4.68812C7.51007 4.38945 6.9874 4.17078 6.46473 4.03212C5.94207 3.88278 5.43007 3.80812 4.92873 3.80812C4.4274 3.80812 4.01673 3.86678 3.69673 3.98412C3.37673 4.10145 3.1474 4.25612 3.00873 4.44812C2.87007 4.62945 2.80073 4.84278 2.80073 5.08812C2.80073 5.37612 2.91807 5.61078 3.15273 5.79212C3.3874 5.96278 3.69673 6.10145 4.08073 6.20812C4.46473 6.31478 4.88607 6.42145 5.34473 6.52812C5.81407 6.63478 6.27807 6.75745 6.73673 6.89612C7.20607 7.03478 7.63273 7.22145 8.01674 7.45612C8.40073 7.69078 8.71007 8.00012 8.94473 8.38412C9.19007 8.76812 9.31273 9.25345 9.31273 9.84012C9.31273 10.4695 9.13673 11.0455 8.78473 11.5681C8.43273 12.0908 7.90473 12.5121 7.20073 12.8321C6.5074 13.1521 5.6274 13.3121 4.56073 13.3121ZM3.95273 15.0401V0.000116348H5.55273V15.0401H3.95273Z" fill="currentColor" />
  456.                     </svg>
  457.                   </button>
  458.                   <button type="button" aria-label="Тенге">
  459.                     <svg class="currency-svg currency-svg-tenge" viewBox="0 0 10 12" fill="none" aria-hidden="true">
  460.                       <path d="M3.56819 11.2002V3.61619H0.000187516V2.27219H9.74419V3.61619H6.16019V11.2002H3.56819ZM0.000187516 1.34419V0.00019455H9.74419V1.34419H0.000187516Z" fill="currentColor" />
  461.                     </svg>
  462.                   </button>
  463.                   <button class="is-active" type="button" aria-label="Рубль">
  464.                     <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none" aria-hidden="true">
  465.                       <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  466.                     </svg>
  467.                   </button>
  468.                 </span>
  469.               </div>
  470.               <div class="topup-quick-popover" id="topupQuickPopover" aria-hidden="true" inert>
  471.                 <span class="topup-quick-popover-label">Быстрый выбор суммы</span>
  472.                 <div class="topup-quick-popover-buttons" aria-label="Быстрый выбор суммы">
  473.                   <button class="is-active" type="button" data-quick-amount="500">500 ₽</button>
  474.                   <button type="button" data-quick-amount="1000">1 000 ₽</button>
  475.                   <button type="button" data-quick-amount="2500">2 500 ₽</button>
  476.                   <button type="button" data-quick-amount="5000">5 000 ₽</button>
  477.                 </div>
  478.               </div>
  479.             </div>
  481.             <button class="pay-btn" type="button" aria-expanded="false" aria-controls="topupPaymentSection">Оплатить 500<svg class="currency-svg currency-svg-ruble pay-currency-icon" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" /></svg></button>
  483.             <div class="topup-expand" id="topupDetails" aria-hidden="true" inert>
  484.               <div class="topup-expand-clip">
  485.                 <div class="topup-expand-content">
  486.                   <section class="topup-expand-section topup-promo-section" id="topupPromoSection" aria-hidden="true" inert>
  487.                     <div class="topup-expand-section-inner">
  488.                       <label class="topup-detail-label" for="topupPromoInput">Промокод</label>
  489.                       <div class="topup-promo-row">
  490.                         <label class="topup-promo-input">
  491.                           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  492.                             <path d="M4 10h16v10H4V10Zm0-4h16v4H4V6Zm8 0v14M12 6c-1.7-3.1-5.2-2.8-5.2-.5C6.8 7.2 9 7.5 12 6Zm0 0c1.7-3.1 5.2-2.8 5.2-.5C17.2 7.2 15 7.5 12 6Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
  493.                           </svg>
  494.                           <input id="topupPromoInput" type="text" placeholder="Введите промокод" autocomplete="off" />
  495.                         </label>
  496.                         <button class="topup-promo-apply" type="button">Применить</button>
  497.                       </div>
  498.                     </div>
  499.                   </section>
  501.                   <div class="topup-promo-benefit" aria-live="polite" aria-hidden="true">
  502.                     <img src="./assets/discount-percent.png" alt="" />
  503.                     <strong>Скидка <span>5%</span> - вы экономите <b data-promo-saving>25 ₽</b></strong>
  504.                     <small><span>Вы платите примерно на 12% меньше,</span><span>чем на других площадках</span></small>
  505.                   </div>
  507.                   <section class="topup-expand-section topup-payment-section" id="topupPaymentSection" aria-hidden="true" inert>
  508.                     <div class="topup-expand-section-inner">
  509.                       <h3 class="topup-detail-label topup-payment-title">Способ оплаты</h3>
  510.                       <div class="topup-payment-methods" role="radiogroup" aria-label="Способ оплаты">
  511.                         <button class="topup-payment-method is-selected" type="button" role="radio" aria-checked="true" data-fee="0">
  512.                           <span class="topup-payment-icon"><img src="./assets/payment-sbp.svg" alt="" /></span>
  513.                           <span class="topup-payment-copy"><b>СБП</b><small>Без комиссии</small></span>
  514.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  515.                         </button>
  516.                         <button class="topup-payment-method" type="button" role="radio" aria-checked="false" data-fee="2">
  517.                           <span class="topup-payment-icon"><img src="./assets/payment-mir-option.svg" alt="" /></span>
  518.                           <span class="topup-payment-copy"><b>Карта МИР</b><small>+2% комиссия</small></span>
  519.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  520.                         </button>
  521.                         <button class="topup-payment-method" type="button" role="radio" aria-checked="false" data-fee="0">
  522.                           <span class="topup-payment-icon"><img src="./assets/payment-btc.svg" alt="" /></span>
  523.                           <span class="topup-payment-copy"><b>Криптовалюта</b><small>Без комиссии</small></span>
  524.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  525.                         </button>
  526.                       </div>
  528.                       <div class="topup-total-row">
  529.                         <div class="topup-total-copy">
  530.                           <small>К зачислению на Steam</small>
  531.                           <span><strong data-topup-credit>500 ₽</strong><b data-topup-fee-badge>Без комиссии</b></span>
  532.                         </div>
  533.                         <button class="topup-final-pay" type="button">Оплатить 500₽</button>
  534.                       </div>
  535.                     </div>
  536.                   </section>
  537.                 </div>
  538.               </div>
  539.             </div>
  540.           </section>
  542.           <div class="product-grid catalog-product-grid catalog-product-grid-secondary" data-products="catalog-results-grid-secondary" data-count="8"></div>
  544.           <div class="catalog-loader" role="status">
  545.             <div class="catalog-loader-dots" aria-hidden="true"><span></span><span></span><span></span></div>
  546.             <strong>Подгружаем ещё товары...</strong>
  547.           </div>
  548.         </section>
  549.       </section>
  551.     <footer class="shell site-footer">
  552.       <div class="footer-top">
  553.         <img src="./assets/logo.svg" alt="PlayPapa" />
  554.         <nav>
  555.           <a href="#">Стать продавцом</a>
  556.           <a href="#">Бонусы</a>
  557.           <a href="#">Поддержка</a>
  558.           <a href="#">Гарантии</a>
  559.           <a href="#">Отзывы</a>
  560.         </nav>
  561.       </div>
  562.       <div class="footer-mid">
  563.         <div class="footer-social">
  564.           <b>PlayPapa</b>
  565.           <a class="social-icon" href="#" aria-label="VK"><img src="./assets/footer-vk.svg" alt="" /></a>
  566.           <a class="social-icon" href="#" aria-label="Telegram"><img src="./assets/footer-telegram.svg" alt="" /></a>
  567.           <a class="footer-channel" href="#">Polk Zone</a>
  568.           <a class="social-icon" href="#" aria-label="TikTok"><img src="./assets/footer-tiktok.svg" alt="" /></a>
  569.           <a class="social-icon" href="#" aria-label="YouTube"><img src="./assets/footer-youtube.svg" alt="" /></a>
  570.         </div>
  571.         <div class="payments">
  572.           <span><img src="./assets/payment-visa.svg" alt="VISA" /></span>
  573.           <span><img src="./assets/payment-mir.svg" alt="МИР" /></span>
  574.           <span><img src="./assets/payment-mastercard.svg" alt="Mastercard" /></span>
  575.         </div>
  576.       </div>
  577.       <div class="footer-bottom">
  578.         <nav>
  579.           <a href="#">Политика конфиденциальности</a>
  580.           <a href="#">Соглашение</a>
  581.           <a href="#">Договор-оферта</a>
  582.         </nav>
  583.         <span>© 2026 PlayPapa</span>
  584.       </div>
  585.     </footer>
  586.     </main>
  588.     <section class="mobile-search-layer" id="mobileSearch" role="dialog" aria-modal="true" aria-label="Мобильный поиск" aria-hidden="true" inert>
  589.       <div class="mobile-search-page">
  590.         <header class="mobile-search-topbar">
  591.           <button class="mobile-search-back" id="mobileSearchBack" type="button" aria-label="Назад">
  592.             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  593.               <path d="M19 12H5m6-6-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
  594.             </svg>
  595.           </button>
  596.           <form class="mobile-search-form" role="search">
  597.             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  598.               <circle cx="10.8" cy="10.8" r="6.8" stroke="currentColor" stroke-width="2" />
  599.               <path d="m16 16 4.2 4.2" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  600.             </svg>
  601.             <input type="search" name="mobile-query" placeholder="Найти товар" aria-label="Найти товар" autocomplete="off" />
  602.           </form>
  603.         </header>
  605.         <section class="mobile-search-section mobile-search-services-section">
  606.           <h2>Игры и игровые сервисы</h2>
  607.           <div class="mobile-search-cards" aria-label="Игры и игровые сервисы">
  608.             <a class="mobile-search-card" href="#"><img src="./assets/service-steam.png" alt="" /><strong>Steam</strong></a>
  609.             <a class="mobile-search-card" href="#"><img src="./assets/service-telegram.png" alt="" /><strong>Telegram</strong></a>
  610.             <a class="mobile-search-card" href="#"><img src="./assets/service-roblox.png" alt="" /><strong>Roblox</strong></a>
  611.             <a class="mobile-search-card" href="#"><img src="./assets/service-brawl.png" alt="" /><strong>Brawl...</strong></a>
  612.             <a class="mobile-search-card mobile-search-more" href="#">
  613.               <span><img src="./assets/more-service.svg" alt="" /></span>
  614.               <strong>еще 841</strong>
  615.             </a>
  616.           </div>
  617.         </section>
  619.         <section class="mobile-search-section mobile-search-new-section">
  620.           <h2>Новинки и предзаказы</h2>
  621.           <div class="mobile-search-cards mobile-search-game-cards" aria-label="Новинки и предзаказы">
  622.             <a class="mobile-search-card" href="#"><img src="./assets/article-paradise.png" alt="" /><span>Gothic 1<br />Remake</span></a>
  623.             <a class="mobile-search-card" href="#"><img src="./assets/article-sale.png" alt="" /><span>Forza<br />Horizon 6</span></a>
  624.             <a class="mobile-search-card" href="#"><img src="./assets/product-pubg.png" alt="" /><span>Assassin's<br />Creed:...</span></a>
  625.             <a class="mobile-search-card" href="#"><img src="./assets/article-mobile.png" alt="" /><span>007 First<br />Light</span></a>
  626.             <a class="mobile-search-card" href="#"><img src="./assets/article-sale.png" alt="" /><span>Call of Duty:<br />Modern...</span></a>
  627.           </div>
  628.         </section>
  630.         <nav class="mobile-search-platforms" aria-label="Разделы каталога">
  631.           <a href="#"><span>Steam</span><span aria-hidden="true">›</span></a>
  632.           <a href="#"><span>PlayStation</span><span aria-hidden="true">›</span></a>
  633.           <a href="#"><span>Xbox</span><span aria-hidden="true">›</span></a>
  634.           <a href="#"><span>Nintendo</span><span aria-hidden="true">›</span></a>
  635.           <a href="#"><span>Battle.net</span><span aria-hidden="true">›</span></a>
  636.           <a href="#"><span>Подборки</span><span aria-hidden="true">›</span></a>
  637.         </nav>
  638.       </div>
  639.     </section>
  641.     <section class="auth-modal-layer" id="authModal" data-auth-screen="login" aria-hidden="true" inert>
  642.       <div class="auth-modal-dialog" role="dialog" aria-modal="true" aria-label="Авторизация">
  643.         <div class="auth-toast auth-toast-success" aria-live="polite">
  644.           <img src="./assets/auth-check.svg" alt="" />
  645.           <span>Письмо отправлено на почту</span>
  646.         </div>
  647.         <div class="auth-toast auth-toast-error" aria-live="polite">
  648.           <img src="./assets/auth-error.svg" alt="" />
  649.           <span>Ошибка отправки письма</span>
  650.         </div>
  652.         <button class="auth-close" type="button" aria-label="Закрыть" data-auth-close>
  653.           <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
  654.             <path d="m4.5 4.5 7 7m0-7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  655.           </svg>
  656.         </button>
  658.         <img class="auth-logo" src="./assets/logo.svg" alt="PlayPapa" />
  660.         <section class="auth-view auth-view-login" aria-label="Вход">
  661.           <h2>С возвращением!</h2>
  662.           <div class="auth-tabs" role="tablist" aria-label="Авторизация">
  663.             <button class="auth-tab" type="button" role="tab" data-auth-screen-target="login">Вход</button>
  664.             <button class="auth-tab" type="button" role="tab" data-auth-screen-target="register">Регистрация</button>
  665.           </div>
  666.           <form class="auth-form" data-auth-form="login">
  667.             <label class="auth-field">
  668.               <img src="./assets/auth-user.svg" alt="" />
  669.               <input type="text" name="login" placeholder="Логин" autocomplete="username" />
  670.             </label>
  671.             <label class="auth-field">
  672.               <img src="./assets/auth-lock.svg" alt="" />
  673.               <input type="password" name="password" placeholder="Пароль" autocomplete="current-password" />
  674.             </label>
  675.             <button class="auth-link auth-forgot" type="button" data-auth-screen-target="recover">Забыли пароль?</button>
  676.             <button class="auth-primary" type="submit">Войти</button>
  677.           </form>
  678.           <div class="auth-social-block">
  679.             <div class="auth-divider"><span>Другие методы входа</span></div>
  680.             <div class="auth-socials" aria-label="Другие методы входа">
  681.               <button class="auth-social auth-social-telegram" type="button" aria-label="Telegram"><img src="./assets/footer-telegram.svg" alt="" /></button>
  682.               <button class="auth-social auth-social-vk" type="button" aria-label="VK"><img src="./assets/footer-vk.svg" alt="" /></button>
  683.               <button class="auth-social auth-social-steam" type="button" aria-label="Steam"><img src="./assets/auth-steam.svg" alt="" /></button>
  684.               <button class="auth-social auth-social-yandex" type="button" aria-label="Яндекс"><img src="./assets/auth-yandex.svg" alt="" /></button>
  685.             </div>
  686.             <p class="auth-recaptcha">Защищено reCAPTCHA · <a href="#">Политика</a> и <a href="#">Условия</a></p>
  687.           </div>
  688.         </section>
  690.         <section class="auth-view auth-view-register" aria-label="Регистрация">
  691.           <h2>Создание аккаунта</h2>
  692.           <div class="auth-tabs" role="tablist" aria-label="Авторизация">
  693.             <button class="auth-tab" type="button" role="tab" data-auth-screen-target="login">Вход</button>
  694.             <button class="auth-tab" type="button" role="tab" data-auth-screen-target="register">Регистрация</button>
  695.           </div>
  696.           <form class="auth-form" data-auth-form="register">
  697.             <label class="auth-field">
  698.               <img src="./assets/auth-user.svg" alt="" />
  699.               <input type="text" name="register-login" placeholder="Логин" autocomplete="username" />
  700.             </label>
  701.             <label class="auth-field">
  702.               <img src="./assets/auth-mail.svg" alt="" />
  703.               <input type="email" name="register-email" placeholder="E-mail" autocomplete="email" />
  704.             </label>
  705.             <label class="auth-field">
  706.               <img src="./assets/auth-lock.svg" alt="" />
  707.               <input type="password" name="register-password" placeholder="Пароль" autocomplete="new-password" />
  708.             </label>
  709.             <label class="auth-field">
  710.               <img src="./assets/auth-lock.svg" alt="" />
  711.               <input type="password" name="register-password-repeat" placeholder="Повторите пароль" autocomplete="new-password" />
  712.             </label>
  713.             <label class="auth-consent">
  714.               <input type="checkbox" checked />
  715.               <span aria-hidden="true"></span>
  716.               <b>Я принимаю <a href="#">условия</a> и <a href="#">политику конфиденциальности</a>.</b>
  717.             </label>
  718.             <button class="auth-primary" type="submit">Создать аккаунт</button>
  719.           </form>
  720.           <div class="auth-social-block">
  721.             <div class="auth-divider"><span>Другие методы входа</span></div>
  722.             <div class="auth-socials" aria-label="Другие методы входа">
  723.               <button class="auth-social auth-social-telegram" type="button" aria-label="Telegram"><img src="./assets/footer-telegram.svg" alt="" /></button>
  724.               <button class="auth-social auth-social-vk" type="button" aria-label="VK"><img src="./assets/footer-vk.svg" alt="" /></button>
  725.               <button class="auth-social auth-social-steam" type="button" aria-label="Steam"><img src="./assets/auth-steam.svg" alt="" /></button>
  726.               <button class="auth-social auth-social-yandex" type="button" aria-label="Яндекс"><img src="./assets/auth-yandex.svg" alt="" /></button>
  727.             </div>
  728.             <p class="auth-recaptcha">Защищено reCAPTCHA · <a href="#">Политика</a> и <a href="#">Условия</a></p>
  729.           </div>
  730.         </section>
  732.         <section class="auth-view auth-view-recover" aria-label="Восстановление пароля">
  733.           <button class="auth-back" type="button" data-auth-screen-target="login">
  734.             <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
  735.               <path d="M10.5 3.5 6 8l4.5 4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
  736.             </svg>
  737.             <span>Назад ко входу</span>
  738.           </button>
  739.           <h2>Восстановление пароля</h2>
  740.           <p class="auth-subtitle">Введите e-mail - пришлем ссылку для сброса пароля.</p>
  741.           <form class="auth-form" data-auth-form="recover">
  742.             <label class="auth-field">
  743.               <img src="./assets/auth-mail.svg" alt="" />
  744.               <input type="email" name="recover-email" placeholder="you@mail.ru" autocomplete="email" />
  745.             </label>
  746.             <button class="auth-primary" type="submit">Отправить ссылку</button>
  747.           </form>
  748.           <div class="auth-social-block">
  749.             <div class="auth-divider"><span>Другие методы входа</span></div>
  750.             <div class="auth-socials" aria-label="Другие методы входа">
  751.               <button class="auth-social auth-social-telegram" type="button" aria-label="Telegram"><img src="./assets/footer-telegram.svg" alt="" /></button>
  752.               <button class="auth-social auth-social-vk" type="button" aria-label="VK"><img src="./assets/footer-vk.svg" alt="" /></button>
  753.               <button class="auth-social auth-social-steam" type="button" aria-label="Steam"><img src="./assets/auth-steam.svg" alt="" /></button>
  754.               <button class="auth-social auth-social-yandex" type="button" aria-label="Яндекс"><img src="./assets/auth-yandex.svg" alt="" /></button>
  755.             </div>
  756.             <p class="auth-recaptcha">Защищено reCAPTCHA · <a href="#">Политика</a> и <a href="#">Условия</a></p>
  757.           </div>
  758.         </section>
  760.         <section class="auth-view auth-view-success" aria-label="Письмо отправлено">
  761.           <div class="auth-status auth-status-success"><img src="./assets/auth-check.svg" alt="" /></div>
  762.           <h2>Проверьте почту</h2>
  763.           <p class="auth-message">Мы отправили ссылку для сброса пароля на <strong>you@mail.ru</strong>. Перейдите по ней, чтобы задать новый пароль.</p>
  764.           <button class="auth-text-action" type="button" data-auth-screen-target="recover">Не пришло письмо? Отправить повторно</button>
  765.           <button class="auth-secondary" type="button" data-auth-screen-target="login">Вернуться ко входу</button>
  766.         </section>
  768.         <section class="auth-view auth-view-error" aria-label="Ошибка отправки">
  769.           <div class="auth-status auth-status-error"><img src="./assets/auth-error.svg" alt="" /></div>
  770.           <h2>Не удалось отправить</h2>
  771.           <p class="auth-message">Письмо не отправлено - возможно, неверный адрес или проблема со связью. Проверьте e-mail и попробуйте снова.</p>
  772.           <button class="auth-primary" type="button" data-auth-screen-target="recover">Попробовать снова</button>
  773.           <button class="auth-support" type="button">Написать в поддержку</button>
  774.         </section>
  775.       </div>
  776.     </section>
  778.     <div data-mobile-panel></div>
  779.     <script src="./assets/mobile-panel.js"></script>
  781.     <script>
  782.       const root = document.documentElement;
  783.       const themeSwitch = document.querySelector(".theme-switch");
  784.       const themeButtons = document.querySelectorAll(".theme-btn[data-theme]");
  786.       const preloader = document.getElementById("pagePreloader");
  787.       if (preloader) {
  788.         const preloaderStart = window.__preloaderStart || performance.now();
  789.         const minPreloaderTime = 600;
  790.         const maxPreloaderTime = 3000;
  791.         let preloaderHidden = false;
  793.         const hidePreloader = () => {
  794.           if (preloaderHidden) return;
  795.           preloaderHidden = true;
  796.           preloader.classList.add("is-hiding");
  797.           document.body.classList.remove("preloader-active");
  798.           window.setTimeout(() => preloader.remove(), 260);
  799.         };
  801.         const requestPreloaderHide = () => {
  802.           const elapsed = performance.now() - preloaderStart;
  803.           window.setTimeout(hidePreloader, Math.max(minPreloaderTime - elapsed, 0));
  804.         };
  806.         window.setTimeout(hidePreloader, Math.max(maxPreloaderTime - (performance.now() - preloaderStart), 0));
  808.         if (document.readyState === "complete") {
  809.           requestPreloaderHide();
  810.         } else {
  811.           window.addEventListener("load", requestPreloaderHide, { once: true });
  812.         }
  813.       }
  815.       const setTheme = (theme, animate = false) => {
  816.         if (animate) {
  817.           document.body.classList.remove("theme-animating");
  818.           void document.body.offsetWidth;
  819.           document.body.classList.add("theme-animating");
  820.         }
  822.         root.dataset.theme = theme;
  823.         try {
  824.           localStorage.setItem("playpapa-theme", theme);
  825.         } catch {}
  827.         themeButtons.forEach((button) => {
  828.           const active = button.dataset.theme === theme;
  829.           button.classList.toggle("is-active", active);
  830.           button.setAttribute("aria-pressed", active ? "true" : "false");
  831.         });
  833.         if (animate) window.setTimeout(() => document.body.classList.remove("theme-animating"), 560);
  834.       };
  836.       setTheme(root.dataset.theme === "dark" ? "dark" : "light");
  837.       themeButtons.forEach((button) => {
  838.         button.addEventListener("click", () => setTheme(button.dataset.theme, true));
  839.       });
  840.       themeSwitch?.addEventListener("click", (event) => {
  841.         if (event.target.closest(".theme-btn")) return;
  842.         setTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
  843.       });
  845.       const mobileSearchLayer = document.getElementById("mobileSearch");
  846.       const mobileSearchTrigger = document.querySelector("[data-mobile-search-trigger]");
  847.       const mobileSearchBack = document.getElementById("mobileSearchBack");
  849.       const setMobileSearchOpen = (open) => {
  850.         if (!mobileSearchLayer) return;
  851.         mobileSearchLayer.classList.toggle("is-open", open);
  852.         mobileSearchLayer.setAttribute("aria-hidden", open ? "false" : "true");
  853.         mobileSearchLayer.toggleAttribute("inert", !open);
  854.         mobileSearchTrigger?.setAttribute("aria-expanded", open ? "true" : "false");
  855.         document.body.classList.toggle("mobile-search-open", open);
  856.         if (open) mobileSearchLayer.scrollTop = 0;
  857.       };
  859.       mobileSearchTrigger?.addEventListener("click", (event) => {
  860.         event.preventDefault();
  861.         setProfileOpen(false);
  862.         setCatalogOpen(false);
  863.         setMobileSearchOpen(true);
  864.       });
  866.       mobileSearchBack?.addEventListener("click", () => {
  867.         setMobileSearchOpen(false);
  868.         mobileSearchTrigger?.focus();
  869.       });
  871.       mobileSearchLayer?.querySelector(".mobile-search-form")?.addEventListener("submit", (event) => event.preventDefault());
  872.       mobileSearchLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  873.         link.addEventListener("click", (event) => event.preventDefault());
  874.       });
  876.       document.addEventListener("keydown", (event) => {
  877.         if (event.key !== "Escape" || !mobileSearchLayer?.classList.contains("is-open")) return;
  878.         setMobileSearchOpen(false);
  879.         mobileSearchTrigger?.focus();
  880.       });
  882.       const profileMenu = document.querySelector(".profile-menu");
  883.       const profileButton = profileMenu?.querySelector(".profile-btn");
  884.       const profilePopover = document.getElementById("profilePopover");
  886.       const setProfileOpen = (open, returnFocus = false) => {
  887.         if (!profileMenu || !profilePopover || !profileButton) return;
  888.         profileMenu.classList.toggle("is-open", open);
  889.         profileButton.setAttribute("aria-expanded", open ? "true" : "false");
  890.         profilePopover.setAttribute("aria-hidden", open ? "false" : "true");
  891.         profilePopover.toggleAttribute("inert", !open);
  892.         document.body.classList.toggle("profile-open", open);
  893.         if (returnFocus) profileButton.focus();
  894.       };
  896.       profileButton?.addEventListener("click", (event) => {
  897.         event.stopPropagation();
  898.         const shouldOpen = !profileMenu?.classList.contains("is-open");
  899.         setProfileOpen(shouldOpen);
  900.       });
  902.       profilePopover?.querySelectorAll(".profile-menu-item:not(:disabled)").forEach((item) => {
  903.         item.addEventListener("click", () => setProfileOpen(false));
  904.       });
  906.       document.addEventListener("pointerdown", (event) => {
  907.         if (!profileMenu?.classList.contains("is-open") || profileMenu.contains(event.target)) return;
  908.         setProfileOpen(false);
  909.       });
  911.       document.addEventListener("keydown", (event) => {
  912.         if (event.key !== "Escape" || !profileMenu?.classList.contains("is-open")) return;
  913.         setProfileOpen(false, true);
  914.       });
  916.       const catalogLayer = document.getElementById("catalogMegaMenu");
  917.       const catalogButton = document.querySelector(".catalog-btn:not([href])");
  918.       const catalogTriggers = [catalogButton, ...document.querySelectorAll("[data-catalog-trigger]")].filter(Boolean);
  919.       const catalogSideLinks = document.querySelectorAll(".catalog-side-link");
  920.       const catalogFeaturedItems = [
  921.         ["service-steam.png", "Пополнение Steam"],
  922.         ["service-brawl.png", "Game Pass"],
  923.         ["service-steam.png", "Пополнение PSN"],
  924.         ["service-brawl.png", "PS Plus"],
  925.         ["service-pubg.png", "Grand Theft Auto V"],
  926.         ["service-roblox.png", "Minecraft"],
  927.         ["service-playstation.png", "Diablo 4"],
  928.         ["service-mobile.png", "ARC Raiders"],
  929.         ["service-chatgpt.png", "Dead by Daylight"],
  930.       ];
  931.       const catalogNewItems = [
  932.         ["article-paradise.png", "Gothic 1 Remake"],
  933.         ["article-sale.png", "Forza Horizon 6"],
  934.         ["product-pubg.png", "Assassin's Creed: Black..."],
  935.         ["article-mobile.png", "007 First Light"],
  936.         ["article-sale.png", "Call of Duty: Modern..."],
  937.         ["product-pubg.png", "Marvel's Wolverine"],
  938.         ["article-paradise.png", "UFC 6"],
  939.         ["article-sale.png", "Subnautica 2"],
  940.         ["product-pubg.png", "SILENT HILL: Townfall"],
  941.       ];
  943.       const catalogItemMarkup = ([image, label]) => `
  944.         <a class="catalog-showcase-item" href="#" aria-label="${label}">
  945.           <img src="./assets/${image}" alt="">
  946.           <span>${label}</span>
  947.         </a>
  948.       `;
  950.       const catalogFeatured = document.getElementById("catalogFeatured");
  951.       const catalogNew = document.getElementById("catalogNew");
  952.       if (catalogFeatured) catalogFeatured.innerHTML = catalogFeaturedItems.map(catalogItemMarkup).join("");
  953.       if (catalogNew) catalogNew.innerHTML = catalogNewItems.map(catalogItemMarkup).join("");
  955.       const setCatalogOpen = (open) => {
  956.         if (!catalogLayer) return;
  957.         catalogLayer.classList.toggle("is-open", open);
  958.         catalogLayer.setAttribute("aria-hidden", open ? "false" : "true");
  959.         catalogLayer.toggleAttribute("inert", !open);
  960.         document.body.classList.toggle("catalog-open", open);
  961.         catalogTriggers.forEach((trigger) => trigger.setAttribute("aria-expanded", open ? "true" : "false"));
  962.       };
  964.       catalogTriggers.forEach((trigger) => {
  965.         trigger.addEventListener("click", (event) => {
  966.           event.preventDefault();
  967.           setProfileOpen(false);
  968.           setMobileSearchOpen(false);
  969.           setCatalogOpen(!catalogLayer?.classList.contains("is-open"));
  970.         });
  971.       });
  973.       catalogSideLinks.forEach((link) => {
  974.         link.addEventListener("click", () => {
  975.           catalogSideLinks.forEach((item) => item.classList.toggle("is-active", item === link));
  976.         });
  977.       });
  979.       catalogLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  980.         link.addEventListener("click", (event) => event.preventDefault());
  981.       });
  983.       document.addEventListener("pointerdown", (event) => {
  984.         if (!catalogLayer?.classList.contains("is-open")) return;
  985.         if (catalogLayer.contains(event.target) || catalogTriggers.some((trigger) => trigger.contains(event.target))) return;
  986.         setCatalogOpen(false);
  987.       });
  989.       document.addEventListener("keydown", (event) => {
  990.         if (event.key !== "Escape" || !catalogLayer?.classList.contains("is-open")) return;
  991.         setCatalogOpen(false);
  992.         catalogButton?.focus();
  993.       });
  996.       const authModal = document.getElementById("authModal");
  997.       const authDialog = authModal?.querySelector(".auth-modal-dialog");
  998.       const authScreens = new Set(["login", "register", "recover", "success", "error"]);
  999.       let authReturnFocus = null;
  1001.       const syncAuthScreenState = (screen = "login") => {
  1002.         if (!authModal || !authScreens.has(screen)) return;
  1003.         authModal.dataset.authScreen = screen;
  1004.         authModal.querySelectorAll(".auth-tab").forEach((tab) => {
  1005.           const active = tab.dataset.authScreenTarget === screen;
  1006.           tab.setAttribute("aria-selected", active ? "true" : "false");
  1007.           tab.tabIndex = active ? 0 : -1;
  1008.         });
  1009.         authModal.querySelectorAll(".auth-view").forEach((view) => {
  1010.           const active = view.classList.contains(`auth-view-${screen}`);
  1011.           view.setAttribute("aria-hidden", active ? "false" : "true");
  1012.         });
  1013.       };
  1015.       const setAuthScreen = (screen = "login") => {
  1016.         if (!authModal || !authScreens.has(screen)) return;
  1017.         syncAuthScreenState(screen);
  1018.       };
  1020.       const setAuthOpen = (open, screen = "login", trigger = null) => {
  1021.         if (!authModal) return;
  1022.         if (open) {
  1023.           authReturnFocus = trigger || document.activeElement;
  1024.           setProfileOpen(false);
  1025.           setCatalogOpen(false);
  1026.           setMobileSearchOpen(false);
  1027.           setAuthScreen(screen);
  1028.         }
  1029.         authModal.classList.toggle("is-open", open);
  1030.         authModal.setAttribute("aria-hidden", open ? "false" : "true");
  1031.         authModal.toggleAttribute("inert", !open);
  1032.         document.body.classList.toggle("auth-modal-open", open);
  1033.         if (open) {
  1034.           window.setTimeout(() => authModal.querySelector("[data-auth-close]")?.focus(), 80);
  1035.         } else if (authReturnFocus && typeof authReturnFocus.focus === "function") {
  1036.           authReturnFocus.focus();
  1037.           authReturnFocus = null;
  1038.         }
  1039.       };
  1041.       document.querySelectorAll("[data-auth-open]").forEach((trigger) => {
  1042.         trigger.addEventListener("click", (event) => {
  1043.           event.preventDefault();
  1044.           setAuthOpen(true, trigger.dataset.authOpen || "login", trigger);
  1045.         });
  1046.       });
  1048.       authModal?.querySelectorAll("[data-auth-screen-target]").forEach((control) => {
  1049.         control.addEventListener("click", () => setAuthScreen(control.dataset.authScreenTarget || "login"));
  1050.       });
  1052.       authModal?.querySelectorAll("[data-auth-close]").forEach((control) => {
  1053.         control.addEventListener("click", () => setAuthOpen(false));
  1054.       });
  1056.       authModal?.addEventListener("pointerdown", (event) => {
  1057.         if (event.target !== authModal || authDialog?.contains(event.target)) return;
  1058.         setAuthOpen(false);
  1059.       });
  1061.       authModal?.querySelectorAll(".auth-form").forEach((form) => {
  1062.         form.addEventListener("submit", (event) => {
  1063.           event.preventDefault();
  1064.           if (form.dataset.authForm === "recover") {
  1065.             const email = form.querySelector('input[type="email"]')?.value.trim().toLowerCase() || "";
  1066.             setAuthScreen(email.includes("error") || email.includes("fail") ? "error" : "success");
  1067.           }
  1068.         });
  1069.       });
  1071.       document.addEventListener("keydown", (event) => {
  1072.         if (event.key !== "Escape" || !authModal?.classList.contains("is-open")) return;
  1073.         setAuthOpen(false);
  1074.       });
  1076.       const initialAuthScreen = (() => {
  1077.         const param = new URLSearchParams(window.location.search).get("auth");
  1078.         const hash = window.location.hash.startsWith("#auth-") ? window.location.hash.replace("#auth-", "") : "";
  1079.         return authScreens.has(param) ? param : authScreens.has(hash) ? hash : "";
  1080.       })();
  1081.       setAuthScreen("login");
  1082.       if (initialAuthScreen) setAuthOpen(true, initialAuthScreen);
  1084.       if (window.matchMedia("(pointer: coarse)").matches) {
  1085.         let lastTouchEnd = 0;
  1086.         const stopZoom = (event) => {
  1087.           event.preventDefault();
  1088.         };
  1089.         const stopMultiTouch = (event) => {
  1090.           if (event.touches && event.touches.length > 1) event.preventDefault();
  1091.         };
  1092.         document.addEventListener("gesturestart", stopZoom, { passive: false });
  1093.         document.addEventListener("gesturechange", stopZoom, { passive: false });
  1094.         document.addEventListener("gestureend", stopZoom, { passive: false });
  1095.         document.addEventListener("touchstart", stopMultiTouch, { passive: false });
  1096.         document.addEventListener("touchmove", stopMultiTouch, { passive: false });
  1097.         document.addEventListener(
  1098.           "touchend",
  1099.           (event) => {
  1100.             const now = Date.now();
  1101.             if (now - lastTouchEnd < 320) event.preventDefault();
  1102.             lastTouchEnd = now;
  1103.           },
  1104.           { passive: false }
  1105.         );
  1106.       }
  1108.       const amountInput = document.querySelector('input[name="amount"]');
  1109.       const amountField = document.querySelector(".amount-field");
  1110.       const topupRow = document.querySelector(".topup-row");
  1111.       const servicesCard = document.querySelector(".services-card") || topupRow;
  1112.       const topupQuickPopover = document.getElementById("topupQuickPopover");
  1113.       const payButton = document.querySelector(".pay-btn");
  1114.       const payCurrencyIcon = payButton?.querySelector(".pay-currency-icon");
  1115.       const promoToggleButton = document.querySelector(".promo-small");
  1116.       const promoToggleLabel = promoToggleButton?.querySelector(".promo-small-label");
  1117.       const topupDetails = document.getElementById("topupDetails");
  1118.       const topupPromoSection = document.getElementById("topupPromoSection");
  1119.       const topupPaymentSection = document.getElementById("topupPaymentSection");
  1120.       const topupPromoInput = document.getElementById("topupPromoInput");
  1121.       const topupPromoApply = document.querySelector(".topup-promo-apply");
  1122.       const topupPromoBenefit = document.querySelector(".topup-promo-benefit");
  1123.       const topupPromoSaving = document.querySelector("[data-promo-saving]");
  1124.       const topupQuickAmounts = document.querySelectorAll("[data-quick-amount]");
  1125.       const topupPaymentMethods = document.querySelectorAll(".topup-payment-method");
  1126.       const topupCredit = document.querySelector("[data-topup-credit]");
  1127.       const topupFeeBadge = document.querySelector("[data-topup-fee-badge]");
  1128.       const topupFinalPay = document.querySelector(".topup-final-pay");
  1129.       const maxTopupAmount = 100000;
  1130.       let promoSectionOpen = false;
  1131.       let paymentSectionOpen = false;
  1132.       let promoApplied = false;
  1133.       let selectedPaymentFee = 0;
  1134.       let quickPopoverOpen = false;
  1136.       const formatRubles = (value) => new Intl.NumberFormat("ru-RU").format(Math.max(0, Math.round(value)));
  1138.       const syncQuickPopover = () => {
  1139.         topupQuickPopover?.classList.toggle("is-open", quickPopoverOpen);
  1140.         topupQuickPopover?.setAttribute("aria-hidden", quickPopoverOpen ? "false" : "true");
  1141.         topupQuickPopover?.toggleAttribute("inert", !quickPopoverOpen);
  1142.         amountInput?.setAttribute("aria-expanded", quickPopoverOpen ? "true" : "false");
  1143.         servicesCard?.classList.toggle("has-quick-popover", quickPopoverOpen);
  1144.       };
  1146.       const syncTopupExpansion = () => {
  1147.         const detailsOpen = promoSectionOpen || paymentSectionOpen;
  1148.         topupDetails?.classList.toggle("is-open", detailsOpen);
  1149.         topupDetails?.setAttribute("aria-hidden", detailsOpen ? "false" : "true");
  1150.         topupDetails?.toggleAttribute("inert", !detailsOpen);
  1152.         topupPromoSection?.classList.toggle("is-visible", promoSectionOpen);
  1153.         topupPromoSection?.setAttribute("aria-hidden", promoSectionOpen ? "false" : "true");
  1154.         topupPromoSection?.toggleAttribute("inert", !promoSectionOpen);
  1155.         promoToggleButton?.setAttribute("aria-expanded", promoSectionOpen ? "true" : "false");
  1156.         if (promoToggleLabel) promoToggleLabel.textContent = promoSectionOpen ? "Скрыть промокод" : "Ввести промокод";
  1158.         topupPaymentSection?.classList.toggle("is-visible", paymentSectionOpen);
  1159.         topupPaymentSection?.setAttribute("aria-hidden", paymentSectionOpen ? "false" : "true");
  1160.         topupPaymentSection?.toggleAttribute("inert", !paymentSectionOpen);
  1161.         payButton?.setAttribute("aria-expanded", paymentSectionOpen ? "true" : "false");
  1162.         servicesCard?.classList.toggle("is-payment-open", paymentSectionOpen);
  1163.       };
  1165.       const syncAmount = () => {
  1166.         if (!amountInput) return;
  1167.         let value = amountInput.value.replace(/\D/g, "");
  1168.         if (value) value = String(Math.min(Number(value), maxTopupAmount));
  1169.         amountInput.value = value;
  1170.         amountInput.style.setProperty("--amount-digits", String(Math.max(value.length, 3)));
  1171.         const numericAmount = Number(value || 0);
  1173.         if (payButton && payCurrencyIcon) {
  1174.           payButton.textContent = `Оплатить ${value || 0}`;
  1175.           payButton.append(payCurrencyIcon);
  1176.         }
  1178.         topupQuickAmounts.forEach((button) => {
  1179.           button.classList.toggle("is-active", Number(button.dataset.quickAmount) === numericAmount);
  1180.         });
  1182.         if (topupCredit) topupCredit.textContent = `${formatRubles(numericAmount)} ₽`;
  1183.         const amountToPay = numericAmount * (1 + selectedPaymentFee / 100);
  1184.         if (topupFinalPay) topupFinalPay.textContent = `Оплатить ${formatRubles(amountToPay)}₽`;
  1185.         if (topupFeeBadge) {
  1186.           topupFeeBadge.textContent = selectedPaymentFee ? `+${selectedPaymentFee}% комиссия` : "Без комиссии";
  1187.           topupFeeBadge.classList.toggle("has-fee", selectedPaymentFee > 0);
  1188.         }
  1190.         if (topupPromoSaving) topupPromoSaving.textContent = `${formatRubles(numericAmount * 0.05)} ₽`;
  1191.       };
  1193.       amountInput?.addEventListener("input", syncAmount);
  1194.       amountInput?.addEventListener("focus", () => {
  1195.         quickPopoverOpen = true;
  1196.         syncQuickPopover();
  1197.       });
  1198.       amountInput?.addEventListener("click", () => {
  1199.         quickPopoverOpen = true;
  1200.         syncQuickPopover();
  1201.       });
  1202.       amountInput?.addEventListener("keydown", (event) => {
  1203.         if (event.key !== "Escape") return;
  1204.         quickPopoverOpen = false;
  1205.         syncQuickPopover();
  1206.         amountInput.blur();
  1207.       });
  1208.       amountInput?.addEventListener("blur", () => {
  1209.         if (!amountInput.value) amountInput.value = "500";
  1210.         syncAmount();
  1211.       });
  1213.       promoToggleButton?.addEventListener("click", () => {
  1214.         promoSectionOpen = !promoSectionOpen;
  1215.         syncTopupExpansion();
  1216.       });
  1218.       payButton?.addEventListener("click", () => {
  1219.         quickPopoverOpen = false;
  1220.         syncQuickPopover();
  1221.         paymentSectionOpen = true;
  1222.         syncTopupExpansion();
  1223.       });
  1225.       topupQuickAmounts.forEach((button) => {
  1226.         button.addEventListener("click", () => {
  1227.           if (!amountInput) return;
  1228.           amountInput.value = button.dataset.quickAmount || "500";
  1229.           syncAmount();
  1230.           if (button.closest(".topup-quick-popover") && (!paymentSectionOpen || window.matchMedia("(min-width: 768px)").matches)) {
  1231.             quickPopoverOpen = false;
  1232.             syncQuickPopover();
  1233.           }
  1234.         });
  1235.       });
  1237.       document.addEventListener("pointerdown", (event) => {
  1238.         if (!quickPopoverOpen || amountField?.contains(event.target)) return;
  1239.         if (paymentSectionOpen && window.matchMedia("(max-width: 767px)").matches) return;
  1240.         quickPopoverOpen = false;
  1241.         syncQuickPopover();
  1242.       });
  1244.       topupPaymentMethods.forEach((method) => {
  1245.         method.addEventListener("click", () => {
  1246.           selectedPaymentFee = Number(method.dataset.fee || 0);
  1247.           topupPaymentMethods.forEach((item) => {
  1248.             const selected = item === method;
  1249.             item.classList.toggle("is-selected", selected);
  1250.             item.setAttribute("aria-checked", selected ? "true" : "false");
  1251.           });
  1252.           syncAmount();
  1253.         });
  1254.       });
  1256.       topupPromoApply?.addEventListener("click", () => {
  1257.         if (!topupPromoInput?.value.trim()) {
  1258.           topupPromoInput?.focus();
  1259.           return;
  1260.         }
  1261.         promoApplied = true;
  1262.         topupPromoBenefit?.classList.add("is-visible");
  1263.         topupPromoBenefit?.setAttribute("aria-hidden", "false");
  1264.         topupPromoApply.textContent = "Применено";
  1265.         syncAmount();
  1266.       });
  1268.       topupPromoInput?.addEventListener("input", () => {
  1269.         if (!promoApplied) return;
  1270.         promoApplied = false;
  1271.         topupPromoBenefit?.classList.remove("is-visible");
  1272.         topupPromoBenefit?.setAttribute("aria-hidden", "true");
  1273.         if (topupPromoApply) topupPromoApply.textContent = "Применить";
  1274.       });
  1276.       syncTopupExpansion();
  1277.       syncQuickPopover();
  1278.       syncAmount();
  1280.       document.querySelectorAll(".filter-group-toggle").forEach((button) => {
  1281.         const group = button.closest(".filter-group");
  1282.         if (!group) return;
  1283.         button.addEventListener("click", () => {
  1284.           group.classList.toggle("is-collapsed");
  1285.           button.setAttribute("aria-expanded", group.classList.contains("is-collapsed") ? "false" : "true");
  1286.         });
  1287.       });
  1289.       const mobileFilterButton = document.querySelector(".catalog-mobile-filter-btn");
  1290.       const mobileFilterClose = document.querySelector(".catalog-mobile-filter-close");
  1291.       const filterPanel = document.querySelector(".catalog-filter-panel");
  1292.       const mobileFilterbar = document.querySelector(".catalog-mobile-filterbar");
  1293.       const mobileSortButton = document.querySelector(".catalog-mobile-sort");
  1294.       const mobileSortLabel = document.querySelector(".catalog-mobile-sort-label");
  1295.       const mobileSortPanel = document.querySelector(".catalog-mobile-sort-panel");
  1296.       const mobileFilterQuery = window.matchMedia("(max-width: 767px)");
  1297.       const setMobileSortOpen = (open) => {
  1298.         if (!mobileSortButton || !mobileSortPanel || !mobileFilterbar) return;
  1299.         mobileFilterbar.classList.toggle("is-sort-open", open);
  1300.         mobileSortPanel.classList.toggle("is-open", open);
  1301.         mobileSortPanel.setAttribute("aria-hidden", open ? "false" : "true");
  1302.         mobileSortPanel.toggleAttribute("inert", !open);
  1303.         mobileSortButton.setAttribute("aria-expanded", open ? "true" : "false");
  1304.       };
  1306.       const setMobileFilterOpen = (open) => {
  1307.         if (!filterPanel || !mobileFilterButton) return;
  1308.         document.body.classList.toggle("catalog-mobile-filter-open", open);
  1309.         mobileFilterButton.setAttribute("aria-expanded", open ? "true" : "false");
  1310.         if (open) setMobileSortOpen(false);
  1311.       };
  1313.       mobileFilterButton?.addEventListener("click", (event) => {
  1314.         event.stopPropagation();
  1315.         setMobileFilterOpen(!document.body.classList.contains("catalog-mobile-filter-open"));
  1316.       });
  1318.       mobileFilterClose?.addEventListener("click", () => setMobileFilterOpen(false));
  1320.       filterPanel?.addEventListener("click", (event) => {
  1321.         if (mobileFilterQuery.matches) event.stopPropagation();
  1322.       });
  1324.       mobileSortButton?.addEventListener("click", (event) => {
  1325.         event.stopPropagation();
  1326.         if (!mobileFilterQuery.matches) return;
  1327.         setMobileFilterOpen(false);
  1328.         setMobileSortOpen(!mobileSortPanel?.classList.contains("is-open"));
  1329.       });
  1331.       mobileSortPanel?.addEventListener("click", (event) => {
  1332.         event.stopPropagation();
  1333.       });
  1335.       mobileSortPanel?.querySelectorAll("[data-sort-label]").forEach((button) => {
  1336.         button.addEventListener("click", () => {
  1337.           mobileSortPanel.querySelectorAll("[data-sort-label]").forEach((item) => item.classList.toggle("is-selected", item === button));
  1338.           if (mobileSortLabel) mobileSortLabel.textContent = button.dataset.sortLabel || button.textContent.trim();
  1339.           setMobileSortOpen(false);
  1340.         });
  1341.       });
  1343.       document.addEventListener("click", () => {
  1344.         if (document.body.classList.contains("catalog-mobile-filter-open")) setMobileFilterOpen(false);
  1345.         if (mobileSortPanel?.classList.contains("is-open")) setMobileSortOpen(false);
  1346.       });
  1348.       document.addEventListener("keydown", (event) => {
  1349.         if (event.key === "Escape") {
  1350.           setMobileFilterOpen(false);
  1351.           setMobileSortOpen(false);
  1352.         }
  1353.       });
  1355.       filterPanel?.querySelectorAll(".filter-apply, .filter-reset").forEach((button) => {
  1356.         button.addEventListener("click", () => {
  1357.           if (mobileFilterQuery.matches) setMobileFilterOpen(false);
  1358.         });
  1359.       });
  1361.       const syncFilterCheckState = () => {
  1362.         document.querySelectorAll(".filter-check").forEach((label) => {
  1363.           const input = label.querySelector('input[type="checkbox"]');
  1364.           label.classList.toggle("is-checked", Boolean(input?.checked));
  1365.         });
  1366.       };
  1368.       document.querySelectorAll('.filter-check input[type="checkbox"]').forEach((input) => {
  1369.         input.addEventListener("change", syncFilterCheckState);
  1370.       });
  1371.       syncFilterCheckState();
  1373.       mobileFilterQuery.addEventListener?.("change", (event) => {
  1374.         if (!event.matches) {
  1375.           setMobileFilterOpen(false);
  1376.           setMobileSortOpen(false);
  1377.         }
  1378.       });
  1380.       let catalogPriceTouched = false;
  1381.       let getCatalogPriceFilter = () => ({ enabled: false, min: null, max: null });
  1382.       let resetCatalogPriceFilter = () => {};
  1383.       let updateCatalogFilterBadges = () => {};
  1384.       const priceFilter = document.querySelector("[data-price-filter]");
  1385.       if (priceFilter) {
  1386.         const minInput = priceFilter.querySelector("[data-price-min-input]");
  1387.         const maxInput = priceFilter.querySelector("[data-price-max-input]");
  1388.         const range = priceFilter.querySelector(".filter-range");
  1389.         const minLimit = Number(priceFilter.dataset.minPrice || 0);
  1390.         const maxLimit = Number(priceFilter.dataset.maxPrice || 1000000);
  1391.         const step = Number(priceFilter.dataset.priceStep || 1);
  1392.         let minPrice = Number(minInput?.value.replace(/\D/g, "") || minLimit);
  1393.         let maxPrice = Number(maxInput?.value.replace(/\D/g, "") || maxLimit);
  1394.         let activeHandle = null;
  1396.         const clampPrice = (value) => Math.min(maxLimit, Math.max(minLimit, Math.round(value / step) * step));
  1397.         const priceToPercent = (value) => ((value - minLimit) / (maxLimit - minLimit)) * 100;
  1398.         const clientXToPrice = (clientX) => {
  1399.           if (!range) return minLimit;
  1400.           const rect = range.getBoundingClientRect();
  1401.           const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
  1402.           return clampPrice(minLimit + ratio * (maxLimit - minLimit));
  1403.         };
  1405.         const syncPriceFilter = (source, writeInputs = true) => {
  1406.           minPrice = clampPrice(minPrice);
  1407.           maxPrice = clampPrice(maxPrice);
  1408.           if (minPrice > maxPrice) {
  1409.             if (source === "min") minPrice = maxPrice;
  1410.             else maxPrice = minPrice;
  1411.           }
  1413.           if (writeInputs && minInput) minInput.value = String(minPrice);
  1414.           if (writeInputs && maxInput) maxInput.value = String(maxPrice);
  1415.           if (range) {
  1416.             range.style.setProperty("--price-start", `${priceToPercent(minPrice)}%`);
  1417.             range.style.setProperty("--price-end", `${priceToPercent(maxPrice)}%`);
  1418.           }
  1419.         };
  1421.         getCatalogPriceFilter = () => ({
  1422.           enabled: catalogPriceTouched || minPrice !== minLimit || maxPrice !== maxLimit,
  1423.           min: minPrice,
  1424.           max: maxPrice,
  1425.         });
  1427.         resetCatalogPriceFilter = () => {
  1428.           catalogPriceTouched = false;
  1429.           minPrice = minLimit;
  1430.           maxPrice = maxLimit;
  1431.           syncPriceFilter();
  1432.         };
  1434.         const setPriceFromPointer = (event, handle) => {
  1435.           catalogPriceTouched = true;
  1436.           const nextPrice = clientXToPrice(event.clientX);
  1437.           if (handle === "min") minPrice = Math.min(nextPrice, maxPrice);
  1438.           else maxPrice = Math.max(nextPrice, minPrice);
  1439.           syncPriceFilter(handle);
  1440.           updateCatalogFilterBadges();
  1441.         };
  1443.         minInput?.addEventListener("input", () => {
  1444.           catalogPriceTouched = true;
  1445.           const value = minInput.value.replace(/\D/g, "");
  1446.           minInput.value = value;
  1447.           if (!value) return;
  1448.           minPrice = Number(value);
  1449.           syncPriceFilter("min", false);
  1450.           updateCatalogFilterBadges();
  1451.         });
  1453.         maxInput?.addEventListener("input", () => {
  1454.           catalogPriceTouched = true;
  1455.           const value = maxInput.value.replace(/\D/g, "");
  1456.           maxInput.value = value;
  1457.           if (!value) return;
  1458.           maxPrice = Number(value);
  1459.           syncPriceFilter("max", false);
  1460.           updateCatalogFilterBadges();
  1461.         });
  1463.         minInput?.addEventListener("blur", () => syncPriceFilter("min"));
  1464.         maxInput?.addEventListener("blur", () => syncPriceFilter("max"));
  1466.         range?.addEventListener("pointerdown", (event) => {
  1467.           event.preventDefault();
  1468.           const nextPrice = clientXToPrice(event.clientX);
  1469.           activeHandle = Math.abs(nextPrice - minPrice) <= Math.abs(nextPrice - maxPrice) ? "min" : "max";
  1470.           range.setPointerCapture?.(event.pointerId);
  1471.           setPriceFromPointer(event, activeHandle);
  1472.         });
  1474.         range?.addEventListener("pointermove", (event) => {
  1475.           if (!activeHandle) return;
  1476.           setPriceFromPointer(event, activeHandle);
  1477.         });
  1479.         const releasePriceHandle = (event) => {
  1480.           if (!activeHandle) return;
  1481.           range?.releasePointerCapture?.(event.pointerId);
  1482.           activeHandle = null;
  1483.         };
  1485.         range?.addEventListener("pointerup", releasePriceHandle);
  1486.         range?.addEventListener("pointercancel", releasePriceHandle);
  1488.         syncPriceFilter();
  1489.       }
  1491.       const services = [
  1492.         ["service-steam.png", "Steam"],
  1493.         ["service-telegram.png", "Telegram"],
  1494.         ["service-roblox.png", "Roblox"],
  1495.         ["service-brawl.png", "Brawl Stars"],
  1496.         ["service-pubg.png", "PUBG Mob..."],
  1497.         ["service-appstore.png", "App Store"],
  1498.         ["service-chatgpt.png", "ChatGPT"],
  1499.         ["service-playstation.png", "PlayStation"],
  1500.         ["service-tiktok.png", "TikTok"],
  1501.         ["service-mobile.png", "Mobile Leg..."],
  1502.       ];
  1504.       const servicesRow = document.getElementById("servicesRow");
  1505.       if (servicesRow) {
  1506.         services.forEach(([icon, label, active]) => {
  1507.           servicesRow.insertAdjacentHTML(
  1508.             "beforeend",
  1509.             `<button class="service-item ${active ? "is-active" : ""}"><img src="./assets/${icon}" alt=""><span>${label}</span></button>`
  1510.           );
  1511.         });
  1512.         servicesRow.insertAdjacentHTML(
  1513.           "beforeend",
  1514.           `<button class="service-item more-service"><span class="more-icon"><img class="more-icon-img" src="./assets/more-service.svg" alt=""></span><span>еще 841</span></button>`
  1515.         );
  1516.       }
  1518.       const discountPattern = ["red", "red", "red", "red", "red", "red", "red", "red"];
  1519.       const escapeHtml = (value) =>
  1520.         String(value ?? "")
  1521.           .replaceAll("&", "&amp;")
  1522.           .replaceAll("<", "&lt;")
  1523.           .replaceAll(">", "&gt;")
  1524.           .replaceAll('"', "&quot;")
  1525.           .replaceAll("'", "&#039;");
  1526.       const catalogProducts = Array.isArray(window.playpapaCatalog?.products) ? window.playpapaCatalog.products : [];
  1527.       const catalogState = window.playpapaCatalogState || {};
  1528.       const catalogApiUrl = "{{ path('catalog_items') }}";
  1529.       const activeCatalogCategory = catalogState.category || "all";
  1530.       const catalogSearchInput = document.querySelector("[data-catalog-search]");
  1531.       const fallbackProducts = [
  1532.         {
  1533.           name: "DOOM 2016 STEAM KEY РФ+СНГ",
  1534.           image_url: "./assets/product-pubg.png",
  1535.           price_label: "49,99 ₽",
  1536.           url: "/product",
  1537.           catalog_kind: "keys",
  1538.           catalog_kinds: ["keys"],
  1539.         },
  1540.       ];
  1541.       const sourceProducts = catalogProducts.length ? catalogProducts : fallbackProducts;
  1542.       const officialProducts = Array.isArray(window.playpapaCatalog?.official_products) && window.playpapaCatalog.official_products.length
  1543.         ? window.playpapaCatalog.official_products
  1544.         : sourceProducts.slice(0, 10);
  1545.       let loadedCatalogProducts = sourceProducts.slice();
  1546.       let catalogTotalCount = Number(window.playpapaCatalog?.total ?? loadedCatalogProducts.length);
  1547.       let catalogNextOffset = Number(window.playpapaCatalog?.next_offset ?? loadedCatalogProducts.length);
  1548.       let catalogHasMore = Boolean(window.playpapaCatalog?.has_more ?? catalogTotalCount > loadedCatalogProducts.length);
  1549.       let catalogLoading = false;
  1550.       let catalogRequestId = 0;
  1551.       let catalogSearchQuery = (catalogSearchInput?.value || catalogState.query || "").trim().toLowerCase();
  1552.       let catalogSortValue = catalogState.sort || "popular";
  1553.       const catalogPageSize = 24;
  1554.       const filterInputs = Array.from(document.querySelectorAll("[data-filter-type]"));
  1555.       const filterApplyBadges = Array.from(document.querySelectorAll(".filter-apply span"));
  1556.       const mobileFilterBadge = document.querySelector(".catalog-mobile-filter-btn b");
  1557.       const mobileTags = document.querySelector(".catalog-mobile-tags");
  1558.       const catalogSortButton = document.querySelector(".catalog-sort");
  1559.       const sortOptions = [
  1560.         ["popular", "Популярные"],
  1561.         ["price_asc", "Сначала дешёвые"],
  1562.         ["price_desc", "Сначала дорогие"],
  1563.         ["new", "Сначала новинки"],
  1564.         ["rating", "По рейтингу"],
  1565.       ];
  1566.       const sortLabels = Object.fromEntries(sortOptions);
  1567.       const productWord = (count) => {
  1568.         const mod10 = count % 10;
  1569.         const mod100 = count % 100;
  1570.         if (mod10 === 1 && mod100 !== 11) return "товар";
  1571.         if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return "товара";
  1572.         return "товаров";
  1573.       };
  1575.       const productMarkup = (product, color, index) => `
  1576.         <article class="product-card">
  1577.           <div class="product-cover">
  1578.             <img src="${escapeHtml(product.image_url || "./assets/product-pubg.png")}" alt="">
  1579.             ${product.discount_label ? `<span class="discount ${color}">${escapeHtml(product.discount_label)}</span>` : ""}
  1580.           </div>
  1581.           <div class="product-body">
  1582.             <h3>${escapeHtml(product.name || "Товар PlayPapa")}</h3>
  1583.             <div class="price-line"><strong>${escapeHtml(product.price_label || "Цена уточняется")}</strong></div>
  1584.             <a href="${escapeHtml(product.url || "/product")}">Купить</a>
  1585.           </div>
  1586.         </article>
  1587.       `;
  1589.       const emptyCatalogMarkup = () => `
  1590.         <div class="catalog-empty">
  1591.           <strong>Ничего не найдено</strong>
  1592.           <span>Попробуйте другую категорию или измените запрос.</span>
  1593.         </div>
  1594.       `;
  1596.       const renderCatalogGrid = (grid, products, startIndex, emptyAllowed = false, countOverride = null) => {
  1597.         const count = countOverride ?? Number(grid.dataset.count || 5);
  1598.         const slice = products.slice(startIndex, startIndex + count);
  1599.         if (slice.length === 0) {
  1600.           grid.innerHTML = emptyAllowed ? emptyCatalogMarkup() : "";
  1601.           return;
  1602.         }
  1604.         const items = slice.map((product, i) => productMarkup(product, discountPattern[(startIndex + i) % discountPattern.length], startIndex + i)).join("");
  1605.         grid.innerHTML = items;
  1606.       };
  1608.       const catalogTotal = document.querySelector(".catalog-total");
  1609.       const officialGrid = document.querySelector(".catalog-feature-grid");
  1610.       const officialScrollButtons = document.querySelectorAll("[data-official-scroll]");
  1611.       const catalogLoader = document.querySelector(".catalog-loader");
  1612.       const catalogTopupRow = document.querySelector(".catalog-topup-row");
  1614.       const renderCatalogProducts = () => {
  1615.         const products = loadedCatalogProducts;
  1616.         document.querySelectorAll("[data-products]").forEach((grid) => {
  1617.           const slot = grid.dataset.products || "";
  1618.           if (slot === "catalog-featured") {
  1619.             renderCatalogGrid(grid, officialProducts, 0, false, 10);
  1620.             return;
  1621.           }
  1623.           if (slot === "catalog-results-grid-primary") {
  1624.             renderCatalogGrid(grid, products, 0, true, 12);
  1625.             return;
  1626.           }
  1628.           if (slot === "catalog-results-grid-secondary") {
  1629.             renderCatalogGrid(grid, products, 12, false, Math.max(0, products.length - 12));
  1630.             return;
  1631.           }
  1633.           renderCatalogGrid(grid, products, 0);
  1634.         });
  1636.         if (catalogTotal) {
  1637.           catalogTotal.textContent = `Всего ${catalogTotalCount} ${productWord(catalogTotalCount)}`;
  1638.         }
  1640.         if (catalogLoader) {
  1641.           catalogLoader.hidden = !catalogLoading && !catalogHasMore;
  1642.         }
  1644.         if (catalogTopupRow) {
  1645.           catalogTopupRow.hidden = activeCatalogCategory !== "all";
  1646.         }
  1647.       };
  1649.       const selectedFilterValues = (type) =>
  1650.         filterInputs
  1651.           .filter((input) => input.dataset.filterType === type && input.checked)
  1652.           .map((input) => input.value)
  1653.           .filter(Boolean);
  1655.       const buildCatalogParams = (offset = 0) => {
  1656.         const params = new URLSearchParams();
  1657.         params.set("offset", String(offset));
  1658.         params.set("limit", String(catalogPageSize));
  1659.         params.set("sort", catalogSortValue);
  1660.         if (activeCatalogCategory !== "all") params.set("category", activeCatalogCategory);
  1661.         if (catalogSearchQuery) params.set("q", catalogSearchQuery);
  1663.         const types = selectedFilterValues("type");
  1664.         const genres = selectedFilterValues("genre");
  1665.         if (types.length) params.set("type", types.join(","));
  1666.         if (genres.length) params.set("genre", genres.join(","));
  1668.         const price = getCatalogPriceFilter();
  1669.         if (price.enabled) {
  1670.           params.set("min_price", String(price.min));
  1671.           params.set("max_price", String(price.max));
  1672.         }
  1674.         return params;
  1675.       };
  1677.       const setCatalogLoading = (loading) => {
  1678.         catalogLoading = loading;
  1679.         renderCatalogProducts();
  1680.       };
  1682.       const updateCatalogSortUi = () => {
  1683.         const label = sortLabels[catalogSortValue] || sortLabels.popular;
  1684.         if (mobileSortLabel) mobileSortLabel.textContent = label;
  1685.         if (catalogSortButton) catalogSortButton.textContent = label;
  1686.         mobileSortPanel?.querySelectorAll("[data-sort-value]").forEach((button) => {
  1687.           button.classList.toggle("is-selected", button.dataset.sortValue === catalogSortValue);
  1688.         });
  1689.       };
  1691.       const fetchCatalogPage = async ({ offset = 0, append = false } = {}) => {
  1692.         const requestId = ++catalogRequestId;
  1693.         setCatalogLoading(true);
  1695.         try {
  1696.           const response = await fetch(`${catalogApiUrl}?${buildCatalogParams(offset).toString()}`, {
  1697.             headers: { Accept: "application/json" },
  1698.           });
  1699.           if (!response.ok) throw new Error(`Catalog API returned ${response.status}`);
  1701.           const payload = await response.json();
  1702.           if (requestId !== catalogRequestId) return;
  1704.           const nextProducts = Array.isArray(payload.products) ? payload.products : [];
  1705.           loadedCatalogProducts = append ? loadedCatalogProducts.concat(nextProducts) : nextProducts;
  1706.           catalogTotalCount = Number(payload.total ?? loadedCatalogProducts.length);
  1707.           catalogNextOffset = Number(payload.next_offset ?? loadedCatalogProducts.length);
  1708.           catalogHasMore = Boolean(payload.has_more);
  1709.         } catch (error) {
  1710.           console.warn(error);
  1711.           if (!append) {
  1712.             loadedCatalogProducts = [];
  1713.             catalogTotalCount = 0;
  1714.             catalogNextOffset = 0;
  1715.             catalogHasMore = false;
  1716.           }
  1717.         } finally {
  1718.           if (requestId === catalogRequestId) {
  1719.             setCatalogLoading(false);
  1720.           }
  1721.         }
  1722.       };
  1724.       const applyCatalogFilters = () => {
  1725.         catalogNextOffset = 0;
  1726.         catalogHasMore = true;
  1727.         fetchCatalogPage({ offset: 0, append: false });
  1728.       };
  1730.       const loadMoreCatalogProducts = () => {
  1731.         if (catalogLoading || !catalogHasMore) return;
  1732.         fetchCatalogPage({ offset: catalogNextOffset, append: true });
  1733.       };
  1735.       const selectedFilterLabels = () =>
  1736.         filterInputs
  1737.           .filter((input) => input.checked)
  1738.           .map((input) => input.closest(".filter-check")?.querySelector("span")?.textContent?.trim())
  1739.           .filter(Boolean);
  1741.       const renderMobileTags = () => {
  1742.         if (!mobileTags) return;
  1743.         const tags = [];
  1744.         if (activeCatalogCategory !== "all") {
  1745.           const activeChip = Array.from(document.querySelectorAll("[data-catalog-category]")).find((chip) => chip.dataset.catalogCategory === activeCatalogCategory);
  1746.           tags.push(activeChip?.textContent?.trim() || "Категория");
  1747.         }
  1748.         if (catalogSearchQuery) tags.push(`Поиск: ${catalogSearchQuery}`);
  1749.         tags.push(...selectedFilterLabels());
  1750.         const price = getCatalogPriceFilter();
  1751.         if (price.enabled) tags.push(`${price.min}-${price.max} ₽`);
  1753.         if (!tags.length) {
  1754.           mobileTags.innerHTML = '<button type="button" disabled>Все товары</button>';
  1755.           return;
  1756.         }
  1758.         mobileTags.innerHTML = `${tags.map((tag) => `<button type="button" disabled>${escapeHtml(tag)}</button>`).join("")}<button type="button" data-catalog-reset>Сбросить</button>`;
  1759.       };
  1761.       updateCatalogFilterBadges = () => {
  1762.         const checkedCount = filterInputs.filter((input) => input.checked).length;
  1763.         const price = getCatalogPriceFilter();
  1764.         const count = checkedCount + (price.enabled ? 1 : 0) + (activeCatalogCategory !== "all" ? 1 : 0);
  1765.         filterApplyBadges.forEach((badge) => {
  1766.           badge.textContent = String(count);
  1767.           badge.hidden = count === 0;
  1768.         });
  1769.         if (mobileFilterBadge) {
  1770.           mobileFilterBadge.textContent = String(count);
  1771.           mobileFilterBadge.hidden = count === 0;
  1772.         }
  1773.         renderMobileTags();
  1774.       };
  1776.       const resetCatalogFilters = () => {
  1777.         if (activeCatalogCategory !== "all") {
  1778.           window.location.href = "/catalog";
  1779.           return;
  1780.         }
  1781.         filterInputs.forEach((input) => {
  1782.           input.checked = false;
  1783.         });
  1784.         catalogSearchQuery = "";
  1785.         if (catalogSearchInput) catalogSearchInput.value = "";
  1786.         resetCatalogPriceFilter();
  1787.         catalogSortValue = "popular";
  1788.         syncFilterCheckState();
  1789.         updateCatalogSortUi();
  1790.         updateCatalogFilterBadges();
  1791.         window.history.replaceState(null, "", "/catalog");
  1792.         applyCatalogFilters();
  1793.       };
  1795.       const setCatalogSort = (value, reload = true) => {
  1796.         catalogSortValue = sortLabels[value] ? value : "popular";
  1797.         updateCatalogSortUi();
  1798.         if (reload) applyCatalogFilters();
  1799.       };
  1801.       renderCatalogProducts();
  1802.       updateCatalogSortUi();
  1803.       updateCatalogFilterBadges();
  1805.       const goToCatalogSearch = () => {
  1806.         catalogSearchQuery = (catalogSearchInput?.value || "").trim().toLowerCase();
  1807.         applyCatalogFilters();
  1808.       };
  1810.       let catalogSearchTimer = 0;
  1811.       catalogSearchInput?.addEventListener("input", () => {
  1812.         catalogSearchQuery = catalogSearchInput.value.trim().toLowerCase();
  1813.         window.clearTimeout(catalogSearchTimer);
  1814.         catalogSearchTimer = window.setTimeout(() => {
  1815.           updateCatalogFilterBadges();
  1816.           applyCatalogFilters();
  1817.         }, 280);
  1818.       });
  1820.       catalogSearchInput?.addEventListener("keydown", (event) => {
  1821.         if (event.key !== "Enter") return;
  1822.         event.preventDefault();
  1823.         window.clearTimeout(catalogSearchTimer);
  1824.         goToCatalogSearch();
  1825.       });
  1827.       filterInputs.forEach((input) => {
  1828.         input.addEventListener("change", updateCatalogFilterBadges);
  1829.       });
  1831.       document.querySelectorAll(".filter-apply").forEach((button) => {
  1832.         button.addEventListener("click", () => {
  1833.           updateCatalogFilterBadges();
  1834.           applyCatalogFilters();
  1835.         });
  1836.       });
  1838.       document.querySelectorAll(".filter-reset").forEach((button) => {
  1839.         button.addEventListener("click", () => {
  1840.           resetCatalogFilters();
  1841.         });
  1842.       });
  1844.       mobileTags?.addEventListener("click", (event) => {
  1845.         if (event.target.closest("[data-catalog-reset]")) resetCatalogFilters();
  1846.       });
  1848.       mobileSortPanel?.querySelectorAll("[data-sort-value]").forEach((button) => {
  1849.         button.addEventListener("click", () => setCatalogSort(button.dataset.sortValue || "popular"));
  1850.       });
  1852.       catalogSortButton?.addEventListener("click", () => {
  1853.         const currentIndex = Math.max(0, sortOptions.findIndex(([value]) => value === catalogSortValue));
  1854.         const next = sortOptions[(currentIndex + 1) % sortOptions.length][0];
  1855.         setCatalogSort(next);
  1856.       });
  1858.       document.querySelectorAll(".catalog-sort-icon").forEach((button, index) => {
  1859.         button.addEventListener("click", () => {
  1860.           if (index === 0) {
  1861.             setCatalogSort(catalogSortValue === "price_asc" ? "price_desc" : "price_asc");
  1862.             return;
  1863.           }
  1864.           setCatalogSort("popular");
  1865.         });
  1866.       });
  1868.       if ("IntersectionObserver" in window && catalogLoader) {
  1869.         const catalogObserver = new IntersectionObserver((entries) => {
  1870.           if (entries.some((entry) => entry.isIntersecting)) loadMoreCatalogProducts();
  1871.         }, { rootMargin: "420px 0px" });
  1872.         catalogObserver.observe(catalogLoader);
  1873.       } else {
  1874.         window.addEventListener("scroll", () => {
  1875.           if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 520) return;
  1876.           loadMoreCatalogProducts();
  1877.         }, { passive: true });
  1878.       }
  1880.       const officialScrollStep = () => {
  1881.         if (!officialGrid) return;
  1882.         const firstCard = officialGrid.querySelector(".product-card");
  1883.         const cardWidth = firstCard ? firstCard.getBoundingClientRect().width : 230;
  1884.         const gap = Number.parseFloat(getComputedStyle(officialGrid).columnGap || "16");
  1885.         return cardWidth + gap;
  1886.       };
  1888.       const scrollOfficialGrid = (direction) => {
  1889.         if (!officialGrid) return;
  1890.         const step = officialScrollStep() || 246;
  1891.         const maxLeft = Math.max(0, officialGrid.scrollWidth - officialGrid.clientWidth);
  1892.         const nextLeft = direction === "prev" ? officialGrid.scrollLeft - step : officialGrid.scrollLeft + step;
  1893.         const target = direction === "prev"
  1894.           ? (nextLeft <= 2 ? maxLeft : nextLeft)
  1895.           : (nextLeft >= maxLeft - 2 ? 0 : nextLeft);
  1896.         officialGrid.scrollTo({ left: target, behavior: "smooth" });
  1897.       };
  1899.       officialScrollButtons.forEach((button) => {
  1900.         button.addEventListener("click", () => scrollOfficialGrid(button.dataset.officialScroll === "prev" ? "prev" : "next"));
  1901.       });
  1903.       if (officialGrid) {
  1904.         let officialDragPointer = null;
  1905.         let officialDragStartX = 0;
  1906.         let officialDragStartLeft = 0;
  1907.         let officialDragMoved = false;
  1908.         let officialSuppressClick = false;
  1909.         const isOfficialInteractiveTarget = (target) => Boolean(target.closest("a, button, input, select, textarea, label"));
  1911.         const finishOfficialDrag = (event) => {
  1912.           if (officialDragPointer === null || event.pointerId !== officialDragPointer) return;
  1913.           officialGrid.releasePointerCapture?.(event.pointerId);
  1914.           officialGrid.classList.remove("is-dragging");
  1915.           officialSuppressClick = officialDragMoved;
  1916.           officialDragPointer = null;
  1917.           window.setTimeout(() => {
  1918.             officialDragMoved = false;
  1919.             officialSuppressClick = false;
  1920.           }, 0);
  1921.         };
  1923.         officialGrid.addEventListener("pointerdown", (event) => {
  1924.           if (event.button !== undefined && event.button !== 0) return;
  1925.           if (isOfficialInteractiveTarget(event.target)) return;
  1926.           officialDragPointer = event.pointerId;
  1927.           officialDragStartX = event.clientX;
  1928.           officialDragStartLeft = officialGrid.scrollLeft;
  1929.           officialDragMoved = false;
  1930.           officialGrid.setPointerCapture?.(event.pointerId);
  1931.           officialGrid.classList.add("is-dragging");
  1932.         });
  1934.         officialGrid.addEventListener("pointermove", (event) => {
  1935.           if (officialDragPointer === null || event.pointerId !== officialDragPointer) return;
  1936.           const delta = event.clientX - officialDragStartX;
  1937.           if (Math.abs(delta) > 4) officialDragMoved = true;
  1938.           officialGrid.scrollLeft = officialDragStartLeft - delta;
  1939.         });
  1941.         officialGrid.addEventListener("pointerup", finishOfficialDrag);
  1942.         officialGrid.addEventListener("pointercancel", finishOfficialDrag);
  1943.         officialGrid.addEventListener("click", (event) => {
  1944.           if (!officialSuppressClick) return;
  1945.           event.preventDefault();
  1946.           event.stopPropagation();
  1947.         }, true);
  1948.       }
  1949.     </script>
  1950.     <script src="/assets/playpapa-auth.js"></script>
  1952.   </body>
  1953. </html>