/* ============================================================
   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 */
  --color-bg-page:            #f1ebe2;
  --color-bg-surface-light:   #fafafa;
  --color-bg-surface-overlay: rgba(11, 12, 12, 0.56);
  --color-bg-input:           #ffffff;
  --color-bg-chip:            #ddd8d4;

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

  --color-text-primary:          #0d0e13;
  --color-text-primary-inverted: #fffaf2;
  --color-text-placeholder:      #9ba3af;
  --color-text-on-light:         #323744;
  --color-text-muted:            #6b7280;

  --color-border-default: #eaeaea;
  --color-border-surface: #e5e7eb;
  --color-border-module:  rgba(107, 114, 128, 0.4);
  --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;

  /* 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;
}

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

.page-home-new {
  min-height: 100vh;
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
  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: 1280px;
  margin: 0 auto;
  padding: var(--space-2xl) 0 0;
}

/* === 3. Hero heading === */
.hero-heading {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: var(--space-lg);
  text-align: right;
}

.hero-heading__line,
.hero-heading__line2 {
  margin: 0;
  font-family: var(--font-family-mono);
  font-weight: var(--font-label-small-mono-weight);
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--color-accent-primary);
  text-transform: uppercase;
}
.hero-heading__line2{
	color: var(--text-on-light, #323744);
	}

/* === 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: 1280px;
  margin: 0 auto;
}

.search-module {
  background-color: var(--color-bg-surface-light);
  border-radius: var(--radius-module);
  border: 1px solid var(--color-border-module);
  padding: var(--space-lg) var(--space-xl);
}

.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, rgba(0, 95, 110, 0.05));
}

.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; }

.search-module__actions {
  padding-top: var(--space-lg);
}

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

.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);
  }
  /* На мобайлі size + EU-label займають повний рядок. Раніше селектори були
     `.size-cluster` / `.size-slot--2` — застаріли після 2026-08-12 (size тепер
     один multi-select `.filter-select[data-select-id="sizeShortName"]`, а не
     два-слотний cluster). */
  .filters-row--wrap > .filter-select[data-select-id="sizeShortName"],
  .filters-row--wrap > .filter-select--eu {
    grid-column: 1 / -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;
}

/* === 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;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-bg-chip);
  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 {
  border-color: var(--color-text-on-light);
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__trigger[aria-expanded="true"] {
  border-color: var(--color-accent-primary);
}

.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);
  border: 1px solid var(--color-accent-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  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: rgba(0, 0, 0, 0.15);
  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: #6b7280;
  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: #6b7280;
  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;
}

:where(.page-home-new, .tior-b2b-filter) .filter-select__option:hover {
  background-color: 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 — new DS style: outer ring stays as-is when active,
   inner dot (filled in accent) marks the choice. Previous style filled the
   whole outer disc and put a white dot inside — reads as a badge, not a
   radio. Multi-select overrides below turn this into a checkbox. */
.filter-select__radio {
  order: 1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 50%;
  position: relative;
  background: #fff;
  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: #fff;
}

.filter-select__option.is-active .filter-select__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-accent-primary);
  transform: translate(-50%, -50%);
}

/* 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 #fff;
  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(--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(--color-status-danger, #e53935); }
}
.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: 1px solid var(--color-bg-chip);
  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. */
:where(.page-home-new, .tior-b2b-filter) .filter-select.is-selected .filter-select__trigger {
  border-color: var(--color-accent-primary);
}

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

/* === 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: 1px solid #bec5c8;
  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: rgba(107, 114, 128, 0.4);
    border-color: #bec5c8;
    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: 0 var(--space-lg);
	font-size: 18px;
	height: 48px;
	font-weight: 500;
	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, rgba(0, 95, 110, 0.06));
  box-shadow: none;
  filter: none;
}

:where(.page-home-new, .tior-b2b-filter) .btn--secondary:active {
  background-color: var(--bg-accent-tint-medium, rgba(0, 95, 110, 0.12));
  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 === */
: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);
}

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

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

/* Search-results page: "Wyszukiwanie zaawansowane" trigger pinned right, no
   border, lighter weight — per prototype stage2 (2026-08-12). Home tab
   accordion is untouched — scoped to `.tior-b2b-filter` only.
   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);
}

.eu-hint-text {
  font-family: var(--font-family-mono);
  font-size: var(--font-label-small-size);
  font-weight: var(--font-label-small-weight);
  /* Був placeholder-grey — тепер збігається з `.filter-select__label`
     та `.eu-hint-icons` (2026-08-12). */
  color: var(--color-text-on-light);
  text-transform: uppercase;
}

/* 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: #fff;
  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;
}

.eu-group {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 0.5px solid var(--color-border-default);
}
.eu-group:last-child { border-bottom: 0; }

.eu-group__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-on-light);
  text-transform: uppercase;
}

.eu-group__section {
  margin-top: var(--space-sm);
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-placeholder);
}

.eu-group__grades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-xs);
}

.eu-grade {
  flex: 1;
  min-width: 32px;
  padding: 6px 0;
  background: #eaeaea;
  border: 1.5px solid #eaeaea;
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-on-light);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.eu-grade:hover:not([aria-checked="true"]) {
  border-color: var(--color-text-on-light);
}
/* Selected state: JS sets inline border-color to the EU-palette colour and
   drops the fill; keep the base rule empty so inline styles win. */

.eu-noise-range {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.eu-noise-range__label {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-placeholder);
}
.eu-noise-range__input {
  min-width: 0;
  border: 1px solid var(--color-bg-chip);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: var(--font-family-mono);
  font-size: 14px;
  color: var(--color-text-on-light);
  background: var(--color-bg-input);
  outline: none;
  -moz-appearance: textfield;
}
.eu-noise-range__input::-webkit-outer-spin-button,
.eu-noise-range__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* === 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: 1280px;
  margin: 0 auto;
  padding: var(--space-2xl) 0 var(--space-3xl);
}

@media (max-width: 669px) {
  .quick-picks {
    max-width: 560px;
  }
}

.quick-picks__title {
  margin: 0;
  padding: 0 var(--space-xl);
  font-family: var(--font-family-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-primary);
  text-transform: uppercase;
}

.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);
}

.quick-picks__sublabel {
  padding: 0 var(--space-xl);
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-placeholder);
}

.quick-picks__scrollwrap {
  position: relative;
}

/* 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; }

.quick-pick {
  appearance: none;
  flex: none;
  padding: 8px 12px;
  border: 0.3px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-light);
  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);
  }
}
.quick-pick:active {
  background: var(--color-bg-chip);
  border-color: var(--color-text-on-light);
  transform: scale(.98);
}
.quick-pick.is-selected {
  background: var(--color-bg-chip);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  font-weight: 500;
}

/* 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 {
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
  }
  :where(.page-home-new, .tior-b2b-filter) .hero-section_new {
    padding-top: var(--space-lg);
  }

  .hero-heading__line,
  .hero-heading__line2 {
    font-size: 22px;
    line-height: 26px;
  }

  /* Card style: flatter, borderless, less padding. */
  .search-module {
    padding: var(--space-md);
    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;
  }
}