/**
 * @file
 * Компоненти SkloRepair: кнопки, поля, шапка, картка, сітка, прайс.
 *
 * Усі значення — з tokens.css. Правила — у CLAUDE.md.
 */

/* ================================================================== */
/* Основа                                                             */
/* ================================================================== */

body {
  font-family: var(--sr-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sr-ink);
  background: var(--sr-surface);
}

/* Olivero малює заголовки власною гарнітурою (Метрополіс) — без цього
   правила пігулки мега-меню та частина заголовків ідуть чужим шрифтом,
   а браузер заразом тягне його файли. У нашій мові дизайну гарнітура
   одна. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sr-font);
}

/* ================================================================== */
/* Кнопки                                                             */
/* ================================================================== */

/* Головна дія — чорна пігулка. Форма з референсу: у каталозі запчастин
   вона повторюється сотні разів, тому має бути миттєво впізнаваною. */
.sr-btn,
.catalog__buy input[type="submit"],
.commerce-order-item-add-to-cart-form input[type="submit"],
.views-exposed-form .form-submit,
.commerce-cart-form .form-submit,
.button--primary,
.home-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-6);
  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-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sr-btn:hover,
.catalog__buy input[type="submit"]:hover,
.commerce-order-item-add-to-cart-form input[type="submit"]:hover,
.views-exposed-form .form-submit:hover,
.commerce-cart-form .form-submit:hover,
.button--primary:hover,
.home-btn--primary:hover {
  /* У референсі чорна кнопка при наведенні стає червоною —
     перевірено наведенням на живу кнопку, не з CSS-файлів. */
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Другорядна дія — червона, прямокутна. */
.sr-btn--accent {
  background: var(--sr-red);
  border-radius: var(--sr-radius-sm);
}

.sr-btn--accent:hover {
  background: var(--sr-red-dark);
}

/*
 * Скидання фільтрів — дія другорядна, тому контурна, а не чорна.
 * Ціляти по `:last-of-type` не можна: коли фільтри порожні, Views не
 * малює кнопки скидання, і контурним ставав єдиний «Показати».
 */
.views-exposed-form [data-drupal-selector$="reset"],
.views-exposed-form input[type="submit"][value="Скинути"] {
  background: transparent;
  border: 1px solid var(--sr-line);
  color: var(--sr-ink);
}

.views-exposed-form [data-drupal-selector$="reset"]:hover,
.views-exposed-form input[type="submit"][value="Скинути"]:hover {
  background: transparent;
  border-color: var(--sr-ink);
  color: var(--sr-ink);
}

/* Третя — контурна. */
.sr-btn--ghost,
.home-btn--ghost {
  background: transparent;
  border: 1px solid var(--sr-line);
  color: var(--sr-ink);
}

.sr-btn--ghost:hover,
.home-btn--ghost:hover {
  border-color: var(--sr-ink);
  background: transparent;
  color: var(--sr-ink);
}

/* ================================================================== */
/* Поля                                                               */
/* ================================================================== */

.sr-field,
/* Поле АІ-пошуку сюди не входить: у нього власний вигляд компонента, і
   нарощувати проти цього правила специфічність довелося б до чотирьох
   класів. Виняток чесніший. */
.view-catalog .views-exposed-form input[type="text"]:not(.sr-search__field),
.view-catalog .views-exposed-form select,
.device-menu__search input {
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  color: var(--sr-ink);
}

/* Olivero додає полям власні відступи — конституція каже, що будь-який
   контрол має рівно --sr-control-h, тому перебиваємо їх явно. */
/* Olivero задає полям min-block-size, тому самої height не досить. */
.view-catalog .views-exposed-form input.form-element,
.view-catalog .views-exposed-form select.form-element,
.catalog__buy input.form-element,
.device-menu__search input {
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  min-block-size: var(--sr-control-h);
  block-size: var(--sr-control-h);
  padding-block: 0;
  box-sizing: border-box;
}

/* Пошук — пігулка на сірому, як у референсі. */
.view-catalog .views-exposed-form .form-item-search input,
.device-menu__search input {
  border-radius: var(--sr-radius-field);
  background: var(--sr-field);
  border-color: var(--sr-field);
}

.sr-field:focus,
.view-catalog .views-exposed-form input:focus,
.view-catalog .views-exposed-form select:focus {
  outline: 2px solid var(--sr-black);
  outline-offset: 1px;
}

/* ================================================================== */
/* Шапка                                                              */
/* ================================================================== */

/*
 * Власна шапка (.sr-header) живе всередині регіону Olivero, тому тут лише
 * знімаємо чуже оформлення: темне тло, білі посилання й обмеження ширини.
 * Саме оформлення шапки — у модулі, css/header.css.
 */
.site-header,
.site-header__inner,
.site-header__initial,
.site-header__fixable,
.site-header__inner__container,
.site-header .block,
.site-header .region {
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}

/*
 * Olivero тримає ліворуч декоративну смугу 90px (.social-bar) і такий
 * самий відступ у шапці. Вони зсували весь сайт праворуч від центру
 * екрана й лишали світлу/темну смугу вздовж лівого краю.
 */
.social-bar,
.site-header__initial {
  display: none;
}

/* Разом зі смугою треба повернути ширину: Olivero віднімає її 90px
   від головного вмісту й підвалу, і без цього сайт лишався зсунутим. */
.layout-main > .main-content,
.site-footer .site-footer__inner,
.site-footer .region--footer-top,
.site-footer .region--footer-bottom {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/*
 * Olivero обмежує всю сторінку `.page-wrapper { max-width: 1570px }` без
 * автополів — на широкому моніторі сайт стоїть біля лівого краю, а темна
 * смуга підвалу обривається на 1570-му пікселі й виглядає як рамка.
 *
 * У референсі сторінка на всю ширину, а по центру тримаються тільки
 * внутрішні контейнери — так робимо і ми.
 */
.page-wrapper {
  max-width: none;
}

/*
 * Липка шапка. Замість JS зсуваємо весь блок угору на висоту першого
 * ряду: при прокрутці логотип із пошуком ідуть за край, а ряд розділів
 * лишається вгорі. Саме так поводиться меню референсу.
 */
/* Смуга шапки — від краю до краю, вміст усередині по центру. */
.site-header {
  background: var(--sr-surface);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

@media (min-width: 761px) {
  .site-header {
    position: sticky;
    /*
     * Угору йде все, крім ряду розділів: смуга про доставку, верхній ряд і
     * роздільна лінія під ним (+1px). Смугу треба враховувати обовʼязково —
     * без неї ряд розділів прилипав би на її висоту нижче й лишав над собою
     * порожню білу щілину.
     */
    top: calc(-1 * (var(--sr-announce-h) + var(--sr-header-row) + 1px));
    z-index: 60;
  }
}

/*
 * Olivero резервує під свою липку шапку фіксовану висоту (180px), хоча
 * наша займає 116 — залишок висів порожнім місцем над фільтром.
 */
.site-header,
.site-header__fixable {
  height: auto;
  min-height: 0;
  block-size: auto;
  min-block-size: 0;
}

/*
 * Olivero робить контейнер шапки флекс-рядом на кілька блоків. У нас шапка
 * одна й на всю ширину, тож флекс тут лише душить її до ширини вмісту.
 */
.site-header__inner__container {
  display: block;
}

.site-header .block {
  width: 100%;
}

/*
 * Одна ширина для шапки і вмісту. Olivero кладе вміст у 12-колонкову сітку
 * й дає головному блоку лише середні колонки — сторінка виходить вужчою за
 * шапку. У референсі шапка, навігація і сітка товарів стоять в одному
 * контейнері, тому вміст розтягуємо на всі колонки.
 */
/* Шапка більше не обмежує себе контейнером: її ряди — смуги на всю
   ширину, а центрування живе всередині них (див. header.css). */
.site-header__inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.main-content__container {
  max-width: var(--sr-container);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
}

main {
  max-width: none;
}

/* Olivero тримає 90px повітря під шапкою — під редакційну статтю, а не
   під вітрину. У референсі товар починається одразу під навігацією. */
.main-content__container {
  padding-block-start: var(--sr-space-6);
}

/*
 * Розділ вітрини керується пунктами меню, тож у формі фільтрів його
 * віджет лише дублював би навігацію. Сам фільтр лишається відкритим —
 * без цього Views не приймає section= з адреси.
 *
 * Бренд тут із тієї ж причини: у каталозі їх п'ять, і майже все — Apple,
 * тож контрол займав чверть ряду, нічого не розрізняючи. Фільтр лишається
 * робочим, бо на нього веде рядок «Бренд» зі сторінки товару.
 */
.views-exposed-form .form-item-section,
.views-exposed-form .form-item-category,
.views-exposed-form .form-item-brand {
  display: none;
}

/*
 * Другий рівень фільтра — відділ. Типово він схований правилом вище (на
 * нього ведуть пункти меню, і окремий контрол дублював би навігацію), а
 * показує його скрипт — класом, коли в першому рівні обрано розділ.
 *
 * Саме класом, а не відсутністю `[hidden]`. Правило `:not([hidden])`
 * означало «показувати всюди, де скрипт не сказав інакше» — і на сторінці
 * моделі, де перемикача немає взагалі, «Відділ» виринав сам собою поруч із
 * мертвим «Пристрій або розділ».
 */
.view-catalog .views-exposed-form .form-item-category.is-active {
  display: block;
}

.view-catalog .views-exposed-form .form-item-category[hidden],
.view-catalog .views-exposed-form .form-item-model[hidden] {
  display: none;
}

.region--content.grid-full > *,
.region--highlighted.grid-full > *,
.region--content-above.grid-full > *,
.region--content-below.grid-full > *,
.region--footer-top.grid-full > *,
.region--footer-bottom.grid-full > * {
  grid-column: 1 / -1;
}

/*
 * Темна смуга підвалу має йти від краю до краю, тому тло переїжджає на
 * зовнішній `.site-footer`, а обгортки Olivero всередині нічого не
 * звужують — ширину тримають власні контейнери підвалу.
 */
/*
 * Смуга ліворуч у підвалі — це не елемент, а бордюр 90px на самому
 * .site-footer (Olivero так малює декоративну колонку). Разом із
 * .social-bar він зсував підвал праворуч і виглядав чорною смугою.
 */
/*
 * Чорна смуга ліворуч у підвалі — це бордюр із core/themes/olivero:
 *
 *   @media (min-width: 75rem) {
 *     body:not(.is-always-mobile-nav) .site-footer {
 *       border-inline-start: solid var(--content-left) var(--color--black);
 *     }
 *   }
 *
 * Він тримає місце під декоративну колонку. Селектор має специфічність
 * (0,2,1), тому простий `.site-footer` його не перебивав — повторюємо
 * ту саму форму селектора, і наш файл виграє порядком підключення.
 */
body:not(.is-always-mobile-nav) .site-footer {
  border: 0;
  border-inline-start: 0;
}

.site-footer {
  background: var(--sr-black);
}

.site-footer__inner,
.region--footer_top__inner,
.region--footer_bottom__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
}

.site-branding__name {
  display: none;
}

/* ================================================================== */
/* Меню пристроїв                                                     */
/* ================================================================== */

.device-menu {
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-line);
}

.device-menu__trigger {
  height: 48px;
  padding: 0 var(--sr-space-4);
  font-size: var(--sr-text-base);
  font-weight: 600;
  color: var(--sr-ink);
  border-bottom: 2px solid transparent;
}

.device-menu__trigger:hover,
.device-menu__trigger[aria-expanded="true"] {
  color: var(--sr-red);
  border-bottom-color: var(--sr-red);
}

.device-menu__count {
  font-size: var(--sr-text-xs);
  color: var(--sr-grey-2);
}

.device-menu__panel {
  border-color: var(--sr-line);
  border-radius: 0 0 var(--sr-radius-sm) var(--sr-radius-sm);
  padding: var(--sr-space-4);
}

.device-menu__models a {
  font-size: var(--sr-text-base);
  color: var(--sr-grey-1);
  border-radius: var(--sr-radius-sm);
}

.device-menu__models a:hover {
  background: var(--sr-ground);
  color: var(--sr-red);
}

/* ================================================================== */
/* Каталог                                                            */
/* ================================================================== */

/*
 * Фільтр мінімалістичний: один ряд пігулок без підкладки й без міток —
 * підпис живе всередині контрола першим варіантом («Модель пристрою»
 * замість «— Будь-який —»), це робить sklorepair_remonline_form_alter().
 */
.view-catalog .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2);
  margin-bottom: var(--sr-space-6);
  padding: 0 0 var(--sr-space-4);
  border: 0;
  border-bottom: 1px solid var(--sr-line);
  background: none;
}

.view-catalog .views-exposed-form .form-item {
  margin: 0;
}

/* Пошук ширший за решту: ним користуються найчастіше. */
.view-catalog .views-exposed-form .form-item-search {
  flex: 1 1 220px;
  max-width: 360px;
}

/*
 * Ширина контрола — це ширина його назви, а не спільне число.
 *
 * Раніше всі селекти мали 172px, і поки їх було три, ряд уміщався. Із
 * шостим контролом («Склад») сума базових ширин перевалила за 1300, і
 * «Показати» зі «Скинути» падали на другий поверх — при тому що місця
 * насправді вистачало: у «Складу» найдовший напис 41px, а тримав він
 * 172. Лікується базовими ширинами, а не `min-width` (реальну ширину
 * все одно роздає `flex-grow`), — те саме, що вже спіймано на четвертому
 * контролі.
 *
 * Числа зняті вимірюванням накладки `.sr-filter__name` при 13px плюс
 * падінги контрола (16 ліворуч, 32 під стрілку), а не прикинуті на око:
 * кирилиця ширша за латиницю, і оцінка «на око» тут промахується.
 */
.view-catalog .views-exposed-form .form-item-sr-group,
.view-catalog .views-exposed-form .form-item-model,
.view-catalog .views-exposed-form .form-item-sr-model-nav,
.view-catalog .views-exposed-form .form-item-category,
.view-catalog .views-exposed-form .form-item-part-type,
.view-catalog .views-exposed-form .form-item-quality,
.view-catalog .views-exposed-form .form-item-warehouse {
  flex: 0 1 172px;
  min-width: 0;
}

/* «Пристрій або розділ» — 129px напису. */
.view-catalog .views-exposed-form .form-item-sr-group {
  flex: 0 1 178px;
}

/* «Модель пристрою» — 117px. */
.view-catalog .views-exposed-form .form-item-model,
.view-catalog .views-exposed-form .form-item-sr-model-nav {
  flex: 0 1 166px;
}

/* «Тип запчастини» — 102px. */
.view-catalog .views-exposed-form .form-item-part-type {
  flex: 0 1 150px;
}

/* «Клас якості» — 73px. */
.view-catalog .views-exposed-form .form-item-quality {
  flex: 0 1 122px;
}

/* «Склад» — 41px, найкоротший підпис ряду. */
.view-catalog .views-exposed-form .form-item-warehouse {
  flex: 0 1 90px;
}

/* Перемикач — той самий контрол, що й решта селектів фільтра. Правила
   для них написані на `select` усередині форми, тож окремих не треба;
   лишається тільки ширина. */
.sr-filter__group {
  width: 100%;
}

.view-catalog .views-exposed-form select,
.view-catalog .views-exposed-form input[type="text"] {
  width: 100%;
  border-radius: var(--sr-radius-pill);
  border-color: var(--sr-line);
  font-size: var(--sr-text-sm);
}

.view-catalog .views-exposed-form select {
  padding-inline-end: var(--sr-space-8);
}

/*
 * Обраний фільтр помітно відрізняється від порожнього.
 *
 * `:has(option[value="All"])` — не надлишок, а та сама пастка втретє. У
 * перемикачів рівнів («Пристрій або розділ», «Модель пристрою» на сторінці
 * моделі) варіанта `All` немає взагалі, тож `:not(:has(…:checked))` для них
 * істинне **завжди** — і порожній перемикач стояв із чорною межею, тобто
 * виглядав заданим фільтром, ще нічого не обравши. Двічі це вже виправляли
 * для кольору напису й для прозорості; межа лишалась.
 *
 * Самим перемикачам межу дає правило `.sr-filter--named.is-set` нижче: у
 * них порожнє значення — це `""`, а не `All`, і відрізнити його може лише
 * скрипт.
 *
 * `:where()` навколо перевірки — не оздоба. Без нього `:has(option[…])`
 * додає селектору ще один тип, правило переважує накладку нижче, і колір
 * тексту вертається з прозорого в чорний: напис знову видно двічі, свій і
 * накладку. Перевірено знімком — на вимірюваннях цього не видно, бо
 * `getComputedStyle` показує саме той колір, який виграв. `:where()` не
 * додає ваги взагалі, тож рівновага лишається такою, як була.
 */
.view-catalog .views-exposed-form select:where(:has(option[value="All"])):not(:has(option[value="All"]:checked)) {
  border-color: var(--sr-black);
  color: var(--sr-black);
  font-weight: 600;
}

/*
 * Назва фільтра стоїть у контролі завжди — і поки він порожній, і коли в
 * ньому щось обрано (рішення замовника).
 *
 * Це про роль ряду: він перелічує, чим можна звузити каталог, а не звітує,
 * що вже звужено. Коли в чотирьох контролах поспіль стоять «iPhone»,
 * «iPhone 15», «Тип запчастини», «Клас якості» — половина ряду відповідає
 * на питання, а половина його ставить, і з першого погляду не розібрати,
 * що з цього що.
 *
 * Обране не зникає безслідно: контрол із вибором має чорну межу й насичений
 * напис, поруч зʼявляється «Скинути», а сам вибір видно, щойно розкрити
 * список.
 */
.view-catalog .views-exposed-form .sr-filter--named {
  position: relative;
}

/* Другий селектор — не надлишок, а вимушена відповідь на специфічність.
   Правило «обраний фільтр» вище має `:has(option[value="All"]:checked)`,
   тобто вагу вищу за прості класи, і перефарбовувало текст назад у чорний —
   напис було видно двічі, свій і накладку.
   
   Умови `.is-set` тут бути не може, і це не дрібниця: у перемикачів рівнів
   («Пристрій», «Модель пристрою») варіанта `All` немає взагалі, тож
   `:not(:has(...))` для них істинне **завжди**. Поки правило діяло лише на
   обраних, порожній перемикач показував свою назву двічі — саме те, що
   видно на сторінці моделі одразу після перемикання пристрою. */
.view-catalog .views-exposed-form .sr-filter--named select,
.view-catalog .views-exposed-form .sr-filter--named select:not(:has(option[value="All"]:checked)) {
  color: transparent;
}

/* Список, що розкривається, малює браузер, і колір рядків він бере з самого
   контрола — без цього рядка вони стали б прозорими разом із ним. */
.view-catalog .views-exposed-form .sr-filter--named option,
.view-catalog .views-exposed-form select.sr-filter__group option {
  color: var(--sr-ink);
}

/* Накладка не має перехоплювати кліки: під нею звичайний селект, і
   відкриватись він мусить від дотику в будь-яку точку контрола. Праворуч
   лишаємо місце стрілці. */
.view-catalog .views-exposed-form .sr-filter__name {
  position: absolute;
  inset-block: 0;
  inset-inline: var(--sr-space-4) var(--sr-space-8);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.view-catalog .views-exposed-form .sr-filter--named.is-set .sr-filter__name {
  color: var(--sr-black);
  font-weight: 600;
}

/* Перший рівень порожній має значення "", а не "All", тож правило вище на
   нього не діє — межу задаємо тією самою позначкою, що й напис. */
.view-catalog .views-exposed-form .sr-filter--named.is-set select {
  border-color: var(--sr-black);
}

.view-catalog .views-exposed-form .form-actions {
  display: flex;
  gap: var(--sr-space-2);
  margin: 0;
}

/*
 * Olivero робить сам вигляд сіткою з великим проміжком між рядами —
 * через нього під фільтром висіло 54px порожнечі. Відступи задаємо самі.
 */
.view-catalog {
  display: block;
}

.view-catalog .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sr-card-w), 1fr));
  gap: var(--sr-gap);
}

/* ---------- картка ---------- */

/* Знято з категорійної сторінки mobilesentrix.eu (li.item):
   білий фон, радіус 32, м'яка тінь, вміст по центру, кнопка фіксованої
   ширини. Перша версія була з іншого їхнього шаблона і виглядала чужою. */
.catalog__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sr-space-4);
  background: var(--sr-surface);
  border: 0;
  border-radius: var(--sr-radius-card);
  box-shadow: var(--sr-shadow-card);
  text-align: center;
  transition: box-shadow 0.15s ease;
}

.catalog__item:hover {
  box-shadow: var(--sr-shadow-card-hover);
}

.catalog__media {
  position: relative;
  background: transparent;
  margin-bottom: var(--sr-space-2);
}

.catalog__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Бейдж якості — кругла пігулка поверх лівого верхнього кута фото,
   як фірмові кружки AQ7/AMPLUS у референсі. */
.catalog__media .field--name-field-quality {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: 5px 10px;
  background: var(--sr-black);
  color: var(--sr-surface);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--sr-radius-pill);
}

.catalog__item .field--name-field-part-type {
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-red);
  margin-bottom: var(--sr-space-1);
}

/* Видимий H1 каталогу: системний заголовок прихований, тож сторінка мала
   б лишитись без головного заголовка — додаємо його вмістом. */
.sr-catalog__h1 {
  margin: 0 0 var(--sr-space-6);
  color: var(--sr-ink);
  font-size: var(--sr-text-2xl);
  font-weight: 800;
  line-height: 1.15;
}

.catalog__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  margin: 0 0 var(--sr-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.catalog__title a {
  color: var(--sr-black);
  text-decoration: none;
}

.catalog__title a:hover {
  color: var(--sr-red);
}

/* Низ картки: ціна, наявність, степер, кнопка — усе по центру,
   на одній лінії в усіх картках ряду. */
.catalog__buy {
  margin-top: auto;
}

.catalog__price {
  font-size: 20px;
  font-weight: 600;
  color: var(--sr-black);
  font-variant-numeric: tabular-nums;
}

.catalog__price--ask {
  font-size: var(--sr-text-base);
  font-weight: 600;
  color: var(--sr-grey-2);
}

.catalog__stock {
  font-size: var(--sr-text-sm);
  font-weight: 500;
  margin: 2px 0 var(--sr-space-2);
}

.catalog__stock--in { color: var(--sr-in-stock); }
.catalog__stock--out { color: var(--sr-grey-2); }

/*
 * Склад і час відправки.
 *
 * Оформлення тихе — це довідка, а не акцент: поруч стоїть ціна й кнопка, і
 * перетягувати увагу на себе рядок не має. Виняток — європейський склад: там
 * чекати два тижні й платити наперед, і про це людина мусить спіткнутись
 * поглядом, а не прочитати випадково.
 */
.sr-wh {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 0 var(--sr-space-2);
  font-size: var(--sr-text-sm);
  line-height: 1.4;
  color: var(--sr-grey-1);
}

.sr-wh__place {
  font-weight: 500;
}

.sr-wh__place::after {
  content: "·";
  margin-inline-start: 8px;
  color: var(--sr-grey-3);
}

.sr-wh--eu .sr-wh__place {
  color: var(--sr-red);
}

/* На сторінці товару рядок розгорнутий і вирівняний ліворуч — там він не
   підпис під карткою, а частина умов покупки. */
.sr-wh--page {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  margin-block: var(--sr-space-2);
}

.sr-wh__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-wh__note {
  color: var(--sr-grey-2);
}

.sr-wh__note--warn {
  font-weight: 600;
  color: var(--sr-red);
}

/*
 * Рядок у кошику й підсумку.
 *
 * Позиція там — флекс із фото та назвою, тож сам по собі рядок ставав третім
 * сусідом і йшов **праворуч від назви**, а не під нею. Тому переносимо його
 * на власну лінію й відступаємо на ширину фото з проміжком, щоб він
 * вирівнявся саме під назвою, а не під картинкою.
 */

.sr-wh--line {
  flex-basis: 100%;
  margin: 2px 0 0;
  margin-inline-start: calc(48px + var(--sr-space-3));
  font-size: var(--sr-text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sr-grey-2);
}

/* У підсумку підпис уже лежить у своїй колонці під назвою, тож ні переносу,
   ні відступу під мініатюру йому не треба. */
.sr-summary__text .sr-wh--line {
  flex-basis: auto;
  margin: 0;
}

.sr-wh--line.sr-wh--eu {
  color: var(--sr-red);
}

/*
 * Попередження про змішаний кошик.
 *
 * Помітніше за смугу складу — тут людина мусить зупинитись і щось зробити,
 * а не просто прийняти до відома. Але без червоної заливки: це не помилка
 * покупця й не поломка, а обмеження складу, яке треба спокійно пояснити.
 */
.sr-mixed {
  margin: 0 0 var(--sr-space-4);
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 1px solid var(--sr-red);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.sr-mixed__title {
  margin: 0 0 4px;
  color: var(--sr-red);
  font-size: var(--sr-text-base);
  font-weight: 700;
}

.sr-mixed__text {
  margin: 0;
  font-size: var(--sr-text-sm);
  line-height: 1.5;
  color: var(--sr-ink);
}

/*
 * Смуга доставки в колонці купівлі на сторінці товару.
 *
 * Стоїть між наявністю й кнопкою — там, де людина дивиться на ціну й
 * вирішує. Оформлення спокійне: головна дія на цій сторінці одна, і
 * друга кольорова пляма поруч із чорною кнопкою розмивала б її.
 */
.pp__ship {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
  padding: var(--sr-space-2) var(--sr-space-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
}

/*
 * Знак перевізника — офіційний файл Нової Пошти, а не наш малюнок: чужу
 * марку не перемальовують. Тому й посилання веде на їхній сайт.
 */
.pp__ship-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
}

.pp__ship-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp__ship-text {
  font-size: var(--sr-text-sm);
  line-height: 1.4;
  color: var(--sr-grey-1);
}

/* Число — це те, заради чого рядок існує, тож воно й темніє. */
.pp__ship-text strong {
  color: var(--sr-ink);
  font-weight: 700;
  white-space: nowrap;
}

/*
 * Пропозиція сервісу на сторінці деталі.
 *
 * Картка, а не кнопка: головна дія сторінки одна, і вона чорна. Червоні тут
 * лише знак і посилання — те саме правило, що для решти другорядних дій.
 * Тло біле, а не `--sr-ground`, як у смуги доставки: це окрема пропозиція,
 * і злитися з сусідньою смугою в один сірий блок їй не можна.
 */
.pp__svc {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-space-3);
  margin-top: var(--sr-space-4);
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.pp__svc-ico {
  flex: none;
  margin-top: 2px;
  color: var(--sr-red);
}

.pp__svc-body {
  min-width: 0;
  font-size: var(--sr-text-sm);
  line-height: 1.45;
  color: var(--sr-grey-1);
}

/* Olivero дає абзацам власний нижній відступ — у картці він рвав рядки. */
.pp__svc-body p {
  margin: 0;
}

.pp__svc-title {
  color: var(--sr-ink);
  font-weight: 600;
}

.pp__svc-facts strong {
  color: var(--sr-ink);
  font-weight: 700;
  white-space: nowrap;
}

.pp__svc-link {
  display: inline-block;
  margin-top: var(--sr-space-2);
  color: var(--sr-red);
  font-weight: 600;
  text-decoration: none;
}

.pp__svc-link:hover {
  text-decoration: underline;
}

/*
 * Безкоштовна доставка.
 *
 * Смуга спокійна, а не тривожна: сусідня `.sr-mixed` червона, бо вона про
 * перешкоду, а тут — вигода. Червоним лишається сама позначка, щоб рядок
 * не загубився серед решти тексту кошика.
 */
.sr-free {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin: 0 0 var(--sr-space-4);
  padding: var(--sr-space-3) var(--sr-space-4);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
  color: var(--sr-ink);
}

/* Позначка — фургон тими самими лініями, що й решта іконок сайту. */
.sr-free__mark {
  flex: none;
  width: 22px;
  height: 16px;
  background: var(--sr-red);
  -webkit-mask: var(--sr-truck) center / contain no-repeat;
  mask: var(--sr-truck) center / contain no-repeat;
}

/* Поріг уже досягнуто — тоді це не пропозиція, а факт. */
.sr-free--done {
  border-color: var(--sr-in-stock);
  color: var(--sr-in-stock);
  font-weight: 600;
}

.sr-free--done .sr-free__mark {
  background: var(--sr-in-stock);
}

.catalog__buy .commerce-order-item-add-to-cart-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sr-space-2);
}

.catalog__buy .form-item {
  margin: 0;
  flex: none;
}

.catalog__buy .form-item label {
  display: none;
}

/* Кнопка фіксованої ширини по центру, як у референсі — не на всю картку.
   На вузькій картці (375px) жорстке 170px вилазило за межі, тож ширина
   обмежується доступною: min(170px, 100%). */
.catalog__buy input[type="submit"] {
  flex: none;
  width: min(170px, 100%);
  padding: 0 var(--sr-space-6);
}

/* ---------- степер кількості ---------- */

/* − [поле] + : мінус і плюс — половинки пігулки, поле між ними. */
.sr-qty {
  display: inline-flex;
  align-items: stretch;
}

.sr-qty__btn {
  width: 44px;
  height: 38px;
  border: 1px solid var(--sr-grey-3);
  background: var(--sr-surface);
  color: var(--sr-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.sr-qty__btn--minus {
  border-radius: var(--sr-radius-pill) 0 0 var(--sr-radius-pill);
  border-inline-end: 0;
}

.sr-qty__btn--plus {
  border-radius: 0 var(--sr-radius-pill) var(--sr-radius-pill) 0;
  border-inline-start: 0;
}

.sr-qty__btn:hover {
  background: var(--sr-ground);
}

.sr-qty input[type="number"],
.catalog__buy .sr-qty input.form-element,
.pp__buy .sr-qty input.form-element {
  width: 56px;
  height: 38px;
  min-height: 38px;
  min-block-size: 38px;
  block-size: 38px;
  border: 1px solid var(--sr-grey-3);
  border-radius: 0;
  text-align: center;
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  -moz-appearance: textfield;
  appearance: textfield;
}

.sr-qty input::-webkit-outer-spin-button,
.sr-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ================================================================== */
/* Прайс ремонту                                                      */
/* ================================================================== */

.service-prices__title {
  font-size: var(--sr-text-xl);
  font-weight: 700;
  margin: 0 0 var(--sr-space-4);
}

.service-prices__group-title {
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-ink);
  border-inline-start: 3px solid var(--sr-red);
  padding-inline-start: var(--sr-space-2);
  margin: 0 0 var(--sr-space-2);
}

.service-prices__table {
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
}

.service-prices__table td {
  padding: var(--sr-space-3) var(--sr-space-4);
  border-bottom: 1px solid var(--sr-ground);
  font-size: var(--sr-text-base);
}

.service-prices__time {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
}

.service-prices__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ================================================================== */
/* Головна                                                            */
/* ================================================================== */

.home-hero {
  background: var(--sr-black);
  color: var(--sr-surface);
  border-radius: var(--sr-radius-sm);
  padding: var(--sr-space-12) var(--sr-space-8);
  margin-bottom: var(--sr-space-8);
}

.home-hero__eyebrow {
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-red);
  margin: 0 0 var(--sr-space-3);
}

.home-hero__title {
  font-size: var(--sr-text-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--sr-surface);
  margin: 0 0 var(--sr-space-4);
  text-wrap: balance;
}

.home-hero__lead {
  font-size: var(--sr-text-lg);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--sr-grey-3);
  margin: 0 0 var(--sr-space-6);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-3);
  margin: 0;
}

.home-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--sr-surface);
}

.home-btn--ghost:hover {
  border-color: var(--sr-surface);
  color: var(--sr-surface);
}

.home-advantages ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sr-gap);
  list-style: none;
  margin: 0 0 var(--sr-space-8);
  padding: 0;
}

.home-advantages li {
  background: var(--sr-ground);
  border: 0;
  border-top: 3px solid var(--sr-red);
  border-radius: 0;
  padding: var(--sr-space-4);
  margin: 0;
}

.home-advantages li strong {
  display: block;
  font-size: var(--sr-text-base);
  font-weight: 700;
  margin-bottom: var(--sr-space-1);
}

.home-advantages li span {
  font-size: var(--sr-text-sm);
  color: var(--sr-grey-1);
  line-height: 1.5;
}

.path-frontpage .page-title,
.path-frontpage .block-page-title-block {
  display: none;
}

/* ================================================================== */
/* Дрібні екрани                                                      */
/* ================================================================== */

@media (max-width: 560px) {
  .view-catalog .view-content {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sr-space-3);
  }
  .view-catalog .views-exposed-form .form-item {
    min-width: 100%;
  }
  .home-hero {
    padding: var(--sr-space-8) var(--sr-space-4);
  }
}

/* ================================================================== */

/* ================================================================== */
/* Сторінка товару (макет категорійної сторінки товару референсу)     */
/* ================================================================== */

/* Системний заголовок ховаємо: назву виводить червона плашка шаблону. */
.path-product .block-page-title-block {
  display: none;
}

/* Червона плашка з назвою — на всю ширину, як у референсі. */
/*
 * Назва товару.
 *
 * Була суцільна червона плашка на всю ширину — вигляд, знятий із
 * категорійного референсу. Поруч із рештою сайту (білі картки, чорні
 * пігулки, повітря) вона читалась як чужий елемент, а червоне в нашій мові
 * дизайну — акцент, а не тло.
 *
 * Тепер це просто заголовок сторінки: 34px/800 — той самий `--sr-text-2xl`,
 * який у токенах і описаний як «заголовок сторінки» й доти ніде не
 * використовувався. Ієрархію тримає розмір, а не колір.
 */
.pp__titlebar {
  margin: 0 0 var(--sr-space-3);
  padding: 0;
  background: none;
  color: var(--sr-ink);
  font-size: var(--sr-text-2xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Артикул — блакитна мітка + значення, поруч бейдж якості. */
.pp__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2);
  /* Тонка лінія під рядком метаданих замінює ту межу, яку раніше давала
     плашка: заголовок відділений від решти, але без кольорової заливки. */
  margin: 0 0 var(--sr-space-3);
  padding-bottom: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-line);
}

.pp__sku {
  display: inline-flex;
  align-items: stretch;
  font-size: 12px;
  border: 1px solid var(--sr-line);
  border-radius: 4px;
  overflow: hidden;
}

/* Синій лишається — у токенах він саме для інформаційних міток, і артикул
   це вона і є. Але білий на --sr-blue дає 2.71, нижче AA, тож тло мітки —
   темніший --sr-blue-deep. */
.pp__sku-label {
  background: var(--sr-blue-deep);
  color: var(--sr-surface);
  padding: 4px 10px;
  font-weight: 600;
}

.pp__sku-value {
  padding: 4px 10px;
  color: var(--sr-ink);
  font-variant-numeric: tabular-nums;
}

.pp__tags .field--name-field-quality {
  display: inline-block;
  padding: 4px 10px;
  background: var(--sr-black);
  color: var(--sr-surface);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--sr-radius-pill);
}

/* Рядок довіри: дрібний сірий uppercase із червоними іконками. */
.pp__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2) var(--sr-space-6);
  list-style: none;
  margin: 0 0 var(--sr-space-4);
  padding: 0 0 var(--sr-space-3);
  border-bottom: 1px solid var(--sr-line);
}

.pp__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sr-grey-2);
  margin: 0;
}

.pp__trust svg {
  color: var(--sr-red);
  flex: none;
}

/* Дві колонки: фото в рамці ліворуч, купівля праворуч. */
.pp__grid {
  display: grid;
  grid-template-columns: minmax(300px, 549px) 1fr;
  gap: var(--sr-space-6);
  align-items: start;
  margin-bottom: var(--sr-space-6);
}

.pp__media {
  border: 1px solid var(--sr-line);
  padding: var(--sr-space-4);
  background: var(--sr-surface);
}

.pp__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Ціна на сторінці товару — червона, як у референсі
   (у картці каталогу вона чорна — це різні компоненти). */
.pp__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sr-space-2);
}

.pp__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--sr-red);
  font-variant-numeric: tabular-nums;
}

.pp__price--ask {
  color: var(--sr-grey-2);
}

.pp__price-note {
  font-size: var(--sr-text-sm);
  font-weight: 500;
  color: var(--sr-grey-2);
}

.pp__buy {
  margin: var(--sr-space-3) 0 var(--sr-space-4);
}

.pp__buy .commerce-order-item-add-to-cart-form {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
}

.pp__buy .form-item {
  margin: 0;
}

.pp__buy .form-item label {
  display: none;
}

/* Кнопка «Купити» на сторінці товару ідентична картковій:
   чорна пігулка 40px, при наведенні червона. Стилі дає глобальне
   правило .commerce-order-item-add-to-cart-form input[type=submit].
   Окремо оформляємо лише посилання «Уточнити ціну». */
.pp__buy input[type="submit"] {
  min-width: 170px;
}

.pp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sr-space-2);
  min-width: 170px;
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-6);
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-black);
  color: var(--sr-surface);
  font-size: var(--sr-text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pp__cta:hover {
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Характеристики: підпис сірий, значення праворуч. */
/*
 * Характеристики — довідка, а не головний вміст сторінки.
 *
 * Були в основному кеглі (15px) з міткою на 170px і падінгом 8px: три
 * рядки з'їдали 213px, а на телефоні мітка забирала майже половину
 * ширини смуги, і «Сумісні моделі» ламались на три рядки замість одного.
 * Читають цей блок тоді, коли вже вибрали товар і звіряють подробиці, —
 * йому вистачає `--sr-text-sm`.
 */
.pp__fields .field {
  display: flex;
  gap: var(--sr-space-3);
  /*
   * Нуль відступу тут обов'язковий: Olivero дає полям власний
   * `margin-block-end`, і між рядками висіло 36px порожнечі при висоті
   * рядка 29. Та сама пастка, що з'їла мініатюру в кошику.
   */
  margin: 0;
  padding: var(--sr-space-2) 0;
  border-bottom: 1px solid var(--sr-line);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
}

/*
 * Мітка тримає колонку, а не розтягується під найдовшу.
 *
 * Ширина знята з найдовшого підпису («Сумісні моделі») у цьому ж кеглі —
 * власна ширина в кожного рядка зробила б ліву межу значень рваною, а це
 * та сама вада, від якої страждала шухляда меню.
 */
/* Останній рядок межі не малює: одразу під ним іде лінія розділу «Опис
   товару», і дві волосини за 12px одна від одної читались як помилка. */
.pp__fields .field:last-child {
  border-bottom: 0;
}

.pp__fields .field__label {
  flex: none;
  width: 132px;
  color: var(--sr-grey-2);
  font-weight: 500;
}

/*
 * Перелік значень — гнучкий рядок, а не рядок тексту.
 *
 * Причина не в оформленні: між сусідніми `<div class="field__item">` у
 * розмітці стоїть перенос рядка, і при `display: inline` він
 * перетворюється на пробіл — виходило «iPhone XS Max , iPhone Air» із
 * пробілом перед комою. У флексі порожні текстові вузли елементами не
 * стають, тож пробіл лишається рівно один — той, який ми задали проміжком.
 */
.pp__fields .field__items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  min-width: 0;
}

/* Кома належить своєму значенню й переноситься разом із ним. */
.pp__fields .field__item:not(:last-child)::after {
  content: ",";
}

/*
 * Посилання на моделі — нашим червоним, без підкреслення.
 *
 * Ядро лишає їх браузерним синім, і серед сірих підписів вони читались як
 * чужий елемент. Те саме правило вже діє в тілі текстових сторінок.
 */
.pp__fields a {
  color: var(--sr-red);
  text-decoration: none;
}

.pp__fields a:hover {
  text-decoration: underline;
}

/* Посилання на посадкову «тип×модель» — червоне, як інші посилання
   характеристик, але окремим рядком під ними. */
.pp__landing-link {
  display: inline-block;
  margin-top: var(--sr-space-3);
  color: var(--sr-red);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.pp__landing-link:hover {
  text-decoration: underline;
}

/* Опис — блакитний заголовок-плашка і рамка, як у референсі. */
.pp__section {
  margin-bottom: var(--sr-space-8);
}

/*
 * Опис. Була синя плашка «ОПИС ТОВАРУ» на всю ширину плюс текст у рамці —
 * друга кольорова смуга на одній сторінці, після червоної. Тепер звичайний
 * заголовок розділу (`--sr-text-xl`, 24px/700) і тонка лінія згори.
 */
.pp__section {
  padding-top: var(--sr-space-6);
  border-top: 1px solid var(--sr-line);
}

.pp__section-head {
  margin: 0 0 var(--sr-space-3);
  padding: 0;
  background: none;
  color: var(--sr-ink);
  font-size: var(--sr-text-xl);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.pp__section-body {
  /*
   * Обмеження довжини рядка, а не ширини блока. Текст розтягувався на всі
   * 1300px, і на такому рядку око не знаходить початок наступного —
   * доводиться перечитувати. 72 символи — звична межа читабельності, і
   * задається вона в `ch`, тобто від самого шрифту, а не від екрана.
   */
  max-width: 72ch;
  padding: 0;
  border: 0;
  font-size: var(--sr-text-base);
  line-height: 1.7;
  color: var(--sr-grey-1);
}

/* Унікальна довідка «про цю деталь» — другорядна щодо опису: менший кегль
   і світліший колір, щоб не змагатись із основним текстом. */
.pp__seo-note {
  margin-top: var(--sr-space-3);
  font-size: var(--sr-text-sm);
  color: var(--sr-grey-2);
}

@media (max-width: 760px) {
  .pp__grid {
    grid-template-columns: 1fr;
  }

  /* 34px на 375px зʼїдає три рядки під саму лише назву. */
  .pp__titlebar {
    font-size: var(--sr-text-xl);
  }

  /*
   * Заголовок розділу мусить зменшитись разом із назвою, інакше вони
   * стають однакові (обидва 24px) і ієрархія зникає: на десктопі 34 проти
   * 24 читається як «головне й другорядне», на телефоні — як два рівних.
   */
  .pp__section-head {
    font-size: var(--sr-text-lg);
  }

  /* На вузькому екрані повітря коштує дорожче за симетрію. */
  .pp__section {
    padding-top: var(--sr-space-4);
  }

  /*
   * Мітка звужується ще, бо тут кожен піксель ширини — це рядок переносу.
   *
   * 116px — не прикидка, а вимір: найдовший підпис («Тип запчастини»)
   * займає 111px у цьому кеглі. На 108px він сам ламався на два рядки, і
   * рядок виростав до 48px замість 28 — тобто економія ширини оберталась
   * втратою висоти саме там, де її бракує.
   */
  .pp__fields .field__label {
    width: 116px;
  }

  .pp__fields .field {
    gap: var(--sr-space-2);
    padding: var(--sr-space-1) 0;
  }

  /*
   * Фото без рамки й без падінгу.
   *
   * На десктопі рамка тримає фото в колонці поруч із ціною — там вона
   * позначає межу компонента. На телефоні колонка одна, межу й так видно, а
   * рамка з падінгом забирають 34px ширини з 375 — на фото це помітна
   * втрата. Знімок і так лишається на білому тлі сторінки.
   */
  .pp__media {
    padding: 0;
    border: 0;
  }
}

/* Olivero віддає довгі тексти шрифтом із засічками (Lora) —
   уся типографіка сайту має бути Inter. */
.pp__section-body,
.text-content,
.text-content p {
  font-family: var(--sr-font);
}

.pp__section-body p {
  margin: 0 0 var(--sr-space-3);
}

/* Повідомлення «додано в кошик» із вибором наступного кроку. */
.messages--status a {
  font-weight: 600;
  color: inherit;
}

/* ================================================================== */
/* Текстові сторінки                                                  */
/* ================================================================== */

/* Заголовок сторінки — у нашій шкалі, а не олівероївський. */
.page-title {
  margin: 0 0 var(--sr-space-6);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-2xl);
  font-weight: 800;
  line-height: 1.15;
}

.sr-page {
  max-width: 900px;
}

.sr-page h2 {
  margin: var(--sr-space-8) 0 var(--sr-space-3);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-xl);
  font-weight: 700;
}

.sr-page h3 {
  margin: 0 0 var(--sr-space-2);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  font-weight: 700;
}

.sr-page p {
  margin: 0 0 var(--sr-space-4);
  max-width: 68ch;
  color: var(--sr-grey-1);
  font-size: var(--sr-text-base);
  line-height: 1.65;
}

.sr-page__lead {
  color: var(--sr-ink) !important;
  font-size: var(--sr-text-lg) !important;
  font-weight: 500;
  line-height: 1.5 !important;
}

.sr-page blockquote {
  margin: 0 0 var(--sr-space-4);
  padding: var(--sr-space-4) var(--sr-space-6);
  border: 0;
  border-inline-start: 3px solid var(--sr-red);
  background: var(--sr-ground);
  border-radius: var(--sr-radius-sm);
}

.sr-page blockquote p {
  margin: 0;
}

.sr-page blockquote cite {
  display: block;
  margin-top: var(--sr-space-2);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
  font-style: normal;
  font-weight: 600;
}

/* ---------- юридичні сторінки ---------- */

/* Оферта й політика конфіденційності — це довідка, а не текст для читання
   поспіль. Її відкривають, щоб знайти один пункт, тому кегль дрібніший за
   звичайну сторінку, рядок коротший, а між пунктами лишається повітря:
   суцільна стіна з нумерацією не дає зачепитись оком. */
.sr-legal p {
  margin-bottom: var(--sr-space-2);
  max-width: 76ch;
  font-size: var(--sr-text-sm);
  line-height: 1.7;
}

.sr-legal h2 {
  margin-top: var(--sr-space-6);
  font-size: var(--sr-text-base);
}

.sr-legal .sr-page__lead {
  margin-bottom: var(--sr-space-3);
  font-size: var(--sr-text-base) !important;
}

/* Дата редакції: у документі, який змінюють, вона головніша за будь-який
   пункт — саме за нею розуміють, чи ті самі умови діяли при замовленні. */
.sr-legal__meta {
  margin-bottom: var(--sr-space-6) !important;
  padding-bottom: var(--sr-space-4);
  border-bottom: 1px solid var(--sr-line);
  color: var(--sr-grey-2) !important;
  font-size: var(--sr-text-xs) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Місця, які має заповнити власник. Помітні навмисно: реквізити з
   прочерками, які поїхали в живу оферту, гірші за відсутню сторінку. */
.sr-legal__fill {
  padding: 1px 4px;
  border-radius: var(--sr-radius-sm);
  background: color-mix(in srgb, var(--sr-red) 12%, transparent);
  color: var(--sr-red-dark);
  font-weight: 600;
}

/* Реквізити: підпис ліворуч вузькою колонкою, значення праворуч.
   Ширина колонки — за найдовшим підписом «Електронна пошта». */
.sr-legal__req {
  margin-top: var(--sr-space-4);
  padding: var(--sr-space-4) var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
}

.sr-legal__req p {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--sr-space-3);
  margin: 0;
  padding: var(--sr-space-2) 0;
  border-bottom: 1px solid var(--sr-line);
}

/* Останній рядок межі не малює: одразу під ним край картки, і дві лінії
   за кілька пікселів читаються як помилка. Те саме правило, що й у
   характеристиках товару. */
.sr-legal__req p:last-child {
  border-bottom: 0;
}

.sr-legal__req p > span:first-child {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .sr-legal__req p {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Знаки 3-D Secure у тексті сторінки. Ряд, а не сітка: знаків три й вони
   різної пропорції, тож рівні комірки лишали б навколо квадратного Visa
   Secure дві порожні третини. */
.sr-secure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-6);
  margin-bottom: var(--sr-space-6);
  padding: var(--sr-space-4) var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.sr-secure img {
  display: block;
  height: 44px;
  width: auto;
}

/* Картки способів доставки й оплати. */
.sr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sr-gap);
  margin-bottom: var(--sr-space-6);
}

.sr-cards__item {
  padding: var(--sr-space-4) var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.sr-cards__item p {
  margin: 0;
  font-size: var(--sr-text-sm);
}

/* Контакти в дві колонки. */
.sr-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sr-space-6);
  margin-bottom: var(--sr-space-8);
  padding-bottom: var(--sr-space-6);
  border-bottom: 1px solid var(--sr-line);
}

.sr-contacts__label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sr-contacts p {
  margin: 0;
  color: var(--sr-ink);
}

.sr-contacts__note {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
}

/* ================================================================== */
/* Адаптив: планшет і телефон                                         */
/* ================================================================== */

@media (max-width: 1100px) {

  /* На iPad картка 280px дає лише два стовпці — завузько для вітрини. */
  .view-catalog .view-content {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }

  .sr-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--sr-space-6);
  }

  .sr-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --sr-gutter: 12px;
  }

  /* Фільтр по два контроли в ряд — інакше він займає пів екрана. */
  .view-catalog .views-exposed-form {
    gap: var(--sr-space-2);
  }

  .view-catalog .views-exposed-form .form-item-search {
    flex: 1 1 100%;
    max-width: none;
  }

  /* min-width: 0 обов'язковий: інакше флекс-елемент не стискається
     нижче ширини найдовшої опції в селекті, і два в ряд не вміщуються. */
  .view-catalog .views-exposed-form .form-item-sr-group,
  .view-catalog .views-exposed-form .form-item-model,
  .view-catalog .views-exposed-form .form-item-sr-model-nav,
  .view-catalog .views-exposed-form .form-item-category,
  .view-catalog .views-exposed-form .form-item-part-type,
  .view-catalog .views-exposed-form .form-item-quality,
  .view-catalog .views-exposed-form .form-item-warehouse {
    flex: 1 1 calc(50% - var(--sr-space-2));
    min-width: 0;
  }

  .view-catalog .views-exposed-form .form-actions {
    flex: 1 1 100%;
  }

  .view-catalog .views-exposed-form .form-actions input {
    width: 100%;
  }

  /* Картка на телефоні компактніша: два стовпці мають лишатися читними. */
  .view-catalog .view-content {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sr-space-2);
  }

  .catalog__item {
    padding: var(--sr-space-3);
    border-radius: var(--sr-space-6);
  }

  /* Сторінка товару — одна колонка. */
  .pp__grid {
    grid-template-columns: 1fr;
  }

  .sr-page,
  .sr-page p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  /* Підвал лишається у два стовпці й на вузькому екрані: посилання там
     короткі, вони вміщаються, а в один стовпець підвал розтягувався на
     кілька екранів гортання. Виняток — контакти: телефони й адреса в
     половину ширини переносяться посеред номера. */
  .sr-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--sr-space-6);
  }

  .sr-footer__col--contacts,
  .sr-footer__col:last-child {
    grid-column: 1 / -1;
  }

  .sr-footer__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sr-space-3);
  }
}

/* ================================================================== */
/* Згода на файли cookie                                              */
/* ================================================================== */

/*
 * Власні кольори модуля вимкнені (use_bare_css), тому банер повністю
 * наш: темна смуга внизу екрана, пігулки-кнопки, ті самі токени.
 */
.eu-cookie-compliance-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  padding: var(--sr-space-4) 0;
  background: var(--sr-black);
  color: var(--sr-surface);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.eu-cookie-compliance-banner .popup-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-space-4);
  max-width: var(--sr-container);
  margin: 0 auto;
  padding-inline: var(--sr-gutter);
}

.eu-cookie-compliance-banner #popup-text,
.eu-cookie-compliance-banner .eu-cookie-compliance-message {
  flex: 1 1 320px;
  margin: 0;
  max-width: 70ch;
}

.eu-cookie-compliance-banner #popup-text p,
.eu-cookie-compliance-banner .eu-cookie-compliance-message p {
  margin: 0;
  color: var(--sr-grey-3);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
}

.eu-cookie-compliance-banner #popup-buttons,
.eu-cookie-compliance-banner .eu-cookie-compliance-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-2);
  margin: 0;
}

.eu-cookie-compliance-banner button {
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-6);
  border: 1px solid transparent;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-surface);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.eu-cookie-compliance-banner button:hover {
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Відмова — другорядна дія, тому контурна. */
.eu-cookie-compliance-banner .decline-button,
.eu-cookie-compliance-banner .eu-cookie-withdraw-button {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--sr-surface);
}

.eu-cookie-compliance-banner .decline-button:hover,
.eu-cookie-compliance-banner .eu-cookie-withdraw-button:hover {
  border-color: var(--sr-surface);
  background: transparent;
  color: var(--sr-surface);
}

@media (max-width: 760px) {
  .eu-cookie-compliance-banner .popup-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .eu-cookie-compliance-banner button {
    flex: 1 1 auto;
  }
}

/* ================================================================== */
/* Сторінка кошика                                                    */
/* ================================================================== */

.cart-form .views-table {
  width: 100%;
  margin: 0 0 var(--sr-space-6);
  border-collapse: separate;
  border-spacing: 0;
}

.cart-form .views-table th {
  padding: 0 var(--sr-space-4) var(--sr-space-3);
  border: 0;
  border-bottom: 1px solid var(--sr-line);
  background: none;
  color: var(--sr-grey-2);
  font-family: var(--sr-font);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
}

.cart-form .views-table td {
  padding: var(--sr-space-4);
  border: 0;
  border-bottom: 1px solid var(--sr-line);
  background: none;
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  vertical-align: middle;
}

/* Назва товару — головне в рядку. */
.cart-form .views-table td:first-child {
  font-size: var(--sr-text-base);
  line-height: 1.4;
}

.cart-form .views-table td:first-child a {
  color: var(--sr-ink);
  font-weight: 500;
  text-decoration: none;
}

.cart-form .views-table td:first-child a:hover {
  color: var(--sr-red);
}

/* Ціна й сума — цифри в колонку. */
.cart-form .views-table td:nth-child(2),
.cart-form .views-table td:last-child,
.cart-form .views-table th:nth-child(2),
.cart-form .views-table th:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
}

.cart-form .views-table td:last-child {
  font-size: var(--sr-text-base);
  font-weight: 600;
  color: var(--sr-black);
}

.cart-form .quantity-edit-input {
  width: 72px;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-2);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-surface);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  text-align: center;
}

/*
 * Вилучення — іконка кошика. Текст лишається в розмітці для зчитувачів
 * екрана, але ховається нульовим кеглем; сам знак малюється маскою, тому
 * колір бере з тла й міняється при наведенні.
 */
.cart-form .delete-order-item {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--sr-line);
  border-radius: 50%;
  background-color: var(--sr-grey-2);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-mask: var(--sr-trash) center / 16px no-repeat;
  mask: var(--sr-trash) center / 16px no-repeat;
}

.cart-form .delete-order-item:hover {
  background-color: var(--sr-red);
}

/* Степер у кошику — компактний, як у підсумку. */
.cart-form .sr-qty {
  width: max-content;
}

.cart-form .sr-qty__btn {
  width: 30px;
  height: 32px;
}

.cart-form .sr-qty .quantity-edit-input {
  width: 48px;
  height: 32px;
  min-height: 32px;
  border-radius: 0;
  border-inline: 0;
}

/* Підсумок і дії. */
.cart-form .order-total-line,
.cart-form .commerce-order-total-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sr-space-1);
  margin-bottom: var(--sr-space-6);
  color: var(--sr-ink);
  font-size: var(--sr-text-base);
}

.cart-form .order-total-line__total,
.cart-form .order-total-line--total {
  color: var(--sr-black);
  font-size: var(--sr-text-lg);
  font-weight: 700;
}

/* «Підсумок» у кошику завжди дорівнює «Всього»: доставка й оплата
   зʼявляються аж на оформленні, а знижка вже сидить у ціні одиниці.
   Два однакових числа поспіль — чистий шум, тож лишаємо лише «Всього». */
.cart-form .order-total-line__subtotal {
  display: none;
}

.cart-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sr-space-3);
}

.cart-form .form-actions .button {
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  margin: 0;
  padding: 0 var(--sr-space-8);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-pill);
  background: transparent;
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
}

.cart-form .form-actions .button:hover {
  border-color: var(--sr-ink);
  background: transparent;
}

/* «Оформлення» — головна дія сторінки. Клас ставить form_alter: у
   Commerce обидві кнопки мають однаковий `button`. */
.cart-form .form-actions .sr-cart-checkout,
.cart-form .form-actions .checkout-link,
.cart-form .form-actions .button--primary {
  border-color: var(--sr-black);
  background: var(--sr-black);
  color: var(--sr-surface);
}

.cart-form .form-actions .sr-cart-checkout:hover,
.cart-form .form-actions .checkout-link:hover,
.cart-form .form-actions .button--primary:hover {
  border-color: var(--sr-red);
  background: var(--sr-red);
  color: var(--sr-surface);
}

/* Порожній кошик. */
.cart-empty-page {
  padding: var(--sr-space-12) 0;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-base);
  text-align: center;
}

@media (max-width: 760px) {
  /* Таблиця на телефоні перетворюється на список: заголовки колонок
     ховаємо, кожен рядок стає карткою. */
  .cart-form .views-table thead {
    display: none;
  }

  .cart-form .views-table,
  .cart-form .views-table tbody,
  .cart-form .views-table tr,
  .cart-form .views-table td {
    display: block;
    width: auto;
  }

  .cart-form .views-table tr {
    margin-bottom: var(--sr-space-3);
    padding: var(--sr-space-3);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-sm);
  }

  .cart-form .views-table td {
    padding: var(--sr-space-1) 0;
    border: 0;
    text-align: start !important;
  }

  .cart-form .form-actions {
    justify-content: stretch;
  }

  .cart-form .form-actions .button {
    flex: 1 1 auto;
  }
}

/* ================================================================== */
/* Оформлення замовлення                                              */
/* ================================================================== */

.commerce-checkout-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sr-space-8);
  align-items: start;
}

.sr-checkout__group {
  margin-bottom: var(--sr-space-6);
}

.sr-checkout__title {
  margin: 0 0 var(--sr-space-4);
  padding-bottom: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-line);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-lg);
  font-weight: 700;
}

/* Контакти — у дві колонки: чотири короткі поля в один екран. */
/*
 * Реквізити для рахунку — блок, який зʼявляється при виборі переказу.
 *
 * Селект тут перший на всю форму оформлення: решта полів — текстові або
 * автодоповнення Нової Пошти, тож правила для `<select>` у цій формі просто
 * не існувало, і браузер малював його своїм — 54px заввишки з радіусом 3px
 * посеред сорокапіксельних пігулок.
 */
.sr-checkout__legal select {
  box-sizing: border-box;
  width: 100%;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  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-base);
}

.sr-checkout__legal select:focus {
  outline: 2px solid var(--sr-black);
  outline-offset: 1px;
}

/* Підказка — це підказка, а не абзац тексту: ядро дає їй ті самі 16px, що
   й решті, і вона читається нарівні з полями, а не під ними. */
.sr-checkout__hint {
  margin: 0 0 var(--sr-space-4);
  color: var(--sr-grey-2);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  line-height: 1.45;
}

@media (max-width: 760px) {
  /* На телефоні поле нижче 16px змушує Safari наближати сторінку — те саме
     правило, що для решти форм. */
  .sr-checkout__legal select {
    font-size: 16px;
  }
}

.sr-checkout__group:first-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sr-gap);
}

.sr-checkout__group:first-of-type > :first-child {
  grid-column: 1 / -1;
}

.commerce-checkout-flow .form-item {
  margin-bottom: var(--sr-space-4);
}

.commerce-checkout-flow .form-item__label,
.commerce-checkout-flow label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-1);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.commerce-checkout-flow input[type="text"],
.commerce-checkout-flow input[type="email"],
.commerce-checkout-flow input[type="tel"],
.commerce-checkout-flow textarea {
  box-sizing: border-box;
  width: 100%;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  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-base);
}

.commerce-checkout-flow textarea {
  height: auto;
  min-height: 88px;
  padding: var(--sr-space-3) var(--sr-space-4);
  border-radius: var(--sr-radius-sm);
  line-height: 1.5;
}

.commerce-checkout-flow input:focus,
.commerce-checkout-flow textarea:focus {
  outline: 2px solid var(--sr-black);
  outline-offset: 1px;
}

/*
 * Варіанти доставки й оплати — картки з перемикачем, а не голі радіо.
 * У два стовпці: п'ять способів доставки стовпчиком займали пів екрана.
 * Обгортка — `.form-boolean-group` усередині fieldset, а не `.form-radios`.
 */
.commerce-checkout-flow .sr-options {
  margin: 0 0 var(--sr-space-4);
  padding: 0;
  border: 0;
}

.commerce-checkout-flow .sr-options > legend {
  display: none;
}

.commerce-checkout-flow .form-boolean-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sr-space-2);
}

@media (max-width: 620px) {
  .commerce-checkout-flow .form-boolean-group {
    grid-template-columns: 1fr;
  }
}

/*
 * Карткою робимо сам елемент, а не підпис: у розмітці Drupal `<input>` і
 * `<label>` — сусіди, тому рамка на підписі лишала перемикач поза карткою.
 */
.commerce-checkout-flow .form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin: 0;
  padding: var(--sr-space-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
}

.commerce-checkout-flow .form-type-radio:hover {
  border-color: var(--sr-grey-3);
}

.commerce-checkout-flow .form-type-radio:has(input:checked) {
  border-color: var(--sr-black);
  background: var(--sr-ground);
}

.commerce-checkout-flow .form-type-radio input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sr-red);
}

.commerce-checkout-flow .form-type-radio label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--sr-ink);
  font-size: var(--sr-text-base);
  font-weight: 400;
  cursor: pointer;
}

.commerce-checkout-flow .form-type-radio:has(input:checked) label {
  font-weight: 600;
}

.commerce-checkout-flow .form-type-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  color: var(--sr-ink);
  font-size: var(--sr-text-base);
  font-weight: 400;
  cursor: pointer;
}

.commerce-checkout-flow .form-type-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sr-red);
}

/* Бічна колонка з підсумком. */
.commerce-checkout-flow .layout-region-checkout-secondary,
.commerce-checkout-flow .checkout-pane-order-summary {
  padding: var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
  font-size: var(--sr-text-sm);
}

.commerce-checkout-flow .order-total-line__total {
  color: var(--sr-black);
  font-size: var(--sr-text-lg);
  font-weight: 700;
}

/* Дії кроку. */
.commerce-checkout-flow .checkout-buttons,
.commerce-checkout-flow .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-3);
  margin-top: var(--sr-space-6);
}

.commerce-checkout-flow .checkout-buttons input[type="submit"],
.commerce-checkout-flow .form-actions input[type="submit"] {
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-8);
  border: 1px solid var(--sr-black);
  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;
  cursor: pointer;
}

.commerce-checkout-flow .checkout-buttons input[type="submit"]:hover,
.commerce-checkout-flow .form-actions input[type="submit"]:hover {
  border-color: var(--sr-red);
  background: var(--sr-red);
}

/* Купон — другорядна дія. */
.commerce-checkout-flow .coupon-redemption-form input[type="submit"] {
  border-color: var(--sr-line);
  background: transparent;
  color: var(--sr-ink);
}

.commerce-checkout-flow .coupon-redemption-form input[type="submit"]:hover {
  border-color: var(--sr-ink);
  background: transparent;
  color: var(--sr-ink);
}

@media (max-width: 900px) {
  .commerce-checkout-flow {
    grid-template-columns: 1fr;
  }

  .sr-checkout__group:first-of-type {
    grid-template-columns: 1fr;
  }
}

/* ---------- рядок товару в кошику й підсумку ---------- */

/*
 * Клітинка товару: маленьке фото ліворуч, назва праворуч. Назва деталі
 * буває на два рядки тексту, тому обрізаємо її — інакше рядок кошика
 * розтягується вдвічі проти сусідніх.
 */
.cart-form .views-table td:first-child > div,
.checkout-pane-order-summary .order-summary__item,
.checkout-pane-order-summary tr > td:first-child > div {
  display: flex;
  align-items: center;
  /* Проміжок лише між колонками. Рядок складу переноситься на власну лінію,
     і спільний `gap` додавав би 12px ще й між лініями, а `align-content`
     розганяв би їх по висоті комірки — рядок таблиці роздувався втричі. */
  column-gap: var(--sr-space-3);
  row-gap: 0;
  flex-wrap: wrap;
  align-content: center;
}

.cart-form .field--name-product-id,
.checkout-pane-order-summary .field--name-product-id {
  flex: none;
  /* Під мініатюрою висів порожній відступ 36px — типовий для полів теми.
     Поки рядок був в одну лінію, центрування його ховало; щойно рядок
     складу став на власну лінію, він розсунув комірку майже втричі. */
  margin: 0;
}

.cart-form .field--name-product-id .field--name-field-images,
.checkout-pane-order-summary .field--name-product-id .field--name-field-images {
  margin: 0;
}

.cart-form .field--name-product-id img,
.checkout-pane-order-summary .field--name-product-id img {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  object-fit: contain;
  background: var(--sr-surface);
}

/* У товару буває до восьми фото — у рядку потрібне лише перше. */
.cart-form .field--name-product-id .field__item:not(:first-child),
.checkout-pane-order-summary .field--name-product-id .field__item:not(:first-child) {
  display: none;
}

/* У кошику назва обрізається двома рядками, щоб рядки таблиці лишались
   однакової висоти. */
.cart-form .views-table td:first-child .field--name-title {
  min-width: 0;
  font-size: var(--sr-text-sm);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* А в підсумку замовлення назва показується цілком: людина має бачити,
   що саме замовляє, перед підтвердженням. */
.checkout-pane-order-summary .field--name-title {
  min-width: 0;
  font-size: var(--sr-text-sm);
  line-height: 1.35;
}

.checkout-pane-order-summary .field--name-product-id img {
  width: 40px;
  height: 40px;
}


/* ---------- іконки й логотипи у варіантах ---------- */

.sr-option {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  min-width: 0;
}

/* Плитка під логотип: перевізники мають різні пропорції, а ряд має
   лишатися рівним. */
.sr-option__logo,
.sr-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 28px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.sr-option__logo img {
  max-width: 40px;
  max-height: 20px;
  width: auto;
  height: auto;
}

.sr-option__icon {
  color: var(--sr-grey-1);
}

.sr-option__text {
  min-width: 0;
  font-size: var(--sr-text-sm);
  line-height: 1.3;
}

/* Другий рядок варіанта: що саме буде далі.
   Окремим блоком, а не через кому в підписі, — інакше назва способу
   й перелік марок зливаються в один довгий рядок, і вибирати доводиться
   читанням, а не поглядом. */
.sr-option__note {
  display: block;
  margin-top: 2px;
  font-size: var(--sr-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sr-grey-2);
}

.commerce-checkout-flow .form-type-radio:has(input:checked) .sr-option__icon {
  color: var(--sr-red);
}

/* Згода з умовами. Рамка й підкладка навмисно: це остання дія перед
   оплатою, і вона має читатись як окремий крок, а не як ще одне поле
   в довгій формі — інакше галочку ставлять не дивлячись. */
.sr-checkout__terms {
  padding: var(--sr-space-4);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
}

.sr-checkout__terms .form-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-space-3);
  margin: 0 !important;
}

.sr-checkout__terms input[type="checkbox"] {
  flex: none;
  margin: 2px 0 0;
}

/* **Пастка Olivero: підпис прапорця — це флекс** (`.form-item__label.option`
   з `gap: 12px`). Через це кожне посилання всередині ставало окремою
   колонкою: «Я погоджуюсь із», «договором оферти», «і», «політикою
   конфіденційності» розʼїжджались по рядку з дірками по 12px, а слова
   ламались переносом посеред себе — «погоджу-юсь».

   Підпис згоди — це речення, а не набір елементів, тому флекс тут треба
   гасити явно. `!important` не від ліні: тема задає `display` власним
   правилом тієї ж ваги, і без нього перемагає порядок файлів. */
.sr-checkout__terms label.form-item__label {
  display: block !important;
  gap: 0;
  /* Перенос посеред слова в тексті згоди читається як зламана верстка. */
  hyphens: manual;
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  font-weight: 400;
  line-height: 1.5;
}

.sr-checkout__terms label a {
  display: inline;
  color: var(--sr-red);
  text-decoration: underline;
}

/* Позначка обовʼязковості.

   **Пастка: це не текстова зірочка, а фонове зображення.** Olivero малює її
   через `background-image` з data-URI, де колір уже вшитий у сам SVG —
   синій. Тому `color` на псевдоелементі не робить нічого: властивість
   застосовується, значення в інспекторі правильне, а на екрані знак
   лишається синім. Перефарбувати можна тільки замінивши сам знак. */
.sr-checkout__terms .form-required::after {
  content: "*";
  width: auto;
  height: auto;
  margin-inline-start: 2px;
  background: none;
  color: var(--sr-red);
  font-size: var(--sr-text-base);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* Контакти щільніше: підписи дрібні, поля поруч. */
.sr-checkout__group .form-item {
  margin-bottom: var(--sr-space-3);
}

.sr-checkout__title {
  font-size: var(--sr-text-base);
  padding-bottom: var(--sr-space-2);
  margin-bottom: var(--sr-space-3);
}


/* ---------- підсумок замовлення збоку ---------- */

/*
 * Колонка підсумку вузька (232px). У таблиці назва товару затискалась
 * між кількістю й ціною і лягала на шість рядків, тому рядок
 * розкладаємо: зверху фото з повною назвою, знизу кількість і сума.
 */
.checkout-pane-order-summary .views-table,
.checkout-pane-order-summary .views-table tbody,
.checkout-pane-order-summary .views-table tr,
.checkout-pane-order-summary .views-table td {
  display: block;
  width: auto;
  border: 0;
}

.checkout-pane-order-summary .views-table tr {
  padding-bottom: var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-line);
}

.checkout-pane-order-summary .views-table tr:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.checkout-pane-order-summary .views-table td {
  padding: 0;
}

/* Кількість і ціна — одним рядком під назвою. */
.checkout-pane-order-summary .views-table td:not(:has(.field--name-product-id)) {
  display: inline-block;
  margin-top: var(--sr-space-2);
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
}

.checkout-pane-order-summary .views-table td:last-child {
  float: inline-end;
  color: var(--sr-black);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ---------- керований підсумок замовлення ---------- */

/* Заголовок підсумку малює сам layout оформлення (h3 у бічній колонці) —
   власного титулу в панелі немає, тож дубля не виникає. Кегль — як у
   заголовків розділів сторінки, щоб колонка читалась рівновагою. */
.commerce-checkout-flow .layout-region-checkout-secondary > h3 {
  margin: 0 0 var(--sr-space-4);
  color: var(--sr-black);
  font-family: var(--sr-font);
  font-size: var(--sr-text-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Сайдбар липне на десктопі: форма довга, і сума з головною дією мають
   лишатись в полі зору, поки покупець гортає поля. */
@media (min-width: 900px) {
  .commerce-checkout-flow .layout-region-checkout-secondary {
    position: sticky;
    top: var(--sr-space-4);
    align-self: start;
  }
}

.sr-summary__item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "thumb name name"
    "qty   qty  price";
  align-items: center;
  gap: var(--sr-space-2) var(--sr-space-3);
  padding-bottom: var(--sr-space-3);
  margin-bottom: var(--sr-space-3);
  border-bottom: 1px solid var(--sr-line);
  position: relative;
}

.sr-summary__item:last-of-type {
  border-bottom: 0;
}

/* Заголовок рядка — фото й назва разом, тому обидва в одній комірці. */
.sr-summary__item > div:first-child {
  grid-area: thumb;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  /* Проміжок лише між колонками: підпис складу переноситься на власну лінію,
     і спільний `gap` розсунув би рядок по висоті. */
  column-gap: var(--sr-space-3);
  row-gap: 0;
  flex-wrap: wrap;
  padding-inline-end: 26px;
}

.sr-summary__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  overflow: hidden;
}

.sr-summary__thumb img {
  max-width: 100%;
  height: auto;
}

/* Назва й підпис складу — однією колонкою праворуч від мініатюри. */
.sr-summary__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-summary__name {
  min-width: 0;
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  line-height: 1.35;
  text-decoration: none;
}

.sr-summary__name:hover {
  color: var(--sr-red);
}

.sr-summary__item .form-item {
  grid-area: qty;
  margin: 0;
}

.sr-summary__price {
  grid-area: price;
  color: var(--sr-black);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Кошик прибирання — у куті рядка, щоб не з'їдати ширину. */
.commerce-checkout-flow .sr-summary__remove {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--sr-line);
  border-radius: 50%;
  background: transparent;
  color: var(--sr-grey-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.commerce-checkout-flow .sr-summary__remove:hover {
  border-color: var(--sr-red);
  background: transparent;
  color: var(--sr-red);
}

/* Доставка над «Всього»: другорядний рядок, не змагається з сумою. */
.sr-summary__delivery {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sr-space-3);
  margin-top: var(--sr-space-2);
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
}

.sr-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sr-space-3);
  padding-top: var(--sr-space-3);
  border-top: 1px solid var(--sr-line);
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
}

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

/* Степер у підсумку компактніший за каталожний. */
.sr-summary .sr-qty {
  width: max-content;
}

.sr-summary .sr-qty__btn {
  width: 28px;
  height: 28px;
}

.sr-summary .sr-qty input[type="number"] {
  width: 40px;
  height: 28px;
  min-height: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Головна дія оформлення — поруч із сумою в сайдбарі, а не в лівому нижньому
   куті форми. Чорна пігулка на всю ширину колонки: рішення «оформити»
   приймають, дивлячись на «Всього». Кнопка — type=button, справжню кнопку
   кроку натискає скрипт, тож семантика форми не ламається. */
.sr-summary__cta {
  width: 100%;
  height: var(--sr-control-h);
  margin-top: var(--sr-space-4);
  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-base);
  font-weight: 600;
  cursor: pointer;
}

.sr-summary__cta:hover {
  background: var(--sr-red);
}

/* ================================================================== */
/* Вхід і реєстрація                                                  */
/* ================================================================== */

.user-login-form,
.user-register-form,
.user-pass,
.sr-verify {
  max-width: 420px;
  margin: 0 auto var(--sr-space-12);
  padding: var(--sr-space-8);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.user-login-form .form-item,
.user-register-form .form-item,
.user-pass .form-item,
.sr-verify .form-item {
  margin-bottom: var(--sr-space-4);
}

.user-login-form label,
.user-register-form label,
.user-pass label,
.sr-verify label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-1);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.user-login-form input[type="text"],
.user-login-form input[type="password"],
.user-login-form input[type="email"],
.user-register-form input[type="text"],
.user-register-form input[type="password"],
.user-register-form input[type="email"],
.user-pass input[type="text"],
.sr-verify input[type="text"],
.user-pass input[type="email"],
.sr-verify input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  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-base);
}

.user-login-form input:focus,
.user-register-form input:focus,
.user-pass input:focus,
.sr-verify input:focus {
  outline: 2px solid var(--sr-black);
  outline-offset: 1px;
}

.user-login-form .description,
.user-register-form .description,
.user-pass .description,
.sr-verify .description {
  margin-top: var(--sr-space-1);
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  line-height: 1.4;
}

.user-login-form .form-actions,
.user-register-form .form-actions,
.user-pass .form-actions,
.sr-verify .form-actions {
  margin-top: var(--sr-space-6);
}

.user-login-form input[type="submit"],
.user-register-form input[type="submit"],
.user-pass input[type="submit"],
.sr-verify input[type="submit"] {
  width: 100%;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  border: 1px solid var(--sr-black);
  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;
  cursor: pointer;
}

.user-login-form input[type="submit"]:hover,
.user-register-form input[type="submit"]:hover,
.user-pass input[type="submit"]:hover,
.sr-verify input[type="submit"]:hover {
  border-color: var(--sr-red);
  background: var(--sr-red);
}

/* Посилання під формою: реєстрація, відновлення пароля. */
.sr-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sr-space-4);
  margin-top: var(--sr-space-4);
  font-size: var(--sr-text-sm);
}

.sr-auth-links a {
  color: var(--sr-grey-1);
  font-weight: 600;
  text-decoration: none;
}

.sr-auth-links a:hover {
  color: var(--sr-red);
}

/* Вхід через сторонні сервіси. */
.sr-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
  margin: var(--sr-space-6) 0;
  color: var(--sr-grey-2);
  font-size: var(--sr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-auth-divider::before,
.sr-auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--sr-line);
}

.sr-auth-social {
  display: grid;
  gap: var(--sr-space-2);
}

.sr-auth-social a,
.sr-auth-social button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sr-space-3);
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  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;
  text-decoration: none;
  cursor: pointer;
}

.sr-auth-social a:hover,
.sr-auth-social button:hover {
  border-color: var(--sr-ink);
}

.sr-auth-social svg {
  flex: none;
}

/* Реєстрація поштою стоїть у тому самому списку, що й Google, і різниться
   лише кольором значка — червоний конверт замість фірмових кольорів сервісу. */
.sr-auth-social__btn--email svg {
  color: var(--sr-red);
}

/* ================================================================== */
/* Підтвердження пошти                                                */
/* ================================================================== */

.sr-verify__intro {
  margin: 0 0 var(--sr-space-6);
  color: var(--sr-grey-1);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
}

/* Код читають із листа й переписують — тому великі цифри, широкий трекінг
   і вирівнювання по центру: так помітно, скільки символів уже введено. */
.sr-verify input[type="text"].sr-verify__code {
  height: 52px;
  min-height: 52px;
  font-size: var(--sr-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  /* Трекінг додає порожнечу праворуч від останньої цифри — компенсуємо,
     інакше рядок здається зсунутим уліво. */
  text-indent: 0.3em;
  text-align: center;
}

.sr-verify .form-actions {
  display: grid;
  gap: var(--sr-space-2);
}

/* «Надіслати ще раз» — дія другорядна, тож контурна кнопка. Селектор із
   атрибутом потрібен, щоб перебити спільне правило input[type="submit"]. */
.sr-verify input[type="submit"].sr-verify__resend {
  border-color: var(--sr-line);
  background: var(--sr-surface);
  color: var(--sr-grey-1);
}

.sr-verify input[type="submit"].sr-verify__resend:hover {
  border-color: var(--sr-ink);
  background: var(--sr-surface);
  color: var(--sr-ink);
}

/* ================================================================== */
/* Ціна зі знижкою                                                    */
/* ================================================================== */

/* Стара ціна дрібна й сіра, нова — більша за звичайну, поруч червона
   мітка з відсотком. Вигоду має бути видно з одного погляду, без
   вираховування. */
.catalog__price--sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sr-space-2);
}

.catalog__price-old {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-sm);
  font-weight: 500;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.catalog__price-new {
  color: var(--sr-black);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.catalog__price-off,
.pp__price-off {
  display: inline-block;
  padding: 2px var(--sr-space-2);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-red);
  color: var(--sr-surface);
  font-size: var(--sr-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pp__price-old {
  color: var(--sr-grey-2);
  font-size: var(--sr-text-base);
  font-weight: 500;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Смуга «зареєструйтесь — буде дешевше». Показуємо лише гостям, тому
   верстка не має конкурувати з кнопкою оформлення: контурна, не кольорова. */
.sr-discount-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-3);
  margin-bottom: var(--sr-space-6);
  padding: var(--sr-space-4) var(--sr-space-6);
  border: 1px solid var(--sr-line);
  border-inline-start: 3px solid var(--sr-red);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
  color: var(--sr-ink);
  font-size: var(--sr-text-sm);
  line-height: 1.5;
}

.sr-discount-note__strong {
  font-weight: 700;
}

.sr-discount-note a {
  color: var(--sr-red);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sr-discount-note a:hover {
  text-decoration: underline;
}

/* Автооновлення кошика: кнопку «Оновити кошик» ховаємо лише тоді, коли
   скрипт справді підхопив форму. Без JS вона лишається єдиним способом
   змінити кількість, тож прибирати її в розмітці не можна. */
.cart-form.is-auto .form-actions input[type="submit"]:not(.sr-cart-checkout),
.cart-form.is-auto .form-actions button:not(.sr-cart-checkout) {
  display: none;
}

/* Поки летить перерахунок — приглушуємо рядки й не даємо клацати далі. */
.cart-form.is-updating .views-table {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Кнопки сервісного центру. Живуть у загальних стилях, бо той самий вигляд
   потрібен і на сторінці сервісу, і на сторінці прайсу, а це різні
   бібліотеки — інакше на другій вони приїхали б без оформлення. */
.sr-service__cta {
  display: inline-flex;
  align-items: center;
  height: var(--sr-control-h);
  padding: 0 var(--sr-space-8);
  border: 1px solid var(--sr-black);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-black);
  color: var(--sr-surface);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.sr-service__cta:hover {
  border-color: var(--sr-red);
  background: var(--sr-red);
  color: var(--sr-surface);
}

.sr-service__cta--ghost {
  border-color: var(--sr-line);
  background: var(--sr-surface);
  color: var(--sr-ink);
}

.sr-service__cta--ghost:hover {
  border-color: var(--sr-red);
  background: var(--sr-surface);
  color: var(--sr-red);
}

/* Посилання всередині текстових сторінок. Ядро лишає їм браузерний синій
   із підкресленням — на сторінках «Про нас» і «Контакти» це виглядало
   чужим написом посеред нашої типографіки. */
.field--name-body a,
.node__content a {
  color: var(--sr-red);
  font-weight: 600;
  text-decoration: none;
}

.field--name-body a:hover,
.node__content a:hover {
  text-decoration: underline;
}

/*
 * Питання менеджеру — третя дія на сторінці.
 *
 * Контурна пігулка, а не голе посилання: у проєкті рівно три форми кнопок
 * (чорна, червона, контурна), і четвертої бути не має. Голий текст 13px до
 * того ж губився між залишком і характеристиками — його читали як частину
 * таблиці, а не як дію.
 *
 * Головна дія тут усе одно одна — чорна «Купити»; контурна поруч із нею
 * читається як «а якщо не певен».
 */
.pp__ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--sr-control-h);
  margin: var(--sr-space-3) 0 0;
  padding: 0 var(--sr-space-4);
  /*
   * Контурна форма з червоним, а не сірим обводом.
   *
   * Сіра губилась серед характеристик — її просто не помічали. Але й
   * суцільною червоною робити не можна: на десктопі вона стоїть просто під
   * чорною «Купити», і дві важкі кнопки поспіль розмивають головну дію.
   * Тому акцент дає колір, а не вага; заливка зʼявляється лише при
   * наведенні.
   */
  border: 1px solid var(--sr-red);
  border-radius: var(--sr-radius-pill);
  background: var(--sr-surface);
  color: var(--sr-red);
  font-family: var(--sr-font);
  font-size: var(--sr-text-base);
  font-weight: 600;
  cursor: pointer;
}

.pp__ask:hover {
  background: var(--sr-red);
  color: var(--sr-surface);
}

@media (max-width: 760px) {
  /* На телефоні кнопка на всю ширину: поруч із нею нічого немає, а
     вузька кнопка серед повноширинних блоків виглядає загубленою.
     Висота 44px — найменша ціль, у яку палець влучає без промаху. */
  .pp__ask {
    display: flex;
    width: 100%;
    height: 44px;
  }
}

/*
 * Позиція, якої немає на жодному складі.
 *
 * **Блок стоїть у кінці файла навмисно.** Спершу я поставив його поруч із
 * рештою правил картки — і мітка типу деталі лишилась червоною: правило
 * `.catalog__item .field--name-field-part-type` має ту саму специфічність і
 * лежить нижче, тобто виграє за порядком. Тут перебивати нема чого.
 *
 * Рішення замовника: така плитка йде без ціни й знебарвленою. Вона й так
 * падає в самий низ каталогу першим правилом сортування, але поки лежить
 * поруч із наявними — не має змагатися з ними поглядом.
 *
 * Знебарвлюємо фото, а не всю картку: назва й напис «Під замовлення»
 * мусять лишатись читними, а сірий текст на білому — це вже не приглушення,
 * а погана доступність.
 */
.catalog__item--out .catalog__media img {
  filter: grayscale(1);
  opacity: 0.65;
}

.catalog__item--out .catalog__title a {
  color: var(--sr-grey-1);
}

/* Бейдж якості й тип деталі — теж без кольору: червоний тип на сірій
   картці лишався б найяскравішим, що на ній є. */
.catalog__item--out .field--name-field-part-type,
.catalog__item--out .catalog__media .field--name-field-quality {
  color: var(--sr-grey-2);
  background: var(--sr-ground);
}

/* Повертається до кольору при наведенні: людина навела — отже цікавиться,
   і ховати від неї товар більше нема сенсу. */
.catalog__item--out:hover .catalog__media img {
  filter: none;
  opacity: 1;
}

/*
 * Пошук у фільтрі каталогу — той самий компонент, що в шапці.
 *
 * Свого тут лише розмір і те, що всередині немає круглої кнопки: подавати
 * фільтр є чим — поруч стоїть «Показати», і другий сабміт у тому самому
 * ряду читався б як два різні пошуки.
 *
 * `display: contents` на обгортці поля обовʼязковий: Views загортає віджет
 * у `.form-item` із власними полями, і сяйво, що малюється по краю
 * `.sr-search`, лягало б не на поле, а на цю обгортку.
 */
.sr-search--filter {
  /* База навмисно менша за бажану ширину: перенос у флексі вирішується за
     базами, а не за стиснутими розмірами, тож із базою 260 кнопка
     «Скинути» — вона зʼявляється лише при заданих фільтрах — не вміщалась
     і зривала ряд у два поверхи. Реальну ширину дає `flex-grow`, а
     `max-width` тримає стелю. */
  /* 200, а не 220: із шостим контролом («Склад») сума баз рівно дорівнювала
     ширині форми на 1280px, і ряд розривався від сотих долі пікселя. На
     широкому екрані ці двадцять пікселів нічого не міняють — там ширину
     все одно роздає `flex-grow` до стелі 360. */
  flex: 1 1 200px;
  /* Тема дає елементам ряду верхній відступ 9px, і пошук через нього стояв
     на чотири пікселі нижче за сусідні пігулки. */
  margin: 0;
  max-width: 360px;
}

.sr-search--filter .form-item {
  display: contents;
}

/*
 * Селектор довший, ніж хотілося б, і це вимушено з двох причин.
 *
 * По-перше, висоту полю задає `min-height: 40px` десь у темі, і разом із
 * падінгом обгортки під сяйво пошук ставав 44 проти 40 у сусідніх пігулок —
 * ряд помітно збивався.
 *
 * По-друге, `.view-catalog` тут **не предок форми**: Views кладе її в
 * `div.catalog` усередині `.views-element-container`, а `.view-catalog`
 * лежить деінде на сторінці. Правило з ним просто не спрацьовувало — і
 * мовчки, бо селектор синтаксично правильний.
 */
body .views-exposed-form .sr-search--filter .sr-search__field {
  /* 36 + 2 + 2 = висота решти контролів ряду. */
  height: 36px;
  min-height: 36px;
  padding-inline: 36px 14px;
  font-size: var(--sr-text-sm);
}

@media (max-width: 900px) {
  /* У нижній панелі поле на всю ширину, як і решта контролів. */
  .sr-search--filter {
    max-width: none;
    width: 100%;
    margin-bottom: var(--sr-space-3);
  }

  body .views-exposed-form .sr-search--filter .sr-search__field {
    height: 46px;
    min-height: 46px;
    /* 16px — інакше iOS наближає сторінку при фокусі. */
    font-size: 16px;
  }
}

/* ================================================================== */
/* Профіль покупця                                                    */
/* ================================================================== */

/*
 * Форма профілю — це та сама картка, що вхід і реєстрація, тільки ширша:
 * полів тут більше, і в 420px вони стали б стовпчиком заввишки з екран.
 * Ядро малює її голою: сині підкреслені посилання, синя рамка кнопки
 * вилучення фото, службові блоки впереміш із власними полями.
 */
.sr-profile {
  max-width: 640px;
  margin: 0 auto var(--sr-space-12);
  padding: var(--sr-space-8);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

/* Заголовок частини. Перший не має верхнього відступу — під ним одразу
   починається картка, і зайве повітря читалось би як порожній блок. */
.sr-profile__title {
  margin: var(--sr-space-8) 0 var(--sr-space-4);
  padding-bottom: var(--sr-space-2);
  border-bottom: 1px solid var(--sr-line);
  color: var(--sr-ink);
  font-family: var(--sr-font);
  font-size: var(--sr-text-xl);
  font-weight: 700;
  line-height: 1.2;
}

.sr-profile__title:first-child {
  margin-top: 0;
}

/*
 * Порядок частин задається тут, а не вагами форми.
 *
 * Ваги в масиві форми стоять правильні — це перевірено записом у журнал, —
 * але до розмітки вони не доходять: щось у ланцюжку побудови форми
 * користувача розкладає дітей по-своєму й на `#weight` більше не
 * оглядається. Витрачати ще годину на пошук того місця дорожче, ніж
 * поставити порядок там, де він і видно; CSS-порядок працює однаково в усіх
 * браузерах уже десять років.
 *
 * Прив'язка йде до класів полів, а не до їхнього номера в розмітці: додасться
 * нове поле — воно стане в кінець, а не поламає всю розкладку.
 */
.sr-profile {
  display: flex;
  flex-direction: column;
}

.sr-profile > * { order: 90; }
.sr-profile > .sr-profile__title--person { order: 1; }
.sr-profile > .field--name-field-first-name { order: 2; }
.sr-profile > .field--name-field-last-name { order: 3; }
.sr-profile > .field--name-field-phone { order: 4; }
.sr-profile > .field--name-field-company { order: 5; }
.sr-profile > .field--name-user-picture { order: 6; }
.sr-profile > .sr-profile__title--delivery { order: 10; }
.sr-profile > .field--name-field-delivery-method { order: 11; }
.sr-profile > .field--name-field-delivery-address { order: 12; }
.sr-profile > .sr-profile__title--legal { order: 14; }
.sr-profile > .field--name-field-legal-form { order: 15; }
.sr-profile > .field--name-field-legal-name { order: 16; }
.sr-profile > .field--name-field-tax-code { order: 17; }
.sr-profile > .field--name-field-legal-address { order: 18; }
.sr-profile > .sr-profile__title--login { order: 20; }
.sr-profile > [data-drupal-selector="edit-account"] { order: 21; }
.sr-profile > details { order: 30; }
.sr-profile > .form-actions { order: 99; }

.sr-profile .form-item {
  margin-bottom: var(--sr-space-4);
}

.sr-profile label {
  display: block;
  margin-bottom: var(--sr-space-1);
  color: var(--sr-grey-1);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 500;
}

.sr-profile input[type="text"],
.sr-profile input[type="tel"],
.sr-profile input[type="email"],
.sr-profile input[type="password"],
.sr-profile select {
  box-sizing: border-box;
  width: 100%;
  height: var(--sr-control-h);
  min-height: var(--sr-control-h);
  padding: 0 var(--sr-space-4);
  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-base);
}

.sr-profile input:focus,
.sr-profile select:focus {
  outline: 2px solid var(--sr-black);
  outline-offset: 1px;
}

.sr-profile .description {
  margin-top: var(--sr-space-1);
  color: var(--sr-grey-2);
  font-family: var(--sr-font);
  font-size: var(--sr-text-xs);
  line-height: 1.4;
}

/* Блок акаунта ядро загортає в details із власним оформленням — тут він
   просто продовження форми, бо заголовок частини вже стоїть над ним. */
.sr-profile details,
.sr-profile fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.sr-profile details > summary,
.sr-profile fieldset > legend {
  margin-bottom: var(--sr-space-3);
  color: var(--sr-grey-1);
  font-family: var(--sr-font);
  font-size: var(--sr-text-sm);
  font-weight: 600;
  list-style: none;
}

/*
 * Фото. Ядро віддає посилання на файл, кнопку «Вилучити» й мініатюру
 * окремими рядками — виходить три різні речі одна під одною, і жодна не
 * схожа на решту форми. Складаємо їх в один ряд: знімок ліворуч, дія
 * праворуч.
 */
.sr-profile .field--name-user-picture .image-widget {
  display: flex;
  align-items: center;
  gap: var(--sr-space-4);
  flex-wrap: wrap;
}

.sr-profile .field--name-user-picture .image-widget-data {
  flex: 1 1 240px;
  min-width: 0;
}

.sr-profile .field--name-user-picture img {
  width: 72px;
  height: 72px;
  border: 1px solid var(--sr-line);
  border-radius: 50%;
  object-fit: cover;
  background: var(--sr-ground);
}

/* Посилання на сам файл нічого не дає покупцеві: це технічна назва з
   довгим ідентифікатором Google. Лишається знімок і кнопка. */
.sr-profile .field--name-user-picture .file-link,
.sr-profile .field--name-user-picture .file-size {
  display: none;
}

.sr-profile input[type="submit"],
.sr-profile .button {
  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-profile .form-actions {
  margin-top: var(--sr-space-8);
  padding-top: var(--sr-space-6);
  border-top: 1px solid var(--sr-line);
}

/* Головна дія — чорна пігулка, як усюди на сайті. */
.sr-profile .form-actions input[type="submit"] {
  width: 100%;
  border-color: var(--sr-black);
  background: var(--sr-black);
  color: #fff;
  font-size: var(--sr-text-base);
}

.sr-profile .form-actions input[type="submit"]:hover {
  border-color: var(--sr-red);
  background: var(--sr-red);
}

@media (max-width: 760px) {
  .sr-profile {
    padding: var(--sr-space-6);
  }

  /* На телефоні поля мусять бути 16px, інакше Safari наближає сторінку
     при фокусі — те саме правило, що й для решти форм сайту. */
  .sr-profile input[type="text"],
  .sr-profile input[type="tel"],
  .sr-profile input[type="email"],
  .sr-profile input[type="password"],
  .sr-profile select {
    font-size: 16px;
  }
}

/* ==========================================================================
   Сторінка «Наша робота»

   Розмітка й відео тут стояли з самого переїзду, а стилів не було жодного —
   і це помітно не одразу: фотографії виводились у власний розмір і сторінка
   виглядала «просто довгою», а `<iframe>` без правил падав до типового
   браузерного **300×150 із рамкою**. Тобто відео на сторінці було, але
   читалось як порожня біла коробка, і жоден замовник його не впізнавав.
   ========================================================================== */

.sr-work {
  max-width: 860px;
}

/* Фото ремонту — головний вміст сторінки, тож на весь рядок і по порядку.
   Сітка, а не ряд: у частини робіт знімків вісім, і горизонтальна стрічка
   ховала б половину за краєм. */
.sr-work__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sr-gap);
  margin-bottom: var(--sr-space-6);
}

.sr-work__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-ground);
}

/*
 * Відео 16:9 через `aspect-ratio`, а не через відому пастку з падінгом
 * 56,25 %: пропорцію задає сам елемент, тож обгортка не потрібна, а без
 * обгортки нема чого й ламати при зміні шаблону.
 *
 * Ширину обмежуємо: ролик на всі 1330 px читається як фон сторінки, а не як
 * її вміст, і при цьому перебиває фотографії, заради яких сюди приходять.
 */
.sr-work__video {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-bottom: var(--sr-space-6);
  border: 0;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-black);
}

.sr-work__facts {
  padding-top: var(--sr-space-4);
  border-top: 1px solid var(--sr-line);
}

.sr-work__note {
  margin: 0;
  max-width: 72ch;
  font-size: var(--sr-text-sm);
  line-height: 1.7;
  color: var(--sr-grey-2);
}

.sr-work__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-space-4);
  margin-top: var(--sr-space-3);
}

/* Ті самі червоні посилання без підкреслення, що й у решті текстових
   сторінок: ядро лишає їх браузерним синім, і серед сірого тексту вони
   читаються чужими. */
.sr-work__link {
  font-size: var(--sr-text-sm);
  font-weight: 500;
  color: var(--sr-red);
  text-decoration: none;
}

.sr-work__link:hover {
  color: var(--sr-red-dark);
}

@media (max-width: 760px) {
  .sr-work__gallery {
    grid-template-columns: 1fr;
  }
}


/* Короткий ролик у довідковій статті.

   Shorts вертикальні (360×640), тож рамка 16:9 дала б чорні смуги на пів
   ширини. Обмежуємо саме ширину — 320px читається як телефон у тексті, а
   не як другий екран поверх статті. */
.sr-article__video {
  margin: var(--sr-space-6) 0;
}

.sr-article__video iframe {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  height: auto;
  border: 0;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-black);
}