/* QuestSystem — strony: główna, blog, treści statyczne, konto, listy, wyniki, 404.
   Zasada podziału: prymitywy formularzy stron aplikacyjnych są tu zawężone do
   .qs-app--account / .qs-app--list — koszyk i checkout mają własny arkusz
   (06-cart-checkout.css) i nie mogą być nadpisywane przez ogólne reguły stąd. */

/* 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. WSPÓLNE ELEMENTY PODSTRON
     ========================================================= */

  /* .qs-crumbs i .screen-reader-text definiuje 05-shop.css. Nie powtarzamy ich
     tutaj: oba arkusze są bezwarstwowe, a 07 ładuje się po 05, więc kopia
     wygrałaby remis specyficzności i przestawiła okruszki w całym sklepie. */

  .qs-page-head { padding-block: 30px 24px; }
  .qs-page-head__title {
    margin-block-start: 10px;
    font-size: clamp(30px, 6vw, 52px);
  }
  .qs-page-head__lead {
    margin-block-start: 10px;
    max-width: 62ch;
    font-size: 16px;
    color: var(--qs-body);
  }
  .qs-page-head__lead p { margin: 0 0 .6em; }
  .qs-page-head__lead p:last-child { margin-block-end: 0; }

  /* Pasek kategorii bloga (parts/post-categories.php). Odstęp musi być jawny —
     02-base.css zeruje marginesy, a nagłówek nie jest flexem, więc każdy element
     w .qs-page-head sam ustawia sobie margin-block-start. Więcej niż przy tekście,
     bo chipy mają 44px wysokości i przyklejone wyglądałyby na część akapitu. */
  .qs-page-head .qs-chips { margin-block-start: 18px; }

  /* Licznik w nagłówku — display ≥30px, więc pełny akcent jest bezpieczny. */
  .qs-count { color: var(--qs-accent); }

  .qs-searchform {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 18px;
    max-width: 560px;
  }
  .qs-searchform .qs-field { flex: 1 1 220px; min-height: 46px; }
  .qs-searchform .qs-btn { flex: 0 0 auto; }

  /* the_posts_pagination() opakowuje linki w <div class="nav-links"> */
  .qs-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .qs-pagination .page-numbers.dots { border-style: dashed; background: transparent; }

  /* =========================================================
     2. STRONA GŁÓWNA — HERO
     ========================================================= */

  .qs-hero { display: grid; }

  .qs-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px var(--qs-gutter) 24px;
    border-block-end: var(--qs-border) solid var(--qs-ink);
  }
  .qs-hero__title {
    font-size: clamp(34px, 7vw, 86px);
    letter-spacing: .005em;
  }
  .qs-hero__accent { color: var(--qs-accent); }
  .qs-hero__lead {
    max-width: 44ch;
    font-size: 15.5px;
    color: var(--qs-body);
  }
  .qs-hero__ctas { display: flex; flex-direction: column; gap: 10px; }
  .qs-hero__cta { font-size: 16px; padding: 15px 22px; }

  .qs-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    margin-block-start: 6px;
    font-size: 10.5px;
    color: var(--qs-body);
  }
  .qs-hero__trust li:not(:last-child)::after { content: " ·"; color: var(--qs-muted); }

  /* Siatka kafli. Linie 3px robi `gap` na tle atramentowym — dzięki temu
     kafle mogą swobodnie spanować wiersze bez żonglerki border-*. */
  .qs-hero__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--qs-border);
    aspect-ratio: 1;
    background: var(--qs-ink);
  }
  .qs-hero__tile { display: block; min-width: 0; min-height: 0; }

  /* Geometrię kafli-zdjęć wyznacza wyłącznie siatka. Bez tego `aspect-ratio`
     z .qs-media wchodzi do wyliczania wierszy: kafel 3-kolumnowy żąda wysokości
     równej swojej szerokości i rozpycha wszystkie wiersze (105px → 208px). */
  .qs-hero__photo { aspect-ratio: auto; }
  .qs-hero__tile--orange { background: var(--qs-p-orange); }
  .qs-hero__tile--red    { background: var(--qs-p-red); }
  .qs-hero__tile--blue   { background: var(--qs-p-blue); }
  .qs-hero__tile--green  { background: var(--qs-p-green); }
  .qs-hero__tile--ink    { background: var(--qs-p-black); }
  .qs-hero__tile--bg     { background: var(--qs-bg); }

  /* Mobile: układ 3×3 — dwa rzędy kolorów i jedno zdjęcie produktowe. */
  /* Pomarańcz i zieleń zamienione miejscami względem układu desktopowego.
     W tej siatce kafle t5 i t7 stoją jeden NAD drugim w trzeciej kolumnie,
     a od 14.09.2026 --qs-p-green to zmierzona zieleń pojemników #2D5238.
     Zieleń nad czernią #212529 dawała kontrast 1,75:1 i oba kafle czytały się
     jak jeden ciemny prostokąt — 3 px przerwy jest w kolorze --qs-ink, więc
     nie rozdziela ciemnego od ciemnego. Pomarańcz nad czernią daje 4,30:1. */
  .qs-hero__tile--t5 { grid-area: 1 / 1 / 2 / 2; }
  .qs-hero__tile--t2 { grid-area: 1 / 2 / 2 / 3; }
  .qs-hero__tile--t4 { grid-area: 1 / 3 / 2 / 4; }
  .qs-hero__photo--a { grid-area: 2 / 1 / 4 / 3; }
  .qs-hero__tile--t1 { grid-area: 2 / 3 / 3 / 4; }
  .qs-hero__tile--t7 { grid-area: 3 / 3 / 4 / 4; }
  .qs-hero__tile--t3,
  .qs-hero__tile--t6,
  .qs-hero__tile--t8,
  .qs-hero__photo--b { display: none; }

  @media (min-width: 768px) {
    .qs-hero__copy { gap: 20px; padding-block: 44px 40px; }
    .qs-hero__lead { font-size: 19px; }
    .qs-hero__ctas { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .qs-hero__cta { font-size: 17px; padding: 16px 28px; }
    .qs-hero__trust { justify-content: flex-start; gap: 8px 20px; font-size: 12.5px; }
  }

  /* Tablet: siatka nadal 3×3, ale bez rozciągania na całą szerokość pasma.
     Szerokość MUSI być jawna. `margin-inline:auto` przełącza element siatki na
     shrink-to-fit, a wtedy kolumny 1fr liczą się z max-content — puste kafle
     mają 0, więc cała siatka zapadała się do samych odstępów (6px). */
  @media (min-width: 768px) {
    .qs-hero__tiles { width: min(100%, 520px); justify-self: center; }
  }

  @media (min-width: 992px) {
    .qs-hero { grid-template-columns: minmax(0, 1fr) 420px; }
    .qs-hero__copy {
      padding: 60px 40px 52px;
      border-block-end: 0;
      border-inline-end: var(--qs-border) solid var(--qs-ink);
    }

    /* Pełna siatka 3×6 z referencji #1b. */
    .qs-hero__tiles {
      grid-template-rows: repeat(6, minmax(105px, 1fr));
      aspect-ratio: auto;
      width: auto;
      justify-self: stretch;
    }
    .qs-hero__tile--t3,
    .qs-hero__tile--t6,
    .qs-hero__tile--t8 { display: block; }
    .qs-hero__photo--b { display: block; }
    .qs-hero__tile--t3 { grid-area: 1 / 3 / 2 / 4; }
    .qs-hero__photo--a { grid-area: 2 / 1 / 4 / 3; }
    .qs-hero__tile--t4 { grid-area: 2 / 3 / 3 / 4; }
    .qs-hero__tile--t5 { grid-area: 3 / 3 / 4 / 4; }
    .qs-hero__tile--t6 { grid-area: 4 / 1 / 5 / 2; }
    .qs-hero__tile--t7 { grid-area: 4 / 2 / 5 / 3; }
    .qs-hero__tile--t8 { grid-area: 4 / 3 / 5 / 4; }
    .qs-hero__photo--b { grid-area: 5 / 1 / 7 / 4; }
  }

  /* =========================================================
     3. STRONA GŁÓWNA — KOLORY, BESTSELLERY, BANNER, OPINIE
     ========================================================= */

  .qs-colors__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .qs-colors__title { font-size: clamp(26px, 5vw, 44px); }
  .qs-colors__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
  .qs-swatch {
    display: block;
    width: 34px;
    height: 34px;
    border: var(--qs-border) solid var(--qs-ink);
  }
  .qs-swatch--orange { background: var(--qs-p-orange); }
  .qs-swatch--red    { background: var(--qs-p-red); }
  .qs-swatch--blue   { background: var(--qs-p-blue); }
  .qs-swatch--green  { background: var(--qs-p-green); }
  .qs-swatch--olive  { background: var(--qs-p-olive); }
  .qs-swatch--grey   { background: var(--qs-p-grey); }
  .qs-swatch--black  { background: var(--qs-p-black); }

  @media (min-width: 768px) {
    .qs-colors__inner {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
    }
  }

  .qs-best__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 18px;
  }
  .qs-best__title { font-size: clamp(26px, 4.4vw, 40px); }
  .qs-best__all { color: var(--qs-accent-text); font-weight: 700; }
  .qs-best__all:hover { color: var(--qs-ink); }

  /* Mobile #2e: karuzela ze scroll-snap. Od 768px wraca zwykła siatka. */
  .qs-grid--rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
  }
  .qs-grid--rail > * {
    flex: 0 0 min(200px, 66vw);
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .qs-grid--rail {
      display: grid;
      overflow: visible;
      scroll-snap-type: none;
      padding: 0;
    }
    .qs-grid--rail > * { flex: initial; }
  }

  .qs-banner { display: grid; }
  .qs-banner__media { border-block-end: var(--qs-border) solid var(--qs-ink); }
  .qs-banner__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 26px var(--qs-gutter);
    background: var(--qs-accent);
    color: var(--qs-ink);
  }
  /* Nagłówek i tekst na akcencie: atrament na #E8590C = 5.06:1 (AA). */
  .qs-banner__title { font-size: clamp(26px, 4.4vw, 42px); }
  .qs-banner__text { max-width: 46ch; font-size: 17px; font-weight: 600; }
  .qs-banner__cta { align-self: flex-start; }
  /* Domyślny pierścień focusa (--qs-accent-text) ginie na pomarańczowym tle. */
  .qs-banner__panel :where(a, button):focus-visible { outline-color: var(--qs-ink); }

  @media (min-width: 768px) {
    .qs-banner { grid-template-columns: 1fr 1fr; }
    .qs-banner__media {
      border-block-end: 0;
      border-inline-end: var(--qs-border) solid var(--qs-ink);
    }
    .qs-banner__panel { padding: 48px 40px; }
  }

  .qs-reviews__grid { display: grid; gap: 16px; }
  .qs-review { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px; }
  .qs-review__stars { font-size: 15px; letter-spacing: .15em; color: var(--qs-accent-text); }
  .qs-review__quote { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--qs-ink); }
  .qs-review__author { color: var(--qs-muted); }

  @media (min-width: 768px) {
    .qs-reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  }

  /* =========================================================
     4. BLOG — LISTA I WPIS
     ========================================================= */

  .qs-post-card {
    display: flex;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
  }
  .qs-post-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--qs-ink); }
  .qs-post-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--qs-ink);
  }
  .qs-post-card__media { border-block-end: var(--qs-border) solid var(--qs-ink); }
  .qs-post-card__media--empty {
    display: grid;
    place-items: center;
    background: var(--qs-tint);
    font-family: var(--qs-display);
    font-size: 18px;
    color: var(--qs-muted);
  }
  .qs-post-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    flex: 1;
  }
  .qs-post-card__date { color: var(--qs-muted); }
  .qs-post-card__title { font-family: var(--qs-sans); font-weight: 800; font-size: 19px; line-height: 1.25; text-transform: none; letter-spacing: 0; }
  .qs-post-card__excerpt { font-size: 14.5px; color: var(--qs-body); }
  .qs-post-card__more {
    margin-block-start: auto;
    font-weight: 800;
    font-size: 14px;
    color: var(--qs-accent-text);
  }
  .qs-post-card:hover .qs-post-card__more { color: var(--qs-ink); }

  .qs-article { max-width: 920px; }
  .qs-article__title { margin-block-start: 12px; font-size: clamp(30px, 5.4vw, 52px); }
  .qs-article__meta { margin-block-start: 10px; }
  .qs-article__media {
    margin-block-start: 24px;
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
  }
  .qs-article__pages { margin-block-start: 18px; }
  .qs-article__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; }

  /* =========================================================
     5. TREŚĆ REDAKCYJNA (.qs-prose)
     ========================================================= */

  .qs-prose {
    margin-block-start: 24px;
    padding: 22px var(--qs-gutter);
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--qs-body);
  }
  .qs-prose > :first-child { margin-block-start: 0; }
  .qs-prose > :last-child { margin-block-end: 0; }

  .qs-prose :is(h2, h3, h4) {
    font-family: var(--qs-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.08;
    letter-spacing: .01em;
    color: var(--qs-ink);
    margin-block: 1.4em .5em;
  }
  .qs-prose h2 { font-size: clamp(24px, 3.4vw, 30px); }
  .qs-prose h3 { font-size: clamp(20px, 2.8vw, 23px); }
  .qs-prose h4 { font-size: 18px; }
  .qs-prose p { margin-block-end: 1em; }
  .qs-prose strong { color: var(--qs-ink); }

  .qs-prose a {
    color: var(--qs-accent-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .qs-prose a:hover { color: var(--qs-ink); }

  .qs-prose :is(ul, ol) { margin-block-end: 1.2em; padding-inline-start: 1.3em; }
  .qs-prose li { margin-block: .35em; }
  .qs-prose ul { list-style: square; }
  .qs-prose ul li::marker { color: var(--qs-accent-text); }
  .qs-prose ol li::marker { color: var(--qs-accent-text); font-weight: 700; }

  .qs-prose img { height: auto; border: var(--qs-border) solid var(--qs-ink); }
  .qs-prose figure { margin-block: 1.4em; }
  .qs-prose figcaption {
    margin-block-start: 8px;
    font-family: var(--qs-mono);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }

  .qs-prose blockquote {
    margin-block: 1.3em;
    padding: 4px 0 4px 18px;
    border-inline-start: 6px solid var(--qs-accent);
    font-weight: 600;
    color: var(--qs-ink);
  }

  /* Tabele w treści: własny kontener przewijania, żeby strona nie jechała w bok. */
  .qs-prose :is(table, .wp-block-table) { margin-block: 1.3em; }
  .qs-prose .wp-block-table { overflow-x: auto; }
  .qs-prose table { border: var(--qs-border) solid var(--qs-ink); }
  .qs-prose :is(td, th) { border: 2px solid var(--qs-line); padding: 9px 12px; font-size: 14.5px; text-align: start; }
  .qs-prose th {
    background: var(--qs-tint);
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--qs-ink);
  }

  .qs-prose hr { margin-block: 1.6em; border: 0; border-block-start: var(--qs-border) solid var(--qs-ink); }
  .qs-prose :is(pre, code) { font-family: var(--qs-mono); font-size: 13.5px; }
  .qs-prose pre { overflow-x: auto; padding: 16px; background: var(--qs-tint); border: 2px solid var(--qs-line); }

  @media (min-width: 768px) {
    .qs-prose { padding: 32px 36px; }
  }

  /* Elementor (FAQ, O nas, Kontakt) buduje własny layout — ramka edytorialna
     musi mu oddać całą szerokość, inaczej sekcje mają podwójny padding. */
  .qs-prose .elementor { margin: -22px calc(-1 * var(--qs-gutter)); }
  .qs-prose .elementor a { text-decoration: none; font-weight: inherit; }
  @media (min-width: 768px) {
    .qs-prose .elementor { margin: -32px -36px; }
  }

  /* =========================================================
     6. TRYB APLIKACYJNY (koszyk, checkout, konto, listy)
     ========================================================= */

  .qs-app { padding-block: 22px 56px; }
  .qs-app__title { margin-block: 10px 20px; font-size: clamp(28px, 5vw, 44px); }
  .qs-app--checkout { padding-block-start: 26px; }

  /* Treść aplikacyjna nie dostaje ramki edytorialnej — panele rysują same
     wtyczki i szablony Woo. */
  .qs-app__content > :first-child { margin-block-start: 0; }

  /* Prymitywy formularzy — tylko konto i listy; koszyk/checkout mają 06-*.css. */
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="url"], input[type="number"],
    input[type="search"], input[type="date"], textarea, select
  ) {
    width: 100%;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    color: var(--qs-ink);
    font-family: var(--qs-sans);
    font-size: 15px;
    line-height: 1.35;
    padding: 11px 14px;
    transition: border-color .12s;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content textarea { min-height: 120px; resize: vertical; }
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--qs-accent-text);
    box-shadow: inset 0 0 0 1px var(--qs-accent-text);
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content ::placeholder { color: var(--qs-muted); opacity: 1; }

  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(.form-row, .woocommerce-form-row) > label {
    display: block;
    margin-block-end: 6px;
    font-family: var(--qs-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--qs-muted);
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content label.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--qs-sans);
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--qs-ink);
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content .required { color: var(--qs-accent-text); border: 0; }

  /* Kwadratowy checkbox/radio — znacznik jako tło SVG (pseudoelementy na
     kontrolkach formularza bywają zawodne w Safari). */
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(input[type="checkbox"], input[type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex: none;
    margin: 0;
    padding: 0;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    cursor: pointer;
    vertical-align: middle;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content input[type="checkbox"]:checked {
    background: var(--qs-accent-text) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6.51L5.48 12 16 1.49 14.49 0 5.48 9 1.49 5.01z' fill='%23ffffff'/%3E%3C/svg%3E") center / 11px auto no-repeat;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px var(--qs-surface), inset 0 0 0 20px var(--qs-accent-text);
  }

  /* Przyciski Woo i wtyczek w stylu .qs-btn (nie możemy zmienić ich markupu). */
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(
    a.button, button.button, input.button, .woocommerce-button, .woocommerce-Button,
    button[type="submit"], input[type="submit"]
  ) {
    display: inline-block;
    width: auto;
    min-height: 46px;
    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-family: var(--qs-sans);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    padding: 12px 24px;
    transition: background .12s, color .12s;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(
    a.button, button.button, input.button, .woocommerce-button, .woocommerce-Button,
    button[type="submit"], input[type="submit"]
  ):hover {
    background: var(--qs-ink);
    color: var(--qs-bg);
  }
  /* input.button gubi outline przez regułę :focus wyżej — przywracamy (2.4.7). */
  :is(.qs-app--account, .qs-app--list) .qs-app__content :is(
    a.button, button.button, input.button, .woocommerce-button, .woocommerce-Button,
    button[type="submit"], input[type="submit"]
  ):focus-visible {
    outline: 3px solid var(--qs-accent-text);
    outline-offset: 3px;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content td :is(a.button, button.button, .woocommerce-button) {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
    box-shadow: var(--qs-shadow-sm);
  }

  /* Tabele zamówień, pobrań, list — jedna ramka, wiersze rozdzielone linią. */
  :is(.qs-app--account, .qs-app--list) .qs-app__content table:is(
    .woocommerce-orders-table, .woocommerce-table, .shop_table
  ),
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) table {
    width: 100%;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-collapse: collapse;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content table:is(
    .woocommerce-orders-table, .woocommerce-table, .shop_table
  ) th,
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) thead th {
    padding: 13px 14px;
    border-block-end: var(--qs-border) solid var(--qs-ink);
    background: var(--qs-bg);
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--qs-muted);
    text-align: start;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content table:is(
    .woocommerce-orders-table, .woocommerce-table, .shop_table
  ) td,
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) td {
    padding: 14px;
    border-block-start: 2px solid var(--qs-line);
    font-size: 14.5px;
    color: var(--qs-body);
    vertical-align: middle;
  }
  :is(.qs-app--account, .qs-app--list) .qs-app__content .woocommerce-orders-table__cell-order-total,
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) .price {
    font-family: var(--qs-display);
    font-size: 18px;
    color: var(--qs-ink);
  }
  /* Szerokie tabele przewijają się we własnym kontenerze. */
  :is(.qs-app--account, .qs-app--list) .qs-app__content .woocommerce-orders-table,
  :is(.qs-app--account, .qs-app--list) .qs-app__content .woocommerce-table--order-details { display: table; }
  .qs-app--account .qs-app__content .woocommerce-MyAccount-content { overflow-wrap: break-word; }

  /* =========================================================
     7. MOJE KONTO
     ========================================================= */

  .qs-app--account .qs-app__content .woocommerce-MyAccount-navigation,
  .qs-app--account .qs-app__content .woocommerce-MyAccount-content { float: none; width: auto; }

  /* Woo renderuje nawigację i treść jako rodzeństwo w anonimowym „.woocommerce".
     :has() celuje w ich rodzica, więc ekran logowania (bez nawigacji) zostaje
     jednokolumnowy bez dodatkowych klas w szablonie. */
  .qs-app--account .qs-app__content .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    gap: 20px;
  }
  @media (min-width: 992px) {
    .qs-app--account .qs-app__content .woocommerce:has(> .woocommerce-MyAccount-navigation) {
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }
  }

  .qs-app--account .woocommerce-MyAccount-navigation {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
  }
  .qs-app--account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
  .qs-app--account .woocommerce-MyAccount-navigation li { margin: 0; border-block-end: var(--qs-border) solid var(--qs-ink); }
  .qs-app--account .woocommerce-MyAccount-navigation li:last-child { border-block-end: 0; }
  .qs-app--account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--qs-ink);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .01em;
  }
  .qs-app--account .woocommerce-MyAccount-navigation li a:hover { background: var(--qs-tint); }
  .qs-app--account .woocommerce-MyAccount-navigation li.is-active a { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-app--account .woocommerce-MyAccount-navigation li.is-active a:hover { background: var(--qs-accent-text); color: var(--qs-on-accent); }

  .qs-app--account .woocommerce-MyAccount-content {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
    padding: 22px;
    font-size: 15.5px;
    color: var(--qs-body);
  }
  .qs-app--account .woocommerce-MyAccount-content > p:first-child { margin-block-start: 0; }
  .qs-app--account .woocommerce-MyAccount-content p { margin-block-end: 1em; }
  .qs-app--account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
    color: var(--qs-accent-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .qs-app--account .woocommerce-MyAccount-content fieldset {
    margin-block-start: 22px;
    padding: 18px;
    border: var(--qs-border) solid var(--qs-line);
  }
  @media (min-width: 768px) {
    .qs-app--account .woocommerce-MyAccount-content { padding: 28px; }
  }

  /* Nagłówki sekcji konta czytamy od lewej — Woo wyrównywał je do prawej. */
  .qs-app--account .qs-app__content :is(h2, h3, legend),
  .qs-app--account .qs-app__content .woocommerce-customer-login__title {
    font-family: var(--qs-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.08;
    font-size: 24px;
    color: var(--qs-ink);
    text-align: start;
    margin-block: 0 14px;
  }
  .qs-app--account .qs-app__content h3 { font-size: 20px; }

  /* Logowanie i rejestracja — dwa panele obok siebie. */
  .qs-app--account .qs-app__content .u-columns { display: grid; gap: 20px; }
  @media (min-width: 768px) {
    .qs-app--account .qs-app__content .u-columns { grid-template-columns: 1fr 1fr; gap: 24px; }
  }
  .qs-app--account .qs-app__content :is(.u-column1, .u-column2) { width: auto; float: none; }
  .qs-app--account .qs-app__content :is(.woocommerce-form-login, .woocommerce-form-register) {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
    padding: 20px;
    margin: 0;
  }
  .qs-app--account .qs-app__content .form-row { margin-block-end: 16px; }
  .qs-app--account .qs-app__content .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 9px; }
  .qs-app--account .qs-app__content .woocommerce-LostPassword { margin-block: 12px 0; font-size: 14px; }
  .qs-app--account .qs-app__content .woocommerce-privacy-policy-text { font-size: 13.5px; color: var(--qs-muted); }

  /* Adresy rozliczeniowy/dostawy jako para kafli. */
  .qs-app--account .qs-app__content .woocommerce-Addresses { display: grid; gap: 18px; }
  @media (min-width: 768px) {
    .qs-app--account .qs-app__content .woocommerce-Addresses { grid-template-columns: 1fr 1fr; gap: 24px; }
  }
  .qs-app--account .qs-app__content .woocommerce-Address {
    width: auto;
    float: none;
    background: var(--qs-bg);
    border: var(--qs-border) solid var(--qs-ink);
    padding: 18px;
  }
  .qs-app--account .qs-app__content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

  /* =========================================================
     8. LISTA ŻYCZEŃ I PORÓWNYWARKA (wcboost)
     ========================================================= */

  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) img {
    border: 2px solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) td a:not(.button) {
    color: var(--qs-ink);
    font-weight: 800;
    font-size: 15.5px;
  }
  .qs-app__content :is(.wcboost-wishlist, .wcboost-products-compare) td a:not(.button):hover { color: var(--qs-accent-text); }

  .qs-app__content .wcboost-wishlist :is(a.remove, .wcboost-wishlist-item__remove) {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    color: var(--qs-ink);
    font-weight: 800;
    line-height: 1;
  }
  .qs-app__content .wcboost-wishlist :is(a.remove, .wcboost-wishlist-item__remove):hover {
    background: var(--qs-danger);
    border-color: var(--qs-danger);
    color: var(--qs-on-accent);
  }
  .qs-app__content .wcboost-wishlist :is(.in-stock, .stock.in-stock) { color: var(--qs-success-text); font-weight: 800; font-size: 13px; }
  .qs-app__content .wcboost-wishlist :is(.out-of-stock, .stock.out-of-stock) { color: var(--qs-danger); font-weight: 800; font-size: 13px; }
  .qs-app__content .wcboost-wishlist-footer:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block-start: 6px;
    padding-block-start: 18px;
    border-block-start: var(--qs-border) solid var(--qs-ink);
  }

  /* Szeroka tabela porównania przewija się w poziomie — układ tabeli zostaje. */
  .qs-app__content .wcboost-products-compare { overflow-x: auto; }
  .qs-app__content .wcboost-products-compare table { min-width: 640px; }
  .qs-app__content .wcboost-products-compare tbody th {
    padding: 14px;
    background: var(--qs-tint);
    border-inline-end: var(--qs-border) solid var(--qs-ink);
    border-block-start: 2px solid var(--qs-line);
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--qs-muted);
    text-align: start;
    white-space: nowrap;
  }

  /* Puste listy: komunikat Woo dostaje formę panelu. */
  .qs-app__content :is(.wishlist-empty, .wcboost-products-compare--empty) .woocommerce-info {
    padding: 32px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    box-shadow: var(--qs-shadow);
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    color: var(--qs-body);
  }
  /* Zawężone do list. Bez `.qs-app--list/--account` selektor sięgał też pustego
     koszyka, gdzie `.return-to-shop` opisuje 06-cart-checkout.css tą samą
     specyficznością (0,2,0) — 07 ładuje się później, więc wygrywał remis
     i przejmował kontrolę nad marginesem cudzego ekranu. */
  :is(.qs-app--account, .qs-app--list) .qs-app__content .return-to-shop { margin-block-start: 22px; text-align: center; }

  /* Popup porównywarki jedzie po wp_footer(), czyli poza .qs-app. */
  .wcboost-products-compare-popup__content {
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    font-family: var(--qs-sans);
  }
  .wcboost-products-compare-popup__header {
    padding: 14px 18px;
    background: var(--qs-bg);
    border-block-end: var(--qs-border) solid var(--qs-ink);
  }
  .wcboost-products-compare-popup__title {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .wcboost-products-compare-popup__body { padding: 18px; }
  .wcboost-products-compare-popup__body img { border: 2px solid var(--qs-ink); border-radius: var(--qs-radius); }
  .wcboost-products-compare-popup__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    color: var(--qs-ink);
  }
  .wcboost-products-compare-popup__close:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .wcboost-products-compare-popup__backdrop {
    background: rgba(22, 24, 27, .55); /* fallback = --qs-ink @55% */
    background: color-mix(in srgb, var(--qs-ink) 55%, transparent);
  }

  /* =========================================================
     9. WYNIKI WYSZUKIWANIA
     ========================================================= */

  .qs-post-card--result .qs-post-card__title { font-size: 17px; }
  .qs-post-card--result .qs-post-card__date { letter-spacing: .04em; }
  .qs-empty strong { color: var(--qs-accent-text); }
  .qs-empty h2 { font-size: clamp(24px, 4vw, 34px); }

  /* =========================================================
     10. 404
     ========================================================= */

  .qs-404 { text-align: center; }
  .qs-404 .qs-crumbs { justify-content: center; }   /* .qs-crumbs to flex (05-shop.css) */
  .qs-404__num {
    margin-block: 6px 0;
    font-family: var(--qs-display);
    font-size: clamp(96px, 26vw, 220px);
    line-height: 1;
    color: var(--qs-accent);
  }
  .qs-404__title { font-size: clamp(26px, 5vw, 44px); }
  .qs-404__lead {
    margin: 14px auto 0;
    max-width: 52ch;
    font-size: 17px;
    color: var(--qs-body);
  }
  .qs-404__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-block-start: 26px;
  }
  .qs-404__ctas .qs-btn { min-width: 208px; }
  .qs-404__search { margin: 30px auto 0; justify-content: center; }

/* Kadr zdjęcia wpisu: reportaże bywają pionowe, a kadr jest poziomy. Kadrujemy
   nieco powyżej środka — w zdjęciach warsztatowych temat siedzi w górnej
   części klatki, a środek to zwykle blat albo podłoga. */
.qs-post-card__media > img,
.qs-post-card__media > a > img { object-position: 50% 38%; }

/* Siatki produktów renderowane przez wtyczki (lista życzeń, [products]):
   kontenerem jest ul.products — zerujemy listę i układamy nasze karty. */
ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
ul.products li.qs-product-item { margin: 0; padding: 0; }
ul.products li.qs-product-item .qs-card { height: 100%; }

/* Stopka listy życzeń: udostępnianie i edycja w języku motywu. */
.wcboost-wishlist-footer { margin-block-start: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.wishlist-share__title { margin: 0 0 8px; font-family: var(--qs-display); font-weight: 400; font-size: 16px; text-transform: uppercase; }
.wishlist-share__buttons { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wcboost-wishlist-share-link { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--qs-ink); color: var(--qs-ink); }
.wcboost-wishlist-share-link:hover { background: var(--qs-ink); color: var(--qs-bg); }
.wcboost-wishlist-edit-link { font-family: var(--qs-mono); font-size: 12px; text-transform: uppercase; color: var(--qs-accent-text); text-decoration: underline; }

/* Pozycja listy życzeń: nasza karta + pasek akcji pod nią. */
.qs-wishlist-item { display: flex; flex-direction: column; gap: 10px; }
.qs-wishlist-item .qs-card { flex: 1; }
.qs-wishlist-item__actions { display: flex; gap: 8px; }
.qs-wishlist-item__actions .qs-btn { flex: 1; text-align: center; justify-content: center; min-height: 46px; }
/* Serce na karcie listy życzeń nie ma sensu — produkt już tu jest. */
.qs-wishlist-item .qs-card__wish { display: none; }

@layer components {
  /* Komunikat pustego stanu — dziś kasa bez produktów, docelowo każdy ekran,
     który nie ma czego pokazać. */
  .qs-empty { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-block: 28px 8px; }
  .qs-empty__title { font-family: var(--qs-display); font-size: clamp(22px, 4vw, 30px); text-transform: uppercase; }
}