/* ==========================================================================
   Базовые размеры контейнера.
   Полноценная вёрстка (grid/flex, отступы, цвета, типографика) — later.
   ========================================================================== */

:root {
  --container-width: 1920px;
  --font-main: 'Manrope', sans-serif;
  --color-bg-dark: #111111;
  --color-text: #ffffff;
  --color-text-muted: #888888;
  --color-accent: #c0ff00;
  --color-card-bg: #202020;
  /* Тільки для CTA "Подобрать компьютер" у попапі "Зв'язатися з нами"
     (связаться.jpg) — пікселем зматчено з макета, ніде більше в проєкті
     фіолетовий не використовується. */
  --color-accent-purple: #6a06b8;
}

body {
  font-family: var(--font-main);
  /* .site-header сам position:sticky, поэтому не участвует в выборе scroll
     anchor — реальный якорь браузер берёт из контента внутри <main>, который
     сдвигается, когда схлопывается topbar (max-height). Без этого браузер
     сам подкручивает scrollY, компенсируя сдвиг, а это ловится JS-детектором
     направления скролла как "прокрутили вверх" и снова разворачивает topbar —
     дребезг. Отключаем scroll anchoring на всём документе, а не только на
     .site-header, т.к. якорем может стать любой видимый элемент ниже шапки. */
  overflow-anchor: none;
}
/* Секции full-bleed (никакого max-width на самой <section>) — фон должен
   тянуться на всю ширину окна, а не обрезаться на --container-width.
   Ширина контента внутри каждой секции уже ограничена её собственной
   __inner/__list/__grid/__slider обёрткой (max-width:1505px; margin-inline:auto),
   тем же приёмом, что и .topbar/.topbar__inner — так что сужать саму
   секцию больше не нужно. */
main > section {
  width: 100%;
}

/* ==========================================================================
   Шапка: topbar + header-main
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  /* Топбар схлопывается через max-height — это меняет высоту документа над
     вьюпортом. Без этого браузер (Chrome/scroll anchoring) сам подкручивает
     scrollY, чтобы компенсировать сдвиг контента, а эта подкрутка засчитывается
     JS-обработчиком скролла как смена направления — is-scrolled начинает
     дёргаться туда-обратно по кругу. */
  overflow-anchor: none;
}

.topbar,
.header-main {
  width: 100%;
}

.topbar {
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.25s ease, padding-block 0.25s ease, border-width 0.25s ease, opacity 0.2s ease;
}

.site-header.is-scrolled .topbar {
  max-height: 0;
  padding-block: 0;
  border-bottom-width: 0;
  opacity: 0;
}

.topbar__inner,
.header-main__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.topbar {
  padding: 8px 20px 1px 20px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.topbar__inner {
  justify-content: space-between;
}

.lang-switcher {
  position: relative;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 20px;
}

.lang-switcher__btn:hover,
.lang-switcher.is-open .lang-switcher__btn {
  color: #DFFF7F;
}

/* lang-swich.svg has its gray (#888888) baked into its stroke, like every
   other icon in images/icon/ — it's used as a mask (not an <img>) so the
   hover/open color above can recolor it to an exact hex, since a plain
   <img> can't be recolored via CSS `color`/currentColor. */
.lang-switcher__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url('/images/icon/lang-swich.svg');
  mask-image: url('/images/icon/lang-swich.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.lang-switcher__value{
  font-size: 14px;
}
.mobile-nav__header .lang-switcher__value{
  font-size: 16px;
}

/* position:fixed (not absolute) — .topbar has overflow:hidden + max-height
   for its scroll-collapse animation, which would clip an absolutely
   positioned dropdown taller than the topbar row. Escaping to the viewport
   sidesteps that; JS sets top/left from the button's real position — list
   top sits 34px below the button's own top edge (total, not an added gap
   below the button). */
.lang-switcher__list {
  position: fixed;
  z-index: 1100;
  display: none;
  min-width: 140px;
  background: #202020;
  border-radius: 10px;
  padding: 20px 20px;
  border: 1px solid #FFFFFF05;
  backdrop-filter: blur(30px);
  box-shadow: 0px 0px 20px 0px #0000004D;
  gap:15px;
}

.lang-switcher.is-open .lang-switcher__list {
  display: flex;
  flex-direction: column;
}

.lang-switcher__item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

/* Виділення підсвіченого/вибраного пункту — те саме, що й у .select__item
   (.sort-select переиспользует його ж), лише перенесене сюди напряму: фон
   під пунктом, не тільки колір тексту. */
.lang-switcher__item:hover,
.lang-switcher__item.is-selected {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-accent);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* viber-icon.svg визуально мельче/тоньше остальных иконок в этом ряду при
   одинаковом 20x20 — компенсируем лёгким увеличением, а не переразмером
   самого файла (остальные иконки его размер не трогают). */
.social-links a[aria-label="Viber"] img {
  transform: scale(1.2);
}

.header-main {
  padding: 12px;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.header-main__inner {
  gap: 50px;
}

.main-nav {
  margin-right: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 16px;
  font-weight: 500;
}
/* Пряма дитина (> ul > li > a), а не просто "ul a" — інакше цей селектор,
   маючи вищу специфічність (клас + 2 типи) за .main-nav__dropdown-col--
   primary a (клас + 1 тип), перебиває шрифт і вкладених
   .main-nav__dropdown-col ul-списків теж. Через це --primary a (20px/600)
   мовчки не спрацьовувало на "Периферії" — збіглося лише випадково з
   .main-nav__dropdown-col--secondary a (теж 16px/400), тож помітно не було. */
.main-nav > ul > li > a{
  font-size: 16px;
  font-weight: 400;
}

/* Мега-меню "Каталог" (дроп шапка.png). .main-nav__item--dropdown сам НЕ
   получает position:relative — .main-nav__dropdown должен позиционироваться
   не от <li> (та по высоте равна просто строке текста, а не всей шапке), а
   от .site-header (position:sticky, тому вже є positioned-предком) — тоді
   top:100% ставить панель точно під усією шапкою (topbar+header-main, якою
   б не була її поточна висота після схлопування topbar), а width:100% від
   ширини .site-header (full-bleed). Ланцюжок предків між ними
   (.header-main__inner, .main-nav, ul, li) навмисно залишений без
   position, щоб не перебити цей контекст.

   Через це панель фізично відстоїть від <li> на кілька пікселів "мертвої
   зони" (нижче тексту посилання, вище фактичного верху панелі) — курсор,
   що перетинає цю зону при русі вниз, на мить не наводиться ні на <li>, ні
   на панель. Пробував рятувати це чистим CSS (:hover + transition-delay на
   visibility, щоб панель лишалась hit-testable під час згасання) — на
   практиці ненадійно: залежить від того, встигає курсор доїхати за час
   затримки чи ні, тож поводилось то як миттєве зникнення, то як
   мерехтіння (коли анімувався ще й transform:translateY — рух самого
   хіт-боксу під час відкриття давав петлю відкрито/закрито). Тому показ/
   приховування тепер керується явним класом is-open (JS, нижче в
   <script>) з grace-period через setTimeout на mouseleave — надійно
   незалежно від швидкості курсора, той самий підхід, що й timeout-и в
   інших місцях проєкту. :focus-within лишається як чистий CSS fallback
   для клавіатурної навігації. */
/* Пункт с меню (<li>) вытягиваем вниз до самого низа шапки, где начинается
   .main-nav__dropdown: 15px = header-main padding-block (12px) + зазор от
   строки текста до низа .header-main__inner (замерено на 1920px: li 24px
   заканчивается на 68px, панель начинается на 83px). padding-bottom
   удлиняет hover-область, а такой же отрицательный margin-bottom возвращает
   margin-box к прежней высоте — текст и вертикальное центрирование пунктов
   в ul (align-items:center) не сдвигаются. Курсор больше не проходит
   "мёртвую зону" между пунктом и панелью. */
.main-nav__item--dropdown {
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.main-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 999;
  background: var(--color-bg-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  box-shadow: 0px 4px 10px 5px #00000040;
}

.main-nav__item--dropdown.is-open .main-nav__dropdown,
.main-nav__item--dropdown:focus-within .main-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* Затемнення решти сторінки, поки відкрите мега-меню "Каталог" — та сама
   візуальна мова (темний фон + блюр), що й .popup-overlay кошика/попапів
   нижче, але навмисно окремий елемент/клас, а не той самий .popup-overlay:
   .popup-overlay має z-index 1100, вище за .site-header (1000), і в парі з
   .popup (1200) розрахований дімити ВЕСЬ сайт включно з шапкою, лишаючи
   чітким лише сам попап. Тут навпаки — чіткою має лишатись уся шапка (і сам
   дропдаун всередині неї), а дімитись лише контент під нею, тож z-index
   навмисно нижче за .site-header, а не вище. Клас .is-open вмикає/вимикає
   JS у index.php (той самий open()/scheduleClose() мегаменю). */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #000000B2;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.main-nav__dropdown-inner {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  gap: 100px;
  padding: 44px 0px;
}

.main-nav__dropdown-title {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 15px;
}

/* align-items:flex-start явно перебиває .main-nav ul{align-items:center}
   (style.css вище) — цей селектор той самий descendant-selector "ul" і
   зачіпляє будь-який <ul> всередині .main-nav, включно з цими колонками,
   з однаковою специфічністю; без явного перевизначення тут center
   успадковувався б, хоча flex-direction тут вже column. */
.main-nav__dropdown-col ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.main-nav__dropdown-col a:hover {
  color: var(--color-accent);
}

.main-nav__dropdown-col--primary a,ul.main-nav__dropdown-list--catalog a{
  font-size: 24px;
  font-weight: 700;
}


.main-nav__dropdown-col--secondary ul {
  gap: 14px;
}

.main-nav__dropdown-col--secondary a {
  font-size: 14px;
  font-weight: 400;
}

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

.phone {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

.phone .chevron {
  color: var(--color-accent);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  color: #DFFF7F;
}

/* search/user/big-cart icons are white-on-transparent (baked-in "white"
   fill/stroke, like every asset in images/icon/), so — same reasoning as
   .lang-switcher__icon — they're used as a currentColor mask instead of a
   plain <img> to pick up the hover color above. */
.icon-mask {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-mask--search {
  -webkit-mask-image: url('/images/icon/search-icon.svg');
  mask-image: url('/images/icon/search-icon.svg');
}

.icon-mask--user {
  -webkit-mask-image: url('/images/icon/user-icon.svg');
  mask-image: url('/images/icon/user-icon.svg');
}

.icon-mask--cart {
  -webkit-mask-image: url('/images/icon/big-cart.svg');
  mask-image: url('/images/icon/big-cart.svg');
}

.icon-mask--close {
  -webkit-mask-image: url('/images/icon/close-icon.svg');
  mask-image: url('/images/icon/close-icon.svg');
}

.cart-button {
  position: relative;
}

/* Мобильный бургер и телефон-иконка (header-actions__mobile-phone) — оба
   скрыты по умолчанию, появляются только в адаптиве (adaptive.css,
   max-width:1280px), где заменяют main-nav/.phone-текст/поиск/корзину. */
.header-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.header-hamburger img {
  display: block;
  width: 25px;
  height: 25px;
}

.header-actions__mobile-phone {
  display: none;
}

/* Expanding search field, triggered by the "Пошук" icon-button. .header-search
   wraps only the button (same footprint the bare button used to have), so
   opening it never reflows the user/cart icons next to it — the field is an
   absolutely positioned panel, right-aligned to the button and anchored to
   its vertical center, that slides out to the LEFT over whatever's already
   there (blank header space / the phone block), the same "overlay instead of
   reflow" choice used for .lang-switcher__list. */
.header-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-search__toggle {
  position: relative;
  z-index: 1;
}

.header-search.is-open .header-search__toggle {
  color: #fff;
}
.header-search.is-open .header-search__toggle:hover {
  color: #DFFF7F;
}

.header-search__form {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-end;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  right: -4px;
  /* Рамка и тень — только в раскрытом виде: при width:0 они иначе остаются
     видимой полоской рядом с иконкой (у рамки 2px ширины даже без контента,
     тень тоже рисуется за пределами нулевой ширины). */
  border: 1px solid transparent;
  box-shadow: none;
}

.header-search.is-open .header-search__form {
  width: 300px;
  border-color: #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

/* Fixed at its full 300px regardless of the wrapper's animated width — the
   wrapper's own width (above) is what's actually animating and clipping it,
   revealing the field right-edge-first so it reads as sliding out from
   behind the icon rather than growing from a corner. */
.header-search__input {
  flex-shrink: 0;
  width: 300px;
  height: 30px;
  padding: 0px 64px 0 23px;
  border: none;
  border-radius: 10px;
  background: #282828;
  color: #CCC;
  font-family: inherit;
  font-size: 16px;
  /* Matches the caret position pixel-sampled from ПОЛЕ ПОИСКА.png (the
     lime line there is the native text caret, not a drawn element) — the
     23px left padding puts the caret exactly where that line sits. */
  caret-color: var(--color-accent);
}

.header-search__input::placeholder {
  color: #cccccc;
}

.header-search__input:focus {
  outline: none;
}

.header-search__clear {
  position: absolute;
  top: 0px;
  right: 29px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888;
}

.header-search__clear .icon-mask--close {
  width: 14px;
  height: 14px;
}

.header-search__clear:hover {
  color: var(--color-accent);
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -6px;
  background: var(--color-accent);
  color: var(--color-bg-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-bg-dark);
}

.hero__slider,
.hero__slide {
  position: relative;
  height: 450px;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg-dark) 0%, rgba(17, 17, 17, 0.75) 30%, rgba(17, 17, 17, 0) 55%);
}

.hero__inner {
  position: relative;
  max-width: 1505px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.hero__content {
  max-width: 640px;
  color: var(--color-text);
}

.hero__content h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 10px;
}

.hero__content p {
  font-size: 24px;
  font-weight: 700;
  color: #B7B7B7;
  margin-bottom: 20px;
}

.btn--accent {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg-dark);
  font-size: 16px;
  padding: 10px 30px;
  border-radius: 999px;
  font-weight: 600;
}

/* Сбрасываем кружок-обводку общего .slider-arrow (34x34, border-radius:50%,
   border) — в hero это просто крупная стрелка arrow-big.svg поверх фото,
   без кнопки-кружка как у steps/works/news. */
.hero .slider-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text-muted);
  padding: 10px;
  opacity: 0.5;
}
.hero .slider-arrow:hover{
  opacity: 1;
}
.slider-arrow--prev svg{margin-left: -4px;}
.slider-arrow--next svg{margin-right: -4px;}
.hero .slider-arrow--prev {
  left: 12px;
}

.hero .slider-arrow--next {
  right: 12px;
}

.hero .slider-arrow--next img {
  transform: scaleX(-1);
}

.hero .swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero .swiper-pagination-bullet:only-child {
  /* Swiper прячет одиночную точку по умолчанию — здесь она нужна как индикатор автолистания */
  display: inline-block !important;
}

.hero .swiper-pagination-bullet {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #77777799;
  opacity: 1;
  overflow: hidden;
  margin: 0 !important;
  cursor: pointer;
  transition: width 0.3s ease;
}

.hero .swiper-pagination-bullet-active {
  width: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.hero .swiper-pagination-bullet-progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
  /* Без своего border-radius — форму даёт только overflow:hidden +
     border-radius:999px самой .swiper-pagination-bullet (маска), полоска
     внутри остаётся прямоугольной. */
  border-radius: 0;
}

/* ==========================================================================
   Кнопки (общие)
   ========================================================================== */

.btn--outline {
  display: inline-block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 400;
  padding: 5px 15px;
  border-radius: 999px;
}
.section-heading .btn--outline {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 30px;
  border-radius: 25px;
}
.section-title{
  background: var(--color-bg-dark);
  padding: 20px;
}
.section-title h2 {
  max-width: 1505px;
  margin-inline: auto;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
.hr-delim-sm,.hr-delim-big{
  height: 20px;
  display: block;
  width: 100%;
  background: var(--color-bg-dark);
}
.hr-delim-big{
  height: 70px;
}
/* ==========================================================================
   Категорії
   ========================================================================== */

.categories {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.categories__list {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  gap: 20px;
}

.category-card {
  position: relative;
  flex-shrink: 0;
  background-color: var(--color-card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

.category-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 25px;
  cursor: pointer;
}

.category-card h3 {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.category-card .btn--outline {
  position: relative;
  z-index: 1;
}

.category-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.category-card:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Кнопки (общие) — центрирование
   ========================================================================== */

.btn--centered {
  display: table;
  margin: 30px auto 0;
}

/* ==========================================================================
   Популярные сборки
   ========================================================================== */

.builds {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.builds__filters_outer{
  background: var(--color-bg-dark);
}

.builds__filters {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: rgba(32, 32, 32, 1);
  padding: 13px 20px;
  border-radius: 10px;
}

.builds__filter-tag{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 700;
  color:#fff;
}

.icon--fps {
  flex-shrink: 0;
}

.builds__filter-tag__text {
  display: flex;
  flex-direction: column;
}

/* Вторая строка ("Натисніть для вибору гри") — только для свёрнутого
   мобильного вида (adaptive.css, max-width:940px), где .filter__select и
   .builds__note скрыты, а весь builds__filter-tag превращается в один
   компактный CTA-блок вместо полноценных выпадающих списков. */
.builds__filter-tag__hint {
  display: none;
}

.select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-text);
  cursor: pointer;
}

.select__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.select__ico {
  transition: transform 0.2s ease;
}

.select.is-open .select__ico,
.select__btn[aria-expanded="true"] .select__ico {
  transform: rotate(90deg);
}

/* Кнопка растянута на весь .select (клик по названию игры тоже открывает
   попап), сама остаётся единственным семантическим триггером. */
.select__btn--stretch::after {
  content: '';
  position: absolute;
  inset: 0;
}

.select__list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10;
  min-width: 100%;
  display: none;
  background: var(--color-card-bg);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.select.is-open .select__list {
  display: block;
}

.filter__select{
  background-color: rgba(51, 51, 51, 1);
  padding: 8px 6px 8px 20px;
  border-radius: 10px;
  width: 316px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select__field{
  font-size: 16px;
  font-weight: 500;
  flex-wrap: nowrap;
}
.select__item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  color: var(--color-text);
}

.select__item:hover{
  background: rgba(255, 255, 255, 0.08);
}
.select__item:hover,
.select__item.is-selected {
  color: var(--color-accent);
}

.builds__note {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(204, 204, 204, 1);
}

/* display:contents на десктопе/1280px — обёртка "исчезает" из раскладки,
   .builds__banner остаётся прямым flex-item'ом .builds__filters, как и
   было. На max-width:940px (adaptive.css) обёртка становится настоящим
   38px кругом (overflow:hidden), а сам img просто заполняет её на 100%. */
.builds__banner-wrap {
  display: contents;
}

.builds__banner {
  flex-shrink: 0;
  width: 105px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: -15px;
  margin-top: -8px;
  margin-bottom: -8px;
}

.builds__grid {
  max-width: 1505px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 24px;
}

.build-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #202020;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px #0000004D;
  /* .build-card__specs li теперь white-space:nowrap — без этого текст
     задаёт grid-колонке (.builds__grid, 1fr) min-content по своей полной
     нешироко-переносимой длине, и карточка перестаёт сжиматься на адаптиве
     (растягивает всю колонку под самую длинную строку характеристики).
     min-width:0 снимает этот минимум — обрезка текста многоточием остаётся на
     самом li (overflow:hidden). */
  min-width: 0;
}

.build-card img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 15px;
}

.build-card > img {
  border-radius: 10px 10px 0 0;
}

.build-card__category {
  font-size: 12px;
  font-weight: 700;
  color: rgba(204, 204, 204, 1);
  display: block;
  padding-left: 15px;
  padding-right: 15px;
}

.build-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
  margin-bottom: 10px;
  color: #fff;
  display: block;
  padding-left: 15px;
  padding-right: 15px;
}

.build-card__link {
  color: inherit;
  text-decoration: none;
}

.build-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.build-card__link:hover {
  color: var(--color-accent);
}

.build-card__footer .btn--icon-round--cart {
  position: relative;
  z-index: 2;
}

.build-card__specs {
  margin-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.build-card__specs li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: rgba(204, 204, 204, 1);
  margin-bottom: 5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-card__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ebc300;
}

/* Названия характеристик ("Процесор:", "Відеокарта:" — характеристики.png)
   показываются только на мобильном (adaptive.css, max-width:768px); на
   десктопе .build-card__specs остаётся простым списком значений. */
.build-card__spec-label {
  display: none;
  font-weight: 700;
  color: var(--color-text);
}

.build-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}

.build-card__price-label {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.build-card__price-old {
  font-size: 16px;
  color: rgba(110, 110, 110, 1);
  text-decoration: line-through;
  margin-left: 4px;
}

.build-card__price-value {
  display: block;
  margin-top: 2px;
}

.build-card__price-new {
  font-size: 22px;
  font-weight: 700;
  line-height: 20px;
}

.build-card__price-currency {
  font-size: 22px;
  font-weight: 400;
  line-height: 20px;
  color:#b7b7b7;
}

.btn--icon-round {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 25px;
  background: var(--color-accent);
}

.btn--icon-round img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.btn--icon-round--cart {
  /* при наведении раскрывается в pill с текстом — см. купить кнопка.png */
  width: auto;
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
  transition: padding 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--icon-round__label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-bg-dark);
  white-space: nowrap;
  transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease;
}

.btn--icon-round--cart:hover {
  padding-right: 16px;
}

.btn--icon-round--cart:hover .btn--icon-round__label {
  max-width: 100px;
  margin-left: 8px;
  opacity: 1;
}

.badge {
  /* 0-100, докручивается JS от 0 до значения карточки при появлении на экране */
  --fps-progress: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-color: rgba(32, 32, 32, 0.3);
  border-radius: 50%;
}

/* Кольцо — SVG-дуга (M18,76 A40,40 0 1 1 78,76 в viewBox 0 0 96 96), не
   conic-gradient+mask, как раньше: тот же ~270°-трек (разрыв внизу под текст
   "FPS"), но прогресс теперь рисуется через stroke-dasharray/-dashoffset с
   pathLength="100" на самом <path> — значит dashoffset считается прямо в
   процентах (0-100) без ручного пересчёта в px длины дуги. --fps-progress
   (0-100, задаётся инлайново из PHP и докручивается JS-анимацией на .badge)
   наследуется на дочерние <path> и двигает и заливку, и голову одной и той
   же формулой. Градиент заливки — общий <linearGradient id="fps-ring-gradient">,
   один на всю страницу (см. свёрстанный <svg> сразу после <body>), т.к. он
   одинаковый на каждой карточке — гонять по одному градиенту на бейдж смысла нет. */
.badge__ring {
  position: absolute;
  inset: 0;
}

.badge__ring-track {
  fill: none;
  stroke: #373737;
  stroke-width: 8;
}

.badge__ring-fill {
  fill: none;
  stroke: url(#fps-ring-gradient);
  stroke-width: 8;
  stroke-dasharray: 100;
  /* clamp() здесь не косметика: --fps-progress выше 100 (fps карточки больше
     FPS_GAUGE_MAX, если кто-то поднимет значение без пересчёта на сервере, или
     JS-анимация получит некорректный data-fps-progress) даёт отрицательный
     dashoffset, а при отрицательном dashoffset дуга не "переполняется", а
     закрашивается не с начала пути — визуально выглядит как разрыв в начале
     кольца и перекрут в новый круг. clamp() гарантирует dashoffset никогда не
     уходит ниже 0, т.е. --fps-progress никогда не даёт эффект больше 100%. */
  stroke-dashoffset: calc(100 - clamp(0, var(--fps-progress), 100));
}

.badge__ring-head {
  /* Точка-маркер на конце залитой дуги: тот же путь и тот же 0-100 clamp, что
     и у заливки (см. комментарий там), но dashoffset — НЕ тот же самый: у
     заливки dasharray:100 (период 200, dash=100), у головы dasharray:0 200
     (тот же период 200, но dash=0 — нулевой штрих, который
     stroke-linecap:round отрисовывает как кружок). Разная длина dash при
     одинаковом периоде означает, что "нулевая фаза" паттерна оказывается в
     разных точках пути, поэтому offset для головы считается от 200, а не от
     100 — см. вывод ниже.

     Заливка (dash=100, offset=100-progress): красит s∈[0,progress) —
     "передний край" закрашенного участка находится в точке s=progress.
     Голове нужно оказаться ровно в этой же точке. Ноль-длины отметка
     dasharray:0 200 рисуется там, где (s + offset) ≡ 0 (mod 200). Подставив
     s=progress и решив относительно offset, получаем offset=200-progress
     (а не 100-progress, как у заливки) — только тогда единственное решение
     внутри пути (s от 0 до 100) — это s=progress.

     Если по ошибке взять ту же формулу, что у заливки (100-progress):
     при progress<100 уравнение вообще не имеет решения в пределах пути —
     точка становится НЕВИДИМОЙ; а ровно при progress=100 (offset=0) решение
     есть, но не единственное — s=0 и s=100 дают одну и ту же фазу (0 ≡ 200
     mod 200 в терминах самого s), и браузер рисует её в s=0, т.е. в НАЧАЛЕ
     дуги, а не в конце — маркер как будто "перекручивается назад". Оба этих
     симптома (точка пропадает у карточек <300 fps, точка в начале дуги у
     карточек ≥300 fps) — следствие именно этой ошибки в константе. */
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 0 199;
  stroke-dashoffset: calc(200 - clamp(0, var(--fps-progress), 100));
}

.badge__value {
  font-size: 12px;
  font-weight: 700;
}

.badge__unit {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(204, 204, 204, 1);
}

/* ==========================================================================
   Заголовок секции со слайдером (переиспользуется: Этапы заказа,
   Наші роботи, Новини та статті)
   ========================================================================== */

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1505px;
  margin-inline: auto;
  margin-bottom: 20px;
}

/* .section-title обычно самостоятельная секция на всю ширину (см. "Популярные
   сборки"), но переиспользуется и как обёртка h2 внутри .section-heading —
   здесь её собственные background/width сбрасываются, чтобы не спорить
   с флекс-раскладкой (margin-inline:auto на флекс-элементе центрировал бы
   его, а не давал прижаться влево). */
.section-heading .section-title {
  background: none;
  padding: 0;
}

.section-heading .section-title h2 {
  max-width: none;
  margin-inline: 0;
}

/* Некоторые секции (peripherals, works, news) кладут h2 прямо в
   .section-heading без обёртки .section-title — им нужен тот же размер
   заголовка явно, т.к. .section-title h2 их не затрагивает. */
.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
}

.slider-controls {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-text);
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
  background: #202020;
}

/* ==========================================================================
   Этапы заказа
   ========================================================================== */

.steps {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  overflow: hidden;
}

/* Как .works__slider/.news__slider — ограничение ширины должно быть на
   самом .swiper-контейнере, а не на .swiper-wrapper, иначе slidesPerView
   считает ширину слайда от неограниченной ширины секции (до 1920px), а не
   от 1505px, и карточки/перелистывание не совпадают с границей блока.
   overflow:hidden — на .steps (секции), а не на самом слайдере, чтобы тень
   и hover-подъём карточек по краям не обрезались вплотную по границе 1505px. */
.steps__slider {
  max-width: 1505px;
  margin-inline: auto;
  overflow: visible;
}

.step-card {
  position: relative;
  height: 100%;
  background-color: var(--color-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Лёгкий подъём + посветление карточки при наведении — из cardsSlider.php. */
.step-card:hover {
  transform: translateY(-5px);
  background-color: #242424;
}

/* Вся карточка — одна ссылка (как .category-card__link), а не кнопка на
   плюсике — плюс теперь просто декоративная иконка внутри неё. */
.step-card__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 20px 20px 97px 20px;
  cursor: pointer;
}

.step-card__icon {
  display: block;
  width: 40px;
  height: 40px;
}

.step-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  padding-right: 40px;
}

.step-card p {
  font-size: 16px;
  line-height: 1.5;
  color: #ccc;
  max-width: 210px;
}

.step-card__plus {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 35px;
  height: 35px;
}

/* ==========================================================================
   Подобрать компьютер
   ========================================================================== */

.configurator {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  padding-block: 20px;
  text-align: center;
}

.configurator h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}

.configurator h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.configurator__group {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.configurator__option {
  flex: 1;
  background-color: #202020;
  border-radius: 10px;
  color: #ccc;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid #FFFFFF05;
}

.configurator__option.is-active {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  font-weight: 700;
}

.configurator__group--purpose .configurator__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 15px 15px;
}

/* Исходные SVG у этих трёх иконок разного цвета (gamepad-icon.svg тёмный
   #141414, pc-icon.svg/sett-swich.svg светло-серые #cccccc-ish) и не
   currentColor-совместимы, так что цвет нормализуем тем же приёмом
   перекраски однотонного SVG через CSS filter, что и у
   .site-footer__contacts a:hover img: brightness(0) сводит любой исходный
   цвет к чистому чёрному — сама по себе это и есть нужный вид активной
   (лаймовой) кнопки; invert(53%) для неактивной дополнительно высветляет
   чёрный до серого, близкого к --color-text-muted (#888888). */
.configurator__icon {
  filter: brightness(0) invert(53%);
}

.configurator__option.is-active .configurator__icon {
  filter: brightness(0);
}

.configurator__group--resolution .configurator__option,
.configurator__group--sphere .configurator__option,
.configurator__group--params .configurator__option {
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
}

/* Реveal-панель під обраним параметром (ціна/відеокарта/процесор) — те саме
   "кнопка перемикає видиму панель" рішення, що й .configurator__group--purpose
   вище керує .configurator__branch, тільки в межах самої params-гілки.
   Контента під жоден з трьох варіантів ще не спроєктовано, тож це поки що
   порожня підкладка — колір пиксель-замірян з Rectangle 496.png. */
.configurator__param-panel {
  max-width: 1120px;
  min-height: 120px;
  margin-inline: auto;
  background-color: #141414;
}

/* "По видеокарте"/"По процессору" тепер використовують готовий
   .configurator__games/.game-card (картка-з-фото), той самий, що й "Виберіть
   улюблену гру" в гілці "Для ігор" — рядок JS-обробника нижче для
   .configurator__games вже й так проходиться по всіх трьох входжень, нової
   логіки не треба. Обидва нові списки — рівно 8 позицій, тож той самий
   4-колонковий grid дає 2 повних ряди без потреби в неповнорядковому
   центруванні, як у .configurator__programs. */

/* "По цене" (блок выбора.png) — 4 в ряд. Grid не годиться тут: воно не вміє
   центрувати неповний останній ряд, а другий ряд (2 з 6 планок) саме має
   бути по центру — тому той самий flex-wrap + фіксована ширина чипа приём,
   що й .configurator__group--sphere вище. Ширина рахується так само, як там:
   (1120 - 3×20) / 4 = 265px — те саме число, що й ширина .game-card, тож
   ряди з обох компонентів вирівнюються однаково. */
.configurator__group--price {
  flex-wrap: wrap;
  justify-content: center;
}

.configurator__group--price .configurator__option {
  flex: 0 0 265px;
  padding: 7px 20px;
}

.configurator__param-panel h3 {
  margin-bottom: 20px;
}

/* "Выберите свою сферу" (выбор сферы.png) — пиксель-замер: ряд 1 (3D
   Моделирование / САПР / Видеомонтаж) — обычные flex:1-пункты, ровно
   заполняющие 1120px-контейнер, как и .configurator__group--resolution.
   Ряд 2 (Визуализация в 3D / Графический дизайн) — те же 360px-кнопки,
   что и в ряду 1 (3×360+2×20=1120), поэтому при flex-wrap он переносится
   на новую строку сам; но т.к. в нём только 2 кнопки (2×360+20=740 из
   1120), justify-content:center центрирует именно этот неполный ряд —
   замерено смещение (1120-740)/2=190px от края контейнера, совпадает
   с макетом. Тот же приём, что и у неполного 3-го ряда .configurator__programs. */
.configurator__group--sphere {
  flex-wrap: wrap;
  justify-content: center;
}

.configurator__group--sphere .configurator__option {
  flex: 0 0 360px;
}

.configurator__divider {
  display: block;
  margin: 0 auto 20px;
  animation: configurator-divider-bounce 1.5s ease-in-out infinite;
}

@keyframes configurator-divider-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* "Выберите любимую игру" (блок выбора.png, ветка "Для игр") — пиксель-замер:
   карточка 265×173 (137 фото + 36 подписи), гэп 20px, 4 карточки ровно
   заполняют тот же 1120px-контейнер (265×4+20×3=1120). На десктопе все 4 ряда
   .configurator__games (игры) полные (16 игр = 4×4), но два других списка,
   рендерящиеся тем же .configurator__games (видеокарты/процессоры — по 8
   штук), и все три списка на адаптиве (3/2 колонки) неполные ряды дают.
   Grid не умеет центрировать неполный последний ряд (см. коммент у
   .configurator__group--price/--sphere выше) — поэтому здесь тот же
   flex-wrap + фиксированная ширина карточки приём, а не grid. */
.configurator__games {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.configurator__games .game-card {
  flex: 0 0 calc((100% - 3 * 20px) / 4);
}

.game-card {
  display: flex;
  flex-direction: column;
  background-color: #202020;
  border-radius: 10px;
  border: 1px solid #FFFFFF05;
  overflow: hidden;
  cursor: pointer;
}

.game-card__photo {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

.game-card__label {
  /* .game-card — <button>, у которого UA-стили на некоторых движках
     (особенно старые Android WebView/Safari) не всегда честно растягивают
     flex-детей через align-items:stretch — сдвиг влево и неполная ширина
     на части устройств именно отсюда. width:100% — явная подстраховка,
     не полагаемся только на stretch родителя. */
  width: 100%;
  padding: 6px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Зелёная подложка на подписи — только у выбранной карточки, тот же приём,
   что и .program-card.is-active .program-card__label. */
.game-card.is-active .game-card__label {
  background-color: #C0FF00;
  color: var(--color-bg-dark);
  font-weight: 600;
}

/* "Выберите программу" — пиксель-замер Group 1.png: карточка 207×191
   (191 = 149 иконки + 42 подписи), гэп 20px, 5 карточек ровно заполняют
   1120px-контейнер (207×5+20×4=1120, тот же контейнер, что и у
   .configurator__group выше). Поэтому flex-wrap, а не grid: неполный
   3-й ряд (4 карточки из 14) в макете не прижат влево, а центрируется —
   justify-content:center на полных рядах эффекта не даёт (они уже без
   остатка заполняют ширину), но центрирует единственный неполный ряд,
   в точности как в макете (замерено: 4-карточный ряд смещён от левого
   края контейнера на (1120-888)/2=116px). */
.configurator__programs {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.program-card {
  flex: 0 0 207px;
  height: 191px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  border: 1px solid #FFFFFF05;
  overflow: hidden;
  cursor: pointer;
}

.program-card__icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.program-card__label {
  padding: 9px 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  display: block;
  width: 100%;
}

/* Зелёная подложка на подписи — только у выбранной карточки, тем же
   приёмом "chip selected", что и .configurator__option.is-active. */
.program-card.is-active .program-card__label {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  font-weight: 600;
}

/* ==========================================================================
   Периферія
   ========================================================================== */

.peripherals {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.peripherals .section-heading {
  max-width: 1505px;
}

.peripherals__top {
  display: flex;
  gap: 20px;
  max-width: 1505px;
  margin-inline: auto;
  margin-bottom: 20px;
}

.peripheral-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.peripheral-card__label {
  position: relative;
  z-index: 11;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 18px;
}

.peripheral-card__word {
  position: relative;
  z-index: 1;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: #414141;
  margin-top: 15px;
}
.peripherals__grid .peripheral-card__word{
  color: rgba(255, 255, 255, 0.15);
  font-size: 36px;
}
.peripheral-card__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.peripheral-card img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 9;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Как .category-card:hover img — зум фото при наведении на всю карточку. */
.peripheral-card:hover img {
  transform: scale(1.1);
}

/* "Монітори" — единственная карточка на всю высоту .peripherals__top,
   текст и фото у неё центрированы, а не прижаты влево/вправо, как у
   остальных. */
.peripheral-card--tall {
  flex: 0 0 305px;
  text-align: center;
}

.peripheral-card--tall img {
  right: auto;
  left: 50%;
  translate: -50% 0;
}

/* Карточки не одинаковой ширины — это "мозаика", подтверждённая замером
   макета: в верхнем ряду широкая первая карточка (клавиатуры), в нижнем —
   широкая последняя (геймпади), остальные четыре — обычной ширины. Именно
   поэтому раскладка не через CSS grid (общие колонки не дали бы разную
   ширину по рядам), а flex-wrap: сумма ширин тройки (440+350+350+гэпы)
   ровно равна ширине ряда, поэтому обёртка сама переносит по 3 карточки
   на строку без media-запросов. */
.peripherals__top .peripherals__grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.peripherals__top .peripherals__grid .peripheral-card {
  flex: 0 0 350px;
  height: 190px;
}

.peripherals__top .peripherals__grid .peripheral-card:first-child,
.peripherals__top .peripherals__grid .peripheral-card:last-child {
  flex-basis: 440px;
}

.peripherals__grid--small {
  display: flex;
  gap: 20px;
  max-width: 1505px;
  margin-inline: auto;
}

.peripherals__grid--small .peripheral-card {
  flex: 1;
  height: 190px;
}

/* ==========================================================================
   Наші роботи
   ========================================================================== */

.works {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  overflow: hidden;
}

.works .section-heading {
  max-width: 1505px;
}

.works__tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1505px;
  margin-inline: auto;
  margin-bottom: 20px;
}

/* Прижимает стрелки слайдера к правому краю .works__tabs (тот же приём,
   что и .main-nav в шапке), а не просто третьим элементом в общем gap. */
.works__tabs .slider-controls {
  margin-left: auto;
}

.works__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 30px;
  border-radius: 999px;
  background-color:#202020;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  border: 1px solid #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.works__slider {
  max-width: 1505px;
  margin-inline: auto;
  overflow: visible;
}

/* Каждый слайд — не одно фото, а группа из 3-х в мини-сетке 2х2 (одно
   большое + два маленьких), см. замер в CLAUDE.md. slidesPerView:'auto'
   в JS-инициализации нужен именно из-за этой фиксированной px-ширины
   слайда (586px) — числовой slidesPerView заставил бы Swiper растягивать
   слайды под расчётную ширину через инлайн-стили. */
.works__slide {
  width: 586px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 327px 212px;
  grid-template-areas: "a a" "b c";
  gap: 20px;
}

.works__slide--alt {
  grid-template-rows: 212px 327px;
  grid-template-areas: "a b" "c c";
}

/* Swiper по умолчанию кладёт .swiper-pagination как position:absolute
   поверх низа слайдера (см. swiper-bundle.css) — в макете же точки лежат
   отдельной строкой НИЖЕ галереи, а не поверх фото, так что абсолютное
   позиционирование сбрасываем в static. Сами точки — тот же язык, что и
   в hero (10px кружок → 20px пилюля на активной), но без прогресс-бара:
   в макете активная точка просто сплошная белая, без лаймовой заливки. */
.works .swiper-pagination {
  position: static;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.works .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(119, 119, 119, 1);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition: width 0.3s ease;
}

.works .swiper-pagination-bullet-active {
  width: 20px;
  background: #ffffff;
}

.works__slide .works__item:nth-child(1) { grid-area: a; }
.works__slide .works__item:nth-child(2) { grid-area: b; }
.works__slide .works__item:nth-child(3) { grid-area: c; }

.works__item {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

/* Ссылка заполняет всю ячейку сетки, чтобы img (height:100%) тянулся как раньше. */
.works__link {
  display: block;
  width: 100%;
  height: 100%;
}

.works__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Как .category-card:hover img — зум фото при наведении; лишнее обрезает
   overflow:hidden на самом .works__item. */
.works__item:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Апгрейд и сервис
   ========================================================================== */

.upgrade-service {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.upgrade-service h2 {
  max-width: 1505px;
  margin-inline: auto;
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 700;
}

/* Аккордеон и фото — это ДВЕ отдельные скруглённые карточки с зазором
   между ними (~20px, обычный для проекта гэп), а не одна сплошная —
   проверено по апгрейд.png: между ними виден фон страницы, и правый
   верхний угол аккордеона скруглён independently (не общий прямоугольник
   с вырезанными внешними углами). Поэтому border-radius — на каждой
   половине отдельно, gap — на обёртке вместо overflow:hidden. */
.upgrade-service__grid {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  gap: 20px;
}

.upgrade-service__grid img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.accordion {
  flex: 1;
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 20px 20px;
}

.accordion-item + .accordion-item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

/* Раскрытый пункт — шеврон акцентного цвета, свёрнутый — приглушённый
   белый; это единственная визуальная разница между состояниями (сам
   триггер не меняет цвет/фон), подтверждено по макету. */
/* Разметка всегда содержит "стрелку вниз" — разворот на 180° при
   раскрытии даёт стрелку вверх, поэтому JS-тоггл (открыть/закрыть) не
   должен подменять path/разметку иконки, только aria-expanded. */
.accordion-item__trigger svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.accordion-item__trigger[aria-expanded="true"] svg {
  color: var(--color-accent);
  transform: rotate(180deg);
}

/* Фиксированная высота (а не auto под контент) — чтобы высота .accordion
   (и вслед за ней, через flex-stretch, высота фото рядом) не прыгала при
   переключении пунктов с разным объёмом текста. Если контент пункта не
   помещается — появляется внутренняя прокрутка, тем же приёмом и с тем же
   тонким скроллбаром, что и .seo__content. */
.accordion-item__panel {
  height: 260px;
  overflow-y: auto;
  padding-top: 20px;
  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.accordion-item__panel::-webkit-scrollbar {
  width: 10px;
}

.accordion-item__panel::-webkit-scrollbar-track {
  background: transparent;
}

.accordion-item__panel::-webkit-scrollbar-thumb {
  background-color: #797979;
  border-radius: 999px;
}

.accordion-item__lead {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.accordion-item__panel ul {
  margin-bottom: 24px;
}

.accordion-item__panel li {
  position: relative;
  padding-left: 20px;
  color: #ccc;
  font-size: 16px;
  line-height: 2;
}

.accordion-item__panel p {
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}

.accordion-item__panel p + p {
  margin-top: 12px;
}

.accordion-item__panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}
.accordion-item__panel .btn--outline{
  font-size: 16px;
  padding: 8px 30px;
}
/* ==========================================================================
   Новини та статті
   ========================================================================== */

.news {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  overflow: hidden;
}

.news .section-heading {
  max-width: 1505px;
}

.news__slider {
  max-width: 1505px;
  margin-inline: auto;
  overflow: visible;
}

/* 5 карточек ровно заполняют 1505px-контейнер (285px карточка + 20px
   зазор, 5×285+4×20=1505) — отсюда slidesPerView:5 (не дробное) на
   десктопном брейкпоинте в JS-инициализации, чтобы 5-я карточка доходила
   правым краем точно до границы контейнера, вровень с остальными
   секциями. Раньше был дробный 5.15 ("подглядывающий" край 6-й карточки),
   но из-за него реальная ширина карточки (~276px) не совпадала с
   пиксель-замером макета (285px), и 5-я карточка не доходила до края —
   пользователь попросил выровнять. */
.article-card {
  background-color: var(--color-card-bg);
  border-radius: 10px;
  overflow: hidden;
}

/* Вся картка — одне посилання, той самий приём, що й .category-card__link:
   <a> займає всю площу картки замість лінкування лише заголовка. */
.article-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.article-card img {
  display: block;
  width: 100%;
  height: auto;
}

.article-card h3 {
  padding: 15px 15px 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.article-card p {
  padding: 0 15px 15px;
  font-size: 16px;
  line-height: 1.4;
  color: #ccc;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

/* .faq сам красит фон на всю ширину main>section (как works/news), а
   .faq__inner — это та же "full-bleed фон + узкий контент" пара, что и
   .topbar/.topbar__inner, только реализована через grid: h2 занимает
   левую колонку на всю высоту (обе строки), табы и список — правую,
   каждый в своей строке. */
.faq__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 570px 1fr;
  column-gap: 40px;
  grid-template-areas:
    "heading tabs"
    "heading list";
}

.faq__inner h2 {
  grid-area: heading;
  align-self: center;
  font-size: 40px;
  font-weight: 700;
}

.faq__tabs {
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.faq__tab {
  padding: 5px 20px;
  border-radius: 999px;
  background-color: rgba(32, 32, 32, 1);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
}

.faq__tab.is-active {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  font-weight: 600;
}

.faq__list {
  grid-area: list;
}

.faq-item + .faq-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding-block: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.faq-item__trigger svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.faq-item__trigger[aria-expanded="true"] svg {
  color: var(--color-accent);
  transform: rotate(180deg);
}

.faq-item__panel {
  padding-bottom: 20px;
}

.faq-item__panel p {
  position: relative;
  padding-left: 20px;
  color: #ccc;
  font-size: 16px;
}

.faq-item__panel p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* ==========================================================================
   SEO
   ========================================================================== */

.seo {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.seo__top {
  max-width: 1505px;
  margin-inline: auto;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

/* Текстовый блок — с внутренним скроллом на фиксированную высоту
   (совпадающую с высотой фото рядом), а не "показать всё" — так и в
   макете: видна полоса прокрутки внутри карточки. */
.seo__content {
  position: relative;
  flex: 1;
  height: 300px;
  overflow-y: auto;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  padding: 20px;
    overflow: hidden;
}

/* Затемняющая полоса и кнопка "показати більше" — только для мобильного
   вида без скролла (adaptive.css, max-width:768px), где .seo__content-inner
   вместо scroll просто обрезается по высоте. На десктопе (виден реальный
   скроллбар) оба элемента скрыты. */
.seo__more-fade,
.seo__more-toggle {
  display: none;
}

.seo__more-toggle {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Паддинг живёт на отдельной внутренней обёртке, а не на самом
   .seo__content — padding на скролл-контейнере ненадёжно держит отступ по
   всем четырём сторонам во время скролла (текст в итоге вплотную подходит
   к верхней/нижней границе блока). Обёртка с собственным padding гарантирует
   20px до границы в любой точке скролла, независимо от overflow. */
/* Паддинг обязательно на этой внутренней обёртке, а не на .seo__content
   (скролл-контейнере) — иначе при скролле текст вплотную подходит к
   верхней/нижней границе карточки, т.к. padding скролл-контейнера не
   гарантирует отступ по всей высоте scrollHeight. */
.seo__content-inner {
  flex: 1;
  height: 260px;
  overflow-y: auto;
  background-color: var(--color-card-bg);

  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.seo__content::-webkit-scrollbar {
  width: 10px;
}

.seo__content::-webkit-scrollbar-track {
  background: transparent;
}

.seo__content::-webkit-scrollbar-thumb {
  background-color: #797979;
  border-radius: 999px;
}

.seo__content h2,
.seo__content h3 {
  text-transform: uppercase;
  font-weight: 700;
  color:#ccc;
}

.seo__content h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.seo__content h3 {
  font-size: 18px;
}

.seo__content p {
  font-size: 14px;
  color:#ccc;
  margin-bottom: 8px;
}

.seo__content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.seo__top > img {
  flex: 0 0 450px;
  width: 450px;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.seo__tags {
  max-width: 1505px;
  margin-inline: auto;
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 20px;
}

.seo__tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}

.seo__tab {
  font-size: 16px;
  font-weight: 400;
  color:#ccc;
}

.seo__tab.is-active {
  color: var(--color-accent);
}

.seo__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo__tag-cloud a {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  color:#ccc;
  font-size: 12px;
}

/* ==========================================================================
   Подвал
   ========================================================================== */

.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  padding-top: 50px;
}

/* 5 равных колонок (бренд / 3 навигационных / контакты) — пиксельный
   замер макета показал одинаковый шаг ~305px между заголовками колонок. */
.site-footer__top {
  max-width: 1505px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-bottom: 40px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Логотип в подвале — обычный текст (в отличие от <img> в шапке), точку
   красим акцентом отдельным span'ом, чтобы совпадать с цветом точки в
   images/icon/top-desctop-logo.svg (#C0FF00). */
.logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
}

.logo span {
  color: var(--color-accent);
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating img {
  
}

/* Строка 1 = звёзды + "4.8" (порядок в разметке), строка 2 = текст
   отзывов — переносится на свою строку через flex-basis:100% на
   последнем span'е, без добавления обёрточных элементов. */
.rating__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  font-size: 14px;
  line-height: 16px;
  color: #989898;
}

.rating__stars {
  color: #ebc300;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}

.rating__meta strong {
  color: #989898;
  font-size: 14px;
}

.rating__meta span:last-child {
  flex-basis: 100%;
}

.site-footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #282828;
}

.site-footer .social-links img {
  display: block;
}

.payment-methods {
  display: flex;
  gap: 10px;
}

.site-footer__column h3,
.site-footer__contacts h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.site-footer__contacts h3{
  margin-bottom: 0;
}

/* Заголовок оборачивает button.site-footer-item__trigger (а не голый текст)
   — так и на десктопе, и в свёрнутом мобильном виде это остаётся семантическим
   <h3>. Сам триггер здесь выглядит как обычный заголовок: шеврон скрыт,
   .site-footer-item__panel всегда видна независимо от атрибута [hidden] —
   тот включается обратно только в adaptive.css (max-width:992px), где
   .site-footer__column/.site-footer__contacts становятся спойлерами. */
.site-footer-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
}

.site-footer-item__trigger svg {
  display: none;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.site-footer-item__trigger[aria-expanded="true"] svg {
  color: var(--color-accent);
  transform: rotate(180deg);
}

/* Именно flex, а не голый display:block — иначе на десктопе, пока
   .site-footer__column ещё не открыт JS'ом (везде рендерится с [hidden] по
   умолчанию), список потерял бы свой flex-column + gap:16px и превратился
   в обычный блочный список. Специфичность класса+атрибута (0,0,2,0) не
   победила бы ".site-footer__column ul" (0,0,1,1) по числу — здесь она
   выше за счёт третьего класса-предка, и явно matches только то, что
   реально должно остаться flex. */
.site-footer__column .site-footer-item__panel[hidden] {
  display: flex;
}
.site-footer__contacts .site-footer-item__panel[hidden] {
  display: flex;
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__column a {
  color: #989898;
  font-size: 14px;
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.site-footer__contacts .site-footer-item__panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.site-footer__contacts a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ccc;
  font-size: 14px;
}
.site-footer__contacts a:hover, .site-footer__column a:hover{
  color: var(--color-accent) !important;
}

/* Телефон — постійно в акцентному кольорі тексту, не лише на hover (як інші
   контакти) — саме це й малося на увазі під ".site-footer__contact-link--phone"
   у розмітці, просто клас досі не мав власного правила. Селектор із двох
   класів (0,2,0) навмисно перебиває базовий ".site-footer__contacts a" (0,1,1)
   без !important. Іконка лишається наразі сірою (як задокументовано раніше) —
   мова тільки про текст. */
.site-footer__contacts .site-footer__contact-link--phone {
  color: var(--color-accent);
}

.site-footer__contacts a:hover img {
  filter: invert(20%) sepia(64%) saturate(1100%) hue-rotate(47deg) brightness(155%) contrast(157%);
}

.site-footer__contacts a:last-child {
  text-decoration: underline;
}

.site-footer__bottom {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #989898;
  font-size: 14px;
}

/* ==========================================================================
   Попапи-панелі — спільна основа (.popup-overlay/.popup), якою користується
   і корзина (.cart-popup), і "Зв'язатися з нами" (.contact-popup) нижче, і
   будь-який майбутній попап того ж роду: один спільний оверлей на всю
   сторінку плюс висувна праворуч панель, лише вміст (```.cart-popup__list```
   проти ```.contact-popup__body``` і т.д.) відрізняється між попапами.
   Перемикання класів .is-open і тіла .popup-open — JS у index.php
   (initPopup), спільний для всіх попапів.
   ========================================================================== */

/* Замінює доступність решти сайту, поки якийсь попап відкритий — не саме
   затемнення попапа, а фон/блюр *позаду* нього (тому лежить нижче за .popup,
   а не всередині нього, і займає весь viewport). Приховано через opacity, а
   не [hidden]/display:none, щоб transform-transition на .popup міг плавно
   доїхати і при закритті теж. */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #000000B2;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.popup-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* На всю висоту вікна (100dvh поверх 100vh — фолбек для браузерів без
   підтримки dynamic viewport units), з внутрішньою прокруткою лише в тілі
   попапу (.cart-popup__list/.contact-popup__body) — шапка й підвал завжди
   на місці. Ширина — своя для кожного попапу (.cart-popup/.contact-popup). */
.popup {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1200;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.popup.is-open {
  transform: translateX(0);
}

.cart-popup {
  width: 550px;
}

.popup__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 30px;
}

.popup__header h2 {
  font-size: 34px;
  font-weight: 700;
}

.popup__close {
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

/* Прокрутка вмісту попапу, якщо він не влазить у доступну висоту — той самий
   скролбар, що й .accordion-item__panel, спільний для будь-якого попапу. */
.cart-popup__list,
.contact-popup__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.cart-popup__list::-webkit-scrollbar,
.contact-popup__body::-webkit-scrollbar {
  width: 10px;
}

.cart-popup__list::-webkit-scrollbar-track,
.contact-popup__body::-webkit-scrollbar-track {
  background: transparent;
}

.cart-popup__list::-webkit-scrollbar-thumb,
.contact-popup__body::-webkit-scrollbar-thumb {
  background-color: #797979;
  border-radius: 999px;
}

.cart-popup__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 30px;
  padding-bottom: 20px;
}

.cart-item {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-item__link {
  color: inherit;
  text-decoration: none;
}

.cart-item__link:hover {
  color: var(--color-accent);
}

.cart-item__image {
  display: block;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 10px;
  background-color: var(--color-card-bg);
  overflow: hidden;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__category {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 2px;
}

.cart-item__title {
  font-size: 18px;
  font-weight: 700;
}

.cart-item__price {
  flex-shrink: 0;
  padding-right: 25px;
  text-align: right;
}

.cart-item__price strong {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.cart-item__price strong span {
  font-size: 14px;
  font-weight: 400;
}

.cart-item__qty {
  display: block;
  color: #B7B7B7;
  font-size: 16px;
  white-space: nowrap;
}

.cart-item__remove {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.cart-popup__footer {
  position: relative;
  flex-shrink: 0;
  padding: 15px 30px 20px 30px;
}

/* Лінія-роздільник із відступами зліва/справа (як padding контейнера), а не
   впритул до країв попапа — border-top на самому .cart-popup__footer тягнувся
   б через увесь бордер-бокс без урахування padding. */
.cart-popup__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-popup__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: #ccc;
  font-size: 16px;
}

.cart-popup__total strong {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
}

.cart-popup__total strong span {
  font-size: 24px;
  font-weight: 400;
}

.cart-popup__actions {
  display: flex;
  gap: 12px;
}

.cart-popup__actions .btn {
  flex: 1;
  text-align: center;
}
.cart-popup__actions .btn--outline{
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .btn--accent базово inline-block — тут потрібен inline-flex, щоб іконка
   кошика й підпис "Оформить заказ" вирівнялись в один ряд по центру. */
.cart-popup__actions .btn--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Блокуємо скрол сторінки позаду попапа, поки він відкритий (клас додає/знімає
   JS в index.php одночасно з .is-open на .popup-overlay/.popup). */
body.popup-open {
  overflow: hidden;
}

/* ==========================================================================
   Универсальная модалка (.modal) — центрированное окно (готовый макет
   блока.png), в отличие от выезжающих справа .popup. Тот же .popup-overlay
   (блюр позади) и тот же initPopup в index.php, поэтому Escape / клик по
   оверлею / [data-popup-close] / блок скролла страницы работают так же.
   Размер общий для всех: ширина 880px, высота до 570px, по центру; при
   превышении высоты прокручивается только .modal__body, шапка на месте.
   Наполнение — любое: p, ul, изображения и т.д. внутри .modal__body.
   ========================================================================== */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: 880px;
  max-width: calc(100vw - 32px);
  max-height: min(570px, calc(100vh - 32px));
  max-height: min(570px, calc(100dvh - 32px));
  background-color: #141414;
  color: var(--color-text);
  border-radius: 12px;
  /* visibility (а не только opacity) — чтобы скрытая модалка не ловила
     фокус табом и клики; задержка на закрытии даёт доиграть fade-out. */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -48%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  box-shadow: 0px 4px 10px 5px #00000040;
  border: 1px solid #FFFFFF05;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 30px 20px 30px;
}

.modal__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.modal__close {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 30px 30px;
  font-size: 16px;
  line-height: 1.4;
  color: #d9d9d9;
  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.modal__body::-webkit-scrollbar {
  width: 10px;
}

.modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.modal__body::-webkit-scrollbar-thumb {
  background-color: #797979;
  border-radius: 999px;
}

.modal__body p + p,
.modal__body p + ul {
  margin-top: 12px;
}

.modal__body ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 12px;
}

/* Акцентная точка-маркер — та же, что у .accordion-item__panel li::before. */
.modal__body li {
  position: relative;
  padding-left: 18px;
}

.modal__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

@media (max-width: 600px) {
  .modal__header {
    padding: 20px 20px 16px;
  }

  .modal__title {
    font-size: 20px;
  }

  .modal__body {
    padding: 0 20px 20px;
    font-size: 15px;
  }
  
}

/* ==========================================================================
   Попапы выбора в фильтре "Популярные сборки" — .modal с центрированным
   заголовком (.modal--centered, общий для обоих). Выбранная карточка —
   плашка --color-accent.
   .games-modal (попап фпс.png): сетка 4×N карточек (обложка + название),
   внизу градиентное затухание под скролл.
   .resolution-modal (попап разрешение.png): 3 карточки + чекбокс DLSS/FSR.
   ========================================================================== */

.modal--centered .modal__header {
  position: relative;
  justify-content: center;
  padding: 20px 60px;
}

.modal--centered .modal__title {
  font-size: 32px;
  text-align: center;
}

.modal--centered .modal__close {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}


.games-modal .modal__body {
  padding-bottom: 50px;
}

.games-modal .games-modal__list {
  display: grid;
  /* minmax(0, 1fr), а не 1fr: иначе min-width:auto у колонки не даёт ей
     сжаться уже длинного названия, и колонки становятся разной ширины. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
}

.games-modal .games-modal__list > li {
  min-width: 0;
  padding: 0;
}

.games-modal .games-modal__list > li::before {
  content: none;
}

.games-modal__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-card-bg);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.games-modal__item img {
  display: block;
  width: 100%;
  aspect-ratio: 190 / 98;
  object-fit: cover;
}

.games-modal__name {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-modal__item:hover,
.games-modal__item:focus-visible {
  color: var(--color-text);
}

.games-modal__item.is-selected {
  background-color: var(--color-accent);
  color: #111;
}

@media (max-width: 600px) {
  .modal--centered .modal__header {
    padding: 20px 50px 16px 20px;
    justify-content: flex-start;
  }

  .modal--centered .modal__title {
    font-size: 20px;
    text-align: left;
  }

  .modal--centered .modal__close {
    right: 20px;
  }

  .games-modal .games-modal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

/* --- Попап выбора разрешения --- */

.resolution-modal .modal__body {
  padding-top: 10px;
}

.resolution-modal .resolution-modal__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

.resolution-modal .resolution-modal__list > li {
  flex: 0 1 190px;
  min-width: 0;
  padding: 0;
}

.resolution-modal .resolution-modal__list > li::before {
  content: none;
}

.resolution-modal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 24px 10px 16px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-card-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* По умолчанию иконка — свой цвет из SVG (#ccc у всех трёх). На выбранной
   карточке (лаймовый фон) перекрашиваем в чёрный. */
.resolution-modal__item img {
  display: block;
  transition: filter 0.2s ease;
}

.resolution-modal__item.is-selected img {
  filter: brightness(0);
}

.resolution-modal__name {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color:#ccc
}

.resolution-modal__item:hover,
.resolution-modal__item:focus-visible {
  background-color: #2a2a2a;
}

.resolution-modal__item.is-selected {
  background-color: var(--color-accent);
  color: #111;
}

.resolution-modal__item.is-selected .resolution-modal__name {
  color: #111;
}

/* Чекбокс "Генерация кадров (DLSS/FSR)": нативный input скрыт визуально
   (остаётся доступным с клавиатуры), кольцо + точка рисует .resolution-modal__check. */
.resolution-modal__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 610px;
  max-width: 100%;
  margin: 20px auto 0;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

.resolution-modal__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.resolution-modal__check {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #888;
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

.resolution-modal__check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.resolution-modal__option input:checked + .resolution-modal__check {
  border-color: var(--color-accent);
}

.resolution-modal__option input:checked + .resolution-modal__check::after {
  transform: scale(1);
}

.resolution-modal__option input:focus-visible + .resolution-modal__check {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  /* По 2 в ряд; wrap + justify-content:center оставляет третью карточку
     той же ширины по центру следующего ряда. */
  .resolution-modal .resolution-modal__list {
    flex-wrap: wrap;
    gap: 15px;
  }

  .resolution-modal .resolution-modal__list > li {
    flex: 0 0 calc(50% - 7.5px);
  }

  .resolution-modal__item {
    padding: 20px 8px 14px;
  }
}

/* ==========================================================================
   Попап "Зв'язатися з нами" (связаться.jpg)
   ========================================================================== */

.contact-popup {
  width: 760px;
}

.contact-popup__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 30px 30px;
}

.contact-popup__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-popup__intro p {
  color: #ccc;
  font-size: 16px;
}

.contact-popup__label {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 10px;
}

.contact-popup__phone {
  display: block;
  color: var(--color-text);
  font-size: 34px;
  font-weight: 700;
}

.contact-popup__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.messenger-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: #303030;
  color: #ccc;
  font-size: 16px;
  border: 1px solid #FFFFFF05;
}

.contact-popup__cta-label {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.btn--purple {
  display: inline-block;
  background-color: var(--color-accent-purple);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 30px;
  border-radius: 999px;
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
}

.contact-popup__footer {
  flex-shrink: 0;
  padding: 30px 30px;
  color: #ccc;
  font-size: 16px;
}

/* ==========================================================================
   Попап-визард "Подобрать компьютер" (Подобрать компьютер{,2,3}.png).
   Тот же .popup (панель справа, шапка, крестик), что и .contact-popup; внутри —
   степпер, тело с тремя шагами (переключает JS через hidden + data-step на
   самом попапе) и футер, где нужные кнопки показываются по data-step.
   ========================================================================== */

.wizard-popup {
  --wizard-progress: 0.3333;
  --wizard-field-bg: #262626;
  width: 760px;
}

.wizard-popup [hidden] {
  display: none !important;
}

.wizard-popup__form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Степпер: серый трек на всю ширину + лаймовая заливка до текущего шага
   (1/3, 2/3, 1). Трек и заливка — псевдоэлементы списка, 20px от краёв.
   Живёт внутри .wizard-popup__body (см. index.php), поэтому прокручивается
   вместе с формой — горизонтальный отступ уже даёт padding самого body,
   здесь только отступ снизу до первого поля. */
.wizard-stepper {
  position: relative;
  flex-shrink: 0;
  display: flex;
  margin-bottom: 20px;
  padding: 0 20px;
  border-radius: 10px;
  background-color: #202020;
}

.wizard-stepper::before,
.wizard-stepper::after {
  content: '';
  position: absolute;
  left: 20px;
  bottom: 10px;
  height: 3px;
  border-radius: 999px;
}

.wizard-stepper::before {
  right: 20px;
  background-color: #303030;
}

.wizard-stepper::after {
  width: calc((100% - 40px) * var(--wizard-progress));
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.wizard-stepper__item {
  flex: 1;
  padding: 10px 5px 23px;
  color: #ccc;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.wizard-stepper__item.is-current {
  color: var(--color-text);
}

.wizard-popup__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 30px 20px;
  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.wizard-popup__body::-webkit-scrollbar {
  width: 10px;
}

.wizard-popup__body::-webkit-scrollbar-track {
  background: transparent;
}

.wizard-popup__body::-webkit-scrollbar-thumb {
  background-color: #797979;
  border-radius: 999px;
}

.wizard-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wizard-group + .wizard-group {
  margin-top: 30px;
}

.wizard-group__title {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.wizard-step > .wizard-group__title {
  margin-bottom: 0;
}

.wizard-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* Чип = label с настоящим input внутри (скрыт визуально, но доступен с
   клавиатуры); состояние рисует соседний span. */
.wizard-chip {
  position: relative;
  display: inline-flex;
}

.wizard-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wizard-chip span {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: var(--wizard-field-bg);
  color: #ccc;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wizard-chip:hover span {
  color: var(--color-text);
}

.wizard-chip input:checked + span {
  background-color: var(--color-accent-purple);
  color: var(--color-text);
}

.wizard-chip input:focus-visible + span {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.wizard-textarea,
.wizard-input {
  display: block;
  border: 1px solid #FFFFFF05;
  border-radius: 10px;
  background-color: #282828;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}
.wizard-textarea:focus,
.wizard-input:focus{
  border: 1px solid #ffffff10;
  outline: none;
  background-color: #343434;
}
.wizard-textarea {
  width: 100%;
  height: 98px;
  padding: 20px;
  resize: none;
}

.wizard-textarea::placeholder,
.wizard-input::placeholder {
  color: var(--color-text-muted);
}

.wizard-field {
  margin-top: 25px;
}

.wizard-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.wizard-input {
  width: 350px;
  max-width: 100%;
  height: 42px;
  padding: 0 10px;
  caret-color: var(--color-accent);
}


.wizard-input.is-invalid {
  border-color: #B32929;
}

/* Пока поле в фокусе, ошибка визуально прячется (граница + подпись поля) —
   не пропадает насовсем, is-invalid остаётся на input'е. Если после фокуса
   ничего не поменяли (событие input не сработало), при blur фокус снимается
   и ошибка появляется снова тем же классом. JS снимает is-invalid насовсем
   только при реальном изменении значения (см. обработчик 'input' в JS). */


.wizard-field:has(.wizard-input.is-invalid:not(:focus)) label {
  color: #B32929;
}

.wizard-note {
  max-width: 570px;
  margin-top: 30px;
  color: #ccc;
  font-size: 14px;
  line-height: 1.4;
}

.wizard-popup__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 30px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wizard-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

.wizard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 0;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Футер один на все шаги: "Назад" появляется с шага 2 (на 1-м возвращаться
   некуда), "Оставить только контакты" — только на 1-м, "Далее" — на 1-2,
   "Отправить заявку" — только на 3-м. */
.wizard-popup[data-step="1"] .wizard-link--back,
.wizard-popup:not([data-step="3"]) .wizard-btn--submit,
.wizard-popup:not([data-step="1"]) .wizard-link--skip,
.wizard-popup[data-step="3"] .wizard-btn--next {
  display: none;
}

/* ==========================================================================
   Мобільне бокове меню (боковое меню.png / боковое меню що-то вибрано.png).
   Той самий "оверлей + висувна панель" патерн, що й .popup вище (спільний
   .popup-overlay, керується initPopup у index.php), лише зліва замість
   праворуч. Всередині — два повноекранні "екрани" (.mobile-nav__view--root/
   --sub), що самі перемикаються горизонтальним translateX через клас
   .is-showing-sub на .mobile-nav — цим власна JS у index.php керує окремо
   від initPopup (той відкриває/закриває саму панель як єдине ціле й нічого
   не знає про перемикання екранів усередині неї). */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 760px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

/* position:absolute; inset:0 — обидва екрани займають весь .mobile-nav і
   лежать один на одному, а не в потоці поруч, тому перемикання це лише
   translateX самих екранів, без зміни розмірів/скролу батька. */
.mobile-nav__view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-dark);
  transition: transform 0.3s ease;
}

.mobile-nav__view--root {
  transform: translateX(0);
}

.mobile-nav__view--sub {
  transform: translateX(100%);
}

.mobile-nav.is-showing-sub .mobile-nav__view--root {
  transform: translateX(-100%);
}

.mobile-nav.is-showing-sub .mobile-nav__view--sub {
  transform: translateX(0);
}

.mobile-nav__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
}

.mobile-nav__close,
.mobile-nav__back {
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.mobile-nav__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 30px 30px;
  scrollbar-width: thin;
  scrollbar-color: #797979 transparent;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-nav__link {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}

.mobile-nav__link:hover {
  color: #B7B7B7;
}

.mobile-nav__label {
  color: #CCCCCC;
  font-size: 16px;
  margin-bottom: 10px;
}

.mobile-nav__phone {
  display: block;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.mobile-nav__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.mobile-nav__hours {
  color: #B7B7B7;
  font-size: 16px;
}

/* .social-links сам лише задає gap/flex (style.css вище) — коло-фон іконок
   тут своє, а не .site-footer .social-links a (той сидить у зовсім іншому
   контексті); той самий приз "затемнене коло під готовою SVG-іконкою", лише
   трохи більший діаметр під мобільний тап-таргет. */
.mobile-nav__socials .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #303030;
  border: 1px solid #FFFFFF05;
}

.mobile-nav__socials .social-links img {
  display: block;
}

/* Підменю (.mobile-nav__sub) рендериться в index.php з того самого
   $navDropdowns, яким уже користується десктопне мега-меню — тож колонки
   всередині (.main-nav__dropdown-col/-title/-list--catalog) вже мають
   потрібну типографіку без жодного нового правила тут, лишається тільки
   поставити самі колонки одна під одною (замість поруч, як на десктопі) з
   вертикальним відступом між ними. Приховання неактивних підменю — просто
   нативний [hidden] (сервер/JS ставлять його на всіх, крім поточного), тут
   не нейтралізований жодним іншим правилом, тож звичний display:none. */
.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Той самий "display:flex перебиває нативний [hidden]" підступ, що вже
   зустрічався в .site-footer-item__panel — тут та ж рівна специфічність
   (клас проти атрибута), тож без явного правила нижче JS-приховані підменю
   (усі, крім поточного пункту) все одно рендерились би видимими одне під
   одним. */
.mobile-nav__sub[hidden] {
  display: none;
}

/* Плаваюча кнопка "Зв'язатися з нами" (massage-icon.svg — вже готовий кружок
   із власним блюром/тінню, запечений у самому SVG figma-експортом, тому тут
   не додається жоден фон/рамка). Прив'язана до вікна браузера
   (position:fixed), а не до .site-footer чи іншого контейнера — лишається
   на місці під час скролу сторінки. z-index нижче за .popup-overlay (1100),
   щоб теж затемнювалась/блюрилась разом з рештою сайту, поки відкритий
   якийсь попап.

   backdrop-filter: blur(14px) — це окремий ефект від того, що вже
   намальовано всередині SVG: сама іконка лише візуально виглядає
   розмитою/світиться, але не розмиває контент СТОРІНКИ позаду кнопки під
   час скролу. border-radius:50% тут обов'язковий — без нього backdrop-filter
   розмивав би квадратну область під прямокутним боксом кнопки, а не лише
   коло під іконкою. */
.message-fab {
  position: fixed;
  right: 50px;
  bottom: 100px;
  z-index: 1050;
  width: 70px;
  height: 70px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  line-height: 0;
  cursor: pointer;
  animation: message-fab-pulse 6s ease-in-out infinite;
}

.message-fab img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Кільце, що розходиться від кнопки назовні й гасне — той самий колір, що й
   заповнення кружка в самому massage-icon.svg (#9100FF). Ключові кадри обох
   анімацій тримають більшу частину 6-секундного циклу нерухомою (0%→8%/100%
   без змін) — так кнопка "оживає" короткими імпульсами час від часу, а не
   смикається безперервно. */
.message-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #9100FF;
  opacity: 0;
  animation: message-fab-ring 6s ease-out infinite;
}

@keyframes message-fab-pulse {
  0%, 8%, 100% {
    transform: scale(1);
  }
  4% {
    transform: scale(1.12);
  }
}

@keyframes message-fab-ring {
  0%, 5% {
    transform: scale(1);
    opacity: 0.55;
  }
  40% {
    transform: scale(1.7);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-fab,
  .message-fab::after {
    animation: none;
  }
}

/* ==========================================================================
   Нижня мобільна навігація (навбар.png) — фіксована панель із 4 кнопками
   (Меню / Сохранить PDF / Сохранить ссылку / Корзина). Це перший і поки
   єдиний breakpoint для загального лейауту сторінки (main > section інакше
   не адаптивний, див. коментар на початку файлу) — навмисно вузько
   заточений під саму цю панель, а не спроба зробити весь сайт responsive.
   На десктопі (>1200px) панелі немає в потоці взагалі (display:none), щоб
   не займати місце. Іконки — images/icon/mob-footer-nav/*.svg, уже білі
   (fill запечений у самому SVG, як і решта іконок проєкту).

   Кнопка "Корзина" і "Меню" перевикористовують вже готовий попап-механізм
   (initPopup у index.php) через ту саму розмітку [data-cart-toggle]/
   aria-controls="cart-popup" і [data-mobile-nav-toggle]/aria-controls=
   "mobile-nav", що й однойменні кнопки в шапці — toggleSelector там
   навмисно розрахований на кілька елементів, що ділять один попап (як
   phone-кнопка й .message-fab ділять #contact-popup). "Сохранить PDF"/
   "Сохранить ссылку" поки без обробників — контентний геп, не вигадувати
   їм поведінку, поки не попросять. */
.mobile-footer-nav {
  display: none;
}

@media (max-width: 1200px) {
  /* На цій ширині .site-header більше не "їде" зі сторінкою (position:
     sticky в базовому правилі вище) — стає звичайним статичним блоком у
     потоці. Саме це й дозволяє .mobile-footer-nav нижче виїжджати знизу по
     скролу без ризику наїхати на шапку чи битись з її власною is-scrolled-
     анімацією: на мобільному дві "прилипаючі" панелі одночасно (шапка
     зверху, навігація знизу) не потрібні за задумом. */
  .site-header {
    position: static;
  }

  /* Прибрана з очей у самому верху сторінки (перші 100px скролу) і виїжджає
     знизу translateY-переходом, щойно scrollY переходить цю межу — .is-
     visible перемикає JS в index.php (проста абсолютна межа scrollY, не
     напрямок скролу, як у is-scrolled шапки). */
  .mobile-footer-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--color-bg-dark);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0px -1px 3px 0px #0000004D;
    height: 60px;
  }

  .mobile-footer-nav.is-visible {
    transform: translateY(0);
  }

  .mobile-footer-nav ul {
    display: flex;
  }

  .mobile-footer-nav li {
    flex: 1;
  }

  .mobile-footer-nav__item {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 2px;
    background: none;
    border: none;
    font-family: var(--font-main);
    /* 9.5px, не 11 — при більшому розмірі "Сохранить ссылку" (найдовший
       підпис) уже не влазить в одну чверть колонки на типових мобільних
       ширинах (~360–430px) і переносититься на 2 рядки, чого немає в
       навбар.png; виміряно через canvas measureText з тим самим шрифтом. */
    font-size: 9.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .mobile-footer-nav__item img {
    flex-shrink: 0;
  }

}

/* ==========================================================================
   Каталог (catalog.php) — крихти, заголовок, тулбар/сортування, сітка карток,
   постраничная навигация. Ширини виміряні пиксельно з каталог.png: смуга
   контенту 1505px (та сама, що й скрізь), колонка фільтрів 275px + 30px
   відступ до сітки, сітка карток 1200px. Сама сітка фільтрів
   (.catalog__sidebar) навмисно порожня — вёрстка відкладена.
   ========================================================================== */

/* Как и .topbar/.topbar__inner (см. коментар у style.css вище) —
   .catalog__head/.catalog__layout самі full-bleed (фон на всю ширину
   в'юпорту, main > section {width:100%} тут ні до чого — це звичайні div),
   а __inner несе max-width:1505px; margin-inline:auto. Без цього фон був би
   лише 1505px завширшки замість на всю сторінку, як у решти секцій
   (кожна сама фарбує свій background-color, глобального фону на body/main
   у проєкті нема — див. .categories/.builds/.faq тощо). */
/* Крихти й заголовок — два окремих full-bleed блоки (той самий
   .catalog__head/__inner паттерн, продубльований під .catalog__crumbs),
   розділені спільним .hr-delim-sm, а не один блок з розділювачем
   усередині — узгоджено з користувачем. Падінги обох __inner підібрані
   так, щоб сумарний вертикальний ритм лишився таким самим, як був
   у єдиному блоці (25px згори, 20px знизу, 20px самого роздільника). */
.catalog__crumbs {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.catalog__crumbs__inner {
  max-width: 1505px;
  margin-inline: auto;
  padding: 25px 0 25px;
}

.catalog__head {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.catalog__head__inner {
  max-width: 1505px;
  margin-inline: auto;
  padding: 20px 0 20px;
}

.catalog__title {
  font-size: 40px;
  font-weight: 700;
  margin-top: 0px;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.breadcrumbs__item a {
  color: #ccc;
}

.breadcrumbs__item a:hover {
  color: var(--color-accent);
}

.breadcrumbs__current {
  color: var(--color-text-muted);
}

.breadcrumbs__sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.catalog__layout {
  background-color: #141414;
  color: var(--color-text);
}
.catalog__layout .hr-delim-big{
  background-color: transparent;
}

/* .catalog__layout__inner тепер flex-колонка з двох рядків: спільний
   .catalog__toolbar ("Фильтры" + "Сортировать по:", на всю ширину 1505px)
   і нижче .catalog__columns (сам двоколонковий спліт сайдбар/контент).
   "Фильтры" раніше жив всередині .catalog__sidebar і вирівнювався з
   "Сортировать по:" вручну (однакові line-height/margin на двох різних
   елементах у різних колонках) — тепер вони буквально сусіди в одному
   flex-рядку з justify-content:space-between, вирівнювання само собою, без
   підгонки висот. */
.catalog__layout__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.catalog__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: var(--color-text);
}

/* line-height:39px, не тільки font-size — навіть у спільному flex-рядку з
   .catalog__toolbar-sort align-items:center центрує кожного нащадка за
   ВЛАСНОЮ висотою блоку, а не по спільній лінії тексту: без цього рядок
   висотою 30px (20×1.5, дефолтний line-height) центрувався б окремо від
   39px-ї пілюлі .sort-select (padding 9px×2 + line-height 21px) — видима
   різниця ~4-5px. Однакова висота блоку — і center вирівнює однаково. */
.catalog__sidebar-title {
  font-size: 18px;
  font-weight: 700;
}

.catalog__toolbar-sort {
  display: flex;
  align-items: center;
  gap: 20px;
}

.catalog__toolbar-label {
  font-size: 14px;
}

/* Мобільна (≤992px) кнопка "Фильтры" (filter-mob.svg) з тулбара —
   КНОПКИФИЛЬТРОВТЕЛЕФОН.png. На десктопі непотрібна ("Фильтры" уже є як h2
   зліва в цьому ж .catalog__toolbar) — прихована тут базово, пілюля/показ —
   css/adaptive.css. Відкриває .catalog__sidebar як висувну панель (той самий
   .popup-overlay/initPopup механізм, що й кошик/wizard) — див.
   partials/footer.php. */
.catalog__mobile-filters-btn {
  display: none;
}

.catalog__columns {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* 274px — заміряно/уточнено користувачем (раніше 275px, з першого
   пиксель-заміру каталог пк.png — різниця в 1px не помітна, лишаємо як
   явно попрошене значення). max-width, а не тільки flex-basis: сам
   .catalog__sidebar тепер не тримає "Фильтры" (він переїхав у
   .catalog__toolbar вище), тож нічого всередині вже не могло б розпирати
   колонку ширше — max-width тут лише явна страховка на майбутнє. */
.catalog__sidebar {
  flex: 0 0 274px;
  max-width: 274px;
  color: var(--color-text);
}

/* Шапка "Фильтры" + кнопка закриття всередині .catalog__sidebar — потрібна
   лише коли він стає висувною панеллю (≤992px, css/adaptive.css); на
   десктопі "Фильтры" вже є як h2 в .catalog__toolbar, тож тут не рендериться
   візуально. Той самий .popup__header/.popup__close вигляд, що й у
   cart-popup/contact-popup. */
.catalog__sidebar-popup-header {
  display: none;
}

/* Прилипла кнопка "Показать (N)" внизу панелі фільтрів — лише ≤468px
   (фильтрытелефон.png), де .catalog__sidebar стає повноекранним і замінює
   собою бокові .filter-option__plate (ті на такій вузькій панелі ламались —
   виїжджали за її межі). На ширших екранах не рендериться візуально. */
.catalog__sidebar-popup-footer {
  display: none;
}

.catalog__content {
  flex: 1;
  min-width: 0;
}

/* .sort-select переиспользует общий .select (стиль/JS — см. css/style.css
   выше и общий обработчик в partials/footer.php,
   .select:not([data-games-select]):not([data-resolution-select])), только
   добавляет собственную пилюлю-обёртку и свой шеврон — специально не
   .select__ico, чтобы не подхватить чужой rotate(90deg) (тот расчитан на
   arr-selet-right.svg, который поворотом на 90° превращается из "вправо" в
   "вниз"; здесь же шеврон изначально смотрит вниз, поэтому переворот на
   открытии — 180°, не 90°). */
.sort-select {
  position: relative;
  background-color: #202020;
  padding: 6px 15px;
  gap: 12px;
  min-width: 190px;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.sort-select .select__field {
  font-size: 16px;
  font-weight: 400;
}

/* Іконка сортування (short-mob.svg) — частина мобільної (≤992px) пілюлі
   тулбара (КНОПКИФИЛЬТРОВТЕЛЕФОН.png), на десктопі в .sort-select її нема —
   прихована тут базово, показ/розмір — css/adaptive.css. */
.sort-select__icon {
  display: none;
  flex-shrink: 0;
}

.sort-select__chevron {
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sort-select.is-open .sort-select__chevron {
  transform: rotate(180deg);
}

.sort-select .select__list {
  right: 0;
  left: auto;
  min-width: 220px;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 15px;
  margin-bottom: 24px;
}

.catalog__more {
  font-size: 16px;
  padding: 8px 30px;
  border-radius: 25px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  color: var(--color-text);
}

.pagination__arrow {
  display: inline-flex;
  color: var(--color-text);
}

.pagination__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.pagination__arrow:not(:disabled):hover {
  color: var(--color-accent);
}

.pagination__item {
  font-size: 16px;
  color: #fff;
  padding: 4px 2px;
  font-weight: 700;
  min-width: 25px;
  text-align: center;
}

.pagination__item:hover {
  color: var(--color-text);
}

.pagination__item.is-active {
  color: var(--color-accent);
  font-weight: 700;
}

.pagination__ellipsis {
  font-size: 16px;
  color: #fff;
}

/* ==========================================================================
   Каталог: фільтри (.catalog__sidebar > .filters, partials/blocks/filters-sidebar.php)
   Виміряно пиксельно з окремого референсу "каталог пк.png" (повна висота
   лівої колонки каталог.png). Роздільники між блоками — border-top:#373737
   (той самий колір, що вже використовує .badge__ring-track) на кожному
   .filters__group/.filters__category, крім .filters__price — перед ним
   (одразу під кнопкою "Подобрать компьютер") роздільника в макеті нема.
   ========================================================================== */

.filters {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}

.filters__cta {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 10px;
  padding: 5px 15px;
}

.filters__label {
  font-size: 16px;
  font-weight: 700;
}
.filters__label + .filter-option{
  margin: 8px 0;
}
.filters__price {
  padding-bottom: 15px;
}

.filters__price-inputs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  border: 1px solid #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

/* Оформлення взяте з .wizard-input (partials/footer.php, попап "Подобрать
   компьютер") — той самий бордер/фон/фокус/плейсхолдер, лише розмір/паддінги
   свої, під компактні поля ціни. */
.filters__price-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #FFFFFF05;
  border-radius: 10px;
  background-color: #282828;
  padding: 7px 10px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  caret-color: var(--color-accent);
}

.filters__price-input:focus {
  border: 1px solid #ffffff10;
  outline: none;
  background-color: #343434;
}

.filters__price-input::placeholder {
  color: var(--color-text-muted);
}

.filters__price-sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Слайдер із двома повзунками — рухає JS (data-range-slider у
   partials/footer.php), тут лише візуальна частина: тонкий трек, лаймова
   заливка між повзунками (.range-slider__fill, ширина/позиція — інлайновий
   style від JS), самі повзунки — порожні кола з лаймовою обвідкою. */
.range-slider {
  position: relative;
  height: 16px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.range-slider__track {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 4px;
  background-color: #323232;
  border-radius: 4px;
  transform: translateY(-50%);
  border: 1px solid #FFFFFF05;
}

.range-slider__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background-color: var(--color-accent);
  border-radius: 4px;
  transform: translateY(-50%);
  border: 1px solid #FFFFFF05;
}

.range-slider__handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #141414;
  border: 3px solid var(--color-accent);
  transform: translate(-50%, -50%);
  cursor: grab;
}

.range-slider__handle:active {
  cursor: grabbing;
}

.filters__category,
.filters__group {
  border-top: 1px solid #373737;
  padding-block: 15px;
}

.filters__category {
  display: flex;
  flex-direction: column;
}

/* Шеврон групи фільтра НЕ міняє колір при розкритті (лишається білим) —
   на відміну від .accordion-item__trigger/.faq-item__trigger, де розкритий
   стан підсвічує шеврон акцентом; тут по референсу колір завжди однаковий,
   міняється лише напрямок (rotate). */
.filters__group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/* Обгортка тільки навколо тригера "Активные фильтры" (filters-sidebar.php) —
   position:relative тут, а не на .filters__group-trigger, бо плашка
   .filter-option__plate лежить поруч із тригером, а не всередині нього
   (не можна вкладати <button> в <button>, див. коментар у розмітці). */
.filters__group-trigger-row {
  position: relative;
}

.filters__group-trigger-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

/* Живий лічильник "(N)" у назви серії Процессора — сума відмічених у ній
   пунктів, перераховується в JS (partials/footer.php). Приглушений і
   звичайної жирності навмисно, на відміну від жирного (700) тексту самого
   тригера поруч. */
.filters__group-count {
  color: #888;
  font-weight: 400;
}

.filters__group-trigger svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.filters__group-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.filters__group-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 15px;
}

/* Без цього [hidden] програє .filters__group-panel{display:flex} вище — та
   ж специфічність (0,0,1,0), але наше правило йде пізніше в каскаді, тож
   саме воно перемагало б і група лишалась видимою навіть із атрибутом
   hidden. Той самий прийом, що вже є в .site-footer-item__panel[hidden]. */
.filters__group-panel[hidden] {
  display: none;
}

.filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
  font-weight: 400;
}

/* count===0 — товару з такою характеристикою немає в наявності: сірий,
   напівпрозорий, недоступний для вибору. pointer-events:none — найпростіший
   спосіб дійсно унеможливити клік (і по колу, і по .filter-option__label —
   тому окрема disabled-перевірка в JS не обов'язкова, але лишена як
   страховка, див. partials/footer.php); input[disabled] додатково знімає
   фокус/клавіатурну активацію нативно. */
.filter-option--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.filter-option--disabled .filter-option__box{
  border-color: #888;
}
.filter-option--disabled .filter-option__label{
  color: #888;
}
/* Чекбокс (насправді input type="checkbox" — див. коментар над
   render_filter_option() у filters-sidebar.php, картинка лишається
   "радіо"-круглою за референсом, хоча в межах групи можна відмітити
   кілька) — власний гурток замість нативного вигляду інпута (reset.css вже
   зняв appearance): порожнє кільце, при :checked всередині з'являється
   менша лаймова крапка через ::after — той самий "кільце + внутрішня
   крапка", а не суцільна заливка кола, що і в референсі. */
.filter-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.filter-option__box {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #6c6c6c;
  margin-top: 1px;
}

.filter-option__input:checked + .filter-option__box::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.filter-option__input:checked ~ .filter-option__label {
  color: var(--color-accent);
}

/* Довідково: .filter-option__label — справжній <a href="#">, не <span>
   (див. render_filter_option()) — клікабельний без переходу, JS перехоплює
   клік і сам тоглить чекбокс (нативний "клік по лейблу тоглить input" не
   спрацьовує, коли клікнутий елемент сам по собі інтерактивний — <a> в
   цьому випадку). Візуально нічим не відрізняється від span — reset.css
   вже зняв колір/підкреслення з посилань глобально. */
.filter-option__label {
  flex: 1;
}

/* "Все" (data-filter-all) лишає свій лічильник видимим завжди — тільки
   конкретні варіанти ховають число під :checked, замінюючи його на
   .filter-option__plate праворуч (див. нижче). */
.filter-option__input:checked:not([data-filter-all]) ~ .filter-option__count {
  display: none;
}

.filter-option__count {
  color: #ebc300;
  font-size: 14px;
}

/* "Показать (N)" — лаймова плашка-виноска, зʼявляється праворуч від
   щойно активованого (не "Все") пункту фільтра, поверх сітки товарів (немає
   overflow:hidden на жодному предку — .filters/.catalog__sidebar/
   .catalog__layout* — тож абсолютне позиціювання спокійно виходить за межі
   275px-колонки, так само як і в референсі). ::before — трикутник-хвостик,
   що вказує на сам пункт. Видима лише ОДНА плашка одночасно (попередня
   ховається, коли активується наступна — те саме "один активний" звужене
   до однієї плашки, не групи), тому показ/приховання і текст ("Показать (N)",
   N — сума count() усіх наразі відмічених пунктів по всьому сайдбару, а не
   власне число цього одного пункту) керує JS через клас .is-plate-open на
   .filter-option (partials/footer.php) — не суто CSS :checked, як у першій
   версії. */
.filter-option__plate {
  display: none;
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background-color: var(--color-accent);
  color: #141414;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 20px;
  border-radius: 30px;
}

.filter-option__plate::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 8px 12px 8px 0;
  border-color: transparent var(--color-accent) transparent transparent;
}

/* Не .filter-option.is-plate-open — .is-plate-open тепер вішається і на
   .filters__group-trigger (фішки), і на .filters__price-inputs (ціна), не
   лише на .filter-option, тож селектор без прив'язки до конкретного якоря. */
.is-plate-open .filter-option__plate {
  display: block;
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 5px;
  padding: 0px 5px 0px 5px;
  font-size: 14px;
  color: #ccc;
  background: #FFFFFF1A;
}

.filters__chip-remove {
  font-size: 15px;
  line-height: 1;
  color: inherit;
}

.filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Той самий [hidden] проти display:flex/inline-flex-за-замовчуванням баг,
   що й .filters__group-panel/.site-footer-item__panel — базове правило
   вище має ту саму специфічність (0,0,1,0) і йде раніше, тож без цього
   [hidden] кнопка лишалась би видимою навіть з атрибутом. */
.filters__reset[hidden] {
  display: none;
}

.filters__reset:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Каталог периферії (catalog-peripherals.php)
   ========================================================================== */

/* Навігація-слайдер по категоріях (Swiper, slidesPerView:'auto' + freeMode
   sticky у footer.php): pill-и різної ширини, слайдер починається від лівого
   краю контейнера й вилітає вправо за нього — overflow:visible на .swiper,
   обрізка по краю в'юпорта — на .peref-nav. */
.peref-nav {
  background-color: var(--color-bg-dark);
  overflow: hidden;
  padding-bottom: 20px;
}

.peref-nav__inner {
  max-width: 1505px;
  margin-inline: auto;
}

.peref-nav__slider {
  overflow: visible;
}

.peref-nav__slider .swiper-slide {
  width: auto;
}

.peref-nav__link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #202020;
  border: 1px solid #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
  color: #CCC;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.2s, color 0.2s;
}

.peref-nav__link:hover {
  color: var(--color-accent);
}

.peref-nav__link.is-active {
  background-color: var(--color-accent);
  color: #111;
  font-weight: 500;
}

/* Карточка товару периферії */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #202020;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px #0000004D;
  overflow: hidden;
}

.pcard__media {
  position: relative;
  display: block;
  height: 240px;
  overflow: hidden;
  isolation: isolate;
}

.pcard__media img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 14px;
  width: auto;
  max-width: 70%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

/* Блики з card-glare.html (289×240): позиції/ширини переведені у % від 289px,
   щоб працювати при іншій ширині картки; висоти/top — у px, бо висота фіксована. */
.pcard__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pcard__glare > span {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.pcard__glare-glow {
  left: 20.76%; top: 50px;
  width: 58.82%; height: 83px;
  background: #fff;
  opacity: .34;
  filter: blur(24px);
}

.pcard__glare-shadow {
  left: -14.88%; top: 149px;
  width: 128.03%; height: 23px;
  background: #000;
  opacity: .55;
  filter: blur(23.5px);
}

.pcard__glare-rim {
  left: 18.86%; top: 200.5px;
  width: 60.21%; height: 9px;
  background: #fff;
  opacity: .27;
  filter: blur(10.5px);
}

.pcard__body {
  padding: 0 15px;
}

.pcard__category {
  font-size: 12px;
  font-weight: 700;
  color: #CCC;
}

.pcard__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
  margin: 2px 0 10px;
  color: #fff;
}

.pcard__stock {
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #888;
  font-weight: 600;
}

.pcard__stock::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #1ed760;
}

.pcard__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 15px 15px;
}

.pcard--out .pcard__media img,
.pcard--out .pcard__body,
.pcard--out .pcard__footer {
  opacity: 0.4;
}

.pcard--out .pcard__stock::before {
  background: #e5484d;
}

.pcard--out .btn--icon-round {
  cursor: not-allowed;
}

/* ==========================================================================
   Клиентам (clients.php) — карточки разделов. Размер 488×450 = размер самих
   картинок; 3 в ряд + 2 по центру (flex-wrap + justify-content:center).
   Остальной вид берётся у .category-card.
   ========================================================================== */
.clients {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.clients__list {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Собственные стили, а не .category-card: на главной у .category-card в
   adaptive.css много переопределений (flex-grow, width !important, absolute
   h3/кнопка), которые растягивали последнюю карточку здесь. */
.client-card {
  position: relative;
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: 488px;
  aspect-ratio: 488 / 450;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

.client-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 25px;
  cursor: pointer;
}

.client-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.client-card:hover img {
  transform: scale(1.1);
}

.client-card .btn--outline {
  position: relative;
  z-index: 1;
}

.client-card__more-uk {
  display: none;
}

.client-card h3 {
  font-size: 24px;
  z-index: 3;
}

.client-card__text {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-size: 16px;
  color: #B7B7B7;
}

/* ==========================================================================
   Блог (blog.php) — сетка карточек статей 4 в ряд. Сама карточка —
   .article-card с главной; тут только мета-строка (тег + дата) и контекст
   сетки (.blog__grid .article-card), чтобы не менять слайдер новостей.
   ========================================================================== */
.blog__subtitle {
  font-size: 24px;
  font-weight: 500;
  color: #b7b7b7;
}

.blog {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.blog__grid {
  max-width: 1505px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.blog__grid .article-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog__grid .article-card h3 {
  padding: 15px 15px 10px;
  font-size: 18px;
}

.blog__grid .article-card p {
  padding: 0 15px 15px;
  font-size: 16px;
}

.article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 0 15px 12px;
  font-size: 14px;
  color: #888;
}

.article-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article-card__meta-item img {
  width: 12px;
  height: 12px;
}

.blog .pagination {
  margin-top: 20px;
}

/* ==========================================================================
   Поиск (search.php) — поле поиска, заголовок результатов, сетка 5 в ряд.
   Карточки — .build-card (сборки) и .build-card.product-card (периферия).
   ========================================================================== */
.search-page {
  /* padding, а не margin у формы: margin схлопывался сквозь родителя и
     оставлял белую полосу над блоком */
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

/* full-bleed фон + узкий контент — как .topbar/.topbar__inner */
.search-page__inner {
  max-width: 1505px;
  margin-inline: auto;
}

.search-page__form {
  position: relative;
  width: 450px;
  max-width: 100%;
  margin: 0 auto 35px;
}

.search-page__input {
  width: 100%;
  height: 42px;
  padding: 0 80px 0 20px;
  border: 1px solid #FFFFFF05;
  border-radius: 25px;
  background: #282828;
  box-shadow: 0px 1px 3px 0px #0000004D;
  color: #CCC;
  font-family: inherit;
  font-size: 16px;
  caret-color: var(--color-accent);
}

.search-page__input:focus {
  outline: none;
}

.search-page__clear,
.search-page__submit {
  position: absolute;
  top: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: none;
  color: #888888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-page__clear { right: 38px; }
.search-page__submit { right: 4px; }

.search-page__clear img { width: 12px; height: 12px; }
.search-page__submit img { width: 30px; height: 30px; }

.search-page__clear:hover,
.search-page__submit:hover {
  opacity: 0.7;
}

.search-page__title {
  font-size: 24px;
  font-weight: 700;
}

.search-page__title span {
  font-weight: 500;
  color: #ccc;
}

.search-page__meta {
  margin-top: 10px;
  font-size: 16px;
  color: #888;
}

.search-page__tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.search-page__tab {
  padding: 7px 30px;
  border-radius: 999px;
  background-color: #272727;
  color: #ccc;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.search-page__tab.is-active {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
}

.search-page__grid > li[hidden] { display: none; }

.search-page__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin: 20px 0 24px;
}

.product-card__stock {
  position: relative;
  padding: 0 15px 0 29px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #ccc;
}

.product-card__stock::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #2dd25a;
}

/* Страницы с фоном #141414 (catalog.php, catalog-peripherals.php): страница
   задаёт $mainClass до header.php, переменная переопределяется только внутри
   <main> — шапка и футер остаются на --color-bg-dark. */
main.main--bg-141414 {
  --color-bg-dark: #141414;
}

/* ==========================================================================
   Баннер страницы периферии (peripherals.php) — фон-картинка 1920×500 на
   всю ширину, текст слева. На мобильном (adaptive.css) картинка идёт в
   потоке сверху, текст под ней по центру.
   ========================================================================== */
.page-hero {
  position: relative;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  overflow: hidden;
}

.page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.page-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1505px;
  min-height: 500px;
  margin-inline: auto;
}

.page-hero__content {
  max-width: 610px;
}

.page-hero__content h1 {
  font-size: 40px;
  font-weight: 700;
}

.page-hero__content p {
  font-size: 16px;
  color: #ccc;
}

/* "Столы" — одиночная карточка отдельным рядом, шириной в одну карточку
   нижнего ряда ((1505 − 4×20) / 5 = 285px), по центру */
.peripherals__grid--extra {
  justify-content: center;
  margin-top: 20px;
}

.peripherals__grid--extra .peripheral-card {
  flex: 0 0 285px;
}

/* ==========================================================================
   Страница сборки (assembly.php): галерея слева (тени + фото), блок покупки
   справа, ниже — плашка "FPS в играх" с полосой для выбранной игры.
   ========================================================================== */
.assembly {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.assembly__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 40px;
  /* Нижний отступ больше верхнего — под точки пагинации, которые выведены из
     потока (см. .assembly__pagination), чтобы .assembly__info центрировался
     ровно по высоте фото, а не по фото + точкам. */
  padding: 20px 0 0;
}

.assembly__gallery {
  position: relative;
  flex: 0 0 745px;
  max-width: 745px;
  min-width: 0;
  padding-bottom: 50px;
}

.assembly__shadow {
  position: absolute;
  left: 50%;
  max-width: none;
  pointer-events: none;
  transform: translateX(-50%);
}

.assembly__shadow--top {
  top: 50%;
  width: 1141px;
  margin-top: -300px;
  opacity: 0.35;
}

.assembly__shadow--bottom {
  bottom: 10px;
  width: 1050px;
  opacity: 0.6;
}

.assembly__slider {
  position: relative;
  z-index: 1;
}

.assembly__slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Двойной класс — чтобы перебить Swiper'овский
   .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 8px }. */
.assembly__pagination.swiper-pagination-horizontal {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 30px);
  bottom: auto;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.assembly__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #4a4a4a;
  opacity: 1;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.assembly__pagination .swiper-pagination-bullet-active {
  width: 20px;
  background-color: #fff;
}

.assembly__info {
  align-self: center;
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.assembly__category {
  font-size: 18px;
  font-weight: 700;
  color: #B7B7B7;
}

.assembly__title {
  margin: 0px 0 24px;
  font-size: 40px;
  font-weight: 700;
}

.assembly__description {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 20px;
}

.assembly__code-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 0px 0 20px;
  font-size: 16px;
  font-weight: 500;
}

.assembly__code strong {
  font-weight: 500;
}

.assembly__compare {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.assembly__compare:hover {
  color: var(--color-accent);
}

.assembly__specs-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

.assembly__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2a2a2a;
}

.assembly__specs li {
  position: relative;
  padding-left: 17px;
  font-size: 16px;
  line-height: 18px;
  color: #ccc;
}

.assembly__specs li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #EBC300;
}

.assembly__buy {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid #2a2a2a;
}

.assembly__price-old {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #ccc;
}

.assembly__price-old s {
  color: #888;
}

.assembly__price-info {
  color: #888;
}

.assembly__price-new {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

.assembly__price-new span {
  font-size: 32px;
  color: #888;
  font-weight: 400;
}

.assembly__buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 187px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
}

.assembly__installment p {
  font-size: 16px;
}

.assembly__installment a {
  font-size: 16px;
  color: #888;
  text-decoration: underline;
}

.assembly__guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding-top: 20px;
}

.assembly__guarantee-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}

.assembly__guarantees p {
  font-size: 16px;
}

.assembly__guarantees span {
  font-size: 15px;
  color: #888;
}

.assembly__guarantee-link:hover span {
  color: var(--color-accent);
}

.assembly-fps {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  padding-bottom: 10px;
}

/* Копия "Краткие характеристики" для мобильного вида (после FPS); на десктопе скрыта. */
.assembly-specs-m {
  display: none;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.assembly-fps__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 10px 0 10px;
}

.assembly-fps__controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.assembly-fps__controls .filter__select {
  width: 288px;
}

.assembly-fps__game {
  position: relative;
  flex: 0 1 678px;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

.assembly-fps__game-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

.assembly-fps__game-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assembly-fps__game-name {
  font-size: 16px;
}

.assembly-fps__game-fps {
  font-size: 14px;
  color: #ccc;
}

.assembly-fps__bar {
  grid-column: 2 / -1;
  height: 10px;
  border-radius: 999px;
  background-color: #2a2a2a;
  overflow: hidden;
}

/* Градиент всегда растянут на ширину всей полосы, а заливка (--fps, 0-100) лишь
   открывает его левую часть: background-size = 100% / (--fps/100) от ширины заливки. */
.assembly-fps__bar span {
  display: block;
  width: calc(var(--fps, 0) * 1%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2DA1FF, #2DFF65) left center / calc(10000% / max(var(--fps, 1), 1)) 100% no-repeat;
}

/* ==========================================================================
   Конфигуратор сборки (assembly.php) — разметка рендерит js/assembly-config.js.
   Размеры сняты с assembly-config.png (1926px): колонка контента 1250px —
   превью 230px + зазор 20px + основная часть 1000px.
   ========================================================================== */
.acfg {
  background-color: #141414;
  color: var(--color-text);
}

.acfg__inner {
  max-width: 1577px;
  margin-inline: auto;
  padding-bottom: 60px;
}

.acfg__groups {
  max-width: 1250px;
}

.acfg__tabs {
  --acfg-gap: 50px;
  display: flex;
  gap: var(--acfg-gap);
  padding: 10px 0;
  font-size: 18px;
  font-weight: 700;
  max-width: 1505px;
  margin: 0 auto;
  /* Заливка на всю ширину экрана: тень расширяет фон за пределы контейнера,
     clip-path обрезает её по вертикали, чтобы не залить соседей сверху/снизу. */
  background-color: #202020;
  box-shadow: 0 0 0 100vmax #202020;
  clip-path: inset(0 -100vmax);
  /* Прилипает под липкой шапкой и держится до конца блока конфигуратора. */
  position: sticky;
  top: var(--site-header-h, 70px);
  z-index: 30;
  transition: top 0.25s ease;
  align-items: center;
  min-height: 48px;
  box-sizing: border-box;
}

/* Прилипшие вкладки — заливка как у шапки (#111111), в т.ч. растяжка на весь экран */
/* is-pinned — блок физически прилип к верху (не раньше, чем скрывается шапка).
   Заливка и тень уходят в ::before на всю ширину окна: clip-path у обычного состояния
   обрезал бы тень по вертикали, а spread-растяжка залила бы соседей. */
.acfg__tabs.is-pinned {
  background-color: transparent;
  box-shadow: none;
  clip-path: none;
}

.acfg__tabs.is-pinned::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background-color: #111111;
  box-shadow: 0px 4px 10px 5px #0000004D;
  pointer-events: none;
}

html.acfg-stuck {
  overflow-x: clip; /* 100vw включает ширину скроллбара */
}

/* Лид/экшены — только в прилипшем состоянии (десктоп): вкладки заменяют шапку. */
/* Отступ под вкладками — только во вкладке «Конфигуратор» */
.acfg__tabs--config {
  margin-bottom: 44px;
}

.acfg__tabs-actions {
  display: none;
  align-items: center;
}

.acfg__tabs-lead {
  align-items: center;
}

/* Список вкладок: на десктопе "прозрачный" (элементы сидят прямо в flex-контейнере
   nav), на мобильном — сам скроллится (adaptive.css), чтобы overflow не обрезал
   псевдоэлемент-заливку у nav. */
.acfg__tabs-list {
  display: contents;
}

/* Лид всегда в потоке, но схлопнут (ширина 0, margin гасит gap): при прилипании
   раскрывается слева направо, сдвигая вкладки вправо — "выезд справа". */
.acfg__tabs-lead {
  display: flex;
  gap: 25px;
  max-width: 0;
  margin-right: calc(var(--acfg-gap) * -1);
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease;
}

.acfg__tabs.is-stuck .acfg__tabs-lead {
  max-width: 75px;
  margin-right: calc(var(--acfg-gap) * -0.4); /* на десктопе ~30px до первой вкладки */
  opacity: 1;
}


.acfg__tabs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.acfg__tabs-actions {
  margin-left: auto;
  gap: 20px;
}

.acfg__tabs-phone {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

.acfg__tabs-phone .chevron {
  color: var(--color-accent);
}

.acfg__tabs-actions .icon-mask {
  width: 25px;
  height: 25px;
}

.acfg__tabs-actions .icon-button {
  padding: 0;
  color: inherit;
}

@media (min-width: 1201px) {
  .acfg__tabs.is-stuck {
    z-index: 1001; /* выше шапки (1000), ниже .popup-overlay (1100) */
  }

  .acfg__tabs.is-stuck .acfg__tabs-actions {
    display: flex;
  }

  /* шапка уезжает вверх: иначе из-под более низкой полосы вкладок торчала бы её нижняя часть */
  .site-header {
    transition: transform 0.25s ease;
  }

  html.acfg-stuck .site-header {
    transform: translateY(-100%);
  }

  /* Шапка скрыта — её topbar не должен анимироваться параллельно со слайдом. */
  html.acfg-stuck .site-header .topbar {
    transition: none;
  }

  /* top у вкладок не анимируем: прилипший блок + анимация top на скролле дают рывки */
  .acfg__tabs.is-stuck {
    transition: none;
  }
}

.acfg__tab:hover,
.acfg__tab.is-active {
  color: var(--color-accent);
}

.acfg__groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acfg__head {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 45px;
  padding: 0 0 0 28px;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.acfg__chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
  width: 18px;
  height: 10px;
}

.acfg__head {
  transition: background-color 0.3s ease;
}

.acfg__group:not(.is-open) .acfg__head {
  background-color: #202020;
}

.acfg__group:not(.is-open) .acfg__chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.acfg__title {
  flex-shrink: 0;
  font-weight: 700;
}

.acfg__summary {
  min-width: 0;
  padding-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #B7B7B7;
}

/* Раскрытие/сворачивание: grid-template-rows 0fr -> 1fr анимирует высоту
   неизвестного размера. overflow:clip (не hidden) — чтобы не создавать
   scroll-контейнер и не ломать position:sticky у .acfg__preview. */
.acfg__collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.4s;
}

.acfg__group.is-open > .acfg__collapse {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease 0.05s,
              visibility 0s;
}

.acfg__collapse-inner {
  min-height: 0;
  min-width: 0;
  overflow: clip;
}

.acfg__body {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}

.acfg__preview {
  position: sticky;
  /* --site-header-h выставляет js/assembly-config.js (высота липкой шапки, меняется при is-scrolled) */
  top: calc(var(--site-header-h, 70px) + var(--acfg-tabs-h, 0px) + 20px);
  transition: top 0.25s ease;
  flex: 0 0 230px;
  align-self: flex-start;
  padding: 20px 10px 10px;
  border-radius: 10px;
  background-color: #202020;
  text-align: center;
  font-size: 14px;
  line-height: 120%;
  color: #CCCCCC;
  font-weight: 500;
}

.acfg__preview img {
  display: block;
  width: 210px;
  height: 210px;
  margin: 0 auto 20px;
  object-fit: contain;
}

.acfg__main {
  flex: 1;
  min-width: 0;
}

.acfg__top {
  display: flex;
  gap: 12px;
}

.acfg__bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 38px;
  min-width: 0;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  background-color: #202020;
  font-size: 14px;
}

.acfg__bar-label {
  flex-shrink: 0;
  color: #b7b7b7;
}

.acfg__cats {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Затухание у краёв, пока в слайдере есть что прокручивать в эту сторону:
   справа — пока не конец (.is-end), слева — пока не начало (.is-start). */
.acfg__cats:not(.swiper-locked) {
  --fade-l: #000;
  --fade-r: #000;
}
.acfg__cats:not(.swiper-locked):not(.is-start) { --fade-l: transparent; }
.acfg__cats:not(.swiper-locked):not(.is-end) { --fade-r: transparent; }
.acfg__cats:not(.swiper-locked):not(.is-start):not(.is-end),
.acfg__cats:not(.swiper-locked):not(.is-start).is-end,
.acfg__cats:not(.swiper-locked).is-start:not(.is-end) {
  -webkit-mask-image: linear-gradient(90deg, var(--fade-l), #000 40px, #000 calc(100% - 40px), var(--fade-r));
  mask-image: linear-gradient(90deg, var(--fade-l), #000 40px, #000 calc(100% - 40px), var(--fade-r));
}

.acfg__cats .swiper-slide {
  width: auto;
}

.acfg__cat {
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}

.acfg__cat.is-active,
.acfg__cat:hover {
  color: var(--color-accent);
}

.acfg__views {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  height: 40px;
  border-radius: 8px;
  background-color: #202020;
}

.acfg__view {
  display: inline-flex;
  color: var(--color-text);
  cursor: pointer;
}

.acfg__view.is-active {
  color: var(--color-accent);
}

.acfg__view-icon {
  width: 26px;
  height: 26px;
}

.acfg__view-icon--list {
  -webkit-mask-image: url('/images/icon/acfg-list.svg');
  mask-image: url('/images/icon/acfg-list.svg');
}

.acfg__view-icon--grid {
  -webkit-mask-image: url('/images/icon/acfg-greed.svg');
  mask-image: url('/images/icon/acfg-greed.svg');
}

.acfg__list {
  margin-top: 15px;
  padding: 8px 0;
  border-radius: 10px;
  background-color: #202020;
}

.acfg__row {
  display: flex;
  align-items: center;
  height: 39px;
  padding: 0 20px 0 20px;
  font-size: 14px;
}

.acfg__row + .acfg__row {
  background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
  background-repeat: no-repeat;
  background-position: 20px 0;
  background-size: calc(100% - 40px) 1px;
}

.acfg__row.is-selected,
.acfg__row.is-selected + .acfg__row {
  background-image: none;
}

.acfg__row.is-selected {
  background-color: #353535;
}

.acfg__radio-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  height: 100%;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.acfg__radio {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #6e6e6e;
}

[aria-checked="true"] > .acfg__radio {
  border-color: #6e6e6e;
}

[aria-checked="true"] > .acfg__radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.acfg__row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.acfg__row-spec {
  margin-left: 4px;
  color: #bdbdbd;
}

.acfg__row-info,
.acfg__info {
  color: #ddd;
}

.acfg__row-info {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: 4px;
}

.acfg__info {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url('/images/icon/info-icon.svg');
  mask-image: url('/images/icon/info-icon.svg');
}

.acfg__badge {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 999px;
  background-color: #2f5df5;
  font-size: 12px;
  font-weight: 400;
}

.acfg__diff {
  min-width: 70px;
  text-align: right;
  font-size: 14px;
  color: #888;
}

.acfg__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.acfg__card {
  display: flex;
  flex-direction: column;
  min-height: 275px;
  padding: 0 10px 10px;
  border-radius: 10px;
  background-color: #202020;
  font-size: 14px;
  border: 1px solid #FFFFFF05;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.acfg__card {
  cursor: pointer;
}

.acfg__row-info[href]:hover {
  color: var(--color-accent);
}

.acfg__card.is-selected {
  background-color: #404040;
}

.acfg__card img {
  display: block;
  width: calc(100% + 20px);
  max-width: none;
  height: 180px;
  margin: 0 -10px 10px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.acfg__card-name {
  flex: 1;
  margin-bottom: 8px;
  line-height: 19px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.acfg__card-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 20px;
}

.acfg__card-foot .acfg__diff {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.acfg__radio-btn--card {
  flex: 0 0 20px;
  height: 20px;
}

.acfg__qty {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #888;
}

/* В строках списка счётчик есть только в мобильном виде (adaptive.css). */
.acfg__qty--row {
  display: none;
}

.acfg__qty button {
  font-size: 20px;
  line-height: 1;
  color: var(--color-accent);
  cursor: pointer;
}

.acfg__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.acfg__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
}


/* Плавающие карточки справа от конфигуратора (макет "плавающий блок.png"):
   покупка + плашка FPS, sticky; ширина колонки 310px. */
.acfg__layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.acfg__col {
  flex: 1;
  min-width: 0;
  max-width: 1250px;
}

.acfg__aside {
  position: sticky;
  top: calc(var(--site-header-h, 70px) + var(--acfg-tabs-h, 0px) + 20px);
  transition: top 0.25s ease, max-height 0.25s ease;
  flex: 0 0 310px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

/* Не влезает по высоте окна — JS (fitAside) прячет карточку FPS, без внутреннего скролла. */
.acfg__float--fps[hidden] {
  display: none;
}

.acfg__float {
  padding: 18px 15px 15px;
  border-radius: 12px;
  background-color: #202020;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.acfg__float-img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px;
}

.acfg__float-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 16px;
}

.acfg__float-price strong {
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
}

.acfg__float-price strong span {
  font-size: 22px;
  color: #ccc;
}

.acfg__float-price .acfg__info {
  width: 20px;
  height: 20px;
  color: #888;
}

.acfg__float-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-weight: 700;
}

.acfg__float-installment {
  display: block;
  margin: 10px 0 18px;
  text-align: center;
  font-size: 14px;
  color: var(--color-accent);
  text-decoration: underline;
}

.acfg__actions {
  display: flex;
  justify-content: space-between;
}

.acfg__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #aaa;
}

.acfg__action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 76px;
  border-radius: 10px;
  background-color: #2a2a2a;
  color: #ddd;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.acfg__action button:hover {
  background-color: #353535;
}

.acfg__float--fps {
  padding: 18px 15px 14px;
}

.acfg__fps-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
}

.acfg__fps-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge--lg {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  background: none;
}

.badge--lg .badge__ring {
  width: 100%;
  height: 100%;
}

.badge--lg .badge__value {
  font-size: 24px;
  line-height: 1;
}

.badge--lg .badge__unit {
  bottom: 4px;
  font-size: 13px;
}

.acfg__fps-selects {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.acfg__fps-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  background-color: #333;
  font-size: 14px;
}

.acfg__fps-select .select__field {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acfg__fps-select .select__btn {
  display: inline-flex;
  color: var(--color-accent);
}

.acfg__fps-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #aaa;
}

@media (prefers-reduced-motion: reduce) {
  .acfg__collapse,
  .acfg__group.is-open > .acfg__collapse,
  .acfg__chevron,
  .acfg__head {
    transition: none;
  }
}

/* Вкладка "Описание сборки" (макет ОПИСАНИЕ-КОНФИГУРАТОР-ПЕРЕД.png) */
.acfg__tab {
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

.acfg__tab.is-active {
  color: var(--color-accent);
}

.acfg__desc-row {
  display: flex;
  align-items: center;
  gap: 60px;
  min-height: 0;
  padding: 20px 0;
  /* Заливка до краёв экрана: тень-растяжка выводит фон за контейнер, clip-path
     обрезает её по вертикали, чтобы не залить соседние ряды. */
  background-color: #141414;
  box-shadow: 0 0 0 100vmax #141414;
  clip-path: inset(0 -100vmax);
}

/* Разделитель между рядами — на всю ширину экрана (выходит за ряд так же, как заливка;
   лишнее обрезает overflow-x: clip у .acfg). */
.acfg__desc-row {
  position: relative;
}

.acfg__desc-row + .acfg__desc-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100vmax;
  right: -100vmax;
  height: 2px;
  background-color: #202020;
  pointer-events: none;
}

.acfg {
  overflow-x: clip;
}

.acfg__desc-row:nth-child(even) {
  flex-direction: row-reverse;
  background-color: #111111;
  box-shadow: 0 0 0 100vmax #111111;
}

.acfg__desc-text,
.acfg__desc-media {
  flex: 1 1 0;
  min-width: 0;
}

.acfg__desc-text {
  max-width: 710px;
}

.acfg__desc-label {
  font-size: 18px;
  font-weight: 700;
  color: #b7b7b7;
}

.acfg__desc-title {
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: 700;
  line-height: 100%;
}

.acfg__desc-p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 22px;
  color: #ccc;
}

.acfg__desc-edit {
  font-size: 16px;
  color: var(--color-accent);
  cursor: pointer;
}

.acfg__desc-edit:hover {
  text-decoration: underline;
}

.acfg__desc-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

/* Мягкая тень-свечение под фото (images/assembly-description/shadow.png) */
.acfg__desc-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/assembly-description/shadow.png') center / contain no-repeat;
  opacity: 1;
  pointer-events: none;
}

.acfg__desc-media img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
}

.acfg__desc-foot {
  display: flex;
  justify-content: center;
  padding: 40px 0 10px;
}

.acfg__desc-config {
  min-width: 187px;
  font-weight: 700;
}

/* Вкладка "FPS в играх" (макет fps-tab.png) */
.acfg__fpstab-title {
  margin: 30px 0 4px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
}

.acfg__fpstab-note {
  margin-bottom: 30px;
  font-size: 16px;
  color: #b7b7b7;
}

.acfg__games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 21px;
}

.acfg__game {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.acfg__game-img {
  flex: 0 0 374px;
  width: 374px;
  height: 194px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
}

.acfg__game-info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 15px 10px 15px;
  border-radius: 10px;
  background: var(--color-card-bg);
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
}

.acfg__game-name {
  font-size: 18px;
  font-weight: 700;
}

.acfg__game-row {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  font-size: 14px;
  color: #b7b7b7;
}
.acfg__game-fps {
  color:#888;
}
.acfg__game-row b {
  font-weight: 500;
  color: var(--color-text);
}

.acfg__game-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: #373737;
}

.acfg__game-bar span {
  display: block;
  width: calc(var(--p) * 1%);
  height: 100%;
  border-radius: 3px;
  /* градиент растянут на всю дорожку, чтобы цвет зависел от значения, а не от длины */
  background: linear-gradient(90deg, #2da1ff, #2dff65) 0 0 / calc(10000% / var(--p)) 100%;
}

/* Элементы только для мобильного вида страницы сборки (включаются в adaptive.css, <=768px) */
.assembly__spec-label,
.assembly-fps__cta-icon,
.assembly-fps__res,
.acfg__bar-current,
.acfg__row-thumb,
.acfg__row-mdiff {
  display: none;
}

.acfg__bar-meta {
  display: contents;
}

/* Нижний бар покупки страницы сборки (js/assembly-config.js): выезжает снизу,
   когда обе кнопки "Купити" ушли за пределы экрана. Размеры сняты с макета
   "нижний-бар покупки-карточка-пк.png": высота 63px, фон #101010, контейнер
   1505px, три зоны — товар слева, кнопки строго по центру бара, цена+кнопка
   справа (grid 1fr auto 1fr, а не space-between: иначе центр "плывёт"). */
.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background-color: #101010;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.3);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.buy-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
  z-index: 9;
}

.buy-bar__inner {
  max-width: 1505px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  height: 63px;
}

.buy-bar__product {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.buy-bar__product img {
  flex: 0 0 75px;
  width: 75px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
  background-color: #1a1a1a;
}

.buy-bar__product p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buy-bar__cat {
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: #ccc;
}

.buy-bar__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
}

.buy-bar__actions {
  display: flex;
  gap: 20px;
}

.buy-bar__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background-color: #222;
  color: #ddd;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.buy-bar__actions button:hover {
  background-color: #2e2e2e;
}

.buy-bar__actions img,
.buy-bar__actions svg {
  width: 30px;
  height: 30px;
}

.buy-bar__buyblock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
}

.buy-bar__price {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
  color: #ccc;
}

.buy-bar__price strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
  white-space: nowrap;
}

.buy-bar__price strong span {
  color: #aaa;
}

.buy-bar__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 187px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
}

/* Появление скопированного блока ("Добавить еще"): fade + лёгкий подъём,
   высота раскрывается через .acfg__collapse. */
.acfg__group--new {
  animation: acfg-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes acfg-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acfg__group--new {
    animation: none;
  }
}

/* ==========================================================================
   Корзина (cart.php)
   ========================================================================== */

[data-cart-filled][hidden],
[data-cart-empty][hidden] {
  display: none !important;
}

.cart,
.cart-related {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.cart__inner {
  max-width: 1505px;
  margin-inline: auto;
  padding-bottom: 20px;
}

.cart__layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.cart__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Таблица" на блоках: одна и та же сетка колонок у шапки и у строк. */
.cart-table__head,
.cart-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 160px 170px 20px;
  align-items: center;
  column-gap: 20px;
}

.cart-table__head {
  height: 40px;
  padding: 0 0px 0px 20px;
  background-color: var(--color-card-bg);
  border-radius: 6px;
  font-size: 16px;
  color: #b7b7b7;
}

.cart-table__th--product {
  grid-column: 1 / 3;
}

.cart-table__th--qty {
  grid-column: 3;
  text-align: center;
}

.cart-table__th--price {
  grid-column: 4;
  text-align: right;
}

.cart-row {
  padding: 15px 0px;
  border-bottom: 1px solid #2a2a2a;
}

.cart-row__img {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-card-bg);
}

.cart-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-row__category {
  font-size: 14px;
  color: #b7b7b7;
}

.cart-row__title {
  margin: 2px 0 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.cart-row__title a:hover {
  color: var(--color-accent);
}

.cart-row__more {
  font-size: 14px;
  color: var(--color-accent);
  text-decoration: underline;
}

.cart-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cart-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  cursor: pointer;
}

.cart-qty__btn img {
  width: 20px;
  height: 20px;
}

/* Единственный ассет стрелки смотрит вправо — влево зеркалим. */
.cart-qty__btn--minus img {
  transform: scaleX(-1);
}

.cart-qty__btn.is-min img {
  filter: grayscale(1) brightness(0.6);
}

.cart-qty__value {
  min-width: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.cart-row__price {
  text-align: right;
}

.cart-row__price strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.cart-row__currency {
  font-weight: 400;
}

.cart-row__unit {
  display: block;
  font-size: 14px;
  color: #b7b7b7;
}

.cart-row__remove {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.cart-row__remove:hover {
  opacity: 1;
}

.cart__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.cart__continue,
.cart__clear {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cart__continue {
  background-color: #272727;
}

.cart__continue:hover {
  background-color: #343434;
}

.cart__clear {
  border: 1px solid #b7b7b7;
  color: #b7b7b7;
}

.cart__clear:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Иконка — маска по popup-del-icon.svg (цвет зашит в файле), чтобы брать
   currentColor кнопки, включая hover. */
.cart__clear-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url('/images/icon/popup-del-icon.svg') center / contain no-repeat;
  mask: url('/images/icon/popup-del-icon.svg') center / contain no-repeat;
}

/* Правая колонка "плавает": sticky внутри .cart__layout, пока рядом есть
   высота таблицы. top — с запасом под sticky-шапку. */
.cart__aside {
  position: sticky;
  top: 100px;
  flex: 0 0 308px;
  width: 308px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-summary {
  padding: 20px 15px;
  background-color: var(--color-card-bg);
  border-radius: 10px;
}

.cart-summary__title {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}

.cart-summary__bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0 0px;
  font-size: 13px;
  color: #b7b7b7;
}

.cart-summary__total strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
}

.cart-summary__buy,
.cart-summary__oneclick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.cart-summary__note {
  margin-top: 15px;
  font-size: 12px;
  line-height: 1.35;
  color: #aaa;
}

.cart-aside-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-aside-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--color-card-bg);
  font-size: 14px;
  color: #ddd;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-aside-link:hover {
  background-color: #2a2a2a;
  color: var(--color-accent);
}

/* Пустая корзина — по empty-cart.png / empty-cart-mobile.png: заголовок
   с красной полосой слева, линия под ним, кнопка-пилюля. */
.cart-empty {
  padding-bottom: 30px;
}

.cart-empty__title {
  position: relative;
  margin-bottom: 0;
  padding: 4px 0 4px 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.cart-empty__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e5252a;
}

.cart-empty__title + .cart-empty__btn {
  margin-top: 0;
}

.cart-empty::before {
  content: none;
}

.cart-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  margin-top: 0;
  padding: 0 20px;
  border-radius: 999px;
  background-color: #262626;
  font-size: 16px;
  color: #ccc;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-empty__btn:hover {
  background-color: #343434;
  color: var(--color-accent);
}

.cart-empty__line {
  height: 1px;
  margin: 20px 0 18px;
  background-color: lch(100 0 0 / 0.1);
}

/* С этим товаром покупают — тот же каркас, что .steps/.news. */
.cart-related {
  overflow: hidden;
}

.cart-related .section-heading {
  max-width: 1505px;
}

.cart-related__slider {
  max-width: 1505px;
  margin-inline: auto;
  overflow: visible;
}

.cart-related__pagination {
  display: none;
}

/* Вкладка "Отзывы" (макеты review.png / review-mobile.png) */
.acfg__rev-title {
  margin: 30px 0 20px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
}

.acfg__rev-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-areas: "list aside";
  gap: 20px;
  align-items: start;
}

.acfg__rev-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.acfg__rev-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "av head photo"
    "st st photo"
    "tx tx photo";
  grid-template-rows: auto auto 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 15px;
  border-radius: 12px;
  background-color: var(--color-card-bg);
}

.acfg__rev-avatar {
  grid-area: av;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 500;
}

.acfg__rev-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 700;
}

.acfg__rev-head time {
  font-size: 13px;
  color: var(--color-text-muted);
}

.acfg__rev-g {
  position: absolute;
  top: 15px;
  right: 15px;
}

.acfg__rev-stars {
  grid-area: st;
  display: inline-flex;
  gap: 1px;
  margin: 4px 0 15px;
}

.acfg__rev-stars svg {
  width: 14px;
  height: 14px;
  fill: #ffc20e;
}

.acfg__rev-stars svg path {
  fill: #ffc20e;
}

.acfg__rev-text {
  grid-area: tx;
  font-size: 16px;
  color: #d9d9d9;
}

.acfg__rev-photo {
  grid-area: photo;
  position: relative;
  align-self: end;
  width: 100px;
  height: 100px;
  margin-top: 80px;
  border-radius: 10px;
  overflow: hidden;
}

.acfg__rev-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acfg__rev-photo i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  color: lch(100 0 0 / 0.6);
}

.acfg__rev-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  border-radius: 12px;
  background-color: var(--color-card-bg);
  position: sticky;
  top: calc(var(--acfg-tabs-h, 0px) + 20px);
}

.acfg__rev-rating {
  display: flex;
  align-items: center;
  gap: 15px;
}

.acfg__rev-score {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
}

.acfg__rev-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acfg__rev-meta .acfg__rev-stars {
  margin: 0;
}

.acfg__rev-meta a {
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: underline;
}

.acfg__rev-all,
.acfg__rev-leave {
  justify-content: center;
  text-align: center;
}

.acfg__rev-aside .acfg__rev-all,
.acfg__rev-aside .acfg__rev-leave {
  width: 100%;
}
.acfg__rev-aside .acfg__rev-all{
  font-size: 16px;
  height: 40px;
  line-height: 27px;
}
.acfg__rev-aside .acfg__rev-leave {
  padding-block: 8px;
}

@media (min-width: 1550px) {
  .acfg__rev {
    max-width: 1505px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Оформление заказа (checkout.php)
   Размеры сняты с окончательный-вариант-*.png (1920px): колонка 1155px =
   форма 740 + зазор 40 + боковая панель 375. Карточки #191919 на #141414,
   поля #282828 (селекты/строки оплаты — #272727), ошибки — #ff0004.
   ========================================================================== */
.checkout {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.checkout__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1155px;
  margin-inline: auto;
  padding-bottom: 20px;
}

.checkout__main {
  flex: 1 1 740px;
  max-width: 740px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkout__aside {
  flex: 1 1 375px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.co-card {
  padding: 20px;
  background-color: #191919;
  border-radius: 12px;
}

.co-card[hidden] { display: none; }

.co-card__title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 14px;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
}

.co-card__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 34px;
  background-color: var(--color-accent);
}

.co-card.is-error .co-card__title::before { background-color: #ff0004; }

/* --- поля --- */
.co-field { margin-bottom: 20px; }

.co-field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
}

.co-field.is-error .co-field__label { color: #ff0004; }

.co-input {
  display: block;
  width: 100%;
  height: 43px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #282828;
  color: #ccc;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.co-input::placeholder { color: #6e6e6e; }
.co-input:focus { border-color: #4c4c4c; }
.co-field.is-error .co-input { border-color: #ff0004; }

.co-textarea {
  height: 200px;
  padding: 15px;
  resize: vertical;
}

/* --- "Другой получатель": круглый чекбокс --- */
.co-check {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  cursor: pointer;
}

.co-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Тот же вид, что у .acfg__radio: кольцо #6e6e6e + акцентная точка inset 2px */
.co-check__box {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #6e6e6e;
  border-radius: 50%;
  box-sizing: border-box;
}

.co-check__input:checked + .co-check__box::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.co-check__input:focus-visible + .co-check__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.co-check__text {
  font-size: 14px;
  text-decoration: underline;
}

/* Блоки, которые показывает JS (hidden нужно подтвердить явно — у них
   нет своего display, но .co-field внутри даёт margin-bottom). */
.co-other[hidden],
[data-co-address][hidden] { display: none; }

/* Последний элемент карточки не даёт лишнего отступа до её края. */
.co-card > :last-child,
.co-other > .co-field:last-child,
[data-co-address] > .co-field:last-child { margin-bottom: 0; }

/* Карточка "Доставка": блоки под способом доставки появляются по типу выбора,
   поэтому отступ ставится только между видимыми соседями. */
.co-card--delivery .co-field { margin-bottom: 0; }
.co-card--delivery > :not(h2):not([hidden]) ~ :not([hidden]) { margin-top: 20px; }
[data-co-warehouse][hidden],
.co-note[hidden] { display: none; }
.co-note { margin: 0; font-size: 14px; color: #b7b7b7; }
.co-check:has(+ .co-other[hidden]) { margin-bottom: 0; }
.co-card > .co-field:has(+ [data-co-address][hidden]) { margin-bottom: 0; }

/* --- выпадающий список --- */
.co-select { position: relative; }

.co-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 43px;
  padding: 0 20px;
  border: 1px solid hsl(0deg 0% 100% / 2%);
  border-radius: 15px;
  background-color: #272727;
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
  box-shadow: 0px 1px 3px 0px #0000004D;
}

.co-select__value { flex: 1; text-align: center; font-weight: 500;}
.co-field .co-select__value{text-align: left;}
.co-select.is-filled .co-select__value { color: var(--color-accent); }
.co-select__chevron { color: var(--color-accent); flex-shrink: 0; transition: transform 0.2s ease; }
.co-select.is-open .co-select__chevron { transform: rotate(180deg); }
.co-field.is-error .co-select__btn { border-color: #ff0004; }

.co-select__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  list-style: none;
  background-color: #272727;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
  scrollbar-color: #6e6e6e transparent;
}

.co-select__list[hidden] { display: none; }

.co-select__item {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  outline: none;
}

.co-select__item:hover,
.co-select__item:focus-visible { background-color: #353535; }
.co-select__item.is-selected { color: var(--color-accent); }

/* --- вкладки оплаты --- */
.co-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.co-tab {
  height: 34px;
  padding: 0 20px;
  border-radius: 999px;
  background-color: #272727;
  color: #ccc;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.co-tab.is-chosen{    background: var(--color-accent);color: var(--color-bg-dark);}
.co-tab.is-active { background-color: #ccc; color: #141414; }
/* Лайм — у вкладки, в которой выбран способ оплаты, активна она или нет. */

.co-tab:not(.is-active):not(.is-chosen):hover,
.co-tab:not(.is-active):not(.is-chosen):focus-visible { background-color: #333; color: #fff; }

.co-pay-error {
  margin: 0 0 14px;
  font-size: 14px;
  color: #ff0004;
}

.co-pay-error[hidden],
.co-pay-panel[hidden],
.co-credit__panel[hidden],
.co-summary__row[hidden] { display: none; }

.co-pay-panel { display: flex; flex-direction: column; gap: 20px; }

/* --- строка способа оплаты --- */
.co-pay,
.co-credit__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 12px 20px;
  background-color: #272727;
  border: 1px solid #FFFFFF05;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0px 1px 3px 0px #0000004D;
}
.is-open .co-credit__head{
  box-shadow: none;
}

.co-pay { min-height: 64px; }

.co-pay__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.co-pay__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.co-pay__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-pay__title { font-size: 18px; font-weight: 700; line-height: 22px; transition: color 0.2s ease; }
.co-pay__text { font-size: 14px; line-height: 18px; color: #b7b7b7; }
.co-pay__input:checked ~ .co-pay__body .co-pay__title,
.co-credit.is-chosen .co-pay__title { color: var(--color-accent); }
.co-pay:hover .co-pay__title,
.co-credit__head:hover .co-pay__title { color: #dfff7f; }

/* Как .acfg__radio: кольцо 2px #6e6e6e + акцентная точка inset 2px */
.co-pay__radio {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #6e6e6e;
  border-radius: 50%;
  box-sizing: border-box;
}

.co-pay__input:checked ~ .co-pay__radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.co-pay__input:focus-visible ~ .co-pay__radio { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- кредитные строки (аккордеон) --- */
.co-credit {
  background-color: #272727;
  border-radius: 12px;
  border: 1px solid transparent;
}

.co-credit.is-chosen { border-color: var(--color-accent); }
.co-credit__head { padding-right: 25px; background: none; border: 0; }
.co-credit__chevron { flex-shrink: 0; width: 16px; transition: transform 0.2s ease; }
.co-credit.is-open .co-credit__chevron { transform: rotate(180deg); }
.co-credit__panel { padding: 0 20px 20px; }

.co-credit__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.co-credit__pick-label { font-size: 16px; }

.co-select--mini { width: 140px; flex-shrink: 0; }

.co-select--mini .co-select__btn {
  height: 30px;
  padding: 0 10px 0 14px;
  border-radius: 16px;
  background-color: #c2c2c2;
  color: #141414;
  font-size: 14px;
}

.co-select--mini .co-select__chevron { color: #141414; width: 16px; }
/* Лайм — только когда число платежей выбрано; пока список открыт — серый. */
.co-select--mini.is-filled .co-select__btn { background-color: #dfff7f; }
.co-select--mini.is-filled .co-select__value { color: #141414; }
.co-select--mini.is-open .co-select__btn { background-color: #c2c2c2; }
.co-select--mini .co-select__list { left: auto; right: 0; width: 200px; max-height: 220px; }

.co-credit__rows { margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* Пунктирный "лидер" между названием и значением: линия на самой строке,
   а dt/dd закрашены фоном карточки и лежат поверх неё. */
.co-credit__row {
  position: relative;
  display: flex;
  align-items: baseline;
  font-size: 14px;
  color: #aaa;
}

.co-credit__row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  border-bottom: 1px dashed #3a3a3a;
}

.co-credit__row dt,
.co-credit__row dd {
  position: relative;
  z-index: 1;
  margin: 0;
  background-color: #272727;
}

.co-credit__row dt { padding-right: 8px; }
.co-credit__row dd { margin-left: auto; padding-left: 8px; }

.co-credit__total {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 20px;
  font-size: 16px;
  font-weight: 700;
}

.co-credit__choose {
  display: block;
  margin-left: auto;
  height: 28px;
  padding: 0 29px;
  border-radius: 10px;
  background-color: var(--color-accent);
  color: #141414;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 600;
}

.co-credit__choose:hover,
.co-credit.is-chosen .co-credit__choose { background-color: #dfff7f; }

/* --- комментарий --- */
.co-comment-link {
  align-self: flex-start;
  padding: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.co-comment-link[hidden] { display: none; }
.co-comment-link:hover { color: var(--color-accent); }

/* --- правая колонка --- */
.co-cart {
  padding: 15px;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
}

.co-cart__title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}

.co-cart__list { margin: 0; padding: 0; list-style: none; }

.co-item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas:
    "image category category"
    "image title    title"
    "image qty      price";
  align-items: center;
  column-gap: 10px;
  padding: 10px 0;
}

.co-item + .co-item { border-top: 1px solid #2d2d2d; }

.co-item__image {
  grid-area: image;
  align-self: center;
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #2d2d2d;
}

.co-item__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* info-обёртка растворяется, чтобы category/title/qty встали прямо в сетку .co-item рядом с ценой */
.co-item__info { display: contents; }
.co-item__category { grid-area: category; margin: 0; font-size: 13px; color: #b7b7b7; }
.co-item__title { grid-area: title; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; text-transform: uppercase; }
.co-item__qty { grid-area: qty; font-size: 14px; color: #8f8f8f; }
.co-item__price { grid-area: price; font-size: 20px; font-weight: 700; white-space: nowrap; }
.co-item__currency { font-weight: 400; }

.co-summary {
  padding: 20px 15px;
  background-color: var(--color-card-bg);
  border-radius: 10px;
  box-shadow: 0px 1px 3px 0px #0000004D;
  border: 1px solid #FFFFFF05;
}

.co-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px;
  font-size: 14px;
  color: #b7b7b7;
}

.co-summary__row strong { font-size: 24px; font-weight: 700; color: var(--color-text); }
.co-summary__row strong .co-currency { font-weight: 400; }
.co-summary__row--sub { margin-bottom: 8px; }
.co-summary__row--sub strong { font-size: 18px; color: #8f8f8f; }

.co-summary__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 43px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.co-summary__buy.is-error { opacity: 0.55; }

.co-summary__note {
  margin: 20px 0 0;
  font-size: 12px;
  color: #b7b7b7;
}

.co-summary__note a { color: var(--color-accent); }

/* Заголовок страницы оформления заказа — по центру (только checkout.php) */
.main--checkout .catalog__title {
  text-align: center;
}

/* Поиск (select2-подобный, "Город"): поле ввода занимает место текста кнопки
   и появляется только при открытом списке; справа остаётся зона шеврона. */
.co-select__search-input {
  display: none;
  position: absolute;
  top: 1px;
  left: 1px;
  right: 50px;
  height: 41px;
  padding: 0 0 0 19px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background-color: #272727;
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.co-select__search-input::placeholder { color: var(--color-accent); opacity: 1; }
.co-select.is-open .co-select__search-input { display: block; }
.co-select.is-open .co-select__search-input ~ .co-select__list { top: calc(100% + 2px); }
.co-select__item[hidden] { display: none; }

.co-select__empty {
  padding: 7px 10px;
  font-size: 14px;
  color: #8f8f8f;
}

.co-select__empty[hidden] { display: none; }

/* ==========================================================================
   Спасибо за заказ (thank-you.php) — заголовок + фиолетовая плашка, баннер
   1920×500 фоном с текстом слева, кнопка по центру. Мобильный макет
   (adaptive.css): картинка в потоке сверху, текст под ней по центру.
   ========================================================================== */
.thanks {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
}

.thanks__inner,
.thanks__notice-inner,
.thanks__hero-inner {
  max-width: 1505px;
  margin-inline: auto;
}

.thanks__title {
  margin: 0 0 10px;
  padding-top: 20px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
}

.thanks__notice {
  max-width: 1505px;
  margin-inline: auto;
  background-color: #4900bf;
}

.thanks__notice-inner {
  padding: 10px 20px 10px;
}

.thanks__notice-title {
  font-size: 18px;
  line-height: 1.3;
}
.thanks__notice-title strong{
  font-weight: 700;
}
.thanks__notice-text {
  font-size: 13px;
  line-height: 1.4;
}

.thanks__hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.thanks__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.thanks__hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
}

.thanks__content {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.4;
  color: #ccc;
}

.thanks__content h2 {
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
}

.thanks__content p {
  margin-bottom: 15px;
  font-size: 16px;
}

.thanks__content strong {
  color: var(--color-text);
}

.thanks__lead {
  margin-top: 25px;
  font-weight: 700;
  color: var(--color-text);
}

.thanks__list {
  margin-bottom: 15px;
}

.thanks__list li {
  position: relative;
  margin-bottom: 5px;
  padding-left: 15px;
}

.thanks__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

.thanks__content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.thanks__cta {
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
}

.thanks__cta .btn {
  padding: 12px 30px;
}