/**
 * @file
 * Мобільний шар.
 *
 * Це не стиснута десктопна версія, а окрема будова. Правило одне: на
 * телефоні орієнтуються великим пальцем, тож головні переходи живуть внизу
 * екрана, а вгорі лишається тільки те, без чого не обійтися.
 */

/* Обидва шари в розмітці одночасно, перемикає медіазапит: перемикання
   скриптом дало б помітний стрибок при завантаженні. */
.sr-m {
  display: none;
}

@media (max-width: 900px) {
  .sr-m {
    display: block;
  }

  /* Десктопна шапка на телефоні не показується взагалі — саме тому це
     окремий дизайн, а не адаптація. */
  .sr-header {
    display: none;
  }

  /*
   * Смуга про доставку — над шапкою й теж закріплена.
   *
   * Мобільна шапка `fixed` при `top: 0`, тож у потоці «над» неї стати
   * неможливо: смуга просто пірнала б під неї. Тому закріплюємо обидві —
   * смуга нагорі, шапка на її висоту нижче.
   *
   * Ціна рішення чесна: 30px екрана лишаються зайнятими завжди. На
   * десктопі так не робимо — там шапка липка сама, і смуга йде за край
   * разом із верхнім рядом.
   */
  .sr-announce {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    /* На один вище за шапку: вони сусіди, і порядок між ними має бути
       заданий явно, а не залежати від порядку в розмітці. */
    z-index: 61;
  }

  /* Місце під липкі смуги згори й знизу. */
  body {
    padding-top: calc(56px + var(--sr-announce-m-h));
    padding-bottom: 64px;
  }
}

/* --- верхня смуга --- */

.sr-m__bar {
  position: fixed;
  /* Не 0: над шапкою стоїть закріплена смуга про доставку, і зсув задається
     тут, а не переозначенням у медіазапиті — те стояло вище за файлом і
     програвало цьому правилу за порядком. */
  inset-block-start: var(--sr-announce-m-h);
  inset-inline: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sr-space-1);
  height: 56px;
  /* Той самий `--sr-gutter`, що й у вмісту та підвалу. Тут стояло 8px, і
     через це шапка сиділа на 4px лівіше за каталог — правило про спільний
     відступ смуг порушувалось саме тут. */
  padding: 0 var(--sr-gutter);
  background: var(--sr-black);
  color: var(--sr-surface);
}

/*
 * Логотип більше не розтягується. Раніше він забирав усе вільне місце —
 * 220px під знак завширшки 76, — і саме там тепер стоїть поле пошуку.
 */
.sr-m__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  padding-inline-start: var(--sr-space-2);
}

.sr-m__logo img {
  height: 30px;
  width: auto;
}

/* 44px — найменша ціль, у яку палець влучає без промаху. */
.sr-m__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sr-m__icon:active {
  background: rgba(255, 255, 255, 0.12);
}

/*
 * --- поле пошуку в смузі ---
 *
 * Була сама лупа, і вона нічого не обіцяла: щоб дізнатись, що пошук тут
 * розумний, її треба було спершу натиснути. Тепер видно і підпис, і сяйво —
 * до дотику, а не після нього.
 *
 * Це кнопка, а не поле: вводять усе одно на весь екран (у смузі поле або
 * зʼїдає ряд, або виходить завузьким, щоб побачити набране).
 */
.sr-m__search-open {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 2px;
  border: 0;
  border-radius: var(--sr-radius-field);
  background: transparent;
  isolation: isolate;
  cursor: pointer;
}

/* Постійний обвід під дугою — з тієї ж причини, що й у десктопній шапці:
   сама по собі дуга читається як дефект, а не як коло. */
.sr-m__search-open .sr-search__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sr-red) 45%, transparent),
    color-mix(in srgb, var(--sr-blue) 45%, transparent)
  );
  pointer-events: none;
}

.sr-m__search-open .sr-search__aura::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 42%,
    var(--sr-red) 54%,
    var(--sr-blue) 66%,
    transparent 78% 100%
  );
  animation: sr-ai-spin 7s linear infinite;
}

/*
 * Підкладка мусить бути **непрозорою**. З напівпрозорою (rgba .12) сяйво
 * просвічувало крізь усю пігулку, і замість тонкого обводу виходила
 * градієнтна пляма на пів смуги. Колір рахуємо з токенів: освітлений
 * чорний, який на чорній смузі читається як поле вводу.
 */
.sr-m__search-open-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sr-space-1);
  width: 100%;
  height: 100%;
  padding: 0 var(--sr-space-3);
  border-radius: var(--sr-radius-field);
  background: color-mix(in srgb, var(--sr-surface) 14%, var(--sr-black));
}

.sr-m__search-open .sr-search__spark {
  display: flex;
  flex: 0 0 auto;
  color: var(--sr-surface);
  animation: sr-ai-twinkle 3.2s ease-in-out infinite;
}

.sr-m__search-open-label {
  overflow: hidden;
  color: var(--sr-surface);
  font-size: var(--sr-text-sm);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sr-m__search-open:active .sr-m__search-open-inner {
  background: color-mix(in srgb, var(--sr-surface) 24%, var(--sr-black));
}

@keyframes sr-ai-spin {
  to {
    rotate: 1turn;
  }
}

@keyframes sr-ai-twinkle {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: 0.55;
    scale: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-m__search-open .sr-search__aura::before,
  .sr-m__search-open .sr-search__spark {
    animation: none;
  }
}

/* --- повноекранний пошук --- */

.sr-m__search {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--sr-surface);
}

.sr-m__search[hidden] {
  display: none;
}

.sr-m__search-form {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  height: 56px;
  padding: 0 var(--sr-gutter);
  border-bottom: 1px solid var(--sr-line);
}

.sr-m__search .sr-m__icon {
  color: var(--sr-ink);
}

.sr-m .sr-m__search-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 var(--sr-space-4);
  border: 0;
  border-radius: var(--sr-radius-field);
  background: var(--sr-field);
  color: var(--sr-ink);
  font-family: var(--sr-font);
  /* 16px обовʼязково: на менший розмір iOS сам наближає сторінку. */
  font-size: 16px;
}

/*
 * Позначку фокуса малюємо самі. Браузерна — синя, і посеред нашої
 * типографіки вона виглядає чужим написом, як ті ядрові посилання на
 * сторінці контактів.
 */
.sr-m .sr-m__search-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-red);
}

.sr-m__search-go {
  height: 40px;
  padding: 0 var(--sr-space-4);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-red);
  color: var(--sr-surface);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* --- шухляда --- */

/*
 * Шухляда має чотири рівні, і всі їхні відступи рахуються від одного місця —
 * лівої межі підпису гілки. Вона складається з бічного відступу смуги,
 * слота під силует пристрою й проміжку між ними; тримати це число окремо
 * в кожному правилі означало б, що при зміні знака рівні розійдуться.
 *
 * Дитина ніколи не починається лівіше за свого батька. До цього моделі мали
 * власні 32px і стояли на 26px лівіше за гілку, під якою лежали, — список
 * читався як зсунутий убік, хоч кожне правило окремо виглядало розумним.
 */
.sr-m__drawer {
  --sr-m-ico: 22px;
  --sr-m-indent: calc(var(--sr-space-6) + var(--sr-m-ico) + var(--sr-space-3));

  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  background: var(--sr-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sr-m__drawer[hidden] {
  display: none;
}

.sr-m__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--sr-space-2) 0 var(--sr-space-6);
  background: var(--sr-black);
  color: var(--sr-surface);
  font-size: var(--sr-text-base);
  font-weight: 700;
}

.sr-m__scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.45);
}

.sr-m__scrim[hidden] {
  display: none;
}

.sr-m__sections {
  flex: 1 1 auto;
  padding: var(--sr-space-2) 0;
}

.sr-m__section-btn,
.sr-m__branches a,
.sr-m__service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--sr-space-3) var(--sr-space-6);
  border: 0;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.sr-m__section-btn[aria-expanded="true"] {
  color: var(--sr-red);
}

/*
 * Розділи розкладаємо від лівого краю, а стрілку відсуваємо самі.
 *
 * Спільне правило вище дає `space-between`, і воно розраховане рівно на два
 * елементи — підпис і стрілку. У LB TOOL їх три: попереду ще знак
 * постачальника, — і назва відлітала на середину рядка, тоді як усі сусідні
 * розділи стоять ліворуч.
 */
.sr-m__section-btn {
  justify-content: flex-start;
}

.sr-m__section-btn .sr-m__chevron {
  margin-inline-start: auto;
}

/*
 * Знак належить назві, тож стоїть при ній, а не за проміжок від неї —
 * так само, як у десктопному меню.
 *
 * Знак має лише LB TOOL, але місце під нього тримають усі чотири розділи:
 * порожній `<span>` того самого розміру. Без нього підпис LB TOOL стояв на
 * 50px, а сусідні — на 24px.
 */
.sr-m__brand {
  flex: none;
  width: 20px;
  height: 20px;
  margin-inline-end: -4px;
  object-fit: contain;
}

.sr-m__chevron {
  flex: none;
  transition: transform 0.15s;
}

.sr-m__section-btn[aria-expanded="true"] .sr-m__chevron {
  transform: rotate(180deg);
}

.sr-m__branches {
  padding-bottom: var(--sr-space-2);
  background: var(--sr-ground);
}

.sr-m__branches[hidden] {
  display: none;
}

.sr-m__branches a {
  min-height: 44px;
  padding-inline-start: var(--sr-m-indent);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.sr-m__count {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-variant-numeric: tabular-nums;
}

.sr-m__all {
  color: var(--sr-red) !important;
  font-weight: 600 !important;
}

.sr-m__service {
  margin-top: var(--sr-space-2);
  border-top: 1px solid var(--sr-line);
  color: var(--sr-red);
}

.sr-m__drawer-foot {
  padding: var(--sr-space-4) var(--sr-space-6) var(--sr-space-8);
  border-top: 1px solid var(--sr-line);
}

.sr-m__phone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sr-space-2) 0;
  color: var(--sr-ink);
  text-decoration: none;
}

.sr-m__phone span {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-m__phone strong {
  font-size: var(--sr-text-base);
  font-weight: 700;
}

.sr-m__langs {
  display: flex;
  gap: var(--sr-space-2);
  margin-top: var(--sr-space-4);
}

.sr-m__lang {
  padding: var(--sr-space-2) var(--sr-space-4);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-pill);
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.sr-m__lang.is-active {
  border-color: var(--sr-black);
  background: var(--sr-black);
  color: var(--sr-surface);
}

/* --- нижня панель --- */

.sr-m__tabs {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 64px;
  border-top: 1px solid var(--sr-line);
  background: var(--sr-surface);
  /* Запас під смугу жестів на безрамкових телефонах. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.sr-m__tabs > a,
.sr-m__tabs > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sr-grey-1);
  font-family: var(--sr-font);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Відгук на дотик: під іконкою мʼяко проявляється підкладка, сама іконка
   трохи піднімається. Миттєвий перескок кольору, що був тут раніше,
   виглядав дешево — око читає його як збій, а не як реакцію.

   Рухається **одне**: підкладка з іконкою. Підпис лишається спокійним,
   інакше на кожне натискання смикається пів вкладки. */
.sr-m__tabs > a::before,
.sr-m__tabs > button::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  width: 46px;
  height: 30px;
  border-radius: 15px;
  background: var(--sr-ground);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* Сервіс сюди не входить узагалі: у нього анімується власне коло, і друга
   підкладка під ним подвоювала б рух. */
/* Через батька: правило `.sr-m__tabs > a::before` має вищу специфічність,
   і без цього підкладка лишалась би й під сервісом. */
.sr-m__tabs > .sr-m__tab-service::before {
  content: none;
}

.sr-m__tabs > a:not(.sr-m__tab-service):active::before,
.sr-m__tabs > button:active::before {
  opacity: 1;
  transform: scale(1);
}

/* Іконка й підпис поверх підкладки.
   Виключення обовʼязкові: бейдж кошика й підняте коло сервісу позиціюються
   абсолютно, і `position: relative` повертав би їх у потік — саме через це
   іконка кошика зʼїжджала вгору, а вкладка сервісу виростала до 77px і
   виштовхувала свій підпис за край смуги. */
.sr-m__tabs > a > svg,
.sr-m__tabs > button > svg,
.sr-m__tabs > a > span:not(.sr-m__badge):not(.sr-m__tab-fab),
.sr-m__tabs > button > span:not(.sr-m__badge):not(.sr-m__tab-fab) {
  position: relative;
  z-index: 1;
}

.sr-m__tabs > a > svg,
.sr-m__tabs > button > svg {
  transition: transform 0.18s ease-out, color 0.18s ease-out;
}

.sr-m__tabs > a:not(.sr-m__tab-service):active > svg,
.sr-m__tabs > button:active > svg {
  transform: translateY(-2px);
  color: var(--sr-red);
}

@media (prefers-reduced-motion: reduce) {
  .sr-m__tabs > a::before,
  .sr-m__tabs > button::before,
  .sr-m__tabs > a > svg,
  .sr-m__tabs > button > svg {
    transition: none;
  }

  .sr-m__tabs > a:not(.sr-m__tab-service):active > svg,
  .sr-m__tabs > button:active > svg {
    transform: none;
  }
}

.sr-m__badge {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sr-red);
  color: var(--sr-surface);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.sr-m__badge[hidden] {
  display: none;
}

@media (min-width: 901px) {
  .sr-m__bar,
  .sr-m__tabs,
  .sr-m__drawer,
  .sr-m__scrim,
  .sr-m__search {
    display: none;
  }
}

/* ================================================================== */
/* Фільтр каталогу як нижня панель                                    */
/* ================================================================== */

/* Кнопка виклику — тільки на телефоні. */
.sr-m-filter {
  display: none;
}

@media (max-width: 900px) {
  .sr-m-filter {
    position: sticky;
    inset-block-start: 56px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
    margin-bottom: var(--sr-space-4);
    padding: var(--sr-space-2) 0;
    background: var(--sr-surface);
  }

  .sr-m-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    height: var(--sr-control-h);
    padding: 0 var(--sr-space-6);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-pill);
    background: var(--sr-surface);
    color: var(--sr-ink);
    font-family: var(--sr-font);
    font-size: var(--sr-text-sm);
    font-weight: 600;
    cursor: pointer;
  }

  .sr-m-filter__count {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--sr-red);
    color: var(--sr-surface);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }

  /*
   * Сама форма їде в нижню панель: на телефоні до неї доводиться тягтися
   * пальцем, а знизу вона під рукою. Схована — доки не покличуть.
   *
   * Правила чіпляються до власного класу форми, а не до `.view-catalog`,
   * бо на час показу скрипт **переносить форму в мобільний шар**. Прив'язка
   * до місця означала б, що після переносу панель лишається без вигляду
   * взагалі — я так і зробив спершу, і поля розсипались по сторінці.
   *
   * `body` на початку — щоб перебити тему: вона ставить формі `display:
   * flex` селектором `.view-catalog .views-exposed-form` і вантажиться
   * після модульного CSS.
   */

  /* Ховаємо форму каталогу на телефоні вже в першій фарбі, а не чекаємо
     JS: поки скрипт додає клас і переносить форму у fixed, її висота в
     потоці зникає раптово й сітка товарів їде вгору (~0.27 CLS).
     Специфічність вища за темину, тож правило бʼє тему попри порядок
     завантаження. Без JS фільтр на телефоні лишається схованим —
     прийнятна ціна за стабільний макет. */
  body .view-catalog .views-exposed-form {
    display: none;
  }

  body .views-exposed-form.sr-m-sheet {
    position: fixed;
    /*
     * Панель стоїть **над** нижньою навігацією, а не від краю екрана.
     *
     * Вкладки `fixed`, заввишки 64px, живуть у `.sr-m` — тобто в іншому
     * контексті накладання, і їхній `z-index: 60` перекриває панель із 80.
     * Спершу я додав панелі нижній падінг, але липкий рядок із «Показати»
     * прилипає до краю падінга, тобто знову під вкладки; коли ж я підняв
     * сам рядок, він накрив «Бренд». Піднімати треба всю панель — тоді
     * всередині нічого не треба зсувати.
     */
    inset-block-end: calc(64px + env(safe-area-inset-bottom, 0));
    inset-inline: 0;
    z-index: 80;
    display: none;
    max-height: 74vh;
    overflow-y: auto;
    padding: var(--sr-space-6) var(--sr-gutter) var(--sr-space-6);
    border-radius: var(--sr-radius-card) var(--sr-radius-card) 0 0;
    background: var(--sr-surface);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  }

  body .views-exposed-form.sr-m-sheet.is-open {
    display: block;
  }

  /*
   * Підкладка панелі — своя, а не спільна з шухлядою.
   *
   * Спільна живе в `.sr-m`, тобто в іншому контексті накладання, і
   * перекривала панель попри менший `z-index`. Ця лежить поруч із формою,
   * тож 70 і 80 нарешті означають те, що мають.
   */
  .sr-m-sheet__scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.45);
  }

  .sr-m-sheet__scrim[hidden] {
    display: none;
  }

  /* Контроли на всю ширину: у два стовпці вони давали поля завузькі для
     назв на кшталт «Дисплейний модуль». */
  body .views-exposed-form.sr-m-sheet .form-item {
    width: 100%;
    margin-bottom: var(--sr-space-3);
  }

  body .views-exposed-form.sr-m-sheet select,
  body .views-exposed-form.sr-m-sheet input[type="text"]:not(.sr-search__field) {
    width: 100%;
    /* 16px — інакше iOS наближає сторінку при фокусі. */
    font-size: 16px;
  }

  body .views-exposed-form.sr-m-sheet .form-actions {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    gap: var(--sr-space-2);
    padding-top: var(--sr-space-3);
    background: var(--sr-surface);
  }

  body .views-exposed-form.sr-m-sheet .form-actions input[type="submit"] {
    flex: 1 1 auto;
  }
}

/* Група всередині розділу шухляди: підзаголовок і перелік моделей. */
.sr-m__group {
  padding-bottom: var(--sr-space-2);
}

.sr-m__group-head {
  display: block;
  padding: var(--sr-space-3) var(--sr-space-6) var(--sr-space-1);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

a.sr-m__group-head:active {
  color: var(--sr-red);
}

/* ================================================================== */
/* Липка смуга купівлі на сторінці товару                             */
/* ================================================================== */

.sr-m-buy {
  position: fixed;
  /* Над нижньою панеллю, а не замість неї: перехід у кошик має лишатись
     доступним і в момент вибору кількості. */
  inset-block-end: calc(64px + env(safe-area-inset-bottom, 0));
  inset-inline: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-3);
  padding: var(--sr-space-3) var(--sr-gutter);
  border-top: 1px solid var(--sr-line);
  background: var(--sr-surface);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
}

.sr-m-has-buy {
  /* Запас, щоб опис не ховався за смугою. */
  padding-bottom: 140px;
}

/* Ціна стовпчиком: у рядок вона разом зі степером і кнопкою не вміщається
   на 375px, і найважливіше число обрізалось. */
.sr-m-buy .pp__price-row {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  min-width: 0;
}

.sr-m-buy .pp__price-old {
  font-size: var(--sr-text-xs);
  line-height: 1.2;
}

.sr-m-buy .pp__price {
  font-size: var(--sr-text-lg);
  line-height: 1.2;
  white-space: nowrap;
}

/* Мітку відсотка й підпис прибираємо: місця мало, а перекреслена ціна
   поруч каже те саме. */
.sr-m-buy .pp__price-note,
.sr-m-buy .pp__price-off {
  display: none;
}

/* Кнопці дозволяємо стискатись — інакше вона виштовхує ціну за край. */
.sr-m-buy .pp__buy input[type="submit"],
.sr-m-buy .pp__buy .button {
  min-width: 0;
  width: auto;
  padding-inline: var(--sr-space-4);
  font-size: var(--sr-text-sm);
}

.sr-m-buy .sr-qty {
  flex: none;
}

.sr-m-buy .pp__buy {
  display: flex;
  align-items: center;
  gap: var(--sr-space-2);
  margin: 0;
}

@media (min-width: 901px) {
  .sr-m-buy {
    display: none;
  }
}

/* ================================================================== */
/* Кошик на телефоні                                                  */
/* ================================================================== */

.sr-m-cart {
  position: fixed;
  inset-block-end: calc(64px + env(safe-area-inset-bottom, 0));
  inset-inline: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  padding: var(--sr-space-3) var(--sr-gutter);
  border-top: 1px solid var(--sr-line);
  background: var(--sr-surface);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
}

.sr-m-cart__sum {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.sr-m-cart__sum span {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-m-cart__sum strong {
  color: var(--sr-black);
  font-size: var(--sr-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sr-m-cart__go {
  flex: none;
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-8);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-black);
  color: var(--sr-surface);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
}

.sr-m-has-cart {
  padding-bottom: 140px;
}

/* ================================================================== */
/* Оформлення на телефоні                                             */
/* ================================================================== */

/* Липкої смуги з кнопкою тут більше немає: дія на кроці одна, і вона
   стоїть під згодою з офертою. Клас лишається — ним ховається нижня
   навігація, і запас під неї більше не потрібен. */
.sr-m-has-checkout {
  padding-bottom: var(--sr-space-6);
}

/* Нижня навігація на оформленні зайва: пʼять виходів відволікають від
   єдиної дії, яку ми тут чекаємо. Клас ставить mobile.js, тож без JS
   навігація лишається. */
.sr-m-has-checkout .sr-m__tabs {
  display: none;
}

@media (max-width: 900px) {
  /* Єдина дія кроку — на всю ширину: відколи липкої смуги немає, ця
     кнопка й є головною, а вузька пігулка збоку читається як другорядна. */
  .sr-m-has-checkout .checkout-pane + .form-actions .button,
  .sr-m-has-checkout #edit-actions .button {
    width: 100%;
    height: 48px;
  }
}

@media (max-width: 900px) {
  /* Ціна за одиницю на телефоні зайва: нижче в тому ж рядку стоїть сума,
     і два однакові числа лише збивають. Тема зветься .cart-form — саме її
     селектори тут і потрібні. */
  body .cart-form .views-table td.views-field-unit-price__number {
    display: none;
  }

  /* Рядок стискаємо: розріджені картки змушували гортати заради двох
     позицій. Кількість і прибирання ставимо в один ряд. */
  body .cart-form .views-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sr-space-2) var(--sr-space-3);
    padding: var(--sr-space-4);
  }

  body .cart-form .views-table td {
    padding: 0;
  }

  /* Фото більше й вирівняне з текстом по верхньому краю: дрібна
     мініатюра поруч із двома рядками назви виглядала загубленою, а
     вирівнювання по центру робило блок кривим. */
  body .cart-form .views-table td.views-field-purchased-entity {
    grid-column: 1 / -1;
  }

  body .cart-form .views-table td.views-field-purchased-entity .field--name-field-images {
    flex: none;
    width: 72px;
  }

  body .cart-form .views-table td.views-field-purchased-entity img {
    width: 72px;
    height: 72px;
    object-fit: contain;
  }

  body .cart-form .views-table td.views-field-purchased-entity > * {
    display: flex;
    align-items: flex-start;
    gap: var(--sr-space-4);
  }

  body .cart-form .views-table td.views-field-edit-quantity {
    grid-column: 1;
  }

  body .cart-form .views-table td.views-field-remove-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  body .cart-form .views-table td.views-field-total-price__number {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    font-size: var(--sr-text-lg);
    font-weight: 700;
  }
}

@media (min-width: 901px) {
  .sr-m-cart {
    display: none;
  }
}

/* ================================================================== */
/* Поля вводу на телефоні                                             */
/* ================================================================== */

@media (max-width: 900px) {
  /* 16px — не примха верстки, а вимога iOS: на менший розмір Safari сам
     наближає сторінку при фокусі, і людина щоразу відсуває її назад
     пальцями. Стосується всіх полів, а не лише наших. */
  body input[type="text"],
  body input[type="email"],
  body input[type="tel"],
  body input[type="password"],
  body input[type="search"],
  body input[type="number"],
  body select,
  body textarea {
    font-size: 16px;
  }

  /* Висота під палець: 40px десктопного контрола на дотик замала. */
  body .sr-checkout input[type="text"],
  body .sr-checkout input[type="email"],
  body .sr-checkout input[type="tel"],
  body .sr-checkout select,
  body .user-login-form input,
  body .user-register-form input,
  body .sr-verify input {
    height: 44px;
    min-height: 44px;
  }

  /* Радіо-картки доставки й оплати — в один стовпець: у два вони на
     телефоні звужуються так, що назва перевізника переноситься. */
  body .sr-checkout .form-boolean-group {
    grid-template-columns: 1fr;
  }
}

/* ================================================================== */
/* Вибір номера телефону                                              */
/* ================================================================== */

.sr-m__phones {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 80;
  padding-bottom: calc(var(--sr-space-4) + env(safe-area-inset-bottom, 0));
  border-radius: var(--sr-radius-card) var(--sr-radius-card) 0 0;
  background: var(--sr-surface);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}

.sr-m__phones[hidden] {
  display: none;
}

.sr-m__phones-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sr-space-3) var(--sr-space-2) var(--sr-space-3) var(--sr-space-6);
  border-bottom: 1px solid var(--sr-line);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sr-m__phones-head .sr-m__icon {
  color: var(--sr-ink);
}

/* Рядок на всю ширину й високий: у нього цілиться палець, а не курсор. */
.sr-m__phones-item {
  display: flex;
  align-items: center;
  gap: var(--sr-space-4);
  padding: var(--sr-space-4) var(--sr-space-6);
  color: var(--sr-ink);
  text-decoration: none;
}

.sr-m__phones-item + .sr-m__phones-item {
  border-top: 1px solid var(--sr-line);
}

.sr-m__phones-item:active {
  background: var(--sr-ground);
}

.sr-m__phones-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sr-red);
  color: var(--sr-surface);
}

.sr-m__phones-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-m__phones-text strong {
  color: var(--sr-black);
  font-size: var(--sr-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sr-m__phones-text span {
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
}

@media (min-width: 901px) {
  .sr-m__phones {
    display: none;
  }
}

/* ================================================================== */
/* Сервіс у нижній панелі — піднятий                                  */
/* ================================================================== */

/* Селектор через батька: правило `.sr-m__tabs > a` має вищу специфічність,
   і без цього підпис лишався по центру, а коло накривало його. */
.sr-m__tabs > .sr-m__tab-service {
  /* Підпис має стояти на одній лінії з рештою вкладок: у них він на 45px
     від верху смуги, тож знизу лишаємо рівно стільки, щоб він туди сів. */
  justify-content: flex-end;
  padding-bottom: 11px;
}

.sr-m__tab-fab {
  position: absolute;
  /* Коло має вийти над смугою повністю, інакше воно з'їдає рядок підпису. */
  inset-block-start: -28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--sr-surface);
  border-radius: 50%;
  background: var(--sr-red);
  color: var(--sr-surface);
  box-shadow: 0 3px 10px rgba(227, 6, 19, 0.35);
}

/* Відгук на дотик: коло трохи втискається й тінь підбирається — так
   виглядає натиснута фізична кнопка. Перехід короткий, щоб рух устигав
   завершитись, поки палець на екрані. */
.sr-m__tab-fab {
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.sr-m__tab-service:active .sr-m__tab-fab {
  transform: scale(0.9);
  box-shadow: 0 1px 4px rgba(227, 6, 19, 0.4);
}

/* Кому рух заважає — лишається сама зміна тіні. */
@media (prefers-reduced-motion: reduce) {
  .sr-m__tab-fab {
    transition: none;
  }

  .sr-m__tab-service:active .sr-m__tab-fab {
    transform: none;
  }
}

.sr-m__tab-service span:last-child {
  color: var(--sr-red);
  font-weight: 700;
}



/* Панель не обрізає коло, що виступає над нею. */
.sr-m__tabs {
  overflow: visible;
}

/* Рівні шухляди. Кожен розкривається окремо — розділ, гілка, група, —
   бо одразу все це 186 посилань, і гортати їх довше, ніж двічі торкнутись. */
.sr-m__branch-btn,
.sr-m__group-btn,
.sr-m__model {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  width: 100%;
  min-height: 46px;
  padding: var(--sr-space-3) var(--sr-space-6);
  border: 0;
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.sr-m__branch-btn {
  font-size: var(--sr-text-base);
  font-weight: 700;
}

/* Офіційні запчастини позначаємо кольором, а не окремим блоком: це та сама
   гілка списку, просто головна. */
.sr-m__branch-btn.is-featured {
  color: var(--sr-red);
}

.sr-m__branch + .sr-m__branch {
  border-top: 1px solid var(--sr-line);
}

/*
 * Вільне місце рядка забирає підпис — і саме підпис, а не перший елемент.
 *
 * Правило звалось `> span:first-child`, і в гілках із силуетом першим
 * елементом був сам силует: він розтягувався на весь залишок рядка й
 * відпихав назву. Через це підписи гілок стояли на 56, 170, 192, 210 і
 * 225 пікселях — тобто в кожного рядка своя ліва межа, залежна від
 * довжини назви. Клас прив'язує правило до того, кому воно призначалось.
 */
.sr-m__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Стрілка завжди скраю, а лічильник перед нею. */
.sr-m__branch-btn .sr-m__chevron,
.sr-m__group-btn .sr-m__chevron {
  flex: none;
  transition: transform 0.15s;
}

.sr-m__branch-btn[aria-expanded="true"] .sr-m__chevron,
.sr-m__group-btn[aria-expanded="true"] .sr-m__chevron {
  transform: rotate(180deg);
}

.sr-m__branch-body[hidden],
.sr-m__group-body[hidden] {
  display: none;
}

.sr-m__branch-body {
  background: var(--sr-ground);
}

.sr-m__group-btn {
  padding-inline-start: var(--sr-m-indent);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  color: var(--sr-grey-1);
}

.sr-m__group-btn[aria-expanded="true"] {
  color: var(--sr-red);
}

.sr-m__group-body {
  background: var(--sr-surface);
}

.sr-m__model {
  padding-inline-start: var(--sr-m-indent);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.sr-m__group-body .sr-m__model {
  padding-inline-start: calc(var(--sr-m-indent) + var(--sr-space-4));
}

/*
 * Силует пристрою в шухляді — того самого розміру, що й у десктопній рейці.
 *
 * Слот малюється завжди, навіть порожній: силуети має лише панель
 * запчастин, а розхідні, обладнання й LB TOOL їх не мають. Якщо прибирати
 * слот разом зі знаком, підписи сусідніх розділів починаються на 34px
 * лівіше, і список виглядає рваним. Це те саме правило, що й у мініатюр
 * галереї: межа лишається прозорою, а не знімається.
 */
.sr-m__branch-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--sr-grey-2);
}

.sr-m__branch-btn.is-featured .sr-m__branch-ico,
.sr-m__branch-btn[aria-expanded="true"] .sr-m__branch-ico {
  color: inherit;
}

/* Друге визначення знака прибрано: воно давало інший відступ (-6 проти -4),
   і чинним лишалось те, що нижче за файлом, а не те, що поруч із розділами. */