/*
 * Override-стилі поверх експорту з Webflow (ridne.webflow.css).
 * Підключати ПІСЛЯ ridne.webflow.css — сюди йде все, що відрізняється
 * від дизайну, який ще стоїть на живому Webflow-сайті: пошук у хедері,
 * сегментований перемикач "Сайти | Шрифти" і дрібні правки з задачі 5
 * плану 02 (14px контроли на десктопі, відступи логотипа на мобільній).
 *
 * Файл експорту навмисно не займаємо — його простіше перезняти з Webflow
 * заново, якщо знадобиться, ніж розплутувати правки всередині нього.
 */

/* Ряд хедера: перемикач зліва, пошук по центру (широкий), "Запропонувати"
   справа. У самому експорті .navigation.is-small — це grid на 2 колонки,
   що не розрахований на третій (пошуковий) елемент.
   gap — фіксовані 64px (правка замовника, задача 6), а не в rem: решта
   значень gap у ridne.webflow.css теж фіксовані px, і замовник назвав
   саме пікселі, тому лишаємось однозначними, а не прив'язуємось до
   fluid-типографіки контейнера. */
.navigation.is-small {
  display: flex;
  align-items: center;
  gap: 64px;
  /* Відступи навколо рядка хедера (правка замовника, задача 6, п.2):
     16 зліва, 16 справа, 16 зверху. Знизу спеціально не займаємо —
     замовник назвав тільки три сторони, а знизу рядок і так впритул
     до .hero. */
  padding: 16px 16px 0;
  /* Задача 6h, п.5: замовник виміряв фактичний відступ навколо рядка як
     28px і попросив звести до 16px. Джерело — не сам рядок (padding вище
     й так уже 16px), а те, що .navigation.is-small лежить УСЕРЕДИНІ
     .product, а той має власний padding: 1.2rem зверху й (тепер, задача
     6h п.6) 16px з боків. Обидва відступи складаються з падінгом рядка:
     на десктопі 1440px 1.2rem ≈ 12px, і 12 + 16 = 28px — те саме число,
     що назвав замовник. Знизу .product-падінг не додається (рядок не
     останній елемент .product, там немає нижнього краю, що збігається).
     Компенсуємо padding .product рівно тим самим значенням через
     від'ємний margin на рядку — тоді лишається тільки власний 16px
     падінг рядка, і так на будь-якій ширині екрана:
     - margin-top: -1.2rem — той самий rem, що й .product padding-top,
       тому скасовує його точно на будь-якому брейкпоінті (обидва
       рахуються від того самого кореневого font-size, fluid чи 62.5%);
     - margin-left/right: -16px — .product тепер теж фіксовані 16px
       (задача 6h, п.6), тому скасовуємо тим самим фіксованим числом,
       без прив'язки до rem. */
  margin-top: -1.2rem;
  margin-left: -16px;
  margin-right: -16px;
  /* Через від'ємні margin-и рядок сідає рівно на верхні кути .product і
     СВОЇМ білим фоном їх перекриває. У webflow-css рядок має власний
     border-radius: 8px — тому візуально кути підложки виглядали як ~8-9px,
     хоча на .product стоїть 32px (Андрій виміряв 9 по скріншоту, і був
     правий: видимий кут малювала навігація, не підложка). Даємо верхнім
     кутам рядка той самий радіус, що в підложки. */
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

/* Перемикач "Сайти | Шрифти" — сегментований контрол у хедері замість
   двох окремих кнопок-беджів. Радіус 16px замість пігулки (правка
   замовника, задача 6). gap: 0 прибирає білу смугу між сегментами
   (задача 6, п.1) — без цього перебивається лише зовнішня рамка/радіус
   групи, а внутрішній .4rem-проміжок з базового .button-group лишається
   і читається як шов між "Сайти" і "Шрифти".
   Задача 6f: вигляд перевернутий на протилежний до макета (Figma, вузол
   2874:12629) — контейнер суцільний синій (#3548FE = var(--blue)), активний
   сегмент — біла/лавандова пігулка (#F5F6FF) всередині з синім текстом,
   неактивний — білий текст прямо на синьому, без власної підложки.
   padding: 2px — відступ контейнера навколо пігулки сегмента (px-[2px] у
   макеті); border більше не потрібен, бо тло контейнера й так суцільне. */
/* Поведінка рядка хедера при звуженні вікна (правка Андрія, 2026-08-16):
   стискатись має ТІЛЬКИ пошук. Перемикач і кнопка "Запропонувати" тримають
   свою ширину по вмісту на будь-якій ширині вікна (нижче — аж до мобільної
   межі, де рядок перебудовується). Без цього flex-shrink: 1 за
   замовчуванням стискав усі три елементи пропорційно — перемикач і кнопка
   "пливли". Відступи (gap: 64px) теж фіксовані. */
.navigation.is-small > .button-group {
  flex: none;
}

/* На вузькому десктопі (768—1023) відступи рядка хедера 64 → 32:
   перемикач-32-пошук-32-кнопка — пошуку лишається більше повітря
   (правка Андрія, 2026-08-16). Від 1024 повертаються 64. */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .navigation.is-small {
    gap: 32px;
  }
}

.navigation.is-small .button-group:first-child {
  background: var(--blue);
  border-radius: 16px;
  overflow: hidden;
  gap: 0;
  padding: 2px;
}

.navigation.is-small .button-group:first-child .badge-content,
.navigation.is-small .button-group:first-child .badge-content:hover {
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  color: #fff;
  gap: 4px;
}

.navigation.is-small .button-group:first-child .badge-content.is-current,
.navigation.is-small .button-group:first-child .badge-content.is-current:hover {
  background: #f5f6ff;
  border-radius: 14px;
  color: var(--blue);
}

/* Лічильники в перемикачі (задача 6f): маленька пігулка поруч із назвою
   сегмента, число — з бази (section_counts у ridne/catalog.py), не
   хардкод. Значення зняті з макета: радіус 6px, падінг 2px згори/знизу
   і 4px зліва/справа, шрифт числа 11px, line-height 1 (без додаткового
   міжрядкового інтервалу — "leading-none" у макеті). */
.switcher-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 11px;
  /* Жирніше за підпис сегмента (той 400) — щоб число читалось як окрема
     сутність, а не хвіст назви. Історія: 500 у часи, коли Mariupol був
     лише Regular, рендерився як 400 — тому доходили до 700 (факс-болд).
     Зі справжнім Medium (2026-08-17) чесна 500-ка і є той «+1 крок». */
  font-weight: 500;
  line-height: 1;
}

/* На активному (білому/лавандовому) сегменті — світло-лавандова пігулка
   (var(--blue-opacity-10) = #3548fe1a, той самий токен, що вже задає
   10%-синій фон інших елементів хедера) із синім числом. */
.badge-content.is-current .switcher-count {
  background: var(--blue-opacity-10);
  color: var(--blue);
}

/* На неактивному сегменті — напівпрозора біла пігулка (10% білого) з
   білим числом: власного blue-фону немає, підложка пігулки лічильника
   тримається на прозорості, а не на окремому кольорі. */
.badge-content:not(.is-current) .switcher-count {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Пошук у хедері: раніше жив усередині форми фільтрів (fs-cmsfilter) і
   не міг бути нікуди, крім неї, бо Finsweet тримає стан у DOM. Тепер
   стан живе в URL (ridne/web/filters.py), тож форма — звичайний GET,
   а лежати може де завгодно. */
/* Задача 6g, п.1: поле не має рости нескінченно разом із вікном. До
   1440px flex-shrink стискає поле, а padding хедера (16px, фіксовані,
   не rem) лишає відступи сталими — це вже так само працює й нижче.
   Проблема була тільки вище 1440px: flex: 1 віддавав полю ВЕСЬ вільний
   простір без обмеження. 860px — фактична ширина .header-search, зняли
   виміром у браузері на вікні 1440px (getBoundingClientRect().width =
   860.03, замір при поточних 64px gap і 16px падінгах ряду). flex-grow:
   0 (замість 1) більше не забирає вільний простір собі; margin: 0 auto
   на flex-елементі забирає його порівну зліва/справа замість цього —
   це і є "зростають відступи обабіч" із задачі. Нижче 1440px, коли
   вільного простору немає, flex-shrink: 1 і далі стискає поле так само,
   як робив flex: 1 — margin: auto тоді резолвиться в 0, поведінка не
   міняється. */
.header-search {
  flex: 0 1 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .8rem;
  /* 44px — однакова висота з перемикачем і кнопкою «Запропонувати».
     Перемикач має 44px через 2px падінгу навколо внутрішньої пігулки;
     пошук і кнопка раніше були 40px і візуально «просідали». */
  height: 44px;
  padding: 0 18px;
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  border-radius: 16px;
}

/* Кнопка "Запропонувати": теж 16px замість пігулки (задача 6). База
   .badge-content задає 4px, тут перебиваємо саме для цієї кнопки —
   клас is-icon.is-large більше ніде в розмітці не зустрічається.

   Задача 6, п.3: звичайний стан — синя заливка з білим текстом; ховер —
   те, що раніше було звичайним станом (світле тло #f5f6ff, синій текст,
   ледь помітна синя рамка) — тобто background/border-color/color з
   .badge-content.is-icon.is-large і .badge-content.is-icon.is-large:hover
   у ridne.webflow.css міняються місцями. */
.navigation.is-small .badge-content.is-icon.is-large {
  border-radius: 16px;
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
  /* Однакова висота з перемикачем і полем пошуку — усі три по 44px. */
  height: 44px;
  display: inline-flex;
  align-items: center;
  /* Проміжок текст-іконка був 1rem — при fluid-кореневому шрифті кнопка
     "дихала" на кілька px між ширинами вікна (157→164 на 1024→1920).
     Задача 6j: ширина кнопки фіксована — фіксуємо і gap (10px = значення
     на еталонних 1440). */
  gap: 10px;
}

.navigation.is-small .badge-content.is-icon.is-large:hover {
  background-color: #f5f6ff;
  border-color: #3548fe1a;
  color: var(--blue);
}

/* Іконка "Запропонувати" (star-vector.svg) — окремий SVG-файл із
   зашитим fill="#3548FE" (той самий синій, що й var(--blue)). Робимо її
   білою в звичайному стані через filter: brightness(0) invert(1) —
   спершу глушимо колір до чорного (brightness(0)), тоді інвертуємо
   в білий. На ховері просто знімаємо фільтр: під ним лишається
   первісний синій контур SVG, який і так точно збігається з
   var(--blue), тож не треба фарбувати іконку окремим кольором.
   Обрано filter, а не mask: іконка лежить у розмітці як звичайний
   <img>, і filter працює з ним напряму — mask-image дав би той самий
   результат, але вимагав би або ховати оригінальний <img> і малювати
   колір через background-color хазяїна маски, або переводити тег на
   div/background-image, тобто зайву переробку розмітки заради того
   самого ефекту. */
.navigation.is-small .badge-content.is-icon.is-large .icon-embed.is-propose {
  filter: brightness(0) invert(1);
  transition: filter .25s;
}

.navigation.is-small .badge-content.is-icon.is-large:hover .icon-embed.is-propose {
  filter: none;
}

.header-search .icon-embed.is-search {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--blue);
}

/* Фокус у полі пошуку: плейсхолдер «Пошук за назвою» пригасає до 0.1
   (правка Андрія, 2026-08-16), решта поведінки без змін. */
.header-search .input-form.is-search.is-icon::placeholder {
  transition: opacity .15s;
}

.header-search .input-form.is-search.is-icon:focus::placeholder {
  opacity: .1;
}

.header-search .input-form.is-search.is-icon {
  flex: 1;
  /* min-width: 0 — інакше input має intrinsic-мінімум і не дає полю
     стискатись до 768 (задача 6k: рядок хедера цілий аж до 768). */
  min-width: 0;
  height: auto;
  min-height: auto;
  padding: 0;
  background: none;
  border: none;
}

/* Контроли фільтрів і верхнього рядка: 14px на ВСІХ брейкпоінтах (задача
   6h, п.7). Раніше правило діяло тільки від 768px — мобільна лишалась на
   16px, це було окреме рішення Андрія (задача 5 плану 02). Тепер це
   рішення скасовується прямим текстом у задачі 6h: замовник хоче 14px
   і на мобільній теж, тому min-width-умову знімаємо, правило застосовне
   без брейкпоінтів.
   Додано .text-animation (підписи перемикача "Сайти"/"Шрифти" й кнопки
   "Запропонувати" — задача 6h прямо називає їх серед елементів на 14px).
   Заміряли: .text-animation у ridne.webflow.css вже 14px без медіа-умов,
   мобільного винятку для нього не було (лише .text-animation.small —
   окремий текст кнопки "Приєднатися" в банері збору, поза списком
   задачі 6h — на мобільній лишається 16px, і так і має бути). Додаємо
   .text-animation сюди не тому, що щось лагодимо, а щоб правило explicitly
   покривало те, що назвав замовник, а не залежало від збігу з чужим
   правилом в іншому файлі.
   Замінено фантомний .fs-dropdown_label-2 (такого класу немає в жодному
   шаблоні — мертвий селектор, залишок старої розмітки) на реальний
   .fs-radio_label-4-2 (підписи "Індустрія"/"Стиль"/"Колір"/"Більше" з
   _filters.html). Той теж уже 14px на всіх брейкпоінтах у
   ridne.webflow.css без винятків — та сама причина для заміни: правило
   мало описувати реальний клас із розмітки.
   .header-search .input-form.is-search.is-icon в цей список не входить:
   він і так 14px на кожному брейкпоінті в ridne.webflow.css (базове
   правило без медіа-умов) — окремого фіксу не потребує.
   .cfs-radio_field-4-2 узято разом з .is-filters-item (а не саме по
   собі): у ridne.webflow.css є мобільне правило
   ".cfs-radio_field-4-2.is-filters-item { font-size: 16px }" (@media
   max-width: 479px) — це 2 класи в селекторі, специфічність вища за наш
   голий однокласовий .cfs-radio_field-4-2, тож БЕЗ .is-filters-item наше
   правило програвало б на мобільній навіть після зняття media-умови
   (порядок каскаду специфічність не переважає). У розмітці
   .cfs-radio_field-4-2 завжди йде разом з .is-filters-item (усі п'ять
   місць у _filters.html), тому звуження нічого не губить.
   ВАЖЛИВО (задача 6h, зазначено окремим рядком у звіті): шрифт менший за
   16px у текстовому полі змушує iOS Safari зумити сторінку при фокусі.
   Це стосується .input-form.is-v2 (поле пропозиції сайту у футері) —
   відомий наслідок, замовник свідомо на нього йде. */
.input-form.is-v2,
.fs-radio_label-4-2,
.cfs-radio_field-4,
.cfs-radio_field-4-2.is-filters-item,
.download-button-style,
.form-submite,
.text-animation {
  font-size: 14px;
}

/* Головна біла підложка сторінки (лежить на синьому тлі .body). Радіус
   32px замість 12px з експорту (правка замовника, задача 6). */
.product {
  border-radius: 32px;
  /* Задача 6h, п.6: бічні відступи блоку фільтрів (і всього вмісту
     .product — блок фільтрів просто найпомітніший) — 14px -> 16px.
     У ridne.webflow.css .product padding-left/right: 1.4rem — при
     fluid-типографії контейнера це саме 14px на десктопі (1440px,
     кореневий font-size 10px). .filter-container і решта вмісту .product
     не мають власного бічного падінгу, тож саме це значення й задає
     фактичний відступ фільтрів від країв білої підложки. Міняємо на
     фіксовані 16px (не rem) — той самий підхід, що й для padding рядка
     хедера вище (задача 6, п.2): замовник називає пікселі, а не
     fluid-величину, тому лишаємось однозначними. padding-top (1.2rem) і
     padding-bottom (3rem) не займаємо — про них тут мови не було, і
     margin-top рядка хедера вище (задача 6h, п.5) досі скасовує саме
     1.2rem, а не якесь нове значення. */
  padding-left: 16px;
  padding-right: 16px;
}

/* Кнопка "Приєднатися" у верхній смузі збору (задача 6, п.7): фактичний
   поточний радіус — 4px (.badge-content базовий, ridne.webflow.css),
   подвоюємо до 8px. Звужено до .donation, бо .badge-content — спільний
   клас багатьох кнопок (сегменти перемикача, "Запропонувати", "База" у
   футері), радіус яких чіпати не треба. */
.donation .badge-content {
  border-radius: 8px;
}

/* Радіус блоків фільтрів — пігулки типу зліва (.filters-list) і дропдауни
   осей справа (.right-rilters) — 16px (задача 6, п.4). У самому
   ridne.webflow.css радіус цих груп "пливе" по брейкпоінтах (8px на
   десктопі, var(--radius-16) = 16px на планшеті, var(--radius-6) = 6px
   на мобільній) — тут задаємо фіксовані 16px без медіа-умов, тому
   правило однакової специфічності, але пізніше в каскаді, перебиває
   усі три стани одразу. */
.filters-list,
.right-rilters {
  border-radius: 16px;
}

/* Задача 6h, п.4: замовник хоче єдиний радіус 16px на УСІХ кутах обох
   груп фільтрів — той самий, що в перемикача "Сайти | Шрифти". Правило
   вище (.filters-list, .right-rilters) і first/last-child-правила нижче
   (задача 6g, п.3) заокруглюють лише зовнішні 4 кути самої групи — цього
   досить, поки всі пігулки й дропдауни всередині невидимі на тлі групи
   (однаковий #f5f6ff). Але щойно пігулка активна (синя) чи в ховері
   (рамка) — стає видно її ВЛАСНИЙ радіус, а базовий .cfs-radio_field-4-2
   в ridne.webflow.css — border-radius: 8px, менший і візуально
   неоднорідний з рештою 16px. Перебиваємо радіус усіх видимих елементів
   рядка (пігулок і drop-toggle) до тих самих 16px. :not(.is--in-drop)
   звужує це до самого рядка груп — пункти всередині випадних списків
   (.drop_list, той самий клас cfs-radio_field-4-2 + is--in-drop) не
   чіпаємо: там свій контейнер із радіусом 12px, 16px на кожному пункті
   виглядав би завеликим і не про це просив замовник ("обидві групи", не
   випадні списки). */
.filters-list .cfs-radio_field-4-2:not(.is--in-drop),
.right-rilters .cfs-radio_field-4-2:not(.is--in-drop) {
  border-radius: 16px;
}

/* Стрілки в дропдаунах фільтрів (задача 6, п.8): фактичний поточний
   розмір — 16×16 (chevron-down.svg сам 16×16, .icon-select у
   ridne.webflow.css задає лише width: 16px, height тягнеться за
   атрибутами img), тепер 12×12. */
.icon-select {
  width: 12px;
  height: 12px;
}

/* Пігулки типів і пункти дропдаунів фільтра — звичайні <a>, тож успадковують
   базове a { text-decoration: underline } з ridne.webflow.css. Прибираємо
   підкреслення для всього блоку фільтрів (задача 6). */
.filter-container a {
  text-decoration: none;
}

/* Фокус поля пошуку: свій стан замість дефолтної помаранчевої рамки
   браузера. Фокус НЕ прибираємо — тільки перефарбовуємо в брендовий
   синій, щоб не ламати доступність для клавіатурної навігації. */
.header-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-opacity-10);
}

.input-form.is-search.is-icon:focus {
  outline: none;
}

/* Індикатор живучості на картці каталогу: три стани, alive IS NULL —
   без крапки взагалі ("не перевіряли" це не "живий"). Кольори зняті
   з вузла Figma 2841:106829 (alive/dead ellipse fill). */
.alive-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex: none;
}

/* Крапка "падала" вниз відносно назви сайту (задача 6, п.5): .alive-dot —
   inline-block всередині тексту h3, тож вирівнювався по базовій лінії
   рядка, а не по центру символів. h3.is-name містить лише текстовий
   вузол + крапку, тож переводимо його на flex: висота рядка стає
   максимумом висот дочірніх боксів (тексту й крапки), і align-items:
   center центрує їх один відносно одного, а не відносно baseline. */
.heading-h3-style.is-large.is-name {
  display: flex;
  align-items: center;
}

.alive-dot.is-alive {
  background: #31DEC1;
}

.alive-dot.is-dead {
  background: #FF3859;
}

/* Іконка переходу за зовнішнім посиланням на картці (задача 6, п.6):
   фактичний поточний розмір у ridne.webflow.css — 18×19px (не 24×24, як
   здавалось замовнику на око), тепер рівно 16×16. */
.icon-embed.is-graph {
  width: 16px;
  height: 16px;
}

/* Кількість знайдених сайтів над сіткою каталогу. Задача 6f плану 02:
   замовник просить сховати рядок, поки не вирішено, куди його поставити
   в новому дизайні — лічильник повернеться пізніше. Ховаємо саме стилями
   (display: none), а не прибираємо з шаблону/розмітки: дані (page.total)
   лишаються в HTML, і тест, що перевіряє їх наявність у виданій сторінці,
   лишається зеленим. */
.result-count {
  display: none;
  color: var(--gray-v3, #8a8a8a);
  font-size: 1.4rem;
  margin: 1.2rem 0;
}

/* Хрестик скидання на активному значенні фільтра (пігулка/пункт
   дропдауна): пункт — звичайне посилання, що при повторному кліку
   знімає вибір (toggle_url), хрестик лише позначає це візуально. */
.reset-x {
  display: none;
  margin-left: .6rem;
}

.is--active-filter .reset-x {
  display: inline;
}

/* Блок фільтрів (задача 6d, межа виправлена в задачі 6g п.2): дві групи —
   пігулки типу зліва, дропдауни осей справа — мають бути компактними
   острівцями по краях, а не двома суцільними смугами. У ridne.webflow.css
   .filter-container — grid із grid-template-columns: 1fr 1fr, тому кожна
   група розтягується на рівно половину ширини незалежно від вмісту (grid
   justify-items за замовчуванням stretch). Переводимо на flex +
   space-between: кожна група хапає стільки місця, скільки треба вмісту,
   а решта йде в проміжок між ними.

   Задача 6g, п.2: межа була min-width: 992px — на 1px вужче за
   ridne.webflow.css'ний @media max-width: 991px, що стакає фільтри в
   один стовпець. Різниця в 1px не в цьому річ: збій був не на самій
   стику 991/992, а в тому, що весь webflow-брейкпоінт "max-width: 991px"
   насправді покриває діапазон 0-991px, тобто й планшет (768-991), і наше
   min-width: 992px не діставало туди — планшет отримував мобільний стек
   замість вужчого десктопу. Межа була 768px, нижче — комплект скидань,
   що прибирав мобільні наслідки webflow-брейкпоінту 991px у діапазоні
   768-991px.

   Задача 6i, п.1: 768px виявився зарано — обидві групи фільтрів фіксовані
   на 500px кожна (задача 6h), а між ними живий gap: 20px (успадкований
   від .filter-container, grid-column-gap/grid-row-gap: 20px з
   ridne.webflow.css — той самий проміжок лишається і в grid, і у flex,
   бо gap/column-gap/row-gap не grid-специфічні властивості). Разом
   потрібно 500 + 500 + 20 = 1020px чистої ширини контейнера фільтрів, а
   на 768px доступно ~723px (замір getBoundingClientRect().width у
   браузері) — групи не вміщаються, і "Більше" переносилось на другий
   рядок усередині .filters-list.
   Виміряно бісекцією реальних ширин вікна (не розрахунком): на 1068px
   групи ще стиснуті (499.58px кожна, gap тримається на мінімумі 20px),
   на 1069px обидві вже рівно 500px — перша ширина, де ніякого стиснення
   не лишається; звідси й межа 1070px тих часів.
   Задача 6j (2026-08-16): фіксовані 500px скасовано, групи діляться
   flex-ом порівну з gap: 32px — бар вміщається в один рядок уже на
   вьюпорті 1024. Нова межа: мобільна ≤1023, десктопна від 1024. */
/* Задача 6n (2026-08-16): проміжні фази фільтрів нижче 768 — не стрибати
   одразу в мобільний стек, а утилізувати простір:
   - фаза A (720+): два острівці поруч в один рядок;
   - фаза B (390—719.98): острівці один під одним, кожен ОДНИМ рядком
     (блок нижче перевертає контейнер у колонку);
   - нижче 390 — мобільний стек (рядок панелі вже не влазить: мінімум
     лівої 337.5px + рамки продукту 52px ≈ 390).
   Тому межа цього блока — 390, а не 768. */
@media screen and (min-width: 390px) {
  .filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Проміжок між лівою і правою групами — 32px (правка Андрія,
       2026-08-16; перебиває успадковані 20px з ridne.webflow.css). */
    gap: 32px;
  }

  /* .filters-list у ridne.webflow.css отримує flex-flow: wrap і
     is--new-варіант — ще й width: 100% (обидва з @media max-width:
     991px) — повертаємо однорядковий вигляд.
     Задача 6n: на ≤767 вебфлоу повторює wrap уже на СПЕЦИФІЧНІШОМУ
     селекторі (.filters-list.is-large.is-adaptive-list.is--new,
     чотири класи проти одного) — голого .filters-list тут замало,
     тому дублюємо nowrap на повній специфічності. */
  .filters-list,
  .filters-list.is-large.is-adaptive-list.is--new {
    flex-flow: row nowrap;
  }

  /* Вебфлоуський 991-блок дає .filters-list.is-large { min-width: 100% } —
     панель відмовляється стискатись і роздуває рядок (hScroll на 740).
     min-content — «не вужче за вміст»: пігулки (flex: none) плюс
     мінімум «Більше» (110px). */
  .filters-list.is-large,
  .filters-list.is-large.is-adaptive-list.is--new {
    min-width: min-content;
  }

  /* Корінь роздування панелей нижче 768: вебфлоуський ≤767-блок ставить
     випадайки дропів У ПОТІК (.drop-content-wrp { position: relative;
     width: 100% }) — і пункти списків із min-width: 233px починають
     розпирати min-content колонок (3×240 = 720 у правій, +240 у лівій).
     Повертаємо десктопну поведінку — абсолютне випадання поверх сторінки
     (декларації з базового правила ridne.webflow.css). */
  .drop-content-wrp {
    position: absolute;
    inset: 2.7em auto auto 0%;
    width: max-content;
  }

  /* Задача 6k (2026-08-16, уточнення 6j): на 1440+ обидві групи РІВНО
     500px (flex-basis без grow), нижче — стискаються, зберігаючи
     принцип: пігулки hug, "Більше" з'їдає решту й тримає мінімум
     (min-width на .drop.is--more нижче). Ліва зупиняється на своєму
     min-content автоматично (min-width: auto у flex) — тому їй навмисно
     НЕ ставимо min-width: 0. */
  .filters-list.is-large.is-adaptive-list.is--new {
    /* Правка Андрія 2026-08-17: стискатись ПЕРШОЮ має ліва — її «Більше»
       тримає повітря (flex: 1 1 0% всередині) аж до min-width: 110, тоді
       як праві тогли еліпсяться. shrink 3 проти 1 у правої: ліва віддає
       все повітря «Більше» і впирається у свій min-content, далі права.
       (Скасовує пріоритет задачі 6k, де права поступалась першою.) */
    flex: 0 3 500px;
  }

  /* Пігулка "Всі" лишається по вмісту (задача 6h, п.2 — замовник
     навмисно виключив саме її з "fill container"). Дропдаун "Більше"
     раніше теж сидів тут на width: auto (хвороба hug-content, через яку
     й ловилась задача 6h п.3 — текст і стрілка впритул, бо тоглу нема
     куди рости) — тепер він росте разом з трьома пігулками типів нижче. */
  .cfs-radio_field-4-2.is-filters-item.is-all {
    width: auto;
  }

  /* Задача 6j (2026-08-16, скасовує 6h п.2): усі пігулки лівої групи —
     "Всі" і три типи — hug content, по вмісту. Весь залишок ширини групи
     з'їдає ТІЛЬКИ дропдаун "Більше"; всередині його тогла текст прибитий
     до лівого краю, стрілка — до правого (space-between нижче). */
  .filters-list > .cfs-radio_field-4-2.is-filters-item {
    flex: none;
  }

  .filters-list > .drop.is--more {
    flex: 1 1 0%;
    /* Мінімум, нижче якого "Більше" не стискається: текст (~44) +
       стрілка 12 + падінги тогла 16×2 + повітря. Це і є "де є більше
       відступ і стрілка" з вимоги — коли ліва група впирається в цей
       мінімум, стискатись далі має права (у неї shrink: 2 нижче). */
    min-width: 110px;
  }

  .filters-list > .drop.is--more .drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* .right-rilters лишається grid для внутрішнього розкладу трьох
     дропдаунів осей, але клас is--4-col (Webflow-варіант на 4 колонки)
     звужуємо до трьох — рівно стільки дропдаунів і є (Індустрія/Стиль/
     Колір). Задача 6h, п.2: ширина групи фіксується на ті самі 500px, що
     й ліва, а колонки — repeat(3, 1fr) замість max-content: три
     дропдауни діляться шириною порівну ("fill container"), а не
     стискаються до вмісту найкоротшої назви. justify-content: flex-end
     більше не потрібен — 1fr-колонки й так вибирають усю ширину групи,
     вільного простору для вирівнювання не лишається. */
  .right-rilters,
  .right-rilters.is--4-col {
    /* Правка Андрія 2026-08-17 (скасовує 6k): права тепер поступається
       ДРУГОЮ — спершу ліва віддає повітря «Більше». Три дропдауни 1fr. */
    flex: 0 1 500px;
    width: auto;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Задача 6g, п.3: радіус контейнерів (.filters-list, .right-rilters,
     16px, вище) насправді не було видно — крайній елемент (пігулка чи
     тогл дропдауна, border-radius: 8px із ridne.webflow.css) сидить
     впритул до краю контейнера (без падінгу з цього боку) і повністю
     перекриває його кут своїм, меншим. У ряду це малює лівий/правий
     контур в 8px замість 16px контейнера — саме тому "виглядає меншим".
     overflow: hidden на контейнері не підходить — усередині лежать
     абсолютно позиційовані дропдауни (.drop-content-wrp), він би їх
     обрізав. Замість цього заокруглюємо зовнішні кути тільки першого й
     останнього елемента рядка під контейнерний радіус — 16px, той
     самий, що зняли з перемикача (.navigation.is-small
     .button-group:first-child, теж 16px). */
  .filters-list > :first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }

  .filters-list > :last-child,
  .filters-list > :last-child > .drop-toggle {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .right-rilters > :first-child > .drop-toggle {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }

  .right-rilters > :last-child > .drop-toggle {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

/* Фаза B (задача 6n): 390—719.98 — обидва острівці на всю ширину, один
   під одним, кожен лишається одним рядком (правила груп із блока вище
   діють — пігулки hug, «Більше» добирає, три дропдауни 1fr). */
@media screen and (min-width: 390px) and (max-width: 719.98px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .filters-list.is-large.is-adaptive-list.is--new,
  .right-rilters,
  .right-rilters.is--4-col {
    flex-basis: auto;
    width: 100%;
  }
}

/* Мобільна логіка розкладки (задача 6g, п.2): межа була max-width: 479px,
   що лишало діапазон 480-767px "нічийним" — не мобільна поведінка нижче
   (пошук ще в рядку хедера, тисне сусідів), і не десктопна (весь
   webflow-стек фільтрів @media max-width: 991px там ще діє, задача 6g
   п.2 вище). Межа була 767px, той самий орієнтир, що й у десктопного
   min-width: 768px вище: пошук переїжджав під перемикач окремим рядком.

   Задача 6i, п.1: межа піднімалась до 1069px; задача 6j опустила її до
   1023px (десктопна від 1024px — див. обґрунтування вище). Це
   ОДНА спільна межа "мобільна/десктопна" для всієї сторінки, не лише
   для блоку фільтрів: замовник просив перемикатись на мобільну
   розкладку в момент, коли нижній бар (фільтри) перестає влазити в
   один рядок, а тримати рядок хедера в десктопному вигляді (пошук
   поруч із перемикачем) при мобільному стеку фільтрів дало б
   неоднорідну проміжну розкладку — тому весь набір мобільних правил
   нижче (перенос пошуку, відступи логотипа, кути фільтрів) підняли на
   ту саму межу. */
@media screen and (max-width: 767.98px) {
  .navigation.is-small {
    flex-wrap: wrap;
    /* Задача 6k: пошук ПІД рядком перемикач—кнопка, відступ між рядками
       24px (гап колонок лишається 64 — він же тримає перемикач і кнопку
       по краях через margin: auto нижче не потрібен: перший рядок — два
       flex-елементи з grow-простором між ними). */
    row-gap: 24px;
    column-gap: 64px;
    justify-content: space-between;
  }

  .header-search {
    order: 3;
    flex-basis: 100%;
  }

  /* Відступи навколо логотипа на мобільній: 60px -> 78px. */
  .hero.is-small {
    padding-top: 78px;
    padding-bottom: 78px;
  }
}

/* Кути острівців у повному мобільному стеку (нижче 390 — задача 6n;
   раніше цей блок жив на ≤767.98, але тепер 390—719.98 — фаза B, де
   панелі лишаються рядами і кути в них лівий/правий з блока вище). */
@media screen and (max-width: 389.98px) {
  /* Задача 6g, п.3 (мобільна половина): на цій ширині .filter-container
     стає одноколонковим стеком, тож "перший/останній елемент рядка"
     вище не працює — рядок тут один-єдиний елемент на рядок. Замість
     лівого/правого кута заокруглюємо верхній/нижній: перший елемент
     .filters-list ("Всі", сам на всю ширину рядка) — верхні кути
     контейнера, останній (пігулка або дропдаун "Більше", теж на всю
     ширину) — нижні. Так само для .right-rilters: Індустрія — верхні
     кути, Колір — нижні.
     Стек сам по собі — з ridne.webflow.css (@media max-width: 991px)
     на діапазоні 0-991px, і з бридж-блоку нижче (задача 6i, п.1) на
     992-1023px, де межа піднялась вище колишнього webflow-порогу 991px
     і рідного стек-правила там уже нема. */
  .filters-list > :first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .filters-list > :last-child,
  .filters-list > :last-child > .drop-toggle {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .right-rilters > :first-child > .drop-toggle {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .right-rilters > :last-child > .drop-toggle {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}


/* Задача 6g, п.4: кружечок кольору в дропдауні осі "color" — перед
   назвою значення. Малюється лише якщо є відповідність у
   ridne.catalog.COLOR_SWATCHES (за слагом; шаблон просто не вставляє
   span, коли color_swatch() повернув None — пункт лишається робочим).
   Рамка — завжди, не лише для білого/світлого: так простіше (не треба
   тягнути в шаблон другий прапорець "потрібна рамка"), і на кольорових
   кружечках ледь помітна рамка не заважає. */
.color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
  border: 1px solid #02010026;
}

/* Задача 6g, п.5: дропдауни осей Індустрія/Стиль/Колір (.right-rilters
   .drop) розкриваються вправо (ridne.webflow.css: .drop-content-wrp має
   inset: 2.7em auto auto 0% — тобто "приліплений" лівим краєм, росте
   праворуч) і для двох правих із трьох вилазять за правий край вікна.
   Перевертаємо: приліплюємо праворуч (right: 0%, left: auto), список
   росте ліворуч і завжди лишається в межах свого дропдауна — а отже, і
   в межах .right-rilters, який сам ніколи не виходить за viewport
   (.container-medium має свій максимальний відступ від країв).
   Дропдаун "Більше" зліва (.filters-list .drop-content-wrp) не чіпаємо
   — він росте праворуч у вільний простір і туди й вміщається. */
.right-rilters .drop-content-wrp {
  right: 0%;
  left: auto;
}

/* Задача 6h, п.1: кастомний повзунок прокрутки для списків фільтрів, що
   скролляться (наприклад "Індустрія" — 18 значень). Фактично скроллиться
   .drop_list (внутрішній контейнер пунктів, max-height: 260px,
   overflow-y: auto в ridne.webflow.css) — .drop-content-wrp зверху теж
   формально overflow-y: auto й max-height: 260px, але його висота керується
   grid-template-rows: 0fr -> 1fr (анімація розкриття), тому реального
   скролу на ньому не буває; стилізуємо обидва про всяк випадок, це не
   шкодить.
   Товщина 5px (замовник дав діапазон 4-6px, середина), доріжка прозора
   (невидима), кінці заокруглені (border-radius: 999px — з запасом більший
   за половину товщини, щоб гарантовано вийшла капсула), без
   кнопок-стрілок (::-webkit-scrollbar-button вимкнені). Firefox — той
   самий синій на прозорому через scrollbar-color, товщина через
   scrollbar-width: thin (Firefox не дає задати довільний px, тільки
   auto/thin/none — thin найближче до 4-6px). */
.drop_list,
.drop-content-wrp {
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
  /* Горизонтального скролу в списках не буває по суті (пункти переносять
     або еліпсяться), але піксельні округлення викликали нижній скролбар
     (правка Андрія, 2026-08-17). */
  overflow-x: hidden;
}

.drop_list::-webkit-scrollbar,
.drop-content-wrp::-webkit-scrollbar {
  width: 5px;
}

.drop_list::-webkit-scrollbar-track,
.drop-content-wrp::-webkit-scrollbar-track {
  background: transparent;
}

.drop_list::-webkit-scrollbar-thumb,
.drop-content-wrp::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 999px;
}

.drop_list::-webkit-scrollbar-button,
.drop-content-wrp::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ============ Задача 6k: Портфоліо пірнає в "Більше" на вузьких ============
   Вимога: фільтри одним рядком до 768 включно. З чотирма пігулками
   (Всі+Лендінг+Магазин+Портфоліо) мінімум лівої групи ~440px, і разом із
   мінімумом правої + gap 32 рядок перестає влазити раніше, ніж на 768.
   Рішення Андрія: у вузькому діапазоні третя пігулка (Портфоліо) ховається
   з ряду і показується пунктом усередині "Більше". Обидва варіанти завжди
   в DOM (сервер про ширину не знає), перемикає CSS.
   Межа 900px — виміряна в браузері нижче, звірена на живій сторінці. */

/* Дубль-пункт у списку "Більше" схований скрізь, крім вузького діапазону. */
.drop_list .is-collapsible-item {
  display: none;
}

@media screen and (min-width: 720px) and (max-width: 899.98px),
       screen and (min-width: 390px) and (max-width: 499.98px) {
  .filters-list > .cfs-radio_field-4-2.is-collapsible {
    display: none;
  }

  .drop_list .is-collapsible-item {
    display: flex;
  }

  /* Якщо вибрано саме колапсибельне значення — на широких його підсвічує
     власна пігулка, а тут пігулки нема: підсвічуємо тогл "Більше" тими
     самими деклараціями, що дає .drop.is--selected (base.html, інлайн). */
  .drop.is--more.is--sel-col .drop-toggle {
    border-color: #3548fe;
    background-color: #3548fe;
    color: white;
  }

  .drop.is--more.is--sel-col .icon-select {
    display: none;
  }

  .drop.is--more.is--sel-col .icon-diselect {
    display: flex;
  }
}

/* ================= Задача 6m: сітка карток (2026-08-16) ==================
   В експорті радіус і типографіка карток у rem, а кореневий шрифт fluid
   (vw) — на 768 радіус ужимався до ~2px, а назва сайту до ~11px.
   Правки Андрія: текст 14px і радіус як на 1440 (4px) на ВСІХ ширинах;
   відступи сітки 8px; картки fill container зі збереженням пропорції
   зображення (1.546 — фактичне співвідношення 417.33×270, зняте на 1440;
   це ж пропорція телеграмних скрінів 1280×828, з яких зібрано каталог).
   Колонки: >800 три · 500—800 дві · <500 одна (межі з .98 — щілина
   дробових media-ширин при dpr 1.5, як і в решті брейкпоінтів). */
.cart.is-product,
.image-wrapper.is-product {
  border-radius: 4px;
}

.heading-h3-style.is-large.is-name {
  font-size: 14px;
}

.image-wrapper.is-product {
  width: 100%;
  height: auto;
  aspect-ratio: 1.546;
}

._3-col-grid.is-product-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media screen and (max-width: 799.98px) {
  ._3-col-grid.is-product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 499.98px) {
  ._3-col-grid.is-product-list {
    grid-template-columns: 1fr;
  }
}

/* ============ Задача 6o: стан обраного фільтра в тоглі (2026-08-16) =========
   Обране значення замінює назву осі в тоглі (сервер підставляє текст у
   _filters.html). Текст живе у фіксованій ширині — все, що не влазить,
   скорочується під «…»; іконки праворуч не стискаються. Хрестик
   (a.drop-reset) — посилання, що скидає вісь; drop() у base.html
   пропускає кліки по ньому. Для кольору в тоглі ЛИШЕ текст — кружечки
   тільки в пунктах відкритого списку (уточнення Андрія). */
.drop-toggle .fs-radio_label-4-2 {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-toggle .rel {
  flex: none;
}

a.drop-reset {
  display: flex;
  align-items: center;
}

/* Колапс-кейс «Більше»: два спани в тоглі, перемикає та сама медіа, що
   ховає пігулку Портфоліо (діапазони колапсу — див. задачу 6k вище).
   Поза колапсом показується more-label-default (звичайна логіка). */
.drop.is--more .more-label-collapsed {
  display: none;
}

@media screen and (min-width: 720px) and (max-width: 899.98px),
       screen and (min-width: 390px) and (max-width: 499.98px) {
  .drop.is--more.is--sel-col .more-label-default {
    display: none;
  }

  .drop.is--more.is--sel-col .more-label-collapsed {
    display: inline;
  }
}

/* ============ Задача 6p: смуга збору зверху (2026-08-16) ==================
   1) Рядок замість зайвого стовпчика: вебфлоуські медіа (≤991, ≤479)
      ставлять .donation { flex-flow: column } — банер ламався у два рядки
      навіть коли текст+кнопка влазили в один. row wrap: рядок, поки
      влазить, перенос — лише коли справді тісно.
   2) Лого ліворуч від тексту (banner_logo_svg у settings): білиться
      CSS-ом (fill на всі path — вихідний svg чорний), висотою з кнопку
      (align-self: stretch + height: 100%), відступ до тексту 8px. */
.donation {
  flex-flow: row wrap;
}

.banner-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.banner-logo {
  display: flex;
  align-self: stretch;
  align-items: center;
}

.banner-logo svg {
  /* Фіксована висота (правка Андрія, 2026-08-17): height: 100% від рядка
     смуги меншав разом із нею на вузьких екранах. 20px — підібрано на око
     (24 було з висоти кнопки, макетні 18 здались замалими). */
  height: 20px;
  width: auto;
}

.banner-logo svg path {
  fill: #fff;
}

/* ============ Задача 7 (план 02): «Показати ще» ==========================
   Кнопка — вигляд ховера «Запропонувати» (світле тло, синій текст, легка
   синя рамка), без іконки, текст по центру; на ховері — інверсія в синю
   заливку (дзеркально до «Запропонувати», чиє звичайне — синє). Дескриптор
   «Показано N із M проєктів» — 14px Mariupol, пригашений синій. */
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px 0 8px;
}

a.load-more_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 16px;
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  color: var(--blue);
  font-size: 14px;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
}

a.load-more_btn:hover {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.load-more_count {
  font-family: Mariupol, sans-serif;
  font-size: 14px;
  color: var(--blue);
  opacity: .64;
  margin: 0;
}

/* Стан завантаження «Показати ще» (правка Андрія): текст ховається, по
   центру кнопки крутиться зірка з «Запропонувати» (star-vector.svg —
   вона синя, на світлому тлі кнопки якраз). Ширину кнопки фіксує
   catalog.js перед перемиканням, щоб не стрибала. */
.load-more_spinner {
  display: none;
  width: 16px;
  height: 16px;
}

a.load-more_btn[aria-busy="true"] {
  pointer-events: none;
}

a.load-more_btn[aria-busy="true"] .load-more_label {
  display: none;
}

a.load-more_btn[aria-busy="true"] .load-more_spinner {
  display: block;
  animation: load-more-spin .9s linear infinite;
}

@keyframes load-more-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============ Задача 8b: дизайн сторінки шрифтів (2026-08-16) =============
   Правки Андрія: відступи сітки 8px як у каталозі сайтів; радіус кнопок
   «Завантажити» 16px як у фільтрів; рамка картки в статиці — той самий
   світло-сірий, що в сайтових карток (ховер-стан не чіпаємо). */
.grid-fonts {
  gap: 8px;
}

.download-button-style,
.download-button-style.is-v2 {
  border-radius: 16px;
}

.cart-font {
  border-color: rgba(229, 229, 229, .5);
}

/* Кнопки «Завантажити» — той самий стиль, що «Показати ще» (правка
   Андрія): світле тло, синій текст, легка синя рамка; ховер — інверсія
   в синю заливку з білим текстом. Розміри лишаються карткові. */
.download-button-style,
.download-button-style.is-v2 {
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  color: var(--blue);
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
}

.download-button-style:hover,
.download-button-style.is-v2:hover {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Тайп-тестер: редагований .text-demo без браузерної рамки фокуса, з
   синім кареткою і текстовим курсором — щоб було видно, що сюди можна
   ставити курсор і друкувати. */
.text-demo[contenteditable] {
  outline: none;
  cursor: text;
  caret-color: var(--blue);
}

/* Підказка тайп-тестера (задача 8d): пігулка в правому нижньому куті
   картки, з'являється на ховері, ховається при фокусі в тестері (роль
   виконано) і після першого редагування (клас is-touched вішає fonts.js).
   .cart-font отримує position: relative як якір. */
.cart-font {
  position: relative;
}

.type-tester-hint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  color: var(--blue);
  font-family: Mariupol, sans-serif;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.cart-font:hover .type-tester-hint {
  opacity: 1;
}

.cart-font:focus-within .type-tester-hint,
.cart-font.is-touched .type-tester-hint {
  opacity: 0;
}

/* ============ Задача 8e: фільтри шрифтів (2026-08-16) =====================
   Ліва група (гарнітура) — hug content: значень лише три, «Більше» не
   потрібне, тож і базис 500 сайтової групи (клас .is--new) сюди не
   застосовується — .is-fonts без нього. Права — два дропдауни (Тематика,
   Накреслення) замість трьох сайтових: перебиваємо сітку на 2 колонки.
   Пошук на /fonts прихований (base.html), кнопка «Запропонувати»
   відсувається вправо margin-ом — бо без пошуку між перемикачем і
   кнопкою нема кому розсунути рядок. */
.right-rilters.is--fonts,
.right-rilters.is--4-col.is--fonts {
  grid-template-columns: repeat(2, 1fr);
}

/* Правка Андрія 2026-08-17: на 768 стискалась ліва група гарнітур (аж до
   горизонтального скролу через min-width: min-content), хоча у правих
   двох дропів купа місця. Ліва в шрифтів компактна і без «Більше» —
   їй стискатись нема куди й нема чим: flex: none. Увесь дефіцит ширини
   забирає права (загальний flex: 0 1 500px діє). */
.filters-list.is-large.is-adaptive-list.is-fonts {
  flex: none;
}

.navigation.is-small.is--no-search .button-group.is-propose {
  margin-left: auto;
}

/* ============ Задача 9b: форма футера (2026-08-16) ========================
   Стиль поля — як у пошуку в хедері (світле тло, легка синя рамка,
   радіус 16, висота 44); кнопка «Відправити» вписана всередину поля як
   пігулка у світчері — відступ 2px (фактичне значення падінгу світчера),
   зовнішній радіус 16 → внутрішній 14. Стиль кнопки — «Запропонувати»:
   синя заливка з білим текстом, ховер — інверсія у світле з синім. */
.form-propose-send {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 2px;
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  border-radius: 16px;
}

.form-propose-send .input-form.is-v2 {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  background: transparent;
  border: none;
  font-size: 14px;
}

.form-propose-send .form-submite {
  flex: none;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  border-radius: 14px;
  border: none;
  background-color: var(--blue);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}

.form-propose-send .form-submite:hover {
  /* Світло-синій наш (10%-синій токен), не білий — біле тло кнопки
     зливалося б із самим полем форми. */
  background-color: var(--blue-opacity-10);
  color: var(--blue);
}

/* Повідомлення живої перевірки під формою футера (задача 9c):
   14px Mariupol; «уже є» — червоний як маркер мертвого сайту, з
   посиланням на пошук; «ще нема» — білий підбадьорливий. */
.propose-check {
  min-height: 20px;
  margin: 8px 0 0;
  font-family: Mariupol, sans-serif;
  font-size: 14px;
  text-align: center;
}

.propose-check.is-known {
  color: #ffd7dd;
}

.propose-check.is-known a {
  color: #fff;
  text-decoration: underline;
}

.propose-check.is-new {
  color: #fff;
  opacity: .85;
}

/* Порожній сабміт (замість браузерної бульбашки, 2026-08-17): той самий
   застережний рожевий, що в is-known, з легкою появою зверху вниз. */
.propose-check.is-empty {
  color: #ffd7dd;
  animation: propose-nudge .25s ease;
}

@keyframes propose-nudge {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Задача 03-4: результат fetch-сабміту форми. Успіх — та сама біла
   підбадьорлива плашка, що is-new (просто інший текст); мережева
   помилка — той самий застережний рожевий, що is-known/is-empty. */
.propose-check.is-sent {
  color: #fff;
  opacity: .85;
  animation: propose-nudge .25s ease;
}

.propose-check.is-error {
  color: #ffd7dd;
  animation: propose-nudge .25s ease;
}

/* Honeypot (задача 03-4): поле для людини не існує — прибране з екрану
   класичним "visually hidden" прийомом (не display:none: найпростіші
   боти, що просто перевіряють наявність поля в DOM, легко це пропускають;
   а clip+1px лишає поле технічно "видимим" для тупого автозаповнення). */
.propose-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* «На гору» в футері: у статиці білий (був синій на синьому — ледь
   читався), на ховері — синій. Правки Андрія, 2026-08-16. */
a.link-secials.is-3 {
  color: #fff;
}

a.link-secials.is-3:hover {
  color: var(--blue);
}

/* «Підтримати Рідне:» (колишня «База») довша за стару назву — пігулка
   не повинна ламати текст на два рядки. */
.badge-content.is-large.is-2 {
  white-space: nowrap;
  width: auto;
  /* Вебфлоуська мобільна гілка (≤479) тисне кнопку в max-width: 28vw —
     разом із nowrap текст обрізався («ідтримати Рідн»). Кнопка по вмісту. */
  max-width: none;
}

/* QR-код у футері: радіус фону 32 (правка Андрія; сам img має білу
   підложку, тому радіус ставимо на нього). */
img.qr-code {
  border-radius: 32px;
}

/* «Підтримати Рідне:» — загальний стиль другорядної кнопки (як
   «Завантажити» на картках шрифтів): світле тло, синій текст, легка
   рамка, радіус 16, ховер — інверсія в заливку з білим текстом.
   Заливка ховера — світліший синій #4d5eff, як фон кружечка «На гору»
   (правка Андрія, 2026-08-16). */
.badge-content.is-large.is-2 {
  background-color: #f5f6ff;
  border: 1px solid #3548fe1a;
  border-radius: 16px;
  color: var(--blue);
  transition: background-color .25s, color .25s, border-color .25s;
}

.badge-content.is-large.is-2:hover {
  background-color: #4d5eff;
  border-color: #4d5eff;
  color: #fff;
}

/* Групи футера з кнопкою «Підтримати Рідне:» — вебфлоуський grid із
   фіксованими колонками 108px (під колишні дві короткі кнопки) обрізав
   довший напис. Розпускаємо в flex по вмісту саме там, де ця кнопка. */
.button-groupe:has(> .badge-content.is-2) {
  display: flex;
  justify-content: flex-end;
}

/* Сегменти перемикача на мобільній (баг з айфона Андрія, 2026-08-16):
   вебфлоуський .badge-content.is-large { min-width: 100% } (≤479px) у
   гріді 1fr 1fr — Safari резолвить відсоток від ширини КОНТЕЙНЕРА, не
   колонки: перша колонка розтягувалась на весь світчер і «Шрифти»
   виїжджали за край екрана. Chrome трактує такий % як auto, тому в
   ньому не відтворювалось. min-width: 0 повертає колонкам рівність. */
@media screen and (max-width: 767.98px) {
  .navigation.is-small .button-group:first-child .badge-content {
    min-width: 0;
  }
}

/* «Індустрія» на мобільній відкривалась за екран (баг Андрія, 2026-08-16):
   правило 6g п.5 приліплює списки осей правим краєм (right: 0%), щоб на
   десктопі вони не вилазили за праву межу вікна. Але нижче 768 колонка
   «Індустрії» — крайня ліва і вузька, тож список (min-width: 240) майже
   цілком виїжджав за ЛІВИЙ край екрана й виглядав порожнім. Першому дропу
   групи повертаємо ліве кріплення — його список росте праворуч, де на
   вузьких екранах якраз і є місце. «Стиль» і «Колір» лишаються правими:
   для них зліва місця вдосталь, а справа — межа вікна. */
@media screen and (max-width: 767.98px) {
  .right-rilters > .drop:first-child .drop-content-wrp {
    left: 0%;
    right: auto;
  }
}

/* Той самий клас багів: «Більше» лівої групи росте праворуч (базове
   правило webflow) і нижче 768 вилазить за правий край екрана — його
   колонка стоїть у правій частині свого рядка. Перевертаємо на праве
   кріплення: список росте ліворуч, у бік «Всі/Лендінг/Магазин», де
   місце є на всіх мобільних фазах (390 і 320 перевірено виміром). */
@media screen and (max-width: 767.98px) {
  .filters-list .drop.is--more .drop-content-wrp {
    right: 0%;
    left: auto;
  }
}

/* ============ Редизайн шапки збору (макет 2923-12384, 2026-08-17) =========
   Верх сторінки тонується акцентом збору: градієнт від --banner-accent
   (100%) вгорі до прозорого на 436px — просвічує за смугою збору і за
   кутами білої картки, нижче лишається звичайний синій body. З двох
   варіантів макета (окремий прямокутник поверх / перефарбувати сам фон)
   обрано другий: градієнт НА самому фоні body «акцент → синій з переходом
   на 436px». Псевдоелемент-оверлей не годиться: позиційований шар малюється
   поверх непозиційованого потоку і тонував усю сторінку. Візуально варіанти
   тотожні (альфа-згасання акценту над синім = RGB-інтерполяція акцент→синій).
   Колір живе в одній CSS-змінній --banner-accent (settings.banner_color,
   інлайн у base.html; тут — фолбек на випадок вимкненої смуги). */
:root {
  --banner-accent: #ff6340;
}

body.body {
  background-image: linear-gradient(180deg, var(--banner-accent) 0,
                                    var(--blue) 436px);
  background-repeat: no-repeat;
}

/* Текст збору: 16/18 (був h3-розмір), відступи лого—текст—кнопка по 16. */
.donation {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.banner-lead {
  gap: 16px;
}

.donation .heading-h3-style {
  font-size: 16px;
  line-height: 18px;
  /* Medium (правка Андрія, 2026-08-17) — справжній, з Mariupol-Medium.woff2. */
  font-weight: 500;
}

/* Кнопка «Приєднатися» за спеком з макета (правки Андрія, 2026-08-17):
   14/14, -0.42px, медіум, без вебфлоуської обводки. Mariupol на сайті
   існує лише в Regular (400) — font-weight: 500 браузер «дожирнював»
   сам (faux bold), тому синтез вимкнено: рендериться справжній Regular,
   а якщо колись доллємо файл Mariupol Medium — 500 підхопиться
   автоматично. */
.donation .badge-content {
  color: var(--banner-accent);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.42px;
  font-weight: 500;
  font-synthesis: none;
  border: 0;
}

/* Ховер: вебфлоуський стан прибирав фон і кнопка «зникала» на акцентному
   градієнті. Замість нього — білий фон на 30%, текст білим
   (правки Андрія, 2026-08-18: спершу .7, підібрали .3). */
.donation .badge-content:hover {
  background-color: rgba(255, 255, 255, .3);
  color: #fff;
  border: 0;
}


/* ============ Шапка картки шрифту: обрізання довгих імен (2026-08-18) ====
   Довга назва шрифту чи автора переносила рядок шапки і кнопка
   «Завантажити» стрибала. Від 480px (нижче — мобільний layout з
   навмисним переносом, ridne.webflow.css ≤479) рядок не переноситься:
   назва й автор стискаються і обрізаються в «…», повне ім'я — у
   тултіпі (title у fonts.html). Лічильник накреслень і кнопка не
   стискаються. */
@media (min-width: 480px) {
  /* Грід-елемент за замовчуванням має min-width:auto і росте під
     min-content нерозривного рядка — без цього ланцюжка картка
     розтягалась замість обрізати ім'я. */
  .cart-font-wrapper, .cart-font, .cart-top_font { min-width: 0; }

  .cart-top_font { flex-wrap: nowrap; }

  .flex-left.is-font {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  /* Автор теж обрізається, але не зникає повністю: мінімум ~5 символів
     з «…», максимум — під половину ряду. */
  .flex-left.is-font > .description-font:last-child,
  .flex-left.is-font > a.description-font {
    flex: 0 1 auto;
    min-width: 56px;
    max-width: 45%;
  }

  /* Назву шрифту НЕ скорочуємо (правка Андрія 2026-08-18) — вона завжди
     повна; задовгу він тепер може перейменувати в адмінці. Обрізаються
     лише автори. */
  .flex-left.is-font > .description-font,
  .flex-left.is-font > a.description-font {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Назва, лічильник «N накреслень», роздільник і кнопка тримають розмір. */
  .heading-font,
  .flex-left.is-font > .flex-left,
  .flex-left.is-font > .span-divider,
  .cart-top_font > .hide-mobile { flex: none; }

  .heading-font { white-space: nowrap; }
}


/* ============ Лічильник обраного фільтра (2026-08-19) ===================
   Логіка Андрія: число показується ЛИШЕ біля обраного значення — на
   пігулці видимого типу і на тоглі дропдауна («Більше» з вибором,
   Індустрія/Стиль/Колір з вибором). «Всі» і незайманий «Більше» — без
   числа; всередині розкритого списку — теж без, там значення ще не
   обране, а лише пропонується.

   Вигляд — як лічильник НЕАКТИВНОЇ таби перемикача зверху
   (.badge-content:not(.is-current) .switcher-count): біле число на 10%
   білого. Підложка завжди синя, бо обране скрізь підсвічене синім. */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 4px від назви до числа: пігулки й тоглі — flex із власним
     column-gap 8px, тож інтервал задає він (нижче), а не маржина,
     інакше 8 і 4 складались би в 12. Плашка не стискається —
     обрізатись має назва, а не число. */
  flex: none;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* :has() бере лише ті пігулки й тоглі, де число справді є; у старих
   движках лишається штатний інтервал — м'яка деградація. */
.filters-list .cfs-radio_field-4-2.is-filters-item:has(> .filter-count),
.drop-toggle:has(> .filter-count) {
  grid-column-gap: 4px;
  column-gap: 4px;
}

/* ============ Кнопка багрепорту (2026-08-19) =============================
   Макет Андрія: 160×32, радіус 10, іконка-жук 16px + два рядки 12px
   Mariupol (верх 400, низ 500, -0.36px). Статик — синій #3548FE з білим,
   ховер — лавандовий #F5F6FF з синім. Фіксована справа знизу, з'являється
   після 400px скролу (клас is-visible вішає інлайн-скрипт base.html). */
.bug-report {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  width: 160px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  background: #3548FE;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease,
              background-color .15s ease, color .15s ease;
}

.bug-report.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.bug-report svg { flex: none; display: block; }

.bug-report-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: Mariupol, sans-serif;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: -0.36px;
  white-space: nowrap;
}

.bug-report-line1 { font-weight: 400; }
.bug-report-line2 { font-weight: 500; opacity: .55; }

.bug-report:hover {
  background: #F5F6FF;
  color: #3548FE;
}

@media (prefers-reduced-motion: reduce) {
  .bug-report { transition: none; transform: none; }
}

/* ============ Mariupol: woff2 + справжній Medium (2026-08-17) ============
   Файли від Андрія (Fonts/), перегнані ttf→woff2 (58 КБ → 17 КБ на
   накреслення — закриває борг «Mariupol їздить важким ttf»). Оголошення
   нижче вебфлоуського ttf-шного @font-face — при однакових family/weight
   виграє останнє, тож Regular тепер їде woff2-м, а weight 500 (кнопка
   «Приєднатися» та все майбутнє медіумне) — справжній Medium замість
   факс-болда. */
@font-face {
  font-family: Mariupol;
  src: url('../fonts/Mariupol-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mariupol;
  src: url('../fonts/Mariupol-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============ Sticky-фільтри при скролі (як на Webflow, 2026-08-17) ======
   Живий сайт клеїть .filter-container: sticky, top 20, z-index 100,
   фон прозорий (картки просвічують у проміжках між острівцями — так
   було й там). Кріпимо ЛИШЕ доки бар в один рядок — від 720px (фаза
   «два острівці поруч»); нижче фільтри стають стеком і липнути їм нема
   сенсу. Обгортка .product-list-block-v2 у сторінках накриває і сітку —
   бар ковзає вздовж неї. Пошук (рядок хедера) НЕ кріпиться — рішення
   Андрія «в новій редакції», вебфлоуське sticky на .navigation.is-small
   глушиться нижче. */
@media screen and (min-width: 720px) {
  .filter-container {
    position: sticky;
    top: 20px;
    z-index: 100;
  }
}

.navigation.is-small {
  position: static;
}