/* =============================================================
   QuestSystem — warstwa integracji z wtyczkami.

   O !important w tym pliku (i tylko w tym pliku):
   ten arkusz gra na tym samym poziomie co wtyczki — bez warstwy (patrz
   notatka niżej). O remisie decyduje więc najpierw SPECYFICZNOŚĆ, potem
   kolejność wczytania (nasze arkusze idą po wtyczkach, priorytet 20).
   Wnioski praktyczne:
   • !important zostaje tam, gdzie wtyczka wstrzykuje styl inline albo
     maluje tę samą właściwość selektorem bardziej specyficznym niż nasz
     (deklaracja !important w arkuszu bije także atrybut style=""). Każda
     taka grupa ma komentarz z nazwą źródła.
   • Bez !important idą właściwości, których wtyczka w ogóle nie deklaruje
     — ale UWAGA: sama pojedyncza klasa (0,1,0) przegrywa z każdym
     bardziej specyficznym selektorem wtyczki. Zanim opuścisz !important,
     sprawdź selektor w jej arkuszu, a nie tylko nazwę właściwości.
   • Wartości, które wtyczka czyta ze zmiennych CSS, ustawiamy zmienną na
     elemencie — to wygrywa z :root niezależnie od specyficzności i jest
     zawsze lepsze niż !important (patrz swatche i przyciski wcboost).

   Zakres: CookieYes · Elementor + Ecomus Addons + Contact Form 7 ·
   wcboost (swatche, wishlist, porównywarka) · select2 · PayU/P24 ·
   wc-blocks · arkusz druku.
   ============================================================= */

/* BEZ warstwy @layer — świadomie. Arkusze WooCommerce, CookieYes i Elementora
   są bezwarstwowe, a reguła bez warstwy zawsze bije regułę w warstwie, choćby
   ta była bardziej specyficzna. Ten plik musi wygrywać z CSS wtyczek, więc gra
   na tym samym poziomie: o remisie decyduje kolejność wczytania, a nasze arkusze
   są spięte zależnościami i drukowane po wtyczkach (priorytet 20). */
  /* ===========================================================
     1. BANER ZGÓD (CookieYes, .cky-*)

     Układ NIEBLOKUJĄCY: pasek u dołu na całą szerokość, bez overlaya,
     widoczny na każdej stronie — także na koszyku i checkoucie.
     CookieYes wstrzykuje kolory jako style inline na .cky-consent-bar,
     .cky-title, .cky-notice-des i .cky-btn (style="background-color:…"),
     a geometrię trzyma we własnym arkuszu bez warstwy — stąd !important
     na kolorach, ramkach, promieniach i układzie flex tej sekcji.
     Żadnego przełącznika zgód nie ukrywamy i nie blokujemy.
     =========================================================== */

  .cky-consent-container {
    inset-inline: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Pasek u dołu: tło motywu, górna ramka 3px, zero zaokrągleń i cienia.
     Wymiary są mobile-first — wersję dla ≥768px ustawia media query na końcu sekcji. */
  .cky-consent-bar {
    background: var(--qs-bg) !important;
    color: var(--qs-ink) !important;
    border: 0 !important;
    border-top: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    max-width: 100%;
    font-family: var(--qs-sans);
  }

  /* Treść banera trzyma się tej samej osi co .qs-wrap. */
  .cky-notice {
    max-width: var(--qs-max);
    margin-inline: auto;
    padding: 0;
  }

  .cky-title {
    font-family: var(--qs-display) !important;
    font-weight: 400;
    font-size: 15px !important;
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-ink) !important;
    margin-block-end: 6px;
  }

  /* Opis w oknie o ograniczonej wysokości: baner nie rośnie w nieskończoność
     i nie zasłania treści ani CTA. Pełny tekst pozostaje dostępny (scroll).
     Na małym ekranie okno to maksymalnie 4.5 wiersza. */
  .cky-notice-des,
  .cky-notice-des p,
  .cky-notice-des span {
    font-family: var(--qs-sans);
    font-size: 12.5px !important;
    line-height: 1.45;
    color: var(--qs-body) !important;
  }
  .cky-notice-des {
    max-height: 4.5em;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cky-notice-des a {
    color: var(--qs-accent-text) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Przyciski w rzędzie z zawijaniem; akceptacja pełnej szerokości u dołu,
     najbliżej kciuka. Kolejność DOM (dostosuj → odrzuć → akceptuj) zostaje
     nienaruszona, żeby kolejność czytania i tabulacji zgadzała się z obrazem. */
  .cky-notice-btn-wrapper,
  .cky-prefrence-btn-wrapper { /* literówka „prefrence” jest w markupie CookieYes */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px !important;
  }
  .cky-notice-btn-wrapper { margin-block-start: 10px; }
  .cky-notice-btn-wrapper .cky-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cky-notice-btn-wrapper .cky-btn-accept { flex-basis: 100%; }

  /* Przyciski banera i okna preferencji — kwadratowe, ramka 3px, 44px dotyku. */
  .cky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 12px !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: var(--qs-shadow-sm);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px !important;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
    transition: background .12s, color .12s;
  }
  .cky-btn-accept { background: var(--qs-accent-text) !important; color: var(--qs-on-accent) !important; }
  .cky-btn-accept:hover { background: var(--qs-ink) !important; color: var(--qs-bg) !important; }
  .cky-btn-reject { background: var(--qs-ink) !important; color: var(--qs-bg) !important; }
  .cky-btn-reject:hover { background: var(--qs-accent-text) !important; color: var(--qs-on-accent) !important; }
  .cky-btn-customize,
  .cky-btn-preferences { background: var(--qs-surface) !important; color: var(--qs-ink) !important; }
  .cky-btn-customize:hover,
  .cky-btn-preferences:hover { background: var(--qs-tint) !important; }
  .cky-btn:focus-visible { outline: 3px solid var(--qs-accent-text); outline-offset: 3px; }

  /* --- Okno preferencji --- */
  .cky-overlay {
    background: rgba(22, 24, 27, .55) !important;                        /* fallback = --qs-ink @55% dla starszych silników */
    background: color-mix(in srgb, var(--qs-ink) 55%, transparent) !important;
  }

  .cky-modal { border-radius: var(--qs-radius) !important; }

  .cky-preference-center {
    background: var(--qs-surface) !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: var(--qs-shadow);
    font-family: var(--qs-sans);
  }
  .cky-preference-header {
    background: var(--qs-bg) !important;
    border-bottom: var(--qs-border) solid var(--qs-ink) !important;
    padding: 15px 20px;
  }
  .cky-preference-title {
    font-family: var(--qs-display) !important;
    font-weight: 400;
    font-size: 20px !important;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--qs-ink) !important;
  }
  .cky-btn-close {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent !important;
    border-radius: var(--qs-radius) !important;
  }
  .cky-preference-content-wrapper,
  .cky-accordion-header-des,
  .cky-accordion-body,
  .cky-gpc-wrapper .cky-gpc-desc {
    font-family: var(--qs-sans);
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--qs-body) !important;
  }
  .cky-preference-content-wrapper a,
  .cky-accordion-body a { color: var(--qs-accent-text) !important; text-decoration: underline; }

  .cky-accordion {
    border-bottom: var(--qs-border) solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
  }
  .cky-accordion:last-child { border-bottom: 0 !important; }
  .cky-accordion-btn {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 14.5px !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--qs-ink) !important;
    background: transparent !important;
  }
  .cky-always-active {
    font-family: var(--qs-mono);
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--qs-success-text) !important;
  }
  .cky-audit-table {
    background: var(--qs-surface) !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
  }
  .cky-audit-table .cky-cookie-des-table li {
    border-bottom: 2px solid var(--qs-line);
    font-size: 12.5px;
  }
  .cky-footer-wrapper { border-top: var(--qs-border) solid var(--qs-ink); }
  .cky-footer-shadow { display: none; } /* dekoracyjny gradient — w tym motywie nie ma gradientów */

  /* Przełączniki zgód: NIE ruszamy geometrii ani stanów — natywny suwak
     CookieYes jednoznacznie pokazuje włączone/wyłączone, a przemalowanie
     grozi zatarciem stanu lub zablokowaniem kliknięcia. Dokładamy wyłącznie
     widoczny focus, którego wtyczka nie zapewnia. */
  .cky-switch input:focus-visible {
    outline: 3px solid var(--qs-accent-text);
    outline-offset: 2px;
  }

  /* Plakietka ponownego otwarcia zgód */
  .cky-btn-revisit-wrapper {
    background: var(--qs-surface) !important;
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius) !important;
    box-shadow: var(--qs-shadow-sm);
  }
  .cky-btn-revisit {
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    border-radius: var(--qs-radius) !important;
  }

  /* --- Baner a pozostałe elementy przy dolnej krawędzi ---
     Pasek zakładek (.qs-tabbar) jest fixed przy dole z z-index 90, a CookieYes
     ma z-index rzędu 1e8 — bez podniesienia baner przykrywałby zakładki
     KONTO/KOSZYK do czasu wyrażenia zgody. Podnosimy go o te same 52px, które
     motyw rezerwuje jako padding-bottom body (48px pozycji + 3px ramki).
     Na checkoucie tab-baru nie ma (body dostaje .qs-checkout-page), więc baner
     siedzi przy krawędzi — tam pilnuje nas limit wysokości opisu i zapas niżej. */
  .qs-has-tabbar .cky-consent-container,
  .qs-has-tabbar .cky-btn-revisit-wrapper { bottom: 52px; }

  /* Zapas miejsca pod paskiem, żeby na wąskim ekranie nie zasłonił przycisku
     „ZAMAWIAM I PŁACĘ”. Selektor działa tylko wtedy, gdy pasek jest w DOM — po
     wyrażeniu zgody CookieYes go usuwa i zapas znika razem z nim. */
  @supports selector(:has(*)) {
    .qs-checkout-page:has(.cky-consent-bar) { padding-block-end: 200px; }
  }

  @media (min-width: 768px) {
    .cky-consent-bar { padding: 14px var(--qs-gutter) !important; }
    .cky-title { font-size: 16px !important; }
    .cky-notice-des,
    .cky-notice-des p,
    .cky-notice-des span { font-size: 13px !important; }
    .cky-notice-des { max-height: 5.5em; line-height: 1.5; }
    .cky-notice-group { display: flex !important; align-items: center; gap: 20px !important; }
    .cky-notice-btn-wrapper {
      flex: 0 0 auto;
      justify-content: flex-end;
      margin-block-start: 0;
      gap: 10px !important;
    }
    .cky-notice-btn-wrapper .cky-btn { flex: 0 0 auto; }
    .cky-notice-btn-wrapper .cky-btn-accept { flex-basis: auto; }
    .cky-btn { padding: 11px 18px !important; font-size: 13.5px !important; }
    @supports selector(:has(*)) {
      .qs-checkout-page:has(.cky-consent-bar) { padding-block-end: 0; }
    }
  }

  @media (min-width: 992px) {
    /* Od 992px tab-bar znika (03-layout.css), więc baner wraca do krawędzi. */
    .qs-has-tabbar .cky-consent-container,
    .qs-has-tabbar .cky-btn-revisit-wrapper { bottom: 0; }
  }

  /* ===========================================================
     2. ELEMENTOR + ECOMUS ADDONS + CONTACT FORM 7
     Strony budowane Elementorem (FAQ, O nas, Kontakt, strona główna
     sklepu) mają mówić tym samym językiem co szablony motywu.
     =========================================================== */

  /* Zestaw globalny Elementora dokleja klasę .elementor-kit-<id> do <body>
     i deklaruje na niej font oraz kolor poza warstwami — to jedyne miejsce,
     w którym musimy przywrócić typografię motywu dla całej strony. */
  [class*="elementor-kit-"] {
    font-family: var(--qs-sans) !important;
    color: var(--qs-ink) !important;
  }

  .elementor-widget-container,
  .elementor-widget-text-editor,
  .elementor-text-editor {
    font-family: var(--qs-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--qs-body);
  }
  .elementor-widget-container :is(p, ul, ol) + :is(p, ul, ol, h2, h3) { margin-block-start: .9em; }
  .elementor-widget-container a:not(.elementor-button) {
    color: var(--qs-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Nagłówki widgetów. Elementor i Ecomus generują typografię nagłówków
     z zestawu globalnego (arkusz bez warstwy), stąd !important na foncie. */
  .elementor-heading-title,
  .ecomus-heading {
    font-family: var(--qs-display) !important;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.08;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .ecomus-heading__icon { color: var(--qs-accent); }
  .elementor-heading-title { margin: 0; }

  /* Przycisk Elementora = .qs-btn--accent. Elementor deklaruje
     background-color, color, border-radius, padding i font-size w
     frontend.min.css (bez warstwy) oraz color na :hover/:focus/:visited. */
  .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 13px 22px !important;
    background-color: var(--qs-accent-text) !important;
    color: var(--qs-on-accent) !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: var(--qs-shadow);
    fill: currentColor;
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 15px !important;
    line-height: 1.2;
    text-align: center;
    transition: background .12s, color .12s;
  }
  .elementor-button:hover,
  .elementor-button:focus,
  .elementor-button:visited { color: var(--qs-on-accent) !important; }
  .elementor-button:hover {
    background-color: var(--qs-ink) !important;
    color: var(--qs-bg) !important;
  }
  .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; }
  .elementor-button-text { font: inherit; }

  /* Akordeon Ecomusa = .qs-acc.
     UWAGA: panel otwiera jQuery slideDown/slideUp (inline display + height),
     a ikony przełącza wtyczka klasą .ecomus-tab--active — dlatego nie
     ustawiamy tu ani display, ani height na .ecomus-accordion__content. */
  .ecomus-accordion {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
  }
  .ecomus-accordion__item + .ecomus-accordion__item { border-top: var(--qs-border) solid var(--qs-ink); }
  .ecomus-accordion__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 15px 18px;
    min-height: 44px;
    font-family: var(--qs-sans) !important; /* nagłówek h2–h6 z zestawu globalnego */
    font-weight: 800;
    font-size: 15px !important;
    line-height: 1.25;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ecomus-accordion__title-text { flex: 1 1 auto; color: var(--qs-ink); }
  .ecomus-accordion__title-text:hover { color: var(--qs-accent-text); }
  .ecomus-accordion__icon { order: 2; color: var(--qs-accent-text); } /* wskaźnik po prawej, jak w .qs-acc */
  .ecomus-accordion__icon svg { width: 14px; height: 14px; fill: currentColor; }
  .ecomus-accordion__title.ecomus-tab--active { background: var(--qs-tint); }
  .ecomus-accordion__content {
    padding: 0 18px 18px;
    font-size: 15px;
    color: var(--qs-body);
  }
  .ecomus-accordion__content :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: .8em; }

  /* Formularz kontaktowy (Contact Form 7) — pola jak .qs-field. */
  .wpcf7-form :is(
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="number"], input[type="date"],
    textarea, select
  ) {
    width: 100%;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    padding: 11px 14px;
    min-height: 46px;
    font-family: var(--qs-sans);
    font-size: 15px;
    color: var(--qs-ink);
  }
  .wpcf7-form :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--qs-accent-text);
    box-shadow: inset 0 0 0 1px var(--qs-accent-text);
  }
  .wpcf7-form ::placeholder { color: var(--qs-muted); }
  .wpcf7-form textarea { min-height: 150px; resize: vertical; }
  .wpcf7-form label {
    display: block;
    font-family: var(--qs-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--qs-muted);
  }
  .wpcf7-form p { margin-block-end: 16px; }
  .wpcf7-list-item { margin: 0 16px 0 0; }

  .wpcf7-form :is(input[type="submit"], button[type="submit"]),
  .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    width: auto;
    padding: 13px 22px;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .wpcf7-form :is(input[type="submit"], button[type="submit"]):hover,
  .wpcf7-submit:hover { background: var(--qs-ink); color: var(--qs-bg); }
  /* Reguła `:focus` wyżej łapie też `input[type="submit"]` i gasi outline,
     a podmieniona ramka ginie na tle przycisku (obie w --qs-accent-text).
     Przywracamy widoczny pierścień — 2.4.7, ten sam wzorzec co 07-pages.css. */
  .wpcf7-form :is(input[type="submit"], button[type="submit"]):focus-visible,
  .wpcf7-submit:focus-visible {
    outline: 3px solid var(--qs-accent-text);
    outline-offset: 3px;
    box-shadow: var(--qs-shadow);
  }

  /* CF7 deklaruje kolor podpowiedzi i ramkę komunikatu we własnym
     styles.css (bez warstwy) — stąd !important na tych dwóch kolorach. */
  .wpcf7-not-valid-tip {
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--qs-danger) !important;
    margin-block-start: 6px;
  }
  .wpcf7-form .wpcf7-not-valid { border-color: var(--qs-danger); }
  .wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius);
    font-weight: 700;
    font-size: 14.5px;
  }
  .wpcf7 form.sent .wpcf7-response-output { border-color: var(--qs-success) !important; }
  .wpcf7 form:is(.failed, .aborted, .invalid, .unaccepted, .spam) .wpcf7-response-output {
    border-color: var(--qs-danger) !important;
    color: var(--qs-danger);
  }

  /* ===========================================================
     3. WTYCZKI SKLEPOWE
     =========================================================== */

  /* --- wcboost: swatche wariantów ---
     Rozmiar i odstępy wtyczka czyta ze zmiennych zadeklarowanych na :root.
     Deklaracja tych samych zmiennych na elemencie wygrywa z odziedziczoną
     wartością bez względu na warstwy — dlatego geometria idzie bez
     !important. Zmienna …item-height nie jest w ogóle definiowana przez
     wtyczkę (błąd w jej arkuszu: dwa razy powtórzone …item-width), przez co
     kafle nie miały wysokości — uzupełniamy ją tutaj. */
  .wcboost-variation-swatches {
    --wcboost-swatches-item-width: 44px;
    --wcboost-swatches-item-height: 44px;
    --wcboost-swatches-item-padding: 0;
    --wcboost-swatches-item-gap: 8px;
    --wcboost-swatches-color-tooltip: var(--qs-ink);
    --wcboost-swatches-color-tooltip-text: var(--qs-bg);
  }

  /* Ramkę kafla wtyczka rysuje cieniem 0 0 0 1px — zastępujemy ją realną
     ramką 3px, więc trzeba wygasić jej box-shadow i promienie wariantów
     --round/--rounded (wszystko deklarowane w jej frontend.css). */
  .wcboost-variation-swatches__item {
    width: var(--wcboost-swatches-item-width);
    height: var(--wcboost-swatches-item-height);
    border: var(--qs-border) solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: none !important;
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    color: var(--qs-ink);
    transition: border-color .12s, box-shadow .12s;
  }
  .wcboost-variation-swatches__item:hover { border-color: var(--qs-ink) !important; }
  .wcboost-variation-swatches__item.selected,
  .wcboost-variation-swatches__item.is-active {
    border-color: var(--qs-ink) !important;
    box-shadow: var(--qs-shadow-sm) !important;
  }
  .wcboost-variation-swatches__item:focus-visible {
    outline: 3px solid var(--qs-accent-text);
    outline-offset: 3px;
  }
  /* Warianty tekstowe: szerokość ma wynikać z treści, nie ze zmiennej —
     robi to sama wtyczka regułą `width: auto !important` na kafle wariantu
     --button/--label, więc zmiennej NIE wolno ustawić na `auto`. Wtyczka
     liczy z niej `padding-inline: calc(var(--…item-width) / 2)`, a
     `calc(auto / 2)` jest nieprawidłowe na etapie wartości obliczonej:
     deklaracja padding-left/right przepada i tekst przykleja się do ramki.
     28px daje dokładnie zamierzone 14px odstępu po bokach. */
  .wcboost-variation-swatches--button,
  .wcboost-variation-swatches--label {
    --wcboost-swatches-item-width: 28px;
    --wcboost-swatches-item-padding: 0 14px;
  }
  .wcboost-variation-swatches--button .wcboost-variation-swatches__item,
  .wcboost-variation-swatches--label .wcboost-variation-swatches__item {
    min-width: 44px;
    background: var(--qs-surface);
  }
  .wcboost-variation-swatches__selected-label,
  .wcboost-variation-swatches__name {
    font-family: var(--qs-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--qs-muted);
  }
  /* Zapasowy wygląd zwykłego <select> wariantów, gdy swatche są wyłączone. */
  .variations select {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    padding: 11px 14px;
    min-height: 46px;
    font-weight: 700;
    font-size: 15px;
  }

  /* --- wcboost: lista życzeń i porównywarka ---
     Kolory wariantu „custom" wtyczka czyta ze zmiennych zadeklarowanych na
     :root (wishlist.css), a maluje je selektorem
     `.woocommerce .wcboost-wishlist-button--custom` — bardziej specyficznym
     niż nasza pojedyncza klasa, więc same deklaracje background/color poniżej
     by nie wystarczyły. Deklaracja tych samych zmiennych na elemencie wygrywa
     z odziedziczoną wartością z :root niezależnie od specyficzności — dlatego
     kolory ustawiamy zmiennymi, a nie !important. Szerokości ramki wtyczka nie
     trzyma w zmiennej (ma na sztywno 1px), więc tę jedną właściwość dociągamy
     selektorem o tej samej specyficzności co jej własny. */
  .wcboost-wishlist-button,
  .wcboost-products-compare-button {
    --wcboost-wishlist-button-color--text: var(--qs-ink);
    --wcboost-wishlist-button-color--border: var(--qs-ink);
    --wcboost-wishlist-button-color--background: var(--qs-surface);
    --wcboost-wishlist-button-hover-color--text: var(--qs-bg);
    --wcboost-wishlist-button-hover-color--border: var(--qs-ink);
    --wcboost-wishlist-button-hover-color--background: var(--qs-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--qs-surface);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    transition: background .12s, color .12s;
  }
  .woocommerce .wcboost-wishlist-button--custom { border-width: var(--qs-border); }
  .wcboost-wishlist-button:hover,
  .wcboost-products-compare-button:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .wcboost-wishlist-button:is(.added, .exists),
  .wcboost-products-compare-button.added { background: var(--qs-tint); color: var(--qs-accent-text); }
  .wcboost-wishlist-button__icon { margin: 0; }
  .wcboost-wishlist-button__icon svg { width: 1em; height: auto; fill: currentColor; }
  .wcboost-wishlist-title { font-family: var(--qs-display); font-weight: 400; text-transform: uppercase; }
  /* Jedyny obraz poza wzorcem .qs-media (markup wtyczki). Bez `max-height`
     zdjęcie portretowe rozpycha wiersz tabeli — kadrujemy je w kwadrat 88px. */
  .wcboost-wishlist__item .product-thumbnail img {
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    border: 2px solid var(--qs-ink);
  }
  /* Wtyczka deklaruje rozmyty cień powiadomienia (wishlist.css). */
  .wcboost-flyout-notice {
    background: var(--qs-surface);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow) !important;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14px;
  }

  /* --- select2 (pola kraju/województwa w klasycznej kasie) ---
     Cały arkusz select2 z WooCommerce jest bez warstwy i deklaruje tło,
     ramkę 1px, promień 4px oraz wysokość 28px — poniżej nadpisujemy dokładnie
     te właściwości, resztę zostawiamy wtyczce. Wysokość 46px daje dotyk 44px+. */
  .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    background: var(--qs-surface) !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 10px 12px;
    margin: 0 !important;
    font-family: var(--qs-sans);
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 24px 0 0 !important;
    line-height: 1.4 !important;
    font-size: 15px;
    color: var(--qs-ink) !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--qs-muted) !important; }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 12px !important;
    height: 100% !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--qs-ink) !important; }
  .select2-container--default.select2-container--focus :is(.select2-selection--single, .select2-selection--multiple),
  .select2-container--default.select2-container--open :is(.select2-selection--single, .select2-selection--multiple) {
    border-color: var(--qs-accent-text) !important;
  }
  /* Rozwijana lista jest doklejana bezpośrednio do <body>. */
  .select2-dropdown {
    background: var(--qs-surface) !important;
    border: var(--qs-border) solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    font-family: var(--qs-sans);
  }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 2px solid var(--qs-ink) !important;
    border-radius: var(--qs-radius) !important;
    padding: 9px 10px;
    font-size: 15px;
  }
  .select2-container--default .select2-results__option { font-size: 15px; padding: 9px 12px; }
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--qs-accent-text) !important;
    color: var(--qs-on-accent) !important;
  }

  /* --- PayU / Przelewy24: logotypy i wybór banku w podsumowaniu ---
     Obie listy (klasyczna .payu-list-banks i blokowa .payu-block-list-banks)
     mają w payu-gateway.css własne ramki 1px, tła i szerokości kafli. */
  .pbl-container .payu-list-banks li label,
  .payu-block-list-banks > .payu-bank {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px !important;
    background: var(--qs-surface) !important;
    border: 2px solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
    transition: border-color .12s, background .12s;
  }
  .pbl-container .payu-list-banks li:not(.payu-inactive) label:hover,
  .payu-block-list-banks > .payu-bank:not(.disabled):hover {
    background: var(--qs-tint) !important;
    border-color: var(--qs-ink) !important;
  }
  .pbl-container .payu-list-banks li label.active,
  .payu-block-list-banks > .payu-bank.active {
    background: var(--qs-tint) !important;
    border-color: var(--qs-ink) !important;
    box-shadow: var(--qs-shadow-sm);
  }
  .pbl-container .payu-list-banks li label img,
  .payu-block-list-banks > .payu-bank > img {
    height: 28px !important;
    width: auto !important;
    object-fit: contain;
    border-radius: var(--qs-radius) !important;
  }
  /* Logotyp bramki przy nazwie metody płatności (obie kasy). */
  .wc_payment_methods label img,
  .payu-block-method-logo img,
  .wc-block-components-radio-control__option img {
    display: inline-block;
    max-height: 26px;
    width: auto;
    border-radius: var(--qs-radius);
    vertical-align: middle;
  }
  .payu-accept-conditions .payu-conditions-description {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--qs-muted);
    text-align: start;
  }
  .payu-accept-conditions .payu-conditions-description a,
  .payu-accept-conditions .payu-conditions-description .payu-read-more {
    color: var(--qs-accent-text);
    text-decoration: underline;
  }

  /* --- wc-blocks: neutralizacja zaokrągleń ---
     WooCommerce Blocks twardo deklaruje border-radius 4px na przyciskach,
     polach, kafelkach adresu i podświetleniu wybranego radia (checkout.css,
     cart.css — bez warstwy). Motyw nie ma zaokrągleń nigdzie. */
  .wc-block-components-button:not(.is-link),
  .wc-block-components-text-input input,
  .wc-block-components-textarea,
  .wc-blocks-components-select .wc-blocks-components-select__container,
  .wc-block-components-address-card,
  .wc-block-components-panel,
  .wc-block-components-notice-banner,
  .wc-block-components-totals-coupon__input input,
  .wc-block-components-radio-control--highlight-checked::after,
  .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    border-radius: var(--qs-radius) !important;
  }
  .wc-block-components-button__text { font-family: var(--qs-sans); font-weight: 800; }

  /* ===========================================================
     4. DRUK
     Potwierdzenie zamówienia i strony informacyjne mają wyjść na białym,
     bez nawigacji, paska zakładek i banera zgód. Elementy wtyczek chowamy
     z !important, bo ich własne display: flex/block idzie bez warstwy.
     =========================================================== */
  @media print {
    .qs-nav,
    .qs-burger,
    .qs-drawer,
    .qs-header__actions,
    .qs-tabbar,
    .qs-marquee,
    .qs-footer__links,
    .cky-consent-container,
    .cky-modal,
    .cky-overlay,
    .cky-btn-revisit-wrapper,
    .wcboost-flyout-notices-container,
    .wcboost-wishlist-button,
    .wcboost-products-compare-button,
    .elementor-button,
    .qs-sr-only { display: none !important; }

    body,
    .qs-checkout-page,
    .qs-has-tabbar {
      background: var(--qs-surface);
      color: var(--qs-ink);
      padding: 0;
    }

    .qs-header { border-bottom: 2px solid var(--qs-ink); }
    .qs-footer { background: var(--qs-surface); color: var(--qs-ink); }
    .qs-footer .qs-logo,
    .qs-footer__copy { color: var(--qs-ink); }

    .qs-card,
    .qs-panel,
    .qs-acc,
    .qs-freeship,
    .ecomus-accordion { box-shadow: none; break-inside: avoid; }

    .qs-media { background: var(--qs-surface); }

    a { color: var(--qs-ink); }
  }


/* =========================================================================
   BLOK KONTAKTOWY WSTRZYKIWANY POZA SZABLONEM (#qs-contact-replacement)
   -------------------------------------------------------------------------
   Na stronie /kontakt/ działa snippet spoza repozytorium: dokleja na końcu
   dokumentu kompletną sekcję kontaktową (telefon, e-mail, godziny, adres,
   formularz) i skryptem podmienia nią treść Elementora. To realna, działająca
   treść, więc jej nie chowamy — ale przyszła z własną stylistyką: gradientowy
   nagłówek, zaokrąglenia 10px i czerwień #90200c zamiast naszego akcentu.
   Sprowadzamy ją do jednego języka wizualnego z resztą sklepu.

   `!important` jest tu konieczne i wyjątkowe: cała sekcja maluje się stylami
   inline, których nie da się nadpisać żadną specyficznością selektora.
   Docelowo ten snippet powinien zniknąć, a treść trafić do szablonu strony.
   ========================================================================= */

#qs-contact-replacement > div:first-child {
  background: var(--qs-bg) !important;
  border-block-end: var(--qs-border) solid var(--qs-ink);
}
#qs-contact-replacement h2,
#qs-contact-replacement h3 {
  font-family: var(--qs-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--qs-ink) !important;
}
#qs-contact-replacement a { color: var(--qs-accent-text) !important; text-decoration: underline; }

/* Kwadratowe kafelki ikon w kolorze akcentu zamiast zaokrąglonej czerwieni. */
#qs-contact-replacement [style*="border-radius:10px"],
#qs-contact-replacement [style*="border-radius: 10px"] {
  background: var(--qs-accent-text) !important;
  border-radius: 0 !important;
  border: 2px solid var(--qs-ink);
}

/* Karta „właściciel" i panel formularza — nasze ramki zamiast miękkich cieni. */
#qs-contact-replacement .qs-contact-main > div > div[style*="background"] {
  border-radius: 0 !important;
  border: var(--qs-border) solid var(--qs-ink);
  box-shadow: var(--qs-shadow);
}

#qs-contact-replacement input[type="text"],
#qs-contact-replacement input[type="email"],
#qs-contact-replacement input[type="tel"],
#qs-contact-replacement textarea {
  border: var(--qs-border) solid var(--qs-ink) !important;
  border-radius: 0 !important;
  background: var(--qs-surface) !important;
  font-family: var(--qs-sans) !important;
  font-size: 15px !important;
  color: var(--qs-ink) !important;
  min-height: 46px;
}
#qs-contact-replacement input:focus,
#qs-contact-replacement textarea:focus {
  outline: 3px solid var(--qs-accent-text);
  outline-offset: 1px;
}

#qs-contact-replacement input[type="submit"],
#qs-contact-replacement button[type="submit"] {
  min-height: 48px;
  padding: 12px 26px;
  background: var(--qs-accent-text) !important;
  color: var(--qs-on-accent) !important;
  border: var(--qs-border) solid var(--qs-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--qs-shadow);
  font-family: var(--qs-sans) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase;
}
#qs-contact-replacement input[type="submit"]:hover,
#qs-contact-replacement button[type="submit"]:hover {
  background: var(--qs-ink) !important;
  color: var(--qs-bg) !important;
}

/* Teaser rat PayU pod ceną — z wtyczki, domyślnie błękitny link systemowy. */
.payu-mini-installments-widget-details,
a[class*="payu-mini-installments"] {
  color: var(--qs-accent-text) !important; /* wtyczka stawia kolor inline na kotwicy */
  font-family: var(--qs-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  text-decoration: underline;
}

/* Wewnętrzny wypełniacz koloru w swatchu: wtyczka zaokrągla go na kole,
   przez co kwadratowa ramka itemu wyglądała na niedoróbkę. */
.wcboost-variation-swatches__item span,
.wcboost-variation-swatches__item::before {
  border-radius: 0 !important; /* inline/nadrzędny styl wtyczki */
}

/* =========================================================================
   BANER COOKIE — WZMOCNIENIE
   Zgłoszenie ze zrzutu (Safari, szeroki ekran): baner bez tła, treść strony
   prześwitywała między tytułem a przyciskami. Tło siedziało wyłącznie na
   .cky-consent-bar — w wariantach DOM, gdzie CookieYes rozkłada sekcje
   inaczej, powstawały przezroczyste przerwy. Tło i ramka idą teraz na SAM
   KONTENER, więc żaden wariant (pasek/box, każda szerokość) nie prześwituje.
   !important: CookieYes wstrzykuje kolory inline.
   ========================================================================= */
.cky-consent-container {
  background: var(--qs-bg) !important;
  border: var(--qs-border) solid var(--qs-ink) !important;
  box-shadow: var(--qs-shadow-md);
}
.cky-consent-container .cky-consent-bar {
  background: transparent !important;   /* tło ma kontener — bez dublowania */
  border: 0 !important;
  box-shadow: none;
}
/* Wariant pełnej szerokości: przyklejony do dołu, bez bocznych ramek. */
.cky-consent-container.cky-banner-bottom,
.cky-consent-container:not([class*="cky-box"]) {
  inset-inline: 0;
  border-inline-width: 0 !important;
  border-block-end-width: 0 !important;
}
/* Opis nie może znikać: zawsze widoczny, przewijalny po przekroczeniu limitu. */
.cky-consent-bar .cky-notice-des {
  display: block !important;
  overflow-y: auto;
}

/* Duplikat sekcji kontaktowej.
   Strona /kontakt/ ma tę samą treść dwa razy: raz z Elementora (w miejscu),
   raz z bloku wstrzykiwanego przez wtyczkę (dotąd pod stopką). Skrypt wtyczki
   przenosi formularz z wersji elementorowej do wstrzykniętej, więc zostawała
   po nim sekcja „Napisz do nas" bez formularza, a pod nią komplet danych
   jeszcze raz.

   Chowamy wersję z Elementora, ale WYŁĄCZNIE gdy blok wstrzyknięty istnieje —
   inaczej wyłączenie wtyczki zostawiłoby pustą stronę. `:has()` daje ten
   warunek bez skryptu, więc nic nie mignie przed ukryciem.

   Docelowo treść kontaktu powinna być w jednym miejscu; ta reguła znika
   razem ze snippetem. */
body:has(#qs-contact-replacement) .qs-page-head + .qs-section {
  display: none;
}