:root {
  --deckline-control-border-aa: #686868;
}

/* WooCommerce / plugin notices — dark surface, tinted border only (no solid CTA fills) */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
ul.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--black-card) !important;
  color: var(--white) !important;
  border: 1px solid var(--gray-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: var(--space-4) var(--space-5) !important;
}

.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-message,
.wc-block-components-notice-banner.is-success {
  border-color: var(--green-success) !important;
  border-left: 3px solid var(--green-success) !important;
}

.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
  border-color: var(--gold) !important;
  border-left: 3px solid var(--gold) !important;
}

.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-error,
ul.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-color: var(--error-text) !important;
  border-left: 3px solid var(--error-text) !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.wc-block-components-notice-banner .wc-block-components-button,
.wc-block-components-notice-banner a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--white) !important;
  border: 1px solid var(--gold) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease) !important;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.wc-block-components-notice-banner .wc-block-components-button:hover,
.wc-block-components-notice-banner a:hover {
  color: var(--gold) !important;
  background: var(--gold-10) !important;
  border-color: var(--gold) !important;
}

.woocommerce-message a:focus-visible,
.woocommerce-info a:focus-visible,
.woocommerce-error a:focus-visible,
.woocommerce-message .button:focus-visible,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:focus-visible,
.wc-block-components-notice-banner .wc-block-components-button:focus-visible,
.wc-block-components-notice-banner a:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: inherit !important;
}

.kontakt-form .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.kontakt-form .form-group select,
.kontakt-form .form-group textarea {
  border-color: var(--deckline-control-border-aa) !important;
}

.woo-archive__sort,
.woo-archive__sort select,
.woo-archive__search input[data-brx-filter],
.woo-archive-card__cart .quantity,
.woo-archive__filter-control--list .brx-input-indicator,
select.realizacje-filter__select,
.deckline-checkout-flow input.input-text,
.deckline-checkout-flow select,
.deckline-checkout-flow textarea,
.deckline-checkout-flow .select2-selection,
.deckline-checkout__segment,
.deckline-checkout__choice-card,
.deckline-checkout-flow #payment li.wc_payment_method,
.deckline-checkout__gus-button,
.deckline-checkout-flow #payment .p24-method-item {
  border-color: var(--deckline-control-border-aa) !important;
}

.deckline-checkout__segment-option {
  border-right-color: var(--deckline-control-border-aa) !important;
}

select.realizacje-filter__select:focus,
select.realizacje-filter__select:focus-visible {
  border-color: var(--gold) !important;
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

select.realizacje-filter__select:hover:not(:focus) {
  border-color: var(--gold) !important;
}

.woo-archive__sort:focus,
.woo-archive__sort:focus-visible,
.woo-archive__search input[data-brx-filter]:focus,
.woo-archive__search input[data-brx-filter]:focus-visible {
  border-color: var(--gold) !important;
}

.woo-archive__filter-control.woo-archive__filter-control--list li.brx-option-active .brx-input-indicator,
.woo-archive__filter-control.woo-archive__filter-control--list label.brx-option-active .brx-input-indicator,
.woo-archive__filter-control.woo-archive__filter-control--list input[type="checkbox"]:checked + .brx-input-indicator,
.woo-archive__filter-control.woo-archive__filter-control--list input[type="radio"]:checked + .brx-input-indicator {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.woo-archive__filter-control.woo-archive__filter-control--list li.brx-option-active .brx-input-indicator::after,
.woo-archive__filter-control.woo-archive__filter-control--list label.brx-option-active .brx-input-indicator::after,
.woo-archive__filter-control.woo-archive__filter-control--list input[type="checkbox"]:checked + .brx-input-indicator::after,
.woo-archive__filter-control.woo-archive__filter-control--list input[type="radio"]:checked + .brx-input-indicator::after {
  content: "" !important;
  display: block !important;
  background: var(--black) !important;
  background-color: var(--black) !important;
  border: none !important;
  border-width: 0 !important;
  opacity: 1 !important;
  width: var(--space-2) !important;
  height: var(--space-2) !important;
  transform: none !important;
  border-radius: calc(var(--space-1) / 2) !important;
}

.woo-archive__filter-control.woo-archive__filter-control--list label:has(input:focus-visible) .brx-input-indicator,
.woo-archive__filter-control.woo-archive__filter-control--list label:focus-within .brx-input-indicator {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

.woo-product__cross-sells .button,
.woo-product__cross-sells.brxe-product-upsells .button {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--gold) !important;
  border-radius: var(--radius) !important;
  color: var(--gold) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  padding-top: 10px !important;
  padding-right: var(--space-4) !important;
  padding-bottom: 10px !important;
  padding-left: var(--space-4) !important;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease) !important;
}

.woo-product__cross-sells .button:hover,
.woo-product__cross-sells .button:focus-visible,
.woo-product__cross-sells.brxe-product-upsells .button:hover,
.woo-product__cross-sells.brxe-product-upsells .button:focus-visible {
  background-color: var(--gold) !important;
  color: var(--black) !important;
  transform: translateY(-2px);
}

.deckline-checkout-flow input.input-text:focus,
.deckline-checkout-flow select:focus,
.deckline-checkout-flow textarea:focus,
.deckline-checkout-flow .select2-container--open .select2-selection {
  border-color: var(--gold) !important;
}

.deckline-checkout-flow input.input-text:focus-visible,
.deckline-checkout-flow select:focus-visible,
.deckline-checkout-flow textarea:focus-visible,
.deckline-checkout-flow .select2-selection:focus-visible,
.woocommerce-account input.input-text:focus-visible,
.woocommerce-account select:focus-visible,
.woocommerce-account textarea:focus-visible,
.woocommerce-form-login input:focus-visible,
.woocommerce-form-register input:focus-visible,
.fluent-auth form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
.fluent-auth form select:focus-visible,
.fluent-auth form textarea:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-color: var(--gold) !important;
}

.deckline-checkout-flow .is-invalid input,
.deckline-checkout-flow .is-invalid select,
.deckline-checkout-flow .is-invalid textarea {
  border-color: var(--error-text) !important;
}

.deckline-checkout__choice-card.is-selected,
.deckline-checkout-flow #payment li.wc_payment_method.is-selected {
  border-color: var(--gold) !important;
}

body :where(textarea, summary, [tabindex="0"]):focus-visible,
.quote-form__input:focus-visible,
.quote-form__textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Wyjątek od reguły wyżej dla suwaka „przed/po” na landingach (P02).
   Uchwyt `.product-uv__handle` ma `tabindex="0"` (ustawia product-lines.js), więc
   łapie się na `[tabindex="0"]:focus-visible` — a jest boksem 48 × 759 px, przez co
   obrys rysował dwie wysokie złote krawędzie po bokach separatora. Wskaźnika nie
   usuwamy (WCAG 2.4.7), tylko przenosimy na okrągły grip 48 × 48 px. */
.product-uv__handle:focus-visible {
  outline: none;
}

/* Wskaźnik dwutonowy, bo grip leży na zdjęciu deski. Zmierzone na `/natural/`:
   samo złoto względem fotografii ma 1,02:1 średnio i 1,44:1 w najgorszym punkcie,
   sama czerń spada do 1,21:1 na ciemnych słojach — żaden pojedynczy kolor nie
   spełnia 3:1 z SC 1.4.11. Złoto względem czerni to 8,55:1, więc para zawsze ma
   widoczną krawędź niezależnie od tego, co jest pod spodem. */
.product-uv__handle:focus-visible .product-uv__handle-grip {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--black);
}

/* Przeciąganie wskaźnikiem: `product-lines.js` woła `focus()` po `preventDefault()`,
   więc przeglądarka nie wiąże fokusu z myszą i `:focus-visible` trafia także przy
   drag. Znacznik odtwarza natywne zachowanie suwaka — ring wraca dopiero, gdy
   użytkownik faktycznie sięgnie po klawiaturę. */
.product-uv__handle[data-uv-pointer-focus]:focus-visible .product-uv__handle-grip {
  outline: none;
  box-shadow: none;
}

.quote-form__radio:focus-within,
.quote-form__checkbox:focus-within,
.quote-form__field:has(.quote-form__file-input:focus-visible) .quote-form__file-trigger {
  outline: 2px solid var(--qf-gold);
  outline-offset: 3px;
}

.deckline-checkout__inpost-button[aria-invalid="true"] {
  outline: 2px solid var(--error-text);
  outline-offset: 3px;
}

#brxe-qiwlgd .splide__pagination__page {
  display: grid !important;
  place-items: center;
  width: var(--space-6) !important;
  height: var(--space-6) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}

#brxe-qiwlgd .splide__pagination__page::before {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius);
  background: var(--gold-30);
  content: "";
}

#brxe-qiwlgd .splide__pagination__page.is-active::before {
  background: var(--gold);
}

@media (max-width: 768px) {
  .toc-link {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-form__radio,
  .quote-form__checkbox,
  .quote-form__file-trigger,
  .deckline-checkout__inpost-button {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}

/* Uniwersalny stan nieaktywny — globalna klasa Bricks `disabled` (id xx0nw6).
   Działa na kontrolce (a.disabled, button.disabled) i na kontenerze
   (.disabled — wygasza tylko interaktywnych potomków, tekst zostaje czytelny).
   Semantykę (disabled / aria-disabled / tabindex) domyka disabled-state.js. */
.disabled {
  cursor: not-allowed;
}

a.disabled,
button.disabled,
input.disabled,
select.disabled,
textarea.disabled,
.disabled a,
.disabled button,
.disabled input,
.disabled select,
.disabled textarea,
.disabled [role="button"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Subtelny scrollbar listy zakładek produktu na mobile (P06).
   Globalna klasa Bricks `woo-product__tabs` (id wps048) przestała ukrywać
   scrollbar; sam wygląd jest tutaj, bo audyt native-first gatewaya blokuje
   height/background/border-radius w Bricks `_cssCustom`. Geometria i tokeny
   jak w pasku Mojego konta (r4-konto-woo-ux). Desktop bez zmian — całość
   siedzi w `max-width: 768px`. Dosuwanie aktywnej zakładki: product-tabs.js. */
@media (max-width: 768px) {
  /* Bez `scroll-behavior: smooth`: płynne przewijanie rozjeżdża pozycję
     ustawianą programowo (zmierzone: `scrollLeft = 150` lądowało na 503,
     czyli na końcu zakresu), przez co dosuwanie zakładki przestaje działać.
     Dosunięcie ma być natychmiastowe i przewidywalne — patrz product-tabs.js. */
  .woo-product__tabs > .tab-menu {
    scroll-padding-inline: var(--space-4);
  }

  .woo-product__tabs > .tab-menu::-webkit-scrollbar {
    height: 6px;
  }

  .woo-product__tabs > .tab-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .woo-product__tabs > .tab-menu::-webkit-scrollbar-thumb {
    border-radius: var(--radius);
    background: var(--gold-30);
  }

  .woo-product__tabs > .tab-menu::-webkit-scrollbar-thumb:hover {
    background: var(--gold-50);
  }

  /* Firefox nie zna `::-webkit-scrollbar`, a w Blinku samo zadeklarowanie
     `scrollbar-width` wyłączyłoby powyższe pseudo-elementy i zostawiło
     znikający overlay. Standardowe właściwości tylko tam, gdzie ich potrzeba. */
  @supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) {
    .woo-product__tabs > .tab-menu {
      scrollbar-width: thin;
      scrollbar-color: var(--gold-30) transparent;
    }
  }
}

/* Pasek kategorii archiwum przechodzi w poziomy scroll dopiero po przyklejeniu (P07).
   Bricks emituje układ mobilny jako `.woo-archive__tabs-inner.brxe-div` i
   `.woo-archive__tab.brxe-div` (0,2,0) wewnątrz `@media (max-width: 480px)` —
   to jest breakpoint `mobile_portrait` tego motywu, odczytany z inline CSS.
   Selektory stanu mają (0,3,0), więc wygrywają samą specyficznością.
   Powyżej 480 px pasek jest już poziomym scrollerem, więc `.is-stuck` niczego
   tam nie zmienia i reguły celowo siedzą w tym samym breakpoincie co układ,
   który nadpisują. Klasę ustawia archive-tabs.js. */
@media (max-width: 480px) {
  .woo-archive__tabs.is-stuck .woo-archive__tabs-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--space-4);
  }

  /* Bez `nowrap` i `width: auto` pigułki zostają na 100% szerokości paska,
     bo tyle daje im `_width:mobile_portrait` globalnej klasy `woo-archive__tab`
     — poziomy scroll pokazywałby wtedy jedną pozycję naraz. */
  .woo-archive__tabs.is-stuck .woo-archive__tab {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
    white-space: nowrap;
  }
}

/* Rezerwacja miejsca po zwiniętym pasku. Bez niej wysokość spada w chwili
   przyklejenia o zmierzone 117,29 px (196,77 → 79,49 przy 390 px), dokument
   skraca się o 118 px, a scroll anchoring Blinka kompensuje to cofnięciem
   `scrollY` o 116,87 px. Przy samym progu takie cofnięcie wypycha stronę
   z powrotem przed sentinel, pasek się rozwija, anchoring wraca — i pasek
   drga. Margines trzyma ślad paska w przepływie na stałej wysokości; zmierzony
   efekt przełączenia to zerowe przesunięcie treści i zerowa zmiana `scrollY`.
   Wartość wylicza archive-tabs.js — poza mobile_portrait układ się nie zmienia,
   więc wychodzi 0 px i reguła jest tam bezczynna. */
.woo-archive__tabs.is-stuck {
  margin-bottom: var(--woo-archive-tabs-collapse, 0px);
}

/* Scrollbar paska kategorii (P14). Na `/sklep/` te dwie właściwości siedzą
   w `_cssCustom` elementu (`#brxe-aonhxy`) razem z blokiem `::-webkit-scrollbar`,
   który w Blinku jest **martwy** — zadeklarowanie `scrollbar-width` wyłącza
   pseudo-elementy webkitowe (ta sama pułapka co przy P06). Zmierzone na sklepie:
   realny scrollbar ma 10 px i kolory z `scrollbar-color`. Kopia paska w szablonie
   archiwum nie dostała `_cssCustom`, więc miała scrollbar domyślny (15 px) i pasek
   zwijał się do 84,5 px zamiast 79,49 px. Reguła klasowa wyrównuje oba paski. */
.woo-archive__tabs-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-30) transparent;
}

/* Stan aktywny pigułki na archiwach kategorii (P14). Szablon archiwum nie ma
   skąd wiedzieć, która kategoria jest bieżąca — jedynym wiarygodnym źródłem jest
   `aria-current="page"`, które Bricks nakłada sam na link celujący w oglądany
   term (zmierzone: dokładnie jedno trafienie na stronie). Globalna klasa
   `woo-archive__tab--active` nie wystarcza: dopięta z JS nie wygrywała kaskady
   na archiwum i pigułka zostawała szara, a zaszyta w szablonie podświetlałaby
   „Wszystko” na każdej kategorii. Wartości są celowo te same co w klasie
   globalnej, żeby oba paski wyglądały identycznie.
   Specyficzność: `(0,2,0)` wobec `(0,2,0)` Bricksa, a arkusz wtyczki ładuje się
   po inline CSS, więc wygrywa kolejnością. */
.woo-archive__tab[aria-current="page"] {
  border-color: var(--gold);
  background-color: var(--gold-10);
  color: var(--gold);
}

.woo-archive__tab[aria-current="page"]:hover,
.woo-archive__tab[aria-current="page"]:active {
  border-color: var(--gold-light);
  background-color: var(--gold-20);
  color: var(--gold-light);
}

.woo-archive__tab[aria-current="page"] .woo-archive__tab-count {
  color: var(--gold);
}