/* ============================================================
   home_new.css — preview at /home/new
   Sections:
   1. :root design tokens
   2. Page layout
   3. Hero heading
   4. Search module card
   5. Search tabs + tab
   6. Filters panel + filters row grid
   7. Filter select (closed + open + listbox)
   8. Toggle pill
   9. Button
   10. Badge
   11. Divider
   12. Accordion header
   13. Icon base
   ============================================================ */

/* === 1. Design tokens === */
:root {
  /* Colors.

     Ці десять — МОСТИ до брендових токенів, не власні значення.
     Порядок підключення такий, що home_new.css іде ПІСЛЯ
     static/new/css/<бренд>/tokens.css (styles.ftlh 28 проти 13/15), тож
     сирий hex тут мовчки перебивав обидва бренди третьою палітрою: фон
     головної був #f1ebe2, тобто ані INFR-івський, ані OTM-івський, а чипи
     OTM малювались бежевими замість майже чорних.
     Виправлено 02.09. Не повертати сюди літерали — місце для них
     у брендових tokens.css. */
  --color-bg-page:            var(--bg-page);
  --color-bg-surface-light:   var(--bg-surface-light);
  --color-bg-surface-overlay: rgba(11, 12, 12, 0.56);
  --color-bg-input:           var(--bg-input);
  /* УВАГА: --chip-bg, не --bg-chip. У прототипі це різні речі:
     --chip-bg  — звичайний чип і піл (OTM бежевий #DDD8D4);
     --bg-chip  — обраний стан, lock-label, info-tag (OTM майже чорний).
     Наш --color-bg-chip обслуговує обидві ролі, і провідною є перша,
     тому веде на --chip-bg. Помилковий міст на --bg-chip 02.09 зробив
     чипи OTM чорними. */
  --color-bg-chip:            var(--chip-bg);

  --color-accent-primary:     var(--accent-primary, #005f6e);
  --color-accent-pressed:     var(--accent-pressed, #024b57);

  --color-text-primary:          var(--text-default);
  --color-text-primary-inverted: var(--text-inverted);
  --color-text-placeholder:      var(--text-placeholder);
  --color-text-on-light:         var(--text-on-light);
  --color-text-muted:            var(--text-muted);

  --color-border-default: var(--border-default);
  --color-border-surface: var(--border-surface);
  --color-border-module:  var(--border-module);
  /* Затемнення під відкритим дропдауном — значення було зашите в правилі.
     Обводка чипів і піл переїхала в брендовий --chip-border (02.09):
     прототип тримає її різною на брендах, а #bec5c8 був спільним хардкодом. */
  --color-scrim:          rgba(0, 0, 0, 0.15);
  --hover-grey:  #EAEAEA;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  --header-px: 80px;
  --dropdown-item-padding-h: 14px;

  /* Вісь контенту storefront (ДС §9.0a, §11.6): ширина вмісту =
     min(100% − 84px, 1280px), тобто бічне поле ~42px на таблеті й десктопі.
     84 — власне число прототипу, не зі шкали §6 (ДС окремо позначає, що
     походження числа не задокументоване), тому тримаємо його токеном
     і ділимо навпіл у полі сторінки, а не пишемо 42 в правилі. */
  --content-inset: 84px;
  --content-max:   1280px;

  /* Повітря під головною CTA — прототипний --after-cta-space (40 + 16).
     Свого числа не має: це --space-3xl плюс --space-lg. */
  --after-cta-space: calc(var(--space-3xl) + var(--space-lg));

  /* Typography */
  --font-family-body: "Outfit", system-ui, -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;

  --font-body-s-size:        16px;
  --font-body-s-line:        18px;
  --font-body-s-weight:      400;
  --font-body-s-bold-weight: 700;

  --font-body-m-size:        18px;
  --font-body-m-line:        20px;
  --font-body-m-weight:      500;

  --font-label-small-size:   12px;
  --font-label-small-line:   15px;
  --font-label-small-weight: 700;

  --font-label-small-mono-size:   14px;
  --font-label-small-mono-line:   15.84px;
  --font-label-small-mono-weight: 700;

  /* Radii */
  --radius-sm:     8px;
  --radius-input:  8px;
  --radius-module: 16px;
  --radius-pill:   9999px;

  /* Маркетингові секції головної — прототип 01.09.
     Геометрія однакова для обох брендів, тому живе тут, а не в брендових
     tokens.css. Брендові лишились там: --benefit-bg і --color-heading. */
  --hairline: 1px;

  --section-title-size: 24px;
  --section-title-lh:   30px;
  --section-sub-size:   16px;
  --section-sub-lh:     20px;
  --section-head-max:   640px;
  --section-rhythm:     calc(var(--space-3xl) * 2);

  --benefit-title-size:  20px;
  --benefit-title-lh:    24px;
  --benefit-tile:        48px;
  --benefit-padding:     var(--space-2xl);
  --benefit-min-h:       236px;
  --benefit-title-hover: 1.1;

  /* Заголовок сторінки більший за секційні (рішення 03.09): h1 має вести,
     а не зливатися з «Więcej danych» і «Elastyczne warunki», які сидять
     на --section-title-*. Прототип тримає обидва на 24px. */
  --page-title-size: 28px;
  --page-title-lh:   34px;

  /* «Szybki wybór» у колонковому режимі (таблет і десктоп).
     Висота видимої частини = --chips-visible рядків, решта скролиться. */
  /* Кегль тіла — прототипний --font-body-size; чип на ньому ж, тому
     підпис групи й чип читаються однаково. */
  --font-body-size: 16px;
  --chip-padding:   var(--space-sm) 14px;

  --chips-max:      720px;
  --chip-row-h:     36px;
  --chips-visible:  6;
  --chips-fade-h:   var(--space-md);
}

/* === 2. Page layout === */
.header_container--home-new {
  height: auto;
}

.page-home-new {
  min-height: 100vh;
  /* Верхнє поле — 40px за прототипом 01.09 (.search-module-wrap
     padding-block: var(--space-3xl) 0). Другі 40px до h1 додає
     .home-title — разом 80px від хедера до «Szukaj opon».
     Знизу нуль: повітря перед футером тримає .story-panel, як у прототипі
     (там .search-module-wrap теж має padding-block ... 0). */
  padding: var(--space-3xl) calc(var(--content-inset) / 2) 0;
  box-sizing: border-box;
  font-size: var(--font-body-s-size);
  line-height: var(--font-body-s-line);
}

.page-home-new *,
.page-home-new *::before,
.page-home-new *::after {
  box-sizing: border-box;
}

:where(.page-home-new, .tior-b2b-filter) .hero-section_new {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Відступ до картки дає margin-bottom заголовка (--space-md), як у
     прототипі. Раніше сюди додавалось ще 32px, і разом виходило 44. */
  padding: 0;
}

/* === 3. Заголовок сторінки (h1) — прототип 01.09 ===
   Було: .hero-heading, два <p>, тільки INFR, uppercase 28px, вирівняний
   праворуч. Стало: один h1 обом брендам за прототипом — mono 700, розмір
   із --section-title-*, ліворуч, без uppercase.
   Двоколірні __line/__line2 прибрані 02.09 разом із херо-текстом INFR. */
.home-title {
  max-width: var(--content-max);
  margin: 0 auto var(--space-md);
  /* Прототип тримає цей відступ на .tool-zone (padding-block: 40px);
     у нас окремої tool-zone немає, тож 40px несе сам заголовок. */
  padding-top: var(--space-3xl);
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--page-title-size);
  line-height: var(--page-title-lh);
  letter-spacing: -0.01em;
  color: var(--color-accent-primary);
  text-align: left;
  text-wrap: balance;
}

/* === 4. Search module card ===
   Wide flex-wrap layout — matches Figma node 5381:11421. Fields flow in a
   single wrap row inside .filters-row--wrap, with each field flex-sized to
   a 190px basis so the panel packs 4-5 per row on desktop and reflows down
   naturally on tablet/mobile.

   Structure: .search-module-wrap holds tabs + card + actions button, with
   tabs on the transparent page bg (above the card) and the CTA button
   directly under the card, both aligned to the card width. */
.search-module-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Бордер прототип має, але ледь помітний: --border-subtle замість
   контрастного --color-border-module. Основну межу тримає тінь. */
.search-module {
  background-color: var(--color-bg-surface-light);
  border-radius: var(--radius-module);
  border: var(--hairline) solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  /* 32px по колу за прототипом (там же підпис «30.08: 24 → 32, модулю
     бракувало повітря»). Раніше було 16/24, а верхні 32 добирались
     padding'ом .filters-panel — тепер усе поле тримає сама картка. */
  padding: var(--space-2xl);
  transition: box-shadow var(--motion-enter);
}

/* Гейтинг за ДС §11.4 — на тач-екранах підйому немає. */
@media (hover: hover) and (pointer: fine) {
  .search-module:hover {
    box-shadow: var(--shadow-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-module { transition: none; }
}

.search-module__body {
  padding-top: 0;
}

/* === 5. Home tabs (Filtry / Auto) — sit on the transparent page bg above
   the card, no bottom border. */
.home-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  border-bottom: none;
  background: transparent;
  margin-bottom: var(--space-md);
}

.home-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 14px;
  background: none;
  border: 0;
  font-family: var(--font-family-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}

.home-tab__icon { flex: none; }

.home-tab:hover:not(.home-tab--active) {
  color: var(--color-text-on-light);
  background: var(--bg-accent-tint-soft);
}

.home-tab--active {
  color: var(--color-accent-primary);
  font-weight: 600;
  border-bottom-color: var(--color-accent-primary);
}

/* Only the active panel renders. */
.home-tab-panel { display: none; }
.home-tab-panel--active { display: block; }

/* Відступи навколо CTA. Прототип тримає обидва на .cta-row
   (padding-block: var(--space-xl) var(--after-cta-space)), однаково на всіх
   брейкпоінтах. Нижній свідомо тут, а не в «Szybki wybór»: та секція не
   рендериться, коли жодна група чипів не набрала порогу, і повітря під
   кнопкою тоді зникло б разом із нею. */
.search-module__actions {
  padding-top: var(--space-xl);
  padding-bottom: var(--after-cta-space);
}

/* === 6. Filters panel + rows === */
.filters-panel {
  padding: var(--space-lg) 0;
}

/* На головній вертикальне поле панелей знято: воно складалося з полем
   картки. Прототип тримає весь відступ на .search-module, а між підвалом
   і розширеними фільтрами лишає 16px (.adv-panel { padding-top }).
   Скоуп обов'язковий — ці ж панелі рендеряться на /b/search, де поле
   лишається як було. */
.page-home-new .filters-panel {
  padding: 0;
}

.page-home-new .filters-panel--advanced {
  padding-top: var(--space-lg);
}

.filters-row {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Primary filters — fixed 5-column grid so all fields share exactly the same
   width. With size2 hidden the panel shows 9 fields (row 1 full, row 2 with
   one empty cell); once size2 is expanded there are 10 fields (perfect 5+5).
   Falls back to 2 columns on mobile. */
.filters-row--wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: var(--space-lg);
}

.filters-row--wrap > .size-slot,
.filters-row--wrap > .size-cluster {
  min-width: 0;
}

/* Tablet — primary filters collapse to 3-col; advanced stays 4-col (exactly
   4 fields — Homologation/DOT/Load/Speed — must fit on one row). Both rules
   listed here explicitly so intent is visible without relying on specificity
   from a separate base rule. Aligned to project tablet ceiling (1039px). */
@media (max-width: 1039px) {
  .filters-row--wrap {
    grid-template-columns: repeat(3, 1fr);
  }
  .filters-panel--advanced .filters-row--wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile — matches prototype v44 mobile layout:
   sizes on their own row, EU full-width, everything else in 2-col pairs.
   Breakpoint aligned to project mobile ceiling (669px, per TIOR spec). */
@media (max-width: 669px) {
  .filters-row--wrap,
  .filters-panel--advanced .filters-row--wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .filters-row--wrap > .size-cluster,
  .filters-row--wrap > .size-slot--2,
  .filters-row--wrap > .filter-select--eu {
    grid-column: 1 / -1;
  }
  /* When size2 is expanded, size1 and size2 share the same row (50/50). */
  .filters-row--wrap:has(> .size-slot--2:not([hidden])) > .size-cluster,
  .filters-row--wrap > .size-slot--2:not([hidden]) {
    grid-column: span 1;
  }
}

/* size1 + add-button cluster: shares the same 190px basis as the other
   fields, with the add button pinned inline on the right of size1. */
.size-cluster {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}
.size-cluster .size-slot {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.size-cluster .size-slot > * { flex: 1; }

.size-slot--2[hidden] { display: none; }

.filters-row--sizes {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

.filters-row--sizes .size-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.filters-row--sizes .size-slot > * { flex: 1; }
.filters-row--sizes .size-slot[hidden] { display: none; }

.filters-row--two {
  grid-template-columns: repeat(2, 1fr);
}

.filters-row--eu,
.filters-row--ean {
  grid-template-columns: 1fr;
}

.filters-row--advanced-1,
.filters-row--advanced-2 {
  grid-template-columns: repeat(2, 1fr);
}

.filters-row--auto-1 {
  grid-template-columns: repeat(2, 1fr);
}
.filters-row--auto-2,
.filters-row--auto-3,
.filters-row--auto-4 {
  grid-template-columns: 1fr;
}

/* === 6b. Size add/remove buttons — inline chip between size1 and size2 === */
.size-add-btn,
.size-remove-btn {
  position: relative;
  flex: none;
  align-self: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-bg-chip);
  border-radius: 50%;
  background: var(--color-bg-input);
  color: var(--color-text-on-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms, background 120ms;
}
.size-add-btn[hidden],
.size-remove-btn[hidden] { display: none; }
.size-add-btn:hover,
.size-remove-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}
.size-btn__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--color-text-primary);
  color: var(--color-text-primary-inverted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}
.size-add-btn:hover .size-btn__tip,
.size-remove-btn:hover .size-btn__tip {
  opacity: 1;
}

.filters-row--quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Підвал панелі фільтрів.
   За замовчуванням (тобто на /b/search) — звичайний блок: піли й тригер
   стоять стовпчиком, як стояли до 03.09. Обгортка там нічого не міняє.

   Рядком вони стають ЛИШЕ на головній — прототип 01.09 (.filters-foot):
   піли ліворуч, тригер притиснутий праворуч. На вузьких екранах
   переносяться. Серч чекає на рішення дизайнерки. */
.page-home-new .filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* margin-left тримає тригер праворуч, навіть коли піл мало й вони не
   заповнили рядок. Верхній відступ рядка піл прибираємо — його тепер
   дає сам .filters-foot, інакше відступи склалися б удвічі. */
.page-home-new .filters-foot .accordion-header {
  margin-left: auto;
}

.page-home-new .filters-foot .filters-row--quick {
  margin-top: 0;
}

/* === 7. Filter select === */
.filter-select {
  position: relative;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  /* 2026-08-10: 53→44 per design system §10.7 (уніфіковано з живим OP). */
  height: 44px;
  /* Рамка default — --border-default обох брендів за ДС §11.3
     (INFR #EAEAEA, OTM #cdc6c0). Було --color-bg-chip, тобто фон чипа. */
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-input);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-placeholder);
  cursor: pointer;
  text-align: left;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger:hover {
  /* ДС §11.3: INFR #9ba3af, OTM #323744 — побрендово. */
  border-color: var(--dd-border-hover);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger[aria-expanded="true"] {
  /* ДС §11.3/§11.7: INFR приглушений rgba(accent,.35) — повний акцент
     лишається мовою CTA (§3.2); OTM бере повний акцент як маркер. */
  border-color: var(--dd-border-open);
}

.filter-select__labelrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: 20px;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__label {
  flex: 1;
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-on-light);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__value {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-placeholder);
}

/* Empty .filter-select__value takes 18px of vertical space and pushes the
   labelrow above the visual center. Hide it while no value is picked so the
   labelrow lands on the exact vertical center of the trigger. Same treatment
   for .filter-text__input (EAN / MODEL) — collapse to zero height while
   empty AND not focused, so its label centers like a regular select trigger. */
:where(.page-home-new, .tior-b2b-filter) .filter-select__value:empty {
  display: none;
}
:where(.page-home-new, .tior-b2b-filter) .filter-select:not(.is-selected) .filter-text__input:not(:focus) {
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__value {
  color: var(--color-accent-primary);
  font-weight: 500;
  /* 2026-08-10: 18→16 per design system §10.7. */
  font-size: 16px;
  line-height: 22px;
}

/* Selected non-EU field: hide the title labelrow, show only the picked
   value + × clear. The EU field keeps its labelrow because that's where
   the resistance/wet/noise icons live. */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__labelrow {
  display: none;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select--eu.is-selected .filter-select__labelrow {
  display: flex;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select--eu.is-selected .filter-select__label {
  color: var(--color-accent-primary);
}


.filter-select__chev {
  display: inline-flex;
  transition: transform 0.15s ease;
}

/* Clear "×" button — overlays the chev's slot on the right edge of the
   trigger, only when the dropdown holds a value. Click clears the field
   without opening the listbox. */
:where(.page-home-new, .tior-b2b-filter) .filter-select__clear {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  display: none;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent-primary);
  cursor: pointer;
  z-index: 2;
  transition: color 120ms ease;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__clear:hover {
  color: var(--color-accent-pressed);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__clear {
  display: inline-flex;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__chev {
  visibility: hidden;
}

.filter-select__trigger[aria-expanded="true"] .filter-select__chev {
  transform: rotate(180deg);
}

.filter-select__listbox {
  position: absolute;
  /* Overlap 1px onto the trigger's transparent bottom border so the accent
     outline reads as one continuous line — no visible seam between trigger
     and overlay in the focused state (designer TZ 2026-08-03, A4). */
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  background: var(--color-bg-input);
  /* --hairline замість літерального 1px (прототип 01.09). Значення те саме,
     але товщина ліній тепер керується одним токеном. */
  /* Рамка листбокса = рамка відкритого тригера, щоб на стику не було
     розриву (ДС §11.3, виправлення 23.08.2026). */
  border: var(--hairline) solid var(--dd-border-open);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-2);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Multiple of the 40px option row so the scroll viewport never leaves a
     half-row visible top/bottom (A5). Search row is sticky at 40px too, so
     total is aligned regardless of scroll position. */
  max-height: 400px;
  overflow: auto;
  z-index: 300;
}

/* Trigger merges seamlessly with the open listbox: drop the shared bottom
   border and square off the bottom corners so the two look like one shape. */
:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger[aria-expanded="true"] {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 301;
}

/* #8 — subtle backdrop scrim when any filter dropdown is open. */
body.filter-dropdown-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  z-index: 150;
  pointer-events: none;
}

.filter-select__listbox[hidden] {
  display: none;
}

/* Search row inside option listboxes.
   Borderless input; the row height + vertical padding match .filter-select__option
   (40px) so the search line reads as just another row at the top of the list.
   Icon 24px + Item-Text 16/18 per designer TZ 2026-08-03. */
.filter-select__searchbox {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-bg-input);
  min-height: 40px;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--color-border-surface);
  z-index: 1;
}

.filter-select__search-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-on-light);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__search {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 18px;
  color: var(--color-text-on-light);
  outline: none;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__search::placeholder {
  color: var(--color-text-placeholder);
}

.filter-select__option[hidden] {
  display: none !important;
}

/* Figma node 4548:274977 — non-interactive section header inside a listbox
   (e.g. "Klasa:" / "Poziom (dB):" inside the noise dropdown). Mono 12px in
   the muted token, smaller than option rows so it reads as a label. */
.filter-select__section {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-input);
  border-bottom: 0.2px solid var(--color-border-default);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 15.84px;
  color: var(--color-text-muted);
  pointer-events: none;
  user-select: none;
}

/* Figma nodes 4548:274979 / 4548:274983 — "od" / "do" range row.
   Label on the left, borderless number input on the right. */
.filter-select__rangerow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 24px;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-input);
  border-bottom: 0.2px solid var(--color-border-default);
}

.filter-select__rangelabel {
  flex-shrink: 0;
  font-family: var(--font-family-mono);
  font-size: 14px;
  line-height: 15.84px;
  color: var(--color-text-muted);
  cursor: text;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__rangeinput {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-family-mono);
  font-size: 14px;
  line-height: 15.84px;
  color: var(--color-text-on-light);
  outline: none;
  /* hide native number-input spinner */
  -moz-appearance: textfield;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__rangeinput::-webkit-outer-spin-button,
:where(.page-home-new, .tior-b2b-filter) .filter-select__rangeinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* === 7c. inputSelect — combobox panel with a single editable input ===
   Row layout, borderless input; height + padding match .filter-select__option
   (40px) so it reads as another row at the top of the list. Used by Model + EAN.
   Icon 24px + Item-Text 16/18 per designer TZ 2026-08-03. */
.filter-select__inputrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
  padding: 0 var(--space-md);
  background: var(--color-bg-input);
  border-bottom: 1px solid var(--color-border-surface);
}

.filter-select__free-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-on-light);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__free-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 18px;
  color: var(--color-text-on-light);
  outline: none;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__free-input::placeholder {
  /* 2026-08-10: --color-text-on-light → --color-text-placeholder — placeholder має
     бути сірим (як в решті інпутів: .tfb-dd-text-input, .filter-text__input,
     .filter-select__search). Було чорним, читалось як введений текст. */
  color: var(--color-text-placeholder);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--space-md);
  height: 40px;
  min-height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-surface);
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-on-light);
  cursor: pointer;
  transition: background 100ms ease;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option:last-child {
  border-bottom: 0;
}

/* Фон опції під курсором — брендовий: прототип 04.09 дає INFR акцентний
   тінт rgba(0,95,110,.06), Oponytomy лишається на нейтральному сірому
   (ДС §11.7). Токен розводить це по tokens.css, фолбек — стара поведінка. */
:where(.page-home-new, .tior-b2b-filter) .filter-select__option:hover {
  background-color: var(--dd-option-hover-bg, var(--hover-grey));
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option--placeholder {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-placeholder);
}

/* 2026-08-09: radio LEFT, label RIGHT — per designer. DOM order is [radio][label];
   these `order` values keep flex flow matching the DOM (radio first, then label). */
.filter-select__option-label {
  order: 3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px ;
}

/* Single-select radio — synced to DS §10.3 + §14 mock (design-system_11.html
     .tds-dd-*-radio, line 2167-2171): 12×12, border 1.5px, default contour
     --text-placeholder (brand). Selected — SOLID filled disc: border-color
     AND background both = --accent-primary of the brand (teal IF / red OTM).
     No outer-ring + inner-dot pattern; the whole bullet becomes accent.
     --text-placeholder used directly (not --color-text-placeholder which is
     IF-hardcoded in this file's :root and would break OTM). Multi-select
     overrides below turn this into a checkbox — not in DS scope. */
.filter-select__radio {
  order: 1;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--text-placeholder);
  border-radius: 50%;
  position: relative;
  background: transparent;
  box-sizing: border-box;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.filter-select__option.is-active .filter-select__radio {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-primary);
}

/* Multi-select — same DOM (.filter-select__radio span), but rendered as a
   checkbox: rounded square, checkmark on is-active. The macro doesn't need to
   know which mode it's in — the parent `.filter-select--multi` class picks
   the visual. */
.filter-select--multi .filter-select__radio {
  border-radius: 4px;
}

.filter-select--multi .filter-select__option.is-active .filter-select__radio {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-primary);
}

.filter-select--multi .filter-select__option.is-active .filter-select__radio::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -55%) rotate(45deg);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option.is-active {
  color: var(--color-accent-primary);
  background-color: transparent;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option.is-active:hover {
  background-color: var(--dd-option-hover-bg, var(--hover-grey));
}

/* Multi-select cap (data-max-picks): unpicked options greyed + non-interactive
   while at the cap. Applied by home_new.js:syncMultiCap. Active options are
   never disabled (user can still toggle one off to free a slot). */
:where(.page-home-new, .tior-b2b-filter) .filter-select__option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
:where(.page-home-new, .tior-b2b-filter) .filter-select__option.is-disabled:hover {
  background-color: transparent;
}

/* Brief flash on the trigger when the user clicks a disabled option — signals
   "you've hit the cap" without a modal. Cleared after 400 ms by JS. */
@keyframes filter-select-cap-hit {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 0 2px var(--status-danger); }
}
.filter-select.is-cap-hit .filter-select__trigger {
  animation: filter-select-cap-hit 0.4s ease-out;
}

/* === 7b. Filter text input (EAN etc.)
   Visually matches .filter-select__trigger so the EAN field reads as a
   regular dropdown cell. The user still types the value directly — there
   is no overlay — but the box, height, label and value typography align
   with the surrounding select triggers. */
:where(.page-home-new, .tior-b2b-filter) .filter-text__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 53px;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-input);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: text;
}

:where(.page-home-new, .tior-b2b-filter) .filter-text__box:hover {
  border-color: var(--color-text-on-light);
}

:where(.page-home-new, .tior-b2b-filter) .filter-text__box:focus-within {
  border-color: var(--color-accent-primary);
}

/* EAN / MODEL text input — was 12/500, an outlier vs `.filter-select__value`
   (14/400 empty, 16/500 selected). Match the select siblings so an entered
   value reads the same as any other selected filter, and the placeholder
   matches an empty select value. */
:where(.page-home-new, .tior-b2b-filter) .filter-text__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-on-light);
  outline: none;
}
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-accent-primary);
}

/* When a text-field (EAN / MODEL) holds a value, mirror the select
   is-selected treatment: teal border, hidden label row, value shown in
   the same 18px accent-colour style as .filter-select__value. */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__box {
  border-color: var(--color-accent-primary);
}
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input {
  color: var(--color-accent-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

/* Every filled field (regular select OR text-field) gets a teal border so
   the "chosen" state reads at a glance.

   color + font-weight додані 03.09 за прототипом 01.09: там весь тригер
   обраного поля стає акцентним, а не лише .filter-select__value. Без цього
   все, що не має власного color (мітки, роздільники, підписи в складених
   полях), лишалось темним. Колір на тригері підхоплюють усі нащадки, що
   не задають свій. */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__trigger {
  /* ДС §11.3: INFR rgba(accent,.35), OTM #DDD8D4 (--chip-bg). Прототип
     01.09 каже те саме — розходився саме наш код. */
  border-color: var(--dd-border-selected);
  color: var(--color-accent-primary);
  font-weight: 500;
}

/* Шеврон і решта інлайн-іконок у тригері — теж акцентні (прототип 01.09). */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__trigger svg {
  stroke: var(--color-accent-primary);
}

:where(.page-home-new, .tior-b2b-filter) .filter-text__input::placeholder {
  color: var(--color-text-placeholder);
  font-weight: 500;
}

/* === 7c. Icon variant — .filter-text--with-icon (Search-input per DS §10.8:
   Розмір / Модель / EAN, added 2026-08-19). Same 44px trigger geometry as
   §10.1 dropdown but with a leading magnifier and a direct <input>, no listbox.
   Border-based styling (no drop-shadow). Icon 18px, --text-placeholder, never
   changes with state. Editing/Filled = accent-tinted border (INFR); OTM stays
   on neutral --text-placeholder (see oponytomy/overrides.css — DS says accent
   is Primary-CTA-only on OP). Placeholder disappears on focus (DS: click hides
   the label). */
:where(.page-home-new, .tior-b2b-filter) .filter-text.filter-text--with-icon .filter-text__box {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, 8px);
  box-shadow: none;
  background-color: var(--color-bg-input);
}
/* Label overlay — DS §10.8 state machine:
     Default (empty + blur)     → label «EAN»/«Model»/«Rozmiar» visible
     Click (focus + empty)      → label hides; native placeholder shows
     Typing (focus + has value) → placeholder hides natively; value visible
     Erase all (focus + empty)  → placeholder back (native)
     Blur (empty)               → label back
     Blur (has value)           → label stays hidden; value visible
   Implemented as an absolute-positioned overlay covering the placeholder area.
   The `.is-selected` class is toggled by home_new.js `.filter-text__input`
   input-listener (mirrors input.value truthy). Native placeholder attribute
   (INFR: same as label; OTM: verb «Wpisz…») shows through when overlay hides. */
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon .filter-select__labelrow {
  display: flex;
  align-items: center;
  position: absolute;
  left: calc(12px + 18px + 10px);
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  pointer-events: none;
  z-index: 1;
  background-color: var(--color-bg-input);
  padding-right: 4px;
  overflow: hidden;
}
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon .filter-select__labelrow .filter-select__label {
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-on-light);
}
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon:focus-within .filter-select__labelrow,
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon.is-selected .filter-select__labelrow {
  display: none;
}
:where(.page-home-new, .tior-b2b-filter) .filter-text__icon,
:where(.page-home-new, .tior-b2b-filter) .filter-text__icon svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-placeholder);
}
/* Keep input visible even when empty+unfocused (override §7 collapse rule) so
   the placeholder shows alongside the icon. */
:where(.page-home-new, .tior-b2b-filter) .filter-select:not(.is-selected) .filter-text--with-icon .filter-text__input:not(:focus) {
  height: auto;
  padding: 0;
  border: 0;
  overflow: visible;
}
/* Editing (focus-within) — INFR: accent-tinted border rgba(accent, .35), same
   as §10.3 Open/Selected of the regular dropdown. Shadow stays off. */
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon .filter-text__box:focus-within {
  border-color: rgba(var(--accent-primary-rgb), .35);
  box-shadow: none;
}
/* Filled (is-selected) — same border as Editing; value text switches to accent
   (existing §7b rule .filter-select.is-selected .filter-text__input handles it). */
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon.is-selected .filter-text__box {
  border-color: rgba(var(--accent-primary-rgb), .35);
  box-shadow: none;
}
/* DS §10.8: icon stays --text-placeholder in ALL states (no accent recolour on
   filled/focus). Overrides the earlier "accent icon on selected" rule for this
   variant. */
:where(.page-home-new, .tior-b2b-filter) .filter-text--with-icon.is-selected .filter-text__icon {
  color: var(--color-text-placeholder);
}

/* Field-type font per DS §10.8: EAN + Rozmiar (search) = JetBrains Mono 14px;
   Model = Outfit (body) 16px. Applies only to filled state — empty placeholder
   uses body 16px per DS ("шрифт «перемикається» на код/текст лише коли в полі
   з'являється реальне значення"). Selectors target the id directly so no macro
   param is needed. */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input#ean,
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input#sizeShortName,
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input#size2 {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-text__input#modelName {
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

/* === 8. Toggle pill (quick chips: Run Flat / XL / FR / 48h) === */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--color-bg-chip);
  border: var(--hairline) solid var(--chip-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-text-on-light);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

@media (hover: hover) and (pointer: fine) {
  .toggle:hover:not(.is-active) {
    background: var(--color-border-module);
    border-color: var(--chip-border);
    color: var(--color-text-on-light);
  }
}

.toggle.is-active {
  background-color: var(--color-bg-chip);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .toggle.is-active:hover {
    background-color: var(--color-bg-chip);
    border-color: var(--color-accent-pressed);
    color: var(--color-accent-pressed);
  }
}

/* === 9. Button ===
   Scoped under .page-home-new so the redesigned button atom (see
   layouts/new/ui/button.ftlh: <button class="btn btn--primary btn--lg">)
   does not collide with the legacy global .btn rules in home1.css or
   bootstrap.min.css that the main app relies on. */
:where(.page-home-new, .tior-b2b-filter) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease, transform 100ms ease;
}

:where(.page-home-new, .tior-b2b-filter) .btn--sm { padding: 4px 10px;  font-size: 14px; }
:where(.page-home-new, .tior-b2b-filter) .btn--md { padding: 8px 16px;  font-size: 16px; }
:where(.page-home-new, .tior-b2b-filter) .btn--lg {
	padding: var(--btn-cta-padding, 0 var(--space-lg));
	font-size: var(--btn-cta-font-size, 18px);
	height: var(--btn-cta-height, 48px);
	font-weight: var(--btn-font-weight, 500);
	border-radius: var(--btn-cta-radius, 12px);
	min-width: 200px;
}

:where(.page-home-new, .tior-b2b-filter) .btn--primary {
  background-color: var(--color-accent-primary);
  color: var(--color-text-primary-inverted);
  box-shadow: none;
}

:where(.page-home-new, .tior-b2b-filter) .btn--primary:hover {
  /* box-shadow-lift прибрано 2026-08-10 per design system §9.1 —
     hover тепер тільки brightness/bg-swap, без кольорової тіні. */
  filter: brightness(1.04);
}

:where(.page-home-new, .tior-b2b-filter) .btn--primary:active {
  background-color: var(--color-accent-pressed);
  filter: none;
  box-shadow: none;
  transform: scale(0.985);
}

:where(.page-home-new, .tior-b2b-filter) .btn--primary:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

:where(.page-home-new, .tior-b2b-filter) .btn--secondary {
  background-color: transparent;
  border: 1.5px solid var(--color-accent-primary);
  color: var(--color-accent-pressed);
}

:where(.page-home-new, .tior-b2b-filter) .btn--secondary:hover {
  background-color: var(--bg-accent-tint-soft);
  box-shadow: none;
  filter: none;
}

:where(.page-home-new, .tior-b2b-filter) .btn--secondary:active {
  background-color: var(--bg-accent-tint-medium);
  color: var(--color-accent-pressed);
  transform: scale(0.985);
}

:where(.page-home-new, .tior-b2b-filter) .btn--ghost {
  background: transparent;
  color: var(--color-text-on-light);
}

.search-actions {
  display: flex;
  justify-content: center;
  padding-top: 0;
}

/* CTA "Pokaż opony": на десктоп/таблет — 200px (успадковує з .btn--lg),
   на мобільному розтягується на всю ширину картки.
   Breakpoint aligned to project mobile ceiling (669px). */
@media (max-width: 669px) {
  :where(.page-home-new, .tior-b2b-filter) .search-module__actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* === 10. Badge === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg-chip);
  border-radius: var(--radius-pill);
  font-size: var(--font-body-s-size);
  line-height: var(--font-body-s-line);
  color: var(--color-text-on-light);
}

.badge__remove {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  color: inherit;
}

/* === 11. Divider === */
.divider {
  border: 0;
  border-top: 1px solid var(--color-border-default);
  margin: 0;
}

/* === 12. Accordion header ===
   Базове правило спільне з /b/search — НЕ чіпати без окремого рішення.
   Нова типографіка за прототипом 01.09 живе нижче, під .page-home-new. */
:where(.page-home-new, .tior-b2b-filter) .accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: 0;
  padding: var(--space-sm) 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-label-small-size);
  font-weight: var(--font-label-small-weight);
  color: var(--color-text-muted);
  cursor: pointer;
  margin-top: var(--space-sm);
}

/* Головна: типографіка тригера за прототипом 01.09 (.adv-toggle) —
   Outfit 14px / вага 500 / --color-text-on-light замість моно 12px / 700 /
   muted. Тригер читається як дія, а не як технічний підпис.
   Скоуп лише на головну: /b/search лишається як був, до рішення дизайнерки. */
.page-home-new .accordion-header {
  padding: var(--space-xs) 0;
  margin-top: 0;
  font-family: var(--font-family-body);
  /* Прототип тут має --chip-font-size (14px), але на живій сторінці тригер
     виглядав дрібним — рішення 03.09 підняти до 16px. Це той самий
     --font-body-size, що в чипів і підписів груп, тож уся панель лишається
     в одній типографічній шкалі. */
  font-size: var(--font-body-size);
  font-weight: 500;
  color: var(--color-text-on-light);
  transition: color var(--motion-fast);
}

.accordion-header .icon {
  transition: transform 0.15s ease;
}

.page-home-new .accordion-header .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.accordion-header.is-open .icon {
  transform: rotate(180deg);
}

/* Hover (DS §9.10) — text/icon пересуваються на on-light. Гейтимо
   @media hover per §11.4 щоб не залипало на touch після тапу. */
@media (hover: hover) and (pointer: fine) {
  :where(.page-home-new, .tior-b2b-filter) .accordion-header:hover,
  :where(.page-home-new, .tior-b2b-filter) .accordion-header:hover .icon {
    color: var(--color-text-on-light);
  }
}

/* Focus-ring (DS §11.2) — канон box-shadow: var(--focus-ring).
   Без явного правила браузер малював дефолтний outline замість брендового. */
:where(.page-home-new, .tior-b2b-filter) .accordion-header:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* Search-results page: "Wyszukiwanie zaawansowane" trigger pinned right, no
   border, lighter weight — per prototype stage2 (2026-08-12).
   width:100% is required for justify-content:flex-end to actually push the
   label+chevron right — button is content-width by default. */
.tior-b2b-filter .accordion-header {
  width: 100%;
  justify-content: flex-end;
  border-bottom: none;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* === 13. Icon base === */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

/* === 14. EU label — compound field (resistance / wet / noise) === */
.filter-select--eu .filter-select__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: normal;
  text-transform: none;
}

.eu-hint-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  /* Той самий колір, що й `.filter-select__label` — тригер EU має читатись
     однорідно з рештою dropdown-лейблів (2026-08-12, було muted-grey). */
  color: var(--color-text-on-light);
}

/* ДС §11.3a, «пастка реалізації»: правило .filter-select__trigger svg
   (нижче, is-selected) б'є по БУДЬ-якому svg усередині тригера, а EU-іконки
   з 2026-09-11 — суцільна заливка без обводки (канонічний набір ДС). Stroke
   на такій іконці домальовує зайвий контур поверх форми, тож для всієї
   EU-групи в тригері фарбуємо заливку й прибираємо обводку. */
:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger .eu-hint-icons svg,
:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger .eu-badge__icon svg {
  fill: currentColor;
  stroke: none;
}

.eu-hint-text {
  /* 2026-08-19: шрифт вирівняно з `.filter-select__label` (§10.4 body 16/400) —
     EU trigger має читатись однорідно з рештою dropdown-лейблів на рядку.
     Було mono/label-small. */
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-on-light);
}

/* When a value is picked JS swaps the "EU label" hint + icons for a row of
   .eu-badge chips (icon + dark rounded rectangle with the letter). */
.eu-values-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-text-on-light);
  text-transform: none;
}

.eu-values-text[hidden],
.eu-hint-icons[hidden] { display: none; }

.eu-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  font-family: var(--font-family-mono);
  font-size: 14px;
}
.eu-badge:last-child { margin-right: 0; }

.eu-badge__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-placeholder);
}

.eu-badge__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--color-text-on-light);
  color: var(--color-text-primary-inverted);
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

.filter-select__listbox--eu {
  padding: var(--space-sm) 0;
  max-height: 360px;
}

/* Тип: коротка перерахована таблиця — вміщується без скролу, тож знімаємо
   400px обмеження, щоб не показувати смугу прокрутки для 6–8 опцій. */
.filter-select[data-select-id="typeId"] .filter-select__listbox {
  max-height: none;
  overflow: visible;
}

/* Заголовок групи в списку — прототип 04.09 (.filter-select__group).
   Іконка 18px суцільною заливкою + назва групи. З'явився разом із
   переписаним списком «Etykieta UE»: він тепер звичайний listbox із
   рядками-опціями, а не сітка плиток .eu-grade (ті правила видалено
   2026-09-11 разом із розміткою, як і мертвий .eu-noise-range). */
.filter-select__group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-text-on-light);
  text-transform: none;
  cursor: default;
}
.filter-select__group svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  stroke: none;
}

/* Значення етикетки — код (A / B / 70 dB), тож моно, як розміри й решта
   кодів у системі (прототип: .filter-select__option-label.is-code). */
.filter-select__option-label.is-code {
  font-family: var(--font-family-mono);
  font-size: 14px;
}


/* === 15. Quick picks ("Szybki wybór") — matches prototype v44 === */
/* On tablet + desktop the quick-picks row stretches to the same 1280px hero
   width as .search-module; on mobile it stays in the narrower 560px column. */
.quick-picks {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Згори нуль: відступ від кнопки дає .search-module__actions, як у
     прототипі. Знизу 40px — там це padding .tool-zone. */
  padding: 0 0 var(--space-3xl);
}

@media (max-width: 669px) {
  /* Стеля 560px — свідоме рішення проєкту, не з прототипу: тримає рядок
     чипів читабельним на великих телефонах. Знімати не треба (перевірено
     04.09). */
  .quick-picks {
    max-width: 560px;
  }

  /* Bleed на мобайлі — 16px, як поле сторінки на цьому брейкпоінті. */
  .quick-picks__scrollwrap {
    margin-inline: calc(-1 * var(--space-lg));
  }
}

/* Прототип 01.09 підняв заголовок блоку до рівня решти секційних
   заголовків (§7 «Заголовок групи / секції»): той самий кегль, що в
   «Więcej danych» і «Elastyczne warunki», без капслоку, колір брендовий.
   Було 16px uppercase акцентом — виглядало дрібніше за сусідів. */
/* Заголовок стоїть на осі контейнера, як усі інші заголовки сторінки.
   Прототип тримає тут padding 0 24px, але компенсує його negative margin
   на зовнішній обгортці .home-chips-outer (-24px), щоб у сумі вийшов нуль.
   Тієї обгортки в нашій розмітці немає, тож некомпенсований padding
   зсував «Szybki wybór» на 24px глибше за «Opony w promocji» й решту.
   Замість обгортки той самий ефект дає bleed на .quick-picks__scrollwrap
   нижче: чипи гортаються за край, а текст лишається на осі. */
.quick-picks__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-heading);
}

.quick-picks__group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-md);
}
.quick-picks__title + .quick-picks__group {
  margin-top: var(--space-lg);
}

/* Підпис групи: 16px замість 14 і вага 700 замість 400 — кегль тепер
   такий самий, як у чипів під ним, а колір темніший (був placeholder). */
.quick-picks__sublabel {
  padding: 0;
  margin-bottom: var(--space-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-label-small-weight);
  line-height: var(--section-sub-lh);
  color: var(--color-text-on-light);
}

/* Bleed за контейнер — роль прототипної .home-chips-outer. Разом із
   padding 0 24px на .quick-picks__scroll це дає: перший чип рівно на осі
   контейнера (під заголовком), а рядок гортається за край секції. */
.quick-picks__scrollwrap {
  position: relative;
  margin-inline: calc(-1 * var(--space-xl));
}

/* Fade + chevron hint on the right edge; hidden when the row is scrolled
   to the end. */
.quick-picks__scrollwrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 64px;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent, var(--color-bg-page) 55%, var(--color-bg-page) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  transition: opacity 200ms ease;
  animation: quickPicksHint 1.8s ease-in-out infinite;
}
.quick-picks__scrollwrap.at-end::after {
  opacity: 0;
  animation: none;
}
@keyframes quickPicksHint {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-picks__scrollwrap::after { animation: none; }
}

.quick-picks__scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 var(--space-xl);
}
.quick-picks__scroll::-webkit-scrollbar { display: none; }

/* Фон і обводка — ті самі, що у піл-перемикачів фільтрів (--color-bg-chip
   веде на брендовий --chip-bg), тож чипи й фільтри виглядають однією
   родиною. Обводка 1px замість 0.3px: разом із падінгом 8/14 це дає рівно
   36px висоти — прототипний --chip-row-h, на який спирається розрахунок
   висоти колонки на десктопі. */
/* §9.5a (04.09): чип — посилання на видачу, не кнопка вибору. Праворуч
   шеврон: він каже «веде», а не «обери». Не лупа — лупа в системі вже
   означає поле вводу. Так чип візуально розходиться з toggle-пілом §9.7,
   з яким досі збігався заливкою, межею, радіусом і падінгом. */
.quick-pick {
  appearance: none;
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  padding: var(--chip-padding);
  border: var(--hairline) solid var(--chip-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-chip);
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-on-light);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .quick-pick:hover {
    background: var(--color-border-module);
    border-color: var(--color-text-on-light);
  }
}
/* Фон тут більше не міняємо: він і так --color-bg-chip, тож зміни не було б
   видно. Відгук дають обводка й натиск. */
.quick-pick:active {
  border-color: var(--color-text-on-light);
  transform: scale(.98);
}
.quick-pick__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.quick-pick__chev {
  flex: none;
  width: var(--icon-sm, 16px);
  height: var(--icon-sm, 16px);
  margin-left: var(--space-sm);
  /* .7, не .5: шеврон несе сенс, тож підпадає під 1.4.11 (non-text contrast
     ≥3:1). На .5 контраст до заливки чипа 2.84 (OTM) і 2.76 (INFR) — провал
     в обох брендах; на .7 виходить 4.82 / 4.62. */
  opacity: .7;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
@media (hover: hover) and (pointer: fine) {
  .quick-pick:hover .quick-pick__chev {
    opacity: 1;
    transform: translateX(2px);
  }
}

/* Обраного стану більше немає: чип нічого не «обирає», він веде на видачу
   з уже застосованим значенням (§9.5a, 04.09). Правило .is-selected знято
   разом із обробником, що його ставив — стану нема кому вмикати. */

/* Tyre size codes — JetBrains Mono, regular weight. */
.quick-pick--code {
  font-family: var(--font-family-mono);
  font-weight: 400;
}

/* === 16. Mobile visual redesign (per prototype v44) ===
   Breakpoint aligned to project mobile ceiling (669px, per TIOR spec). */
@media (max-width: 669px) {
  .page-home-new {
    /* Мобайл прототипу: 24px поля сторінки + 40px .tool-zone = 64px
       від хедера до h1 (padding-block: var(--space-xl) 0). Низ, як і на
       десктопі, лишається за .story-panel — прототип не міняє її 80px
       на жодному брейкпоінті. */
    padding: var(--space-xl) var(--space-lg) 0;
  }
  /* Мобільного padding-top на .hero-section_new більше немає: він додавав
     16px до margin-bottom заголовка й давав 28px замість прототипних 12px.
     Відступ h1 → картка однаковий на всіх брейкпоінтах (--space-md). */

  /* Розмір h1 на мобайлі веде токен --section-title-size (18/24 у блоці
     нижче), тому окремих чисел тут більше не тримаємо. */

  /* Card style: flatter, borderless, less padding. */
  .search-module {
    /* Прототип на мобайлі: padding var(--space-lg). */
    padding: var(--space-lg);
    background: var(--color-bg-surface-light);
    border-radius: 10px;
    border: none;
    box-shadow: none;
  }

  .search-module__body { padding-top: var(--space-sm); }
 

  .home-tabs {
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-tabs::-webkit-scrollbar { display: none; }
  .home-tab {
    padding: var(--space-sm) var(--space-md);
    flex: none;
  }

  .filters-row {
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .filters-row--two,
  .filters-row--advanced-1,
  .filters-row--advanced-2,
  .filters-row--auto-1 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tooltips are hover-only on desktop — noise on touch, so hide. */
  .size-btn__tip { display: none; }

  .quick-picks {
    padding: var(--space-lg) var(--space-md) 0;
  }
}

@media (max-width: 380px) {
  .filters-row--two,
  .filters-row--advanced-1,
  .filters-row--advanced-2,
  .filters-row--auto-1 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   14. «Elastyczne warunki zamówienia» — прототип 01.09

   Значення перенесені з прототипу (.s-order-*), назви класів — наші.
   Брендове тут лише --benefit-bg і --color-heading: обидва приходять
   із static/new/css/<бренд>/tokens.css, тож окремої гілки коду
   на два бренди немає.
   ============================================================ */
.order-terms {
  padding-block: var(--section-rhythm) 0;
}

.order-terms__head {
  max-width: var(--section-head-max);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.order-terms__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.order-terms__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--section-sub-size);
  line-height: var(--section-sub-lh);
  color: var(--color-text-muted);
}

.order-terms__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.order-terms__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--benefit-min-h);
  padding: var(--benefit-padding);
  background: var(--benefit-bg);
  border-radius: var(--radius-sm);
  /* Плитка не інтерактивна — курсор не має обіцяти клік. */
  cursor: default;
}

.order-terms__icon {
  width: var(--benefit-tile);
  height: var(--benefit-tile);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-bg-input);
  border: var(--hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  /* Іконка у спрайті на currentColor — перефарбовується сама. */
  color: var(--color-accent-primary);
}

.order-terms__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.order-terms__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.order-terms__item-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: var(--benefit-title-size);
  line-height: var(--benefit-title-lh);
  /* Два рядки резервуємо завжди, щоб плитки не стрибали по висоті,
     коли один заголовок коротший за інший. */
  min-height: calc(var(--benefit-title-lh) * 2);
  color: var(--color-text-on-light);
  text-wrap: balance;
  transform-origin: left center;
  transition: transform var(--motion-enter);
}

.order-terms__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--section-sub-size);
  line-height: var(--section-sub-lh);
  min-height: calc(var(--section-sub-lh) * 2);
  color: var(--color-text-muted);
}

/* Hover-гейтинг за ДС §11.4 — на тач-екранах ефекту немає. */
@media (hover: hover) and (pointer: fine) {
  .order-terms__item:hover .order-terms__item-title {
    transform: scale(var(--benefit-title-hover));
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-terms__item-title { transition: none; }
  .order-terms__item:hover .order-terms__item-title { transform: none; }
}

@media (max-width: 1039px) {
  .order-terms__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-xl);
  }
}

@media (max-width: 669px) {
  /* Заголовки меншають на мобайлі. Секційні — значення з прототипу;
     заголовок сторінки лишається на щабель більшим за них. */
  :root {
    --section-title-size: 18px;
    --section-title-lh:   24px;
    --page-title-size:    22px;
    --page-title-lh:      28px;
  }

  .order-terms__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .order-terms__item {
    min-height: 0;
  }
}

/* ============================================================
   15. «Więcej danych. Większa kontrola.» — прототип 01.09

   Дві картки поруч: гостю ціна під замком, залогіненому видна.
   Розмітка карток одна — усе робить модифікатор .state--guest.

   ⚠ Клас b2b-results на обгортці був, але його прибрано 02.09: картка
   card_result.css — широка дев'ятиколонкова сітка рядка результатів,
   у 390px вона не влазила. Стилі ілюстрації свої, перенесені з прототипу
   (блок 18 нижче), тож card_result.css сюди НЕ доходить.
   ============================================================ */
/* Верхнього поля немає: 80px після хейрлайна дає обгортка .story-lead
   (прототип тримає .s-data так само на padding-block: 0). */
.login-benefits {
  padding-block: 0;

  /* Токени лише для цієї ілюстрації. Тримаємо їх на секції, а не в :root,
     щоб --pr-* випадково не перефарбували справжню картку в /b/search. */
  --card-max:       390px;
  --state-label-h:  26px;
  --marker:         2px;
  --pr-dim-guest:   0.75;
  --pr-dim-user:    0.9;
}

.login-benefits__head {
  max-width: var(--section-head-max);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.login-benefits__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* Колір брендовий. У прототипі темніший варіант прописаний як виняток для
   INFR ([data-brand="if"]), бо його база — OTM. У нас навпаки: дефолт —
   INFR, тому темний стоїть тут, а приглушений іде в oponytomy/overrides.css. */
.login-benefits__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--section-sub-size);
  line-height: var(--section-sub-lh);
  color: var(--color-text-on-light);
}

.login-benefits__states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  max-width: calc(var(--card-max) * 2 + var(--space-2xl));
  margin-inline: auto;
}

.login-benefits__state {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--card-max);
  margin-inline: auto;
  width: 100%;
}

.login-benefits__state .product-row {
  flex: 1;
}

.login-benefits__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  padding-bottom: var(--space-xs);
  min-height: var(--state-label-h);
  box-sizing: border-box;
  font-size: var(--section-sub-size);
  color: var(--color-text-muted);
}

/* Підкреслення маркером на картці «після входу» — це стан, до якого ведемо. */
.login-benefits__label.is-now {
  color: var(--color-text-on-light);
  border-bottom: var(--marker) solid var(--color-accent-primary);
}

/* Ілюстрація не інтерактивна, тож миша її не торкається взагалі.
   pointer-events знімає ВСІ hover-ефекти одразу — і наші, і ті, що
   приходять із глобальних стилів кнопок (картка містить <button> для
   «Zaloguj się» й «Dodaj», а вони ловлять чужий hover і збільшували
   блок ціни та секцію логіну). Полювати на кожне джерело окремо не
   треба: декорація просто не приймає вказівник. */
/* Картка не клікабельна, тож курсор не обіцяє дію. Але вказівник вона
   приймає — на ньому тримається ефект нижче. */
.login-benefits__states .product-row,
.login-benefits__states .product-row * {
  cursor: default;
}

/* Наведення на картку підсвічує блок ціни — свідомий прийом прототипу 01.09.
   Його коментар: «Підняття й тінь цілої картки знято навмисно: це мова
   кнопки, а картка в цій секції — ілюстрація, не контрол». Тобто сама
   картка нерухома, а масштабується лише правий стовпчик: у залогіненого
   це ціна з наявністю, у гостя — замок із кнопкою входу.
   Точка відліку — правий край, щоб колонка не з'їжджала. */
.login-benefits__states .pr-price-col {
  transform-origin: right center;
  transition: transform var(--motion-enter);
}

/* Гейтинг за ДС §11.4 — на тач-екранах ефект не потрібен. */
@media (hover: hover) and (pointer: fine) {
  .login-benefits__states .product-row:hover .pr-price-col {
    transform: scale(var(--pr-data-hover-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-benefits__states .pr-price-col { transition: none; }
  .login-benefits__states .product-row:hover .pr-price-col { transform: none; }
}

/* Гість бачить замок замість ціни. Специфічність та сама, що в
   card_result.css, але home_new.css підключається пізніше (styles.ftlh
   28 проти 20), тож ці правила виграють. */
.login-benefits__states .state--guest .pr-price,
.login-benefits__states .state--guest .pr-availability {
  display: none;
}

.login-benefits__states .state--guest .pr-price-lock {
  display: flex;
}

/* Обидві картки трохи приглушені, гостьова сильніше — прототипний прийом,
   щоб погляд ішов на праву. */
.login-benefits__states.is-focus .pr-info,
.login-benefits__states.is-focus .pr-second,
.login-benefits__states.is-focus .pr-purchase {
  transition: opacity var(--motion-enter);
}

.login-benefits__states.is-focus .state--guest .pr-info,
.login-benefits__states.is-focus .state--guest .pr-second,
.login-benefits__states.is-focus .state--guest .pr-purchase {
  opacity: var(--pr-dim-guest);
}

.login-benefits__states.is-focus .state:not(.state--guest) .pr-info,
.login-benefits__states.is-focus .state:not(.state--guest) .pr-second,
.login-benefits__states.is-focus .state:not(.state--guest) .pr-purchase {
  opacity: var(--pr-dim-user);
}

/* Дві прогалини card_result.css — решта pr-* уже там. */
/* Іконки типу й сезону — файли з /s/images/new, ті самі, що вживає
   справжня картка. Прототип малював тут inline SVG на var(--color-season-*),
   але таких токенів у проєкті немає, тож іконка виходила чорною.
   Розкладку самого .pr-attrs-left задає перенесене правило нижче. */

.login-benefits__states .type-icon,
.login-benefits__states .season-icon {
  width: var(--pr-icon);
  height: var(--pr-icon);
  flex: none;
}

/* Фото шини — канонічний плейсхолдер проєкту (той, на який падає справжня
   картка через onerror), вписаний у рамку --pr-photo-w/h. */
.login-benefits__states .pr-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .login-benefits__states.is-focus .pr-info,
  .login-benefits__states.is-focus .pr-second,
  .login-benefits__states.is-focus .pr-purchase {
    transition: none;
  }
}

@media (max-width: 1039px) {
  .login-benefits__states {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .login-benefits__state {
    max-width: none;
    min-width: 0;
  }
}

/* ============================================================
   Обгортка оповідних секцій — прототип 01.09 (.story-panel.story-lead).

   .story-lead — межа між зоною інструмента (заголовок, пошук, CTA, чипи)
   і розповіддю про сервіс: хейрлайн плюс 80px повітря під ним.

   Стеля ширини в прототипі не на цій обгортці, а успадкована — там усе
   лежить усередині .search-module-wrap. У нас такої спільної обгортки
   немає, тож вісь контенту тримає сама .story-panel: без неї три секції
   розтягувались на всю ширину сторінки й були ширші за картку пошуку.
   ============================================================ */
.story-panel {
  max-width: var(--content-max);
  margin-inline: auto;
  /* Повітря перед темним футером — 80px на всіх брейкпоінтах, як у
     прототипі. Раніше низ сторінки давав padding .page-home-new (40px
     десктоп / 32px мобайл); тепер він нульовий, щоб відступи не склались. */
  margin-bottom: var(--section-rhythm);
}

.story-lead {
  border-top: var(--hairline) solid var(--color-border-default);
  padding-top: var(--section-rhythm);
}

/* ============================================================
   16. Фінальний рядок кнопок — прототип 01.09

   Дві кнопки однакової ширини (гість); залогінений бачить одну.
   На мобайлі стають стовпчиком.
   Розміри не задаємо — .btn--lg уже несе всі CTA-токени
   (висота, кегль, падінги, вага, радіус), у т.ч. брендові.
   ============================================================ */
.final-cta {
  padding-block: var(--section-rhythm) 0;
}

.final-cta__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-md);
  /* Стеля 640px, як у прототипі (.s-cta-row) і як у заголовків секцій:
     без неї на 1440px дві кнопки розтяглися б на всю ширину контенту
     й перестали читатися як кнопки.

     Стелю раніше було знято, бо незалогінений бачив ТРИ кнопки й на 640px
     кожній лишалось ~200px. Кнопки «Zarejestruj się» тут більше немає
     (рішення 02.09, див. final-cta.ftlh), лишилось максимум дві — тобто
     рівно випадок прототипу, і причина знімати стелю відпала. */
  max-width: var(--section-head-max);
  margin-inline: auto;
}

/* Fill container, а не hug: обидві кнопки — рівні треки (прототип
   .s-cta-row > .btn). min-width 200px з .btn--lg лишається чинним
   і на таблеті не вмикається: трек там ≥287px. */
.final-cta__row > .btn {
  flex: 1 1 0;
  white-space: nowrap;
}

/* Залогінений бачить одну кнопку — розтягувати її на всі 640px не треба,
   лишається власна ширина з min-width .btn--lg. */
.final-cta__row > .btn:only-child {
  flex: 0 1 auto;
}

/* Посилання-кнопки не мають підкреслення від глобальних стилів <a>. */
.final-cta__row a.btn {
  text-decoration: none;
}

@media (max-width: 669px) {
  .final-cta__row {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta__row > .btn {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ============================================================
   17. «Szybki wybór» — колонки на десктопі (правка 02.09)

   Було: три горизонтальні рядки, що гортаються вбік, на всіх ширинах.
   Стало (як у прототипі): від 1040px групи стають колонками поруч, а чипи
   всередині гортаються вниз. Мобайл і таблет лишаються рядками; таблет
   лише обмежує ширину рядка --chips-max, теж за прототипом.
   ============================================================ */

/* Таблет: рядки лишаються, але не розтягуються на всю ширину. */
@media (min-width: 670px) {
  .quick-picks__scrollwrap {
    max-width: calc(var(--chips-max) + var(--space-xl) * 2);
  }
}

@media (min-width: 1040px) {
  /* Обмеження ширини з таблета знімається — колонки самі тримають сітку.
     Bleed теж знімається: у колонковому режимі рядок не гортається вбік,
     і виступ за контейнер лише зсував би колонку. */
  .quick-picks__scrollwrap {
    max-width: none;
    margin-inline: 0;
  }

  .quick-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  /* Заголовок «Szybki wybór» лишається на всю ширину над колонками. */
  .quick-picks__title {
    grid-column: 1 / -1;
    padding: 0;
  }

  /* Горизонтальні відступи були потрібні рядкам, що гортаються під край
     екрана; у колонках вони лише зсувають текст. */
  .quick-picks__group,
  .quick-picks__title + .quick-picks__group {
    margin-top: 0;
  }

  .quick-picks__sublabel {
    padding: 0;
  }

  .quick-picks__scroll {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-sm);
    padding: 0;
    overflow-x: visible;
    overflow-y: auto;
    max-height: calc(
      var(--chips-visible) * var(--chip-row-h)
      + (var(--chips-visible) - 1) * var(--space-sm)
    );
    scroll-snap-type: y mandatory;
    scroll-padding-block: 0;
  }

  .quick-pick {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    scroll-snap-align: start;
  }

  /* Підказка про скрол переїжджає з правого краю на нижній. */
  .quick-picks__scrollwrap::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--chips-fade-h);
    background: linear-gradient(
      to bottom,
      transparent,
      var(--color-bg-page) 70%,
      var(--color-bg-page) 100%
    );
  }
}

/* ============================================================
   18. Картка-ілюстрація секції «Więcej danych» (правка 02.09)

   Спершу ми вішали на обгортку клас b2b-results, щоб перевикористати
   card_result.css. Це не спрацювало: там картка — дев'ятиколонкова сітка
   на всю ширину рядка результатів (grid-template-columns: auto 28px auto
   minmax(64px,4fr) minmax(auto,260px) …), і в колонку 390px вона не
   влазить — звідси поламаний вигляд і горизонтальний скрол.

   Прототип малює картку інакше: флекс у колонку. Тому нижче перенесені
   його власні правила, заскоуповані на секцію, а b2b-results з обгортки
   прибрано. Справжня картка в /b/search не зачеплена.
   ============================================================ */

/* ---- токени ---- */
.login-benefits__states {
  /* Геометрія картки-ілюстрації — значення з прототипу 01.09.
     Тримаємо на секції, а не в :root: імена --pr-* збігаються з тими, що
     вживає справжня картка в /b/search, і глобальне оголошення перефарбувало
     б її. Брендові --bg-chip-fg і --chip-border живуть у tokens.css. */
  --pr-card-padding:   var(--space-lg) var(--space-md);
  --pr-card-gap:       var(--space-xl);
  --pr-second-padding: var(--space-sm) var(--space-md);
  --pr-border-inner:   rgba(217, 217, 217, .5);
  --pr-photo-w:        88px;
  --pr-photo-h:        120px;
  --pr-brand-size:     20px;
  --pr-brand-lh:       24px;
  --pr-text-size:      18px;
  --pr-price-size:     20px;
  --pr-price-col-max:  112px;
  /* Масштаб блоку ціни при наведенні — значення прототипу 01.09. */
  --pr-data-hover-scale: 1.12;
  --pr-icon:           28px;
  --pr-add-min:        120px;
  --pr-stock-shift:    2px;
  --pr-delivery-shift: 4px;
  --eu-icon:           16px;
  --eu-pill-size:      14px;
  --eu-item-gap:       5px;
  --eu-item-padding:   4px 9px 4px 7px;
  --info-tag-size:     14px;
  --info-tag-lh:       18px;
  --info-tag-padding:  4px 10px;
  --lock-size:         16px;
  --lock-gap:          6px;
  --lock-padding:      5px 6px;
  --lock-login-weight: 600;
  --stock-dot:         10px;
  --stock-gap:         6px;
  --qty-stepper-min:   84px;
  --qty-stepper-border: 1.5px;
  --cta-sm-height:     44px;
  --cta-sm-size:       15px;
}

.login-benefits__states .state .product-row {
  flex:1;
}

.login-benefits__states .product-row,
.login-benefits__states .product-row *,
.login-benefits__states .s-order-item {
  cursor:default;
}




.login-benefits__states.is-focus .pr-add {
  background:var(--color-bg-page);
  border:var(--hairline) solid var(--color-border-default);
  color:var(--color-text-on-light);
}

.login-benefits__states .product-row {
  background:var(--bg-input);
  border:none;
  box-shadow:var(--shadow-card);
  border-radius:var(--radius-sm);
  padding:var(--pr-card-padding);
  display:flex;
  flex-direction:column;
  gap:var(--pr-card-gap);
}

.login-benefits__states .pr-top--flat {
  border:none;
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-sm);
}

.login-benefits__states .pr-info--redesign {
  display:flex;
  gap:var(--space-xs);
  align-items:stretch;
  flex:1 1 auto;
  min-width:0;
}

.login-benefits__states .pr-image {
  flex:none;
  width:var(--pr-photo-w);
  height:var(--pr-photo-h);
  background:transparent;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-placeholder);
  overflow:hidden;
}

.login-benefits__states .pr-image img.pr-photo {
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}

.login-benefits__states .pr-text-col {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0;
  align-self:stretch;
  flex:1 1 auto;
  min-width:0;
}

.login-benefits__states .pr-brand-top {
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--pr-brand-size);
  line-height:var(--pr-brand-lh);
  color:var(--color-accent-primary);
}

.login-benefits__states .pr-specmodel-eu-wrap {
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}

.login-benefits__states .pr-info-text {
  display:flex;
  flex-direction:column;
  gap:0;
}

.login-benefits__states .pr-spec,
.login-benefits__states .pr-model {
  font-size:var(--pr-text-size);
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.login-benefits__states .pr-spec {
  color:var(--color-text-on-light);
}

.login-benefits__states .pr-model {
  color:var(--color-text-muted);
  margin-top:0;
}

.login-benefits__states .pr-eu-labels-redesign {
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  flex-wrap:nowrap;
}

/* Локальний виняток із прототипу: рядок EU-етикеток тримає nowrap, але його
   мінімальна ширина ~404px, а картка на 390px-екрані отримує 358px. Без
   переносу етикетки не влазять і вилазять із колонки поверх назви моделі. */
@media (max-width: 669px) {
  .login-benefits__states .pr-eu-labels-redesign {
    flex-wrap: wrap;
  }
}

.login-benefits__states .eu-item {
  display:flex;
  align-items:center;
  gap:var(--eu-item-gap);
  background:var(--bg-chip);
  border-radius:var(--radius-sm);
  padding:var(--eu-item-padding);
}

.login-benefits__states .eu-item svg {
  width:var(--eu-icon);
  height:var(--eu-icon);
  color:var(--bg-chip-fg);
  flex:none;
  fill:currentColor;
}

/* Літера етикетки йде за фоном пілюлі, як і її іконка вище: --bg-chip-fg
   це --text-on-light для INFR (пілюля світла, #ddd8d4 — там потрібне темне
   чорнило, 8.41:1 за ДС §10.11a) і --text-inverted для OTM (пілюля темна).
   Прототип робить те саме клієнтським перемикачем
   .page-home-new[data-brand="if"] .eu-pill — у нас бренд задається
   server-side вибором tokens.css, тож контраст дає брендовий токен. */
.login-benefits__states .eu-pill {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bg-chip-fg);
  font-family:var(--font-mono);
  font-size:var(--eu-pill-size);
  font-weight:400;
  line-height:1;
  border-radius:0;
  background:none;
  padding:0;
  flex:none;
}

.login-benefits__states .pr-price-col {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  text-align:right;
  flex:none;
  min-width:0;
  max-width:var(--pr-price-col-max);
  align-self:stretch;
  justify-content:space-between;
}

.login-benefits__states .pr-gross {
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--pr-price-size);
  color:var(--color-text-on-light);
}

.login-benefits__states .pr-netto {
  font-size:var(--pr-text-size);
  color:var(--color-text-muted);
}

.login-benefits__states .pr-availability {
  margin-top:0;
}

.login-benefits__states .pr-stock {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--stock-gap);
  font-size:var(--pr-text-size);
  color:var(--color-text-on-light);
  transform:translateY(var(--pr-stock-shift));
}

.login-benefits__states .stock-dot {
  width:var(--stock-dot);
  height:var(--stock-dot);
  flex:none;
  border-radius:50%;
  background:var(--status-success);
}

.login-benefits__states .pr-delivery {
  font-size:var(--pr-text-size);
  color:var(--status-success);
  margin-top:var(--space-xs);
  transform:translateY(var(--pr-delivery-shift));
}

.login-benefits__states .pr-price-lock {
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--lock-gap);
  width:100%;
}

.login-benefits__states .lock-label {
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  font-family:var(--font-body);
  font-size:var(--lock-size);
  color:var(--bg-chip-fg);
  background:var(--bg-chip);
  border-radius:var(--radius-chip);
  padding:var(--lock-padding);
  line-height:1.2;
  text-align:right;
  white-space:normal;
  width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word;
}

.login-benefits__states .lock-login {
  font-family:var(--font-body);
  font-size:var(--lock-size);
  font-weight:var(--lock-login-weight);
  color:var(--color-accent-primary);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  text-align:right;
  width:100%;
}



.login-benefits__states .pr-second--redesign {
  background:var(--bg-input);
  border:var(--hairline) solid var(--pr-border-inner);
  border-radius:var(--radius-sm);
  padding:var(--pr-second-padding);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}

.login-benefits__states .pr-segment-row {
  display:flex;
  justify-content:space-between;
  font-size:var(--pr-text-size);
  color:var(--color-text-muted);
}

.login-benefits__states .pr-attrs-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.login-benefits__states .pr-attrs-left {
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  color:var(--color-text-on-light);
}


.login-benefits__states .pr-chips {
  display:flex;
  gap:var(--space-xs);
}

.login-benefits__states .info-tag {
  border:var(--hairline) solid var(--color-border-default);
  background:var(--bg-chip);
  color:var(--bg-chip-fg);
  font-family:var(--font-body);
  font-size:var(--info-tag-size);
  line-height:var(--info-tag-lh);
  padding:var(--info-tag-padding);
  border-radius:var(--radius-sm);
  box-sizing:border-box;
}

.login-benefits__states .pr-purchase {
  display:flex;
  align-items:flex-start;
  gap:var(--space-lg);
}

.login-benefits__states .qty-stepper {
  display:flex;
  align-items:center;
  overflow:hidden;
  box-sizing:border-box;
  height:var(--qty-stepper-height);
  width:var(--qty-stepper-width);
  min-width:var(--qty-stepper-min);
  flex-grow:0;
  flex-shrink:1;
  border:var(--qty-stepper-border) solid var(--color-border-default);
  border-radius:var(--radius-pill);
  background:var(--bg-input);
}

.login-benefits__states .qty-btn {
  border:none;
  background:transparent;
  flex:none;
  width:var(--qty-btn-width);
  height:100%;
  font-size:var(--qty-btn-font-size);
  font-weight:400;
  line-height:1;
  color:var(--color-text-on-light);
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-benefits__states .qty-value {
  flex:1;
  text-align:center;
  font-family:var(--font-body);
  font-size:var(--qty-value-font-size);
  font-weight:700;
  line-height:var(--qty-value-font-size);
  color:var(--color-text-on-light);
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-benefits__states .cta {
  appearance:none;
  width:100%;
  border:none;
  background:var(--accent-primary);
  color:var(--text-inverted);
  font-family:var(--font-body);
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:var(--radius-pill);
  transition:background-color var(--motion-fast);
}

.login-benefits__states .cta-sm {
  height:var(--cta-sm-height);
  font-size:var(--cta-sm-size);
}

.login-benefits__states .pr-add {
  flex:1 1 0;
  min-width:var(--pr-add-min);
}

.login-benefits__states .cta:active {
  background:var(--accent-pressed);
  transform:scale(.985);
}

.login-benefits__states .cta:focus-visible {
  box-shadow:var(--focus-ring);
  outline:none;
}

.login-benefits__states .cta[disabled] {
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:default;
}

.login-benefits__states .page-home-new[data-brand="if"] .info-tag {
  border-color:var(--chip-border);
  color:var(--text-on-light);
}

.login-benefits__states .page-home-new[data-brand="if"] .product-row,
.login-benefits__states .page-home-new[data-brand="if"] .pr-second,
.login-benefits__states .page-home-new[data-brand="if"] .pr-top {
  border-radius:var(--radius-md);
}

.login-benefits__states .page-home-new[data-brand="if"] .cta {
  border-radius:var(--radius-md);
}

/* ============================================================
   19. «Opony w promocji» — прототип 03.09

   Стос акційних карток перед «Szybki wybór». Перенесено з прототипу
   практично один в один (лише токени зведені під наш бридж і колір
   заголовка/шрифт — під ту саму формулу, що в сусідніх секцій).

   НЕ перенесено (поза межами цього блоку):
   - .page-home-new[data-brand="if"] — прототипний перемикач бренду
     кліком; у нас бренд задається server-side вибором tokens.css, такого
     атрибута ніде не рендериться — мертвий селектор в новому коді не
     повторюємо;
   - .page-home-new[data-user-state="logged-in"] .s-data{display:none} —
     ховає ЧУЖУ секцію «Więcej danych» при логіні; це не про акції, а про
     login-benefits, окреме рішення поза цією задачею;
   - глобальний @media(prefers-reduced-motion){*{...}} — надто широкий;
     редукцію руху тут тримаємо по компоненту, як і в решті файлу.
   ============================================================ */

/* Крок до «Szybki wybór». У прототипі сусід — .home-chips-outer, у нас
   та сама секція зветься .quick-picks. Верхнього відступу в .promo немає:
   його дає --after-cta-space знизу від CTA пошуку. */
.promo + .quick-picks {
  margin-top: var(--space-3xl);
}

.promo-head {
  margin: 0 0 var(--space-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

/* Та сама формула, що в «Szybki wybór» і «Więcej danych»: --font-family-mono
   + --color-heading, а не прототипні --font-heading/--heading-color, яких
   у нашому бриджі немає. */
.promo-title {
  margin: 0;
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* ----------------------------------------------------------
   Стос акційних карток
   Картки лежать одна на одній, нижні визирають ліворуч — у той самий бік,
   куди йде рух свайпу. Уся геометрія — одна вісь X: ні зсуву по вертикалі,
   ні масштабу, глибину несуть відступ і прозорість.
   ---------------------------------------------------------- */
.promo {
  /* Вісь контенту, як у решти секцій сторінки (заголовок, картка пошуку,
     «Szybki wybór», оповідні секції). Без цього .promo була єдиною секцією
     без стелі: на 1440px вона розтягувалась на 1356px проти 1280px у
     сусідів, і заголовок «Opony w promocji» стояв лівіше за всі інші. */
  max-width: var(--content-max);
  margin-inline: auto;
  /* Відліт іде за межі стосу; clip ріже тільки по горизонталі й не робить
     секцію контейнером прокрутки — інакше на мобайлі з'явилась би
     горизонтальна смуга. */
  overflow-x: clip;
  --promo-peek: var(--space-md);
  /* Власний темп стосу, не --motion-enter (180ms) — той розрахований на
     мікровідгуки, а тут рух несе зміст (верхня пішла, наступна відкрилась) і
     потребує часу, який видно.
     ⚠ У ДС кроку для рухів такого масштабу немає — третій темп поверх
     --motion-fast/--motion-enter, легалізувати окремо. */
  --promo-motion: 520ms cubic-bezier(.22, .61, .36, 1);
  --promo-fade: 260ms cubic-bezier(.22, .61, .36, 1);

  /* ---- локальні токени картки .pr-promo ----
     Ті самі імена, що вже вживає card_result.css для справжньої картки
     каталогу (--pr-*, --eu-*, --info-tag-*, --lock-*, --stock-*,
     --qty-stepper-*, --cta-sm-*) — тому не в :root, а тут, за тим самим
     принципом, що вже застосований у .login-benefits__states (блок 18):
     глобальне оголошення перефарбувало б справжню картку в /b/search.
     Значення — з прототипу 03.09, ідентичні тим, що вже стоять у
     login-benefits__states (той самий компонент .pr-promo). */
  --pr-photo-w: 88px;
  --pr-photo-h: 120px;
  --pr-brand-size: 20px;
  --pr-brand-lh: 24px;
  --pr-text-size: 18px;
  --pr-price-size: 20px;
  /* Масштаб блоку ціни при наведенні — значення прототипу 01.09. */
  --pr-data-hover-scale: 1.12;
  --eu-icon: 16px;
  --eu-item-gap: 5px;
  --eu-item-padding: 4px 9px 4px 7px;
  --eu-pill-size: 14px;
  --info-tag-size: 14px;
  --info-tag-lh: 18px;
  --info-tag-padding: 4px 10px;
  --lock-size: 16px;
  --lock-gap: 6px;
  --lock-padding: 5px 6px;
  --stock-dot: 10px;
  --stock-gap: 6px;
  --qty-stepper-border: 1.5px;
  --pr-add-min: 120px;
  --cta-sm-height: 44px;
  --cta-sm-size: 15px;
  /* Зона тапу крапки — §11.1, той самий DS-константа 44px, що й в інших
     інтерактивних елементах (--btn-md-height/--qty-stepper-height). */
  --tap-h: 44px;
}

.promo-deck {
  width: 64%;
  margin-inline: auto;
  /* pan-y: вертикальний скрол сторінки лишається браузеру, горизонтальний
     жест забирає стос. */
  touch-action: pan-y;
  cursor: grab;
}
.promo-deck.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Усі картки в одній комірці сітки, а не абсолютом: розмір стосу задає
   найбільша, і при перегортанні нічого не стрибає. */
.promo-stage {
  display: grid;
}
.promo-slide {
  grid-area: 1 / 1;
  transition: transform var(--promo-motion), opacity var(--promo-fade);
  will-change: transform, opacity;
}
.promo-slide[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.promo-slide[data-pos="1"] {
  transform: translateX(calc(var(--promo-peek) * -1));
  opacity: .85; z-index: 2; pointer-events: none;
}
.promo-slide[data-pos="2"] {
  transform: translateX(calc(var(--promo-peek) * -2));
  opacity: .7; z-index: 1; pointer-events: none;
}

/* Визирок — це край картки, а не її тінь: --shadow-card має розмиття 24px,
   на смузі 12px лишалась сама тінь без картки. Нижнім карткам тінь знімається,
   межу дає хейрлайн. */
.promo-slide:not([data-pos="0"]) .pr-promo {
  box-shadow: none;
  border: var(--hairline) solid var(--border-default);
}
/* У стосі видно тільки край нижніх карток, без вмісту — інакше з-під верхньої
   визирали чужі ціни й етикетки. :not(.is-away) обов'язковий: без нього
   картка, яка щойно пішла, миттєво лишалась порожньою коробкою до кінця
   руху. */
.promo-slide:not([data-pos="0"]):not(.is-away):not(.is-incoming) .pr-promo > * {
  visibility: hidden;
}

/* Відліт: картка йде ліворуч щільною і тане лише наприкінці шляху (70%) —
   до того встигає зійти з-під нової картки, тож двох цін одна крізь одну не
   видно. */
.promo-slide.is-away {
  transform: translateX(-70%);
  opacity: 0;
  z-index: 4;
  transition: transform var(--promo-motion),
              opacity 180ms cubic-bezier(.4, 0, 1, 1) 340ms;
}
/* Поки картку повертають у хвіст стосу або тягнуть — без переходу. */
.promo-slide.no-anim { transition: none; }
/* Картка, яку тягнуть назад: повертається з-за лівого краю поверх усього
   стосу. */
.promo-slide.is-incoming { z-index: 5; opacity: 1; pointer-events: none; }
.promo-deck.is-dragging .promo-slide[data-pos="0"] { transition: none; }

@media (max-width: 1039px) {
  .promo { --promo-peek: var(--space-sm); }
  /* Стос на всю смугу, але з місцем ліворуч під два визирки — інакше вони
     опинялись би за краєм секції й їх зрізав би overflow-x. */
  .promo-deck { width: auto; margin-inline: calc(var(--promo-peek) * 2) 0; }
}

/* Під стосом — самі крапки. Стрілки й пауза зняті: керування несуть жест і
   крапки. §2.2.2 (зупинка руху довшого за 5с) закритий тим, що будь-яка
   ручна дія зупиняє автопрокрутку — реалізовано в JS. */
.promo-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.promo-dot {
  position: relative;
  width: var(--space-sm);
  height: var(--space-sm);
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  transition: background var(--motion-enter);
}
.promo-dot[aria-current="true"] { background: var(--accent-primary); }
.promo-dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Крапка 8px — менше за зону тапу §11.1, розширюємо псевдоелементом, щоб не
   роздувати саму крапку. */
.promo-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + var(--space-md));
  height: var(--tap-h);
}

/* ============================================================
   Картка акції · .pr-promo

   .product-row у прототипі — компонент, чия база визначена ОДИН РАЗ раніше
   у файлі (рядки 1207-1400, поруч із базовим .product-row картки-ілюстрації
   з блоку 18), а секція «Opony w promocji» лише ПЕРЕВИЗНАЧАЄ частину
   властивостей під горизонтальну сітку стосу.

   Перша версія цього блоку перенесла тільки override-шар (з розділу
   «Opony w promocji») і пропустила базовий шар — картка рендерилась без
   кольору статусу наявності (зелений --status-success), без стилю кнопки
   «Do koszyka» (.btn-secondary тут узагалі не була визначена), з неправильним
   кольором EU-пілюль. Тут обидва шари злиті в один селектор — так само,
   як це вже зроблено в .login-benefits__states .pr-text-col/.pr-price-col
   тощо (блок 18) для того самого компонента.
   ============================================================ */
.pr-promo {
  --promo-gap: var(--space-xl);
  --promo-gap-in: var(--space-sm);
  --promo-price-old: var(--chip-font-size);
  background: var(--bg-input);
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: stretch;
  column-gap: var(--promo-gap);
  padding: var(--space-lg);
  width: 100%;
}

.pr-promo .pr-image {
  grid-area: 1 / 1;
  flex: none;
  width: var(--pr-photo-w);
  height: var(--pr-photo-h);
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-placeholder);
  overflow: hidden;
}
.pr-promo .pr-image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.pr-promo .pr-text-col {
  grid-area: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--promo-gap-in);
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.pr-promo .pr-brand-top {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: var(--pr-brand-size);
  line-height: var(--pr-brand-lh);
  color: var(--color-accent-primary);
}
/* Розмір — код, моно, як усі розміри на сайті; nowrap+ellipsis з бази —
   довга назва/розмір не ламає рядок і не штовхає колонку ширше. */
.pr-promo .pr-spec {
  font-family: var(--font-family-mono);
  letter-spacing: -.02em;
  font-size: var(--pr-text-size);
  font-weight: 400;
  color: var(--color-text-on-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pr-promo .pr-attrs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
}
/* Base з b2b_card_result.ftlh:.pr-second--redesign .pr-attrs-left — цього
   правила для .pr-promo не було взагалі (був лише .login-benefits__states
   варіант, недоступний звідси), тож іконки не мали спільного flex-контейнера
   й переносились окремим рядком над EU-мітками замість стояти з ними в ряд. */
.pr-promo .pr-attrs-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-on-light);
}
/* typeIcon/seasonIcon (b2b_card_result.ftlh:138-147) рендерять <img
   class="type-icon"|"season-icon">. Розмір цих класів заданий у
   card_result.css:428 (.b2b-results .type-icon/.season-icon) — файлі, який
   на головній НЕ підключений. Без цього правила іконка не мала жодного
   обмеження розміру й розтягувалась на природний розмір SVG-файлу.
   Значення 24px — те саме, що вже стоїть у card_result.css, не нове. */
.pr-promo .type-icon,
.pr-promo .season-icon {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
}
/* Тултип-обгортка тих самих макросів — та сама причина: стилі живуть у
   card_result.css (рядки 115-154), яких тут немає. Без цього підказка при
   наведенні була б видимим нестилізованим текстом поруч з іконкою. */
.pr-promo .chip-tooltip-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  outline: none;
}
.pr-promo .chip-tip {
  position: absolute;
  background: var(--text-on-light);
  color: var(--text-inverted);
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 18px;
  padding: 5px 10px;
  border-radius: var(--radius-chip, 6px);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pr-promo .chip-tip.above-center {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.pr-promo .chip-tooltip-wrap:hover .chip-tip,
.pr-promo .chip-tooltip-wrap:focus-within .chip-tip { opacity: 1; }

.pr-promo .pr-eu-labels-redesign {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-xs);
}
.pr-promo .eu-item {
  display: flex;
  align-items: center;
  gap: var(--eu-item-gap);
  background: var(--bg-chip);
  border-radius: var(--radius-sm);
  padding: var(--eu-item-padding);
}
.pr-promo .eu-item svg {
  width: var(--eu-icon);
  height: var(--eu-icon);
  color: var(--bg-chip-fg);
  flex: none;
  fill: currentColor;
}
/* --bg-chip-fg — той самий брендовий міст, що вже веде колір іконки вище:
   --text-on-light для INFR (--bg-chip там світлий, #ddd8d4 — білий текст
   був би нечитабельний), --text-inverted для OTM (--bg-chip темний).
   Прототип досягає того самого клієнтським перемикачем
   .page-home-new[data-brand="if"] .eu-pill{color:var(--text-on-light)} —
   у нас бренд server-side, тож той самий контраст дає бридж-токен. */
.pr-promo .eu-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-chip-fg);
  font-family: var(--font-family-mono);
  font-size: var(--eu-pill-size);
  font-weight: 400;
  line-height: 1;
  flex: none;
}

.pr-promo .pr-second {
  grid-area: 1 / 3;
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  justify-content: space-between;
  gap: var(--promo-gap-in);
}
.pr-promo .pr-model {
  font-size: var(--pr-text-size);
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pr-promo .pr-segment-row {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-md);
  font-size: var(--pr-text-size);
  color: var(--color-text-muted);
}

.pr-promo .pr-price-col {
  grid-area: 1 / 4;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  justify-content: space-between;
  gap: var(--promo-gap-in);
  max-width: none;
  transform-origin: right center;
  transition: transform var(--motion-enter);
}
/* Той самий ховер-жест, що на картках /b/search: колонка даних трохи росте
   праворуч, наближаючи ціну. Був у базі (line 1207), пропущений при
   першому перенесенні — звідси картки акцій «не піднімались», на відміну
   від карток нижче на сторінці. §11.4 — гейтинг на тач, руху без ховера
   немає. Для гостя жест зайвий (у колонці замок, не ціна) — вимкнено
   нижче, у блоці «стан користувача». */
@media (hover: hover) and (pointer: fine) {
  .pr-promo:hover .pr-price-col { transform: scale(var(--pr-data-hover-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-promo:hover .pr-price-col { transform: none; }
}
/* Бейдж знижки — акцентна поверхня, не нейтральний чип. */
.info-tag--promo {
  display: inline-flex;
  align-self: flex-end;
  padding: var(--info-tag-padding);
  border-radius: var(--radius-sm);
  font-size: var(--info-tag-size);
  line-height: var(--info-tag-lh);
  background: var(--accent-primary);
  color: var(--text-inverted);
  border: var(--hairline) solid var(--accent-primary);
  font-weight: 700;
}
.pr-promo .pr-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  justify-content: flex-end;
}
.pr-promo .pr-gross {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: var(--pr-price-size);
  color: var(--color-text-on-light);
}
/* Вузол, якого немає в еталонній картці каталогу — доповнення компонента
   для акційної ціни. */
.pr-price-old {
  font-family: var(--font-family-body);
  font-size: var(--promo-price-old);
  color: var(--color-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}
.pr-promo .pr-price-lock {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--promo-gap-in);
  width: 100%;
}
/* Пілюля --bg-chip, як і в еталонній картці — не звичайний текст. */
.pr-promo .lock-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--lock-size);
  color: var(--bg-chip-fg);
  background: var(--bg-chip);
  border-radius: var(--radius-chip);
  padding: var(--lock-padding);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  width: auto;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.pr-promo .lock-login {
  font-size: var(--lock-size);
  font-weight: 600;
  color: var(--color-accent-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: right;
  width: auto;
}
.pr-promo .pr-availability {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.pr-promo .pr-stock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--stock-gap);
  font-size: var(--pr-text-size);
  color: var(--color-text-on-light);
  transform: none;
}
/* База: зелений статус, не брендовий акцент — наявність читається як
   позитивний сигнал незалежно від бренду. */
.pr-promo .stock-dot {
  width: var(--stock-dot);
  height: var(--stock-dot);
  border-radius: 50%;
  background: var(--status-success);
  flex: none;
}
.pr-promo .pr-delivery {
  font-size: var(--pr-text-size);
  color: var(--status-success);
  margin-top: 0;
  transform: none;
}

/* Степер над кнопкою, обидва на всю ширину колонки. */
.pr-promo .pr-purchase {
  grid-area: 1 / 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--promo-gap-in);
}
.pr-promo .qty-stepper {
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  height: var(--qty-stepper-height);
  width: 100%;
  min-width: var(--pr-add-min);
  flex: 0 0 auto;
  border: var(--qty-stepper-border) solid var(--color-border-default);
  /* §10.3: IF — не-pill (8px), OP — завжди повна пілюля (999px). */
  border-radius: var(--qty-stepper-radius);
  background: var(--bg-input);
}
.pr-promo .qty-btn {
  border: none;
  background: transparent;
  flex: none;
  width: var(--qty-btn-width);
  height: 100%;
  font-size: var(--qty-btn-font-size);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pr-promo .qty-value {
  flex: 1;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--qty-value-font-size);
  font-weight: 700;
  line-height: var(--qty-value-font-size);
  color: var(--color-text-on-light);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* CTA другорядного пріоритету: акція вже тягне увагу бейджем і ціною,
   заливка тут була б третім акцентом у тій самій картці. Базовий
   .btn-secondary (контур --color-border-default, текст --color-accent-primary)
   у файлі до цього моменту ніде не був визначений — картка рендерилась з
   голою override-дельтою (висота/кегль), без контуру й кольору тексту.

   Контур/текст/вага — через --btn-secondary-* (inforeisen/oponytomy
   tokens.css): на INFR прототип дає товщий акцентний контур і легшу вагу
   (.page-home-new[data-brand="if"] .btn-secondary), у нас той самий
   контраст без клієнтського перемикача бренду — брендовим значенням
   токена. */
.pr-promo .btn-secondary {
  height: var(--btn-md-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: var(--btn-md-radius);
  font-family: var(--font-family-body);
  font-weight: var(--btn-secondary-weight);
  border: var(--btn-secondary-border-width) solid var(--btn-secondary-border-color);
  color: var(--btn-secondary-color);
  transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .pr-promo .btn-secondary:hover { border-color: var(--border-hover-strong); }
}
.pr-promo .btn-secondary:active {
  border-color: var(--color-text-on-light);
  background: var(--bg-accent-tint-soft);
  transform: scale(.985);
}
.pr-promo .btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-promo .btn-secondary.pr-add {
  flex: 0 0 auto;
  height: var(--cta-sm-height);
  padding: 0 var(--space-lg);
  font-size: var(--cta-sm-size);
  width: 100%;
  min-width: var(--pr-add-min);
}

/* --- стан користувача ---------------------------------------------- */
/* Роль читається з .page-home-new[data-user-state] — home_new.ftlh
   виставляє його на реальний логін. Ролей рівно дві, проміжного стану
   немає, тому :not([data-user-state="logged-in"]) — це і є гість. */
.pr-promo .info-tag--promo[data-for="guest"] { display: none; }

.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-price,
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-availability,
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .info-tag--promo[data-for="user"],
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .qty-stepper,
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-add {
  display: none;
}

.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-price-lock {
  display: flex;
}
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .info-tag--promo[data-for="guest"] {
  /* Гостю рухається саме знижка, а не замок: замок — бар'єр, а не
     пропозиція. Рух і нічого крім руху. */
  display: inline-flex;
  align-self: flex-end;
  animation: promoTagMove 1.6s ease-in-out infinite;
}
@keyframes promoTagMove {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-home-new:not([data-user-state="logged-in"]) .pr-promo .info-tag--promo[data-for="guest"] {
    animation: none;
  }
}
/* Замок повністю статичний. Ховер-жест на колонці даних (щойно доданий
   вище) у каталозі підкреслює ціну, але в стані гостя в цій колонці лежить
   замок, і виходило б, що при наведенні на картку «дихає» саме він. */
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-price-col,
.page-home-new:not([data-user-state="logged-in"]) .pr-promo:hover .pr-price-col {
  transform: none;
  transition: none;
}
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-price-col,
.page-home-new:not([data-user-state="logged-in"]) .pr-promo .pr-purchase {
  justify-content: flex-start;
}

@media (max-width: 1039px) {
  .pr-promo {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    row-gap: var(--promo-gap);
    align-items: start;
  }
  .pr-promo .pr-attrs-row { margin-top: 0; }
  .pr-promo .pr-text-col,
  .pr-promo .pr-second,
  .pr-promo .pr-price-col,
  .pr-promo .pr-purchase { justify-content: flex-start; }
  .pr-promo .pr-availability { gap: var(--promo-gap-in); }
  .pr-promo .pr-attrs-row,
  .pr-promo .pr-eu-labels-redesign { flex-wrap: wrap; }
  .pr-promo .pr-image { grid-area: 1 / 1 / 3 / 2; }
  .pr-promo .pr-text-col { grid-area: 1 / 2; }
  .pr-promo .pr-second { grid-area: 2 / 2; }
  .pr-promo .pr-price-col { grid-area: 1 / 3 / 3 / 4; }
  .pr-promo .pr-purchase { grid-area: 1 / 4 / 3 / 5; }
}
@media (max-width: 669px) {
  .pr-promo {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-lg);
  }
  .pr-promo .pr-image { grid-area: 1 / 1; }
  .pr-promo .pr-text-col { grid-area: 1 / 2; }
  .pr-promo .pr-second { grid-area: 2 / 1 / 3 / 3; }
  .pr-promo .pr-price-col {
    grid-area: 3 / 1 / 4 / 3;
    justify-self: stretch;
    align-items: flex-end;
  }
  .pr-promo .pr-purchase { grid-area: 4 / 1 / 5 / 3; }
}