templates/product.html.twig line 1

Open in your IDE?
  1. {% set productData = product|default(null) %}
  2. {% set selectedVariant = productData and productData.selected_variant|default(null) ? productData.selected_variant : null %}
  3. {% set productVariants = productData and productData.variants|default([])|length ? productData.variants : [] %}
  4. {% set productName = productData ? productData.name : 'Forza Horizon 6 · Standard / Deluxe / Premium · STEAM RU' %}
  5. {% set productMobileName = productData ? productData.name : 'DOOM 2016 · STEAM RU' %}
  6. {% set productImage = productData and productData.image_url ? productData.image_url : './assets/product-doom.jpg' %}
  7. {% set productPrice = selectedVariant ? selectedVariant.price_label : (productData and productData.price_label ? productData.price_label : '5 299 ₽') %}
  8. {% set productRegion = selectedVariant ? selectedVariant.context_label|default(selectedVariant.label) : (productData and productData.region ? productData.region : 'Россия · Standard') %}
  9. {% set productDiscountLabel = selectedVariant ? selectedVariant.discount_label|default('') : (productData and productData.discount_label|default('') ? productData.discount_label : '') %}
  10. {% set productGallery = productData ? productData.gallery|default([]) : [] %}
  11. {% set productGalleryCount = productGallery|length %}
  12. {% set productPreviewGallery = productGallery|slice(0, 10) %}
  13. {% set productPreviewGalleryCount = productPreviewGallery|length %}
  14. {% set productHeroImage = productPreviewGalleryCount ? productPreviewGallery[0].url|default(productImage) : productImage %}
  15. {% set relatedProducts = productData and productData.related_products|default([])|length ? productData.related_products : [] %}
  16. {% set productRegionRestriction = selectedVariant and selectedVariant.region_restriction|default(null) ? selectedVariant.region_restriction : (productData and productData.region_restriction|default(null) ? productData.region_restriction : null) %}
  17. {% set productSpecs = productData and productData.specs|default([])|length ? productData.specs : [
  18.   {'key': 'platform', 'label': 'ПЛАТФОРМА', 'value': 'Steam · PC'},
  19.   {'key': 'activation_region', 'label': 'РЕГИОН АКТИВАЦИИ', 'value': 'Россия'},
  20.   {'key': 'language', 'label': 'ЯЗЫК', 'value': 'Русский, English'},
  21.   {'key': 'genre', 'label': 'ЖАНР', 'value': 'Игра'},
  22.   {'key': 'release_date', 'label': 'ДАТА ВЫХОДА', 'value': 'Уточняется'},
  23.   {'key': 'publisher', 'label': 'ИЗДАТЕЛЬ', 'value': 'Уточняется'}
  24. ] %}
  25. {% set productDelivery = productData and productData.delivery|default(null) ? productData.delivery : {
  26.   'type': 'steam_gift',
  27.   'label': 'Подарок Steam',
  28.   'short_label': 'Подарок Steam',
  29.   'badge': 'Gift',
  30.   'description': 'Отправляется подарком на Steam-аккаунт по ссылке-приглашению.',
  31.   'form_hint': 'Понадобится ссылка-приглашение Steam.'
  32. } %}
  33. {% set productDeliveryShortLabel = productDelivery.short_label|default(productDelivery.label) %}
  34. {% set checkoutForms = selectedVariant ? selectedVariant.forms|default(productData.forms|default([])) : (productData ? productData.forms|default([]) : []) %}
  35. {% set checkoutProductId = selectedVariant ? selectedVariant.id : (productData ? productData.id : '') %}
  36. <!doctype html>
  37. <html lang="ru">
  38.   <head>
  39.     <meta charset="UTF-8" />
  40.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  41.     <title>{{ productName }} — PlayPapa</title>
  42.     <script>
  43.       (() => {
  44.         try {
  45.           const requestedTheme = new URLSearchParams(window.location.search).get("theme");
  46.           const savedTheme = localStorage.getItem("playpapa-theme");
  47.           const theme = requestedTheme || savedTheme;
  48.           document.documentElement.dataset.theme = theme === "dark" ? "dark" : "light";
  49.         } catch {
  50.           document.documentElement.dataset.theme = "light";
  51.         }
  52.       })();
  53.     </script>
  54.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  55.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  56.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet" />
  57.     <link rel="icon" type="image/svg+xml" href="./assets/blogger-playpapa-logo.svg" />
  58.     <link rel="stylesheet" href="./frame.css" />
  59.     <link rel="stylesheet" href="./styles.css" />
  60.     <link rel="stylesheet" href="./product.css" />
  61.     <link rel="stylesheet" href="/auth-local.css" />
  63.   </head>
  64.   <body class="product-page">
  65.     <header class="site-header">
  66.       <div class="shell header-inner">
  67.         <a class="logo-link" href="./index.html">
  68.           <img src="./assets/logo.svg" alt="PlayPapa" />
  69.         </a>
  71.         <div class="theme-switch" aria-label="Переключение темы">
  72.           <button class="theme-btn is-active" type="button" data-theme="light" aria-label="Светлая тема" aria-pressed="true">
  73.             <img src="./assets/white-theme.svg" alt="" />
  74.           </button>
  75.           <button class="theme-btn" type="button" data-theme="dark" aria-label="Темная тема" aria-pressed="false">
  76.             <img src="./assets/dark-theme.svg" alt="" />
  77.           </button>
  78.         </div>
  80.         <button class="catalog-btn" type="button" aria-label="Каталог" aria-expanded="false" aria-controls="catalogMegaMenu">
  81.           <img src="./assets/catalog.svg" alt="" />
  82.           <span>Каталог</span>
  83.         </button>
  85.         <form class="search-form" action="#">
  86.           <input type="search" placeholder="Игра, приложение или услуга..." />
  87.           <button class="search-favorite" type="button" aria-label="Избранное">
  88.             <img src="./assets/favorite.svg" alt="" />
  89.           </button>
  90.           <button class="search-submit" type="submit" aria-label="Найти">
  91.             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  92.               <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" />
  93.             </svg>
  94.           </button>
  95.         </form>
  97.         <button class="bonus-btn" type="button" aria-label="Бонусы">
  98.           <img src="./assets/bonus.svg" alt="Бонусы" />
  99.         </button>
  101.         <div class="profile-menu">
  102.           <button class="profile-btn" type="button" aria-label="Профиль" aria-expanded="false" aria-controls="profilePopover">
  103.             <img src="./assets/profile.svg" alt="" />
  104.             <span class="profile-toggle-indicator" aria-hidden="true">
  105.               <svg viewBox="0 0 12 8" fill="none">
  106.                 <path d="m2 2 4 4 4-4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
  107.               </svg>
  108.             </span>
  109.           </button>
  111.           <section class="profile-popover" id="profilePopover" aria-hidden="true" aria-label="Меню профиля" inert>
  112.             <div class="profile-popover-heading">
  113.               <h2>Вы не авторизованы</h2>
  114.               <p>
  115.                 <span>Войдите, чтобы видеть бонусы и</span>
  116.                 <span>рефералов</span>
  117.               </p>
  118.             </div>
  120.             <nav class="profile-popover-nav" aria-label="Разделы профиля">
  121.               <button class="profile-menu-item" type="button" disabled>
  122.                 <img class="profile-menu-icon" src="./assets/profile-menu-profile.svg" alt="" />
  123.                 <span>Профиль</span>
  124.               </button>
  125.               <button class="profile-menu-item" type="button" disabled>
  126.                 <img class="profile-menu-icon" src="./assets/profile-menu-referrals.svg" alt="" />
  127.                 <span>Рефералы</span>
  128.               </button>
  129.               <button class="profile-menu-item" type="button" disabled>
  130.                 <img class="profile-menu-icon" src="./assets/profile-menu-bonus.svg" alt="" />
  131.                 <span>Бонусы</span>
  132.               </button>
  133.               <button class="profile-menu-item profile-help" type="button">
  134.                 <img class="profile-menu-icon" src="./assets/profile-menu-help.svg" alt="" />
  135.                 <span>Помощь</span>
  136.               </button>
  137.               <button class="profile-menu-item profile-login" type="button">
  138.                 <img class="profile-menu-icon" src="./assets/profile-menu-login.svg" alt="" />
  139.                 <span>Войти</span>
  140.               </button>
  141.             </nav>
  142.           </section>
  143.         </div>
  144.       </div>
  146.       <div class="catalog-layer" id="catalogMegaMenu" aria-hidden="true" inert>
  147.         <div class="shell catalog-mega" role="dialog" aria-label="Каталог товаров">
  148.           <aside class="catalog-sidebar" aria-label="Разделы каталога">
  149.             <button class="catalog-side-link is-active" type="button">
  150.               <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>
  151.               <span>Игры и игровые сервисы</span>
  152.               <span class="catalog-chevron" aria-hidden="true">›</span>
  153.             </button>
  154.             <button class="catalog-side-link" type="button">
  155.               <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>
  156.               <span>Игровые ценности</span>
  157.               <span class="catalog-chevron" aria-hidden="true">›</span>
  158.             </button>
  159.             <button class="catalog-side-link" type="button">
  160.               <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>
  161.               <span>Мобильные игры</span>
  162.               <span class="catalog-chevron" aria-hidden="true">›</span>
  163.             </button>
  164.             <button class="catalog-side-link" type="button">
  165.               <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>
  166.               <span>Сервисы и соцсети</span>
  167.               <span class="catalog-chevron" aria-hidden="true">›</span>
  168.             </button>
  169.             <button class="catalog-side-link" type="button">
  170.               <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>
  171.               <span>Программы</span>
  172.               <span class="catalog-chevron" aria-hidden="true">›</span>
  173.             </button>
  174.           </aside>
  176.           <div class="catalog-content">
  177.             <section class="catalog-showcase" aria-labelledby="catalogFeaturedTitle">
  178.               <h2 id="catalogFeaturedTitle">Игры и игровые сервисы <span aria-hidden="true">›</span></h2>
  179.               <div class="catalog-showcase-row" id="catalogFeatured"></div>
  180.             </section>
  182.             <section class="catalog-showcase catalog-new" aria-labelledby="catalogNewTitle">
  183.               <h2 id="catalogNewTitle">Новинки и предзаказы <span aria-hidden="true">›</span></h2>
  184.               <div class="catalog-showcase-row" id="catalogNew"></div>
  185.             </section>
  187.             <div class="catalog-platforms">
  188.               <section class="catalog-link-group">
  189.                 <h3>Steam <span aria-hidden="true">›</span></h3>
  190.                 <a href="#">Игры и DLC</a>
  191.                 <a href="#">Пополнение баланса</a>
  192.                 <a href="#">Подарочные карты</a>
  193.                 <a href="#">Коллекционные карточки</a>
  194.                 <a href="#">Смена региона</a>
  195.               </section>
  196.               <section class="catalog-link-group">
  197.                 <h3>PlayStation <span aria-hidden="true">›</span></h3>
  198.                 <a href="#">Игры и DLC</a>
  199.                 <a href="#">Пополнение баланса</a>
  200.                 <a href="#">Новые аккаунты</a>
  201.                 <a href="#">PS Plus</a>
  202.                 <a href="#">EA Play</a>
  203.               </section>
  204.               <section class="catalog-link-group">
  205.                 <h3>Xbox <span aria-hidden="true">›</span></h3>
  206.                 <a href="#">Игры и DLC</a>
  207.                 <a href="#">Пополнение баланса</a>
  208.                 <a href="#">Новые аккаунты</a>
  209.                 <a href="#">Xbox Game Pass</a>
  210.                 <a href="#">Услуги</a>
  211.               </section>
  212.               <section class="catalog-link-group">
  213.                 <h3>Nintendo <span aria-hidden="true">›</span></h3>
  214.                 <a href="#">Игры и DLC</a>
  215.                 <a href="#">Подарочные карты</a>
  216.                 <a href="#">Новые аккаунты</a>
  217.                 <a href="#">NS Online</a>
  218.               </section>
  219.               <section class="catalog-link-group">
  220.                 <h3>Battle.net <span aria-hidden="true">›</span></h3>
  221.                 <a href="#">World of Warcraft</a>
  222.                 <a href="#">Подарочные карты</a>
  223.                 <a href="#">Прямое пополнение</a>
  224.                 <a href="#">Новые аккаунты</a>
  225.                 <a href="#">Смена региона</a>
  226.               </section>
  227.             </div>
  228.           </div>
  229.         </div>
  230.       </div>
  231.     </header>
  233.     <main>
  234.       <section class="shell product-hero" aria-label="Карточка товара">
  235.         <nav class="product-breadcrumbs" aria-label="Навигация">
  236.           <a href="./index.html">Главная</a>
  237.           <span aria-hidden="true">›</span>
  238.           <a href="/catalog">Игры</a>
  239.           <span aria-hidden="true">›</span>
  240.           <b>{{ productName }}</b>
  241.         </nav>
  243.         <div class="product-overview">
  244.           <div class="product-gallery">
  245.             <div class="product-cover-large">
  246.               <img src="{{ productHeroImage }}" alt="{{ productName }}" data-product-cover />
  247.               {% if productDiscountLabel %}
  248.                 <span class="product-sale-badge">{{ productDiscountLabel }}</span>
  249.               {% endif %}
  250.             </div>
  251.           </div>
  253.           <section class="product-summary" aria-labelledby="productTitle">
  254.             <h1 id="productTitle">
  255.               <span class="desktop-title">{{ productName }}</span>
  256.               <span class="mobile-title">{{ productMobileName }}</span>
  257.             </h1>
  258.             <div class="product-meta">
  259.               <span class="product-stars" aria-label="Рейтинг 4.9">★★★★★ <b>4.9</b></span>
  260.               <span>Продано 5 744</span>
  261.               <a href="#reviews" data-product-tab-link="reviews">896 отзывов</a>
  262.             </div>
  263.             <div class="mobile-price-row" aria-hidden="true">
  264.               <strong>{{ productPrice }}</strong>
  265.               {% if productDiscountLabel %}<b>{{ productDiscountLabel }}</b>{% endif %}
  266.             </div>
  268.             <div class="variant-block">
  269.               <p class="variant-title">Выберите регион и издание <span>*</span></p>
  270.               <div class="variant-grid" role="group" aria-label="Регион и издание">
  271.                 {% if productVariants %}
  272.                   {% for variant in productVariants %}
  273.                     {% set selected = variant.id == productData.selected_variant_id %}
  274.                     <button
  275.                       class="variant-option {{ selected ? 'is-selected' : '' }} {{ variant.in_stock ? '' : 'is-disabled' }}"
  276.                       type="button"
  277.                       data-variant-option
  278.                       data-price="{{ variant.price_label }}"
  279.                       data-context="{{ variant.context_label|default(variant.label) }}"
  280.                       data-region-label="{{ variant.region }}"
  281.                       data-region-restriction-title="{{ variant.region_restriction.title|default('') }}"
  282.                       data-region-restriction-text="{{ variant.region_restriction.text|default('') }}"
  283.                       data-region-restriction-countries="{{ variant.region_restriction.countries|default('') }}"
  284.                       data-name="{{ variant.name }}"
  285.                       data-url="{{ variant.url }}"
  286.                       data-delivery-label="{{ variant.delivery.label|default(productDelivery.label) }}"
  287.                       data-delivery-short-label="{{ variant.delivery.short_label|default(productDeliveryShortLabel) }}"
  288.                       data-delivery-description="{{ variant.delivery.description|default(productDelivery.description) }}"
  289.                       data-delivery-type="{{ variant.delivery.type|default(productDelivery.type|default('digital_item')) }}"
  290.                       data-product-id="{{ variant.id }}"
  291.                       data-forms="{{ variant.forms|default([])|json_encode|e('html_attr') }}"
  292.                       data-discount-label="{{ variant.discount_label|default('') }}"
  293.                       {{ variant.in_stock ? '' : 'disabled' }}
  294.                     >
  295.                       <span>{{ variant.label }}</span>
  296.                       <small>{{ selected ? 'Выбрано' : (variant.in_stock ? variant.price_label : 'Нет в наличии') }}</small>
  297.                     </button>
  298.                   {% endfor %}
  299.                 {% else %}
  300.                   <button class="variant-option is-selected" type="button">
  301.                     <span>{{ productRegion }}</span>
  302.                     <small>Выбрано</small>
  303.                   </button>
  304.                   <button class="variant-option" type="button">
  305.                     <span>Россия · Deluxe</span>
  306.                     <small>+2 500 ₽</small>
  307.                   </button>
  308.                   <button class="variant-option" type="button">
  309.                     <span>Россия · Premium</span>
  310.                     <small>+4 300 ₽</small>
  311.                   </button>
  312.                   <button class="variant-option is-discount" type="button">
  313.                     <span><span class="desktop-label">Казахстан · Standard</span><span class="mobile-label">Казахстан</span></span>
  314.                     <small>−400 ₽</small>
  315.                   </button>
  316.                 {% endif %}
  317.               </div>
  318.               {% if productVariants|length > 4 %}
  319.                 <button class="show-regions" type="button">Всего вариантов: {{ productVariants|length }}</button>
  320.               {% elseif not productVariants %}
  321.                 <button class="show-regions" type="button">Показать все регионы ›</button>
  322.               {% endif %}
  323.             </div>
  325.             <div class="product-media-tabs">
  326.               <div class="product-media-head" aria-label="Галерея товара">
  327.                 <p>Изображения{% if productPreviewGalleryCount %} <span>{{ productPreviewGalleryCount }}</span>{% endif %}</p>
  328.               </div>
  329.               <div class="thumb-row-product" aria-label="Миниатюры">
  330.                 {% if productPreviewGallery %}
  331.                   {% for image in productPreviewGallery %}
  332.                     {% set fullImage = image.url|default(productImage) %}
  333.                     <button
  334.                       class="product-thumb {{ loop.first ? 'is-active' : '' }}"
  335.                       type="button"
  336.                       aria-label="Изображение {{ loop.index }}"
  337.                       data-product-thumb
  338.                       data-full-image="{{ fullImage }}"
  339.                     >
  340.                       <img src="{{ image.thumbnail_url|default(fullImage) }}" alt="" />
  341.                     </button>
  342.                   {% endfor %}
  343.                 {% else %}
  344.                   <button class="product-thumb is-active" type="button" aria-label="Изображение 1" data-product-thumb data-full-image="{{ productImage }}">
  345.                     <img src="{{ productImage }}" alt="" />
  346.                   </button>
  347.                 {% endif %}
  348.               </div>
  349.             </div>
  350.           </section>
  352.           <aside class="purchase-column" aria-label="Покупка">
  353.             <section class="purchase-card">
  354.               <div class="price-main">
  355.                 <strong>{{ productPrice }}</strong>
  356.                 {% if not productData %}<del>6 499 ₽</del>{% endif %}
  357.               </div>
  358.               <div class="buy-context">
  359.                 <span>{{ productRegion }}</span>
  360.                 <b data-discount-label-target {{ productDiscountLabel ? '' : 'hidden' }}>{{ productDiscountLabel }}</b>
  361.               </div>
  362.               <div class="delivery-method" data-delivery-method>
  363.                 <span>Способ получения</span>
  364.                 <strong data-delivery-label-target>{{ productDelivery.label }}</strong>
  365.                 <small data-delivery-description-target>{{ productDelivery.description }}</small>
  366.               </div>
  367.               <button class="buy-now" type="button" data-checkout-open aria-haspopup="dialog" aria-controls="checkoutModal">
  368.                 <img src="./assets/cart-white.svg" alt="" />
  369.                 Купить сейчас
  370.               </button>
  371.               <div class="promo-widget" data-promo-widget>
  372.                 <button class="promo-link" type="button" aria-expanded="false">
  373.                   Ввести промокод <img src="./assets/promo-arrow.svg" alt="" />
  374.                 </button>
  375.                 <form class="promo-form" hidden>
  376.                   <div class="promo-control-row">
  377.                     <input type="text" placeholder="Промокод" autocomplete="off" />
  378.                     <button class="promo-apply" type="submit">
  379.                       <span>OK</span>
  380.                       <img src="./assets/auth-check.svg" alt="" />
  381.                     </button>
  382.                   </div>
  383.                   <p class="promo-help">Введите промокод - скидка применится автоматически.</p>
  384.                   <p class="promo-success" hidden>Промокод применён - скидка 15%</p>
  385.                   <p class="promo-error" hidden>× Промокод недействителен или истёк</p>
  386.                 </form>
  387.               </div>
  388.               <ul class="buy-features">
  389.                 <li>Безопасная сделка</li>
  390.                 <li>Мгновенная доставка</li>
  391.                 <li>Гарантия возврата</li>
  392.               </ul>
  393.             </section>
  395.             <section class="seller-card" aria-label="Продавец">
  396.               <img class="seller-logo" src="./assets/blogger-playpapa-logo.svg" alt="" />
  397.               <div>
  398.                 <strong>PlayPapa</strong>
  399.                 <span>20 218 продаж</span>
  400.               </div>
  401.               <b class="seller-rating">★ 4.9</b>
  402.             </section>
  403.           </aside>
  404.         </div>
  405.       </section>
  407.       <section class="shell product-info" aria-label="Описание товара">
  408.         <nav class="product-page-tabs" aria-label="Разделы товара">
  409.           <button class="is-active" type="button" data-product-tab="description">Описание</button>
  410.           <button id="reviews" type="button" data-product-tab="reviews">Отзывы <span class="tab-count">896</span></button>
  411.           <button type="button" data-product-tab="comments">Комментарии <span class="tab-count">28</span></button>
  412.           <button type="button" data-product-tab="images">Изображения <span class="tab-count">{{ productGalleryCount ?: 1 }}</span></button>
  413.         </nav>
  415.         <div class="product-description product-tab-panel is-active is-collapsed" data-product-panel="description">
  416.           <div class="description-copy">
  417.             {% if productData and productData.description_html %}
  418.               {{ productData.description_html|raw }}
  419.             {% else %}
  420.               <p>
  421.                 DOOM 2016 - перезапуск легендарной серии от id Software. Стремительный, агрессивный шутер с культовым
  422.                 арсеналом, добиваниями Glory Kill и саундтреком, ставшим эталоном жанра. Ключ активируется в Steam, регион
  423.                 РФ + СНГ.
  424.               </p>
  425.             {% endif %}
  426.           </div>
  428.           {% if productSpecs %}
  429.             <div class="spec-grid product-spec-grid" aria-label="Характеристики товара">
  430.               {% for spec in productSpecs %}
  431.                 <div class="spec-card">
  432.                   <small>{{ spec.label }}</small>
  433.                   <strong{% if spec.key|default('') == 'activation_region' %} data-spec-region{% endif %}>{{ spec.value }}</strong>
  434.                 </div>
  435.               {% endfor %}
  436.             </div>
  437.           {% endif %}
  439.           <div class="region-restriction-note" data-region-restriction {% if not productRegionRestriction %}hidden{% endif %}>
  440.             <strong data-region-restriction-title>{{ productRegionRestriction.title|default('') }}</strong>
  441.             <p data-region-restriction-text>{{ productRegionRestriction.text|default('') }}</p>
  442.             <code data-region-restriction-countries>{{ productRegionRestriction.countries|default('') }}</code>
  443.           </div>
  445.           <div class="product-description-extra" id="descriptionDetails" data-description-extra hidden>
  446.             {% if productData and productData.short_description_html %}
  447.               {{ productData.short_description_html|raw }}
  448.             {% else %}
  449.             <ul>
  450.               <li>Автоматическая выдача 24/7 - активация не дольше 2 минут.</li>
  451.               <li>Оплата через СБП - комиссия 0%.</li>
  452.               <li>Отправляется как подарок (gift) на ваш аккаунт Steam.</li>
  453.               <li>Цены для разных регионов могут отличаться - смотрите при выборе.</li>
  454.               <li>Куплено официально через Steam. Действует гарантия возврата.</li>
  455.             </ul>
  457.             <h2>Подробнее об игре</h2>
  458.             <p>
  459.               Вы - Палач Рока, пробудившийся на марсианской базе, захваченной силами Ада. Никаких перезарядок-передышек:
  460.               игра поощряет постоянное движение и агрессию. Собирайте руны, улучшайте броню Praetor и оружие, исследуйте
  461.               секреты уровней и уничтожайте демонов всеми доступными способами.
  462.             </p>
  463.             {% endif %}
  464.           </div>
  466.           <button class="description-toggle" type="button" data-description-toggle aria-expanded="false" aria-controls="descriptionDetails">
  467.             <span>Показать полностью</span>
  468.             <img src="./assets/promo-arrow.svg" alt="" />
  469.           </button>
  470.         </div>
  472.         <section class="product-reviews-block product-tab-panel" data-product-panel="reviews" aria-label="Отзывы о товаре" hidden>
  473.           <div class="reviews-score-card">
  474.             <div class="reviews-score-main">
  475.               <strong>4.9</strong>
  476.               <span aria-label="Рейтинг 4.9 из 5">★★★★★</span>
  477.               <b>896 отзывов</b>
  478.             </div>
  479.             <div class="reviews-score-bars" aria-label="Распределение оценок">
  480.               <div class="score-row"><span>5</span><i><b style="--score: 92%"></b></i><em>824</em></div>
  481.               <div class="score-row"><span>4</span><i><b style="--score: 7%"></b></i><em>52</em></div>
  482.               <div class="score-row"><span>3</span><i><b style="--score: 2%"></b></i><em>14</em></div>
  483.               <div class="score-row"><span>2</span><i><b style="--score: 1%"></b></i><em>4</em></div>
  484.               <div class="score-row"><span>1</span><i><b style="--score: 1%"></b></i><em>2</em></div>
  485.             </div>
  486.           </div>
  488.           <div class="review-form-grid">
  489.             <article class="review-form-wrap">
  490.               <form class="product-review-form" data-review-form>
  491.                 <div class="review-form-head">
  492.                   <h3><span class="desktop-label">Поделитесь впечатлением</span><span class="mobile-label">Ваш отзыв</span></h3>
  493.                 </div>
  494.                 <div class="review-form-rating" role="radiogroup" aria-label="Поставьте оценку">
  495.                   <button type="button" aria-label="1 звезда" data-rating="1">★</button>
  496.                   <button type="button" aria-label="2 звезды" data-rating="2">★</button>
  497.                   <button type="button" aria-label="3 звезды" data-rating="3">★</button>
  498.                   <button type="button" aria-label="4 звезды" data-rating="4">★</button>
  499.                   <button type="button" aria-label="5 звезд" data-rating="5">★</button>
  500.                   <b>Поставьте оценку</b>
  501.                 </div>
  502.                 <div class="review-tags" aria-label="Быстрые теги">
  503.                   <button type="button">Быстрая выдача</button>
  504.                   <button type="button">Всё честно</button>
  505.                   <button type="button">Приятная цена</button>
  506.                 </div>
  507.                 <label class="review-textarea">
  508.                   <textarea placeholder="Расскажите, как прошла покупка и активация..."></textarea>
  509.                 </label>
  510.                 <p class="review-error" hidden>Пожалуйста, напишите текст перед отправкой</p>
  511.                 <p class="review-success" hidden>Отправлено, спасибо! Появится после модерации</p>
  512.                 <button class="review-submit" type="submit">Опубликовать отзыв</button>
  513.               </form>
  514.             </article>
  515.           </div>
  517.           <div class="product-review-list">
  518.             <article class="product-review-item">
  519.               <div class="review-avatar"></div>
  520.               <div class="review-item-body">
  521.                 <div class="review-item-head">
  522.                   <div>
  523.                     <strong>Bizidin</strong>
  524.                     <span aria-label="5 из 5">★★★★★</span>
  525.                   </div>
  526.                   <time>Сегодня, 11:48</time>
  527.                 </div>
  528.                 <b class="review-product-chip">DOOM 2016</b>
  529.                 <p>Отзывчивый и приятный продавец, помог не только с товаром, но и с другим вопросом. Рекомендую!</p>
  530.                 <div class="review-actions">
  531.                   <button class="like-action is-liked" type="button" aria-label="13 лайков">
  532.                     <img src="./assets/like-filled.svg" alt="" />
  533.                     <span>13</span>
  534.                   </button>
  535.                   <button type="button">Ответить</button>
  536.                 </div>
  537.               </div>
  538.             </article>
  540.             <article class="product-review-item">
  541.               <div class="review-avatar"></div>
  542.               <div class="review-item-body">
  543.                 <div class="review-item-head">
  544.                   <div>
  545.                     <strong>maxx_88</strong>
  546.                     <span aria-label="4 из 5">★★★★<i>★</i></span>
  547.                   </div>
  548.                   <time>2 дня назад</time>
  549.                 </div>
  550.                 <b class="review-product-chip">DOOM Eternal</b>
  551.                 <p>Немного подождал ответа поддержки, но в итоге всё ок. Цена приятная.</p>
  552.                 <div class="review-actions">
  553.                   <button class="like-action" type="button" aria-label="3 лайка">
  554.                     <img src="./assets/like-outline.svg" alt="" />
  555.                     <span>3</span>
  556.                   </button>
  557.                   <button type="button">Ответить</button>
  558.                 </div>
  559.               </div>
  560.             </article>
  561.           </div>
  562.         </section>
  564.         <section class="product-questions-block product-tab-panel" data-product-panel="comments" aria-label="Вопросы о товаре" hidden>
  565.           <div class="question-form-grid">
  566.             <form class="product-question-form" data-question-form>
  567.               <h3>Задайте вопрос о товаре</h3>
  568.               <label class="question-textarea">
  569.                 <textarea placeholder="Ваш вопрос по товару..."></textarea>
  570.               </label>
  571.               <div class="question-form-footer">
  572.                 <p class="question-error" hidden>Напишите вопрос перед отправкой</p>
  573.                 <p class="question-success" hidden>Отправлено - ответит продавец или покупатели</p>
  574.                 <button class="question-submit" type="submit">Отправить</button>
  575.               </div>
  576.             </form>
  577.           </div>
  579.           <div class="product-question-list">
  580.             <article class="product-question-item">
  581.               <div class="question-main">
  582.                 <div class="review-avatar question-avatar"></div>
  583.                 <div class="question-item-body">
  584.                   <div class="review-item-head">
  585.                     <strong>Vladislav</strong>
  586.                     <time>Сегодня, 10:12</time>
  587.                   </div>
  588.                   <p>А регион точно РФ? Активируется на российском аккаунте?</p>
  589.                   <div class="review-actions question-actions">
  590.                     <button class="like-action" type="button" aria-label="4 лайка">
  591.                       <img src="./assets/like-outline.svg" alt="" />
  592.                       <span>4</span>
  593.                     </button>
  594.                     <button type="button">Ответить</button>
  595.                   </div>
  597.                   <div class="question-answer">
  598.                     <div class="review-avatar seller-answer-avatar"></div>
  599.                     <div class="question-answer-body">
  600.                       <div class="review-item-head">
  601.                         <strong>PlayPapa <em>· Продавец</em></strong>
  602.                         <time>Сегодня, 10:20</time>
  603.                       </div>
  604.                       <p>Да, ключ для региона РФ+СНГ, активируется на российском аккаунте Steam без VPN.</p>
  605.                       <div class="review-actions question-actions">
  606.                         <button class="like-action is-liked" type="button" aria-label="9 лайков">
  607.                           <img src="./assets/like-filled.svg" alt="" />
  608.                           <span>9</span>
  609.                         </button>
  610.                       </div>
  611.                     </div>
  612.                   </div>
  613.                 </div>
  614.               </div>
  615.             </article>
  616.           </div>
  617.         </section>
  619.         <section class="product-images-block product-tab-panel" data-product-panel="images" aria-label="Изображения товара" hidden>
  620.           <div class="product-images-grid">
  621.             {% if productGallery %}
  622.               {% for image in productGallery %}
  623.                 <button class="product-image-preview" type="button" aria-label="Открыть изображение {{ loop.index }}">
  624.                   <img src="{{ image.url|default(productImage) }}" alt="{{ productName }} изображение {{ loop.index }}" />
  625.                 </button>
  626.               {% endfor %}
  627.             {% else %}
  628.               <button class="product-image-preview" type="button" aria-label="Открыть изображение 1">
  629.                 <img src="{{ productImage }}" alt="{{ productName }} скриншот 1" />
  630.               </button>
  631.             {% endif %}
  632.           </div>
  633.         </section>
  634.       </section>
  636.       <section class="shell product-section product-recommendations">
  637.         <div class="section-head">
  638.           <h2>С этим товаром смотрят</h2>
  639.           <a class="show-all" href="/catalog">Показать все</a>
  640.         </div>
  641.         <div class="product-grid product-recommend-grid">
  642.           {% for related in relatedProducts %}
  643.             <article class="product-card">
  644.               <div class="product-cover">
  645.                 <img src="{{ related.image_url|default('./assets/product-pubg.png') }}" alt="" />
  646.                 {% if related.discount_label|default('') %}
  647.                   <span class="discount red">{{ related.discount_label }}</span>
  648.                 {% endif %}
  649.               </div>
  650.               <div class="product-body">
  651.                 <h3>{{ related.name|default('Товар PlayPapa') }}</h3>
  652.                 <div class="price-line"><strong>{{ related.price_label|default('Цена уточняется') }}</strong></div>
  653.                 <a href="{{ related.url|default('/catalog') }}">Купить</a>
  654.               </div>
  655.             </article>
  656.           {% else %}
  657.             <article class="product-card">
  658.               <div class="product-cover">
  659.                 <img src="./assets/product-pubg.png" alt="" />
  660.               </div>
  661.               <div class="product-body">
  662.                 <h3>Популярные товары PlayPapa</h3>
  663.                 <div class="price-line"><strong>Каталог</strong></div>
  664.                 <a href="/catalog">Смотреть</a>
  665.               </div>
  666.             </article>
  667.           {% endfor %}
  668.         </div>
  669.       </section>
  671.       <footer class="shell site-footer">
  672.         <div class="footer-top">
  673.           <img src="./assets/logo.svg" alt="PlayPapa" />
  674.           <nav>
  675.             <a href="#">Стать продавцом</a>
  676.             <a href="#">Бонусы</a>
  677.             <a href="#">Поддержка</a>
  678.             <a href="#">Гарантии</a>
  679.             <a href="#">Отзывы</a>
  680.           </nav>
  681.         </div>
  682.         <div class="footer-mid">
  683.           <div class="footer-social">
  684.             <b>PlayPapa</b>
  685.             <a class="social-icon" href="#" aria-label="VK"><img src="./assets/footer-vk.svg" alt="" /></a>
  686.             <a class="social-icon" href="#" aria-label="Telegram"><img src="./assets/footer-telegram.svg" alt="" /></a>
  687.             <a class="footer-channel" href="#">Polk Zone</a>
  688.             <a class="social-icon" href="#" aria-label="TikTok"><img src="./assets/footer-tiktok.svg" alt="" /></a>
  689.             <a class="social-icon" href="#" aria-label="YouTube"><img src="./assets/footer-youtube.svg" alt="" /></a>
  690.           </div>
  691.           <div class="payments">
  692.             <span><img src="./assets/payment-visa.svg" alt="VISA" /></span>
  693.             <span><img src="./assets/payment-mir.svg" alt="МИР" /></span>
  694.             <span><img src="./assets/payment-mastercard.svg" alt="Mastercard" /></span>
  695.           </div>
  696.         </div>
  697.         <div class="footer-bottom">
  698.           <nav>
  699.             <a href="#">Политика конфиденциальности</a>
  700.             <a href="#">Соглашение</a>
  701.             <a href="#">Договор-оферта</a>
  702.           </nav>
  703.           <span>© 2026 PlayPapa</span>
  704.         </div>
  705.       </footer>
  706.     </main>
  708.     <aside class="sticky-purchase-bar" aria-label="Быстрая покупка">
  709.       <div class="sticky-purchase-inner">
  710.         <img class="sticky-purchase-thumb" src="{{ productImage }}" alt="" />
  711.         <strong class="sticky-purchase-title">{{ productName }}</strong>
  712.         <div class="sticky-purchase-price">
  713.           <strong>{{ productPrice }}</strong>
  714.           {% if not productData %}<del>6 499 ₽</del>{% endif %}
  715.         </div>
  716.         <button class="sticky-purchase-button" type="button" data-checkout-open aria-haspopup="dialog" aria-controls="checkoutModal">Купить сейчас</button>
  717.       </div>
  718.     </aside>
  720.     <section class="checkout-modal-layer" id="checkoutModal" aria-hidden="true" hidden inert>
  721.       <button class="checkout-backdrop" type="button" aria-label="Закрыть оформление заказа" data-checkout-close></button>
  722.       <form class="checkout-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="checkoutTitle" novalidate>
  723.         <button class="checkout-close" type="button" aria-label="Закрыть" data-checkout-close>
  724.           <svg viewBox="0 0 20 20" aria-hidden="true">
  725.             <path d="M4.5 4.5 15.5 15.5M15.5 4.5 4.5 15.5" />
  726.           </svg>
  727.         </button>
  729.         <h2 id="checkoutTitle">Оформление заказа</h2>
  731.         <div class="checkout-product">
  732.           <img src="{{ productImage }}" alt="" />
  733.           <div>
  734.             <strong>{{ productName }}</strong>
  735.             <span>{{ productRegion }}{% if productDeliveryShortLabel %} · {{ productDeliveryShortLabel }}{% endif %}</span>
  736.           </div>
  737.           <div class="checkout-product-price">
  738.             <strong>{{ productPrice }}</strong>
  739.             {% if not productData %}<del>6 499 ₽</del>{% endif %}
  740.           </div>
  741.         </div>
  743.         <label class="checkout-field">
  744.           <span>{{ productDelivery.type|default('digital_item') == 'steam_key' ? 'E-mail для чека и ключа' : 'E-mail для чека' }}</span>
  745.           <input type="email" name="email" placeholder="you@example.com" autocomplete="email" required />
  746.           <small hidden>Введите корректный e-mail</small>
  747.         </label>
  749.         <input type="hidden" name="product_id" value="{{ checkoutProductId }}" data-checkout-product-id />
  750.         <div
  751.           class="checkout-dynamic-fields"
  752.           data-checkout-fields
  753.           data-initial-forms="{{ checkoutForms|json_encode|e('html_attr') }}"
  754.           data-initial-delivery-type="{{ productDelivery.type|default('digital_item') }}"
  755.         ></div>
  757.         <div class="checkout-payments">
  758.           <span class="checkout-label">Способ оплаты</span>
  759.           <div class="checkout-payment-list" role="radiogroup" aria-label="Способ оплаты">
  760.             <button class="checkout-payment-option is-selected" type="button" role="radio" aria-checked="true" data-payment-method="cryptobot">
  761.               <span class="checkout-payment-icon"><img src="./assets/cart-white.svg" alt="" /></span>
  762.               <span class="checkout-payment-copy">
  763.                 <b>CryptoBot</b>
  764.                 <small>Оплата через Telegram Crypto Bot</small>
  765.               </span>
  766.               <span class="checkout-payment-check"><img src="./assets/auth-check.svg" alt="" /></span>
  767.             </button>
  768.           </div>
  769.           <input type="hidden" name="payment" value="cryptobot" />
  770.         </div>
  772.         <div class="checkout-total">
  773.           <span>К оплате</span>
  774.           <strong data-checkout-total-price>{{ productPrice }}</strong>
  775.         </div>
  777.         <div class="checkout-confirm">
  778.           <span>После оплаты заказ будет автоматически создан в GalaxyLink.</span>
  779.         </div>
  781.         <button class="checkout-submit" type="submit">Оплатить {{ productPrice }}</button>
  783.         <div class="checkout-result" data-checkout-result hidden></div>
  785.         <p class="checkout-consent">
  786.           Сначала создаём счёт CryptoBot. GalaxyLink-заказ запускается только после подтверждения оплаты webhook’ом.
  787.         </p>
  788.       </form>
  789.     </section>
  791.     <div class="image-lightbox" data-image-lightbox hidden>
  792.       <button class="image-lightbox-backdrop" type="button" aria-label="Закрыть изображение"></button>
  793.       <figure class="image-lightbox-dialog">
  794.         <button class="image-lightbox-close" type="button" aria-label="Закрыть">×</button>
  795.         <img src="" alt="" />
  796.       </figure>
  797.     </div>
  799.     <script>
  800.       const root = document.documentElement;
  801.       const themeSwitch = document.querySelector(".theme-switch");
  802.       const themeButtons = document.querySelectorAll(".theme-btn[data-theme]");
  804.       const setTheme = (theme, animate = false) => {
  805.         if (animate) {
  806.           document.body.classList.remove("theme-animating");
  807.           void document.body.offsetWidth;
  808.           document.body.classList.add("theme-animating");
  809.         }
  811.         root.dataset.theme = theme;
  812.         try {
  813.           localStorage.setItem("playpapa-theme", theme);
  814.         } catch {}
  816.         themeButtons.forEach((button) => {
  817.           const active = button.dataset.theme === theme;
  818.           button.classList.toggle("is-active", active);
  819.           button.setAttribute("aria-pressed", active ? "true" : "false");
  820.         });
  822.         if (animate) window.setTimeout(() => document.body.classList.remove("theme-animating"), 560);
  823.       };
  825.       setTheme(root.dataset.theme === "dark" ? "dark" : "light");
  826.       themeButtons.forEach((button) => button.addEventListener("click", () => setTheme(button.dataset.theme, true)));
  827.       themeSwitch?.addEventListener("click", (event) => {
  828.         if (event.target.closest(".theme-btn")) return;
  829.         setTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
  830.       });
  832.       const profileMenu = document.querySelector(".profile-menu");
  833.       const profileButton = profileMenu?.querySelector(".profile-btn");
  834.       const profilePopover = document.getElementById("profilePopover");
  836.       const setProfileOpen = (open, returnFocus = false) => {
  837.         if (!profileMenu || !profilePopover || !profileButton) return;
  838.         profileMenu.classList.toggle("is-open", open);
  839.         profileButton.setAttribute("aria-expanded", open ? "true" : "false");
  840.         profilePopover.setAttribute("aria-hidden", open ? "false" : "true");
  841.         profilePopover.toggleAttribute("inert", !open);
  842.         document.body.classList.toggle("profile-open", open);
  843.         if (returnFocus) profileButton.focus();
  844.       };
  846.       profileButton?.addEventListener("click", (event) => {
  847.         event.stopPropagation();
  848.         setProfileOpen(!profileMenu?.classList.contains("is-open"));
  849.       });
  851.       document.addEventListener("pointerdown", (event) => {
  852.         if (!profileMenu?.classList.contains("is-open") || profileMenu.contains(event.target)) return;
  853.         setProfileOpen(false);
  854.       });
  856.       document.addEventListener("keydown", (event) => {
  857.         if (event.key !== "Escape" || !profileMenu?.classList.contains("is-open")) return;
  858.         setProfileOpen(false, true);
  859.       });
  861.       const catalogLayer = document.getElementById("catalogMegaMenu");
  862.       const catalogButton = document.querySelector(".catalog-btn:not([href])");
  863.       const catalogSideLinks = document.querySelectorAll(".catalog-side-link");
  864.       const catalogFeaturedItems = [
  865.         ["service-steam.png", "Пополнение Steam"],
  866.         ["service-brawl.png", "Game Pass"],
  867.         ["service-steam.png", "Пополнение PSN"],
  868.         ["service-brawl.png", "PS Plus"],
  869.         ["service-pubg.png", "Grand Theft Auto V"],
  870.         ["service-roblox.png", "Minecraft"],
  871.         ["service-playstation.png", "Diablo 4"],
  872.         ["service-mobile.png", "ARC Raiders"],
  873.         ["service-chatgpt.png", "Dead by Daylight"],
  874.       ];
  875.       const catalogNewItems = [
  876.         ["article-paradise.png", "Gothic 1 Remake"],
  877.         ["article-sale.png", "Forza Horizon 6"],
  878.         ["product-pubg.png", "Assassin's Creed: Black..."],
  879.         ["article-mobile.png", "007 First Light"],
  880.         ["article-sale.png", "Call of Duty: Modern..."],
  881.         ["product-pubg.png", "Marvel's Wolverine"],
  882.         ["article-paradise.png", "UFC 6"],
  883.         ["article-sale.png", "Subnautica 2"],
  884.         ["product-pubg.png", "SILENT HILL: Townfall"],
  885.       ];
  887.       const catalogItemMarkup = ([image, label]) => `
  888.         <a class="catalog-showcase-item" href="#" aria-label="${label}">
  889.           <img src="./assets/${image}" alt="">
  890.           <span>${label}</span>
  891.         </a>
  892.       `;
  894.       const catalogFeatured = document.getElementById("catalogFeatured");
  895.       const catalogNew = document.getElementById("catalogNew");
  896.       if (catalogFeatured) catalogFeatured.innerHTML = catalogFeaturedItems.map(catalogItemMarkup).join("");
  897.       if (catalogNew) catalogNew.innerHTML = catalogNewItems.map(catalogItemMarkup).join("");
  899.       const setCatalogOpen = (open) => {
  900.         if (!catalogLayer || !catalogButton) return;
  901.         catalogLayer.classList.toggle("is-open", open);
  902.         catalogLayer.setAttribute("aria-hidden", open ? "false" : "true");
  903.         catalogLayer.toggleAttribute("inert", !open);
  904.         document.body.classList.toggle("catalog-open", open);
  905.         catalogButton.setAttribute("aria-expanded", open ? "true" : "false");
  906.       };
  908.       catalogButton?.addEventListener("click", (event) => {
  909.         event.preventDefault();
  910.         setProfileOpen(false);
  911.         setCatalogOpen(!catalogLayer?.classList.contains("is-open"));
  912.       });
  914.       catalogSideLinks.forEach((link) => {
  915.         link.addEventListener("click", () => {
  916.           catalogSideLinks.forEach((item) => item.classList.toggle("is-active", item === link));
  917.         });
  918.       });
  920.       catalogLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  921.         link.addEventListener("click", (event) => event.preventDefault());
  922.       });
  924.       document.addEventListener("pointerdown", (event) => {
  925.         if (!catalogLayer?.classList.contains("is-open")) return;
  926.         if (catalogLayer.contains(event.target) || catalogButton?.contains(event.target)) return;
  927.         setCatalogOpen(false);
  928.       });
  930.       document.addEventListener("keydown", (event) => {
  931.         if (event.key !== "Escape" || !catalogLayer?.classList.contains("is-open")) return;
  932.         setCatalogOpen(false);
  933.         catalogButton?.focus();
  934.       });
  936.       const checkoutModal = document.getElementById("checkoutModal");
  937.       const checkoutDialog = checkoutModal?.querySelector(".checkout-modal-dialog");
  938.       const checkoutOpenButtons = document.querySelectorAll("[data-checkout-open]");
  939.       const checkoutCloseButtons = checkoutModal?.querySelectorAll("[data-checkout-close]");
  940.       const checkoutPaymentButtons = checkoutModal?.querySelectorAll(".checkout-payment-option");
  941.       const checkoutPaymentInput = checkoutModal?.querySelector('input[name="payment"]');
  942.       const checkoutEmailInput = checkoutModal?.querySelector('input[name="email"]');
  943.       const checkoutEmailField = checkoutEmailInput?.closest(".checkout-field");
  944.       const checkoutEmailError = checkoutEmailField?.querySelector("small");
  945.       const checkoutProductIdInput = checkoutModal?.querySelector("[data-checkout-product-id]");
  946.       const checkoutDynamicFields = checkoutModal?.querySelector("[data-checkout-fields]");
  947.       const checkoutResult = checkoutModal?.querySelector("[data-checkout-result]");
  948.       const checkoutEndpoint = "{{ path('payment_cryptobot_create') }}";
  949.       const checkoutStatusEndpointBase = "/checkout/galaxylink/test/";
  950.       let checkoutReturnFocus = null;
  951.       let checkoutPollTimer = 0;
  953.       const setCheckoutEmailError = (show) => {
  954.         checkoutEmailField?.classList.toggle("is-invalid", show);
  955.         if (checkoutEmailError) checkoutEmailError.hidden = !show;
  956.       };
  958.       const checkoutEscape = (value) =>
  959.         String(value ?? "")
  960.           .replaceAll("&", "&amp;")
  961.           .replaceAll("<", "&lt;")
  962.           .replaceAll(">", "&gt;")
  963.           .replaceAll('"', "&quot;")
  964.           .replaceAll("'", "&#039;");
  966.       const checkoutFieldMeta = {
  967.         invite_url: ["Ссылка-приглашение Steam", "https://s.team/p/xxxx/yyyyyyyy", "url"],
  968.         user_id: ["User ID", "ID пользователя", "text"],
  969.         server_id: ["Сервер", "Europe", "text"],
  970.         region_id: ["Регион", "Europe", "text"],
  971.         ip_address: ["IP-адрес", "Автоматически, если оставить пустым", "text"],
  972.         login: ["Логин аккаунта", "login@example.com", "text"],
  973.         password: ["Пароль аккаунта", "Пароль", "password"],
  974.         backup_codes: ["Backup codes", "Коды через пробел", "text"],
  975.         order_comment: ["Комментарий", "Комментарий для оператора", "text"],
  976.         roblox_username: ["Roblox username", "PlayerOne", "text"],
  977.         roblox_password: ["Roblox password", "Пароль Roblox", "password"],
  978.       };
  980.       const parseCheckoutForms = (raw) => {
  981.         try {
  982.           const forms = JSON.parse(raw || "[]");
  983.           return Array.isArray(forms) ? forms.map((item) => String(item || "").trim().toLowerCase()).filter(Boolean) : [];
  984.         } catch {
  985.           return [];
  986.         }
  987.       };
  989.       const checkoutFormsFor = (forms, deliveryType) => {
  990.         const result = Array.from(new Set(forms));
  991.         if (deliveryType === "steam_gift" && !result.includes("invite_url")) result.push("invite_url");
  992.         return result.filter((field) => checkoutFieldMeta[field]);
  993.       };
  995.       const renderCheckoutFields = (forms, deliveryType) => {
  996.         if (!checkoutDynamicFields) return;
  997.         const fields = checkoutFormsFor(forms, deliveryType);
  998.         checkoutDynamicFields.hidden = fields.length === 0;
  999.         checkoutDynamicFields.innerHTML = fields.map((field) => {
  1000.           const [label, placeholder, type] = checkoutFieldMeta[field];
  1001.           const required = field === "ip_address" || field === "order_comment" ? "" : "required";
  1002.           return `
  1003.             <label class="checkout-field checkout-extra-field">
  1004.               <span>${checkoutEscape(label)}</span>
  1005.               <input type="${type}" name="${checkoutEscape(field)}" placeholder="${checkoutEscape(placeholder)}" autocomplete="off" ${required} data-checkout-extra-input />
  1006.               <small hidden>Заполните поле</small>
  1007.             </label>
  1008.           `;
  1009.         }).join("");
  1010.       };
  1012.       const collectCheckoutFields = () => {
  1013.         const fields = {};
  1014.         const inputs = Array.from(checkoutDynamicFields?.querySelectorAll("[data-checkout-extra-input]") || []);
  1015.         for (const input of inputs) {
  1016.           if (!input.checkValidity()) {
  1017.             input.closest(".checkout-field")?.classList.add("is-invalid");
  1018.             input.focus();
  1019.             return null;
  1020.           }
  1021.           input.closest(".checkout-field")?.classList.remove("is-invalid");
  1022.           fields[input.name] = input.value.trim();
  1023.         }
  1024.         return fields;
  1025.       };
  1027.       const renderCheckoutResult = (order, error = "") => {
  1028.         if (!checkoutResult) return;
  1029.         checkoutResult.hidden = false;
  1030.         checkoutResult.classList.toggle("is-error", Boolean(error));
  1031.         checkoutResult.classList.toggle("is-success", !error && order?.status === "completed");
  1032.         if (error) {
  1033.           checkoutResult.innerHTML = `<strong>Не получилось создать оплату</strong><p>${checkoutEscape(error)}</p>`;
  1034.           return;
  1035.         }
  1037.         const items = Array.isArray(order?.items) ? order.items : [];
  1038.         const codes = items.map((item) => `
  1039.           <li>
  1040.             <span>${checkoutEscape(item.label || "Код")}</span>
  1041.             <code>${checkoutEscape(item.code || "")}</code>
  1042.           </li>
  1043.         `).join("");
  1044.         const verification = order?.verification?.url
  1045.           ? `<a href="${checkoutEscape(order.verification.url)}" target="_blank" rel="noreferrer">Открыть verification-ссылку</a>`
  1046.           : "";
  1048.         checkoutResult.innerHTML = `
  1049.           <strong>${checkoutEscape(order?.status_label || "Заказ создан")}</strong>
  1050.           <p>${checkoutEscape(order?.message || "")}</p>
  1051.           <dl>
  1052.             <div><dt>GalaxyLink</dt><dd>${checkoutEscape(order?.provider_order_id || "ожидаем")}</dd></div>
  1053.             <div><dt>Partner ID</dt><dd>${checkoutEscape(order?.partner_order_id || "")}</dd></div>
  1054.             ${order?.amount_label ? `<div><dt>Списание</dt><dd>${checkoutEscape(order.amount_label)}</dd></div>` : ""}
  1055.           </dl>
  1056.           ${codes ? `<ul>${codes}</ul>` : ""}
  1057.           ${verification}
  1058.         `;
  1059.       };
  1061.       const refreshCheckoutOrder = async (orderId) => {
  1062.         const response = await fetch(`${checkoutStatusEndpointBase}${encodeURIComponent(orderId)}`, {
  1063.           headers: { Accept: "application/json" },
  1064.         });
  1065.         const payload = await response.json();
  1066.         if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`);
  1067.         renderCheckoutResult(payload.order);
  1068.         return payload.order;
  1069.       };
  1071.       const pollCheckoutOrder = (order) => {
  1072.         window.clearInterval(checkoutPollTimer);
  1073.         if (!order?.id || order.terminal || (Array.isArray(order.items) && order.items.length > 0)) return;
  1074.         let attempts = 0;
  1075.         checkoutPollTimer = window.setInterval(async () => {
  1076.           attempts += 1;
  1077.           try {
  1078.             const nextOrder = await refreshCheckoutOrder(order.id);
  1079.             if (nextOrder.terminal || (Array.isArray(nextOrder.items) && nextOrder.items.length > 0) || attempts >= 8) {
  1080.               window.clearInterval(checkoutPollTimer);
  1081.             }
  1082.           } catch (error) {
  1083.             window.clearInterval(checkoutPollTimer);
  1084.           }
  1085.         }, 3500);
  1086.       };
  1088.       const setCheckoutOpen = (open, returnFocus = false) => {
  1089.         if (!checkoutModal) return;
  1091.         if (open) {
  1092.           window.clearInterval(checkoutPollTimer);
  1093.           if (checkoutResult) {
  1094.             checkoutResult.hidden = true;
  1095.             checkoutResult.innerHTML = "";
  1096.           }
  1097.           checkoutReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
  1098.           checkoutModal.hidden = false;
  1099.           checkoutModal.removeAttribute("inert");
  1100.           checkoutModal.setAttribute("aria-hidden", "false");
  1101.           document.body.classList.add("checkout-modal-open");
  1102.           setCatalogOpen(false);
  1103.           setProfileOpen(false);
  1104.           requestAnimationFrame(() => checkoutModal.classList.add("is-open"));
  1105.           window.setTimeout(() => checkoutModal.querySelector("[data-checkout-close]")?.focus(), 80);
  1106.           return;
  1107.         }
  1109.         checkoutModal.classList.remove("is-open");
  1110.         checkoutModal.setAttribute("aria-hidden", "true");
  1111.         checkoutModal.setAttribute("inert", "");
  1112.         document.body.classList.remove("checkout-modal-open");
  1113.         window.setTimeout(() => {
  1114.           if (!checkoutModal.classList.contains("is-open")) checkoutModal.hidden = true;
  1115.         }, 200);
  1116.         if (returnFocus) checkoutReturnFocus?.focus();
  1117.       };
  1119.       checkoutOpenButtons.forEach((button) => {
  1120.         button.addEventListener("click", () => setCheckoutOpen(true));
  1121.       });
  1123.       checkoutCloseButtons?.forEach((button) => {
  1124.         button.addEventListener("click", () => setCheckoutOpen(false, true));
  1125.       });
  1127.       checkoutModal?.addEventListener("pointerdown", (event) => {
  1128.         if (event.target !== checkoutModal || checkoutDialog?.contains(event.target)) return;
  1129.         setCheckoutOpen(false, true);
  1130.       });
  1132.       checkoutPaymentButtons?.forEach((button) => {
  1133.         button.addEventListener("click", () => {
  1134.           checkoutPaymentButtons.forEach((item) => {
  1135.             const selected = item === button;
  1136.             item.classList.toggle("is-selected", selected);
  1137.             item.setAttribute("aria-checked", selected ? "true" : "false");
  1138.           });
  1139.           if (checkoutPaymentInput) checkoutPaymentInput.value = button.dataset.paymentMethod || "cryptobot";
  1140.         });
  1141.       });
  1143.       checkoutEmailInput?.addEventListener("input", () => setCheckoutEmailError(false));
  1145.       renderCheckoutFields(
  1146.         parseCheckoutForms(checkoutDynamicFields?.dataset.initialForms || "[]"),
  1147.         checkoutDynamicFields?.dataset.initialDeliveryType || "digital_item"
  1148.       );
  1150.       checkoutDialog?.addEventListener("submit", async (event) => {
  1151.         event.preventDefault();
  1152.         if (!checkoutEmailInput?.checkValidity()) {
  1153.           setCheckoutEmailError(true);
  1154.           checkoutEmailInput?.focus();
  1155.           return;
  1156.         }
  1157.         const fields = collectCheckoutFields();
  1158.         if (fields === null) {
  1159.           renderCheckoutResult(null, "Заполните обязательные поля для выдачи товара.");
  1160.           return;
  1161.         }
  1163.         setCheckoutEmailError(false);
  1164.         const submitButton = checkoutDialog.querySelector(".checkout-submit");
  1165.         const originalText = submitButton?.textContent || "";
  1166.         if (submitButton) {
  1167.           submitButton.disabled = true;
  1168.           submitButton.textContent = "Создаем счёт...";
  1169.         }
  1170.         renderCheckoutResult({ status_label: "Создаем счёт CryptoBot", message: "Подготовили заказ и создаём ссылку на оплату." });
  1172.         try {
  1173.           const response = await fetch(checkoutEndpoint, {
  1174.             method: "POST",
  1175.             headers: {
  1176.               Accept: "application/json",
  1177.               "Content-Type": "application/json",
  1178.             },
  1179.             body: JSON.stringify({
  1180.               product_id: checkoutProductIdInput?.value || "",
  1181.               email: checkoutEmailInput.value,
  1182.               payment: checkoutPaymentInput?.value || "cryptobot",
  1183.               fields,
  1184.             }),
  1185.           });
  1186.           const payload = await response.json();
  1187.           if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`);
  1188.           if (payload.status_url) {
  1189.             renderCheckoutResult({ status_label: "Переходим к заказу", message: "Открываем страницу статуса. Там будет кнопка оплаты и автообновление выдачи." });
  1190.             window.location.href = payload.status_url;
  1191.             return;
  1192.           }
  1193.           if (payload.redirect_url) {
  1194.             renderCheckoutResult({ status_label: "Переходим к оплате", message: "Открываем CryptoBot." });
  1195.             window.location.href = payload.redirect_url;
  1196.             return;
  1197.           }
  1198.           renderCheckoutResult(payload.order);
  1199.           pollCheckoutOrder(payload.order);
  1200.         } catch (error) {
  1201.           renderCheckoutResult(null, error.message || "Неизвестная ошибка оплаты.");
  1202.         } finally {
  1203.           if (submitButton) {
  1204.             submitButton.disabled = false;
  1205.             submitButton.textContent = originalText;
  1206.           }
  1207.         }
  1208.       });
  1210.       document.addEventListener("keydown", (event) => {
  1211.         if (event.key !== "Escape" || !checkoutModal?.classList.contains("is-open")) return;
  1212.         setCheckoutOpen(false, true);
  1213.       });
  1215.       document.querySelectorAll(".variant-option").forEach((button) => {
  1216.         button.addEventListener("click", () => {
  1217.           if (button.disabled) return;
  1218.           document.querySelectorAll(".variant-option").forEach((item) => item.classList.remove("is-selected"));
  1219.           document.querySelectorAll(".variant-option small").forEach((item) => {
  1220.             const option = item.closest(".variant-option");
  1221.             if (!option || option === button) return;
  1222.             item.textContent = option.dataset.price || item.textContent;
  1223.           });
  1224.           button.classList.add("is-selected");
  1225.           const note = button.querySelector("small");
  1226.           if (note) note.textContent = "Выбрано";
  1228.           const price = button.dataset.price || "";
  1229.           const context = button.dataset.context || "";
  1230.           const regionLabel = button.dataset.regionLabel || "";
  1231.           const regionRestrictionTitle = button.dataset.regionRestrictionTitle || "";
  1232.           const regionRestrictionText = button.dataset.regionRestrictionText || "";
  1233.           const regionRestrictionCountries = button.dataset.regionRestrictionCountries || "";
  1234.           const name = button.dataset.name || "";
  1235.           const deliveryLabel = button.dataset.deliveryLabel || "";
  1236.           const deliveryShortLabel = button.dataset.deliveryShortLabel || deliveryLabel;
  1237.           const deliveryDescription = button.dataset.deliveryDescription || "";
  1238.           const deliveryType = button.dataset.deliveryType || "digital_item";
  1239.           const forms = parseCheckoutForms(button.dataset.forms || "[]");
  1240.           const discountLabel = button.dataset.discountLabel || "";
  1241.           if (checkoutProductIdInput && button.dataset.productId) checkoutProductIdInput.value = button.dataset.productId;
  1242.           renderCheckoutFields(forms, deliveryType);
  1243.           if (checkoutResult) checkoutResult.hidden = true;
  1244.           if (price) {
  1245.             document.querySelectorAll(".price-main strong, .mobile-price-row strong, .sticky-purchase-price strong, .checkout-product-price strong, [data-checkout-total-price]").forEach((node) => {
  1246.               node.textContent = price;
  1247.             });
  1248.             document.querySelectorAll(".checkout-submit").forEach((node) => {
  1249.               node.textContent = `Оплатить ${price}`;
  1250.             });
  1251.           }
  1252.           if (context) {
  1253.             document.querySelectorAll(".buy-context span").forEach((node) => {
  1254.               node.textContent = context;
  1255.             });
  1256.             const checkoutContext = document.querySelector(".checkout-product span");
  1257.             if (checkoutContext) checkoutContext.textContent = `${context} · ${deliveryShortLabel || "мгновенно"}`;
  1258.           }
  1259.           if (deliveryLabel) {
  1260.             document.querySelectorAll("[data-delivery-label-target]").forEach((node) => {
  1261.               node.textContent = deliveryLabel;
  1262.             });
  1263.           }
  1264.           if (deliveryDescription) {
  1265.             document.querySelectorAll("[data-delivery-description-target]").forEach((node) => {
  1266.               node.textContent = deliveryDescription;
  1267.             });
  1268.           }
  1269.           if (regionLabel) {
  1270.             document.querySelectorAll("[data-spec-region]").forEach((node) => {
  1271.               node.textContent = regionLabel;
  1272.             });
  1273.           }
  1274.           document.querySelectorAll("[data-region-restriction]").forEach((node) => {
  1275.             const hasRestriction = regionRestrictionTitle !== "" || regionRestrictionText !== "" || regionRestrictionCountries !== "";
  1276.             node.hidden = !hasRestriction;
  1277.             const title = node.querySelector("[data-region-restriction-title]");
  1278.             const text = node.querySelector("[data-region-restriction-text]");
  1279.             const countries = node.querySelector("[data-region-restriction-countries]");
  1280.             if (title) title.textContent = regionRestrictionTitle;
  1281.             if (text) text.textContent = regionRestrictionText;
  1282.             if (countries) countries.textContent = regionRestrictionCountries;
  1283.           });
  1284.           document.querySelectorAll("[data-discount-label-target]").forEach((node) => {
  1285.             node.textContent = discountLabel;
  1286.             node.hidden = discountLabel === "";
  1287.           });
  1288.           if (name) {
  1289.             document.querySelectorAll(".sticky-purchase-title, .checkout-product strong").forEach((node) => {
  1290.               node.textContent = name;
  1291.             });
  1292.           }
  1293.           if (button.dataset.url && window.history?.replaceState) {
  1294.             window.history.replaceState(null, "", button.dataset.url);
  1295.           }
  1296.         });
  1297.       });
  1299.       const productTabButtons = document.querySelectorAll("[data-product-tab]");
  1300.       const productPanels = document.querySelectorAll("[data-product-panel]");
  1301.       const setProductTab = (target, scrollToPanel = false) => {
  1302.         const targetPanel = document.querySelector(`[data-product-panel="${target}"]`);
  1303.         if (!targetPanel) return;
  1305.         productPanels.forEach((panel) => {
  1306.           const active = panel.dataset.productPanel === target;
  1307.           panel.classList.toggle("is-active", active);
  1308.           panel.hidden = !active;
  1309.         });
  1311.         productTabButtons.forEach((button) => {
  1312.           button.classList.toggle("is-active", button.dataset.productTab === target);
  1313.         });
  1315.         if (scrollToPanel) {
  1316.           document.querySelector(".product-info")?.scrollIntoView({ block: "start", behavior: "smooth" });
  1317.         }
  1318.       };
  1320.       productTabButtons.forEach((button) => {
  1321.         button.addEventListener("click", () => {
  1322.           setProductTab(button.dataset.productTab, false);
  1323.         });
  1324.       });
  1326.       document.querySelectorAll("[data-product-tab-link]").forEach((link) => {
  1327.         link.addEventListener("click", (event) => {
  1328.           event.preventDefault();
  1329.           setProductTab(link.dataset.productTabLink, true);
  1330.         });
  1331.       });
  1333.       const productCover = document.querySelector("[data-product-cover]");
  1334.       const productThumbs = Array.from(document.querySelectorAll("[data-product-thumb]"));
  1335.       let productGalleryTimer = null;
  1336.       let productCoverSwapTimer = null;
  1338.       const setProductCover = (button, scrollThumb = false) => {
  1339.         if (!button) return;
  1340.         const src = button.dataset.fullImage || button.querySelector("img")?.src;
  1341.         if (!src) return;
  1343.         const group = button.parentElement;
  1344.         group?.querySelectorAll(".is-active").forEach((item) => item.classList.remove("is-active"));
  1345.         button.classList.add("is-active");
  1347.         if (productCover) {
  1348.           if (productCoverSwapTimer) window.clearTimeout(productCoverSwapTimer);
  1349.           productCover.classList.add("is-changing");
  1350.           productCoverSwapTimer = window.setTimeout(() => {
  1351.             productCover.src = src;
  1352.             productCover.alt = button.getAttribute("aria-label") || productCover.alt;
  1353.             productCover.classList.remove("is-changing");
  1354.           }, 120);
  1355.         }
  1357.         if (scrollThumb && group && group.scrollWidth > group.clientWidth) {
  1358.           group.scrollTo({ left: Math.max(0, button.offsetLeft - 12), behavior: "smooth" });
  1359.         }
  1360.       };
  1362.       const restartProductGalleryAutoplay = () => {
  1363.         if (productGalleryTimer) window.clearInterval(productGalleryTimer);
  1364.         if (productThumbs.length < 2) return;
  1366.         productGalleryTimer = window.setInterval(() => {
  1367.           const activeIndex = Math.max(0, productThumbs.findIndex((button) => button.classList.contains("is-active")));
  1368.           setProductCover(productThumbs[(activeIndex + 1) % productThumbs.length], true);
  1369.         }, 4500);
  1370.       };
  1372.       productThumbs.forEach((button) => {
  1373.         button.addEventListener("click", () => {
  1374.           setProductCover(button, true);
  1375.           restartProductGalleryAutoplay();
  1376.         });
  1377.       });
  1378.       restartProductGalleryAutoplay();
  1380.       document.querySelectorAll("[data-description-toggle]").forEach((button) => {
  1381.         const description = button.closest(".product-description");
  1382.         const extra = description?.querySelector("[data-description-extra]");
  1383.         const label = button.querySelector("span");
  1384.         const mobileDescription = window.matchMedia("(max-width: 767px)");
  1386.         const setDescriptionOpen = (isOpen) => {
  1387.           if (!description || !extra || !label) return;
  1388.           description.classList.toggle("is-collapsed", !isOpen);
  1389.           extra.hidden = !isOpen;
  1390.           button.setAttribute("aria-expanded", isOpen ? "true" : "false");
  1391.           label.textContent = isOpen ? (mobileDescription.matches ? "Свернуть" : "Скрыть полностью") : "Показать полностью";
  1392.         };
  1394.         button.addEventListener("click", () => {
  1395.           setDescriptionOpen(button.getAttribute("aria-expanded") !== "true");
  1396.         });
  1398.         const refreshDescriptionLabel = () => setDescriptionOpen(button.getAttribute("aria-expanded") === "true");
  1399.         if (mobileDescription.addEventListener) {
  1400.           mobileDescription.addEventListener("change", refreshDescriptionLabel);
  1401.         } else {
  1402.           mobileDescription.addListener(refreshDescriptionLabel);
  1403.         }
  1404.       });
  1406.       document.querySelectorAll("[data-review-form]").forEach((form) => {
  1407.         const textarea = form.querySelector("textarea");
  1408.         const error = form.querySelector(".review-error");
  1409.         const success = form.querySelector(".review-success");
  1410.         const ratingLabel = form.querySelector(".review-form-rating b");
  1411.         const ratingButtons = form.querySelectorAll("[data-rating]");
  1413.         const setRating = (rating) => {
  1414.           form.dataset.rating = rating;
  1415.           form.querySelector(".review-form-rating")?.classList.add("has-value");
  1416.           ratingButtons.forEach((button) => button.classList.toggle("is-active", Number(button.dataset.rating) <= rating));
  1417.           if (ratingLabel) ratingLabel.textContent = `${rating}.0`;
  1418.         };
  1420.         ratingButtons.forEach((button) => {
  1421.           button.addEventListener("click", () => setRating(Number(button.dataset.rating)));
  1422.         });
  1424.         form.querySelectorAll(".review-tags button").forEach((button) => {
  1425.           button.addEventListener("click", () => button.classList.toggle("is-active"));
  1426.         });
  1428.         textarea?.addEventListener("input", () => {
  1429.           form.classList.remove("has-error");
  1430.           if (error) error.hidden = true;
  1431.         });
  1433.         form.addEventListener("submit", (event) => {
  1434.           event.preventDefault();
  1435.           const text = textarea?.value.trim() || "";
  1436.           if (!text) {
  1437.             setRating(Number(form.dataset.rating || 5));
  1438.             form.classList.add("has-error");
  1439.             form.classList.remove("is-sent");
  1440.             if (error) error.hidden = false;
  1441.             if (success) success.hidden = true;
  1442.             textarea?.focus();
  1443.             return;
  1444.           }
  1446.           setRating(Number(form.dataset.rating || 5));
  1447.           form.classList.remove("has-error");
  1448.           form.classList.add("is-sent");
  1449.           if (error) error.hidden = true;
  1450.           if (success) success.hidden = false;
  1451.         });
  1452.       });
  1454.       document.querySelectorAll("[data-question-form]").forEach((form) => {
  1455.         const textarea = form.querySelector("textarea");
  1456.         const error = form.querySelector(".question-error");
  1457.         const success = form.querySelector(".question-success");
  1459.         textarea?.addEventListener("input", () => {
  1460.           form.classList.remove("has-error");
  1461.           if (error) error.hidden = true;
  1462.         });
  1464.         form.addEventListener("submit", (event) => {
  1465.           event.preventDefault();
  1466.           const text = textarea?.value.trim() || "";
  1467.           if (!text) {
  1468.             form.classList.add("has-error");
  1469.             form.classList.remove("is-sent");
  1470.             if (error) error.hidden = false;
  1471.             if (success) success.hidden = true;
  1472.             textarea?.focus();
  1473.             return;
  1474.           }
  1476.           form.classList.remove("has-error");
  1477.           form.classList.add("is-sent");
  1478.           if (error) error.hidden = true;
  1479.           if (success) success.hidden = false;
  1480.         });
  1481.       });
  1483.       document.querySelectorAll(".like-action").forEach((button) => {
  1484.         button.addEventListener("click", () => {
  1485.           const wasLiked = button.classList.contains("is-liked");
  1486.           const count = button.querySelector("span");
  1487.           const icon = button.querySelector("img");
  1488.           button.classList.toggle("is-liked", !wasLiked);
  1489.           if (icon) icon.src = wasLiked ? "./assets/like-outline.svg" : "./assets/like-filled.svg";
  1490.           if (count) count.textContent = String(Math.max(0, Number(count.textContent || 0) + (wasLiked ? -1 : 1)));
  1491.         });
  1492.       });
  1494.       document.querySelectorAll("[data-promo-widget]").forEach((widget) => {
  1495.         const toggle = widget.querySelector(".promo-link");
  1496.         const form = widget.querySelector(".promo-form");
  1497.         const input = widget.querySelector("input");
  1498.         const help = widget.querySelector(".promo-help");
  1499.         const success = widget.querySelector(".promo-success");
  1500.         const error = widget.querySelector(".promo-error");
  1502.         const setPromoState = (state) => {
  1503.           widget.classList.toggle("is-success", state === "success");
  1504.           widget.classList.toggle("is-error", state === "error");
  1505.           if (help) help.hidden = state !== "idle";
  1506.           if (success) success.hidden = state !== "success";
  1507.           if (error) error.hidden = state !== "error";
  1508.         };
  1510.         toggle?.addEventListener("click", () => {
  1511.           const isOpen = widget.classList.toggle("is-open");
  1512.           if (form) form.hidden = !isOpen;
  1513.           toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
  1514.           if (isOpen) {
  1515.             setPromoState("idle");
  1516.             window.setTimeout(() => input?.focus(), 0);
  1517.           }
  1518.         });
  1520.         input?.addEventListener("input", () => setPromoState("idle"));
  1522.         form?.addEventListener("submit", (event) => {
  1523.           event.preventDefault();
  1524.           const code = input?.value.trim().toUpperCase() || "";
  1525.           if (code === "PAPA15") {
  1526.             if (input) input.value = "PAPA15";
  1527.             setPromoState("success");
  1528.             return;
  1529.           }
  1530.           setPromoState("error");
  1531.         });
  1532.       });
  1534.       const lightbox = document.querySelector("[data-image-lightbox]");
  1535.       const lightboxImage = lightbox?.querySelector("img");
  1536.       const closeLightbox = () => {
  1537.         if (!lightbox) return;
  1538.         lightbox.hidden = true;
  1539.         document.body.classList.remove("image-lightbox-open");
  1540.       };
  1542.       document.querySelectorAll(".product-image-preview").forEach((button) => {
  1543.         button.addEventListener("click", () => {
  1544.           const image = button.querySelector("img");
  1545.           if (!lightbox || !lightboxImage || !image) return;
  1546.           lightboxImage.src = image.currentSrc || image.src;
  1547.           lightboxImage.alt = image.alt;
  1548.           lightbox.hidden = false;
  1549.           document.body.classList.add("image-lightbox-open");
  1550.         });
  1551.       });
  1553.       lightbox?.querySelectorAll(".image-lightbox-backdrop, .image-lightbox-close").forEach((button) => {
  1554.         button.addEventListener("click", closeLightbox);
  1555.       });
  1557.       document.addEventListener("keydown", (event) => {
  1558.         if (event.key === "Escape") closeLightbox();
  1559.       });
  1561.       document.querySelectorAll('a[href="#"]').forEach((link) => {
  1562.         link.addEventListener("click", (event) => event.preventDefault());
  1563.       });
  1565.       document.querySelector(".search-form")?.addEventListener("submit", (event) => event.preventDefault());
  1567.     </script>
  1568.       <script src="/assets/playpapa-auth.js"></script>
  1569.   </body>
  1570. </html>