/* Szkielet strony: kontenery, nagłówek, stopka, pasek mobilny. */
@layer layout {
  .qs-wrap { width: 100%; max-width: var(--qs-max); margin-inline: auto; padding-inline: var(--qs-gutter); }
  .qs-section { padding-block: clamp(36px, 6vw, 60px); }
  .qs-rule { border-bottom: var(--qs-border) solid var(--qs-ink); }

  /* Nagłówek */
  .qs-header { position: relative; z-index: 60; background: var(--qs-bg); border-bottom: var(--qs-border) solid var(--qs-ink); }
  .qs-header__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding-inline: var(--qs-gutter); }
  .qs-logo { font-family: var(--qs-display); font-size: 22px; letter-spacing: .02em; color: var(--qs-ink); white-space: nowrap; }
  .qs-logo__mark { color: var(--qs-accent); }
  .qs-nav { display: none; gap: 26px; margin-inline: auto; font-weight: 700; font-size: 15px; }
  .qs-nav a { color: var(--qs-ink); }
  .qs-nav a:hover { color: var(--qs-accent-text); }
  .qs-nav a[aria-current] { color: var(--qs-accent-text); box-shadow: inset 0 -3px 0 var(--qs-accent-text); }

  /* Znacznik „nowość” przy pozycji menu.
     Ma przyciągnąć oko, nie walczyć o nie: kropka 6 px w kolorze akcentu,
     puls 2,8 s — wolniej niż spokojny oddech, więc czyta się jak delikatne
     tętnienie, a nie jak migająca reklama. Nie zmienia szerokości pozycji
     (position: absolute), więc dołożenie i zdjęcie znacznika nie przestawia
     całego paska. Ruch wyłączony dla osób, które go sobie wyłączyły — dla nich
     kropka po prostu stoi, bez utraty informacji. */
  .qs-nav a { position: relative; }
  .qs-nowosc {
    position: absolute;
    top: -2px;
    inset-inline-end: -9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--qs-accent-text);
    animation: qs-nowosc-puls 2.8s ease-in-out infinite;
  }
  @keyframes qs-nowosc-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.75); }
  }
  @media (prefers-reduced-motion: reduce) { .qs-nowosc { animation: none; opacity: .85; } }

  /* W szufladzie pozycje stoją jedna pod drugą i mają 17 px, więc jest miejsce
     na słowo — a samo słowo nie wymaga zgadywania, co oznacza kropka. */
  .qs-nowosc-pigulka {
    display: inline-block;
    vertical-align: 2px;
    margin-inline-start: 6px;
    padding: 2px 6px;
    font-family: var(--qs-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
  }
  .qs-header__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
  /* 44px to minimum celu dotykowego (WCAG 2.5.5). Burger, szukanie i koszyk
     stoją obok siebie w nagłówku i wszystkie trzy były niższe. */
  .qs-burger { display: grid; align-content: center; justify-items: center; gap: 4px; width: 44px; min-height: 44px; padding: 8px; }
  .qs-burger i { display: block; width: 22px; height: 3px; background: var(--qs-ink); }

  /* Menu mobilne */
  .qs-drawer { position: fixed; inset: 0; z-index: 100; display: none; }
  .qs-drawer[open] { display: block; }
  .qs-drawer__backdrop { position: absolute; inset: 0; background: rgba(22,24,27,.45); }
  .qs-drawer__panel { position: relative; width: min(86vw, 340px); height: 100%; background: var(--qs-bg); border-right: var(--qs-border) solid var(--qs-ink); padding: 20px; display: grid; align-content: start; gap: 6px; }
  .qs-drawer__panel a { padding: 12px 4px; font-weight: 800; font-size: 17px; border-bottom: 2px solid var(--qs-line); color: var(--qs-ink); }

  /* Checkout: nagłówek bez rozproszeń */
  .qs-header--checkout .qs-header__inner { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .qs-steps { display: flex; align-items: center; gap: 8px; font-family: var(--qs-mono); font-size: 11px; text-transform: uppercase; }
  .qs-step { border: var(--qs-border) solid var(--qs-line); color: var(--qs-muted); padding: 6px 9px; }
  .qs-step[aria-current] { border-color: var(--qs-ink); background: var(--qs-accent-text); color: var(--qs-on-accent); }
  a.qs-step { border-color: var(--qs-ink); color: var(--qs-ink); }
  a.qs-step:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-ssl { font-family: var(--qs-mono); font-size: 11px; color: var(--qs-success-text); text-transform: uppercase; margin-inline-start: auto; }

  /* Stopka */
  .qs-footer { background: var(--qs-ink); color: var(--qs-bg); }
  .qs-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px; }
  .qs-footer .qs-logo { color: var(--qs-bg); }
  .qs-footer__links { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--qs-mono); font-size: 11px; text-transform: uppercase; }
  .qs-footer__links a { color: var(--qs-bg); opacity: .85; }
  .qs-footer__links a:hover { opacity: 1; color: var(--qs-accent); }
  .qs-footer__copy { font-family: var(--qs-mono); font-size: 11px; color: #9AA0A6; text-transform: uppercase; }

  /* Dolny pasek mobilny (nie na checkoucie) */
  .qs-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--qs-bg); border-top: var(--qs-border) solid var(--qs-ink); }
  .qs-tabbar a { min-height: 48px; display: grid; place-items: center; font-family: var(--qs-mono); font-size: 10.5px; text-transform: uppercase; color: var(--qs-ink); border-right: var(--qs-border) solid var(--qs-ink); }
  .qs-tabbar a:last-child { border-right: 0; }
  .qs-tabbar a[aria-current] { background: var(--qs-ink); color: var(--qs-bg); }
  body.qs-has-tabbar { padding-bottom: 52px; }

  @media (min-width: 992px) {
    .qs-header__inner { min-height: 68px; }
    .qs-logo { font-size: 24px; }
    .qs-nav { display: flex; }
    .qs-burger { display: none; }
    .qs-tabbar { display: none; }
    body.qs-has-tabbar { padding-bottom: 0; }
  }
}