/* Komponenty wielokrotnego użytku. Kolory tekstu ustawiamy TU (nie w reset),
   dzięki czemu przyciski nigdy nie tracą kontrastu. */
@layer components {
  /* Przyciski */
  .qs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: var(--qs-border) solid var(--qs-ink); border-radius: var(--qs-radius);
    font-weight: 800; font-size: 15px; line-height: 1.2; padding: 13px 22px;
    min-height: 46px; text-align: center; transition: background .12s, color .12s;
  }
  .qs-btn--accent { background: var(--qs-accent-text); color: var(--qs-on-accent); box-shadow: var(--qs-shadow); }
  .qs-btn--accent:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-btn--ink { background: var(--qs-ink); color: var(--qs-bg); box-shadow: var(--qs-shadow); }
  .qs-btn--ink:hover { background: var(--qs-accent-text); color: var(--qs-on-accent); }
  .qs-btn--outline { background: var(--qs-surface); color: var(--qs-ink); box-shadow: var(--qs-shadow); }
  .qs-btn--outline:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-btn--ghost { background: transparent; color: var(--qs-ink); border-width: 2px; padding: 9px 14px; min-height: 40px; font-size: 13px; }
  .qs-btn--ghost:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-btn--block { width: 100%; }
  .qs-btn[disabled], .qs-btn.is-disabled { opacity: .4; pointer-events: none; }

  .qs-cart-btn { display: inline-flex; align-items: center; min-height: 44px; background: var(--qs-ink); color: var(--qs-bg);
    font-weight: 800; font-size: 13px; padding: 9px 14px; border: 2px solid var(--qs-ink); white-space: nowrap; }
  .qs-cart-btn:hover { background: var(--qs-accent-text); color: var(--qs-on-accent); border-color: var(--qs-accent-text); }

  /* Etykiety i plakietki */
  .qs-badge { display: inline-block; font-family: var(--qs-mono); font-size: 12px; font-weight: 700; padding: 5px 9px; border: var(--qs-border) solid var(--qs-ink); }
  .qs-badge--sale { background: var(--qs-accent-text); color: var(--qs-on-accent); border-width: 0; }
  .qs-badge--limited { background: var(--qs-ink); color: var(--qs-bg); border-width: 0; font-size: 11px; }
  /* 11px bielą = tekst mały, wymagane 4.5:1. --qs-success (#2F9E44) daje
     tylko 3.45:1; wariant tekstowy --qs-success-text (#1E7A33) — 5.40:1. */
  .qs-badge--stock { background: var(--qs-success-text); color: var(--qs-on-accent); border-width: 0; font-size: 11px; }

  /* Ceny */
  .qs-price { font-family: var(--qs-display); font-size: 24px; color: var(--qs-ink); }
  .qs-price .woocommerce-Price-amount { font-family: inherit; }
  .qs-price del, .qs-price__rrp { color: var(--qs-muted); font-family: var(--qs-sans); font-size: 14px; font-weight: 400; }
  .qs-price ins { text-decoration: none; }
  /* Etykieta MUSI być widoczna. Sama przekreślona kwota czyta się jak obniżka,
     a wtedy dyrektywa Omnibus każe podać najniższą cenę z 30 dni. To jest
     kotwica ceny sugerowanej producenta, więc musi być tak podpisana. */
  .qs-price__rrp-label { font-size: 12px; text-transform: lowercase; letter-spacing: 0; }
  .qs-price .woocommerce-price-suffix { font-family: var(--qs-sans); font-size: 12px; color: var(--qs-muted); }

  /* Karta produktu */
  .qs-card { position: relative; display: flex; flex-direction: column; 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-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--qs-ink); }
  .qs-card__media { border-bottom: var(--qs-border) solid var(--qs-ink); }
  .qs-card__flags { position: absolute; inset-block-start: 0; inset-inline: 0; display: flex; justify-content: space-between; pointer-events: none; }
  .qs-card__flags > * { pointer-events: auto; }
  .qs-card__body { display: flex; flex-direction: column; gap: 7px; padding: 16px; flex: 1; }
  .qs-card__meta { font-family: var(--qs-mono); font-size: 11px; color: var(--qs-muted); text-transform: uppercase; }
  .qs-card__title { font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--qs-ink); }
  .qs-card__swatches { display: flex; gap: 5px; }
  .qs-card__swatches i { width: 16px; height: 16px; border: 2px solid var(--qs-ink); }
  .qs-card__price { margin-block-start: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .qs-card__cta { display: block; text-align: center; background: var(--qs-ink); color: var(--qs-bg); font-weight: 800; font-size: 14px; padding: 13px; }

  /* Karta jest <article> z linkiem rozciągniętym na całość — dzięki temu
     serce listy życzeń (osobny <a>) może leżeć w rogu bez zagnieżdżania
     linków. Elementy interaktywne muszą stać NAD rozciągniętym linkiem. */
  .qs-card__link { position: absolute; inset: 0; z-index: 1; }
  .qs-card__wish { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 2; }
  .qs-card__wish .wcboost-wishlist-button {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: var(--qs-surface); color: var(--qs-ink);
    border: 2px solid var(--qs-ink); border-radius: 0; box-shadow: var(--qs-shadow-sm);
  }
  .qs-card__wish .wcboost-wishlist-button:hover { background: var(--qs-accent-text); color: var(--qs-on-accent); }
  .qs-card__wish .wcboost-wishlist-button__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .qs-card__wish .wcboost-wishlist-button__icon svg { width: 20px; height: 20px; display: block; }
  .qs-card__flags { z-index: 2; }
  .qs-card:hover .qs-card__cta { background: var(--qs-accent-text); color: var(--qs-on-accent); }

  /* Siatki */
  .qs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  @media (min-width: 768px) { .qs-grid { gap: 20px; } }

  /* Marquee */
  .qs-marquee { background: var(--qs-ink); border-block: var(--qs-border) solid var(--qs-ink); overflow: hidden; white-space: nowrap; }
  .qs-marquee__track { display: inline-block; padding-block: 12px; font-family: var(--qs-display); font-size: 18px; text-transform: uppercase; animation: qs-marquee 34s linear infinite; }
  .qs-marquee__track span { color: var(--qs-bg); margin-inline: 16px; }
  .qs-marquee__track span:nth-child(even) { color: var(--qs-accent); }
  .qs-marquee:hover .qs-marquee__track { animation-play-state: paused; }
  @keyframes qs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .qs-marquee__track { animation: none; } }

  /* Akordeon */
  .qs-acc { border: var(--qs-border) solid var(--qs-ink); background: var(--qs-surface); }
  .qs-acc details + details { border-top: var(--qs-border) solid var(--qs-ink); }
  .qs-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; font-weight: 800; font-size: 15px; text-transform: uppercase; cursor: pointer; list-style: none; }
  .qs-acc summary::-webkit-details-marker { display: none; }
  /* Tytuł sekcji jest <h2>, żeby po <h1> produktu nie było przeskoku do <h3>
     z treści opisu. Wizualnie ma wyglądać dokładnie jak wcześniej summary. */
  .qs-acc__title { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
  .qs-acc summary::after { content: "+"; font-family: var(--qs-mono); font-size: 18px; color: var(--qs-accent-text); }
  .qs-acc details[open] summary::after { content: "−"; }
  .qs-acc__content { padding: 0 18px 18px; font-size: 15px; color: var(--qs-body); }
  .qs-acc__content :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: .8em; }

  /* Panele i stany puste */
  .qs-panel { background: var(--qs-surface); border: var(--qs-border) solid var(--qs-ink); padding: 20px; }
  .qs-panel--raised { box-shadow: var(--qs-shadow); }
  .qs-empty { text-align: center; padding: 34px 20px; }
  .qs-empty p { margin-block: 12px 20px; color: var(--qs-body); }

  /* Pola formularzy */
  .qs-field { width: 100%; background: var(--qs-surface); border: var(--qs-border) solid var(--qs-ink); border-radius: var(--qs-radius); padding: 11px 14px; font-size: 15px; }
  .qs-field:focus { outline: none; border-color: var(--qs-accent-text); box-shadow: inset 0 0 0 1px var(--qs-accent-text); }
  .qs-field::placeholder { color: var(--qs-muted); }

  /* Pasek darmowej dostawy */
  .qs-freeship { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; background: var(--qs-surface); border: var(--qs-border) solid var(--qs-ink); padding: 14px 16px; margin-block-end: 20px; }
  .qs-freeship__text { font-weight: 700; font-size: 15px; }
  .qs-freeship__text strong { color: var(--qs-accent-text); }
  .qs-freeship__counter { font-family: var(--qs-mono); font-size: 11px; color: var(--qs-muted); }
  .qs-freeship__bar { grid-column: 1 / -1; height: 16px; border: var(--qs-border) solid var(--qs-ink); background: var(--qs-bg); }
  .qs-freeship__bar i { display: block; height: 100%; background: var(--qs-accent-text); transition: width .25s ease-out; }
  .qs-freeship.is-done .qs-freeship__text { color: var(--qs-success-text); }
  .qs-freeship.is-done .qs-freeship__bar i { background: var(--qs-success); }
  @media (max-width: 600px) { .qs-freeship { grid-template-columns: 1fr; } }

  /* Komunikaty WooCommerce */
  .woocommerce-message, .woocommerce-info, .woocommerce-error li, .wc-block-components-notice-banner {
    background: var(--qs-surface); border: var(--qs-border) solid var(--qs-ink);
    padding: 12px 16px; font-weight: 700; font-size: 14.5px; margin-block-end: 16px; list-style: none;
  }
  .woocommerce-error { margin: 0; padding: 0; }
  .woocommerce-error li { border-color: var(--qs-danger); color: var(--qs-danger); }
  .woocommerce-message .button, .woocommerce-info .button { margin-inline-start: 12px; }

  /* Paginacja */
  .qs-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block-start: 30px; }
  .qs-pagination .page-numbers { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 12px; border: var(--qs-border) solid var(--qs-ink); background: var(--qs-surface); font-weight: 800; font-size: 13px; color: var(--qs-ink); }
  .qs-pagination .page-numbers.current { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-pagination .page-numbers:hover { background: var(--qs-tint); }
}

/* Kontrolki nagłówka muszą mieć 44px wysokości celu dotykowego. */
.qs-header__actions .qs-btn,
.qs-header__actions a,
.qs-header__actions button { min-height: 44px; display: inline-flex; align-items: center; }

@layer components {
  /* Wyszukiwarka w nagłówku i w szufladzie.

     Blok siedzi w warstwie `components`, a nie `layout`, celowo: szerokość
     pola ustawia `.qs-field` właśnie tutaj, a warstwy rozstrzygają
     pierwszeństwo niezależnie od kolejności plików — reguła z `layout`
     przegrałaby z komponentem i pole rozlałoby się na 100%.

     Do 991 px nagłówek ma tylko burgera i koszyk; pole nie zmieściłoby się
     obok nich w jednej linii, więc na małych ekranach żyje w szufladzie. */
  .qs-header__search { display: none; }
  .qs-drawer__search { margin-block-start: 18px; }
  .qs-drawer__search .qs-field { flex: 1 1 100%; }

  @media (min-width: 992px) {
    .qs-header__search { display: flex; gap: 6px; align-items: stretch; }
    .qs-header__search .qs-field {
      width: clamp(140px, 16vw, 220px);
      min-height: 44px;
      font-size: 15px;
    }
    .qs-header__search .qs-btn { flex: 0 0 auto; }
  }
}

@layer components {
  /* Linki „przeczytaj” — z karty produktu do wpisów i między wpisami.
     Do 31.08.2026 ruch linkowania był jednokierunkowy: blog odsyłał do
     produktów, produkty do bloga nigdy, a wpisy do siebie nawzajem wcale. */
  .qs-readmore { margin-block-start: 34px; }
  .qs-readmore__title {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: clamp(22px, 3.4vw, 30px);
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--qs-ink);
    margin: 0;
  }
  .qs-readmore__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
  .qs-readmore__item { border: var(--qs-border) solid var(--qs-ink); background: var(--qs-surface); box-shadow: var(--qs-shadow-sm); }
  .qs-readmore__link {
    display: block;
    padding: 14px 16px;
    min-height: 44px;
    font-weight: 700;
    color: var(--qs-ink);
    text-decoration: none;
  }
  .qs-readmore__link:hover,
  .qs-readmore__link:focus-visible { background: var(--qs-tint); color: var(--qs-accent-text); }

  @media (min-width: 700px) {
    .qs-readmore__list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  }
}