/* ==========================================================================
   Адаптив.
   Основная вёрстка (style.css) — фиксированная, под десктоп ~1920px, без
   брейкпоинтов (см. CLAUDE.md). Этот файл — начало адаптивной вёрстки,
   брейкпоинты добавляются сверху вниз, от самого широкого к самому узкому.
   Подключать после style.css, чтобы правила здесь могли переопределять его.
   ========================================================================== */

@media (max-width: 1600px) {
   .hero__inner{
      max-width: 100%;
      padding-left: 60px;
      padding-right: 60px;
   }
   .hero .slider-arrow--prev{
      left: 0;
      padding: 20px 0;
   }
   .hero .slider-arrow--next{
      right: 0;
      padding: 20px 0;
   }
   .categories,.builds__filters_outer,.builds__grid,.steps,
   .peripherals,.works__tabs,.header-main,.topbar,
   .works__slider,.upgrade-service,.news,.faq,.seo,.site-footer,
   .catalog__crumbs,.catalog__head,.catalog__layout{
      padding-left: 20px;
      padding-right: 20px;
      max-width: 100%;
   }

   /* .step-card/.article-card — сами являются .swiper-slide (см. разметку),
      на 1600+ их ширину считает Swiper (slidesPerView:5 задаёт inline-width
      через JS). Ниже 1600 инициализация в index.php переключена на
      slidesPerView:'auto' — Swiper в этом режиме сам ничего не задаёт и
      берёт ширину слайда из CSS, поэтому фиксируем её здесь на те же 285px,
      что и в десктопном расчёте (5×285+4×20=1505). При auto + фиксированной
      ширине слайда Swiper сам показывает столько целых карточек, сколько
      влезает в текущую ширину экрана — без отдельных breakpoint'ов на
      конкретное число карточек. */
   .step-card,
   .article-card{
      width: 285px;
   }

   /* Хлебные крошки на каталоге — местами длинные ("… › Купить игровой
      компьютер › Игровой компьютер Ryzen 7 9800X3D / RTX 5090 / X"), на
      десктоке `flex-wrap:wrap` в style.css даёт им перенос на 2-3 строки.
      В адаптиве нужно, чтобы список всегда оставался в одну строку с
      внутренним горизонтальным скроллом (без переноса и без видимого
      скроллбара) — начиная с этого брейкпоинта и ниже. */
   .breadcrumbs__list{
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
   }
   .breadcrumbs__list::-webkit-scrollbar{
      display: none; /* Chrome/Safari/Edge */
   }
   .breadcrumbs__item{
      flex-shrink: 0;
      white-space: nowrap;
   }
   .search-page { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 1550px) {
   .acfg__desc,.acfg__fpstab{
      max-width: 1505px;
      margin: 0 auto;
   }
}

@media (max-width: 1550px) {
   /* .category-card в разметке получает фиксированные width/height инлайн-
      стилем (из $categories[$i]['w']/['h'] в index.php) — на десктопе карточки
      подогнаны под точный пиксельный размер своего фото. С этой ширины они
      подряд уже не помещаются в 4 колонки без горизонтального скролла, поэтому
      ширина становится произвольной (гибкой, flex-grow вместо фикс. width), а
      aspect-ratio каждой карточки берёт те же пропорции, что и её исходные
      w/h (425:360 у первой, 340:360 у остальных трёх), чтобы фото не мялось. */
   .category-card{
      width: auto !important;
      height: auto !important;
      flex-shrink: 1;
      flex-basis: 0;
   }
   .category-card:first-child{
      flex-grow: 1.25;
      aspect-ratio: 425 / 360;
   }
   .category-card:not(:first-child){
      flex-grow: 1;
      aspect-ratio: 340 / 360;
   }

   /* То же самое для .peripheral-card: у "Монітори" и у карточек мозаики
      (.peripherals__top .peripherals__grid) фикс. flex-basis/height в px
      (305px / 350-440px×190px) заменяются на гибкий flex-basis + aspect-ratio
      по тем же исходным пропорциям (img width/height в разметке). Ряд
      .peripherals__grid--small уже был на flex:1 (гибкий по ширине) —
      ему не хватало только aspect-ratio вместо фикс. height:190px.

      Важно: карточки мозаики — во flex-wrap контейнере, перенос по 3 в ряд
      держится на реальной ширине карточек (сумма 440+350+350+гэпы = ширина
      обёртки). flex-basis:0 (flex-grow "с нуля", как у .category-card выше)
      здесь ломает перенос — браузер считает перенос по min-content.
      Простой % от ширины обёртки (350/1180 ≈ 29.66% и т.п.) тоже не годится:
      % считается от 100% ширины контейнера, а гэпы (2×20px) — фиксированные
      px, поэтому сумма "3 карточки в %" + "2 гэпа в px" точно даёт 100%
      только на исходной ширине (1180px) — на любой другой ширине контейнера
      она либо больше 100% (перенос ломается раньше 3-й карточки), либо
      меньше. Поэтому basis — через calc(): сначала вычитаем ровно 40px
      (сумму двух гэпов) из 100% ширины обёртки, и только остаток делим в
      пропорции 350:350:440 (=350/1140 и 440/1140 от того остатка) — так
      сумма 3 карточек + 2 реальных гэпа всегда точно равна 100% ширины
      обёртки, на любом её значении, и перенос 3-в-ряд не ломается. */
   .peripheral-card--tall{
      flex: 0.26 1 0;
      aspect-ratio: 305 / 400;
   }
   .peripherals__top .peripherals__grid .peripheral-card{
      flex: 0 1 calc((100% - 40px) * 350 / 1140);
      height: auto;
      aspect-ratio: 350 / 190;
   }
   .peripherals__top .peripherals__grid .peripheral-card:first-child,
   .peripherals__top .peripherals__grid .peripheral-card:last-child{
      flex: 0 1 calc((100% - 40px) * 440 / 1140);
      aspect-ratio: 440 / 190;
   }
   .peripherals__grid--small .peripheral-card{
      height: auto;
      aspect-ratio: 285 / 190;
   }
   /* inset (растягивание от края до края через отрицательные отступы)
      сдвигало фото — плохой подход, отказались. Вместо этого просто
      масштабируем img по одной стороне, а вторую отдаём его собственному
      соотношению сторон (оно совпадает с aspect-ratio, который выше задан
      самой карточке, поэтому картинка садится ровно в размер карточки без
      обрезки), а позиционирование не трогаем — оно уже верно задано в
      базовом style.css:
      - .peripheral-card--tall: на всю ширину карточки, снизу по центру
        (right:auto; left:50%; translate:-50% 0 — уже в style.css);
      - остальные (мозаика + нижний ряд): по высоте карточки, справа снизу
        (right:0; bottom:0 — тоже уже в style.css). */
   .peripheral-card img{
      height: 100%;
      width: auto;
      max-width: none;
   }
   .peripheral-card--tall img{
      width: 100%;
      height: auto;
   }
   .main-nav__dropdown-inner{
      padding: 44px 20px;
   }
   .main-nav__dropdown-inner{
      max-width: 100%;
   }

}

@media (max-width: 1545px) {
   .assembly__inner,.assembly-fps__inner,.acfg{
      padding-left: 20px;
      padding-right: 20px;
   }
}
@media (max-width: 1400px) {
   .builds__grid{
      grid-template-columns: repeat(4, 1fr);
   }
   /* При 4 колонках 15 карточек дают неполный последний ряд (3 из 4) — класс
      .build-card--overflow-4col проставлен в index.php по остатку от
      count($builds) % 4, а не хардкодит число карточек. */
   .build-card--overflow-4col{
      display: none;
   }
   .builds__note{
      font-size: 12px;
   }
   .category-card__link{
      padding-top: 10px;
   }
}
@media (max-width: 1344px){
   .builds__note{
      display: none;
   }
   .builds__banner{
      margin-left: auto;
   }
   /* 3 в ряд начинается уже здесь, а не только с 768px (см. тот же приём
      чуть ниже, в блоке 768px) — .configurator__games на 4 колонки (фикс.
      265px в style.css) на этой ширине уже не помещается в контейнер без
      переноса вразнобой, поэтому форсируем 3 колонки тем же flex-basis
      в % от контейнера. */
   .configurator__games{
      gap: 15px;
   }
   .configurator__games .game-card{
      flex-basis: calc((100% - 2 * 15px) / 3);
   }
}
@media (max-width: 1280px) {
   /* .topbar всегда скрыт (не только в .is-scrolled состоянии, которое JS
      снимает при скролле вверх) — display:none перебивает саму анимацию
      сворачивания через max-height, скрытие больше не зависит от скролла. */
   .topbar{
      display: none;
   }

   /* Мобильная шапка: бургер вместо main-nav, только логотип уменьшен, а из
      header-actions остаются только иконка-корзина и иконка-телефон в конце
      — текстовый .phone, поиск и "личный кабинет" скрыты. Разметка бургера и
      иконки-телефона всегда в DOM (index.php), базово display:none в
      style.css — здесь их просто показываем. */
   .header-hamburger{
      display: flex;
   }
   .header-main__inner .logo img{
      height: 19px;
      width: auto;
   }
   .main-nav{
      display: none;
   }
   .header-actions .phone,
   .header-actions .header-search,
   .header-actions__account{
      display: none;
   }
   .header-actions__mobile-phone{
      display: inline-flex;
      order: 1;
   }
   /* Корзина остаётся видимой (на десктопе уже display:inline-flex по
      умолчанию), но меняется местами с иконкой-телефоном (в разметке идёт
      раньше неё) через order, и получает мобильную иконку вместо big-cart —
      тот же приём mask-image переопределения, что и everywhere в этом
      файле, а не смена класса в разметке. */
   .header-actions .cart-button{
      order: 2;
   }
   .header-actions .cart-button .icon-mask--cart{
      -webkit-mask-image: url('/images/icon/top-cart-mobile-icon.svg');
      mask-image: url('/images/icon/top-cart-mobile-icon.svg');
   }

   /* main-nav скрыт, поэтому его margin-right:auto (которым он раньше
      прижимал header-actions к правому краю) больше не в игре — сам
      .header-main__inner получает gap:15px (это же и есть зазор между
      бургером и лого), а header-actions прижимается вправо margin-left:auto
      и получает свой собственный gap:15px между иконкой кабинета и
      телефоном (вместо базовых 20px). */
   .header-main__inner{
      gap: 15px;
   }
   .header-actions{
      margin-left: auto;
      gap: 15px;
   }
   .categories,.builds__filters_outer,.builds__grid,.steps,
   .peripherals,.works__tabs,.header-main,.topbar,
   .works__slider,.upgrade-service,.news,.faq,.seo,.site-footer,
   .section-title,.catalog__crumbs,.catalog__head,.catalog__layout{
      padding-left: 15px;
      padding-right: 15px;
   }
   .builds__filters_outer{
      position: relative;
   }
   .cart-count{
      padding: 2px 4px;
   }
   /* Колонка фільтрів (275px) + сітка карток вже тісно на 1280 — сітка йде
      на 3 колонки, той самий приём, що й у .builds__grid на 1100px нижче. */
   .catalog__grid{
      grid-template-columns: repeat(3, 1fr);
   }
   /* .faq__inner — grid с фикс. grid-template-columns:570px 1fr (жёсткая
      левая колонка заголовка). На этой ширине 570px уже не оставляет
      достаточно места под колонку с табами/списком — снимаем фиксацию
      (grid-template-columns:none), grid-template-areas сам определит
      колонки по контенту. Ниже 768px .faq__inner и вовсе переключается на
      flex-column (см. блок 768px) — там это свойство уже не участвует. */
   .faq__inner{
      grid-template-columns: none;
   }
   .mobile-footer-nav ul{
      max-width: 500px;
      margin: 0 auto;
   }
   .search-page{
      padding-left: 15px; padding-right: 15px;
   }
}
@media (max-width: 1200px) {
   /* 274px сайдбар + 3-колонкова сітка (з 1280px) стають тісними ще до
      940px, де сайдбар ховається зовсім — тож у діапазоні 1200-992
      .catalog__grid йде на 2 колонки, як і на 768px (там те саме правило
      вже є, тепер це просто раніша сходинка тієї ж сходинки). */
   .catalog__grid{
      grid-template-columns: repeat(2, 1fr);
   }
   .buy-bar{background-color: #252525;}
}
@media (max-width: 1150px) {
   /* Ниже 1150 отключаем раскрытие кнопки корзины в pill с текстом при
      наведении/фокусе (style.css, .btn--icon-round--cart:hover) — просто
      удерживаем те же свойства в исходном "свёрнутом" состоянии, а не
      трогаем базовые правила (они остаются как есть выше 1150). */
   .btn--icon-round--cart:hover,
   .btn--icon-round--cart:focus{
      padding-right: 12px;
   }
   .btn--icon-round--cart:hover .btn--icon-round__label,
   .btn--icon-round--cart:focus .btn--icon-round__label{
      max-width: 0;
      margin-left: 0;
      opacity: 0;
   }
}
@media (max-width: 1100px) {
   /* .upgrade-service__grid img сейчас flex:1 + height:100% — просто
      растягивается по высоте аккордеона (object-fit:cover обрезает), без
      привязки к собственным пропорциям. Ниже 1100 фиксируем ширину ровно на
      50% строки (аккордеон с flex:1 сам займёт остаток за вычетом gap) и
      возвращаем реальное соотношение сторон фото (700×460 из index.php)
      через aspect-ratio вместо height:100% от чужого блока. */
   .upgrade-service__grid img{
      flex: 0 0 50%;
      width: 50%;
      height: auto;
      aspect-ratio: 700 / 460;
   }
   .accordion-item__panel{
      height: auto;
   }
   .configurator{
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
   }
   .builds__grid {
      grid-template-columns: repeat(3, 1fr);
   }
   .peripheral-card__word{
      display: none;
   }
}
@media (max-width: 992px) {
   /* .faq__tabs — базово flex-wrap:wrap (переносит табы на несколько строк,
      когда не влезают). Ниже 992 нужно наоборот — одна строка с внутренней
      горизонтальной прокруткой без видимого скроллбара: flex-wrap:nowrap +
      overflow-x:auto, flex-shrink:0 на самих табах (иначе flex сожмёт их
      вместо того, чтобы позволить строке переполниться и скроллиться).
      Скрытие скроллбара — три разных свойства, по одному на движок:
      scrollbar-width (Firefox), -ms-overflow-style (Edge legacy) и
      ::-webkit-scrollbar (Chrome/Safari/новый Edge). */
   .faq__tabs{
      gap: 10px;
   }

   /* То же самое для .seo__tab-list и .seo__tag-cloud — оба базово
      flex-wrap:wrap, здесь по одной строке с прокруткой без видимого
      скроллбара, тем же набором свойств, что и .faq__tabs выше. */
   .seo__tab-list,
   .seo__tag-cloud{
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }
   .seo__tab-list::-webkit-scrollbar,
   .seo__tag-cloud::-webkit-scrollbar{
      display: none;
   }
   .seo__tab,
   .seo__tag-cloud li{
      flex-shrink: 0;
   }

   /* Затемнение справа, сигнализирующее, что строка скроллится дальше —
      ::after как ещё один flex-item в конце ряда, но position:sticky
      держит его прижатым к правому краю ВИДИМОЙ области скролла (а не
      уезжает вместе с контентом, как было бы с position:absolute). Чтобы
      при докрутке до конца полоса не висела пустым хвостом после
      последнего таба, а перекрывала его край, тянем её margin-left в минус
      на величину собственной ширины + gap ряда (у каждого ряда свой gap —
      30px/10px, отсюда разные margin). pointer-events:none — чтобы полоса
      не перехватывала клики по табу/тегу под ней. */
   .seo__tab-list::after,
   .seo__tag-cloud::after{
      content: '';
      position: sticky;
      right: 0;
      flex-shrink: 0;
      align-self: stretch;
      width: 40px;
      background: linear-gradient(270deg, #202020 0%, rgba(24, 24, 24, 0) 100%);
      pointer-events: none;
   }
   .seo__tab-list::after{
      margin-left: -70px;
   }
   .seo__tag-cloud::after{
      margin-left: -50px;
   }

   /* Подвал: .site-footer__top в 1 колонку, .site-footer__brand уезжает в
      самый низ через order (он первый в DOM, но у остальных детей грида
      order по умолчанию 0, а у него — положительный, значит он всегда
      последний, порядок среди самих column/contacts не трогаем).
      .site-footer__column/.site-footer__contacts становятся спойлерами —
      реактивируем нативное [hidden] (в style.css оно намеренно
      нейтрализовано display:flex, чтобы на десктопе всегда было видно),
      показываем шеврон и добавляем курсор + разделители между пунктами,
      как у .faq-item. Контакты изначально открыты (без [hidden] в
      разметке) — остальные колонки свёрнуты (с [hidden]) — это задано в
      index.php, здесь только визуальное поведение спойлера. */
   .site-footer__top{
      grid-template-columns: 1fr;
   }
   .site-footer__brand{
      order: 1;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
   }
   .site-footer__column,
   .site-footer__contacts{
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-block: 15px;
   }
   .site-footer-item__trigger{
      cursor: pointer;
   }
   .site-footer-item__trigger svg{
      display: block;
   }
   /* Специфичность (0,0,3,0) — ровно как у нейтрализующих правил в
      style.css (.site-footer__column .site-footer-item__panel[hidden] и
      .site-footer__contacts .site-footer-item__panel[hidden]) — иначе те
      более специфичные правила победили бы и здесь, и [hidden] так и не
      восстановился бы. */
   .site-footer__column .site-footer-item__panel[hidden],
   .site-footer__contacts .site-footer-item__panel[hidden]{
      display: none;
   }
   .site-footer-item__panel{
      padding-top: 15px;
   }
   .site-footer__bottom{
      flex-direction: column;
      text-align: center;
      gap: 0;
      padding-bottom: 80px;
   }
   .configurator__group{
      flex-wrap: wrap;
      gap: 10px;
   }

   /* .catalog__sidebar сам стає position:fixed висувною панеллю саме з цього
      брейкпоінта (992px, див. другий блок @media(max-width:992px) нижче) —
      виходить з потоку .catalog__columns, і .catalog__content (flex:1)
      займає весь рядок сам. Звідси й до 768px (де є своє окреме правило,
      знову зводить до 2) сітці вже просторо — піднімаємо назад до 3 колонок
      замість успадкованих 2 з 1200px, де сайдбар ще був у потоці поруч. */
   .catalog__grid{
      grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width: 992px) {
   .faq__inner{
      display: flex;
      flex-direction: column;
      gap: 15px;
   }
   .faq__inner h2{
      text-align: left;
      width: 100%;
   }
   .breadcrumbs__list{
      font-family: 12px;
   }
   .catalog__crumbs__inner{
      padding: 15px 0 20px;
   }
   .catalog__head__inner{
      padding: 10px 0 0px;
   }
   .catalog__title{
      font-size: 24px;
      padding-bottom: 10px;
   }
   .catalog__title + .blog__subtitle{
      margin-top: -10px;
   }

   /* Мобільний тулбар каталогу (КНОПКИФИЛЬТРОВТЕЛЕФОН.png) — .catalog__toolbar
      з h2 "Фильтры" + "Сортировать по: [select]" перетворюється на 2 пілюлі
      в ряд: зліва — той самий .sort-select (тепер із іконкою short-mob.svg),
      справа — нова кнопка .catalog__mobile-filters-btn (filter-mob.svg), що
      відкриває .catalog__sidebar як висувну панель (нижче в цьому ж блоці).
      .catalog__toolbar уже justify-content:space-between (style.css) — досить
      сховати h2 і текстовий лейбл "Сортировать по:", лишаються рівно два
      елементи, і зайвий проміжок між ними сам стає потрібним відступом. */
   .catalog__toolbar{
      margin-bottom: 15px;
      gap: 15px;
   }
   .catalog__sidebar-title,
   .catalog__toolbar-label{
      display: none;
   }
   .sort-select{
      min-width: 0;
      flex: 1;
      justify-content: flex-start;
      padding: 9px 16px;
      background-color: #272727;
   }
   .sort-select__icon{
      display: block;
   }
   /* flex:1 — тягне поле на всю вільну ширину пілюлі (іконка й шеврон-кнопка
      лишаються своєї фікс. ширини по краях), той самий ефект, що й
      justify-content:space-between на десктопі, але без розтягування ГЕПУ
      між іконкою і текстом, які мають лишатись поруч. */
   .sort-select .select__field{
      flex: 1;
      min-width: 0;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   .catalog__mobile-filters-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 8px;
      padding: 9px 16px;
      background-color: #424242;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      border: none;
      border-radius: 10px;
      box-shadow: 0px 1px 3px 0px #0000004D;
      cursor: pointer;
      max-width: 250px;
   }
   .catalog__mobile-filters-btn img{
      filter: brightness(10);
   }
   .catalog__toolbar-sort{
      width: 250px;
   }

   /* .catalog__sidebar стає тим самим "оверлей + висувна праворуч панель"
      патерном, що й cart-popup/contact-popup/wizard-popup (.popup вище) —
      навмисно не сам клас .popup (щоб нічого з цього не зачепило десктопну
      розкладку колонки вище цього брейкпоінта), а власні правила з тим самим
      набором властивостей, скопійовані під конкретний .catalog__sidebar.
      Один спільний .popup-overlay/initPopup на всі — див. partials/footer.php
      (data-filters-toggle/data-filters-popup). */
   .catalog__sidebar{
      position: fixed;
      top: 0;
      right: 0;
      z-index: 1200;
      flex: none;
      width: 380px;
      max-width: 100vw;
      height: 100vh;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      background-color: var(--color-bg-dark);
      transform: translateX(100%);
      transition: transform 0.3s ease;
   }
   .catalog__sidebar.is-open{
      transform: translateX(0);
   }
   .catalog__sidebar-popup-header{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
   }
   .catalog__sidebar-popup-header h2{
      font-size: 22px;
      font-weight: 700;
   }
   /* .filter-option__plate (partials/blocks/filters-sidebar.php) навмисно
      виїжджає за межі .filters вправо (position:absolute; left:calc(100% +
      14px)) — на десктопі це працює, бо жоден предок не кліпає overflow і
      плашка лягає на сітку товарів. У цій висувній панелі overflow-y:auto
      на .catalog__sidebar-scroll змушує браузер порахувати й overflow-x як
      auto (CSS-спека: 'visible' на одній осі не сумісний з не-'visible' на
      іншій), тож плашка або кліпається, або дає власний горизонтальний
      скрол — тому в діапазоні 992-468px (і нижче) вона просто прихована;
      ≤468px її роль виконує прилипла кнопка внизу панелі
      (.catalog__sidebar-popup-footer, той самий підрахунок — див.
      updateStickyApplyText у partials/footer.php).

      Специфічність: базове правило .is-plate-open .filter-option__plate
      (style.css) — 2 класи (0,0,2,0) — і саме воно вмикає display:block,
      коли плашка активна. Голий .filter-option__plate тут — лише 1 клас
      (0,0,1,0), програє за специфічністю незалежно від порядку/медіа-
      запиту, тож приховувалось лише неактивне (і так невидиме) початкове
      display:none з базового правила — щойно плашка активувалась (клікнув
      чекбокс), вона все одно з'являлась. Тому тут — той самий двокласовий
      селектор .is-plate-open .filter-option__plate (теж 0,0,2,0): рівна
      специфічність, а adaptive.css підключений після style.css, тож при
      рівній специфічності перемагає порядок підключення. */
   .filter-option__plate,
   .is-plate-open .filter-option__plate{
      display: none;
   }
   .catalog__sidebar-scroll{
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 0 20px 20px;
      scrollbar-width: thin;
      scrollbar-color: #797979 transparent;
   }
   .catalog__sidebar-scroll::-webkit-scrollbar{
      width: 10px;
   }
   .catalog__sidebar-scroll::-webkit-scrollbar-track{
      background: transparent;
   }
   .catalog__sidebar-popup-footer{
      display: block;
      padding: 10px 15px;
      border: none;
      background: linear-gradient(360deg, #141414 63.46%, rgba(20, 20, 20, 0) 100%);
   }
   .catalog__sidebar-popup-footer .catalog__sidebar-apply{
      width: 100%;
   }
   .message-fab{
      right: 10px;
      bottom: 70px;
   }
   .clients__list{
      gap: 15px;
   }
}
@media (max-width: 940px) {

   /* Перенесено сюда с 768px — на 940 и ниже .upgrade-service__grid уже
      тесно для аккордеона рядом с фото, картинка встаёт под аккордеон на
      всю ширину (column-reverse — сверху фото, снизу аккордеон). */
   .upgrade-service__grid{
      gap: 15px;
      flex-direction: column-reverse;
   }
   .upgrade-service__grid img{
      flex: 0 0 100%;
      width: 100%;
   }

   /* Перенесено сюда с 768px — так же, как upgrade-service выше.
      На мобильном все 12 карточек .peripherals — просто 2 в ряд, без
      десктопной мозаики (широкая первая/последняя карточка) и без
      отдельной "высокой" Монітори-карточки — все фото в images/widgets/
      peref-mobile/ уже одного размера (165×199 проверено), это подтверждает,
      что на мобильном все карточки равнозначны по форме.

      Разбивать на две отдельные сетки (7 в .peripherals__top + 5 в
      .peripherals__grid--small) не годится — оба числа нечётные, и в конце
      каждой группы одна карточка виснет одна в ряду (либо пустая ячейка
      рядом с ней, либо приходится растягивать её на всю ширину — а нужно,
      чтобы ВСЕ были строго по 2). Вместо этого делаем сетку на уровне самой
      .peripherals: 1 (Монітори) + 6 (мозаика) + 5 (нижний ряд) = 12 — чётно,
      ровно 6 рядов по 2 без остатка. .peripherals__top, вложенный в него
      <ul class="peripherals__grid"> и .peripherals__grid--small все получают
      display:contents, чтобы их карточки стали прямыми grid-item'ами
      .peripherals наравне друг с другом; .section-heading остаётся
      единственным настоящим прямым grid-item'ом и растягивается на всю
      ширину (grid-column:1/-1), чтобы не встать в пару с первой карточкой. */
   .peripherals{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
   .peripherals .section-heading{
      grid-column: 1 / -1;
      width: 100%;
   }
   .faq__inner h2{
      width: 100%;
   }
   .peripherals__top,
   .peripherals__top .peripherals__grid,
   .peripherals__grid--small{
      display: contents;
   }

   /* Сбрасываем десктопный/1550px flex-basis+aspect-ratio разброс (305/400,
      350/190, 440/190, 285/190 — мозаика и "высокая" карточка) на единую
      форму — все mobile-фото 165×199. */
   .peripheral-card,
   .peripheral-card--tall,
   .peripherals__top .peripherals__grid .peripheral-card,
   .peripherals__top .peripherals__grid .peripheral-card:first-child,
   .peripherals__top .peripherals__grid .peripheral-card:last-child,
   .peripherals__grid--small .peripheral-card{
      flex: unset;
      width: auto;
      height: auto;
      aspect-ratio: 165 / 199;
   }

   /* <picture>/<img> — та же схема, что и на 1550px (высота 100% карточки,
      ширина auto по собственному соотношению сторон фото), но без деления
      на "высокую"/обычные карточки: пропорция карточки и фото теперь везде
      одна и та же (165:199), поэтому единое правило подходит всем.
      translate:none гасит центрирование .peripheral-card--tall img
      (left:50%+translate из базового style.css). */
   .peripheral-card img{
      height: auto;
      width: 100%;
      translate: none;
      left: unset;
      position: relative;
      right: unset;
      aspect-ratio: auto;
      bottom: unset;
      object-fit: initial;
   }

   /* Сворачиваем .builds__filters_outer в компактную плашку (fps моб
      свернут.png): вместо полноценных выпадающих списков — один CTA-ряд:
      иконка + "FPS в іграх" / "Натисніть для вибору гри", и превью-фото
      справа во всю высоту плашки, впритык к правому краю. Сами выпадающие
      списки (.select) из разметки не убираем — просто прячем их видимую
      часть (.filter__select) вместе с сноской; клик по всей плашке всё ещё
      можно повесить на существующий .filter__select[data-games-select] в
      JS, если понадобится открыть выбор игры с этого свёрнутого вида. */
   .filter__select,
   .builds__note{
      display: none;
   }
   .builds__filter-tag__hint{
      display: block;
      color: var(--color-accent);
      font-weight: 500;
      font-size: 14px;
   }
   .builds__filters{
      gap: 15px;
      padding: 10px 10px 10px 10px;
      overflow: hidden;
      cursor: pointer;
   }
   /* .builds__banner-wrap — display:contents по умолчанию (style.css), т.е.
      сам img — прямой flex-item .builds__filters (десктопное поведение).
      Здесь оборачиваем в настоящий круг: overflow:hidden на квадратном
      38×38 блоке даёт ровный круг, а img внутри просто растягивается на
      100% (object-fit:cover не даёт исходным 140×60 исказиться). */
   .builds__banner-wrap{
      display: flex;
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      margin-left: auto;
      border-radius: 50%;
      overflow: hidden;
   }
   .builds__banner{
      width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 0;
      object-fit: cover;
   }
   .icon--fps{
      width: 38px;
      height: 38px;
   }
   .builds__filter-tag__label{
      font-size: 16px;
      font-weight: 700;
   }

   /* .categories__list остаётся flex-row (см. 1550px выше — карточки уже
      гибкие по ширине через flex-grow), здесь включаем перенос и фиксируем
      по 2 карточки в ряд начиная с 940px: gap сужен с базовых 20px до 15px,
      ширина каждой карточки — calc(50% - 7.5px) (половина нового гэпа с
      каждой стороны), !important — перебивает и инлайновый, и 1550px-шный
      width:auto !important. aspect-ratio каждой карточки (425:360 первая,
      340:360 остальные, из 1550px) не трогаем — высота при заданной ширине
      посчитается сама, без искажений. Действует и дальше вниз (768px, 475px
      уже переопределяют на 1-в-ряд отдельно). */
   .categories__list{
      flex-wrap: wrap;
      gap: 15px;
   }
   .category-card{
      flex: none;
      width: calc(50% - 7.5px) !important;
   }
   .faq__inner{
      display: flex;
      flex-direction: column;
      gap: 20px;
   }
   .faq__inner h2{
      text-align: left;
      font-size: 24px;
   }
   .faq__tab{
      font-size: 14px;
   }
   .faq-item__trigger{
      padding-block: 10px;
      font-size: 14px;
   }
   .faq-item__panel{
      padding-top: 15px;
      padding-bottom: 15px;
   }
   .faq-item__panel p{
      font-size: 14px;
   }
   .seo__top{
      flex-direction: column-reverse;
      gap: 15px;
   }
   .seo__top > img{
      width: 100%;
      height: auto;
      flex: 0 0 100%;
   }
   .seo__content{
      padding: 10px 15px;
   }
   .site-footer__column h3, .site-footer__contacts h3{
      margin-bottom: 0px;
      font-size: 16px;
   }
   .site-footer__top,.site-footer__contacts{
      gap: 0px
   }
   
   .game-card__label,.configurator__option,.program-card__label{
      font-size: 14px;
   }
}
@media (max-width: 768px) {
   .section-title{
      padding-top: 10px;
      padding-bottom: 10px;
   }
   .section-title h2{
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 24px;
   }
   .category-card__link{
      padding-top: 0px;
   }
   .category-card h3{
      position: absolute;
      left: 0;
      right: 0;
      top: 15px;
      text-align: center;
   }
   .category-card .btn--outline{
      position: absolute;
      top: 50px;
      text-align: center;
   }
   .btn--outline{
      padding: 5px 15px;
   }
   .hr-delim-big{
      height: 40px;
   }
   .build-card__spec-label{
      display: inline;
   }

   /* 3 колонки (1100px) делятся на 15 карточек без остатка, а 2 — уже нет
      (15%2=1): последняя карточка проставлена в index.php классом
      .build-card--overflow-2col (по тому же принципу, что и
      .build-card--overflow-4col выше) — прячем её, а не оставляем
      неполный ряд. */
   .builds__grid{
      grid-template-columns: repeat(2, 1fr);
   }
   .build-card--overflow-2col{
      display: none;
   }
   .catalog__grid{
      grid-template-columns: repeat(2, 1fr);
   }
   .step-card p{
      font-size: 16px;
   }
   .configurator{
      padding-block: 10px;
   }
   .configurator h2{
      font-size: 24px;
      margin-bottom: 10px;
      
   }
   .configurator__icon{
      max-width: 50px;
   }
   .configurator__group--purpose .configurator__option{
      padding: 10px 2px;
      line-height: 14px;
      font-size: 12px;
   }
   .configurator__group--resolution .configurator__option, .configurator__group--sphere .configurator__option, .configurator__group--params .configurator__option{
      font-size: 14px;
      padding: 10px 10px;
   }
   .configurator h3{
      display: none;
   }
   /* 3 колонки — grid не центрирует неполный последний ряд (см. коммент в
      style.css), поэтому здесь тот же flex-wrap приём: базовый .game-card
      flex-basis тоже пересчитан под 3 колонки с этим же 15px-гэпом. */
   .configurator__games{
      gap: 15px;
   }
   .configurator__games .game-card{
      flex-basis: calc((100% - 2 * 15px) / 2);
   }
   /* .configurator__programs уже flex-wrap+justify-content:center (style.css,
      фикс. .program-card{flex:0 0 207px}) — этого хватало на десктопе, где
      сам ширина контейнера подгоняла ровно 5 в ряд, но на узкой ширине
      фикс. px сам по себе не даёт именно 3 в ряд. Тот же пересчёт в % от
      контейнера, что и у .configurator__games выше. */
   .configurator__programs{
      gap: 15px;
   }
   .program-card{
      flex-basis: calc((100% - 2 * 15px) / 2);
   }
   .configurator__group--sphere .configurator__option ,.configurator__group--price .configurator__option{
      flex: 0 0 auto;
   }
   .section-heading h2{
      font-size: 24px;
      text-align: left;
   }
   .section-heading .btn--outline{
      display: none;
   }
   .peripherals .section-heading{
      margin-bottom: 0;
      /* display:contents "распаковывает" section-heading — h2 и кнопка
         становятся прямыми grid-item'ами .peripherals (а не flex-детьми
         внутри одного grid-item'а, как на 940px), иначе кнопку нельзя было
         бы переместить в конец сетки независимо от заголовка через order.
         Раньше жило в блоке 468px — перенесено сюда, чтобы кнопка
         "Дивитись все" появлялась уже с 768px. */
      display: contents;
   }
   .peripherals .section-heading h2{
      grid-column: 1 / -1;
      margin-bottom: -5px;
   }
   /* Общее правило .section-heading .btn--outline{display:none} (768px)
      здесь для peripherals перебивается более специфичным селектором —
      кнопка не прячется, а уезжает в самый конец сетки (order:99, после
      всех карточек) и центрируется по ширине. */
   .peripherals .section-heading .btn--outline{
      display: block;
      grid-column: 1 / -1;
      order: 99;
      justify-self: center;
      margin-top: 10px;
   }
   .peripheral-card__label{
      bottom: 10px;
      font-size: 14px;
      display: block;
      left: 0;
      right: 0;
      position: absolute;
      text-align: center;
   }
   .works__tab{
      font-size: 14px;
      padding: 8px 15px;
   }
   .works .slider-controls, .steps .slider-controls{
      display: none;
   }
   /* .works__slide на десктопе — фикс. 586px + фикс. px-строки (327/212),
      см. style.css. На узких экранах фикс. 586px не даёт увидеть даже 2
      слайда сразу — делаем ширину гибкой (88% контейнера — слайдер
      slidesPerView:'auto' сам покажет 1 целый + "подглядывающий" край
      следующего, к 1-2 слайдам, как и просили), а строки мини-сетки
      переводим с фикс. px на fr в той же пропорции 327:212, что и раньше,
      чтобы большое/маленькие фото внутри слайда не мялись при уменьшении
      его ширины — но fr-строкам нужна определённая высота контейнера,
      которой при auto-высоте у .works__slide просто нет (сжались бы в 0),
      поэтому дополнительно задаём aspect-ratio самого слайда (586:559,
      586×игрек + 20px гэп между строками — то же соотношение, что и в
      исходных фикс. px). */
   .works__slide{
      width: 88%;
      aspect-ratio: 586 / 559;
      gap: 10px;
      grid-template-rows: 327fr 212fr;
   }
   .works__slide--alt{
      grid-template-rows: 212fr 327fr;
   }
   .accordion-item__trigger{
      font-size: 18px;
   }
   .accordion-item__panel{
      padding-top: 15px;
   }
   .accordion-item__panel p,.accordion-item__panel li{
      font-size: 16px;
   }
   .accordion-item__panel ul {
      margin-bottom: 10px;
   }
   .news .slider-controls{
      display: none;
   }

   /* .seo__content-inner на десктопе скроллится (overflow-y:auto, видимый
      тонкий скроллбар) — здесь вместо скролла контент просто обрезается по
      фиксированной высоте (overflow:hidden), а на месте пропавшего
      скроллбара — низ по центру иконка "показати більше" на затемняющей
      полосе. Полоса и иконка — дети .seo__content (у него уже
      position:relative, style.css), а не .seo__content-inner, поэтому
      бleed делаем отрицательными отступами, равными его текущему padding
      на этой ширине (10px 15px, задан чуть выше в блоке 940px) — иначе
      полоса не доходила бы до истинного края скруглённой карточки. */
   .seo__content-inner{
      overflow: hidden;
   }
   .seo__more-fade{
      display: block;
      position: absolute;
      left: -15px;
      right: -15px;
      bottom: 0px;
      height:86px;
      background: linear-gradient(0deg, #181818 0%, rgba(24, 24, 24, 0) 100%);
      pointer-events: none;
      /* Скрытие по клику анимируется через height, а не opacity — bottom
         остаётся на месте, поэтому верхний край полосы едет вниз к нижнему
         краю ("сверху вниз"), а не тает на месте целиком. */
      transition: height 0.35s ease;
   }
   .seo__more-toggle{
      display: block;
      position: absolute;
      left: 50%;
      bottom: 2px;
      transform: translateX(-50%);
      transition: transform 0.35s ease;
   }

   /* Клик по .seo__more-toggle (JS в конце index.php) переключает
      .is-expanded на .seo__content — оба состояния обратимы:
      - полоса анимированно схлопывается до 0 (см. transition выше);
      - кнопка не прячется, а уезжает на 56px вниз (тот же translateX(-50%)
        для центрирования + добавленный translateY);
      - .seo__content-inner получает реальную прокрутку взамен обрезанной
        высоты.
      Повторный клик снимает класс — все три возвращаются в исходное
      состояние, прокрутка пропадает. */
   .seo__content.is-expanded .seo__more-fade{
      height: 0;
   }
   .seo__content.is-expanded .seo__more-toggle{
      transform: translate(-50%, 56px);
   }
   .seo__content.is-expanded .seo__content-inner{
      overflow-y: auto;
   }
   .seo__tags{
      padding: 10px 15px;
   }
   .seo__tab-list{
      margin-bottom: 10px;
   }
   .program-card{
      height: auto;
   }
   .site-footer__contacts a{
      font-size: 16px;
   }
   .popup__header h2{
      font-size: 24px;
   }
   .popup__header{
      padding: 15px 15px;
   }
   .cart-popup__list{
      gap: 15px;
      padding: 0 15px;
   }
   .cart-item__image{
      width: 60px;
      height: 60px;
   }
   .cart-item__title{
      font-size: 14px;
   }
   .cart-item__price strong{
      font-size: 16px;
   }
   .cart-item__qty{
      font-size: 14px;
   }
   .cart-popup__total{
      margin-bottom: 10px;
   }
   .cart-popup__total strong,.cart-popup__total strong span{
      font-size: 18px;
   }
   .cart-popup__footer{
      padding: 10px 15px 15px 15px;
   }
   .cart-popup__footer::before{
      left: 15px;
      right: 15px;
   }
   .cart-popup__actions .btn--outline,.cart-popup__actions .btn--accent{
      font-size: 14px;
   }
   .cart-popup__actions .btn--accent{
      padding: 10px 15px;
   }
   .contact-popup__body{
      gap: 15px;
      padding: 0 15px 15px;
   }
   .contact-popup__phone{
      font-size: 24px;
   }
   .contact-popup__cta-label{
      font-size: 16px;
   }
   .contact-popup__footer{
      font-size: 14px;
      padding: 15px 15px;
   }
   .messenger-chip{
      padding: 5px 10px;
   }
   .wizard-stepper{
      /* Степпер теперь внутри .wizard-popup__body (см. index.php) и
         прокручивается вместе с формой — горизонтальный отступ уже даёт
         padding самого body, здесь только отступ снизу до первого поля. */
      margin-bottom: 15px;
      padding: 0 10px;
   }
   .wizard-stepper::before,
   .wizard-stepper::after{
      left: 10px;
   }
   .wizard-stepper::before{
      right: 10px;
   }
   .wizard-stepper::after{
      width: calc((100% - 20px) * var(--wizard-progress));
   }
   .wizard-stepper__item{
      padding: 10px 3px 23px;
      font-size: 14px;
   }
   .wizard-stepper__item:not(.is-current){
      display: none;
   }
   .wizard-popup__body{
      padding: 20px 15px 20px;
   }
   .wizard-group__title{
      font-size: 18px;
      margin-bottom: 15px;
   }
   .wizard-group__chips{
      gap: 15px;
   }
   .wizard-chip span{
      padding: 10px 15px;
      font-size: 16px;
   }
   .wizard-input{
      width: 100%;
   }
   .wizard-popup__footer{
      margin: 0 15px;
      padding: 15px 0;
   }
   .wizard-link{
      font-size: 14px;
   }
   .modal__title{
      font-size: 24px;
   }
   .modal__header{
      gap: 15px;
      padding: 20px 15px 15px;
   }
   .modal__body{
      padding: 0 15px 20px;
      font-size: 16px;
      line-height: 1.4;
   }
   .modal__body p + p, .modal__body p + ul {
      margin-top: 15px;
   }
   .modal{
      max-width: 100vw;
      max-height: 100dvh;
   }
   .modal__body ul{
      padding-left: 0px;
   }
   .message-fab{
    width: 60px;
    height: 60px;
    bottom: 80px;
  }
  .cart-item{
   gap: 10px;
  }
  .wizard-textarea{
   padding: 10px 10px;
  }
  .build-card__title{
      min-height: auto;
  }
  .peref-nav__link{
      padding: 10px 20px;
  }
  .sort-select .select__list{
      left: 0;
      right: auto;
  }
  .client-card{
   width: 100%;
   max-width: 100%;
  }
  .client-card__link{
   padding-top: 15px;
  }
  .client-card h3{
   margin-bottom: 10px;
   z-index: 3;
   font-size: 18px;
  }
  .search-page__meta{
   font-size: 14px;
  }
}

@media (max-width: 480px) {
   /* На 1 колонку остатка не бывает (любое число карточек делится на 1
      нацело) — .build-card--overflow-2col возвращаем обратно (он скрыт
      только в диапазоне 2-колоночной раскладки выше). */
   .builds__grid{
      grid-template-columns: repeat(1, 1fr);
   }
   .build-card--overflow-2col{
      display: flex;
   }
   .catalog__grid{
      grid-template-columns: repeat(1, 1fr);
   }
   /* 8 карточек (видеокарты/процессоры) на 2 колонки делятся ровно (4 ряда),
      но 16 игр — тоже ровно (8 рядов), так что здесь неполных рядов не
      бывает; flex-basis всё равно пересчитан под 2 колонки для
      единообразия с 768px-тиром выше (тот же flex-wrap приём). */
   .configurator__games{
      gap: 15px;
   }
   .mobile-footer-nav__item{
      font-size: 9px;
   }
   .catalog__mobile-filters-btn, .catalog__toolbar-sort{width: auto;max-width: 55%;}
}

@media (max-width: 475px) {
   /* Ниже 475 — по 1 карточке категорий в ряд (на 768px было по 2, см.
      выше). flex-direction:column вместо flex-wrap:wrap, каждая карточка —
      на всю ширину, aspect-ratio сбрасывается (auto), т.к. на такой узкой
      ширине держать 425:360/340:360 уже не нужно — высота вместо этого
      естественно следует из img, который здесь становится обычным
      block-элементом в потоке (position:relative), а не абсолютным фоном
      под текстом — на 1-в-ряд карточке текст поверх фото читался бы плохо. */
   .categories__list{
      flex-direction: column;
      gap: 15px;
   }
   .category-card{
      aspect-ratio: auto;
      flex-grow: 1;
      width: 100% !important;
   }
   .category-card img{
      position: relative;
      height: auto;
      width: 100%;
   }
   .category-card picture{
      width: 100%;
   }
}

@media (max-width: 468px) {
   /* Мобильный баннер (баннер телефон.png) — портретное фото на всю
      карточку (375×557, тот же формат, что и mob1.png, отсюда aspect-ratio
      вместо десктопного фикс. height:450px — Swiper сам не задаёт высоту
      слайда, только ширину:100%, высота всегда была на нашем CSS), с
      затемнением снизу (не слева, как на десктопе) и текстом, прижатым к
      низу по центру, а не слева по вертикальному центру. */
   .hero__slider,
   .hero__slide{
      height: auto;
      aspect-ratio: 375 / 557;
   }
   .hero__overlay{
      background: linear-gradient(180deg, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, 0.85) 75%, var(--color-bg-dark) 100%);
      
   }
   .hero__inner{
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 45px;
      padding-left: 20px;
      padding-right: 20px;
   }
   .hero__content{
      max-width: 100%;
      height: 230px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
   }
   .hero__content h1{
      font-size: 24px;
   }
   .hero__content p{
      font-size: 16px;
      margin-bottom: 15px;
   }
   .hero .swiper-pagination{
      bottom: 12px;
   }
   /* В макете на мобильном нет видимых стрелок — предполагается свайп. */
   .hero .slider-arrow{
      display: none;
   }
   .hero__content p{
      font-weight: 500;
   }

   /* scale(1.2) по умолчанию растёт от центра элемента в обе стороны —
      .build-card__price (левый край .build-card__footer, justify-content:
      space-between в style.css) сдвинулся бы влево за счёт роста налево,
      а .btn--icon-round--cart (правый край того же ряда) и .badge
      (position:absolute; right:10px) — вправо. transform-origin держит
      "внешний" край на месте: у цены — left (растёт только вправо, внутрь
      карточки), у кнопки корзины и бейджа — right (растут только влево). */
   .build-card__price{
      transform: scale(1.1);
      transform-origin: left;
   }
   .btn--icon-round--cart,
   .badge{
      transform: scale(1.1);
      transform-origin: right;
   }
   .steps .section-heading,.news  .section-heading{
      margin-bottom: 10px;
   }
   .faq__tab,.faq-item__trigger,.faq-item__panel p{
      font-size: 16px;
   }
   .category-card:first-child{
      aspect-ratio: auto;
      height: auto!important;
   }

   /* Фільтри каталогу на весь екран (фильтрытелефон.png) — панель, що з
      992px була фіксованою 380px-вою висувною панеллю, тут розтягується на
      всю ширину екрана замість неї; висота/positioning (position:fixed,
      right:0, transform-слайд) лишаються тими самими, задані в блоці
      992px вище, тут лише перекриваємо width. */
   .catalog__sidebar{
      width: 100vw;
   }
   /* Прилипла кнопка "Показать (N)" замінює бокові плашки (ті сховані вже з
      992px, вище) — завжди на дні панелі, поза скролом
      .catalog__sidebar-scroll (flex-shrink:0, той самий "шапка/футер завжди
      на місці, скролиться лише вміст" патерн, що й .popup__header). */
   .catalog__sidebar-popup-footer{
      display: block;
      flex-shrink: 0;
      padding: 15px 20px;
      padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
   }
   .catalog__sidebar-apply{
      display: block;
      width: 100%;
      text-align: center;
      padding: 14px;
      font-size: 16px;
   }
   .filters__cta{
      padding: 10px 15px;
      border-radius: 26px;
   }
   .catalog__sidebar-apply{
      padding: 10px;
   }
   .pcard__stock{
      font-size: 14px;
   }
}
/* ===== Каталог периферії: навігація-слайдер та картки ===== */
@media (max-width: 1600px) {
  .peref-nav { padding-left: 20px; padding-right: 0; }
}
@media (max-width: 1280px) {
  .peref-nav { padding-left: 15px; }
}
@media (max-width: 1600px) {
  /* Фото картки периферії: по центру по горизонталі, притиснуте донизу; розміри
     не більші за блок .pcard__media (висоту не фіксуємо, лише обмежуємо). */
  .pcard__media img {
    top: auto;
    bottom: 15px;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transform: translateX(-50%);
  }
}
@media (max-width: 480px) {
  .pcard__media { height: 247px; }
}

/* Клиентам: карточки разделов */
@media (max-width: 1600px) {
   .clients { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1100px) {
   /* карточки одного размера, нечётная последняя центрируется (justify-content:center у списка) */
   .client-card { flex: 0 0 calc((100% - 20px) / 2); max-width: none; aspect-ratio: 350 / 325; }

   .client-card__text { display: none; }
   .client-card__more-ru { display: none; }
   .client-card__more-uk { display: inline; }
}
@media (max-width: 768px) {
   .client-card { flex: 0 0 100%; }
}

/* Блог: сетка статей (перебивает width:285px у .article-card из 1600px-правила) */
@media (max-width: 1600px) {
   .blog { padding-left: 20px; padding-right: 20px; }
   .blog__grid .article-card { width: auto; }
}
@media (max-width: 1280px) {
   .blog__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
   .blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
   .blog__grid { grid-template-columns: 1fr; }
   .blog__subtitle { font-size: 16px; }
}

/* Поиск: сетка результатов 5 → 4 → 3 → 2 → 1, поля — как у остальных секций */

@media (max-width: 1400px) {
   .search-page__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
   .search-page__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
   .search-page__grid { grid-template-columns: repeat(2, 1fr); }
   .search-page__title { font-size: 24px; }
   .search-page{
      padding-top: 10px;
   }
   .search-page__form{
      margin: 0 auto 20px;
   }
}
@media (max-width: 480px) {
   .search-page__grid { grid-template-columns: 1fr; }
}

/* Баннер периферии */
@media (max-width: 1600px) {
   .page-hero__inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1100px) {
   .page-hero__content { max-width: 480px; }
}
@media (max-width: 768px) {
   .page-hero{
      padding-bottom: 11px;
      border-bottom: 1px solid hsl(0deg 0% 100% / 10%);
   }
   .page-hero__image { position: static; height: auto; }
   .page-hero__inner { min-height: 0; padding: 15px 15px 20px; }
   .page-hero__content { max-width: none; text-align: center; }
   .page-hero__content h1 { font-size: 24px; margin-bottom: 10px; }
   .page-hero__content p { font-size: 14px; }
}

/* "Столы" на мобильном: .peripherals — grid на 2 колонки, одиночная карточка
   занимает свой ряд, шириной в одну колонку, по центру */
@media (max-width: 940px) {
   .peripherals__grid--extra .peripheral-card {
      grid-column: 1 / -1;
      justify-self: center;
      width: calc((100% - 20px) / 2);
   }
}

/* Баннер периферии: при сужении кадр центрируется (на десктопе — вправо, где сам ПК) */
@media (max-width: 1600px) {
   .page-hero__image { object-position: center; }
}
@media (max-width: 768px) {
   .page-hero__image { display: block; margin-inline: auto; object-position: center; }
}

/* Страница сборки (assembly.php) */
@media (max-width: 1400px) {
   .assembly__inner, .assembly-fps__inner, .assembly__inner, .assembly-fps__inner, .acfg { padding-left: 15px; padding-right: 15px; }
   .acfg__head{padding: 0 0 0 15px;}
   .assembly__inner { gap: 30px; }
   .assembly__gallery { flex-basis: 50%; }
   .assembly__title { font-size: 32px; }
   .assembly-fps__inner { flex-wrap: wrap; }
}
@media (max-width: 992px) {
   .assembly__inner { flex-direction: column; align-items: stretch; }
   .assembly__gallery { flex-basis: auto; max-width: 560px; width: 100%; margin-inline: auto; }
   .assembly__buy { flex-wrap: wrap; }
   .assembly-fps__controls { flex-wrap: wrap; }
   .assembly-fps__game { flex-basis: 100%; }
   .acfg__head{font-size: 18px;}
}
@media (max-width: 480px) {
   .assembly__title { font-size: 24px; }
   .assembly__specs { grid-template-columns: 1fr; }
   .assembly__code-row { gap: 20px; flex-wrap: wrap; }
   .assembly__buy-btn { width: 100%; }
   .assembly-fps__controls .filter__select { width: 100%; }
   .assembly-fps__controls { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Конфигуратор сборки (assembly.php) */
@media (max-width: 1280px) {
   .acfg__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
   .acfg__grid { grid-template-columns: repeat(3, 1fr); }
   .acfg__preview { display: none; }
}
@media (max-width: 768px) {
   .acfg__tabs { --acfg-gap: 20px; }
   .acfg__tabs-list { display: flex; gap: var(--acfg-gap); flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
   .acfg__tabs-list::-webkit-scrollbar { display: none; }
   .acfg__grid { grid-template-columns: repeat(2, 1fr); }
   .acfg__bar-label { display: none; }
}
@media (max-width: 480px) {
   .acfg__head { font-size: 15px; flex-wrap: wrap; }
   .acfg__row-spec { display: none; }
}

/* <=1440px: плавающая колонка скрыта, группы конфигуратора на всю ширину;
   покупка — через нижний .buy-bar (JS показывает его, когда .assembly__buy-btn
   уходит за экран, .acfg__float-buy скрыт и не считается видимым). */
@media (max-width: 1440px) {
   .acfg__col { max-width: none; }
   .acfg__groups { max-width: none; width: 100%; }
   .acfg__aside { display: none; }
}

@media (max-width: 1200px) {
   .acfg__layout { flex-direction: column; align-items: stretch; }
   .acfg__aside { position: static; flex-basis: auto; margin-top: 20px; max-width: 360px; }
}

/* Описание сборки (assembly.php) */
@media (max-width: 992px) {
   .acfg__desc-row, .acfg__desc-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; padding: 20px 0; }
   .acfg__desc-text { max-width: none; }
   .acfg__desc-media { padding: 0; }
   .acfg__desc-title { font-size: 28px; }
}

/* Описание сборки — мобильный вид (макет Group1-mobile.png): картинка сверху,
   тень на всю ширину экрана (вылезает за 15px-поля), текст под ней. */
@media (max-width: 768px) {
   .acfg__desc-row, .acfg__desc-row:nth-child(even) { gap: 10px; padding: 20px 0; }
   .acfg__desc-media { order: -1; }
   .acfg__desc-media::before { inset: 0 -15px; background-size: 100% 100%; }
   .acfg__desc-media img { width: 300px; }
   .acfg__desc-label { font-size: 16px; font-weight: 400; }
   .acfg__desc-title { margin-bottom: 10px; font-size: 20px; line-height: 1.35; }
   .acfg__desc-p { margin-bottom: 14px; font-size: 14px; line-height: 19px; }
   .acfg__desc-foot { padding: 30px 0 10px; }
}

/* ==========================================================================
   Страница сборки — мобильный вид (макет Frame1160.png, 381px).
   ========================================================================== */
@media (max-width: 768px) {
   /* --- Верх страницы: категория, заголовок, галерея, цена/кнопка, код, гарантии, характеристики --- */
   .assembly__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 5px 15px 10px; }
   .assembly__info { display: contents; }
   .assembly__category { order: 1; font-size: 14px; font-weight: 400; }
   .assembly__title { order: 2; margin: 0px 0 10px; font-size: 24px; }
   .assembly__gallery { order: 3; flex: none; width: 100%; max-width: 420px; margin: 0 auto 50px; }
   .assembly__buy { order: 4; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 15px; border-bottom: 0; }
   .assembly__code-row { order: 5; justify-content: center; margin: 0px 0 15px; font-size: 16px; }
   .assembly__guarantees { order: 6; display: grid; grid-template-columns: 1fr; gap: 15px 10px; padding:20px 0 20px; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
   .assembly__specs-title { order: 7; margin: 0px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-accent); font-size: 16px; font-weight: 700; }
   .assembly__specs { order: 8; grid-template-columns: 1fr; gap: 0; padding-bottom: 0; border-bottom: 0; }
   .assembly__description, .assembly__compare { display: none; }
   /* "Краткие характеристики": в шапке сборки скрыты, показываем копию после блока FPS */
   .assembly__info > .assembly__specs-title, .assembly__info > .assembly__specs { display: none; }
   .assembly-specs-m { display: block; }
   .assembly-specs-m__inner { padding: 0px 15px 20px; }
   /* Свёрнуто (макет "краткие характеристики свёрнуты.png"): ~4,5 пункта, снизу затухание в #111 и кнопка "Подробнее". */
   .assembly-specs-m__list { position: relative; padding-bottom: 36px; transition: padding-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
   .assembly-specs-m__list.is-collapsed { padding-bottom: 0; }
   /* Высота заливается из JS в px (inline max-height) — иначе CSS-переход не сработает. */
   .assembly-specs-m__clip { max-height: 258px; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
   .assembly-specs-m__list::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #111111 76.92%); transition: opacity 0.35s ease; }
   .assembly-specs-m__list.is-collapsed::after { opacity: 1; }
   .assembly-specs-m__more { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0; font-size: 14px; line-height: 22px; color: var(--color-text); cursor: pointer; }
   .assembly-specs-m__icon { flex: 0 0 16px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
   /* Плюс -> минус: вертикальная черта схлопывается к центру, иконка делает пол-оборота. */
   .assembly-specs-m__icon-v { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
   .assembly-specs-m__more[aria-expanded="true"] .assembly-specs-m__icon { transform: rotate(180deg); }
   .assembly-specs-m__more[aria-expanded="true"] .assembly-specs-m__icon-v { transform: scaleY(0); }
   .assembly-specs-m__list.is-short { padding-bottom: 0; }
   .assembly-specs-m__list.is-short .assembly-specs-m__clip { max-height: none; }
   .assembly-specs-m__list.is-short::after, .assembly-specs-m__list.is-short .assembly-specs-m__more { display: none; }
   @media (prefers-reduced-motion: reduce) {
      .assembly-specs-m__list, .assembly-specs-m__clip, .assembly-specs-m__list::after, .assembly-specs-m__icon, .assembly-specs-m__icon-v { transition: none; }
   }
   .assembly-fps{
      padding-bottom: 10px;
      padding-top: 10px;
   }
   .assembly__price { text-align: center; }
   .assembly__price-old { display: none; }
   .assembly__price-new { font-size: 28px; }
   .assembly__price-new::before { content: 'Ціна '; font-size: 18px; font-weight: 400; color: #ccc; }
   .assembly__buy-btn { width: 100%; height: 42px; }
   .assembly__installment { text-align: center; }
   .assembly__installment a { display: none; }
   .assembly__installment p { font-size: 16px; color: var(--color-accent); text-decoration: underline; }
   .assembly__guarantee-link { gap: 8px; }
   .assembly__guarantees p, .assembly__guarantees span { font-size: 14px; }
   .assembly__specs li { padding: 10px 0 10px 17px; border-bottom: 1px solid #2a2a2a; font-size: 14px; font-weight: 500; line-height: 20px; }
   .assembly__specs li::before { top: 50%; transform: translateY(-50%); }
   .assembly__spec-label { display: block; font-size: 12px; line-height: 16px; color: #888; }

   /* --- Плашка FPS: одна кнопка выбора игры + карточка с FPS по разрешениям --- */
   .assembly-fps__inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 15px 0px; }
   .fpsdelim{height: 1px;background-color: #2a2a2a;margin-top: 10px;}
   .assembly-fps__controls { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background-color: #202020; cursor: pointer; }
   .assembly-fps__controls .filter__select { display: none; }
   .assembly-fps .builds__filter-tag__hint { display: block; font-size: 14px; font-weight: 500; color: var(--color-accent); }
   .assembly-fps__cta-icon { display: block; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; }
   .assembly-fps__cta-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
   .assembly-fps__game { display: none; }
   .assembly-fps__res { display: block; padding: 12px 15px 15px; border-radius: 10px; background-color: #202020; }
   .assembly-fps__res-title { margin-bottom: 4px; font-size: 16px; font-weight: 700; }
   .assembly-fps__res-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 16px; font-size: 14px; color: #b7b7b7; }
   .assembly-fps__res-row b { font-weight: 400; color: #fff; }
   .assembly-fps__res-row .assembly-fps__bar { grid-column: 1 / -1; height: 8px; }
   .assembly-fps__res-row span+span{color:#888;}
   /* --- Конфигуратор --- */
   .acfg__inner { padding: 0 15px 40px; }
   .acfg__tabs { --acfg-gap: 24px; padding: 14px 0 12px; margin-bottom: 0; font-size: 14px; }
   .acfg__aside { display: none; }
   .acfg__groups { gap: 0; }
   /* overflow:clip у .acfg__collapse-inner обрезал отрицательные margin у
      .acfg__cats/.acfg__list — расширяем сам клип-контейнер на 15px с каждой стороны. */
   .acfg__collapse-inner { margin-inline: -15px; padding-inline: 15px; }
   .acfg__head, .acfg__group:not(.is-open) .acfg__head { height: 44px; padding: 0; border-radius: 0; background: none; font-size: 16px; }
   .acfg__group { border-bottom: 1px solid #2a2a2a; }
   .acfg__group.is-open:has(.acfg__more-btn) { border-bottom: 0; }
   .acfg__summary { display: none; }
   .acfg__chevron { order: 2; margin-left: auto; color: var(--color-accent); }
   .acfg__body { flex-direction: column; gap: 14px; padding: 4px 0 18px; }
   .acfg__preview { display: flex; align-items: center; justify-content: center; position: static; flex: none; width: 100%; height: 210px; padding: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, #2c2c2c, #1d1d1d); }
   .acfg__preview img { width: 190px; height: 190px; margin: 0; }
   .acfg__preview p { display: none; }
   .acfg__top { padding-bottom: 15px; display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; align-items: center; }
   .acfg__bar { display: contents; }
   .acfg__cats { grid-column: 1 / -1; grid-row: 1; margin-inline: -15px; padding-inline: 15px; -webkit-mask-image: none; mask-image: none; }
   .acfg__cats .swiper-slide { width: auto; }
   .acfg__cat { padding: 5px 10px; border-radius: 10px; background-color: #202020; font-weight: 500; font-size: 14px; }
   .acfg__cat.is-active { background-color: #dcdcdc; color: #111; }
   .acfg__cat:hover { color: inherit; }
   .acfg__cat.is-active:hover { color: #111; }
   .acfg__bar-meta { display: flex; flex-direction: column; grid-row: 2; }
   .acfg__bar-label { display: block; font-size: 12px; color: #ccc; }
   .acfg__bar-current { display: block; font-size: 14px; font-weight: 700; }
   .acfg__views { grid-row: 2; flex: none; width: auto; height: auto; gap: 10px; background: none; }
   .acfg__view { align-items: center; justify-content: center; width: 50px; height: 40px; border-radius: 8px; background-color: #202020; }
   .acfg__list { margin: 0 -15px; padding: 0; background: none; }
   .acfg__row { height: auto; min-height: 60px; padding: 11px 15px; }
   .acfg__row + .acfg__row { background-position: 15px 0; background-size: calc(100% - 30px) 1px; }
   .acfg__radio { display: none; }
   .acfg__radio-btn { gap: 15px; align-items: center; }
   /* Макет Frame1120.png: плитка 44px (#202020, r8) с фото 40px внутри; название 14/18 белым,
      ниже в одну строку характеристики и разница в цене (12/16, серым, зазор 15px). */
   .acfg__row-thumb { display: block; flex: 0 0 44px; width: 44px; height: 44px; padding: 2px; box-sizing: border-box; border-radius: 8px; background-color: #202020; object-fit: contain; }
   /* Характеристики и разница в цене идут одним потоком: цена продолжает строку спека или переносится вместе с ним (Frame1121.png). */
   .acfg__row-name { display: block; flex: 1; min-width: 0; white-space: normal; font-size: 12px; line-height: 16px; }
   .acfg__row-title { display: block; font-size: 14px; line-height: 18px; }
   .acfg__row-spec { display: inline; margin: 0; color: #8c8c8c; }
   .acfg__row-mdiff { display: inline; margin: 0 0 0 15px; color: #8c8c8c; }
   .acfg__qty--row { display: inline-flex; flex: 0 0 67px; align-items: center; justify-content: space-between; gap: 0; width: 67px; max-width: 67px; margin-left: auto; font-size: 18px; line-height: 1; color: #aaa; }
   .acfg__qty--row > span { display: block; text-align: center; line-height: 24px; }
   .acfg__qty--row button { display: flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 24px; padding: 0; font-size: 24px; line-height: 1; }
   .acfg__row.has-qty .acfg__row-info { display: none; }
   .acfg__row .acfg__diff { display: none; }
   .acfg__badge { display: none; }
   .acfg__row.is-selected { background-color: #2b2b2b; }
   .acfg__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 0; }
   /* Макет 55.png/56.png (карточка 171×252): картинка во всю ширину квадратом,
      боковые отступы 13px, название 14/18, подвал 20px на расстоянии 14px от низа. */
   .acfg__card { min-height: 0; padding: 0 13px 14px;}
   .acfg__card img { width: calc(100% + 26px); height: auto; aspect-ratio: 1; margin: 0 -13px 5px; }
   .acfg__card-name { margin-bottom: 10px; font-size: 14px; line-height: 18px; }
   /* Подвал: слева "i", цена/счётчик по центру, справа радио (в DOM цена идёт первой). */
   .acfg__card-foot { gap: 10px; }
   .acfg__card-foot .acfg__row-info { order: 1; flex: 0 0 auto; }
   .acfg__card-foot .acfg__diff,
   .acfg__card-foot .acfg__qty { order: 2; flex: 1; justify-content: center; text-align: center; }
   .acfg__card-foot .acfg__radio-btn--card { order: 3; }
   .acfg__card-foot .acfg__radio { display: block; }
   .acfg__more { margin-top: 14px; }
   .acfg__more-btn { justify-content: center; text-align: center; }
   .acfg{padding-left: 0;padding-right: 0;}
}

/* Нижний бар покупки (assembly.php) */
@media (max-width: 1600px) {
   .buy-bar__inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1200px) {
   /* над мобильной нижней панелью (.mobile-footer-nav) */
   .buy-bar { bottom: 60px; }
   .buy-bar__inner { grid-template-columns: 1fr auto; gap: 15px; }
   .buy-bar__actions { display: none; }
}
@media (max-width: 992px) {
   .buy-bar__product div { display: none; }
   .buy-bar__inner { padding-left: 15px; padding-right: 15px; height: 56px; }
   .buy-bar__cat { display: none; }
   .buy-bar__name { font-size: 14px; }
   /* фото -> 15px -> цена слева, кнопка "Купити" прижата вправо */
   .buy-bar__inner { display: flex; gap: 15px; }
   .buy-bar__product { flex: 0 0 auto; }
   .buy-bar__buyblock { flex: 1; min-width: 0; justify-content: space-between; gap: 15px; }
   .buy-bar__price strong { font-size: 18px; line-height: 22px; }
   .buy-bar__buy { width: auto; padding-inline: 16px; height: 38px; }
   .cart-empty__title { font-size: 18px; }
}

/* В прилипших вкладках на <=1200px — только кнопка «наверх» (меню есть в нижней панели) */
@media (max-width: 1200px) {
   .acfg__tabs-btn[data-proxy] { display: none; }
}

/* Шапка на <=1200px не липкая — sticky-блокам конфигуратора смещение под неё не нужно */
@media (max-width: 1200px) {
   .acfg__tabs { top: 0; }
   .acfg__preview, .acfg__aside { top: calc(var(--acfg-tabs-h, 0px) + 20px); }
}

/* Вкладка "FPS в играх" */
@media (max-width: 1280px) {
   .acfg__games { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
   .acfg__fpstab-title { font-size: 24px; }
   .acfg__fpstab-note { font-size: 14px; }
}
@media (max-width: 768px) {
   .acfg__fpstab-title { margin-top: 20px; }
   .acfg__fpstab-note { margin-bottom: 20px; }
   .acfg__game { flex-direction: column; }
   .acfg__game-img { flex: none; width: 100%; height: auto; aspect-ratio: 374 / 194; }
   .acfg__games { gap: 22px; }
   .acfg__game { gap: 10px; }
   .acfg__game-info { gap: 8px; padding: 12px; }
   .acfg__game-name { font-size: 16px; }
   .acfg__game-row { row-gap: 5px; font-size: 13px; }
   .acfg__desc-foot { padding-top: 30px; }
}


/* ==========================================================================
   Корзина (cart.php)
   ========================================================================== */
@media (max-width: 1600px) {
   .cart,.cart-related { padding-left: 20px; padding-right: 20px; max-width: 100%; }
   .cart-related .pcard { width: 285px; }
}
@media (max-width: 1280px) {
   .cart,.cart-related { padding-left: 15px; padding-right: 15px; }
}
/* Ниже 1150 правая колонка (.cart__aside) уходит под список: заметка,
   кнопки-ссылки и панель итога идут в потоке после товаров. Сама строка
   товара при этом остаётся "табличной" — на две линии она ломается только
   на 768 (см. ниже). */
@media (max-width: 1150px) {
   .cart__layout { flex-direction: column; align-items: stretch; gap: 0; }
   .cart__aside,
   .cart-summary { display: contents; }
   .cart__main { order: 1; }
   .cart-aside-links { order: 2; margin-top: 20px; }
   .cart-summary__note { order: 3; margin: 15px 0 0px; font-size: 13px; color: #ccc; }
   .cart-summary__title { display: none; }

   .cart-aside-link { height: 40px; font-size: 14px; }

   .cart-summary__bar {
      order: 4;
      /* Фиксирована у нижнего края окна, как .mobile-footer-nav. */
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 900;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "total total" "oneclick buy";
      gap: 10px;
      padding: 12px 15px;
      background-color: #111;
      box-shadow: 0px -1px 3px 0px #0000004D;
      transition: bottom 0.3s ease;
   }
   /* Когда .mobile-footer-nav выехал (scrollY > 100) — панель встаёт над
      ним (60px, как .buy-bar на assembly.php). */
   body:has(.mobile-footer-nav.is-visible) .cart-summary__bar { bottom: 60px; }
   /* Место под фиксированную панель, чтобы она не закрывала конец списка. */
   .cart-summary__total { grid-area: total; margin: 0; font-size: 14px; }
   .cart-summary__total strong { font-size: 18px; }
   .cart-summary__oneclick { grid-area: oneclick; }
   .cart-summary__buy { grid-area: buy; }
   .cart-summary__buy,
   .cart-summary__oneclick { height: 40px; font-size: 14px; padding: 0 8px; }
   .cart__inner{padding-bottom: 50px;}
}
@media (max-width: 1100px) {
   .cart-table__head,
   .cart-row { grid-template-columns: 70px minmax(0, 1fr) 130px 140px 30px; column-gap: 12px; }
   .cart-row__img { width: 70px; height: 70px; }
}
@media (max-width: 992px) {
   .cart-empty__btn { display: flex; width: 100%; height: 40px; font-size: 14px; color: #ccc; }
   .cart-empty__line { margin: 20px 0 20px; }
   .cart-related__pagination {
      display: flex;
      position: static;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 15px;
   }
   .cart-related__pagination .swiper-pagination-bullet {
      width: 10px; height: 10px; margin: 0 !important;
      border-radius: 999px; background: #777; opacity: 1;
      transition: width 0.3s ease;
   }
   .cart-related__pagination .swiper-pagination-bullet-active { width: 20px; background: #fff; }
}
/* Мобильный макет cart-mobile.png: строка — две линии (фото/название/цена,
   под ними количество и удаление), шапка таблицы и "Продовжити/Очистити"
   скрыты. */
@media (max-width: 768px) {
   .cart-table__head,
   .cart__actions,
   .cart-related .slider-controls { display: none; }

   .cart-row {
      grid-template-columns: 60px minmax(0, 1fr) auto;
      grid-template-areas: "img info price" "qty qty remove";
      align-items: start;
      row-gap: 10px;
      padding: 15px 0;
   }
   .cart-row__img { grid-area: img; width: 60px; height: 60px; }
   .cart-row__info { grid-area: info; }
   .cart-row__price { grid-area: price; }
   .cart-qty { grid-area: qty; justify-content: flex-start; gap: 22px; padding-left: 5px; }
   .cart-row__remove { grid-area: remove; justify-self: end; align-self: center; }
   .cart-row__more { display: none; }
   .cart-row__title { font-size: 14px; margin: 3px 0 0; }
   .cart-row__category { font-size: 14px; color: #aaa; }
   .cart-row__price strong { font-size: 16px; }
   .cart-row__unit { font-size: 14px; }
   .cart-row__currency{
      font-weight: 400;
   }
   
}

/* Вкладка "Отзывы": мобильная адаптация (review-mobile.png) */
@media (max-width: 992px) {
   .acfg__rev-layout { grid-template-columns: 1fr; grid-template-areas: "aside" "list"; }
   .acfg__rev-aside { position: static; }
}

@media (max-width: 768px) {
   .acfg__rev-title { margin: 20px 0 15px; font-size: 28px; }
   .acfg__rev-card {
      grid-template-columns: 40px 1fr;
      grid-template-areas: "av head" "st st" "photo photo" "tx tx";
      grid-template-rows: none;
      min-height: 0;
   }
   .acfg__rev-stars { margin: 10px 0; }
   .acfg__rev-photo { align-self: stretch; width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 0 12px; border-radius: 4px; }
   .acfg__rev-photo i { align-items: flex-end; justify-content: flex-end; padding: 8px 12px; background: none; font-size: 32px; color: rgba(255, 255, 255, 0.7); }
}


/* ==========================================================================
   Оформление заказа (checkout.php)
   ========================================================================== */
@media (max-width: 1280px) {
   .checkout { padding-left: 15px; padding-right: 15px; }
   .checkout__inner { gap: 20px; }
}
/* Мобильный макет моб-заказ.png: карточки без фона и отступов, секции
   плоские, список товаров скрыт, итог — в потоке в конце формы. */
@media (max-width: 992px) {
   .checkout__inner { flex-direction: column; align-items: stretch; gap: 0; }
   .checkout__main { flex: none; max-width: none; gap: 25px; }
   .checkout__aside { position: static; gap: 0; margin-top: 20px; flex: 1;}
   .co-cart { display: none; }

   .co-card { padding: 0; background: none; border-radius: 0; }
   .co-card__title { margin-bottom: 15px; padding-left: 12px; font-size: 20px; line-height: 24px; }
   .co-card__title::before { height: 24px; }

   .co-field { margin-bottom: 15px; }
   .co-input { height: 40px; border-radius: 10px; }
   .co-select__btn { height: 40px; border-radius: 10px; }
   .co-textarea { height: 140px; }

   .co-tabs { gap: 10px; margin-bottom: 15px; }
   .co-tab { height: 32px; padding: 0 15px; font-size: 14px; }
   .co-pay-panel { gap: 15px; }
   .co-pay,
   .co-credit__head { gap: 12px; padding: 10px 12px; }
   .co-pay { min-height: 56px; }
   .co-pay__title { font-size: 16px; line-height: 20px; }
   .co-pay__text { font-size: 14px; }
   .co-credit__panel { padding: 0 12px 15px; }
   /* Рассрочка (рассрочки.png): подпись и счётчик платежей в одну строку,
      без слова "Выберите"; открытый список — как в Frame 1418 */
   .co-credit__pick { flex-wrap: nowrap; gap: 10px; margin-bottom: 15px; }
   .co-credit__pick-label { display: block; font-size: 16px; }
   .co-credit__pick-label::first-letter { text-transform: uppercase; }
   .co-credit__pick-prefix { display: none; }
   .co-select--mini { width: 100px; }
   .co-select--mini .co-select__btn { height: 32px; border-radius: 10px; }
   .co-select--mini .co-select__list { width: 160px; max-height: 240px; }
   .co-credit__rows { gap: 10px; }
   .co-credit__row { font-size: 14px; }
   .co-credit__total { margin: 15px 0; font-size: 16px; }
   .co-credit__choose { height: 30px; padding: 0 30px; border-radius: 10px; }

   /* Выпадающий список города/отделения (Frame 858): при открытии поле ввода
      без шеврона, пункты по 34px, первый подсвечен */
   .co-select__search-input { right: 0; height: 38px; padding: 0 20px; border-radius: 10px; color: #fff; }
   .co-select__search-input::placeholder { color: #fff; }
   .co-select.is-open .co-select__search-input ~ .co-select__list { top: calc(100% + 6px); }
   .co-select.is-open:not(.co-select--mini) .co-select__chevron { visibility: hidden; }
   .co-select__list { padding: 8px; max-height: 260px; border-radius: 12px; }
   .co-select__item { padding: 7px 10px; line-height: 20px; }
   .co-select__list .co-select__item:not([hidden]):first-of-type { background-color: #353535; }

   .co-comment-link { margin-top: 5px; }

   .co-summary {border-bottom: none; border-right:none; border-left: none;box-shadow: none; padding: 15px 0 0; background: none; border-top: 1px solid #2d2d2d; border-radius: 0; }
   .co-summary__row { margin-bottom: 12px; font-size: 14px; }
   .co-summary__row strong { font-size: 24px; }
   .co-summary__row.co-summary__row--sub strong{font-size: 16px;}
   .co-summary__buy { height: 40px; font-size: 16px; }
   .co-summary__note { font-size: 13px; }
}
@media (max-width: 480px) {
   .co-pay__icon { flex-basis: 36px; width: 36px; height: 36px; }
   .co-pay__title { font-size: 15px; }
}

/* Заголовок страницы оформления заказа — на мобильном по левому краю */
@media (max-width: 992px) {
   .main--checkout .catalog__title { text-align: left; }
}

/* ==========================================================================
   Спасибо за заказ (thank-you.php)
   ========================================================================== */
@media (max-width: 1600px) {
   .thanks__inner,
   .thanks__hero-inner { padding-left: 20px; padding-right: 20px; }
   .thanks__notice { margin-inline: 20px; }
   /* Картинка не сжимается под ширину, а уезжает за правый край — монитор
      отодвигается от текста слева */
   .thanks__hero-image { inset: 0 -200px 0 auto; width: 1920px; max-width: none; }
}
@media (max-width: 1280px) {
   .thanks__inner,
   .thanks__hero-inner { padding-left: 15px; padding-right: 15px; }
   .thanks__notice { margin-inline: 15px; }
   .thanks__hero-image { right: -300px; }
}
/* Ниже 1200 — мобильный вид (картинка в потоке, текст под ней по центру) */
@media (max-width: 1200px) {
   .thanks__title { margin: 0 0 15px; padding-top: 15px; font-size: 24px; }
   .thanks__notice { margin-inline: 0; }
   .thanks__notice-inner { padding: 10px 15px 12px; }
   .thanks__notice-title { font-size: 14px; }
   .thanks__notice-text { font-size: 14px; }
   .thanks__hero { margin-top: 0px; border-bottom:1px solid #FFFFFF1A ;}
   .thanks__hero-image { position: static; display: block; width: 100%; max-width: 100%; height: auto; }
   .thanks__hero-inner { min-height: 0; padding: 0 15px 25px; }
   .thanks__content { max-width: none; padding-top:20px; font-size: 14px; text-align: center; }
   .thanks__content h2 { margin-top: 0px; font-size: 24px; }
   .thanks__list li { padding-left: 0; }
   .thanks__list li::before { display: none; }
   .thanks__cta { padding: 20px 15px 0; }
   .thanks__content p{font-size: 14px;}
}