/* ─────────────────────────────────────────────────────────────────────── */
/* 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). */

/* Cart dense stepper (tablet+, 72×26): DS §9.3 dense вимагає ширшу кнопку
   на OP (24px vs 22px IF). Base main.css задає 22 для IF, тут піднімаємо
   до 24 для OP. Медіа-запит дублює main.css:1963. */
@media (min-width: 720px){
  .cart-item .qty-btn{ width:24px; }
}

/* ─────────────────────────────────────────────────────────────── */
/* 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 — option text stays --text-on-light on active row.
   Radio itself now follows DS §10.3 from home_new.css base (contour
   --text-placeholder in both states, inner dot --accent-primary of the
   brand — red on OTM). The "маркер вибору" exception to §2.2 applies here
   (same as the trigger-selected "×" documented in DS §10.3), so accent
   for the inner dot is intentional for OP, not a §2.2 violation. */
.page-home-new .filter-select__option.is-active,
.tior-b2b-filter .filter-select__option.is-active {
    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);
}


/* ─────────────────────────────────────────────────────────────── */
/* Search-input filled value — DS §10.8 (added 19.08.2026) pins    */
/* OP value text + × to var(--accent-primary) (red), same as INFR. */
/* Earlier override forced #4A4545 grey (pre-§10.8 spec) — removed */
/* to align with new DS. Base rule in home_new.css §7b already      */
/* uses var(--color-accent-primary) which proxies to --accent-     */
/* primary, so no explicit accent color is needed here.             */
/* ─────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────── */
/* Search-input variant (.filter-text--with-icon) — DS §10.8:      */
/* OP editing/filled border stays NEUTRAL (--text-placeholder),    */
/* not accent. DS reasoning: «акцент лише для Primary CTA» (§2.2). */
/* Value text + × still switch to accent on filled (see rule       */
/* above at line ~258).                                             */
/* Default border falls through to base --border-default (OTM      */
/* token = #D9D9D9, resolved in OTM tokens.css).                   */
/* ─────────────────────────────────────────────────────────────── */
/* Default border — pull OTM --border-default (#D9D9D9) since --color-border-default
   in the home namespace isn't rebranded for OP (DS §10.7 open discrepancy). */
.page-home-new .filter-text--with-icon .filter-text__box,
.tior-b2b-filter .filter-text--with-icon .filter-text__box {
    border-color: var(--border-default);
}
.page-home-new .filter-text--with-icon .filter-text__box:focus-within,
.tior-b2b-filter .filter-text--with-icon .filter-text__box:focus-within,
.page-home-new .filter-text--with-icon.is-selected .filter-text__box,
.tior-b2b-filter .filter-text--with-icon.is-selected .filter-text__box {
    border-color: var(--text-placeholder);
    box-shadow: none;
}

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

/* ─────────────────────────────────────────────────────────────── */
/* HEADER — OTM dark chrome + cardinal accent hairline             */
/* Reference: WhatsApp Image 2026-08-13 at 14.20.32 + design-      */
/* system_11.html §9.12 «варіант 4. Темний + акцентна лінія».      */
/* Structure/tokens per DS §9.12 OP para: bg #282424, text/logo    */
/* #FAFAFA, actions pill on --bg-surface-light (not elevated).     */
/*                                                                 */
/* Notes / decisions:                                              */
/*  - Logo file logo_2.svg is inherently black; user asked to keep */
/*    it as-is, so we flip it with filter:invert(1) instead of     */
/*    swapping the asset.                                          */
/*  - Tagline "Zawsze pod ręką" sits OUTSIDE the pill on the dark  */
/*    header, so it becomes text-inverted.                         */
/*  - PL|EN + profile + cart already read --text-default which on  */
/*    OTM = #282424 — perfect on the white pill; no override.      */
/*  - Home inset shadow (from main.css) is dropped: white inner    */
/*    highlight on black surface reads noisy.                      */
/* ─────────────────────────────────────────────────────────────── */
.header {
    background: var(--bg-chip);
    border-bottom: 2px solid var(--accent-primary);
}

/* Cancel the accent-hairline default set on tablet+ in main.css
   (border-module) — cardinal 2px line stays across all breakpoints. */
@media (min-width: 670px) {
    .header {
        border-bottom: 2px solid var(--accent-primary);
    }
}

.header__logo1 img,
.header__logo2 img {
    filter: invert(1);
}

.header__logo-tagline {
    color: var(--text-inverted);
    opacity: .8;
}

/* DS §9.12 (OP para) — divider inside the mobile Home pill uses
   --border-default (#D9D9D9), not --border-on-surface which is IF-only per
   §2.4. Flat-row divider (mobile non-Home + tablet + desktop) stays on
   --border-module (base rule) — same token both brands per DS §9.12 line
   3089/3090. Tablet+ pill was cancelled 2026-08-21, so the override no
   longer needs to reach it. */
.header_container--home-new .header__langs {
    border-right-color: var(--border-default);
}


/* Home variant — drop the light inset shadow (it was designed for the
   light IF page background and reads noisy on the dark surface). */
.header_container--home-new .header {
    box-shadow: none;
}

/* Mobile Results — actions is a FLAT row (no pill), so icons/PL|EN sit
   directly on the dark <header>. Flip them to text-inverted. Home keeps its
   white pill on mobile, so its icons/text stay dark.
   Updated 2026-08-21: tablet+ pill cancelled per DS §9.12 → same inverted
   repaint now needed at min-width:670px too (see block below). */
@media (max-width: 669px) {
    .header__icon-btn,
    .header__lang,
    .header__lang--active,
    .header__lang-divider,
    .header__tire-search {
        color: var(--text-inverted);
    }
    .header__lang:hover,
    .header__lang:focus,
    .header__lang--active:hover,
    .header__lang--active:focus {
        color: var(--text-inverted) !important;
    }

    /* Home pill (white bg) — restore dark icons/text so they remain readable. */
    .header_container--home-new .header__icon-btn,
    .header_container--home-new .header__lang,
    .header_container--home-new .header__lang--active,
    .header_container--home-new .header__lang-divider {
        color: var(--text-default);
    }
    .header_container--home-new .header__lang:hover,
    .header_container--home-new .header__lang:focus,
    .header_container--home-new .header__lang--active:hover,
    .header_container--home-new .header__lang--active:focus {
        color: var(--text-default) !important;
    }
}

/* Tablet+ (added 2026-08-21) — pill cancelled per DS §9.12, so EN|PL,
   divider and icons need --text-inverted on the dark OP header. Nav-links
   in the centered menu — DS §9.12 line 3051 asks for muted; base --text-muted
   (#8A8A8A) on --bg-chip (#282424) contrasts 3.4:1, unreadable per §3 line
   1826, so we route through --text-inverted-muted (rgba(250,250,250,.58),
   ≈8:1) instead. DS §9.12 "no colour change on hover" — no hover override. */
@media (min-width: 670px) {
    .header__icon-btn,
    .header__lang,
    .header__lang--active,
    .header__lang-divider {
        color: var(--text-inverted);
    }
    .header__lang:hover,
    .header__lang:focus,
    .header__lang--active:hover,
    .header__lang--active:focus {
        color: var(--text-inverted) !important;
    }
    .header__link,
    .header__link--active {
        color: var(--text-inverted-muted);
    }
}

/* ─────────────────────────────────────────────────────────────── */
/* Primary CTA `.btn--lg` («Pokaż opony») — тягне через             */
/* --btn-cta-* token, one source of truth з рештою OTM CTA         */
/* (cart-primary, checkout-next, confirm тощо). Values в            */
/* oponytomy/tokens.css §"Page-level Primary CTA".                  */
/* Base rule home_new.css:1102 — INFR values (48/12/16/18).         */
/* ─────────────────────────────────────────────────────────────── */
.page-home-new .btn--lg,
.tior-b2b-filter .btn--lg {
    height: var(--btn-cta-height);
    padding: var(--btn-cta-padding);
    border-radius: var(--btn-cta-radius);
    font-size: var(--btn-cta-font-size);
}

/* .tfb-btn-outline («Pokaż opony» на /b/search у .tfb-cta-row) — base
   rule b2b_filters.css:1706 hardcodes INFR 48/12. OTM тягне через CTA-tokens
   для однорідності з `.btn--lg` на home + рештою CTA. Border + text-color
   лишаються з base (outline пресет). */
.tior-b2b-filter .tfb-btn-outline {
    height: var(--btn-cta-height);
    padding: var(--btn-cta-padding);
    border-radius: var(--btn-cta-radius);
    font-size: var(--btn-cta-font-size);
}

/* ─────────────────────────────────────────────────────────────────────────
   DS §9.13 / §9.20 — «Wyczyść koszyk» (tertiary) на Oponytomy
   ─────────────────────────────────────────────────────────────────────────
   Базове правило фарбує .cart-clear-all у --accent-primary. Для Inforeifen це
   доречно (§3.2: акцент там застосовується ширше за CTA), для Oponytomy — ні:
   акцент зарезервований ВИКЛЮЧНО під Primary CTA, а очищення кошика ним не є.
   §9.20 формулює це як загальне правило: «будь-який неCTA-елемент Oponytomy,
   що досі хардкодить чи успадковує --accent-primary поза Primary CTA —
   вважати дефектом, приводити до нейтральної пари».
   Сусідній .tfb-clear (панель фільтрів) цей оверрайд уже мав; .cart-clear-all
   лишався пропущеним. */
.cart-clear-all        { color: var(--text-on-light); }
.cart-clear-all:hover  { color: var(--text-muted); }

/* DS §2.3 (23.08.2026) — --bg-surface-elevated звужено до admin-скоупу
   («поверхня, що несе таблицю; у storefront не застосовується»). Пігулка дій
   хедера — storefront, тож §9.12 для OP прямо каже брати --bg-surface-light:
   «на темному тлі елевація читається через приглушений білий, а не чистий».
   Значення в обох токенах однакове (#FAFAFA), тож це правка про правильне
   ім'я ролі, а не про колір.

   ⚠ ОБОВ'ЯЗКОВО в межах max-width:669px. Пігулка існує ЛИШЕ на мобільному
   Home — на таблеті й десктопі її скасовано 21.08.2026 (§9.12), і саме тому
   там лейбл мови та іконки перефарбовані в --text-inverted: під ними темний
   хедер, а не світла поверхня. Це правило без медіа-запиту (внесено й
   виправлено 2026-08-25) давало на широких ширинах світлий прямокутник із
   білим вмістом усередині — тобто невидимі мову, кошик і профіль. */
@media (max-width: 669px) {
	.header_container--home-new .header__actions {
		background: var(--bg-surface-light);
	}
}