/* Reset i typografia bazowa. Świadomie NIE ustawiamy tu koloru linków —
   to zadanie warstwy components (wcześniej globalny `a{color:inherit}`
   wygrywał z klasami przycisków i tekst znikał). */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
  /* `height: auto` jest obowiązkowe razem z `max-width`: bez niego obraz
     z atrybutami width/height (a takie wypuszcza WP) trzyma wysokość
     z atrybutu i zgniata się w pionie, gdy CSS zwęzi go poniżej naturalnej
     szerokości (np. miniatury listy życzeń ograniczone do 88px). Reguły
     z jawną wysokością (.qs-media, miniatury koszyka) i tak wygrywają —
     żyją poza warstwą reset. */
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
  a { text-decoration: none; }
}

@layer base {
  body {
    background: var(--qs-bg);
    color: var(--qs-ink);
    font-family: var(--qs-sans);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
  }

  /* Nagłówki display: 1.08 to minimum, przy którym ogonki Ą/Ę nie wchodzą
     na wiersz niżej przy dużych stopniach pisma. */
  .qs-display, h1, h2 { font-family: var(--qs-display); font-weight: 400; text-transform: uppercase; line-height: 1.08; letter-spacing: .01em; }
  h3 { font-weight: 800; line-height: 1.25; }
  p { line-height: 1.6; }
  strong, b { font-weight: 700; }

  .qs-mono { font-family: var(--qs-mono); font-size: 12px; text-transform: uppercase; color: var(--qs-muted); letter-spacing: .02em; }

  :where(a):focus-visible,
  :where(button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--qs-accent-text);
    outline-offset: 2px;
  }

  .qs-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* Link pomijający nawigację MUSI stać się widoczny po otrzymaniu fokusu —
     inaczej osoba korzystająca z klawiatury nie wie, że go aktywowała. */
  .qs-skip {
    position: absolute; inset-inline-start: 8px; inset-block-start: -100px;
    z-index: 200; padding: 12px 18px;
    background: var(--qs-ink); color: var(--qs-bg);
    font-weight: 800; text-transform: uppercase;
    transition: inset-block-start .12s ease-out;
  }
  .qs-skip:focus { inset-block-start: 8px; }
}

/* WZORZEC OBRAZU — celowo poza @layer. Reguła bez warstwy bije regułę w warstwie,
   więc żaden arkusz wtyczki (woocommerce-general, wc-blocks-style, Elementor)
   nie przestawi nam wysokości ani pozycjonowania zdjęcia. To był mechanizm
   znikających zdjęć na kartach produktów w motywie 3.x. */
/* Jeden wzorzec dla wszystkich obrazów o stałych proporcjach.
   Obraz jest pozycjonowany absolutnie, więc procentowa wysokość nigdy nie
   odnosi się do jego własnego obszaru (przyczyna znikających zdjęć w 3.x). */
.qs-media {
  position: relative;
  aspect-ratio: var(--qs-ratio);
  overflow: hidden;
  background: var(--qs-surface);
}
.qs-media > img,
.qs-media > a > img,
.qs-media picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--qs-fit);
}
.qs-media--pad > img, .qs-media--pad > a > img { padding: 18px; }