/*
 * site.css - Steampay storefront stylesheet (redesign; spec: docs/17_steampay_design_spec.md).
 * The only hand-written storefront stylesheet. Loaded by resources/views/partials/head.blade.php
 * after vendor.css (verbatim plugin CSS) and before the page's own @yield('styles').
 * Mobile-first: base rules are for phones, min-width queries at 600 / 900 / 1200px.
 * !important only to beat inline styles that JS sets - each one says which.
 *
 *  1. Fonts            5. Bootstrap and plugin glue
 *  2. Tokens           6. Frame F3 (layouts.simple)
 *  3. Base             -- component sections of later packages go here --
 *  4. Shared bits      9. Reduced motion (keep last)
 */


/* ==== 1. Fonts ==========================================================================
 * Self-hosted woff2 from npm (Fontsource), SIL OFL 1.1 - /fonts/OFL.txt.
 * Play 400 and 700 (@fontsource/play 5.3.0), Open Sans variable wght 300-800
 * (@fontsource-variable/open-sans 5.3.0); subsets cyrillic + latin, unicode-range as in
 * the packages' CSS. The two cyrillic files most pages need first are preloaded in the head.
 * Note: U+20BD (rouble sign) is in neither subset - it falls back to the next font in the stack.
 */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/play-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/play-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/play-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/play-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Play has the rouble sign only in its latin-ext subset: load that file for U+20BD alone. */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/play-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+20BD;
}
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/play-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+20BD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/open-sans-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/open-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ==== 2. Tokens (spec 2) ================================================================ */
:root {
  --bg: #F3F3F3;
  --card: #FFFFFF;
  --text: #141414;
  --muted: #636363;
  --soft: #767676; /* white bg only */
  --line: #DDDDDD;
  --line-soft: #ECECEC;
  --input: #F7F7F7;
  --dark-0: #0D0E10; /* footer, categories, live strip */
  --dark-1: #1D1F22; /* banner, popular, product title band */
  --dark-2: #252627; /* cards on dark */
  --dark-buy: #3B3B3B; /* product buy block */
  --on-dark: #FFFFFF;
  --on-dark-muted: #9A9A9A;
  --on-dark-key: #ABABAB;
  --foot-text: rgba(255,255,255,.62);
  --blue: #0094E9; /* fill under white Play >=19px bold, icon squares */
  --blue-ink: #0A78C2;
  --blue-ink-hover: #075A92;
  --green: #017F6C; /* discount plate */
  --orange: #FF793A; /* icons, underlines, tag fill */
  --orange-on-dark: #FF8A50;
  --red: #D7262D;
  --brand-grad: linear-gradient(90deg,#FF4148,#FF793A);
  --disc-grad: linear-gradient(135deg,#0094E8,#019A83);
  --r-xs: 4px; /* discount plate, tag */
  --r-s: 6px; /* price pill, small thumbs, payment marks */
  --r-m: 8px; /* buttons, inputs, arrows, thumbs */
  --r-l: 10px; /* cards, tiles, banner, blocks */
  --shadow-header: 0 1px 6px rgba(0,0,0,.15);
  --shadow-hover: 0 4px 18px rgba(0,0,0,.16);
  --font-ui: 'Play',Arial,sans-serif;
  --font-text: 'Open Sans',Arial,sans-serif;
  --wrap: 1280px;
  --gutter: 16px;

  /* z-index ladder (spec 1). A z-index lives with the position that needs it.
     Bootstrap modal (backdrop 1040, dialog 1050) and Jivo keep their own values. */
  --z-buybar: 80;    /* phone buy bar on the product page */
  --z-backdrop: 90;  /* body.backdrop-show::before */
  --z-header: 100;   /* sticky phone header */
  --z-dropdown: 110; /* header dropdowns and search results */
  --z-filters: 120;  /* catalog filters panel on phones */
}
@media (min-width: 900px) {
  :root {
    --gutter: 24px;
  }
}
/* Chinese pages (html lang="zh-Hans", which :lang(zh) matches): Play and Open Sans are limited to Latin and
   Cyrillic (unicode-range above), so Chinese characters take the first system Chinese font of this list. */
html:lang(zh) {
  --font-ui: 'Play', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --font-text: 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}


/* ==== 3. Base =========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 899.98px) {
  html {
    scroll-padding-top: 70px; /* the sticky phone header must not cover anchor targets */
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--blue-ink);
  text-decoration: none;
}
a:hover {
  color: var(--blue-ink-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.25;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button,
[role="button"] {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==== 4. Shared bits (spec 6.16, 6.4) =================================================== */

/* Buttons. White text on --blue only from Play 700 19px (contrast 3.27), so the default
   primary fill is --blue-ink (4.69) and --blue is kept for the large variant. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover {
  color: var(--text);
  text-decoration: none;
}
.btn:disabled,
.btn.disabled {
  cursor: default;
  opacity: .5;
}
a.btn.disabled {
  pointer-events: none;
}
.btn--lg {
  min-height: 60px;
  padding: 12px 24px;
  font-size: 19px;
}
.btn--primary {
  background: var(--blue-ink);
  color: var(--on-dark);
}
.btn--primary:hover {
  background: var(--blue-ink-hover);
  color: var(--on-dark);
}
.btn--primary.btn--lg {
  background: var(--blue);
}
.btn--primary.btn--lg:hover {
  background: var(--blue-ink);
}
.btn--secondary {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}
.btn--secondary:hover {
  border-color: var(--muted);
  color: var(--text);
}

/* Inputs: the storefront's text fields carry Bootstrap's .form-control. 16px on phones keeps
   iOS from zooming in on focus. */
.form-control {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--input);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .15s ease;
}
.form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}
.form-control:focus {
  outline: 2px solid var(--blue-ink);
  outline-offset: 0;
}
.form-control:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}
@media (min-width: 900px) {
  .form-control {
    font-size: 15px;
  }
}

/* Validation (jquery-form-validator in app.js): the invalid field gets .error and an inline
   border-color, its parent gets .has-error, the message is span.help-block.form-error. */
.has-error .form-control,
input.error,
textarea.error {
  border-color: var(--red) !important; /* beats the inline border-color (#b94a48) the validator sets */
}
.help-block.form-error {
  display: block;
  margin-top: 4px;
  color: var(--red);
  font-size: 13px;
  line-height: 1.4;
}

/* Pagination chips (spec 6.14a): Laravel's ul.pagination (resources/views/vendor/pagination/default.blade.php:
   li > a, li.active > span, li.disabled > span) - /products, purchase-list, partner, partner-withdraw.
   44px chips, the current page filled with --blue-ink. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination > li > a,
.pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pagination > li > a:hover {
  border-color: var(--blue-ink);
  color: var(--blue-ink);
}
.pagination > .active > span { /* white on --blue-ink 4.69:1 */
  border-color: var(--blue-ink);
  background: var(--blue-ink);
  color: var(--on-dark);
}
.pagination > .disabled > span {
  border-color: var(--line-soft);
  color: var(--soft); /* 4.54:1 on white */
}

/* Discount plate (tiles, live strip, rows; the catalog rows' JS-built span.catalog-item__discount, spec 7.2) */
.disc,
.catalog-rows .catalog-item__discount {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--green);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Tile grid: 2 columns, 4 from 900px; lists hold a multiple of 4 (spec 4, 6.4) */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}


/* ==== 5. Bootstrap and plugin glue ======================================================= */

/* Page backdrop under open header dropdowns: app.js toggles body.backdrop-show. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-backdrop);
  background: rgba(13,14,16,.6);
  opacity: 0;
  visibility: hidden; /* hidden = not clickable; when shown it takes the click, as today */
  transition: opacity .2s ease, visibility .2s ease;
}
body.backdrop-show::before {
  opacity: 1;
  visibility: visible;
}

/* Product tab panes are .fade but not .tab-pane (product.blade.php: #require-1..3, #other-1/2):
   hide and show them the way Bootstrap does .tab-content > .tab-pane / .active. */
.product__req-content.fade,
.product__items-content.fade {
  display: none;
}
.product__req-content.fade.active,
.product__items-content.fade.active {
  display: block;
}


/* ==== 6. Frame F3 - layouts.simple (spec 5) =============================================
 * White bar (logo, Support, My purchases), content on --bg inside .wrap, compact dark footer.
 */
body.frame-simple {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.simple-bar {
  position: relative;
  flex: none;
  background: var(--card);
  box-shadow: var(--shadow-header);
}
.simple-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
.simple-bar__logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.simple-bar__logo img {
  display: block;
  width: auto;
  height: 33px;
}
.simple-bar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.simple-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--r-m);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.simple-bar__link:hover {
  background: var(--input);
  color: var(--text);
}
.simple-bar__link svg {
  flex: none;
}
.simple-bar__label {
  display: none; /* phone: icon only, the link carries aria-label */
}

.simple-main {
  flex: 1 0 auto;
  padding: 16px 0 32px;
}

/* Documents and instructions: a white card, max-width 960px */
.simple-card {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}

.simple-foot {
  flex: none;
  padding: 16px 0 24px;
  background: var(--dark-0);
  color: var(--foot-text);
  font-size: 14px;
}
.simple-foot__nav {
  display: flex;
  flex-direction: column;
}
.simple-foot__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--foot-text);
}
.simple-foot__link:hover {
  color: var(--on-dark);
}
.simple-foot__copy {
  margin: 12px 0 0;
  font-size: 13px;
}

@media (min-width: 900px) {
  .simple-bar__inner {
    min-height: 64px;
  }
  .simple-bar__logo img {
    height: 40px;
  }
  .simple-bar__nav {
    gap: 8px;
  }
  .simple-bar__link {
    padding: 0 14px;
  }
  .simple-bar__label {
    display: inline;
  }
  .simple-main {
    padding: 32px 0 56px;
  }
  .simple-card {
    padding: 40px 44px;
  }
  .simple-foot {
    padding: 28px 0 32px;
  }
  .simple-foot__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 40px;
  }
  .simple-foot__link {
    min-height: 0;
  }
  .simple-foot__copy {
    margin-top: 20px;
  }
}


/* ==== P1 header - partials/main-header, partials/header-menu (spec 6.1, 7.1, 7.2) =========
 * Mobile-first:
 *   <900px   sticky row, 58px: burger | logo (centred) | search toggle | cart. The search field
 *            opens as a full-width row under the header; dropdowns are full width under it.
 *   >=900px  white row, min-height 76px, not sticky, 30px left padding: burger | logo | nav |
 *            search field | «Мои покупки» | cart (84px). Up to 1199px the cells leave no room for a
 *            usable field, so the field takes a second row and «Мои покупки» shows its icon only.
 *            The language cell (partials/lang, a <details>) sits before «Мои покупки»; on phones the
 *            language switcher is the last item of the menu.
 * app.js (spec 7.1): .js-dropdown-toggle[data-toggle] toggles .active on itself and its target,
 * toggles body.backdrop-show and writes an inline left: on the target. The search toggle never
 * activates its target; the results get .active (+ inline left) when the autocomplete answers.
 * Where our layout positions a dropdown itself, !important overrides that inline left (commented).
 */
.main-header {
  --header-h: 58px;   /* the phone row */
  --search-row: 60px; /* the phone search row that opens under the header */
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--card);
  box-shadow: var(--shadow-header);
  font-family: var(--font-ui);
}
.main-header__inner {
  display: flex;
  align-items: stretch;
  min-height: var(--header-h);
}

/* Header buttons and cells */
.main-header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.main-header__btn:hover {
  color: var(--text);
}

.main-header__burger {
  display: flex;
  flex: none;
  border-right: 1px solid var(--line-soft);
}
.main-header__nav-toggle {
  width: 56px;
}
.main-header__nav-toggle:hover,
.main-header__nav-toggle.active {
  background: var(--input);
}

.main-header__logo {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 8px;
}
.main-header__logo img {
  display: block;
  width: 150px; /* 150x33 on phones, 182x40 from 900px */
  height: auto;
}

/* Nav cells and «Мои покупки»: from 900px only (phones reach them through the menu) */
.main-header__menu,
.main-header__purchases {
  display: none;
}
.main-header__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-header__chevron {
  flex: none;
  color: var(--orange);
  transition: transform .2s ease;
}
.main-header__catalog-toggle.active .main-header__chevron {
  transform: rotate(180deg);
}
.main-header__purchases-label {
  /* visually hidden below 1200px (icon only); the link keeps it as its name */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Search (spec 6.1 "Search DOM"): the toggle holds the magnifier, the form with its input and
   the close button. On phones the toggle is the magnifier cell; when .active, the close button
   takes the cell and the form opens as a row under the header. */
.main-header__search-block {
  display: flex;
  flex: none;
  border-left: 1px solid var(--line-soft);
}
.main-header__search-toggle {
  width: 56px;
}
.main-header__search-toggle.active {
  background: var(--input);
  cursor: default;
}
.main-header__search-icon {
  flex: none;
  color: var(--orange);
}
.main-header__search-toggle.active .main-header__search-icon {
  display: none;
}
.main-header__search-form {
  margin: 0;
}
.main-header__search-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--input);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px; /* 16px: iOS does not zoom in on focus */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}
.main-header__search-input::placeholder {
  color: var(--muted);
  opacity: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.main-header__search-input::-webkit-search-decoration,
.main-header__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none; /* the close button clears the field */
}
.main-header__search-input:focus {
  outline: 2px solid var(--blue-ink);
  outline-offset: 0;
}
.main-header__search-close {
  display: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.main-header__search-toggle.active .main-header__search-close {
  display: flex;
}

/* Cart cell with the count badge (hidden while the cart is empty: .disabled) */
.main-header__basket-wrapper {
  display: flex;
  flex: none;
  border-left: 1px solid var(--line-soft);
}
.main-header__basket-wrapper .main-header__btn {
  position: relative;
  width: 56px;
}
.main-header__basket-wrapper .main-header__btn:hover,
.main-header__basket-wrapper .main-header__btn.active {
  background: var(--input);
}
.main-header__basket-wrapper .main-header__btn.disabled {
  cursor: default;
}
.main-header__basket-wrapper .main-header__btn.disabled:hover {
  background: none;
}
.main-header__btn-badge--cart {
  position: absolute;
  top: 9px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}
.main-header__btn.disabled .main-header__btn-badge--cart,
.main-header__btn-badge--cart:empty {
  display: none;
}

/* Dropdowns: hidden until app.js adds .active */
.main-header__dropdown {
  position: absolute;
  top: 100%;
  z-index: var(--z-dropdown);
  display: none;
  background: var(--card);
  box-shadow: var(--shadow-hover);
  font-family: var(--font-text);
}
.main-header__dropdown.active {
  display: block;
}

/* Menu (partials/header-menu) */
.main-header__nav {
  padding: 8px 0;
}
.main-header__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-header__nav-item + .main-header__nav-item {
  border-top: 1px solid var(--line-soft);
}
.main-header__nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px var(--gutter);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.main-header__nav-link:hover {
  background: var(--input);
  color: var(--text);
}

/* Language switcher (partials/lang, partials/lang-form). Phones: the last item of the menu - a title and
   one chip per language (the item is a --phone one, hidden from 900px). From 900px: the header cell
   <details class="lang"> with a dropdown list (site.js closes it on an outside click and on Esc). */
.lang {
  display: none; /* phones: the menu holds the switcher */
}
.lang__form {
  margin: 0;
}
.lang__item {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  cursor: pointer;
}
.lang__item small {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
}
.lang__item.active {
  color: var(--blue-ink);
  cursor: default;
}
.lang-menu {
  padding: 12px var(--gutter) 16px;
}
.lang-menu__title {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}
.lang-menu .lang__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lang-menu .lang__item {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}
.lang-menu .lang__item:hover {
  border-color: var(--blue-ink);
}
.lang-menu .lang__item.active {
  border-color: var(--blue-ink);
  background: var(--input);
  color: var(--blue-ink);
}

/* Catalog dropdown: full width at every width, like today. Dark panel - the genre icons
   (/img/svg/cats/*.svg) are white. Its toggle is shown from 900px. */
.main-header__catalog {
  left: 0 !important; /* beats the inline left app.js computes from the toggle (it would push the panel off-screen) */
  right: 0;
  padding: 24px 0 32px;
  background: var(--dark-1);
  color: var(--on-dark);
}
.main-header__catalog-inner {
  display: grid;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.main-header__catalog-head {
  margin-bottom: 12px;
  color: var(--on-dark-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.main-header__catalog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-header__catalog-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border-radius: var(--r-l);
  background: var(--dark-2);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.25;
}
.main-header__catalog-link:hover,
.main-header__catalog-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--orange);
  color: var(--on-dark);
}
.main-header__catalog-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.main-header__catalog-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Mini-cart dropdown (spec 7.1 mini-cart; JS-built items spec 7.2). States set by app.js:
   .main-header__loader (loading: spinner only), .main-header__empty («Корзина пуста.»),
   .main-header__loader--delete (deleting: the spinner covers the list). */
.main-header__basket {
  padding: 12px var(--gutter) 20px;
}
.main-header__empty-text {
  display: none;
  padding: 12px 0 4px;
  color: var(--muted);
}
.main-header__empty .main-header__empty-text {
  display: block;
}
.main-header__spinner {
  display: none;
  padding: 24px 0;
}
.main-header__loader .main-header__spinner {
  display: block;
}
.main-header__loader--delete .main-header__spinner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.main-header__basket .summary,
.main-header__basket .main-header__dropdown--products-btns {
  display: flex;
}
.main-header__basket.main-header__empty .catalog--basket,
.main-header__basket.main-header__loader .catalog--basket,
.main-header__basket.main-header__empty .summary,
.main-header__basket.main-header__loader .summary,
.main-header__basket.main-header__empty .main-header__dropdown--products-btns,
.main-header__basket.main-header__loader .main-header__dropdown--products-btns {
  display: none;
}
.main-header__basket.main-header__loader--delete .catalog--basket {
  display: block;
}
.main-header__basket.main-header__loader--delete .summary,
.main-header__basket.main-header__loader--delete .main-header__dropdown--products-btns {
  display: flex;
}
/* nanoScroller sizes .nano itself from its max-height (reset(): height = min(content, max-height)) */
.main-header__basket .nano {
  max-height: 300px;
}
.main-header__basket .nano > .nano-content {
  padding-right: 12px;
}
.main-header .nano > .nano-pane {
  right: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--line-soft);
}
.main-header .nano > .nano-pane > .nano-slider {
  margin: 0;
  border-radius: 2px;
  background: var(--orange);
}
/* Header cart item (JS): div.catalog-item > .catalog-item__name > a + .catalog-item__price
   + .catalog-item__delete.catalog-item__delete--cart[data-id] > svg */
.main-header__basket .catalog-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.main-header__basket .catalog-item:last-child {
  border-bottom: 0;
}
.main-header__basket .catalog-item__name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.main-header__basket .catalog-item__name a {
  color: var(--text);
}
.main-header__basket .catalog-item__name a:hover {
  color: var(--blue-ink);
}
.main-header__basket .catalog-item__price {
  flex: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.main-header__basket .catalog-item__delete {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  border-radius: var(--r-m);
  color: var(--muted);
  cursor: pointer;
}
.main-header__basket .catalog-item__delete:hover {
  background: var(--input);
  color: var(--red);
}
.main-header__basket .catalog-item__delete svg {
  width: 10px;
  height: 10px;
}
.main-header__basket .catalog-item__delete path {
  fill: currentColor; /* the JS markup carries fill="#444444" */
}
.main-header__basket .summary {
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.main-header__basket .summary__label {
  color: var(--muted);
}
.main-header__basket .summary__price {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.main-header__basket .main-header__dropdown--products-btns .btn {
  flex: 1 1 auto;
}

/* Spinner (also used by later packages): .spinner > .spinner__rect--spin-1..5 */
.spinner {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 32px;
}
.spinner__rect {
  width: 5px;
  height: 100%;
  border-radius: 2px;
  background: var(--orange);
  animation: sp-stretch 1.2s infinite ease-in-out;
}
.spinner__rect--spin-2 {
  animation-delay: -1.1s;
}
.spinner__rect--spin-3 {
  animation-delay: -1s;
}
.spinner__rect--spin-4 {
  animation-delay: -.9s;
}
.spinner__rect--spin-5 {
  animation-delay: -.8s;
}
@keyframes sp-stretch {
  0%, 40%, 100% {
    transform: scaleY(.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* Search results dropdown (.main-header__search). Autocomplete item (JS): a.catalog-item >
   .catalog-item__img > img + .catalog-item__name + .catalog-item__price, in .catalog--basket-search */
.main-header__search {
  padding: 8px;
}
.main-header__search .catalog--basket-search {
  display: flex;
  flex-direction: column;
}
.main-header__search .catalog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-m);
  color: var(--text);
}
.main-header__search .catalog-item:hover {
  background: var(--input);
  color: var(--text);
}
.main-header__search .catalog-item__img {
  flex: none;
  width: 80px;
  aspect-ratio: 158 / 74; /* /image/ covers are 158x74 */
  overflow: hidden;
  border-radius: var(--r-s);
  background: var(--line-soft);
}
.main-header__search .catalog-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-header__search .catalog-item__name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.main-header__search .catalog-item__price {
  flex: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.main-header__search .summary {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.main-header__search-submit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border-bottom: 2px solid var(--orange);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.main-header__search-submit:hover {
  color: var(--text);
}
.main-header__search-no-results {
  display: none;
  padding: 16px 8px;
  color: var(--muted);
}
.main-header__search.no-results .catalog--basket-search,
.main-header__search.no-results .summary {
  display: none;
}
.main-header__search.no-results .main-header__search-no-results {
  display: block;
}

/* Phones (<900): the opened search row and the dropdowns live under the sticky header.
   This block uses max-width because it only describes the phone search panel and the phone
   dropdown positions, which the desktop layout does not need to undo. */
@media (max-width: 899.98px) {
  .main-header__dropdown {
    left: 0 !important; /* full width under the header: beats the inline left app.js sets from the toggle */
    right: 0;
  }
  .main-header__nav,
  .main-header__basket {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .main-header__search-form {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--z-dropdown);
    height: var(--search-row);
    padding: 8px var(--gutter);
    border-top: 1px solid var(--line-soft);
    background: var(--card);
    box-shadow: var(--shadow-header);
    cursor: auto;
  }
  /* Closed: visually hidden but still focusable, so a keyboard user can tab into the field;
     the row shows while the field has focus. */
  .main-header__search-toggle:not(.active) .main-header__search-form:not(:focus-within) {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
  .main-header__search {
    top: calc(100% + var(--search-row));
    max-height: calc(100vh - var(--header-h) - var(--search-row));
    max-height: calc(100dvh - var(--header-h) - var(--search-row));
    overflow-y: auto;
  }
}

@media (min-width: 900px) {
  .main-header {
    position: relative; /* not sticky from 900px; keeps z-index above the backdrop */
  }
  .main-header__inner {
    flex-wrap: wrap;
    min-height: 76px;
    padding-left: 30px;
  }
  .main-header__burger {
    border-left: 1px solid var(--line-soft);
  }
  .main-header__nav-toggle {
    width: 64px;
    min-height: 76px;
  }
  .main-header__logo {
    flex: none;
    padding: 0 22px;
  }
  .main-header__logo img {
    width: 182px;
  }

  .main-header__menu {
    display: flex;
    flex: none;
    border-left: 1px solid var(--line-soft);
  }
  .main-header__list,
  .main-header__item {
    display: flex;
  }
  .main-header__btn--link {
    position: relative;
    gap: 6px;
    min-height: 76px;
    padding: 0 12px;
  }
  .main-header__btn--link::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-grad);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .main-header__btn--link:hover::after,
  .main-header__btn--current::after,
  .main-header__catalog-toggle.active::after {
    opacity: 1;
  }

  /* 900-1199: the search field is the second row */
  .main-header__search-block {
    --search-pad-l: 0px;
    --search-pad-r: 30px;
    position: relative;
    flex: 1 1 100%;
    order: 1;
    align-items: center;
    padding: 0 var(--search-pad-r) 12px var(--search-pad-l);
    border-left: 0;
  }
  .main-header__search-toggle,
  .main-header__search-toggle.active {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--input);
    cursor: text;
  }
  .main-header__search-toggle:focus-within {
    outline: 2px solid var(--blue-ink);
    outline-offset: 0;
  }
  .main-header__search-icon,
  .main-header__search-toggle.active .main-header__search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    pointer-events: none;
  }
  .main-header__search-form {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
  }
  .main-header__search-input {
    height: 100%;
    padding: 0 44px;
    border: 0;
    border-radius: var(--r-m);
    background: transparent;
    font-size: 15px;
  }
  .main-header__search-input:focus {
    outline: none; /* the field (the toggle) draws the focus ring */
  }
  .main-header__search-close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    color: var(--muted);
  }
  .main-header__search-close:hover {
    color: var(--text);
  }
  .main-header__search {
    top: 100%;
    right: var(--search-pad-r);
    left: var(--search-pad-l) !important; /* under the field: beats the inline left app.js computes from the toggle */
    min-width: 380px; /* the one-row field is narrow near 1200px; the list may run past its right edge */
    border-radius: 0 0 var(--r-l) var(--r-l);
  }

  .main-header__purchases {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 56px;
    margin-left: auto; /* 900-1199: pushes «Мои покупки» and the cart to the right edge */
    padding: 0 18px;
    border-left: 1px solid var(--line-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .main-header__purchases:hover,
  .main-header__purchases--current {
    background: var(--input);
    color: var(--text);
  }
  .main-header__purchases svg {
    flex: none;
  }

  /* Language cell before «Мои покупки»; up to 1199px it takes over the margin that pushes the cells right */
  .lang {
    display: block;
    position: relative;
    flex: none;
    margin-left: auto;
    border-left: 1px solid var(--line-soft);
  }
  .lang + .main-header__purchases {
    margin-left: 0;
  }
  .lang__btn {
    gap: 8px;
    height: 100%;
    min-width: 56px;
    min-height: 76px;
    padding: 0 16px;
    list-style: none;
  }
  .lang__btn::-webkit-details-marker {
    display: none;
  }
  .lang__btn:hover,
  .lang[open] .lang__btn {
    background: var(--input);
  }
  .lang__btn svg {
    flex: none;
  }
  .lang[open] .main-header__chevron {
    transform: rotate(180deg);
  }
  .lang__name {
    display: none; /* the code up to 1199px, the native name from 1200px */
    text-transform: none;
  }
  .lang__menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--z-dropdown);
    min-width: 280px;
    padding: 8px 0;
    border-radius: 0 0 var(--r-l) var(--r-l);
    background: var(--card);
    box-shadow: var(--shadow-hover);
  }
  .lang__menu .lang__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    text-align: left;
  }
  .lang__menu .lang__item:hover,
  .lang__menu .lang__item.active {
    background: var(--input);
  }
  .lang__menu .lang__item.active {
    color: var(--blue-ink);
  }

  .main-header__basket-wrapper .main-header__btn {
    width: 84px;
  }
  .main-header__btn-badge--cart {
    top: 17px;
    right: 18px;
  }

  /* Dropdowns from 900px: the menu sits under the burger and the cart under the cart cell -
     both at the inline left app.js computes; the catalog keeps full width (above). */
  .main-header__nav {
    width: 320px;
    border-radius: 0 0 var(--r-l) var(--r-l);
  }
  .main-header__nav-link {
    padding: 10px 24px;
  }
  /* «Скидки» is a nav cell from 900px - not repeated in the menu */
  .main-header__nav-item--phone {
    display: none;
  }
  .main-header__nav-item--phone + .main-header__nav-item {
    border-top: 0;
  }
  .main-header__basket {
    width: 360px;
    padding: 12px 20px 20px;
    border-radius: 0 0 var(--r-l) var(--r-l);
  }
  .main-header__catalog {
    padding: 32px 0 40px;
  }
  .main-header__catalog-inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 32px;
  }
  .main-header__catalog-left .main-header__catalog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .main-header__catalog-right .main-header__catalog-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .main-header__search .catalog-item__img {
    width: 96px;
  }
}

@media (min-width: 1200px) {
  /* one row: the search field is a cell between the nav and «Мои покупки» */
  .main-header__btn--link {
    padding: 0 14px;
  }
  .main-header__btn--link::after {
    right: 14px;
    left: 14px;
  }
  .main-header__search-block {
    --search-pad-l: 20px;
    --search-pad-r: 20px;
    flex: 1 1 200px;
    order: 0;
    min-width: 0;
    padding: 0 var(--search-pad-r) 0 var(--search-pad-l);
    border-left: 1px solid var(--line-soft);
  }
  .main-header__purchases {
    margin-left: 0;
    padding: 0 16px;
  }
  .lang {
    margin-left: 0;
  }
  .lang__name {
    display: inline;
  }
  .lang__code {
    display: none;
  }
  .main-header__purchases-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}


/* ==== P1 footer - partials/main-footer (spec 6.11) ======================================
 * Trust row (one column on phones, 2 from 600px, 4 from 900px), SBP and MIR marks, sections and
 * social links, documents, copyright and legal lines. Phones: links are rows of at least 44px.
 */
.main-footer {
  padding: 28px 0;
  background: var(--dark-0);
  color: var(--foot-text);
  font-size: 14px;
}
.main-footer a {
  color: var(--foot-text);
}
.main-footer a:hover {
  color: var(--on-dark);
}
.main-footer .advantages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-footer .advantages__item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--on-dark);
  line-height: 1.35;
}
.main-footer .advantages__item-icon {
  flex: none;
  width: 36px;
  height: 36px;
}
.main-footer .advantages__item-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Payment marks: outlined boxes of one height (the two SVGs have different inner margins) */
.main-footer__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 24px 0;
}
.main-footer__pay-img {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--dark-buy); /* outline on --dark-0 */
  border-radius: var(--r-s);
}
.main-footer__pay-img--mir {
  padding-top: 11px;
  padding-bottom: 11px;
}

.main-footer__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-2);
}
.main-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.main-footer__nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-footer__nav .main-footer__nav-list {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 24px;
}
.main-footer__nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.main-footer__social {
  display: flex;
  gap: 6px;
}
.main-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dark-buy); /* outline on --dark-0 */
  border-radius: var(--r-s);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.main-footer__social-link svg {
  flex: none;
}
.main-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.main-footer__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  font-size: 14px;
}

/* The 0x0 cityads pixel (partials/stats-scripts, first line) sits inline in <body> after the footer
   and would open a 22px line box - a light strip under the dark footer. Out of flow it still loads. */
body > img[width="0"][height="0"] {
  position: absolute;
}

@media (min-width: 600px) {
  .main-footer .advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
  }
}

@media (min-width: 900px) {
  .main-footer {
    padding: 56px 0 32px;
    font-size: 15px;
  }
  .main-footer .advantages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
  }
  .main-footer .advantages__item {
    align-items: flex-start;
    gap: 18px;
  }
  .main-footer .advantages__item-icon {
    width: 44px;
    height: 44px;
  }
  .main-footer__pay {
    gap: 16px 44px;
    margin: 44px 0 40px;
  }
  .main-footer__footer {
    gap: 22px;
    padding-top: 28px;
  }
  .main-footer__row {
    gap: 12px 40px;
  }
  .main-footer__nav .main-footer__nav-list,
  .main-footer__docs .main-footer__nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 40px;
  }
  .main-footer__nav-link {
    min-height: 0;
  }
  .main-footer__legal {
    padding-top: 0;
    font-size: 13px;
  }
  .main-footer__copy {
    gap: 6px 40px;
    font-size: 15px;
  }
}


/* ==== P2 home - index.blade.php, partials/tile, partials/live-item (spec 6.2-6.10, 7.1, 7.2) =====
 * Mobile-first. Order on the page: live strip · banner · tabs · categories · deals · popular games
 * and «Снижение цен» (one dark band) · release calendar · «Что такое Стимпэй?».
 * Phones: deals (<600px) and the calendar (<900px) are sideways rows inside their own box; the rest
 * wraps. JS-built list markup (spec 7.2: popular, price drops, calendar, categories) gets the same
 * look as the server markup - the selectors below never depend on server-only elements.
 */

/* Shared: section heads, titles, text links */
.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 12px;
}
.home-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.home-title__sup {
  margin-left: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  vertical-align: super;
}
/* Text link with the 2px orange underline: «Еще N игр», «Все скидки», «Показать все», «Читать дальше» */
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--orange);
  border-radius: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.more-link:hover {
  color: var(--text);
}
.more-link--on-dark,
.more-link--on-dark:hover {
  color: var(--on-dark);
}

/* Arrows of the JS-paged lists (spec 6.8, 6.9): app.js toggles __disabled and __loading */
.section-arrows {
  display: flex;
  flex: none;
  gap: 6px;
}
.section-arrows__prev,
.section-arrows__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  transition: opacity .15s ease, border-color .15s ease;
}
.section-arrows__prev:hover,
.section-arrows__next:hover {
  border-color: var(--muted);
}
.section-arrows__disabled {
  opacity: .4;
  cursor: default;
}
.section-arrows__loading {
  opacity: .6;
  cursor: progress;
}
.popular__list--loading,
.reduction-prices__list--loading,
.main-preorders__list--loading {
  opacity: .5;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* -- Live strip «Только что купили» (spec 6.2) -- */
.live {
  padding: 10px 0 12px;
  background: var(--dark-0);
  color: var(--on-dark);
}
.live__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.live__label {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.live__dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}
.live__dot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: var(--green);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  from {
    opacity: .7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}
/* No user scrolling: the viewport clips, site.js only prepends. It runs to the right screen edge
   on phones (negative right gutter), where the fade hides the cut. */
.live__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
}
.live__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  background: linear-gradient(90deg, transparent, var(--dark-0) 85%);
  pointer-events: none;
}
.live__track {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px; /* room for the 2px ring inside the clipping viewport */
  list-style: none;
}
.live__li {
  flex: 0 0 200px;
  min-width: 0;
}
.live__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 8px;
  border-radius: var(--r-l);
  background: var(--dark-1);
  color: var(--on-dark);
}
.live__item:hover {
  background: var(--dark-2);
  color: var(--on-dark);
}
/* The newest item (always the first: site.js prepends) */
.live__li:first-child .live__item {
  box-shadow: 0 0 0 2px var(--orange);
}
.live__img {
  flex: none;
  width: 64px;
  height: 30px;
  border-radius: var(--r-s);
  background: var(--dark-2);
  object-fit: cover;
}
.live__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.live__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live__row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.live__row .disc {
  padding: 2px 5px;
  font-size: 12px;
}
.live__price {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* -- Banner (spec 6.3). Swiper 3.4 (vendor.css) sizes the slides inline; the container clips. -- */
.main-slider {
  padding: 14px 0;
  background: var(--dark-1);
  color: var(--on-dark);
}
.main-slider__wrapper {
  border-radius: var(--r-l);
}
.main-slider__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.main-slider__item-main,
.main-slider__extra-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background: var(--dark-2);
  color: var(--on-dark);
}
.main-slider__extra-item {
  overflow: hidden;
}
.main-slider__item-main:hover,
.main-slider__extra-item:hover {
  color: var(--on-dark);
}
.main-slider__item-main {
  justify-content: flex-end;
  aspect-ratio: 16 / 10; /* not overflow:hidden - the box must grow when the text needs more room */
  padding-top: 44px; /* the tag's room: a grown box never puts the title under it */
}
.main-slider__item-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main-slider__item-desc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 0 0 var(--r-l) var(--r-l);
  background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.main-slider__item-title {
  max-width: 640px;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.main-slider__item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
/* CTA: white on --blue needs Play 700 19px (spec 2) - at every width */
.main-slider__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-m);
  background: var(--blue);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.main-slider__item-main:hover .main-slider__cta {
  background: var(--blue-ink);
}
/* Price pill: black discount + blue price (struck old price inside) */
.main-slider__pill {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-s);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.main-slider__pill-disc {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--dark-0);
}
.main-slider__pill-price {
  display: flex;
  align-items: baseline;
  padding: 4px 12px;
  background: var(--blue);
}
.main-slider__pill-old {
  margin-right: 6px;
  color: var(--dark-0);
  font-size: 15px;
  font-weight: 400;
}
/* Tag (spec 8.4) */
.slide-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: var(--orange);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Small slides: below the big one, side by side (each 50%, 460/215) */
.main-slider__extra {
  display: flex;
  gap: 8px;
}
.main-slider__extra-item {
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
  aspect-ratio: 460 / 215;
  padding: 8px;
}
.main-slider__extra-item .slide-tag {
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  font-size: 11px;
}
/* Phones: the small pill is 15px, so its price takes --blue-ink (white on --blue needs 19px, spec 2)
   and the old price goes (no room at half width; dark on --blue-ink would be under 4.5:1). */
.main-slider__extra-item .main-slider__pill {
  font-size: 15px;
}
.main-slider__extra-item .main-slider__pill-disc {
  padding: 3px 6px;
}
.main-slider__extra-item .main-slider__pill-price {
  padding: 3px 8px;
  background: var(--blue-ink);
}
.main-slider__extra-item .main-slider__pill-old {
  display: none;
}
/* «Испытай удачу» (/plus): drawn like the other small slides, its own content centred */
.main-slider__lottery {
  align-items: center;
  justify-content: center;
}
.main-slider__lottery-bg {
  background-image: url("/img/lottery/lottery-banner-bottom.jpg");
}
.main-slider__lottery-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.main-slider__lottery-img {
  flex: none;
  width: 30px;
  height: auto;
}
/* Controls row: arrows 44px outlined, bullets 10px, the active one a 24x10 orange pill */
.main-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}
.main-slider__btn-prev,
.main-slider__btn-next {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dark-buy); /* outline on --dark-1 */
  border-radius: var(--r-m);
  background: transparent;
  color: var(--on-dark);
  transition: border-color .15s ease;
}
.main-slider__btn-prev:hover,
.main-slider__btn-next:hover {
  border-color: var(--on-dark-muted);
}
.main-slider__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
/* Swiper's own bullet look (vendor.css: 8px, black .2, active #007aff) replaced */
.main-slider__pagination .swiper-pagination-bullet {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 5px;
  background: #55585D; /* spec 6.3 */
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.main-slider__pagination .swiper-pagination-bullet::before {
  /* a taller hit area; neighbours share the 10px gap */
  content: "";
  position: absolute;
  top: -17px;
  right: -5px;
  bottom: -17px;
  left: -5px;
}
.main-slider__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--orange);
}

/* -- Tile (spec 6.4, partials/tile) -- */
.tiles__item {
  display: flex;
  min-width: 0;
}
.tile {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  transition: box-shadow .15s ease;
}
.tile:hover {
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.tile__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 215;
  background: var(--line-soft);
  object-fit: cover;
}
.tile__flag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--orange);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tile__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}
.tile__name {
  display: -webkit-box;
  min-height: 2.6em; /* two lines (2 x 1.3) at every length of the name: genres and price line up */
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.tile__genres {
  display: none; /* phones: hidden (spec 6.4) */
  overflow: hidden;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tile__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: auto; /* price rows line up across a grid row */
  padding-top: 2px;
}
.tile__price,
.tile__soon {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.tile__soon {
  color: var(--muted);
}
.tile__na {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* -- Tabs «Новинки / Лидеры продаж / Ожидаемые» (spec 6.5): Bootstrap tabs, they wrap -- */
.home-tabs {
  padding-top: 20px;
}
.tabs--main-page {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.tabs--main-page .tabs__item {
  display: flex;
}
.tabs--main-page .tabs__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px 12px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.tabs--main-page .tabs__link:hover,
.tabs--main-page .tabs__item.active .tabs__link {
  color: var(--text);
}
.tabs--main-page .tabs__item.active .tabs__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-grad);
}
.home-tabs__more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* -- Categories (spec 6.6; app.js appends the same items) -- */
.main-categories {
  margin-top: 24px;
  padding: 24px 0;
  background: var(--dark-0);
  color: var(--on-dark);
}
.main-categories .home-title {
  color: var(--on-dark);
}
.main-categories__show-more-btn--loading {
  opacity: .5;
  cursor: progress;
}
.main-categories__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-categories__list-item {
  display: flex;
  min-width: 0;
}
.main-categories__item {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--r-l);
  background: var(--dark-2);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.25;
  transition: background-color .15s ease;
}
.main-categories__item:hover {
  background: var(--dark-buy);
  color: var(--on-dark);
}
.main-categories__item-image {
  display: block;
  width: 34px;
  height: 34px;
}
.main-categories__item-title {
  overflow-wrap: anywhere;
}

/* -- Deals «Скидки до 90%» (spec 6.7): phones - one row of 200px tiles, sideways scroll -- */
.deals {
  padding-top: 22px;
}
.deals__list {
  display: flex; /* gap: from .tiles */
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.deals__item {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

/* -- Popular games + «Снижение цен» (spec 6.8): one --dark-1 band. JS item (spec 7.2):
      li.game-list__item > a.game > .game__image-wrapper > img + .game__desc > .game__name +
      .game__price-overlay > .game__price + .game__discount (CSS order puts the discount first).
      Phones (<600): the text under the image; from 600px over it on a gradient.
      The card stays dark; its content takes the white tile's look (spec 6.4): name as .tile__name,
      discount as the .disc plate, price as .tile__price in white, no fill behind the price. -- */
.games-band {
  margin-top: 22px;
  padding: 24px 0;
  background: var(--dark-1);
  color: var(--on-dark);
}
.games-band .home-title {
  color: var(--on-dark);
}
.reduction-prices {
  margin-top: 32px;
}
.popular__header,
.reduction-prices__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 14px;
}
.popular__title,
.reduction-prices__title {
  flex: 1 1 auto;
}
.popular__tabs {
  display: flex;
  flex-wrap: wrap;
  order: 3;
  width: 100%;
  margin: 0 0 0 -12px;
  padding: 0;
  list-style: none;
}
.popular__tabs-li {
  display: flex;
}
.popular__tabs-item {
  position: relative;
  min-height: 44px;
  padding: 6px 12px 10px;
  border: 0;
  background: none;
  color: var(--on-dark-muted);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.popular__tabs-item:hover,
.popular__tabs-item--active {
  color: var(--on-dark);
}
.popular__tabs-item--active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--orange);
}
.games-band .section-arrows__prev,
.games-band .section-arrows__next {
  border-color: var(--dark-buy); /* outline on --dark-1 */
  background: transparent;
  color: var(--on-dark);
}
.games-band .section-arrows__prev:hover,
.games-band .section-arrows__next:hover {
  border-color: var(--on-dark-muted);
}
.game-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-list__item {
  display: flex;
  min-width: 0;
}
.game {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--dark-2);
  color: var(--on-dark);
}
.game:hover {
  color: var(--on-dark);
}
.game__image-wrapper {
  aspect-ratio: 460 / 215;
  background: var(--dark-2);
}
.game__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game__desc {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
}
.game__name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.game__price-overlay { /* as .tile__price-row */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-width: 100%;
  margin-top: auto;
}
.game__price { /* as .tile__price, white on the dark card */
  order: 2;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.game__discount { /* as .disc */
  order: 1;
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--green);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.game__discount:empty {
  display: none; /* app.js prints (t.discount||"") - spec 8.5 */
}
/* The catalog link of the active price tab (site.js popularMore), under the list like «Еще N игр» */
.popular__more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* -- Release calendar (spec 6.9). JS item (spec 7.2): li.main-preorders__list-item >
      a.main-preorders__item[title] > .main-preorders__image-wrapper > img + .main-preorders__item-date
      + .main-preorders__item-name. Below 1200px: one row (132px, 168px from 900px), sideways scroll;
      from 1200px six equal columns. -- */
.main-preorders {
  padding-top: 22px;
}
.main-preorders__list {
  display: flex;
  gap: 10px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  list-style: none;
}
.main-preorders__list-item {
  display: flex;
  flex: 0 0 132px;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}
.main-preorders__item {
  display: block;
  overflow: hidden;
  border-radius: var(--r-l);
}
.main-preorders__image-wrapper {
  aspect-ratio: 390 / 498;
  background: var(--line-soft);
}
.main-preorders__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-preorders__item-date {
  padding-top: 10px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.25;
}
.main-preorders__item-name {
  padding-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* -- «Что такое Стимпэй?» (spec 6.10): white card; app.js slides .page-text__hidden open -- */
.page-text {
  padding: 28px 0;
}
.page-text__blocks {
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.page-text__title {
  margin: 0 0 10px;
  font-size: 18px;
}
.page-text__subtitle {
  margin: 4px 0 10px;
  font-size: 16px;
}
.page-text__content p {
  max-width: 920px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
}
.page-text__hidden {
  display: none;
}
.ul-orange {
  max-width: 920px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
}
.ul-orange li {
  position: relative;
  margin-bottom: 4px;
  padding-left: 18px;
}
.ul-orange li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.page-text__vk-widget {
  max-width: 100%;
  margin-top: 20px;
  overflow: hidden; /* the widget iframe never pushes the page sideways */
}

@media (min-width: 600px) {
  .tile__body {
    gap: 8px;
    padding: 14px 16px 16px;
  }
  .tile__name {
    min-height: 2.7em; /* two lines (2 x 1.35) */
    font-size: 15px;
    line-height: 1.35;
  }
  .tile__genres {
    display: block;
  }
  .tile__price,
  .tile__soon {
    font-size: 19px;
  }
  .tile__price-row {
    gap: 6px 10px;
    padding-top: 4px;
  }

  .main-categories__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .main-categories__item {
    gap: 20px;
    padding: 22px;
    font-size: 15px;
  }
  .main-categories__item-image {
    width: 48px;
    height: 48px;
  }

  .deals__list {
    display: grid; /* back to the .tiles grid (columns and gap from .tiles) */
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .game {
    display: block;
  }
  .game__desc {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 8px;
    padding: 28px 12px 12px; /* the gradient starts above the name: cover art is busy */
    background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
  }
  .game__name {
    font-size: 15px;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
  }
  .game__price-overlay {
    gap: 6px 10px;
  }
  .game__price {
    font-size: 19px;
  }
}

@media (min-width: 900px) {
  .home-head {
    margin-bottom: 20px;
  }
  .home-title {
    font-size: 24px;
  }
  .more-link {
    font-size: 13px;
  }

  .live {
    padding: 12px 0;
  }
  .live__inner {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .live__label {
    gap: 10px;
    font-size: 14px;
  }
  .live__label-text {
    width: 96px; /* two lines */
  }
  .live__dot {
    width: 10px;
    height: 10px;
  }
  .live__viewport {
    margin-right: 0;
  }
  .live__viewport::after {
    width: 200px;
  }
  .live__li {
    flex-basis: 232px;
  }
  .live__item {
    gap: 10px;
  }
  .live__img {
    width: 80px;
    height: 37px;
  }
  .live__row {
    gap: 8px;
  }

  .main-slider {
    padding: 24px 0;
  }
  .main-slider__item {
    flex-direction: row;
  }
  .main-slider__item-main {
    flex: 1.85 1 0;
    min-width: 0;
    min-height: 480px;
    aspect-ratio: auto;
    padding-top: 56px;
  }
  .main-slider__item-desc {
    gap: 18px;
    padding: 36px 40px;
  }
  .main-slider__item-title {
    font-size: 34px;
    line-height: 1.15;
  }
  .slide-tag {
    top: 18px;
    right: 18px;
  }
  .main-slider__extra {
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
  }
  .main-slider__extra-item {
    flex: 1 1 0;
    aspect-ratio: auto;
    padding: 16px;
  }
  .main-slider__extra-item .slide-tag {
    top: 14px;
    right: 14px;
    padding: 5px 10px;
    font-size: 12px;
  }
  .main-slider__extra-item .main-slider__pill {
    font-size: 19px;
  }
  .main-slider__extra-item .main-slider__pill-disc {
    padding: 4px 10px;
  }
  .main-slider__extra-item .main-slider__pill-price {
    padding: 4px 12px;
    background: var(--blue);
  }
  .main-slider__extra-item .main-slider__pill-old {
    display: inline;
  }
  .main-slider__lottery-content {
    gap: 14px;
    font-size: 20px;
  }
  .main-slider__lottery-img {
    width: 52px;
  }

  .home-tabs {
    padding-top: 44px;
  }
  .tabs--main-page {
    margin-bottom: 20px;
  }
  .tabs--main-page .tabs__link {
    padding: 10px 22px 18px;
    font-size: 18px;
  }
  .home-tabs__more {
    margin-top: 16px;
  }

  .main-categories {
    margin-top: 56px;
    padding: 56px 0;
  }

  .deals {
    padding-top: 56px;
  }

  .games-band {
    margin-top: 56px;
    padding: 56px 0;
  }
  .reduction-prices {
    margin-top: 48px;
  }
  .popular__header,
  .reduction-prices__header {
    align-items: flex-end;
    gap: 12px 28px;
    margin-bottom: 22px;
  }
  .popular__title,
  .reduction-prices__title {
    flex: 0 1 auto;
    padding-bottom: 6px;
  }
  .popular__tabs {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    margin: 0;
  }
  .popular__tabs-item {
    padding: 6px 16px 12px;
    font-size: 16px;
  }
  .popular__tabs-item--active::after {
    right: 16px;
    left: 16px;
  }
  .reduction-prices__buttons {
    margin-left: auto;
  }
  .game-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .popular__more {
    margin-top: 16px;
  }

  .main-preorders {
    padding-top: 56px;
  }
  /* 900-1199px: the phone's sideways row with wider cards; from 1200px six equal columns (below) */
  .main-preorders__list-item {
    flex-basis: 168px;
  }
  .main-preorders__item-date {
    padding-top: 14px;
    font-size: 17px;
  }
  .main-preorders__item-name {
    padding-top: 4px;
    font-size: 13px;
  }

  .page-text {
    padding: 64px 0;
  }
  .page-text__blocks {
    padding: 40px 44px;
  }
  .page-text__title {
    margin-bottom: 16px;
    font-size: 20px;
  }
  .page-text__subtitle {
    font-size: 18px;
  }
  .page-text__content p,
  .ul-orange {
    font-size: 15px;
    line-height: 1.65;
  }
  .page-text__content p {
    margin-bottom: 18px;
  }
  .page-text__vk-widget {
    margin-top: 28px;
  }
}

/* 4 columns are narrow up to 1199px: one line of name keeps the overlay inside the image */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .game__name {
    -webkit-line-clamp: 1;
  }
}

@media (min-width: 1200px) {
  .main-categories__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* Release calendar: exactly six equal columns, one row (6 per page, paging step 6 - IndexController, /ajax/preorders);
     fewer items leave the rest of the row empty, no placeholders */
  .main-preorders__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .game__desc {
    padding: 32px 14px 14px;
  }
}


/* ==== P3 product - product.blade.php, partials/product-buy-button, product modals (spec 6.12, 6.16, 7.1) ====
 * Mobile-first. DOM order = phone order: title band · gallery · buy block · main column · phone bar.
 * From 900px .product-layout is a grid: gallery and main column on the left, the buy block on the right
 * (in the page flow, not sticky), with the widths of the spec's flex pair (main 999 1 620px, buy 1 1 340px,
 * gap 24px) - a grid because the phone order puts the buy block between the gallery and the rest with
 * one DOM copy of each.
 * The phone bar is sticky at the bottom of <main>, so it stops above the footer (no page padding needed).
 * Also here: the shared Bootstrap modal look (spec 6.16), first used by this page's three modals.
 */

/* -- Title band: today's /backgrounds/ image (inline background-image) under the dark overlay -- */
.product-hero {
  position: relative;
  background-color: var(--dark-1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--on-dark);
}
.product-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(29,31,34,.85);
}
.product-hero__inner {
  position: relative; /* above the overlay */
  padding-top: 4px;
  padding-bottom: 18px;
}
.product-hero .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
}
.product-hero .breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* separator: a drawn chevron (no text in CSS content) */
.product-hero .breadcrumbs__item + .breadcrumbs__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--foot-text);
  border-right: 1.5px solid var(--foot-text);
  transform: rotate(45deg);
}
.product-hero .breadcrumbs__link,
.product-hero .breadcrumbs__admin {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target on phones */
  color: var(--foot-text);
  overflow-wrap: anywhere;
}
.product-hero .breadcrumbs__link:hover,
.product-hero .breadcrumbs__admin:hover {
  color: var(--on-dark);
}
.product-hero .product__title {
  margin: 0 0 12px;
  color: var(--on-dark);
  font-size: 24px;
  line-height: 1.12;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.product-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-hero__tag {
  padding: 5px 10px;
  border-radius: var(--r-s);
  background: #2B2D31;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.3;
}

/* -- Layout: one column on phones -- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 24px;
}
.product-layout__gallery,
.product-layout__main {
  min-width: 0;
}
.product-layout__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -- Gallery (site.js productGallery): main media 16:9 + a row of thumbnail buttons -- */
.product-gallery__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--dark-0);
}
.product-gallery--swipe .product-gallery__stage {
  touch-action: pan-y pinch-zoom; /* site.js takes horizontal swipes; vertical scroll and zoom stay native */
}
.product-gallery__stage::before {
  /* the 16:9 box (padding ratio: also where aspect-ratio is missing); the media fill it */
  content: "";
  display: block;
  padding-top: 56.25%;
}
.product-gallery__img,
.product-gallery__play,
.product-gallery__video,
.product-gallery__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.product-gallery__img {
  object-fit: contain;
}
/* No screenshots: the cover (often a portrait) over a blurred copy of itself */
.product-gallery__backdrop {
  background-position: center;
  background-size: cover;
  filter: blur(24px) brightness(.5);
  transform: scale(1.15);
}
.product-gallery__video {
  border: 0;
}
.product-gallery__play {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--dark-0);
  color: var(--on-dark);
  cursor: pointer;
}
.product-gallery__play:focus-visible {
  outline: 3px solid var(--on-dark);
  outline-offset: -6px; /* the stage clips (overflow: hidden) */
}
.product-gallery__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
}
.product-gallery__play-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(13,14,16,.7);
  transition: background-color .15s ease;
}
.product-gallery__play:hover .product-gallery__play-icon {
  background: var(--blue);
}
.product-gallery__thumbs {
  display: flex;
  gap: 6px;
  margin: 5px -3px 0;
  padding: 3px; /* room for the focus ring inside the scroll box */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.product-gallery__thumb {
  position: relative;
  flex: 0 0 76px; /* a 72px picture + the 2px frame: 44px tall, the phone touch target */
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent; /* reserved for the active frame: the size never changes */
  border-radius: var(--r-m);
  background: var(--dark-0);
  background-clip: padding-box; /* the dark fill stays inside: no dark ring through the transparent border */
  scroll-snap-align: start;
  cursor: pointer;
}
.product-gallery__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.product-gallery__thumb[aria-current="true"] {
  border-color: var(--orange);
}
.product-gallery__thumb:focus-visible {
  /* keyboard ring: blue, outside the frame (1px gap on the page background), never confused with the orange active frame */
  outline: 2px solid var(--blue-ink);
  outline-offset: 1px;
}
.product-gallery__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgba(13,14,16,.7);
  color: var(--on-dark);
}

/* -- Buy block (--dark-buy) -- */
.product-buy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-l);
  background: var(--dark-buy);
  color: var(--on-dark);
}
.product-buy__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
/* Cover above the price row. Shrunk as a whole, never cropped or stretched. The height cap (phone and
   tablet 220px; desktop - from the window height, see the 900px query) keeps it from turning into a
   full-screen poster and keeps the price and the buy button in the first screen. The cap goes through
   max-width (portrait covers are 390:498), so the box takes its height from the width/height attributes
   before the file loads and nothing below it jumps. */
.product-buy__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.product-buy__cover {
  display: block;
  align-self: center;
  width: 100%;
  max-width: calc(220px * 390 / 498);
  height: auto;
  border-radius: var(--r-m);
}
.product-buy__cover.product-buy__cover--wide {
  max-width: 460px; /* the /goods/ fallback (Steam header 460x215): already low; capped at the file width */
}
.product-buy .product__price-block {
  display: flex;
  flex-wrap: wrap; /* a long price never runs out of the block: it wraps instead (narrow block at 900px) */
  align-items: center;
  gap: 8px 12px;
}
.product-buy .product__discount {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 56px;
  border-radius: var(--r-m);
  background: var(--disc-grad);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.product-buy .product__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.product-buy .product__old-price {
  color: var(--orange-on-dark);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: line-through;
  text-transform: uppercase;
}
.product-buy .product__current-price {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Tooltips next to the «?» marks (spec 1): text only, never take the pointer, shown on hover only.
   They span their row, so they stay inside the block. Kept in the
   accessibility tree (opacity, not visibility), so a screen reader reads the text in place. */
.product__price-notice,
.product__advantages-item {
  position: relative;
}
.product__price-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  color: var(--on-dark-key);
  font-size: 13px;
  line-height: 1.4;
}
.product__price-notice-btn,
.discount-off__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--on-dark-key);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.product__price-notice-tooltip,
.discount-off__tooltip {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow-hover);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.product__price-notice-tooltip {
  top: calc(100% + 8px);
}
.discount-off__tooltip {
  bottom: calc(100% + 8px);
}
.discount-off {
  display: inline-flex;
  flex: none;
}
@media (hover: hover) {
  .product__price-notice:hover .product__price-notice-tooltip,
  .discount-off:hover .discount-off__tooltip {
    opacity: 1;
    transform: none;
  }
}

/* Add-on warning right above the buy button (Product::isAddon), drawn like the pre-order note */
.product-addon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: rgba(0,0,0,.18);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.product-addon__icon {
  flex: none;
  color: var(--orange-on-dark);
}
.product-addon__link {
  color: var(--orange-on-dark); /* 4.73:1 on --dark-buy, more on the darker note */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-addon__link:hover {
  color: var(--on-dark);
}

/* Pre-order countdown */
.product__extra-preorder-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: rgba(0,0,0,.18);
}
.product__extra-preorder-icon {
  flex: none;
  color: var(--orange-on-dark);
}
.product__extra-preorder-info--title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.product__extra-preorder-info--description {
  color: var(--on-dark-key);
  font-size: 13px;
  line-height: 1.4;
}

/* The buy button - buy block and phone bar (partials/product-buy-button). app.js sets .in_cart. */
.product .product__buy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--blue);
  color: var(--on-dark); /* white on --blue: Play 700 19px only (spec 2) */
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}
.product .product__buy-button:hover {
  background: var(--blue-ink);
  color: var(--on-dark);
}
.product .product__buy-button--grey,
.product .product__buy--grey .product__buy-button {
  background: var(--muted);
}
.product .product__buy-button--grey:hover,
.product .product__buy--grey .product__buy-button:hover {
  background: #505050;
}
.product .product__buy-button.in_cart {
  background: var(--green);
}
.product .product__buy-button.in_cart:hover {
  background: #016657;
}

/* Features list: orange checks; a crossed circle for «закончился» and the disabled discount */
.product__advantages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product__advantages-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1.4;
}
.product__advantages-item > svg {
  flex: none;
  margin-top: 1px;
  color: var(--orange);
}
.product__advantages-item > .icon-cross {
  color: var(--on-dark-muted);
}
.product__advantages-orange {
  color: var(--orange-on-dark);
}

/* «Как активировать?» · «Хочу дешевле!» */
.product__cart-block-links {
  display: flex;
  gap: 8px;
}
.product__how-activate,
.product__subscribe-price {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.product__cart-block-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(173,173,173,.45);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  transition: border-color .15s ease;
}
.product__cart-block-link:hover {
  border-color: var(--on-dark);
  color: var(--on-dark);
}

/* «Об игре» */
.product-buy__about {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.product-buy__about-title {
  margin: 0 0 14px;
  color: var(--on-dark);
  font-size: 18px;
}
.product-buy .product__info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.product-buy .product__info-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
}
.product-buy .product__info-key {
  color: var(--on-dark-key);
}
.product-buy .product__info-value {
  margin: 0;
  color: var(--on-dark);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.product-buy .product__info-inner-list,
.product-buy .product__info-inner-block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-buy .product__info-link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 3px;
}
.product-buy .product__info-link:hover {
  color: var(--orange-on-dark);
  text-decoration-color: currentColor;
}

/* -- Main column: white cards, notices, tiles -- */
.product-card {
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.product .product__block-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}
.product .product__hide {
  display: none; /* app.js slides it open from «Читать полностью» / «Подробнее» / «Еще N игр» */
}
.product .product__more {
  margin-top: 8px;
}
.product__edition-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product__edition-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.product__edition-item > svg {
  flex: none;
  margin-top: 1px;
  color: var(--orange);
}
.product__preorder-bonus-content {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
/* Description: HTML from the admin */
.product__description-content {
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.product__description-content p {
  margin: 0 0 12px;
}
.product__description-content ul,
.product__description-content ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.product__description-content h2,
.product__description-content h3,
.product__description-content h4 {
  margin: 18px 0 8px;
  font-size: 17px;
}
.product__description-content img,
.product__description-content video,
.product__description-content iframe {
  max-width: 100%;
  height: auto;
}
.product__description-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
/* Notice cards (spec 6.16): steam-bot, warning, DLC dependency, the waiting-time note */
.notice-card {
  padding: 14px 16px;
  border-radius: var(--r-l);
  background: #FFF4E0;
  color: #7A4100; /* 7.45:1 */
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.notice-card p {
  margin: 0 0 8px;
}
.notice-card > :last-child {
  margin-bottom: 0;
}
.notice-card a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notice-card a:hover {
  color: #5A3000;
}

/* System requirements: Bootstrap tabs #require-N; phones - a collapsed card (Bootstrap collapse) */
.product__req .product__req-heading {
  margin: 0;
}
.product__req-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.product__req-toggle svg {
  flex: none;
  color: var(--orange);
  transition: transform .2s ease;
}
.product__req-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.product__req-title {
  display: none;
}
.product__req-body > .tabs--product {
  margin-top: 12px; /* not padding on the collapsing box: Bootstrap animates its height */
}
.product__req-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.product__req-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}
.product__req-key {
  color: var(--muted);
}
.product__req-value {
  margin: 0;
  overflow-wrap: anywhere;
}
.product__req-subtitle {
  margin: 18px 0 12px;
  font-size: 16px;
}

/* Tabs of this page (requirements; DLC / other editions) */
.product .tabs--product {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.product .tabs--product .tabs__item {
  display: flex;
}
.product .tabs--product .tabs__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px 10px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
}
.product .tabs--product .tabs__link:hover,
.product .tabs--product .tabs__item.active .tabs__link {
  color: var(--text);
}
.product .tabs--product .tabs__item.active .tabs__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-grad);
}
.product .tabs--bold .tabs__link {
  font-weight: 700;
}

/* DLC / other editions and «Похожие игры»: tiles (partials/tile) on --bg */
.product__items,
.product__similar {
  min-width: 0;
}
.product__items-rest > .tiles {
  margin-top: 8px; /* the grid gap */
}

/* «Испытай удачу» (luckyBanner) */
.product .lottery-banner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  transition: box-shadow .15s ease;
}
.product .lottery-banner__link:hover {
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.product .lottery-banner__content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.product .lottery-banner__icon {
  flex: none;
}
.product .lottery-banner__title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* VK group widget: width 'auto' takes the column (spec 6.12) */
.product__vk {
  min-width: 0;
  overflow: hidden;
}

/* -- Phone buy bar: sticky at the bottom of <main> below 900px, under the backdrop and the header (spec 1 ladder).
   Jivo (partials/stats-scripts) loads only on the exact host steampay.com, so it is not on the stand or beta.
   Its button must sit above this bar on phones: set the offset in Jivo's widget settings; if they cannot,
   a CSS fallback on Jivo's container (check the selector on the live widget after release), e.g.
   @media (max-width: 899.98px) { body:has(.product-bar) jdiv.__jivoMobileButton { bottom: 84px !important; } }
   (!important only if Jivo positions it with an inline style - check first). -- */
.product-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-buybar);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  box-shadow: 0 -2px 10px rgba(0,0,0,.12);
}
.product-bar__price {
  display: flex;
  flex: none;
  flex-direction: column;
  min-width: 0;
}
.product-bar__old {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: line-through;
}
.product-bar__current {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.product .product-bar__btn {
  flex: 1 1 auto;
  width: auto;
  min-height: 50px;
}
/* An add-on: «DLC · Нужна базовая игра» on its own line above the price and the button (the bar grows by it;
   it is in the flow, so nothing under it has a fixed offset - only the Jivo note above assumes 84px) */
.product-bar--addon {
  flex-wrap: wrap;
  row-gap: 6px;
}
.product-bar__addon {
  flex: 1 0 100%;
  color: #7A4100; /* the notice-card text colour, on white */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 900px) {
  .product-hero__inner {
    padding-top: 12px;
    padding-bottom: 30px;
  }
  .product-hero .breadcrumbs__list {
    margin-bottom: 10px;
  }
  .product-hero .breadcrumbs__link,
  .product-hero .breadcrumbs__admin {
    min-height: 0;
  }
  .product-hero .product__title {
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 1.1;
  }
  .product-hero__tag {
    padding: 6px 12px;
    font-size: 13px;
  }

  .product-layout {
    grid-template-columns: minmax(0, 1fr) 300px; /* where min() is missing */
    grid-template-columns: minmax(0, 1fr) min(340px, calc((100% - 24px) * 340 / 960));
    grid-template-rows: auto 1fr; /* extra height of a tall buy block goes below the main column */
    grid-template-areas:
      "gallery buy"
      "main buy";
    gap: 20px 24px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 56px;
  }
  .product-layout__gallery {
    grid-area: gallery;
  }
  .product-layout__main {
    grid-area: main;
    gap: 20px;
  }
  /* The buy block is part of the page flow: no sticky, no scroll of its own - it moves with the page.
     The cover height follows the window height (120px on low windows, ~208px at 1366x768, the full block
     width on tall ones), so the cover, the price and the buy button fit the first screen on laptops; the
     tighter spacing for low windows is in the next query. */
  .product-buy {
    grid-area: buy;
  }
  .product-buy__main {
    gap: 18px;
    padding: 24px;
  }
  .product-buy__cover {
    max-width: calc(clamp(120px, 100vh - 560px, 400px) * 390 / 498);
  }
  .product-buy .product__discount {
    width: 72px;
    height: 68px;
    font-size: 26px;
  }
  .product-buy .product__old-price {
    font-size: 14px;
  }
  .product-buy .product__current-price {
    font-size: 36px;
  }
  .product__cart-block-link {
    font-size: 14px;
  }
  .product-buy__about {
    padding: 24px;
  }
  .product-buy .product__info-item {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
  }

  .product-gallery__thumbs {
    gap: 8px;
  }
  .product-gallery__thumb {
    flex-basis: calc((100% - 32px) / 5); /* five in view, the rest scroll */
  }
  .product-gallery__play-icon {
    width: 64px;
    height: 64px;
  }

  .product-card {
    padding: 32px 36px;
  }
  .product .product__block-title {
    margin-bottom: 18px;
    font-size: 24px;
  }
  .product__edition-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 24px;
  }
  .product__edition-item,
  .product__preorder-bonus-content,
  .product__description-content {
    font-size: 15px;
  }
  .product__description-content {
    line-height: 1.65;
  }
  .notice-card {
    padding: 18px 24px;
    font-size: 15px;
  }

  .product__req-toggle {
    display: none;
  }
  .product__req-title {
    display: inline;
  }
  .product__req-body.collapse {
    display: block; /* never collapsed from 900px */
  }
  .product__req-body > .tabs--product {
    margin-top: 0;
  }
  .product__req-item {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
  }
  .product .tabs--bold .tabs__link {
    font-size: 18px;
  }
  .product__items-rest > .tiles {
    margin-top: 12px;
  }

  .product-bar {
    display: none;
  }
}

/* Low desktop windows (laptops): tighter vertical spacing above and inside the buy block, so the price and
   the buy button stay in the first screen; tall windows keep the spacing of the mockup. */
@media (min-width: 900px) and (max-height: 949px) {
  .product-hero__inner {
    padding-top: 8px;
    padding-bottom: 16px;
  }
  .product-hero .product__title {
    margin-bottom: 12px;
  }
  .product-layout {
    padding-top: 16px;
  }
  .product-buy__main {
    gap: 12px;
    padding: 16px 24px 24px;
  }
  .product-buy .product__discount {
    width: 60px;
    height: 56px;
    font-size: 22px;
  }
}

/* The main column is narrow next to the buy block: tiles stay 2 across until 1200px */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .product .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Bootstrap modal look (spec 6.16), shared by every storefront modal: dialog max 480px, white card,
   44px close button top-right, backdrop rgba(13,14,16,.6). vendor.css keeps Bootstrap's mechanics. -- */
.modal-backdrop {
  background-color: var(--dark-0);
}
.modal-backdrop.in {
  opacity: .6;
}
.modal-dialog {
  width: auto; /* vendor.css: 600px from 768px */
  max-width: 480px;
  margin: 16px;
}
.modal-content {
  padding: 24px 20px;
  border: 0;
  border-radius: var(--r-l);
  background: var(--card);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  color: var(--text);
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3; /* above the success message */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text);
  transition: background-color .15s ease;
}
.modal-close:hover {
  background: var(--input);
  color: var(--text);
}
/* States the bundle sets (today's app.css rules; the error block also hides while loading) */
.modal__spinner,
.price-modal__spinner {
  display: none;
  padding: 48px 0;
}
.modal__loader .modal__spinner,
.price-modal--loading .price-modal__spinner {
  display: block;
}
.modal__loader .modal-header,
.modal__loader .modal-body,
.modal__loader .modal-error,
.modal__error .modal-header,
.modal__error .modal-body,
.modal-error--hidden,
.price-modal--loading .price-modal__content {
  display: none;
}
/* Success message over the form: app.js adds .modal-form-success to .modal-dialog */
.modal-form-success-message {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 56px;
  border-radius: inherit;
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-form-success .modal-form-success-message {
  opacity: 1;
  visibility: visible;
}
.modal-form-success-message .alert--danger {
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: #FDECEC;
  color: #A3161C;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
}

/* #price-modal, #subscribe-modal (.price-modal) */
.price-modal__header {
  margin-bottom: 16px;
  padding-right: 36px;
}
.price-modal__header-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.price-modal__header-subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.price-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-modal__input-wrapper {
  min-width: 0;
}
.price-modal__btn {
  width: 100%;
}
.price-modal .text-center {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.promo-code-vk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
}
.promo-code-vk__icon {
  flex: none;
  width: 40px;
  height: 40px;
}
.promo-code-vk__content {
  flex: 1 1 auto;
  min-width: 0;
}
.promo-code-vk__description {
  font-size: 14px;
  line-height: 1.5;
}
.promo-code-vk__btn-wrapper {
  margin-top: 10px;
}
.promo-code-vk__error {
  color: var(--red);
  font-size: 13px;
  line-height: 1.4;
}
.promo-code-vk__error:not(:empty) {
  margin-top: 6px;
}
.promo-code-vk__code {
  margin-top: 10px;
  padding: 10px 14px;
  border: 2px dashed var(--orange);
  border-radius: var(--r-m);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  -webkit-user-select: all;
  user-select: all;
}

/* #product-added (.modal--add-cart): JS item div.catalog-item > .catalog-item__img img + .catalog-item__name
   + .catalog-item__price > span.catalog-item__price-span (spec 7.2) */
.modal--add-cart .modal-header {
  padding: 0 40px 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.modal--add-cart .modal-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.modal--add-cart .modal-body {
  padding: 0;
}
.modal--add-cart .catalog--cart-success {
  margin: 16px 0;
}
.modal--add-cart .catalog-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal--add-cart .catalog-item__img {
  flex: 0 0 88px;
}
.modal--add-cart .catalog-item__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-s);
}
.modal--add-cart .catalog-item__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.modal--add-cart .catalog-item__price {
  flex: none;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.modal--add-cart .main-header__dropdown--products-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal--add-cart .modal-error .main-header__dropdown--products-btns {
  align-items: center;
}
.cart-total-main {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.product-added__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-added__actions .btn {
  width: 100%;
}
.code-alert {
  padding-top: 4px;
  text-align: center;
}
.code-alert__title {
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
}
.code-alert__description {
  max-width: 370px;
  margin: 0 auto 16px;
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 420px) {
  .price-modal__form {
    flex-direction: row;
    align-items: flex-start;
  }
  .price-modal__input-wrapper {
    flex: 1 1 auto;
  }
  .price-modal__btn {
    width: auto;
  }
  .product-added__actions {
    flex-direction: row;
  }
  .product-added__actions .btn {
    flex: 1 1 0;
  }
  .modal--add-cart .catalog-item__img {
    flex-basis: 112px;
  }
  .modal--add-cart .catalog-item__name {
    font-size: 15px;
  }
}
@media (min-width: 512px) {
  .modal-dialog {
    margin: 48px auto;
  }
  .modal-content {
    padding: 24px;
  }
}
@media (min-width: 900px) {
  .modal-dialog {
    margin-top: 72px;
  }
}


/* ==== P4a catalog - catalog, search, tag, discount-items, partials/catalog-item (spec 6.13, 7.1, 7.2) ====
 * Mobile-first. Pages: catalog (/games, the genre pages /{slug}, /special, /coming-soon - CatalogController),
 * search (/search), tag (/tag/{slug}) - frame F1; discount-items (/promo/{slug}) - frame F2.
 * Rows: .catalog-rows holds a.catalog-item rows - the markup app.js builds for the catalog and search lists
 * (spec 7.2) and partials/catalog-item prints for search, tag and promo. Scoped to .catalog-rows because the
 * same .catalog-item classes live in the header search results, the mini-cart and the added-to-cart modal.
 * Filters: below 900px an off-screen panel opened by «Фильтры» (site.js catalogFilters sets
 * html.catalog-filters-open); from 900px a sticky left column 280px that scrolls on its own when it is
 * taller than the window. app.js relations kept (spec 7.1): .load-more is a sibling of .catalog--main;
 * .catalog-sort gets an inline display:none when nothing is found; the heights of .main-header and
 * .catalog-wrap drive the infinite scroll, so .catalog-wrap is the list column only.
 * Also here, shared by every storefront page: the load-more button, the plugin skins (select2 4.0.3,
 * fs.picker, ion.rangeSlider 2.2.0) over vendor.css. No page of this package paginates, so no pagination chips.
 */

/* -- Page frame, title, «Фильтры» button -- */
.catalog-page {
  padding: 16px 0 32px;
}
.catalog-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.catalog-page__title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 22px;
  overflow-wrap: anywhere;
}
.catalog-page__filters-btn {
  flex: none;
}
.catalog-page__filters-btn svg {
  flex: none;
  color: var(--orange);
}
.catalog-wrap {
  min-width: 0;
}

/* SEO text of a category (admin HTML: p, h2, empty p) */
.catalog-page__text {
  margin-top: 24px;
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  overflow-wrap: break-word;
}
.catalog-page__text > :first-child {
  margin-top: 0;
}
.catalog-page__text > :last-child {
  margin-bottom: 0;
}
.catalog-page__text p {
  max-width: 820px;
  margin: 0 0 12px;
}
.catalog-page__text p:empty {
  display: none;
}
.catalog-page__text h2,
.catalog-page__text h3 {
  margin: 20px 0 8px;
  font-size: 18px;
}

/* -- Sort row: count · availability tabs (.catalog-sort__tabs li.active, set by app.js) · sort select.
      Phones: count and tabs on one row, the select below at full width. -- */
.catalog-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.catalog-sort__count {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 14px;
}
.catalog-sort__count:empty {
  display: none;
}
.catalog-sort__count span {
  color: var(--text);
  font-weight: 700;
}
.catalog-sort__select {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.catalog-sort__select label { /* phones: kept for screen readers only */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.catalog-sort__tabs {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.catalog-sort__tabs li {
  display: flex;
}
.catalog-sort__tabs a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px 10px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
.catalog-sort__tabs a:hover,
.catalog-sort__tabs li.active a {
  color: var(--text);
}
.catalog-sort__tabs li.active a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-grad);
}

/* -- Not found (.catalog__not-found, toggled with Bootstrap's .hide by app.js) -- */
.catalog__not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--muted);
  font-size: 16px;
  text-align: center;
}
.catalog__not-found-icon {
  color: var(--orange);
}

/* -- Search page: its own search field, and the empty state inside .catalog__not-found (.search-empty):
      a card with the message, «Сбросить запрос» and «Перейти в каталог», then «Популярные игры» tiles -- */
.search-page__form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.search-page__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  -webkit-appearance: none; /* Safari: no native rounded search field, as .main-header__search-input */
  appearance: none;
}
.search-page__input::-webkit-search-decoration,
.search-page__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-page__submit {
  flex: none;
}
.catalog__not-found.search-empty {
  align-items: stretch;
  gap: 24px;
  padding: 0;
  background: none;
  text-align: left;
}
.search-empty__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  text-align: center;
}
.search-empty__text {
  max-width: 560px;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.search-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.search-empty__title {
  margin-bottom: 12px;
}

/* -- Chips: order and filters of a collection page (tag, links) and the catalog's quick price limits (buttons).
      The current one carries aria-current. Touch targets 44px. -- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter-chip:hover {
  border-color: var(--muted);
  color: var(--text);
}
.filter-chip[aria-current="true"],
.filter-chip[aria-current="true"]:hover {
  border-color: var(--blue-ink);
  background: var(--blue-ink); /* white on --blue-ink 4.69:1 */
  color: var(--on-dark);
}
.filter-chip--reset,
.filter-chip--reset:hover {
  border-color: transparent;
  background: none;
  color: var(--blue-ink);
}
.filter-chip--reset:hover {
  color: var(--blue-ink-hover);
}
.filter-chip svg {
  flex: none;
}

/* -- Collection page (tag): order and filter links above the rows; the empty result -- */
.collection-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.collection-controls__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The order group and the filter group apart: phones - two rows with a line between; from 900px side by side,
   a vertical line before the filters (their chips wrap inside their own box) */
.collection-controls__group + .collection-controls__group {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .collection-controls {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
  }
  .collection-controls__group:first-child {
    flex: none;
  }
  .collection-controls__group + .collection-controls__group {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
    padding-left: 16px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}
.collection-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  text-align: center;
}
.collection-empty__text {
  margin: 0;
}
.collection-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* -- Rows (spec 6.13): card, image 158x74 (phone 112x52), name, info row, price block right (phone: under the name) -- */
.catalog-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog-rows > li {
  display: flex;
  min-width: 0;
}
.catalog-rows .catalog-item {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas:
    "img name"
    "img price";
  align-items: start;
  gap: 8px 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  transition: box-shadow .15s ease;
}
.catalog-rows .catalog-item:hover {
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.catalog-rows .catalog-item__img {
  grid-area: img;
  width: 112px;
  height: 52px;
  overflow: hidden;
  border-radius: var(--r-s);
  background: var(--line-soft);
}
.catalog-rows .catalog-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-rows .catalog-item__name {
  grid-area: name;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.catalog-rows .catalog-item__info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  color: var(--soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.catalog-rows .catalog-item__activation {
  display: flex;
  flex: none;
  opacity: 1; /* the Steam icon is a #4B5563 SVG (Product::getActivationIcon): no transparency, no filter */
}
.catalog-rows .catalog-item__activation img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.catalog-rows .catalog-item__genres {
  min-width: 0;
  color: #626B75; /* white rows only (5.4:1 on #FFF); --soft stays as it is for the rest */
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.catalog-rows .catalog-item__price {
  grid-area: price;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.catalog-rows .catalog-item__price-span {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* -- Load more (shared: also the news list, spec 6.14a). app.js: .load-more--loading swaps the button
      for the spinner; .hide() / .show() write an inline display -- */
.load-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.load-more__btn {
  min-height: 44px;
  padding: 10px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: border-color .15s ease;
}
.load-more__btn:hover {
  border-color: var(--muted);
}
.load-more__loader {
  display: none;
  padding: 6px 0;
}
.load-more--loading .load-more__btn {
  display: none;
}
.load-more--loading .load-more__loader {
  display: block;
}

/* -- Filters: phone panel (full height, from the left, over a backdrop; z-index ladder: filters 120) -- */
.catalog-filters-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-filters);
  background: rgba(13,14,16,.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.catalog-filters { /* after the backdrop in the DOM, same z-index: drawn above it */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-filters);
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100% - 48px));
  background: var(--card);
  box-shadow: 0 0 24px rgba(0,0,0,.3);
  transform: translateX(-100%);
  visibility: hidden; /* closed: out of the tab order and the accessibility tree */
  transition: transform .25s ease, visibility 0s linear .25s;
}
.catalog-filters-open .catalog-filters {
  transform: none;
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
.catalog-filters-open .catalog-filters-backdrop {
  opacity: 1;
  visibility: visible;
}
html.catalog-filters-open,
html.catalog-filters-open body {
  overflow: hidden;
}
.catalog-filters__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.catalog-filters__title {
  margin: 0;
  font-size: 18px;
}
.catalog-filters__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--text);
}
.catalog-filters__close:hover {
  background: var(--line-soft);
}
.catalog-filters__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.catalog-filters__foot {
  flex: none;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
}
.catalog-filters__done {
  width: 100%;
}

/* Filter blocks (markup and hooks: app.js, spec 7.1) */
.catalog-filter__block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.catalog-filter__block__head {
  margin-bottom: 8px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.catalog-filter .form-group {
  margin: 0;
}
.catalog-filter__checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Genres in two columns only where the longest name fits («Приключения» ~103px + the 30px handle):
   the phone panel from a 360px window; one column in the 280px desktop column */
@media (min-width: 360px) and (max-width: 899.98px) {
  .catalog-filter__checklist--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }
}
.catalog-filter__tags .form-group + .catalog-filter__checklist {
  margin-top: 4px;
}
.catalog-filter__checklist .picker-label {
  overflow-wrap: break-word;
}
/* Icon lists: the icons fill with the page's #svg-gradient; grey until checked */
.catalog-filter__checklist .picker-label__icon {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: 24px;
}
.catalog-filter__checklist .picker-label__icon svg {
  max-width: 22px;
  max-height: 22px;
}
.catalog-filter__checklist--icon .picker:not(.checked) .picker-label__icon path {
  fill: var(--soft);
}
/* The 0x0 SVG that defines #svg-gradient sits after the footer: out of flow (display:none would drop the gradient) */
body > .svg-gradient {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Ranges: price (ion.rangeSlider + the .from / .to mirrors app.js fills) and release dates (two selects) */
.catalog-filter__range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.catalog-filter__range .irs-wrap {
  grid-column: 1 / -1;
  margin: 0 -12px; /* the 44px handle box overhangs; its 20px dot lines up with the fields */
}
.catalog-filter__range__input.from,
.catalog-filter__range__input.to {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--input);
}
.catalog-filter__range-from-text {
  flex: none;
  color: var(--muted);
  font-size: 14px;
}
.catalog-filter__range__input .form-control {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
}
.catalog-filter__range__input .form-control:focus {
  outline: none; /* the field box (the label) shows the focus */
}
.catalog-filter__range__input.from:focus-within,
.catalog-filter__range__input.to:focus-within {
  outline: 2px solid var(--blue-ink);
  outline-offset: 0;
}
.catalog-filter__range__input--invalid.from,
.catalog-filter__range__input--invalid.to {
  border-color: var(--red);
}
/* Quick upper limits and the message of a wrong typed price (site.js catalogPrice) */
.catalog-price__quick {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 6px;
}
.catalog-price__quick .filter-chip {
  flex: 1 1 auto;
  padding: 8px 6px;
  font-size: 13px;
}
/* The message under the price fields: a correction - calm blue-grey; not a number - red (the field is marked too) */
.catalog-price__msg {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-s);
  background: #EAF2FA;
  color: #1E3A56; /* 10.6:1 */
  font-size: 13px;
  line-height: 1.4;
}
.catalog-price__msg[hidden] {
  display: none;
}
.catalog-price__msg--error {
  background: #FDECEC;
  color: #A3161C; /* 6.4:1 */
}

.catalog-filter__clear {
  padding-top: 16px;
}
.catalog-filter__clear .btn {
  width: 100%;
}

/* -- Promo page (discount-items): hero banner, title, colour-titled groups of rows -- */
.discounts__hero {
  margin-bottom: 16px;
}
.discounts__hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
}
.discounts__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.discounts__subtitle {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
}
.discounts__group + .discounts__group {
  margin-top: 24px;
}
/* The admin picks the colour per group ("$:red" etc.): the chip fill and the line under it. White text only
   on fills where it reaches 4.5:1 - or 3:1 for this Play 700 20px title (--blue, spec 2). */
.discounts__group-title {
  --group: var(--blue);
  --group-ink: var(--on-dark);
  display: flex;
  margin: 0 0 12px;
  border-bottom: 3px solid var(--group);
}
.discounts__group-title-text {
  padding: 8px 14px 6px;
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--group);
  color: var(--group-ink);
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.discounts__group-title--red {
  --group: var(--red); /* white 4.99 */
}
.discounts__group-title--pink {
  --group: #DB0A5B; /* white 4.99 */
}
.discounts__group-title--orange {
  --group: var(--orange);
  --group-ink: var(--text); /* 7.06; white would be 2.6 */
}
.discounts__group-title--purple {
  --group: #BF55EC;
  --group-ink: var(--text); /* 5.02 */
}
.discounts__group-title--blue {
  --group: var(--blue); /* white 3.27, large text */
}
.discounts__group-title--green {
  --group: var(--green); /* white 4.94 */
}

/* -- select2 4.0.3 skin (every <select> of the storefront; spec 7.2). app.js passes data-select-class
      (select, select--tags, select--max-height) to the selection and the dropdown, adds .showed to an open
      dropdown after 100 ms and puts niceScroll on the results list. -- */
.select2-container {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.4;
}
.select2.select2-container {
  width: 100% !important; /* select2 writes the select's width inline at init (style="width: 340px") */
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--input);
  transition: border-color .15s ease;
}
.select2-container--default .select2-selection--single {
  height: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 12px;
  color: var(--text);
  line-height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 1px;
  width: 40px;
  height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { /* chevron instead of the triangle */
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -6px 0 0 -4px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: var(--muted);
  transform: rotate(45deg);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  margin-top: -2px;
  border-width: 0 2px 2px 0;
  border-color: var(--text);
  transform: rotate(-135deg);
}
.select2-container--default .select2-selection:hover,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--muted);
}
.select2-container--default .select2-selection:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 2px;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-radius: var(--r-m); /* the dropdown floats 4px off the field, so no square corners */
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--line-soft);
  color: var(--muted);
}
/* multiple */
.select2-container--default .select2-selection--multiple {
  min-height: 44px;
  padding: 0 6px 5px;
  cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 5px 5px 0 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--line-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 6px;
  color: var(--muted);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--text);
}
.select2-container .select2-search--inline .select2-search__field {
  min-height: 29px;
  margin-top: 5px;
  color: var(--text);
}
/* dropdown */
.select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow-hover);
}
.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.select2-container--open .select2-dropdown--below {
  margin-top: 4px;
}
.select2-container--open .select2-dropdown--above {
  margin-top: -4px;
}
.select2-search--dropdown {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--input);
  color: var(--text);
  font-size: 16px; /* 16px: iOS does not zoom in on focus */
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--blue-ink);
  outline: 0;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: 264px;
}
.select2-container--default .select2-dropdown--below.select--max-height .select2-results > .select2-results__options {
  max-height: none; /* the sort list: all six orders at once, as today */
}
.select2-results__option {
  min-height: 44px;
  padding: 11px 12px;
  color: var(--text);
  line-height: 1.4;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
  color: var(--muted);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--line-soft);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--blue-ink);
  color: var(--on-dark);
}
.select2-results__message {
  color: var(--muted);
}
/* niceScroll on the results: rail and cursor are positioned inline; the cursor colour comes from app.js
   (#ff793a = --orange). Here only the track under it. */
.select2-dropdown .nicescroll-rails-vr {
  border-radius: 4px;
  background: var(--line-soft);
}

/* -- fs.picker skin: input[type=radio] and .checkbox-picker (spec 7.2). DOM: .picker.picker-checkbox|picker-radio
      (.checked .disabled .focus) > .picker-handle > .picker-flag, then label.picker-label > input.picker-element.
      The whole row is the target: 44px tall on phones, 36px from 900px. -- */
.picker {
  position: relative;
  margin: 0;
  overflow: visible;
}
.picker .picker-handle {
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--soft);
  border-radius: var(--r-xs);
  background: var(--card);
  transition: background-color .15s ease, border-color .15s ease;
}
.picker.picker-radio .picker-handle {
  border-radius: 50%;
}
.picker .picker-flag {
  display: none;
}
.picker.checked .picker-handle {
  border-color: var(--orange);
  background: var(--orange);
}
.picker.picker-checkbox.checked .picker-flag { /* check mark: --text on --orange 7.06 */
  display: block;
  position: absolute;
  top: 1px;
  left: 5px;
  width: 6px;
  height: 11px;
  border: solid var(--text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.picker.picker-radio.checked .picker-flag {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
}
.picker.disabled .picker-handle {
  border-color: var(--line);
  background: var(--line-soft);
}
.picker.disabled.picker-checkbox.checked .picker-flag {
  border-color: var(--muted);
}
.picker.disabled.picker-radio.checked .picker-flag {
  background: var(--muted);
}
.picker.focus .picker-handle {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--blue-ink);
}
.picker.focus:has(.picker-element:not(:focus-visible)) .picker-handle { /* enhancement: no ring after a mouse click */
  box-shadow: none;
}
.picker .picker-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0 10px 30px;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
@media (hover: hover) {
  .picker:not(.disabled):not(.checked):hover .picker-handle {
    border-color: var(--text);
  }
}

/* -- ion.rangeSlider 2.2.0 skin (spec 7.2): line, bar, handles. The handle box is 44x44 (the touch target) with a
      20px dot in it; ion keeps the handle centres 22px inside the slider, so the line is inset by 22px too. -- */
.irs {
  height: 44px;
}
.irs-line {
  top: 20px;
  height: 4px;
  margin: 0 22px;
  border-radius: 2px;
  background: var(--line);
}
.irs-line:focus-visible { /* ion's core sets outline: none !important; arrow keys move the slider */
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue-ink);
}
.irs-bar,
.irs-bar-edge {
  top: 20px;
  height: 4px;
  background: var(--orange);
}
.irs-bar {
  border-radius: 2px;
}
.irs-bar-edge {
  left: 22px;
  width: 22px;
}
.irs-slider {
  top: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  touch-action: none;
}
.irs-slider::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.irs-slider.state_hover::before,
.irs-slider:hover::before {
  transform: scale(1.15);
}
.irs-min,
.irs-max,
.irs-from,
.irs-to,
.irs-single {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.3;
}
.irs-from,
.irs-to,
.irs-single {
  background: var(--text);
  color: var(--on-dark);
}
.irs-grid-pol {
  background: var(--line);
}
.irs-grid-text {
  color: var(--muted);
}

@media (min-width: 600px) {
  .catalog-sort__select {
    flex: 0 1 330px;
  }
  .catalog-sort__select label {
    position: static;
    flex: none;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--muted);
    font-size: 14px;
  }
  .catalog-rows .catalog-item {
    grid-template-columns: 158px minmax(0, 1fr) auto;
    grid-template-areas: "img name price";
    align-items: center;
    gap: 16px;
  }
  .catalog-rows .catalog-item__img {
    width: 158px;
    height: 74px;
  }
  .catalog-rows .catalog-item__price {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .catalog-page__text {
    padding: 32px 36px;
  }
}

@media (min-width: 900px) {
  .catalog-page {
    padding: 24px 0 48px;
  }
  .catalog-page__title {
    font-size: 28px;
  }
  .catalog-page__filters-btn,
  .catalog-filters-backdrop,
  .catalog-filters__head,
  .catalog-filters__foot {
    display: none;
  }
  .catalog-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
  .catalog-filters { /* the sticky left column; its own scroll when taller than the window */
    position: sticky;
    top: 20px;
    z-index: auto;
    display: block;
    width: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: var(--r-l);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .catalog-filters__body {
    padding: 0 16px 16px;
    overflow: visible;
  }
  .select2-results__option {
    min-height: 36px;
    padding: 8px 12px;
  }
  .picker .picker-handle {
    top: 8px;
  }
  .picker .picker-label {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (min-width: 1200px) {
  /* Pages without the filter column (search, tag, promo): two columns of rows */
  .catalog-page--plain .catalog-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==== P4b content - news-list, news, discount, garanty, corporate, about, support, support-answer,
 *      partials/menu, partials/support-footer (spec 5 F1, 6.14a, 6.16, 7.1, 7.2) ====================
 * Mobile-first. news-list, discount, garanty: title, then the side menu (partials/menu: below 900px one
 * <details>, from 900px a sticky left column 260px) and the page column. news (item): article card and the
 * «Другие новости» card (a right column from 900px). corporate: one card.
 * about and support / support-answer are on layouts.layout now: their first block is a dark band with the
 * content of the old bars. Swiper and AOS on /about, the support list, accordion, tabs and form are driven
 * by app.js (spec 7.1); the selectors below style the JS-built markup too (spec 7.2: news items, support items,
 * file items, .support__ok) and never depend on server-only elements.
 * Also here, shared by later pages: .alert (spec 6.16), .table-scroll, the rich-text rules for admin HTML.
 */

/* -- Shared: alerts (spec 6.16). Hidden with .alert--hide; app.js and the inline scripts also show and hide
      them with jQuery .show() / .hide() / .slideDown() (inline display) -- */
.alert {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: var(--r-m);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.alert--danger {
  background: #FDECEC;
  color: #A3161C; /* 6.8:1 */
}
.alert--success {
  background: #E3F4F0;
  color: #015B4D; /* 7.1:1 */
}
.alert--hide {
  display: none;
}

/* -- Shared: a table scrolls sideways inside its own box, never the page (spec 4) -- */
.table-scroll {
  position: relative; /* also clips absolutely positioned content (.sr-only cell text), which would widen the page */
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  /* scroll shadows: a soft edge shows on the side that has more columns (phone: date, price, status);
     the white covers move with the content ("local") and hide each shadow at its end */
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
  background-color: var(--card);
}
.table-scroll > table {
  width: 100%;
}

/* -- Shared: rich text from the admin (news text, support answers): keep it inside its card -- */
.news-item__inner,
.support__answer,
.support__answer-item {
  overflow-wrap: anywhere;
}
.news-item__inner p,
.support__answer p,
.support__answer-item p {
  margin: 0 0 12px;
}
.news-item__inner ul,
.news-item__inner ol,
.support__answer ul,
.support__answer ol,
.support__answer-item ul,
.support__answer-item ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.news-item__inner h2,
.news-item__inner h3,
.news-item__inner h4,
.support__answer h2,
.support__answer h3,
.support__answer h4,
.support__answer-item h2,
.support__answer-item h3,
.support__answer-item h4 {
  margin: 20px 0 8px;
  font-size: 18px;
}
.news-item__inner img,
.support__answer img,
.support__answer-item img {
  height: auto; /* beats a height attribute; the max-width:100% of the base caps the width */
  border-radius: var(--r-m);
}
.news-item__inner iframe,
.news-item__inner video,
.support__answer iframe,
.support__answer-item iframe {
  max-width: 100%;
}
.news-item__inner table,
.support__answer table,
.support__answer-item table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.news-item__inner pre,
.support__answer pre,
.support__answer-item pre {
  max-width: 100%;
  overflow-x: auto;
}

/* -- Page frame -- */
.content-page {
  padding: 16px 0 32px;
}
.content-page__title {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 22px;
  overflow-wrap: anywhere;
}
.content-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.content-page__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.content-page__main > .load-more {
  margin-top: 4px;
}
.content-card {
  min-width: 0;
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  overflow-wrap: break-word;
}
.content-card > :first-child {
  margin-top: 0;
}
.content-card > :last-child {
  margin-bottom: 0;
}
.content-card p {
  max-width: 820px;
  margin: 0 0 12px;
}
.content-card--narrow {
  max-width: 960px;
}
.content-card__title {
  margin: 0 0 14px;
  font-size: 20px;
}
.content-card .ul-orange {
  margin-bottom: 0;
  font-size: 15px;
}

/* -- Side menu (partials/menu, spec 6.14a): <details> below 900px, the sticky column from 900px -- */
.aside-nav {
  min-width: 0;
}
.aside-nav__desk {
  display: none;
}
.aside-nav__list {
  margin: 0;
  padding: 6px;
  list-style: none;
}
.aside-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .15s ease;
}
.aside-nav__link:hover {
  background: var(--input);
  color: var(--text);
}
.aside-nav__link--active {
  background: var(--input);
}
.aside-nav__link--active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #FF4148, #FF793A); /* --brand-grad, vertical */
}
.aside-nav__drop {
  border-radius: var(--r-l);
  background: var(--card);
}
.aside-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.aside-nav__summary::-webkit-details-marker {
  display: none;
}
.aside-nav__summary::after { /* chevron */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .2s ease, margin .2s ease;
}
.aside-nav__drop[open] .aside-nav__summary {
  border-bottom: 1px solid var(--line-soft);
}
.aside-nav__drop[open] .aside-nav__summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

/* -- News list (ul.news: app.js appends li.news__item, spec 7.2; .load-more is its sibling) -- */
.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news__item {
  display: flex;
  min-width: 0;
}
.news__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  transition: box-shadow .15s ease;
}
.news__link:hover {
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.news__image-wrapper {
  background: var(--line-soft);
}
.news__image { /* the /pics/ image keeps its own aspect */
  display: block;
  width: 100%;
  height: auto;
}
.news__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}
.news__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.news__content {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.news__date {
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* -- News item: article card (image on top, text max 820px) and «Другие новости» -- */
.news-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.news-item {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card);
}
.news-item__image-wrapper {
  background: var(--line-soft);
}
.news-item__image {
  display: block;
  width: 100%;
  height: auto;
}
.news-item__inner {
  max-width: calc(820px + 2 * 36px);
  padding: 18px 16px;
}
.news-item__inner > :last-child {
  margin-bottom: 0;
}
.news-games {
  margin-top: 20px;
}
.news-games__title {
  margin: 0 0 8px;
  font-size: 17px;
}
.news-games .news-games__list { /* beats the rich-text list indent of .news-item__inner */
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  list-style: none;
}
.news-games__item + .news-games__item {
  border-top: 1px solid var(--line-soft);
}
.news-games__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--text);
}
.news-games__link:hover {
  background: var(--input);
  color: var(--text);
}
.news-games__item-title {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.news-games__item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.news-games__item-price {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
}
.news-games__item-curr {
  position: static;
  font-size: 13px;
  vertical-align: baseline;
}
.news-games__item-notavail {
  color: var(--muted);
  font-size: 13px;
}
.news-item__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
}
.news-item__share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.news-item__share-list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-item__share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: border-color .15s ease;
}
.news-item__share-link:hover {
  border-color: var(--muted);
}
.news-item__share-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.news-sidebar {
  min-width: 0;
  padding: 18px 16px 8px;
  border-radius: var(--r-l);
  background: var(--card);
}
.news-sidebar__heading {
  margin: 0 0 4px;
  font-size: 18px;
}
.news-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-sidebar__item + .news-sidebar__item {
  border-top: 1px solid var(--line-soft);
}
.news-sidebar__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  color: var(--text);
}
.news-sidebar__link:hover {
  color: var(--blue-ink);
}
.news-sidebar__date {
  flex: none;
  width: 50px;
  padding: 6px 0;
  border-radius: var(--r-m);
  background: var(--input);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.1;
  text-align: center;
}
.news-sidebar__date-day {
  font-size: 20px;
  font-weight: 700;
}
.news-sidebar__date-month {
  color: var(--muted);
  font-size: 12px;
}
.news-sidebar__title {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* -- Discount (/discount): the calculator - app.js hooks #discount-form, .discount-check(--loading),
      .discount-check__table tr[data-sum][data-discount](.active), #discount-alert (spec 7.1) -- */
.discount-check {
  position: relative;
}
.discount-check__spinner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-m);
  background: rgba(255,255,255,.8);
}
.discount-check--loading .discount-check__spinner {
  display: flex;
}
.discount-check .form-group {
  margin: 0 0 16px;
}
.discount-check .form-group__get-link-inputs {
  display: flex;
  gap: 8px;
}
.discount-check .form-group__get-link-inputs .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
.discount-check .form-group__get-link-inputs .btn {
  flex: none;
}
.discount-check__table th,
.discount-check__table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}
.discount-check__table th {
  background: var(--input);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.discount-check__table th:last-child,
.discount-check__table td:last-child {
  text-align: right;
}
.discount-check__table td:last-child {
  font-family: var(--font-ui);
  font-weight: 700;
}
.discount-check__table tr:last-child td {
  border-bottom: 0;
}
.discount-check__table tr.active td { /* the visitor's level: white on --green 4.94:1 */
  border-bottom-color: var(--green);
  background: var(--green);
  color: var(--on-dark);
  font-weight: 700;
}

/* -- Garanty (/warranty): one card per item; the white g-*.svg icons sit on a 48px --blue square -- */
.icons-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icons-list__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.icons-list__item-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--blue);
}
.icons-list__item-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.icons-list__item-text {
  min-width: 0;
  overflow-wrap: break-word;
}
.icons-list__title {
  margin: 2px 0 6px;
  font-size: 17px;
}
.icons-list__item-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

/* -- About (/about). .about is the app.js root: AOS starts its items 100px off to the side, so the root
      clips sideways overflow (no page scroll at 320px); clip, where supported, keeps it from being a
      scroll container -- */
.about {
  overflow-x: hidden;
  overflow-x: clip;
}
.about__title {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 20px;
}
.about-intro {
  padding: 28px 0;
  background: var(--dark-1);
  color: var(--on-dark);
}
.about-intro__text {
  max-width: 820px;
  margin: 0 auto 20px;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.about-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--dark-2);
  text-align: center;
}
.about-help__text {
  color: var(--on-dark-muted);
  font-size: 14px;
  line-height: 1.5;
}
.about-help__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.about-help__email,
.about-help__vk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-m);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: background-color .15s ease, border-color .15s ease;
}
.about-help__email {
  border: 1px solid rgba(255,255,255,.3);
  font-size: 15px;
}
.about-help__email:hover {
  border-color: var(--on-dark);
  color: var(--on-dark);
}
.about-help__vk {
  background: var(--blue-ink);
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.about-help__vk:hover {
  background: var(--blue-ink-hover);
  color: var(--on-dark);
}

.about-advantages {
  padding: 28px 0 12px;
}
.about-advantages__title {
  text-align: center;
}
.about-advantages__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-advantages__item {
  min-width: 0;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  font-size: 14px;
  line-height: 1.55;
}
.about-advantages__item::before { /* the gradient icon of each item (decorative) */
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  background: center / contain no-repeat;
}
.about-advantages__item--activation::before { background-image: url(/img/about/advantages/activation.svg); }
.about-advantages__item--keys::before { background-image: url(/img/about/advantages/keys.svg); }
.about-advantages__item--bonuses::before { background-image: url(/img/about/advantages/bonuses.svg); }
.about-advantages__item--games::before { background-image: url(/img/about/advantages/games.svg); }
.about-advantages__item--price::before { background-image: url(/img/about/advantages/price.svg); }
.about-advantages__item--novelties::before { background-image: url(/img/about/advantages/novelties.svg); }
.about-advantages__item--events::before { background-image: url(/img/about/advantages/events.svg); }
.about-advantages__item--discounts::before { background-image: url(/img/about/advantages/discounts.svg); }
.about-advantages__item-title {
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.about-advantages__item-text {
  overflow-wrap: break-word;
}

/* Catalog / adaptive design / comments: one card each, text and picture (two columns from 900px) */
.about-catalog,
.about-adaptive,
.about-comments {
  padding: 6px 0;
}
.about__section-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.about__section-text-col,
.about__section-media {
  min-width: 0;
}
.about-adaptive .about__section-text-col { /* phones: text first, as in the other two cards */
  order: -1;
}
.about__section-text {
  max-width: 520px;
  color: var(--muted);
}
.about__section-media img {
  display: block;
  width: 100%;
  height: auto;
}
.about-catalog__btn-wrapper {
  margin-top: 20px;
}
.about-adaptive__add-text {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
}

.about-cheap {
  margin-top: 22px;
  padding: 36px 0;
  background: var(--dark-0);
  color: var(--on-dark);
  text-align: center;
}
.about-cheap__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--card);
}
.about-cheap__title {
  margin: 0 0 10px;
  font-size: 20px;
}
.about-cheap__text {
  max-width: 640px;
  margin: 0 auto;
  color: var(--on-dark-muted);
}

.about-payments {
  padding: 28px 0 22px;
}
.about-payments__title {
  text-align: center;
}
.about-payments__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 48px;
  margin: 0;
  padding: 24px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  list-style: none;
}
.about-payments__item {
  display: flex;
  min-width: 0;
}
.about-payments__logo {
  width: auto;
  max-width: 100%;
}
.about-payments__logo--sbp {
  height: 56px;
}
.about-payments__logo--mir {
  height: 40px;
}

/* «Вы защищены!»: up to 950px (app.js checks $(window).width(), which leaves out the scrollbar) a Swiper on
   .about .swiper-container with bullets in .about-safe__pagination; wider, app.js destroys it and strips the
   inline styles of the wrapper and slides. The grid keys on that state - a running Swiper always writes a
   style attribute on .swiper-wrapper - not on a width, so the two never fight at the edge, and after a live
   resize or rotation across 950px (destroy() leaves the swiper-container-* classes behind) the grid returns. */
.about-safe {
  padding: 6px 0 36px;
}
.about-safe__title {
  text-align: center;
}
.about-safe__inner {
  padding: 22px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.about-safe__logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.about-safe__logo-img {
  display: block;
  width: 110px;
  height: auto;
}
.about-safe .swiper-container {
  width: 100%;
  min-width: 0;
}
.about-safe__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-safe .about-safe__list:not([style]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 32px;
}
.about-safe__item {
  min-width: 0;
  overflow-wrap: break-word;
}
.about-safe__item-title {
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.about-safe__text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.about-safe__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.about-safe__pagination:empty {
  display: none;
}
/* Swiper's own bullet look (vendor.css) replaced - as the home banner's (P2) */
.about-safe__pagination .swiper-pagination-bullet {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 5px;
  background: var(--soft); /* 4.5:1 on the white card */
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.about-safe__pagination .swiper-pagination-bullet::before { /* a taller hit area */
  content: "";
  position: absolute;
  top: -17px;
  right: -5px;
  bottom: -17px;
  left: -5px;
}
.about-safe__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--orange);
}

/* -- Support (/support, /support/{slug}, /support/{id}) -- */
.support-hero {
  padding: 28px 0 26px;
  background: var(--dark-1);
  color: var(--on-dark);
  text-align: center;
}
.support-hero__title {
  color: var(--on-dark-muted);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
}
.support-hero__subtitle {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

/* Category tabs: links that app.js turns into ajax tabs (.support-tabs__link--active); the active one gets
   the brand underline, its icon circle the brand fill (#SVGID_1_, defined in the first icon) */
.support-tabs {
  padding-top: 16px;
}
.support-tabs__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* three categories in one row at every width */
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.support-tabs__item {
  display: flex;
  min-width: 0;
}
.support-tabs__link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column; /* below 900px the icon sits above the label: a third of 360px is ~104px */
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 6px 12px;
  text-align: center;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: box-shadow .15s ease, color .15s ease;
}
.support-tabs__link:hover,
.support-tabs__link--active {
  color: var(--text);
}
.support-tabs__link:hover {
  box-shadow: var(--shadow-hover);
}
.support-tabs__link--active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-grad);
}
.support-tabs__link svg {
  flex: none;
  width: 36px;
  height: 36px;
}
.support-tabs__link svg path {
  transition: fill .15s ease;
}
.support-tabs__link--active svg circle,
.support-tabs__link:hover svg circle {
  fill: url(#SVGID_1_);
}
.support-tabs__link--active svg path,
.support-tabs__link:hover svg path {
  fill: var(--on-dark);
}
.support-tabs__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Questions: one card; app.js rebuilds .support__list on a tab switch (spec 7.2) and slides
   .support__answer-wrapper open (the JS items carry an inline display:none, the server ones rely on this) */
.support {
  padding: 24px 0 32px;
}
.support__title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 22px;
  overflow-wrap: anywhere;
}
.support__list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card);
  list-style: none;
}
.support__item + .support__item {
  border-top: 1px solid var(--line-soft);
}
.support__accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
}
.support__accordion:hover,
.support__item--active .support__accordion {
  color: var(--blue-ink);
}
.support__item-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.support__accordion-arrow {
  display: flex;
  flex: none;
}
.support__accordion-arrow svg {
  width: 30px;
  height: 30px;
  fill: var(--muted);
}
/* the icon holds two chevrons: down when closed, up when open */
.support__accordion svg path {
  transition: opacity .2s ease;
}
.support__accordion svg path + path,
.support__item--active .support__accordion svg path {
  opacity: 0;
}
.support__item--active .support__accordion svg path + path {
  opacity: 1;
}
.support__answer-wrapper {
  display: none;
  padding: 0 16px 16px;
}
.support__answer {
  max-width: 820px;
  line-height: 1.6;
}
.support__answer > :last-child {
  margin-bottom: 0;
}
.support__answer-more {
  margin-top: 4px;
}
.support__answer-more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.support__item-footer,
.support__answer-useful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.support__item-footer:not(:has(*)),
.support__answer-useful:not(:has(*)) { /* enhancement: «Нет» removes the row's children, drop the empty rule line */
  display: none;
}
.support__item-useful {
  color: var(--muted);
  font-size: 14px;
}
.support__item-useful-btns {
  display: flex;
  gap: 8px;
}
.support__item-useful-btn {
  min-width: 64px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.support__item-useful-btn--green {
  color: var(--green);
}
.support__item-useful-btn--red {
  color: var(--red);
}
.support__item-useful-btn--green:hover {
  border-color: var(--green);
  background: var(--green);
  color: var(--on-dark);
}
.support__item-useful-btn--red:hover {
  border-color: var(--red);
  background: var(--red);
  color: var(--on-dark);
}
.support__ok {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}

/* Answer page (.support--answer) */
.support__back {
  margin-bottom: 4px;
}
.support__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.support__back-link::before { /* chevron */
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
.support__singleton {
  padding: 20px 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.support__answer-item {
  max-width: 820px;
  line-height: 1.6;
}
.support__answer-item > :last-child {
  margin-bottom: 0;
}

/* Contact form (partials/support-footer): a dark band; «Напишите нам» slides .support-form open (app.js);
   #message in the URL opens it from the inline script */
.support-footer {
  padding: 36px 0;
  background: var(--dark-1);
  color: var(--on-dark);
  text-align: center;
}
.support-footer__wrapper {
  max-width: 820px;
  margin: 0 auto;
}
.support-footer__title {
  margin: 0;
  color: var(--on-dark-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.support-footer__subtitle {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.support-footer__btn-wrapper {
  margin-top: 20px;
}
.support-footer__btn { /* «Напишите нам» and «Отправить»: white Play 700 19px on --blue */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--blue);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.support-footer__btn:hover {
  background: var(--blue-ink);
}
.support-form {
  position: relative;
  display: none;
  margin-top: 20px;
  padding: 18px 16px;
  border-radius: var(--r-l);
  background: var(--card);
  color: var(--text);
  text-align: left;
}
.support-form__loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(255,255,255,.8);
}
.support-form--loading .support-form__loader {
  display: flex;
}
.support-form__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.support-form__main + .support-form__main {
  margin-top: 12px;
}
.support-form__main-left,
.support-form__main-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.support-form__main-left--empty {
  display: none;
}
.support-form .support-form__textarea { /* beats textarea.form-control (min-height 120px) */
  flex: 1 1 auto;
  min-height: 140px;
}
.support-form .alert {
  margin: 0;
}
.support-form .support-footer__btn {
  width: 100%;
}
.support-form__alert {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* reCAPTCHA draws a fixed 304x78 box: below 368px it would leave the card, so it is scaled down there */
@media (max-width: 367.98px) {
  .support-form #recaptcha-container {
    height: 66px;
    transform: scale(.84);
    transform-origin: 0 0;
  }
}

/* File upload (app.js FileUpload, spec 7.1/7.2): drop zone (--dragover), loader (--loading), the file list
   (--show) of li.file-upload__files-item - a click removes the file, matched by its innerText, so no
   text-transform here. Errors go to the .alert--file above it. */
.file-upload {
  position: relative;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-m);
  background: var(--input);
  transition: border-color .15s ease, background-color .15s ease;
}
.file-upload--dragover {
  border-color: var(--blue-ink);
  background: #EAF4FB;
}
.file-upload__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.file-upload__loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(255,255,255,.8);
}
.file-upload--loading .file-upload__loader {
  display: flex;
}
.file-upload__file-wrapper {
  position: relative;
  flex: none;
}
.file-upload__file { /* visually hidden, still focusable; the label is the button */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-upload__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease;
}
.file-upload__label:hover {
  border-color: var(--muted);
}
.file-upload__file:focus-visible + .file-upload__label {
  outline: 2px solid var(--blue-ink);
  outline-offset: 2px;
}
.file-upload__text {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.file-upload__files-list {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.file-upload__files-list--show {
  display: flex;
}
.file-upload__files-item {
  position: relative;
  max-width: 100%;
  min-height: 44px;
  padding: 11px 12px 11px 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.file-upload__files-item::before { /* delete mark */
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url(/img/svg/support/delete.svg) center / contain no-repeat;
}
.file-upload__files-item:hover {
  border-color: var(--red);
  color: var(--red);
}
.support-footer__success {
  display: none;
  margin-top: 20px;
}
.support-footer__success-img-wrapper img {
  width: 64px;
  height: 64px;
}
.support-footer__success-text {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
}
.support-footer__success-subtext {
  margin-top: 4px;
  color: var(--on-dark-muted);
}

@media (min-width: 600px) {
  .about-advantages__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-help {
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 24px;
    text-align: left;
  }
  .about-payments__logo--sbp {
    height: 72px;
  }
  .about-safe .about-safe__list:not([style]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .support-form__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .support-form__main + .support-form__main {
    margin-top: 16px;
  }
  .support-form__main-left--empty {
    display: block;
  }
  .support-form .support-footer__btn {
    width: auto;
  }
  .support-form__button-wrapper {
    display: flex;
    justify-content: flex-end;
  }
}

@media (min-width: 900px) {
  .content-page {
    padding: 24px 0 48px;
  }
  .content-page__title {
    margin-bottom: 20px;
    font-size: 28px;
  }
  .content-page__layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
  .aside-nav { /* the sticky left column */
    position: sticky;
    top: 20px;
  }
  .aside-nav__desk {
    display: block;
    border-radius: var(--r-l);
    background: var(--card);
  }
  .aside-nav__drop {
    display: none;
  }
  .content-card {
    padding: 32px 36px;
  }
  .content-card__title {
    font-size: 24px;
  }
  .news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-page {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }
  .news-item__inner {
    padding: 32px 36px;
  }
  .news-item__footer {
    padding: 12px 36px;
  }
  .news-sidebar {
    position: sticky;
    top: 20px;
    padding: 22px 20px 10px;
  }
  .about__title {
    margin-bottom: 20px;
    font-size: 24px;
  }
  .about-intro {
    padding: 48px 0;
  }
  .about-intro__text {
    margin-bottom: 28px;
    font-size: 26px;
  }
  .about-advantages {
    padding-top: 40px;
  }
  .about__section-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding: 40px 44px;
  }
  .about-adaptive .about__section-text-col {
    order: 0;
  }
  .about-cheap {
    padding: 48px 0;
  }
  .about-cheap__title,
  .support-hero__subtitle,
  .support-footer__subtitle {
    font-size: 30px;
  }
  .about-safe__inner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 16px 40px;
    padding: 40px 44px;
  }
  .about-safe__logo-wrapper {
    margin-bottom: 0;
  }
  .about-safe__logo-img {
    width: 161px;
  }
  .about-safe__pagination {
    grid-column: 2;
    margin-top: 0;
  }
  .support-hero {
    padding: 40px 0 36px;
  }
  .support-tabs {
    padding-top: 24px;
  }
  .support-tabs__list {
    gap: 12px;
  }
  .support-tabs__link {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    min-height: 76px;
    padding: 14px 18px;
    font-size: 17px;
  }
  .support-tabs__link--active::after {
    right: 18px;
    left: 18px;
  }
  .support-tabs__link svg {
    width: 44px;
    height: 44px;
  }
  .support {
    padding: 32px 0 48px;
  }
  .support__title {
    margin-bottom: 16px;
    font-size: 28px;
  }
  .support__accordion {
    padding: 16px 24px;
  }
  .support__answer-wrapper {
    padding: 0 24px 20px;
  }
  .support__singleton {
    padding: 32px 36px;
  }
  .support-footer {
    padding: 48px 0;
  }
  .support-form {
    padding: 28px 32px;
  }
}

@media (min-width: 1100px) {
  .icons-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .icons-list__item:last-child:nth-child(odd) { /* 11 items: the last one spans the row, no hole */
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .about-advantages__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==== P5a cart - pay.blade.php on frame F3 (spec 6.14a, 6.15, 6.16; hooks 7.1 «Cart page»; jquery.scrollbar 7.2) ====
 * No app.js on this page: its inline script (jQuery 2.2 + jquery.scrollbar) does all the work - see the comment at the
 * top of pay.blade.php. The script writes inline styles these rules leave alone (no !important here): display on the
 * method list (.show() / .hide()), the error alerts, .payment-method-hint and its [data-selected_payment_uid] blocks;
 * border-color on .payment-method-selector, #email_field and #email_confirm_field (validation, #ee5551 / #eaeaea).
 * jquery.scrollbar wraps .pseudo-selector-list in div.scroll-wrapper that copies its classes (both carry
 * .pseudo-selector-list) and loads after site.css; it is skipped on macOS outside WebKit - the list works both ways.
 * Layout: one column; from 900px two - items, e-mail, terms, captcha | the summary card (payment method, its hint,
 * promo code, totals, the button) with the cumulative-discount card under it. An item row is two lines (picture + name;
 * stepper + price) until its card is 640px wide (container query; without them the two-line row stays), then one.
 */
.cart-page__title {
  margin: 0 0 16px;
  font-size: 22px;
}
.cart-page__form,
.cart-page__main,
.cart-page__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.cart-card {
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-l);
  background: var(--card);
}
.cart-card .title,
.cart-summary__label {
  display: block;
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* -- Items: .pay-product-main > .pay-product-main--row > direct children (the inline script walks parent()) -- */
.cart-items {
  container: cart-items / inline-size;
}
.pay-product-main--row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.pay-product-main--row:first-child {
  padding-top: 0;
  border-top: 0;
}
.pay-product-main--row:last-child {
  padding-bottom: 0;
}
.pay-product-main--row > .catalog-item__img {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.pay-product-main--row > .catalog-item__name {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* row 2 below 640px: the stepper on the left, the price on the right (both span the row) */
.pay-product-main--row > .digit-field {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
}
.pay-product-main--row > .catalog-item__price {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
}
.pay-product-main--row > .product__delete--cart {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  margin: -10px -10px 0 0; /* the 44px box around a 14px cross: keep the cross on the name's first line */
}

.pay-product-main--row > .catalog-item__img a {
  display: block;
}
.pay-product-main--row > .catalog-item__img img {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  border-radius: var(--r-s);
  background: var(--line-soft);
}
.pay-product-main--row > .catalog-item__name > a {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.pay-product-main--row > .catalog-item__name > a:hover {
  color: var(--blue-ink);
}
.cart-item__addon { /* an add-on (Product::isAddon): the notice-card colours */
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: #FFF4E0;
  color: #7A4100;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  vertical-align: 2px;
  white-space: nowrap;
}
.pay-product-main--row .catalog-item__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  color: var(--soft);
  font-size: 13px;
}
.pay-product-main--row .catalog-item__activation img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cart-item__note {
  margin-top: 6px;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.45;
}
.cart-item__note small {
  font-size: inherit;
}
/* the server prints it and renderPage() re-creates it inside .catalog-item__name */
.pay-product-main--row .catalog-item__error {
  display: table; /* own line, as wide as its text */
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: #FDECEC;
  color: #A3161C; /* 6.8:1 */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Quantity stepper: real buttons, 44px; .inactive (set by the inline script at 1 and at max) only greys them out -
   the script still clamps the value, as before */
.pay-product-main--row > .digit-field {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  overflow: hidden;
}
.pay-product-main .digit-field-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.pay-product-main .digit-field-button:hover {
  background: var(--line-soft);
}
.pay-product-main .digit-field-button.inactive {
  background: var(--card);
  color: #B3B3B3;
  cursor: default;
}
.pay-product-main .digit-field-button:focus-visible,
.pay-product-main .quant_value:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: -2px; /* inside: the stepper clips its overflow for the rounded corners */
}
.pay-product-main .quant_value {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.pay-product-main--row > .catalog-item__price {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

/* Delete: a div with role=button (the inline script needs svg -> parent div), 44px; the svg fills the box with
   padding, so a click anywhere in it lands on the svg, where the handler is bound. Keyboard: site.js (P5a cart). */
.pay-product-main--row > .product__delete--cart {
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pay-product-main--row > .product__delete--cart:hover {
  background: #FDECEC;
  color: var(--red);
}
.pay-product-main--row > .product__delete--cart svg {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 15px; /* border-box: a 14px cross */
}
.pay-product-main--row > .product__delete--cart svg path {
  fill: currentColor; /* beats the fill attribute */
}

@container cart-items (min-width: 640px) {
  .pay-product-main--row {
    grid-template-columns: 152px minmax(0, 1fr) auto minmax(96px, auto) 44px;
    gap: 16px;
  }
  .pay-product-main--row > .catalog-item__img,
  .pay-product-main--row > .catalog-item__name {
    align-self: center;
  }
  .pay-product-main--row > .digit-field {
    grid-column: 3;
    grid-row: 1;
  }
  .pay-product-main--row > .catalog-item__price {
    grid-column: 4;
    grid-row: 1;
  }
  .pay-product-main--row > .product__delete--cart {
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
}

/* -- E-mail, terms, captcha (#tools--main: also the scroll target after «Далее» / «Изменить») -- */
.tools--main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.tools--main .form-control + .form-control {
  margin-top: 10px;
}
.email-container .form-control::placeholder {
  font-size: 14px; /* «Повторите Email (только ручной ввод)» fits from 375px */
}
.tools--main .alert {
  margin: 10px 0 0;
}
.email-container p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.email-container__change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--blue-ink);
  font-weight: 600;
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}
.email-container__change:hover {
  color: var(--blue-ink-hover);
}
.terms-checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}
.terms-checkbox .custom-checkbox__checkbox {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--blue-ink);
  cursor: pointer;
}
.terms-checkbox .custom-checkbox__content {
  min-width: 0;
}
.terms-checkbox .custom-checkbox__custom {
  display: none; /* the native checkbox is shown */
}
.terms-checkbox .custom-checkbox__label {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.terms-checkbox .alert {
  grid-column: 1 / -1;
}
.recaptcha-container {
  max-width: 100%;
  overflow: hidden; /* the 304px widget, scaled below 368px, must not widen the page */
}
#recaptcha-container {
  min-height: 78px;
}
@media (max-width: 367.98px) {
  #recaptcha-container {
    transform: scale(.84);
    transform-origin: 0 0;
  }
}

/* -- Summary card -- */
.cart-summary > * + * {
  margin-top: 16px;
}
.cart-summary .alert {
  margin: 0;
}
.cart-summary > .cart-summary__error {
  margin-top: 16px;
}

/* Payment method: the selector (a button showing the method the server confirmed) opens the list in the flow below it;
   the inline script toggles the list's display and .opened, and closes it on any click. .selected follows the
   selector through site.js (P5a cart). */
.payment-method-container #payment-method_field_error {
  margin-top: 8px;
}
.payment-method-selector {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 7px 44px 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--input);
  color: var(--text);
  text-align: left;
  transition: border-color .15s ease;
}
.payment-method-selector:hover,
.payment-method-selector.opened {
  border-color: var(--blue-ink);
}
.payment-method-selector::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.payment-method-selector.opened::after {
  transform: translateY(-25%) rotate(-135deg);
}
.payment-method-container .payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.payment-method-container .payment-method::before { /* the method's logo, by its css_class (as style.css had them) */
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: no-repeat center / contain;
}
.payment-method-container .payment-method.BLN::before { background-image: url(/img/paysystems/icon-beeline.svg); }
.payment-method-container .payment-method.cards::before { background-image: url(/img/paysystems/icon-bankcard.svg); }
.payment-method-container .payment-method.qiwi::before { background-image: url(/img/paysystems/icon-qiwi.svg); }
.payment-method-container .payment-method.sbp::before { background-image: url(/img/paysystems/icon-sbp.svg); }
.payment-method-container .payment-method.tbank::before { background-image: url(/img/paysystems/icon-tbank.svg); }
.payment-method-container .payment-method.yoomoney::before { background-image: url(/img/paysystems/icon-yoomoney.svg); }
.payment-method-container .payment-method.ATM::before { background-image: url(/img/paysystems/icon-terminal.svg); }
.payment-method-container .payment-method.MGY::before { background-image: url(/img/paysystems/icon-megafon.svg); }
.payment-method-container .payment-method.MTS::before { background-image: url(/img/paysystems/icon-mts.svg); }
.payment-method-container .payment-method.TLY::before { background-image: url(/img/paysystems/icon-tele2.svg); }
.payment-method-container .payment-method.PCR::before { background-image: url(/img/paysystems/icon-yandex.svg); }
.payment-method-container .payment-method.wmr::before { background-image: url(/img/paysystems/icon-webmoney.svg); }
.payment-method-container .payment-method.moneta::before { background-image: url(/img/paysystems/icon-moneta.svg); }
.payment-method-container .payment-method.alipay::before { background-image: url(/img/paysystems/icon-alipay.svg); }
.payment-method-container .payment-method.unionpay::before { background-image: url(/img/paysystems/icon-union.svg); }
.payment-method-container .payment-method.wechat::before { background-image: url(/img/paysystems/icon-wechat.svg); }
.payment-method-container .payment-method.sberpay::before { background-image: url(/img/paysystems/icon-sberpay.svg); }

/* The list (and its .scroll-wrapper twin): hidden until the script shows it; no padding or border of its own, so the
   plugin's resets do not matter; from 6 methods on it scrolls inside (plugin bar, or native without the plugin). */
.payment-method-container .pseudo-selector-list {
  display: none;
  max-height: 360px;
  margin-top: 8px;
  overflow-y: auto;
}
.payment-method-container .pseudo-selector-list .payment-method {
  width: 100%;
  min-height: 56px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}
.payment-method-container .pseudo-selector-list .payment-method + .payment-method {
  margin-top: 6px;
}
.payment-method-container .pseudo-selector-list .payment-method:hover {
  border-color: var(--muted);
  background: var(--input);
}
.payment-method-container .pseudo-selector-list .payment-method.selected { /* 2px --blue-ink without a shift */
  border-color: var(--blue-ink);
  box-shadow: inset 0 0 0 1px var(--blue-ink);
}
.payment-method-container .pseudo-selector-list .payment-method:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: -5px; /* inside: the plugin's wrapper clips overflow */
}
.payment-method-container .scrollbar-outer > .scroll-element {
  background: transparent;
}
.payment-method-container .scrollbar-outer > .scroll-element .scroll-element_track {
  background: var(--line-soft);
}
.payment-method-container .scrollbar-outer > .scroll-element .scroll-bar {
  background: #C2C2C2;
}

.payment-method-hint {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--input);
  color: var(--muted); /* 5.6:1 on --input */
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cart-summary > .payment-method-hint {
  margin-top: 12px;
}
.payment-method-hint > [data-selected_payment_uid] { /* inline-block from the server, block after .show() */
  width: 100%;
  vertical-align: top;
}
.payment-method-hint p {
  margin: 0;
}
.payment-method-hint p + p {
  margin-top: 6px;
}
.payment-method-hint b {
  color: var(--text);
}
.payment-method-hint .payment-method-hint__marks {
  margin: 12px 0 0 -6px;
}
.payment-method-hint .payment-method-hint__gap {
  margin-top: 12px;
}

/* Promo code: .promocode-form holds the field (or the applied code) and its button */
.promocode-container,
.total-container {
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.promocode-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.promocode-form .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.promocode-form .btn {
  flex: none;
}
.promocode-value {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px dashed var(--green);
  border-radius: var(--r-m);
  background: #E3F4F0;
  color: #015B4D; /* 7.1:1 */
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.promocode-hint {
  margin: 0 0 10px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.5;
}
.promocode-error-hint {
  display: none; /* as before: nothing shows it */
}
.promocode-container .alert {
  margin-top: 8px;
}

/* Totals: «Итого» large, the fee and the saving as notes */
.service-charge {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}
.total-container .title {
  margin: 0 0 6px;
  font-size: 24px;
}
.total-container .title span {
  margin-left: .3em;
}
.total-container p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty; /* no lone «₽» on the last line */
}
.pay-button-countainer .btn,
.next-button-countainer .btn {
  width: 100%;
}
.pay-button-countainer .alert,
.next-button-countainer .alert {
  margin-bottom: 12px;
}

/* -- Cumulative discount (no promo code applied) -- */
.discount-container .title {
  margin-bottom: 10px;
  font-size: 18px;
}
/* Collapsed by default: «Ваша скидка N%» and a <details> with the text, thresholds and hint (no script for the toggle) */
.discount-summary {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
}
.discount-details__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blue-ink);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.discount-details__toggle::-webkit-details-marker {
  display: none;
}
.discount-details__toggle::after { /* chevron */
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease, margin .2s ease;
}
.discount-details[open] .discount-details__toggle {
  margin-bottom: 8px;
}
.discount-details[open] .discount-details__toggle::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.discount-text {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.discount-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
}
.discount-row:last-child {
  border-bottom: 0;
}
.discount-hint {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--input);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* -- Empty cart (spec 6.14a): a card with today's text and a link to the catalog -- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}
.cart-empty__icon {
  color: var(--orange);
}
.cart-empty__text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
}

/* -- #cart_form--model: the loader the inline script shows while /ajax/cart-info answers (removes .fade, inline
      display). Not a real dialog: a light veil over the page with the spinner card in the middle. -- */
.cart_form--model {
  background: rgba(243,243,243,.7);
}
.cart_form--model .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
}
.cart_form--model .modal-content {
  padding: 20px 28px;
}
.cart_form--model .modal__spinner {
  padding: 0;
}

@media (max-width: 359.98px) {
  .pay-product-main--row {
    grid-template-columns: 80px minmax(0, 1fr) auto;
  }
  .promocode-form {
    flex-wrap: wrap;
  }
  .promocode-form .btn {
    flex: 1 1 100%;
  }
}
@media (min-width: 900px) {
  .cart-page__title {
    margin-bottom: 20px;
    font-size: 28px;
  }
  .cart-page__form {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 24px;
  }
  .cart-page__main,
  .cart-page__side {
    gap: 16px;
  }
  .cart-card {
    padding: 24px;
  }
  .cart-empty {
    padding: 48px 24px;
  }
}
@media (min-width: 1200px) {
  .cart-page__form {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}


/* ==== P5b simple pages - bonus, agreement, privacy, personaldata, giveaway, coins, products, instructions/*,
 *      errors/404 on frame F3 (spec 5 F3, 6.14a, 6.16; hooks 7.1 «Discount / bonus pages») ====================
 * Every page: .simple-page (max 960px, centred) > h1.simple-page__title on --bg > the frame's white .simple-card.
 * Documents and instructions add .simple-doc: today's HTML kept verbatim inside .simple-doc__body (legal texts with
 * their <br>s, h2/h3 and lists; instruction steps, screenshots and links) and styled here, scoped to .simple-doc.
 * Instructions (.simple-doc--instruction): .instruction-intro (service icon floated left, its text a flow-root beside
 * it; some intros have no icon), ol.num-list steps, .simple-doc__actions («Мои покупки»), a .notice-card.
 * Bonus (.bonus-page): app.js validates #bonus-form (.checkbox-picker -> fs.picker, skin in P4a), puts .form--loading
 * on the form while it posts (the .form__spinner overlay) and shows #bonus-alert (.alert--danger / --success) with
 * slideUp / slideDown, i.e. an inline display over .alert--hide.
 * Products: the HTML sitemap - up to 500 links in 1 / 2 / 3 columns, then Laravel's ul.pagination as chips.
 * 404 (.not-found): no counters on the page (partials.head skips gtag for it).
 */
.simple-page {
  max-width: 960px;
  margin: 0 auto;
}
.simple-page__title {
  margin: 0 0 16px;
  font-size: 22px;
  overflow-wrap: anywhere;
}
.simple-page__after {
  margin: 8px 0 0;
  font-size: 14px;
}
.simple-page__after a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* -- Document text (verbatim HTML from the templates) -- */
.simple-doc {
  overflow-wrap: anywhere; /* long URLs in the texts (mojang, roblox, msstore) wrap instead of widening the card */
}
.simple-doc__body > :first-child {
  margin-top: 0;
}
/* «English version» / «Русская версия»: the other-language copy of a legal document, top right of its body */
.simple-doc__lang {
  text-align: right;
}
.simple-doc__body + .simple-doc__body { /* csgo: two ways to activate */
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.simple-doc p {
  margin: 0 0 12px;
}
.simple-doc h2 {
  margin: 24px 0 10px;
  font-size: 18px;
}
.simple-doc h3 {
  margin: 20px 0 8px;
  font-size: 16px;
}
.simple-doc ul:not([class]),
.simple-doc ol:not([class]) {
  margin: 0 0 12px;
  padding-left: 22px;
}
.simple-doc ul:not([class]) > li,
.simple-doc ol:not([class]) > li {
  margin-bottom: 6px;
}
.simple-doc hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}
.simple-doc__body a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.simple-doc__img {
  display: block;
  margin: 12px auto;
  border-radius: var(--r-m);
}
.simple-doc__subtitle {
  margin: 20px 0 12px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.simple-doc__strong {
  font-weight: 700;
}
.simple-doc__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.simple-doc__notice {
  margin-top: 20px;
}

/* Numbered steps: an --orange disc with the number (--text on --orange 7.0:1), today's numbering */
.simple-doc .num-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.simple-doc .num-list > li {
  position: relative;
  min-height: 28px;
  margin-bottom: 18px;
  padding-left: 46px;
  counter-increment: step;
}
.simple-doc .num-list > li::before {
  content: counter(step);
  position: absolute;
  top: -4px;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}
.simple-doc .num-list > li > :last-child {
  margin-bottom: 0;
}
.simple-doc .num-list p {
  margin: 0 0 8px;
}

/* Instruction intro: the service icon (60px PNGs) left of the text; intros without an icon are plain text */
.instruction-intro {
  display: flow-root;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.instruction-intro__icon {
  float: left;
  width: 40px;
  margin: 2px 12px 8px 0;
}
.instruction-intro__icon img {
  display: block;
  width: 100%;
  height: auto;
}
.instruction-intro__text {
  display: flow-root; /* a block beside the float, not under it */
}
.instruction-intro p {
  margin: 0 0 8px;
}
.instruction-intro > :last-child,
.instruction-intro__text > :last-child {
  margin-bottom: 0;
}
.instruction-intro svg {
  vertical-align: -3px;
}

/* -- Bonus program (/bonus) -- */
.bonus-page .alert {
  max-width: 450px;
  margin: 0 auto 16px;
  text-align: center;
}
.bonus-page__subtitle {
  margin: 8px 0 16px;
  font-size: 20px;
  text-align: center;
}
.bonus-page__form {
  position: relative;
  max-width: 450px;
  margin: 0 auto;
}
.bonus-page .form-group {
  margin: 0;
}
.bonus-page .form__spinner { /* shown while app.js posts the form (.form--loading) */
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-m);
  background: rgba(255,255,255,.8);
}
.bonus-page .form--loading .form__spinner {
  display: flex;
}
.bonus-page .simple-doc__actions {
  margin-top: 16px;
}
.bonus-page__form .btn {
  min-width: 200px;
}
.bonus-page .picker .picker-label {
  flex-wrap: wrap;
}
.bonus-page .picker-label .form-error { /* the validator appends its message inside the label: a line of its own */
  flex-basis: 100%;
  margin-top: 0;
}
.bonus-page .picker:has(.has-error) .picker-handle { /* enhancement */
  border-color: var(--red);
}

/* -- Products (/products): the HTML sitemap -- */
.sitemap {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  column-gap: 32px;
}
.sitemap > li {
  break-inside: avoid;
}
.simple-doc__body .sitemap a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  text-decoration: none;
}
.simple-doc__body .sitemap a:hover {
  text-decoration: underline;
}
/* Pagination: the shared .pagination chips (section 4); the document links' underline stays off them */
.simple-doc__body .pagination a {
  text-decoration: none;
}

/* -- 404 -- */
.not-found {
  padding-top: 32px;
  padding-bottom: 36px;
  text-align: center;
}
.not-found__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
}
.not-found__face {
  width: 72px;
  height: 72px;
}
.not-found__title {
  margin: 20px 0 8px;
  font-size: 20px;
}
.not-found__text {
  margin: 0 0 24px;
  color: var(--muted);
}
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (min-width: 600px) {
  .instruction-intro__icon {
    width: 48px;
    margin-right: 16px;
  }
  .sitemap {
    columns: 2;
  }
}

@media (min-width: 900px) {
  .simple-page__title {
    margin-bottom: 20px;
    font-size: 28px;
  }
  .simple-doc h2 {
    font-size: 20px;
  }
  .simple-doc h3 {
    font-size: 17px;
  }
  .simple-page__after a {
    min-height: 0;
  }
  .sitemap {
    columns: 3;
  }
  .simple-doc__body .sitemap a {
    display: block;
    min-height: 0;
    padding: 3px 0;
  }
  .not-found {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .not-found__code {
    font-size: 110px;
  }
  .not-found__face {
    width: 100px;
    height: 100px;
  }
  .not-found__title {
    font-size: 24px;
  }
}


/* ==== P6 account - purchase-access, purchase-register, purchase-restore, purchase-list, purchase, purchase-settings,
 *      partner, partner-withdraw, partials/purchase-menu (frame F1); order-agent (frame F2)
 *      (spec 5, 6.14, 6.14a, 6.16; hooks 7.1 «Account») =================================================================
 * Account pages reuse the P4b page frame: main.content-page.account-page > .wrap > nav.breadcrumbs, h1.content-page__title,
 * .content-page__layout > partials/purchase-menu (P4b's .aside-nav: the same <ul> twice - .aside-nav__desk, the sticky left
 * column from 900px; <details> «Разделы кабинета» below) + .content-page__main with .content-card cards. Tables sit in
 * .table-scroll (P4b); pagination is the shared .pagination (section 4). Reused skins: .btn, .form-control, .alert,
 * fs.picker (the review radios), .notice-card, .catalog-rows (the order-agent product row), the spinner, .recaptcha-container.
 * The pages' inline jQuery 2.2 scripts (kept byte for byte) show and hide with .show() / .hide(), i.e. an inline display, so
 * every hidden-at-load state here is a class they override: .bonus-keys, .discount-panel, .blues-tab-content--support,
 * .purchase-review-form--hidden, .alert--hide. They also write an inline border-color on fields (#ee5551 / #eaeaea) - left alone.
 * site.js (accountState) mirrors the classes they toggle into aria-pressed / aria-expanded / aria-current.
 * order-agent keeps app.js's order module: .pay__item siblings inside .pay (--active), .order-form__confirm (.order-form__loader
 * shows its spinner), .catalog--order (.catalog--loader shows its spinner while the mini-cart deletes).
 */

/* -- Frame bits: breadcrumbs on --bg (13px --muted, spec 6.16); a page without the menu (purchase with $raw_access) -- */
.account-page .breadcrumbs {
  margin: -10px 0 2px;
}
.account-page .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
}
.account-page .breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.account-page .breadcrumbs__item + .breadcrumbs__item::before { /* separator: a drawn chevron */
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--muted);
  border-right: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.account-page .breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px; /* touch target on phones */
  color: var(--muted); /* 5.41:1 on --bg */
  overflow-wrap: anywhere;
}
.account-page .breadcrumbs__link:hover,
.account-page .breadcrumbs__item--active .breadcrumbs__link {
  color: var(--text);
}
.account-page .content-page__main > .alert {
  margin: 0; /* the column's gap spaces it */
}

/* -- Account menu (partials/purchase-menu): the greeting, the partner group, «Выход» on top of P4b's .aside-nav -- */
.account-page .aside-nav__user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.account-page .aside-nav__user-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-page .avatar__container {
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--line-soft);
}
.account-page .avatar__container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-page .avatar__container--menu {
  width: 44px;
  height: 44px;
}
.account-page .aside-nav__group {
  padding: 12px 14px 4px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.account-page .aside-nav__list--sub {
  padding: 0 0 0 12px;
}
.account-page .aside-nav__link.link_exit {
  color: var(--muted);
  font-weight: 400;
}

/* -- Tables (orders, partner sales and withdrawals, order details), each inside .table-scroll -- */
.account-table th,
.account-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}
.account-table thead th {
  background: var(--input);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-table tbody tr:last-child > * {
  border-bottom: 0;
}
.purchases-table .name {
  min-width: 220px;
  overflow-wrap: anywhere;
}
.purchases-table td.name {
  padding-top: 2px;
  padding-bottom: 2px;
}
.purchases-table .name a { /* one link per item of the order: each a 44px row */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.purchases-table .quantity,
.purchases-table .date,
.partner-table td + td {
  white-space: nowrap;
}
.purchases-table .price {
  font-family: var(--font-ui);
  font-weight: 700;
  white-space: nowrap;
}
.purchases-table .status {
  width: 1%;
  text-align: center;
}
.partner-table td:first-child {
  min-width: 200px;
  overflow-wrap: anywhere;
}
.account-page .icon-ok,
.account-page .icon-ok-back {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.account-page .icon-ok {
  color: var(--green); /* 4.94:1 on white */
}
.account-page .icon-ok-back {
  color: var(--muted);
}
.account-page .icon-text {
  gap: 8px;
  font-weight: 600;
}
.account-table--details th {
  width: 35%;
  min-width: 140px;
  color: var(--muted);
  font-weight: 600;
}
.account-table--details td {
  overflow-wrap: anywhere;
}
@media (max-width: 599.98px) { /* phones: the label above its value */
  .account-table--details tr,
  .account-table--details th,
  .account-table--details td {
    display: block;
    width: auto;
  }
  .account-table--details th {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .account-table--details td {
    padding-top: 4px;
  }
}
.purchases-container > .pagination {
  margin-top: 16px;
}

/* -- Forms: login, registration, password reminder, settings, withdrawal -- */
.account-form-card {
  width: 100%;
  max-width: 560px;
}
.account-form {
  max-width: 420px;
}
.account-form .form-group {
  margin: 0 0 12px;
}
.account-page .account-form__email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.account-page .change-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}
.account-page .account-form__restore {
  margin: 2px 0 0;
  text-align: right;
}
.account-page .restore {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.account-page .account-form__lead,
.account-page .account-form__current {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.account-page .account-form__current {
  margin: 0;
  color: var(--muted);
}
.account-form__captcha {
  margin: 0 0 12px;
}
#register-form #email_confirm::placeholder {
  font-size: 14px; /* «Повторите Email (только ручной ввод)» fits from 375px (as in the cart); settings has a short placeholder */
}
.account-form__submit .btn {
  width: 100%;
}
.account-form__alt {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.account-form__alt-title {
  margin: 0 0 12px;
  font-size: 18px;
}
.account-form__alt .btn {
  width: 100%;
}
.account-checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  margin: 4px 0 16px;
}
.account-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--blue-ink);
  cursor: pointer;
}
.account-checkbox label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.account-checkbox label a,
.order-checkbox label a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-page .account-register-done__text {
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
/* The settings scripts add .alert--danger to an alert that may still carry .alert--success (after a saved change): danger wins */
.account-page .alert--success.alert--danger {
  background: #FDECEC;
  color: #A3161C;
}

/* -- Order page (purchase): back link, keys card, details, cumulative discount, review / support tabs -- */
.account-page .purchase-back {
  margin: 0;
}
.account-page .purchase-back a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--blue-ink);
  font-weight: 600;
}
.account-page .purchase-back a:hover {
  color: var(--blue-ink-hover);
}

/* Tabs: .title-tab (keys / bonus) and .blues-tab (review / support) - Play tabs with the --brand-grad underline; the inline
   script moves .active. Without a bonus the single .title-tab is an h2. */
.account-page .title-tabs,
.account-page .blues-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.account-page .title-tab,
.account-page .blues-tab {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.account-page button.title-tab:hover,
.account-page .blues-tab:hover,
.account-page .title-tab.active,
.account-page .blues-tab.active {
  color: var(--text);
}
.account-page .title-tab.active::after,
.account-page .blues-tab.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-grad);
}
.account-page .blues-tab.active {
  cursor: default;
}

/* Keys (verbatim markup: .purchase-key > .key-name, .key-notice, .key-value(.photo) with a link, a readonly field or the
   pre-order countdown, a.purchase-button «Показать ключ» / «Инструкция по использованию») */
.purchase-keys-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  font-size: 15px;
}
.purchase-keys-container.bonus-keys {
  display: none; /* the inline script shows it for .title-tab.bonus */
}
.purchase-keys-container--incomplete { /* the model's text while the order is put together (#keytimer inside) */
  display: block;
  padding: 14px 16px;
  border-radius: var(--r-l);
  background: #FFF4E0;
  color: #7A4100; /* 7.45:1 */
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.purchase-key {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--input);
  overflow-wrap: anywhere;
}
.purchase-key > * + * {
  margin-top: 10px;
}
.purchase-key .key-name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.purchase-key .key-notice {
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}
.purchase-key .key-value p {
  margin: 0 0 6px;
}
.purchase-key .key-value p:last-child {
  margin-bottom: 0;
}
.purchase-key .key-value.photo > p:first-child { /* the Steam gift warning */
  color: var(--red);
  font-weight: 700;
}
.purchase-key .key-value a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.purchase-keys-container input[type="text"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
}
.purchase-keys-container input[type="text"]:focus {
  outline: 2px solid var(--blue-ink);
  outline-offset: 0;
}
.purchase-button { /* secondary look; «Показать ключ» (?viewed_hash=) is the primary one */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .15s ease, border-color .15s ease;
}
.purchase-button:hover {
  border-color: var(--muted);
  color: var(--text);
}
.purchase-button[href*="viewed_hash="] {
  border-color: var(--blue-ink);
  background: var(--blue-ink);
  color: var(--on-dark); /* 4.69:1 */
}
.purchase-button[href*="viewed_hash="]:hover {
  border-color: var(--blue-ink-hover);
  background: var(--blue-ink-hover);
  color: var(--on-dark);
}

/* Cumulative discount: an h2 > button toggle (its inline onclick swaps .expandable / .expanded and shows .discount-panel) */
.purchase-discount__heading {
  margin: 0;
  font-size: 18px;
}
.purchase-discount .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.purchase-discount .title::after { /* chevron */
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: -5px 6px 0 0;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .2s ease, margin .2s ease;
}
.purchase-discount .title.expanded::after {
  margin-top: 5px;
  transform: rotate(-135deg);
}
.purchase-discount .discount-panel {
  display: none; /* .show() by the toggle */
  max-width: 560px;
  margin-top: 12px;
}
.purchase-discount .discount-hint {
  margin: 0 0 12px;
}
.purchase-discount .discount-hint b {
  color: var(--text);
}

/* Review and support (.blues-tab-content by index; the second one shown by the inline script) */
.account-page .blues-tab-content--support {
  display: none;
}
#purchase-review-view > p,
.purchase-review-form > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.account-page .new-red {
  color: var(--red); /* 4.99:1 on white */
  font-weight: 600;
}
.account-page .new-green {
  color: var(--green);
  font-weight: 600;
}
.purchase-review-rating {
  margin: 0 0 16px;
}
.purchase-rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.purchase-rating > b,
.purchase-rating > legend,
.purchase-review > label,
.account-page .purchase-review-title {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
}
.purchase-rating-radio {
  display: inline-block;
  margin-right: 28px;
  vertical-align: top;
}
.purchase-rating-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
}
.purchase-rating-radio.good .purchase-rating-label {
  color: var(--green);
}
.purchase-rating-radio.bad .purchase-rating-label {
  color: var(--red);
}
#purchase-review-view .picker { /* fs.picker also wraps this copy of the label (label[for] finds both): no radio here */
  pointer-events: none;
}
#purchase-review-view .picker-handle {
  display: none;
}
#purchase-review-view .picker .picker-label {
  min-height: 0;
  padding: 4px 0;
}
.purchase-review-description {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--input);
  overflow-wrap: anywhere;
}
.purchase-review-answer-block {
  margin-top: 16px;
}
.purchase-review-answer-block .purchase-review-description {
  background: #E8F3FB; /* the seller's answer, tinted --blue */
}
.purchase-review-form--hidden {
  display: none; /* #purchase-review-edit shows it */
}
.account-page .purchase-review-note {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.purchase-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.purchase-support-messages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}
.purchase-support-message {
  position: relative;
  min-height: 60px;
  padding: 12px 14px 12px 62px;
  border-radius: var(--r-m);
  background: var(--input);
  overflow-wrap: anywhere;
}
.purchase-support-message::before { /* the avatar: /img/comments/user.png or admin.jpg by the message's class */
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line-soft) no-repeat center / cover;
}
.purchase-support-message.user::before {
  background-image: url(/img/comments/user.png);
}
.purchase-support-message.admin {
  margin-left: 16px;
  background: #E8F3FB;
}
.purchase-support-message.admin::before {
  background-image: url(/img/comments/admin.jpg);
}
.purchase-support-name,
.purchase-support-date {
  display: inline-block;
  vertical-align: middle;
}
.purchase-support-name {
  margin-right: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}
.purchase-support-message.admin .purchase-support-name {
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--red);
  color: var(--on-dark); /* 4.99:1 */
  font-size: 12px;
  line-height: 20px;
}
.purchase-support-date {
  color: var(--muted);
  font-size: 13px;
}
.purchase-support-date span {
  font-style: italic;
}
.purchase-support-content {
  margin-top: 6px;
}
.purchase-support-screenshot img {
  width: 200px;
  margin-top: 10px;
  border-radius: var(--r-s);
}
@media (hover: hover) {
  .purchase-support-screenshot img:hover { /* as before: the screenshot grows to the message width on hover */
    width: 100%;
  }
}
.purchase-support-form > p {
  margin: 0;
}
.translatable-textarea textarea {
  min-height: 120px;
}

/* File field (support message, avatar): the transparent file input covers the whole box, so a click or a dropped file
   anywhere in it reaches the input (as before); the visible part is the label text */
.account-page .upload-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin: 10px 0 16px;
  padding: 6px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-m);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
}
.account-page .upload-container:hover {
  border-color: var(--muted);
}
.account-page .upload-container:focus-within {
  outline: 2px solid var(--blue-ink);
  outline-offset: 2px;
}
.account-page .upload-container .fileinput {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  color: var(--blue-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.account-page .upload-container input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.account-page #upload-filename {
  flex-basis: 100%;
  color: var(--text);
  overflow-wrap: anywhere;
}
.account-page #upload-filename:empty {
  display: none;
}

/* -- Settings: profile card (avatar + nickname), then the password and e-mail cards -- */
.settings-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.settings-profile__avatar .account-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
}
.settings-profile__avatar .alert {
  align-self: stretch;
}
.account-page .avatar__container--settings {
  width: 150px;
  height: 150px;
}
.account-page .upload-container--avatar {
  justify-content: center;
  margin: 8px 0 0;
  padding: 0 8px;
  border-color: transparent;
}
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

/* -- Partner pages -- */
.partner-summary {
  display: grid;
  gap: 8px;
}
.account-page .partner-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}
.partner-summary__row .partner-link {
  flex: 1 1 260px;
  width: auto;
  min-width: 0;
}
.partner-balance {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.account-page .partner-summary__row--period {
  margin: 16px 0;
}
.partner-stat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.partner-stat-form__field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}
.partner-stat-form__field .form-control {
  width: auto;
  min-width: 150px;
}
.withdraw-form__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-weight: 700;
}
.withdraw-form__amount {
  display: flex;
  align-items: center;
  gap: 12px;
}
.withdraw-form__amount .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
}
#wmz_amount {
  color: var(--muted);
  white-space: nowrap;
}

/* -- Order page of one product (order-agent, frame F2; spec 6.14a: the methods as cards like the cart's) -- */
.order-form > form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.catalog--order {
  position: relative;
}
.catalog--order .catalog__spinner { /* app.js: .catalog--loader while the mini-cart deletes */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-l);
  background: rgba(255,255,255,.8);
}
.catalog--order.catalog--loader .catalog__spinner {
  display: flex;
}
.catalog--order .catalog-item__price {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.order-form__notice p {
  margin: 0;
}
.order-form__column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.order-form .pay {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}
.order-form .pay__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease;
}
.order-form .pay__item:hover {
  border-color: var(--muted);
  background: var(--input);
  color: var(--text);
}
.order-form .pay__item--active,
.order-form .pay__item--active:hover { /* 2px --blue-ink without a shift */
  border-color: var(--blue-ink);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--blue-ink);
}
.order-form .pay__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 40px;
}
.order-form .pay__icon-img {
  max-width: 70px;
  max-height: 40px;
  object-fit: contain;
}
.order-form .pay__name {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.order-form .pay__commis-wrapper {
  display: block;
  margin-top: 2px;
  color: var(--muted); /* 5.6:1 on --input too */
  font-size: 13px;
  font-weight: 400;
}
.order-form__confirm {
  position: relative;
}
.order-form__spinner { /* app.js: .order-form__loader while /ajax/order runs */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-m);
  background: rgba(255,255,255,.8);
}
.order-form__loader .order-form__spinner {
  display: flex;
}
.order-form__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
}
.order-form__summary-span {
  display: block;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
}
.order-form__summary-right {
  font-size: 28px;
  line-height: 1.2;
  white-space: nowrap;
}
.order-form__confirm .alert {
  margin: 0 0 12px;
}
.order-form__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.order-form__inputs .form-group {
  margin: 0;
}
.order-form__inputs-right .btn {
  width: 100%;
}
.order-checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  margin-top: 16px;
}
.order-checkbox .custom-checkbox__checkbox {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--blue-ink);
  cursor: pointer;
}
.order-checkbox .custom-checkbox__content {
  min-width: 0;
}
.order-checkbox .custom-checkbox__custom {
  display: none; /* the native checkbox is shown */
}
.order-checkbox .custom-checkbox__label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.order-checkbox .order-checkbox__label--warning { /* was inline: bold, tomato (2.9:1) -> --red 4.99:1 */
  color: var(--red);
  font-weight: 700;
}
.order-checkbox .help-block.form-error { /* the validator appends it to .custom-checkbox */
  grid-column: 1 / -1;
}
.order-form__sep {
  height: 0;
  margin: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

@media (min-width: 600px) {
  .settings-profile {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
  }
  .purchase-key {
    padding: 16px 18px;
  }
  .purchase-support-message.admin {
    margin-left: 48px;
  }
}
@media (min-width: 900px) {
  .account-page .breadcrumbs {
    margin-top: -14px;
  }
  .account-page .breadcrumbs__link {
    min-height: 32px;
  }
  .content-page__layout--solo {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-page .title-tab,
  .account-page .blues-tab {
    font-size: 18px;
  }
  .order-form__column {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
  }
}
@media (min-width: 1100px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==== 9. Reduced motion (keep last) =====================================================
 * !important is needed here: it must beat component rules and the inline transition-duration
 * that Swiper sets on .swiper-wrapper. Durations go to .01ms rather than none so transitionend
 * still fires for Bootstrap and Swiper.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}