/* ─────────────────────────────────────────────────────────────────────── */
/* OPONYTOMY — component overrides (loaded only when siteId=2)             */
/*                                                                         */
/* Sibling to tokens.css. Difference in scope:                             */
/*   - tokens.css  → :root var overrides. Must load EARLY so downstream    */
/*                   CSS can consume them.                                 */
/*   - overrides.css → component rule overrides. Must load AFTER the       */
/*                   base CSS it overrides, or cascade will win the base.  */
/*                                                                         */
/* Per OponyToMy brand guide: «Кольорові лінки / другорядні дії →          */
/* --text-muted, ніколи accent». Accent (cardinal #B41522) is reserved     */
/* for Primary CTA only. These rules replace accent-tinted UI states with  */
/* muted-tinted equivalents on shared components that default to accent    */
/* under Inforeisen (b2b_filters.css).                                     */
/* ─────────────────────────────────────────────────────────────────────── */

/* Dropdown labels that default to --tfb-accent (cardinal) in b2b_filters.css.
   Two selectors because the second one (sort trigger, always "active") has
   4-class specificity — a 3-class override loses the cascade.
   2026-08-12: --text-muted → --text-default. Sort label was reading as
   metadata; DS spec pins it as a primary control label. */
.tfb-dd.is-selected > .tfb-dd-trigger .tfb-dd-label,
.tior-b2b-filter .tfb-sort .tfb-dd-trigger .tfb-dd-label {
    color: var(--text-default);
}

/* EAN toggle "on" state track — cardinal reserved for CTA (§2.2), so the
   accent is dropped; text-default keeps the "on" fill legible without pulling
   attention like the primary red would. Was --text-muted (2026-08-11), now
   --text-default per 2026-08-12 DS revision. */
.tfb-switch input:checked ~ .tfb-track {
    background: var(--text-default);
}

/* Dropdown chevron — accent under Inforeisen for open + sort states; muted here.
   (Default state chev is already muted in base b2b_filters.css, so no override needed.) */
.tfb-dd.is-open > .tfb-dd-trigger .tfb-chev,
.tior-b2b-filter .tfb-sort .tfb-dd-trigger .tfb-chev {
    color: var(--text-default);
}

/* Qty stepper — OP-specific overrides прибрано 2026-08-10 з переходом на
   pill-outline редизайн (design system §9.3). Тепер OP і IF ділять єдиний
   візуал (base .qty-stepper у main.css), різниця виноситься виключно
   в токенах (--qty-stepper-radius: 999 OP / 8 IF; --qty-stepper-height 44/40;
   ширина/шрифт кнопки — свої токени per site). */

/* ─────────────────────────────────────────────────────────────── */
/* Primary CTA hover per design system §9.1                       */
/* OTM Primary hover робить background swap на --accent-hover      */
/* (#CC1A28, світліший за default), не filter:brightness як INFR.  */
/* Селектори: усі buttons з базовим bg=--accent-primary, які в base */
/* CSS мають filter:brightness(1.06) на :hover.                    */
/* ─────────────────────────────────────────────────────────────── */
.btn-cart-primary:not(:disabled):hover,
.btn-cart-guest-primary:not(:disabled):hover,
.btn-modal-confirm:not(:disabled):hover,
.btn-checkout-next:not(:disabled):hover,
.btn-addr-save:not(:disabled):hover,
.btn-confirm:not(:disabled):hover,
.flt-apply:not(:disabled):hover {
    background: var(--accent-hover);
    filter: none;
}


/* ─────────────────────────────────────────────────────────────── */
/* Guest .lock-label — bg зрівняно з INFR (#ddd8d4, warm beige).   */
/* За рішенням дизайнерки 2026-08-09. Дефолт консюмить --pr-bg-chip */
/* (passthrough до --bg-chip), який під OTM = #282424 (чорний) і   */
/* робить бейдж темним — тут явно перебиваємо на INFR-значення.    */
/* Хардкод свідомий: нема бренд-нейтрального токена, який дає      */
/* #ddd8d4 в обох брендах (--bg-chip розходиться по брендах, а     */
/* всі інші neutral-warm токени INFR під OTM теж стають іншими).   */
/* ─────────────────────────────────────────────────────────────── */
.b2b-results .lock-label {
    background: #ddd8d4;
}


/* ─────────────────────────────────────────────────────────────── */
/* Applied-filter chips + Wyczyść filtr (b2b_filters.css .tfb-chip / */
/* .tfb-clear). За замовчуванням tinted --tfb-accent (=--accent-    */
/* primary, cardinal), що на OP порушує §2.2 accent-only-for-CTA.    */
/* Формула OP-варіанту (та сама, що §9.5 quick-pick selected + §9.7  */
/* toggle selected):                                                 */
/*   chip = суцільна інверсія bg --bg-chip (#282424) + text          */
/*          --text-inverted (#FAFAFA), border того ж кольору;        */
/*   × close = --text-inverted (той самий текст-колір);              */
/*   Wyczyść filtr link = --text-on-light (нейтральний, не акцент).  */
/* ─────────────────────────────────────────────────────────────── */
.tfb-chip {
    background: var(--bg-chip);
    border-color: var(--bg-chip);
    color: var(--text-inverted);
}
.tfb-chip button {
    color: var(--text-inverted);
}
.tfb-chip button:hover {
    color: var(--text-inverted);
    opacity: 0.7;
}
.tfb-clear {
    color: var(--text-on-light);
}


/* ─────────────────────────────────────────────────────────────── */
/* Chip / Rozmiar — статичний бейдж (design system §9.6).          */
/* Базовий клас в main.css має color:--text-on-light — для IF це    */
/* темний текст на світлому --bg-chip. На OP --text-on-light теж    */
/* темний (#282424 = --bg-chip), тому текст був би невидимий; тут   */
/* переопрацьовуємо на --text-inverted (#FAFAFA) — світлий текст   */
/* на брендовому чорному фоні, як задокументовано у DS §9.6.       */
/* ─────────────────────────────────────────────────────────────── */
.chip-rozmiar{
    color: var(--text-inverted);
}


/* ─────────────────────────────────────────────────────────────── */
/* Home quick-pick — selected variant (design system §9.5).       */
/* INFR: bg=chip-grey + border+text=--color-accent-primary (teal). */
/* OTM (тут):  суцільна інверсія — bg=--bg-chip (#282424),         */
/*             text=--text-inverted (#FAFAFA), border того ж кольору. */
/* Причина: --accent-primary в OTM зарезервовано під Primary CTA    */
/* (§2.2); червоний selected на quick-pick зчитувався б як error   */
/* state, а не «обрано». Та сама формула, що для static Chip/Rozmiar */
/* (§9.6). Використовую --bg-chip / --text-inverted напряму (не     */
/* home-scoped --color-bg-chip, який захардкоджений в home_new.css  */
/* під INFR значення). */
.page-home-new .quick-pick.is-selected {
    background: var(--bg-chip);
    border-color: var(--bg-chip);
    color: var(--text-inverted);
}


/* ─────────────────────────────────────────────────────────────── */
/* Home-таби — active (design system §9.4).                        */
/* INFR: color + border-bottom-color = --color-accent-primary.     */
/* OTM (тут): --text-on-light (без accent), per §2.2 accent-only-  */
/* for-CTA. Font-weight 600 і геометрія лишаються з base rule.     */
/* home_new.css узує home-scoped --color-* неймспейс, який         */
/* захардкоджений під INFR; тут явно переопрацьовуємо на           */
/* бренд-нейтральні токени.                                        */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .home-tab--active {
    color: var(--text-on-light);
    border-bottom-color: var(--text-on-light);
}


/* ─────────────────────────────────────────────────────────────── */
/* Toggle-піли (Run Flat / XL / FR / 48h) — selected + hover      */
/* (design system §9.7). INFR: border+text = --color-accent-primary */
/* (selected) / --color-accent-pressed (selected+hover). OTM (тут): */
/* --text-on-light для обох станів (accent зарезервовано під CTA,  */
/* §2.2). Bg лишається --color-bg-chip з base rule.                */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .toggle.is-active {
    border-color: var(--text-on-light);
    color: var(--text-on-light);
}
@media (hover: hover) and (pointer: fine) {
    .page-home-new .toggle.is-active:hover {
        border-color: var(--text-on-light);
        color: var(--text-on-light);
    }
}


/* ─────────────────────────────────────────────────────────────── */
/* SearchDropdown (.filter-select) — trigger states + selected     */
/* value (design system §10, §10.7 «code aligns to live OP, DS to  */
/* be closed on live-OP resolution»).                              */
/*                                                                 */
/* INFR base (home_new.css): hover = --color-text-on-light,        */
/* open/selected border = --color-accent-primary (teal).           */
/* Selected value color = --color-accent-primary.                  */
/*                                                                 */
/* OTM (тут): усі три border-state = --text-placeholder            */
/* (#8A8A8A), нейтрально-сірий без акценту. Selected value color   */
/* = --text-on-light (без червоного). §2.2 accent-only-for-CTA.    */
/* Селектори з .page-home-new/.tior-b2b-filter (specificity 0,2,1  */
/* та 0,3,1) — переможуть base :where() (specificity 0,1,1 та      */
/* 0,2,1). */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .filter-select__trigger:hover,
.tior-b2b-filter .filter-select__trigger:hover {
    border-color: var(--text-placeholder);
}
.page-home-new .filter-select__trigger[aria-expanded="true"],
.tior-b2b-filter .filter-select__trigger[aria-expanded="true"] {
    border-color: var(--text-placeholder);
}
.page-home-new .filter-select.is-selected .filter-select__trigger,
.tior-b2b-filter .filter-select.is-selected .filter-select__trigger {
    border-color: var(--text-placeholder);
}
.page-home-new .filter-select.is-selected .filter-select__value,
.tior-b2b-filter .filter-select.is-selected .filter-select__value {
    color: var(--text-on-light);
}
.page-home-new .filter-select--eu.is-selected .filter-select__label,
.tior-b2b-filter .filter-select--eu.is-selected .filter-select__label {
    color: var(--text-on-light);
}


/* ─────────────────────────────────────────────────────────────── */
/* Dropdown listbox + option states — INFR uses teal accent, but on */
/* OTM accent is CTA-only (§2.2). Border + option/radio active     */
/* colour all fall back to --text-on-light (#282424), same rule    */
/* already applied to trigger + selected value above.               */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .filter-select__listbox,
.tior-b2b-filter .filter-select__listbox {
    border-color: var(--text-placeholder);
}
/* Single-select radio — outer ring + inner dot in text-on-light. */
.page-home-new .filter-select__option.is-active,
.tior-b2b-filter .filter-select__option.is-active {
    color: var(--text-on-light);
}
.page-home-new .filter-select__option.is-active .filter-select__radio,
.tior-b2b-filter .filter-select__option.is-active .filter-select__radio {
    border-color: var(--text-on-light);
}
.page-home-new .filter-select__option.is-active .filter-select__radio::after,
.tior-b2b-filter .filter-select__option.is-active .filter-select__radio::after {
    background-color: var(--text-on-light);
}
/* Multi-select checkbox — solid fill + white tick, all in text-on-light. */
.page-home-new .filter-select--multi .filter-select__option.is-active .filter-select__radio,
.tior-b2b-filter .filter-select--multi .filter-select__option.is-active .filter-select__radio {
    background-color: var(--text-on-light);
    border-color: var(--text-on-light);
}
.page-home-new .filter-select--multi .filter-select__option.is-active .filter-select__radio::after,
.tior-b2b-filter .filter-select--multi .filter-select__option.is-active .filter-select__radio::after {
    background: transparent;
    border-color: var(--text-inverted);
}


/* ─────────────────────────────────────────────────────────────── */
/* EAN filled — softer black exception. --text-on-light on OTM is  */
/* #282424 which reads harsh for a full-width value; DS spec pins  */
/* the entered EAN to #4A4545. Scoped to EAN input inside filter-  */
/* text__box; other selects still use --text-on-light for value.   */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .filter-select.is-selected .filter-text__input,
.tior-b2b-filter .filter-select.is-selected .filter-text__input {
    color: #4A4545;
}

/* Filter dropdown label ("EAN", "Rozmiar", "Sezon", …) — DS spec pins these
   to --text-on-light for both brands. Base rule in home_new.css uses a home-
   scoped `--color-text-on-light: #323744` hardcoded literal, so on OTM the
   label rendered as INFR grey instead of the OTM #282424. Explicit override
   routes it through the OTM token. */
.page-home-new .filter-select__label,
.tior-b2b-filter .filter-select__label {
    color: var(--text-on-light);
}

/* ─────────────────────────────────────────────────────────────── */
/* Product-card info-tag (XL/FR/BMW/RunFlat/homolog) + EU labels    */
/* redesign (`.eu-item` + `.eu-pill` + `.eu-icon`).                */
/* Base (card_result.css) вже даэ dark bg на OTM через token       */
/* pass-through: `--pr-bg-chip` → `--bg-chip` = #282424.            */
/* Тут переопрацьовуємо лише text/icon-color на white та border у   */
/* .info-tag (щоб приховати INFR-рамку на темному pill).            */
/* ─────────────────────────────────────────────────────────────── */
.b2b-results .info-tag {
    border-color: var(--bg-chip);
    color: var(--text-inverted);
}
.b2b-results .pr-redesign .eu-item .eu-icon,
.b2b-results .pr-redesign .eu-item .eu-pill {
    color: var(--text-inverted);
}


/* Search-results sort control — OTM uses --text-default for the whole cluster
   (label + trigger value + icon). Base b2b_filters.css pins the "Sortowanie"
   label to --tfb-muted (#6b7280), the trigger value to --tfb-text (#323744)
   and the leading sort-icon to --tfb-muted — the INFR neutral scheme. DS spec
   for OTM promotes the sort control to text-default so it reads as a primary
   control, not muted metadata.
   Note: `.tfb-sort > span` (the "Sortowanie" label) is set to display:none by
   b2b_filters.css:1443 at all widths, so the visible bit users see is the
   trigger button — the .tfb-dd-label + .tfb-sort-icon inside it. */
.tior-b2b-filter .tfb-sort > span,
.tior-b2b-filter .tfb-sort .tfb-dd-trigger,
.tior-b2b-filter .tfb-sort .tfb-dd-label,
.tior-b2b-filter .tfb-sort .tfb-sort-icon,
.tior-b2b-filter .tfb-sort .tfb-chev {
    color: var(--text-default);
}