/* AquaJoy v2: zestaw komponentów (KIT).
   Prymitywy i sekcje używane na co najmniej dwóch szablonach. Tylko tokeny z tokens.css.
   Kolor marki wyłącznie w motywie fali (.aj-cta__wave). */

:root {
  /* Krawędź treści .aj-wrap (maxw + 2 x gutter). 100% liczy się tam, gdzie var() jest użyte. */
  --kit-edge: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  /* Wysokość wiersza okruszków w układzie (cel dotyku jest większy, patrz .aj-crumbs a). */
  --kit-crumbs-h: 24px;
  /* Jedna oś dwóch kolumn dla całej witryny: hero podstron z kadrem, wąska kolumna
     (z figurą i bez) i FAQ. Druga kolumna zaczyna się w połowie, na 1440 px przy x = 752.
     Arkusz strony, który stawia własny podział obok tych sekcji, bierze tę zmienną. */
  --kit-split: minmax(0, 1fr) minmax(0, 1fr);
}

/* =========================================================================
   1. Przyciski
   Kolory idą wyłącznie przez --btn-*: kontekst albo wariant podmienia zmienne,
   nigdy tła wprost (inaczej hover w wariancie przebija kontekst).
   ========================================================================= */

.aj-btn {
  --btn-bg: var(--c-fg);
  --btn-fg: var(--c-inverse);
  --btn-bd: var(--c-fg);
  --btn-bg-h: var(--c-btn-hover);
  --btn-fg-h: var(--c-inverse);
  --btn-bd-h: var(--c-btn-hover);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tr-ui);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--d-fast) var(--e-std),
    border-color var(--d-fast) var(--e-std),
    color var(--d-fast) var(--e-std),
    transform var(--d-fast) var(--e-std);
}

.aj-btn:hover {
  background: var(--btn-bg-h);
  border-color: var(--btn-bd-h);
  color: var(--btn-fg-h);
}

.aj-btn:active {
  transform: scale(0.98);
}

.aj-btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.aj-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

/* Strzałka na końcu przesuwa się o 2 px. Ikony nie mają klas, więc ścieżka strzałki. */
.aj-btn :is(.aj-i--arrow-sm, .aj-i--arrow, svg:has(> path[d^="M6 12h12"], > path[d^="M5 12h14"])) {
  transition: transform var(--d-fast) var(--e-out);
}

.aj-btn:hover :is(.aj-i--arrow-sm, .aj-i--arrow, svg:has(> path[d^="M6 12h12"], > path[d^="M5 12h14"])) {
  transform: translateX(2px);
}

/* Drugi: biały z ramką. Dawne ghost, outline, on-dark, white. */
.aj-btn--ghost,
.aj-btn--outline,
.aj-btn--on-dark,
.aj-btn--white,
.aj-btn--light,
.aj-btn--secondary {
  --btn-bg: var(--c-bg);
  --btn-fg: var(--c-fg);
  --btn-bd: var(--c-line);
  --btn-bg-h: var(--c-bg-2);
  --btn-fg-h: var(--c-fg);
  --btn-bd-h: var(--c-line-field);
}

/* Główny. Dawne aqua, sun, teal: stara paleta mapuje się na czerń. */
.aj-btn--primary,
.aj-btn--aqua,
.aj-btn--sun,
.aj-btn--teal,
.aj-btn--dark {
  --btn-bg: var(--c-fg);
  --btn-fg: var(--c-inverse);
  --btn-bd: var(--c-fg);
  --btn-bg-h: var(--c-btn-hover);
  --btn-fg-h: var(--c-inverse);
  --btn-bd-h: var(--c-btn-hover);
}

/* Trzeci: sam tekst ze strzałką. */
.aj-btn--link,
.aj-btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--c-fg-2);
  --btn-bd: transparent;
  --btn-bg-h: transparent;
  --btn-fg-h: var(--c-fg);
  --btn-bd-h: transparent;
  padding-inline: 0;
}

.aj-btn--link:active,
.aj-btn--tertiary:active {
  transform: none;
}

.aj-btn--lg {
  min-height: 48px;
  padding-inline: 20px;
}

.aj-btn--sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: var(--t-sm);
}

/* 36 px widać, 44 px da się trafić palcem. */
.aj-btn--sm::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.aj-btn--block {
  display: flex;
  width: 100%;
}

.aj-btn[disabled],
.aj-btn.is-disabled,
.aj-btn[aria-disabled="true"] {
  --btn-bg: var(--c-bg-3);
  --btn-fg: var(--c-fg-3);
  --btn-bd: var(--c-bg-3);
  --btn-bg-h: var(--c-bg-3);
  --btn-fg-h: var(--c-fg-3);
  --btn-bd-h: var(--c-bg-3);
  cursor: not-allowed;
  transform: none;
}

/* Rząd przycisków. Na telefonie pełna szerokość, żeby pary kończyły się razem. */
.aj-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

@media (max-width: 559px) {
  .aj-btn-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .aj-btn-row > .aj-btn {
    width: 100%;
  }

  .aj-btn-row > .aj-btn--link {
    justify-self: start;
    width: auto;
  }
}

/* Link tekstowy ze strzałką (a.aj-link > span + svg). */
.aj-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  font-weight: 500;
  letter-spacing: var(--tr-ui);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-std);
}

.aj-link:hover {
  color: var(--c-fg);
}

.aj-link svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--d-fast) var(--e-out);
}

.aj-link:hover svg:last-child {
  transform: translateX(2px);
}

.aj-link[href^="tel:"] {
  padding-block: 10px;
  margin-block: -10px;
}

/* Booksy: ikona "otwiera się obok" mniejsza i cichsza niż etykieta. */
.aj-booksy__ext {
  display: inline-flex;
  margin-left: -2px;
  opacity: 0.6;
}

.aj-booksy__ext svg {
  width: 14px;
  height: 14px;
}

/* =========================================================================
   2. Plakietki i kropki stanu
   ========================================================================= */

.aj-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-bg-2);
  color: var(--c-fg);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.aj-badge svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--c-fg-2);
}

/* Dawne kolory (aqua, sun) są neutralne. Ghost: białe z ramką. */
.aj-badge--ghost,
.aj-badge--line {
  border-color: var(--c-line);
  background: var(--c-bg);
}

/* Status: kropka 6 px w kolorze stanu zamiast ikony. */
.aj-badge--new,
.aj-badge--ok,
.aj-badge--open,
.aj-badge--warn,
.aj-badge--low,
.aj-badge--wait,
.aj-badge--err,
.aj-badge--full,
.aj-badge--off,
.aj-badge--muted,
.aj-badge--status {
  --dot: var(--c-fg-3);
  border-color: var(--c-line);
  background: var(--c-bg);
}

.aj-badge--new,
.aj-badge--ok,
.aj-badge--open {
  --dot: var(--c-ok);
}

.aj-badge--warn,
.aj-badge--low,
.aj-badge--wait {
  --dot: var(--c-warn);
}

.aj-badge--err {
  --dot: var(--c-err);
}

.aj-badge--new > svg,
.aj-badge--ok > svg,
.aj-badge--open > svg,
.aj-badge--warn > svg,
.aj-badge--low > svg,
.aj-badge--wait > svg,
.aj-badge--err > svg,
.aj-badge--full > svg,
.aj-badge--off > svg,
.aj-badge--muted > svg,
.aj-badge--status > svg {
  display: none;
}

.aj-badge--new::before,
.aj-badge--ok::before,
.aj-badge--open::before,
.aj-badge--warn::before,
.aj-badge--low::before,
.aj-badge--wait::before,
.aj-badge--err::before,
.aj-badge--full::before,
.aj-badge--off::before,
.aj-badge--muted::before,
.aj-badge--status::before,
.aj-dot {
  content: "";
  flex: none;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--dot, var(--c-fg-3));
}

.aj-dot--ok { --dot: var(--c-ok); }
.aj-dot--warn { --dot: var(--c-warn); }
.aj-dot--err { --dot: var(--c-err); }

/* "Zapisy otwarte": kropka oddycha co 2 s. */
.aj-badge--new::before,
.aj-dot--live {
  animation: aj-k-pulse 2s var(--e-std) infinite;
}

@keyframes aj-k-pulse {
  0% { box-shadow: 0 0 0 0 rgb(15 123 63 / 0.4); }
  70% { box-shadow: 0 0 0 5px rgb(15 123 63 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(15 123 63 / 0); }
}

/* ---------- Plakietka stanu zajęć (.aj-slot) ----------
   Jeden znacznik na całą witrynę: sklep, strona grupy, wiersz godziny w zapisie,
   kafel lokalizacji, strefa rodzica. Od 20.09.2026 to ona mówi o stanie zamiast
   miernika miejsc, więc nie niesie żadnej liczby.

   Kolor jest tylko w kropce, tekst zostaje neutralny. Kolorowy napis w pigułce czyta
   się jak ostrzeżenie i kłóci się z zasadą, że interfejs jest czarno-biały, a przy tym
   ma ciaśniejszy zapas kontrastu: zmierzone #111 to 18,9:1 na bieli i 17,5:1 na
   --c-bg-2, #555 to 7,5:1 i 6,9:1, a --c-ok i --c-warn tylko 5,4:1 i 6,0:1.

   Kropka celowo nie pulsuje, chociaż DESIGN §4 na to pozwala: ten sam wariant
   --open znaczy też "Zaplanowane" i "Obecność odhaczona" w liście terminów
   rodzica, a kilkanaście mrugających kropek na jednym ekranie to hałas. */
.aj-slot {
  --dot: var(--c-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-fg);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.aj-slot__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--dot);
}

/* Zapisy otwarte, zaplanowane, obecność odhaczona. */
.aj-slot--open {
  --dot: var(--c-ok);
}

/* Zapisy zamknięte, zgłoszenie po terminie: stan zamknięty, nie błąd. */
.aj-slot--closed {
  --dot: var(--c-fg-3);
  color: var(--c-fg-2);
}

/* Nieobecność zgłoszona: coś się zmieniło, ale nic złego się nie stało. */
.aj-slot--off {
  --dot: var(--c-warn);
}

/* Po zajęciach: termin minął, plakietka schodzi na drugi plan (tło drugie zamiast bieli). */
.aj-slot--done {
  --dot: var(--c-fg-3);
  background: var(--c-bg-2);
  color: var(--c-fg-2);
}

/* Wiersz godziny w formularzu zapisu: plakietka zamiast miernika, ostatnia kolumna. */
.aj-pick__box > .aj-slot {
  grid-column: -2;
  justify-self: end;
}

/* Gdyby szablon zostawił plakietkę w starym opakowaniu .aj-pick__fee: kropka jest
   już w plakietce, druga (z ::before opakowania) byłaby dwiema kropkami w rzędzie. */
.aj-pick--groups .aj-pick__fee:has(> .aj-slot)::before {
  content: none;
}

.aj-pick__fee:has(> .aj-slot) {
  gap: 0;
}

/* =========================================================================
   3. Formularze
   ========================================================================= */

.aj-field {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  min-width: 0;
}

.aj-field + .aj-field {
  margin-top: var(--s-5);
}

.aj-grid > .aj-field + .aj-field {
  margin-top: 0;
}

.aj-label {
  display: block;
  color: var(--c-fg);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
}

.aj-label .req,
.aj-field .req {
  color: var(--c-fg-3);
  font-weight: 400;
  text-decoration: none;
  border: 0;
}

.aj-input,
.aj-select,
.aj-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-line-field);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: inherit;
  font-size: 16px; /* 16 px, bo iOS przybliża pole z mniejszym pismem */
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow: none;
  appearance: none;
  transition:
    border-color var(--d-fast) var(--e-std),
    box-shadow var(--d-fast) var(--e-std);
}

.aj-input::placeholder,
.aj-textarea::placeholder {
  color: var(--c-fg-3);
  opacity: 1;
}

.aj-input:hover,
.aj-select:hover,
.aj-textarea:hover {
  border-color: var(--c-line-hover);
}

.aj-input:focus,
.aj-select:focus,
.aj-textarea:focus {
  outline: none;
  border-color: var(--c-fg);
  box-shadow: 0 0 0 3px rgb(17 17 17 / 0.08);
}

.aj-input[type="date"] {
  min-height: 44px;
}

.aj-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.aj-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.aj-textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.5;
}

.aj-input:disabled,
.aj-select:disabled,
.aj-textarea:disabled {
  border-color: var(--c-line);
  background-color: var(--c-bg-2);
  color: var(--c-fg-3);
  cursor: not-allowed;
}

/* Błąd: ramka i komunikat w kolorze błędu. Stan niesie aria-invalid albo klasa pola. */
.aj-input[aria-invalid="true"],
.aj-select[aria-invalid="true"],
.aj-textarea[aria-invalid="true"],
.aj-field.is-error :is(.aj-input, .aj-select, .aj-textarea),
.aj-field.is-invalid :is(.aj-input, .aj-select, .aj-textarea) {
  border-color: var(--c-err);
}

.aj-field.is-error :is(.aj-input, .aj-select, .aj-textarea):focus,
.aj-field.is-invalid :is(.aj-input, .aj-select, .aj-textarea):focus,
:is(.aj-input, .aj-select, .aj-textarea)[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgb(216 17 25 / 0.12);
}

.aj-error,
.aj-field__err {
  display: block;
  color: var(--c-err);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.aj-hint {
  display: block;
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

p.aj-hint {
  font-size: var(--t-sm);
}

.aj-gap-sm {
  gap: var(--s-4);
}

/* Checkbox i radio: 18 px, zaznaczone czarne. Natywne pola dostają przynajmniej kolor. */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--c-fg);
}

.aj-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--c-fg);
  font-size: var(--t-ui);
  line-height: 1.5;
  cursor: pointer;
}

.aj-check input[type="checkbox"],
.aj-check input[type="radio"],
.aj-control {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--c-line-field);
  border-radius: 4px;
  background: var(--c-bg) center / 12px no-repeat;
  appearance: none;
  cursor: pointer;
  transition:
    background-color var(--d-fast) var(--e-std),
    border-color var(--d-fast) var(--e-std);
}

.aj-check input[type="radio"],
.aj-control[type="radio"] {
  border-radius: var(--r-pill);
}

.aj-check input:hover,
.aj-control:hover {
  border-color: var(--c-line-hover);
}

.aj-check input[type="checkbox"]:checked,
.aj-control[type="checkbox"]:checked {
  border-color: var(--c-fg);
  background-color: var(--c-fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.aj-check input[type="radio"]:checked,
.aj-control[type="radio"]:checked {
  border-color: var(--c-fg);
  background-color: var(--c-bg);
  box-shadow: inset 0 0 0 4px var(--c-fg);
}

.aj-check input:focus-visible,
.aj-control:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.aj-check__text {
  min-width: 0;
}

/* Na dotyku cały wiersz etykiety ma 44 px wysokości. */
@media (pointer: coarse) {
  .aj-check {
    padding-block: 11px;
  }
}

.aj-check__req {
  color: var(--c-fg-3);
}

/* =========================================================================
   4. Karty wyboru (radio jako karta)
   Radio zostaje w DOM tuż przed .aj-pick__box: stan i fokus idą przez sąsiada.
   ========================================================================= */

.aj-pick {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.aj-pick__item {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.aj-pick__item > input {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.aj-pick__box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-4);
  min-height: 64px;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition:
    border-color var(--d-fast) var(--e-std),
    box-shadow var(--d-fast) var(--e-std),
    background-color var(--d-fast) var(--e-std);
}

/* Znaczek wyboru: pusty okrąg, po zaznaczeniu czarne kółko z ✓. */
.aj-pick__box::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-line-field);
  border-radius: var(--r-pill);
  background: var(--c-bg) center / 12px no-repeat;
  transition:
    background-color var(--d-fast) var(--e-std),
    border-color var(--d-fast) var(--e-std);
}

.aj-pick__ico {
  grid-column: 2;
  display: none;
}

.aj-pick__txt {
  grid-column: 2;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.aj-pick__box:has(.aj-pick__ico) {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.aj-pick__box:has(.aj-pick__ico) .aj-pick__ico {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-fg);
}

.aj-pick__box:has(.aj-pick__ico) .aj-pick__txt {
  grid-column: 3;
}

.aj-pick__ico svg {
  width: 18px;
  height: 18px;
}

.aj-pick__txt strong {
  color: var(--c-fg);
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.aj-pick__txt small {
  display: block;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.aj-pick__fee {
  grid-column: -2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-fg-2);
  font-size: var(--t-meta);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.aj-pick--groups .aj-pick__fee::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-ok);
}

.aj-pick__fee.is-low::before {
  background: var(--c-warn);
}

.aj-pick__fee.is-full {
  color: var(--c-fg-3);
}

.aj-pick__fee.is-full::before {
  background: var(--c-fg-3);
}

.aj-pick__item:hover > .aj-pick__box {
  border-color: var(--c-line-hover);
}

.aj-pick__item > input:checked + .aj-pick__box {
  border-color: var(--c-fg);
  box-shadow: inset 0 0 0 1px var(--c-fg);
}

.aj-pick__item > input:checked + .aj-pick__box::before {
  border-color: var(--c-fg);
  background-color: var(--c-fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.aj-pick__item > input:focus-visible + .aj-pick__box {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.aj-pick__item.is-off {
  cursor: not-allowed;
}

.aj-pick__item.is-off > .aj-pick__box {
  border-color: var(--c-line);
  background: var(--c-bg-2);
}

.aj-pick__item.is-off > .aj-pick__box::before {
  border-color: var(--c-line);
  background-color: var(--c-bg-3);
}

.aj-pick__item.is-off .aj-pick__txt strong {
  color: var(--c-fg-3);
}

@media (max-width: 419px) {
  .aj-pick__box,
  .aj-pick__box:has(.aj-pick__ico) {
    column-gap: var(--s-3);
    padding: 14px;
  }

  .aj-pick__box:has(.aj-pick__ico) .aj-pick__ico {
    display: none;
  }

  .aj-pick__box:has(.aj-pick__ico) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .aj-pick__box:has(.aj-pick__ico) .aj-pick__txt {
    grid-column: 2;
  }
}

/* =========================================================================
   5. MARTWE od 20.09.2026: pasek miejsc (aj_seats_meter, aj_seats_bar)
   Żaden szablon już tego nie drukuje: liczby wolnych miejsc nie pokazujemy nigdzie,
   stan niesie plakietka .aj-slot z sekcji 2. Reguły zostają do czasu, aż szablony
   przestaną się zmieniać: skasowane teraz zostawiłyby gołe elementy na produkcji,
   gdyby któryś szablon wrócił z miernikiem. Nic nowego tu nie dopisujemy.

   Jedna komórka na miejsce w grupie, świecą WOLNE (świecące zajęte robiły z otwartej
   grupy pusty pasek). Obok zawsze liczba wolnych słowami.
   ========================================================================= */

.aj-seats {
  --seat: var(--c-fg);
  display: grid;
  gap: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.aj-seats__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--s-3);
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.aj-seats__left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-fg);
  font-weight: 500;
}

.aj-seats__left::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-ok);
}

.aj-seats__cells {
  display: grid;
  grid-template-columns: repeat(var(--cap, 6), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: 4px;
}

.aj-seats__cell {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-bg-3);
}

/* Światło wolnego miejsca to osobna warstwa: rośnie od lewej, komórka po komórce. */
.aj-seats__cell.is-free::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--seat, var(--c-fg));
  transform-origin: left center;
  transition: transform var(--d-slow) var(--e-out) calc(120ms + var(--i, 0) * 40ms);
}

/* Rośnie przy wejściu w widok, gdy karta ma .aj-reveal. Bez JS stoi od razu. */
.js .aj-reveal:not(.is-in) .aj-seats__cell.is-free::after {
  transform: scaleX(0);
}

/* Dawny ciągły pasek (--p = zajęte), dopóki jakiś szablon go drukuje. */
.aj-seats__bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--c-bg-3);
}

.aj-seats__fill {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--seat);
  transition: width var(--d-slow) var(--e-out) 120ms;
}

.js .aj-reveal:not(.is-in) .aj-seats__fill {
  width: 0;
}

/* Kolor stanu idzie przez --seat, więc działa też w wierszach formularza (.aj-pick__fee). */
.aj-seats.is-low,
.aj-pick__fee.is-low {
  --seat: var(--c-warn);
}

.aj-seats.is-low .aj-seats__left::before {
  background: var(--c-warn);
}

.aj-seats.is-full {
  --seat: var(--c-fg-3);
}

.aj-seats.is-full .aj-seats__left {
  color: var(--c-fg-2);
}

.aj-seats.is-full .aj-seats__left::before {
  background: var(--c-fg-3);
}

/* Stary znacznik kropek, gdyby jakiś szablon go jeszcze drukował. */
.aj-seats__dots {
  display: flex;
  gap: 3px;
}

.aj-seats__dot {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-bg-3);
}

/* =========================================================================
   6. Cena (aj_price_block): kwota i "zł" na jednej linii bazowej
   Zwykły wiersz tekstu, nie flex: innerText czyta "200 zł", nie "200\nzł".
   Odstęp to spacja w znaczniku, linia bazowa jest wspólna z natury.
   ========================================================================= */

.aj-price {
  display: block;
  margin: 0;
  color: var(--c-fg);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.aj-price > span {
  vertical-align: baseline;
}

.aj-price__num {
  font-size: clamp(2.25rem, 1.95rem + 1.1vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.aj-price__cur {
  color: var(--c-fg-2);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: 0;
}

.aj-price__cur:empty {
  display: none;
}

.aj-price__per {
  margin: var(--s-2) 0 0;
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* =========================================================================
   7. Gwiazdki i awatary
   ========================================================================= */

.aj-quote__stars,
.aj-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--c-fg);
}

/* aj_stars() przycina viewBox do samej gwiazdki: 16 px pola to 16 px gwiazdki. */
.aj-quote__stars svg,
.aj-stars svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.aj-quote__ava,
.aj-ava {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg-2);
  color: var(--c-fg);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
}

.aj-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   8. Okruszki
   ========================================================================= */

.aj-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-height: var(--kit-crumbs-h);
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.aj-crumbs a {
  /* Cel dotyku 44 x 44 px bez podnoszenia wiersza (widoczny wiersz ma --kit-crumbs-h)
     i bez przesuwania tekstu: ujemne marginesy oddają to, co dokłada pole. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc((var(--kit-crumbs-h) - 44px) / 2) -6px;
  padding-inline: 6px;
  color: var(--c-fg-3);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-std);
}

.aj-crumbs a:hover {
  color: var(--c-fg);
}

.aj-crumbs svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--c-line-hover);
}

.aj-crumbs > span {
  color: var(--c-fg-2);
}

/* =========================================================================
   9. Notatki, puste stany
   ========================================================================= */

.aj-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  padding: 14px var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-2);
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.55;
}

.aj-note > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--c-fg);
}

.aj-note > span {
  min-width: 0;
  max-width: 72ch;
  text-wrap: pretty;
}

.aj-note strong {
  color: var(--c-fg);
  font-weight: 600;
}

.aj-note a:not(.aj-btn) {
  color: var(--c-fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-line-field);
  text-underline-offset: 3px;
}

.aj-note a:not(.aj-btn):hover {
  text-decoration-color: currentColor;
}

.aj-note a:not(.aj-btn),
.aj-booksy-box__note a[href^="tel:"],
.aj-hint a[href^="tel:"] {
  /* Większy cel dotyku linku w zdaniu; padding elementu inline nie rusza wiersza. */
  display: inline;
  padding-block: 12px;
  white-space: nowrap;
}

.aj-note--soft,
.aj-note--line {
  background: var(--c-bg);
}

.aj-note--ok {
  border-color: transparent;
  background: var(--c-ok-bg);
}

.aj-note--ok > svg {
  color: var(--c-ok);
}

.aj-note--warn {
  border-color: transparent;
  background: var(--c-warn-bg);
  color: var(--c-fg);
}

.aj-note--warn > svg {
  color: var(--c-warn);
}

.aj-note--err {
  border-color: transparent;
  background: var(--c-err-bg);
  color: var(--c-fg);
}

.aj-note--err > svg {
  color: var(--c-err);
}

.aj-wrap > * + .aj-note,
.aj-wrap > * + .aj-hint {
  margin-top: var(--s-6);
}

/* Bloki ułożone jeden pod drugim w kontenerze: jeden odstęp, bez sklejania z tekstem. */
.aj-wrap > * + :is(.aj-figure, .aj-plan, .aj-booksy-box, .aj-steps, .aj-quotes, .aj-btn-row) {
  margin-top: var(--s-8);
}

.aj-wrap > .aj-note + .aj-note {
  margin-top: var(--s-3);
}

/* Pusty stan: zawsze z telefonem, nigdy pusta siatka. Spokojny panel w paśmie drugim,
   ramka jak wszędzie (przerywana to wygląd zaślepki). */
.aj-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  text-align: center;
}

.aj-empty > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-fg);
}

.aj-empty :is(h2, h3) {
  margin: var(--s-2) 0 0;
  color: var(--c-fg);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.aj-empty p {
  max-width: 48ch;
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  text-wrap: pretty;
}

.aj-empty .aj-btn {
  margin-top: var(--s-3);
}

/* =========================================================================
   10. Karty
   ========================================================================= */

.aj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: border-color var(--d-fast) var(--e-std);
}

.aj-card--lg {
  padding: var(--s-8);
}

.aj-card--hover:hover,
.aj-card--link:hover {
  border-color: var(--c-line-hover);
}

.aj-card__icon {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-fg);
}

.aj-card__icon svg {
  width: 20px;
  height: 20px;
}

.aj-card h3 {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.aj-card h3 a {
  color: inherit;
  text-decoration: none;
}

.aj-card > p,
.aj-card > ul {
  margin: var(--s-2) 0 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.6;
  text-wrap: pretty;
}

.aj-card > p + p {
  margin-top: var(--s-3);
}

.aj-card > :is(ul, .aj-plan__list, .aj-loc__addr) + p {
  margin-top: var(--s-4);
}

.aj-card > .aj-plan__list,
.aj-card > .aj-loc__addr {
  margin-top: var(--s-4);
}

.aj-card > .aj-badge {
  align-self: flex-start;
  margin-bottom: var(--s-4);
}

.aj-card__foot {
  display: grid;
  gap: var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-6);
}

.aj-card__foot:is(p) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* =========================================================================
   11. Kadr zdjęcia, figura, cytat
   ========================================================================= */

.aj-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  isolation: isolate;
}

.aj-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  pointer-events: none;
}

.aj-frame > img,
.aj-frame > video,
.aj-frame > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aj-figure {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.aj-figure > img,
.aj-figure > picture > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  /* Wewnętrzna linia kadru bez dodatkowego opakowania. */
  outline: 1px solid rgb(0 0 0 / 0.06);
  outline-offset: -1px;
  object-fit: cover;
}

.aj-figure--portrait > img {
  aspect-ratio: 4 / 3;
  object-position: 50% 30%;
}

.aj-figure figcaption {
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1.45;
}

/* aj_media() nic nie drukuje bez zdjęcia: nie zostawiamy samego podpisu. */
.aj-figure:not(:has(img, video)) {
  display: none;
}

.aj-pull,
.aj-prose .aj-pull {
  margin: var(--s-8) 0;
  padding: 0 0 0 var(--s-6);
  border: 0;
  border-left: 2px solid var(--c-fg);
  background: none;
  color: var(--c-fg);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  text-wrap: balance;
}

.aj-pull::before,
.aj-pull::after,
.aj-prose .aj-pull::before,
.aj-prose .aj-pull::after {
  content: none;
}

/* =========================================================================
   12. Film w kadrze (aj_video_layer) i przycisk pauzy
   Film musi zostać bezpośrednim dzieckiem kontenera, który dostaje .is-playing.
   ========================================================================= */

:where(.aj-vbg) {
  position: relative;
  overflow: hidden;
}

.aj-vbg__still,
.aj-vbg__v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aj-vbg__v {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-std);
}

.aj-vbg__v.is-on {
  opacity: 1;
}

.aj-vbtn {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 3;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.85);
  color: var(--c-fg);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  transition:
    background-color var(--d-fast) var(--e-std),
    transform var(--d-fast) var(--e-std);
}

/* Cel dotyku 44 px wokół kółka 32 px. */
.aj-vbtn::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.aj-vbtn:hover {
  background: rgb(255 255 255 / 0.95);
}

.aj-vbtn:active {
  transform: scale(0.94);
}

.aj-vbtn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Pauza widoczna, gdy film naprawdę gra. "Odtwórz" (aria-pressed=true) także przed pierwszym
   odtworzeniem: przy reduced motion, Save-Data albo odrzuconym autoplay app.js zostawia kadr
   i oferuje film na żądanie. Znacznik startuje z false, więc bez JS przycisku nie ma. */
.aj-vbg__v.is-on ~ .aj-vbtn,
.is-playing > .aj-vbtn,
.aj-vbtn[aria-pressed="true"]:not([hidden]) {
  display: grid;
}

.aj-vbtn svg {
  width: 14px;
  height: 14px;
}

.aj-vbtn .aj-vbtn__play,
.aj-vbtn[aria-pressed="true"] .aj-vbtn__pause {
  display: none;
}

.aj-vbtn[aria-pressed="true"] .aj-vbtn__play {
  display: block;
}

/* =========================================================================
   13. Sekcja, nagłówek sekcji, siatki
   Wszystkie sekcje są jasne. Dawne --dark to jedyne pasmo (--c-bg-2 + linie),
   --soft jest białe: pasmo najwyżej raz na trzy sekcje.
   ========================================================================= */

.aj-section {
  --sec-y: var(--section-y);
  position: relative;
  padding-block: var(--sec-y);
  background: var(--c-bg);
  scroll-margin-top: var(--header-h);
}

.aj-section--tight {
  --sec-y: var(--s-16);
}

@media (max-width: 767px) {
  .aj-section--tight {
    --sec-y: var(--s-12);
  }
}

.aj-section--dark,
.aj-section--band {
  border-block: 1px solid var(--c-line);
  background: var(--c-bg-2);
  color: inherit;
}

/* Dwie sekcje na tym samym tle: cienka linia na szerokość treści zamiast drugiego odstępu. */
.aj-section + .aj-section:not(.aj-section--dark, .aj-section--band)::before,
.aj-phero + .aj-section:not(.aj-section--dark, .aj-section--band)::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--kit-edge);
  right: var(--kit-edge);
  border-top: 1px solid var(--c-line);
}

/* Linia tylko tam, gdzie nic innego nie odcina sekcji. Gdy sekcja zaczyna się blokiem
   w ramce albo poprzednia nim kończy, ramka już jest krawędzią: druga linia 60-90 px
   obok daje zeszyt w linie (ramka, linia, ramka, ramka, linia). Lista to bloki, których
   zewnętrzna krawędź jest ramką 1 px (albo rzędem kart w ramkach). */
.aj-section:is(.aj-section--dark, .aj-section--band) + .aj-section::before,
.aj-section:has(> .aj-wrap > :first-child:is(.aj-cta, .aj-stats, .aj-gift, .aj-rules, .aj-cells, .aj-rows, .aj-grid, .aj-quotes, .aj-card, .aj-loc, .aj-plan, .aj-booksy-box, .aj-note, .aj-empty))::before,
.aj-section:has(> .aj-wrap > :last-child:is(.aj-cta, .aj-stats, .aj-gift, .aj-rules, .aj-cells, .aj-rows, .aj-grid, .aj-quotes, .aj-card, .aj-loc, .aj-plan, .aj-booksy-box, .aj-note, .aj-empty, .aj-faq)) + .aj-section::before,
.aj-section:has(> .aj-wrap > .aj-cta)::before {
  content: none;
}

/* Sąsiednie białe sekcje: odstęp nad linią i pod nią to razem jeden rytm, nie dwa. */
.aj-section + .aj-section:not(.aj-section--dark, .aj-section--band) {
  padding-top: calc(var(--sec-y) * 0.75);
}

.aj-section:not(.aj-section--dark, .aj-section--band):has(+ .aj-section:not(.aj-section--dark, .aj-section--band)) {
  padding-bottom: calc(var(--sec-y) * 0.75);
}

/* Karta CTA sama odcina się ramką: po białej sekcji wystarczy jej dolny odstęp. */
.aj-section:not(.aj-section--dark, .aj-section--band) + .aj-section:has(> .aj-wrap > .aj-cta) {
  padding-top: 0;
}

/* Ostatnie CTA przed jasną stopką. */
main > .aj-section:last-child {
  padding-bottom: var(--s-16);
}

@media (max-width: 767px) {
  main > .aj-section:last-child {
    padding-bottom: var(--s-12);
  }
}

.aj-head {
  max-width: 44rem;
  margin: 0 0 var(--s-12);
}

.aj-eyebrow {
  display: block;
  margin: 0 0 var(--s-3);
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.aj-eyebrow::before,
.aj-eyebrow::after {
  content: none;
}

.aj-head h2 {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.aj-head p {
  max-width: 60ch;
  margin: var(--s-4) 0 0;
  color: var(--c-fg-2);
  font-size: var(--t-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.aj-head > .aj-btn-row,
.aj-head > .aj-btn,
.aj-head > .aj-link {
  margin-top: var(--s-6);
}

/* Nagłówek nad prozą: tekst to ciąg dalszy, nie osobny blok. */
.aj-head:has(+ .aj-prose) {
  margin-bottom: var(--s-6);
}

@media (max-width: 767px) {
  .aj-head {
    margin-bottom: var(--s-8);
  }

  .aj-head:has(+ .aj-prose) {
    margin-bottom: var(--s-5);
  }
}

.aj-center {
  text-align: center;
}

.aj-center .aj-head,
.aj-head.aj-center {
  margin-inline: auto;
}

.aj-center .aj-head p,
.aj-head.aj-center p {
  margin-inline: auto;
}

.aj-center .aj-btn-row {
  justify-content: center;
}

p.aj-hint.aj-center {
  margin-top: var(--s-6);
}

.aj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

@media (min-width: 700px) {
  .aj-grid--2,
  .aj-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aj-grid {
    gap: var(--s-6);
  }
}

@media (min-width: 900px) {
  .aj-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .aj-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Wąska kolumna: na telefonie miara prozy, od 1100 px automatyczny podział na połowy
   (ta sama oś co hero podstron i FAQ). Z .aj-figure: tekst po lewej, zdjęcie przyklejone
   po prawej. Bez: pierwsze dziecko (nagłówek) przyklejone po lewej, reszta po prawej.
   FAQ i .aj-center wypadają. */
.aj-wrap--narrow > * {
  max-width: var(--maxw-text);
}

.aj-wrap--narrow > :is(.aj-faq, .aj-grid, .aj-signup__form) {
  max-width: none;
}

@media (min-width: 1100px) {
  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq)) {
    display: grid;
    align-items: start;
    column-gap: var(--s-16);
  }

  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq)) > * {
    min-width: 0;
    max-width: none;
  }

  .aj-wrap--narrow:not(.aj-center):has(> .aj-figure) {
    grid-template-columns: var(--kit-split);
  }

  .aj-wrap--narrow:not(.aj-center):has(> .aj-figure) > * {
    grid-column: 1;
  }

  .aj-wrap--narrow:not(.aj-center):has(> .aj-figure) > .aj-figure {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    grid-column: 2;
    grid-row: 1 / span 20;
    margin: 0;
  }

  /* Bez figury ta sama oś co z figurą, FAQ i hero podstron: prawa kolumna od połowy. */
  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq, > .aj-figure)) {
    grid-template-columns: var(--kit-split);
  }

  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq, > .aj-figure)) > * {
    grid-column: 2;
  }

  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq, > .aj-figure)) > :first-child {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    grid-column: 1;
    grid-row: 1 / span 20;
    margin-bottom: 0;
  }

  /* W podziale pierwszy blok prawej kolumny staje równo z nagłówkiem. */
  .aj-wrap--narrow:not(.aj-center):not(:has(> .aj-faq, > .aj-figure)) > :nth-child(2) {
    margin-top: 0;
  }

  .aj-wrap--narrow:has(> .aj-signup__form) > :first-child {
    grid-row: 1;
  }

  .aj-wrap--narrow:has(> .aj-signup__form) > .aj-note {
    position: sticky;
    top: calc(var(--header-h) + 160px);
    grid-column: 1;
    grid-row: 2;
  }

  .aj-wrap--narrow:has(> .aj-signup__form) > .aj-signup__form {
    grid-row: 1 / span 20;
  }

  .aj-wrap--narrow .woocommerce-notices-wrapper:empty {
    display: none;
  }
}

/* =========================================================================
   14. Hero podstron (.aj-phero)
   Jasne: okruszki, H1, lead, akcje. Zdjęcie w kadrze obok (desktop) albo pod tekstem.
   ========================================================================= */

.aj-phero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--s-8) var(--s-16);
  padding: var(--s-12) var(--kit-edge) var(--s-16);
  background: var(--c-bg);
}

.aj-phero .aj-bubbles {
  display: none;
}

.aj-phero__in {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 46rem;
}

.aj-phero__in > .aj-crumbs {
  margin-bottom: var(--s-8);
}

.aj-phero__in > .aj-badge,
.aj-phero__in > .aj-eyebrow {
  margin-bottom: var(--s-4);
}

.aj-phero__in > .aj-badge {
  display: inline-flex;
  align-self: flex-start;
}

.aj-phero__in > .aj-crumbs {
  align-self: flex-start;
}

.aj-phero h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: 1.04;
  text-wrap: balance;
}

.aj-phero__in > p {
  max-width: 56ch;
  margin: var(--s-5) 0 0;
  color: var(--c-fg-2);
  font-size: var(--t-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.aj-phero__in > .aj-btn-row {
  margin-top: var(--s-8);
}

.aj-phero__bg {
  grid-row: 2;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.aj-phero__bg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .aj-phero {
    padding-top: var(--s-16);
    padding-bottom: var(--s-20);
  }

  /* Kadr stoi od góry, nie pływa w połowie kolumny tekstu: jego górna krawędź to linia
     plakietki albo H1 (pod okruszkami), na każdej podstronie ta sama. */
  .aj-phero:has(> .aj-phero__bg) {
    grid-template-columns: var(--kit-split);
    align-items: start;
  }

  .aj-phero__bg {
    grid-row: 1;
    grid-column: 2;
    aspect-ratio: 3 / 2;
  }

  .aj-phero:has(> .aj-phero__in > .aj-crumbs:first-child) > .aj-phero__bg {
    margin-top: calc(var(--kit-crumbs-h) + var(--s-8));
  }

  .aj-phero__in {
    grid-column: 1;
  }

}

@media (max-width: 767px) {
  .aj-phero {
    padding-top: var(--s-6);
    padding-bottom: var(--s-12);
  }

  .aj-phero__in > .aj-crumbs {
    margin-bottom: var(--s-6);
  }
}

/* --compact: na telefonie bez zdjęcia, żeby pierwsza akcja strony była na pierwszym ekranie. */
@media (max-width: 767px) {
  .aj-phero--compact > .aj-phero__bg {
    display: none;
  }

  .aj-phero--compact {
    padding-bottom: var(--s-8);
  }
}

/* Wejście: kopia po kolei, kadr z lekkim przybliżeniem. Tylko CSS. */
@media (prefers-reduced-motion: no-preference) {
  .aj-phero__in > * {
    animation: aj-k-rise var(--d-slow) var(--e-out) both;
  }

  .aj-phero__in > :nth-child(2) { animation-delay: 60ms; }
  .aj-phero__in > :nth-child(3) { animation-delay: 120ms; }
  .aj-phero__in > :nth-child(4) { animation-delay: 180ms; }
  .aj-phero__in > :nth-child(n + 5) { animation-delay: 240ms; }

  .aj-phero__bg {
    animation: aj-k-frame 900ms var(--e-out) 80ms both;
  }
}

@keyframes aj-k-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes aj-k-frame {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* =========================================================================
   15. Fakty (dawne ciemne pasmo liczb): komórki oddzielone linią 1 px
   ========================================================================= */

.aj-section:has(> .aj-wrap > .aj-stats) {
  --sec-y: var(--s-12);
  border-block: 0;
  background: var(--c-bg);
}

.aj-phero + .aj-section:has(> .aj-wrap > .aj-stats) {
  padding-top: 0;
}

.aj-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid var(--c-line);
  background: var(--c-line);
}

.aj-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
  background: var(--c-bg);
}

.aj-stat:nth-child(2n) {
  padding-left: var(--s-6);
}

.aj-stat__n {
  color: var(--c-fg);
  font-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.aj-stat__l {
  color: var(--c-fg-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

@media (min-width: 860px) {
  .aj-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aj-stat,
  .aj-stat:nth-child(2n) {
    padding: var(--s-8) var(--s-6);
  }

  .aj-stat:first-child {
    padding-left: 0;
  }
}

/* =========================================================================
   16. Kroki: oś czasu, nie druga siatka w ramce (licznik w CSS, 3 elementy
   siatki na krok: numer, h3, p). Telefon: pionowa szyna między numerami.
   Od 860 px: kolumny, łącznik od numeru do następnego numeru.
   ========================================================================= */

.aj-steps {
  counter-reset: aj-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.aj-step {
  counter-increment: aj-step;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  align-content: start;
  min-width: 0;
  padding: 0 0 var(--s-8);
}

.aj-step:last-child {
  padding-bottom: 0;
}

.aj-step::before {
  content: counter(aj-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line-field);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-fg);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Łącznik: od numeru do następnego numeru, z odstępem 8 px od obu kółek. */
.aj-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(28px + var(--s-2));
  bottom: var(--s-2);
  left: 13.5px;
  width: 1px;
  background: var(--c-line-field);
  pointer-events: none;
}

.aj-step h3 {
  margin: 3px 0 0;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.aj-step p {
  grid-column: 2;
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 860px) {
  /* Tyle kolumn, ile kroków (2, 3 albo 4), bez pustej kolumny na końcu. */
  .aj-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-8);
  }

  .aj-steps:has(> .aj-step:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aj-steps--2,
  .aj-steps:has(> .aj-step:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Podsiatka: tytuły i opisy w jednej linii we wszystkich kolumnach. */
  .aj-steps > .aj-step {
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: var(--s-3);
    padding: 0;
  }

  .aj-steps > .aj-step::before {
    grid-row: auto;
    margin-bottom: var(--s-3);
  }

  /* Poziomy łącznik na wysokości środka kółka, przez odstęp kolumny do następnego numeru. */
  .aj-steps > .aj-step:not(:last-child)::after {
    top: 13.5px;
    right: calc(var(--s-2) - var(--s-8));
    bottom: auto;
    left: calc(28px + var(--s-2));
    width: auto;
    height: 1px;
  }

  .aj-steps > .aj-step h3 {
    align-self: end;
    margin: 0;
  }

  .aj-steps > .aj-step p {
    grid-column: 1;
  }
}

/* Oś rysuje się przy przewijaniu. Szary łącznik zostaje torem, czarna kreska biegnie po
   nim, a ramka numeru ciemnieje, gdy kreska do niego dojdzie. Bez animation-timeline
   albo przy ograniczonym ruchu oś zostaje szara jak wyżej.

   Kreska to drugie tło tego samego ::after (jednolity kolor #111, nie gradient w oku),
   więc idzie za każdą geometrią łącznika, także nadpisaną w arkuszu strony (oś pionowa
   na stronie głównej od 860 px). Kierunku nie trzeba znać: max/min niżej trzymają
   cienki wymiar na 1 px, a długi rośnie od 0 do 100% (od lewej albo od góry).

   Pionowa oś (telefon): każdy łącznik i każdy numer ma własną oś widoku, a jej dolna
   krawędź to linia na 65% wysokości ekranu. Kreska sięga dokładnie tej linii, więc
   rysuje się w miejscu, na które patrzy czytelnik. Pozioma oś (od 860 px): wszystkie
   kroki stoją w jednym rzędzie, więc liczy się oś widoku całej listy, a kolejne
   odcinki idą po sobie: numer 1, łącznik 1, numer 2... Całość kończy się, zanim rząd
   minie środek ekranu. */
@property --aj-rail {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes aj-rail {
  to {
    --aj-rail: 1;
  }
}

@keyframes aj-rail-dot {
  from {
    border-color: var(--c-line-field);
  }

  to {
    border-color: var(--c-fg);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aj-step::before,
    .aj-step:not(:last-child)::after {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block 0% 35%);
      animation-range: entry 0% entry 100%;
    }

    .aj-step::before {
      animation-name: aj-rail-dot;
    }

    .aj-step:not(:last-child)::after {
      background-image: linear-gradient(var(--c-fg), var(--c-fg));
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size:
        max(calc(var(--aj-rail) * 100%), min(1px, calc(var(--aj-rail) * 1000px)))
        max(calc(var(--aj-rail) * 100%), min(1px, calc(var(--aj-rail) * 1000px)));
      animation-name: aj-rail;
    }

    @media (min-width: 860px) {
      .aj-steps {
        view-timeline: --aj-steps block;
      }

      .aj-steps > .aj-step::before,
      .aj-steps > .aj-step:not(:last-child)::after {
        animation-timeline: --aj-steps;
      }

      .aj-steps > .aj-step:nth-child(1)::before { animation-range: cover 8% cover 10%; }
      .aj-steps > .aj-step:nth-child(1)::after { animation-range: cover 10% cover 20%; }
      .aj-steps > .aj-step:nth-child(2)::before { animation-range: cover 20% cover 22%; }
      .aj-steps > .aj-step:nth-child(2)::after { animation-range: cover 22% cover 32%; }
      .aj-steps > .aj-step:nth-child(3)::before { animation-range: cover 32% cover 34%; }
      .aj-steps > .aj-step:nth-child(3)::after { animation-range: cover 34% cover 44%; }
      .aj-steps > .aj-step:nth-child(4)::before { animation-range: cover 44% cover 46%; }
    }
  }
}

/* =========================================================================
   17. Lista faktów z ikoną (plany, lokalizacje, karty informacyjne)
   ========================================================================= */

.aj-plan__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj-plan__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.aj-plan__list li + li {
  margin-top: 0;
}

.aj-plan__list li::before,
.aj-plan__list li::marker {
  content: none;
}

.aj-plan__list li > svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--c-fg);
}

.aj-plan__list li > span {
  min-width: 0;
  text-wrap: pretty;
}

.aj-plan__list li.is-off {
  color: var(--c-fg-3);
}

.aj-plan__list li.is-off > svg {
  color: var(--c-fg-3);
}

/* Telefon w wierszu: większy cel dotyku bez podnoszenia wiersza. */
.aj-plan__list a[href^="tel:"],
.aj-plan__list a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-block: -9px;
  color: var(--c-fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-line-field);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.aj-plan__list a:hover {
  text-decoration-color: currentColor;
}

/* =========================================================================
   18. Karty lokalizacji (.aj-loc)
   ========================================================================= */

.aj-loc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.aj-loc__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}

.aj-loc__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aj-loc__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-6);
}

.aj-loc__main,
.aj-loc__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aj-loc__side {
  flex: 1;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.aj-loc .aj-badge {
  align-self: flex-start;
  margin-bottom: var(--s-4);
}

.aj-loc h3 {
  margin: 0;
  color: var(--c-fg);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.aj-loc__addr {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.aj-loc__addr svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--c-fg-2);
}

.aj-loc__body > p:not(.aj-loc__addr),
.aj-loc__main > p:not(.aj-loc__addr) {
  margin: var(--s-4) 0 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.6;
  text-wrap: pretty;
}

.aj-loc__body > .aj-plan__list {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.aj-loc__side > .aj-plan__list {
  margin-top: 0;
}

/* Stopka: siatka, więc para przycisków ma zawsze równe szerokości (14rem = najdłuższa etykieta). */
.aj-loc__foot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-6);
}

.aj-loc__side .aj-loc__foot {
  grid-template-columns: minmax(0, 1fr);
}

.aj-loc__foot > .aj-btn {
  width: 100%;
}

@media (min-width: 1024px) {
  .aj-loc__body {
    padding: var(--s-8);
  }
}

/* Karta z kolumną boczną (strona główna) od 1200 px zajmuje całą szerokość siatki. */
@media (min-width: 1200px) {
  .aj-grid:has(.aj-loc__side) {
    grid-auto-rows: 1fr;
  }

  .aj-grid > .aj-loc:has(.aj-loc__side) {
    grid-column: 1 / -1;
  }

  .aj-loc--photo:has(.aj-loc__side) {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
  }

  .aj-loc--photo:has(.aj-loc__side) .aj-loc__media {
    height: 100%;
    aspect-ratio: auto;
    border-right: 1px solid var(--c-line);
    border-bottom: 0;
  }

  .aj-loc__body:has(> .aj-loc__side) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
    align-items: stretch;
    column-gap: var(--s-8);
  }

  .aj-loc__body > .aj-loc__side {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--s-8);
    border-top: 0;
    border-left: 1px solid var(--c-line);
  }
}

/* =========================================================================
   19. Karty cen (.aj-plan)
   ========================================================================= */

.aj-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

@media (min-width: 1024px) {
  .aj-plan {
    padding: var(--s-8);
  }
}

/* Wyróżniona: ciemniejsza ramka, plakietka i czarny przycisk. Bez skali i cienia. */
.aj-plan--best {
  border-color: var(--c-fg);
}

.aj-plan__flag {
  position: absolute;
  top: var(--s-6);
  left: var(--s-6);
  border-color: var(--c-line);
  background: var(--c-bg);
}

@media (min-width: 1024px) {
  .aj-plan__flag {
    top: var(--s-8);
    left: var(--s-8);
  }
}

.aj-plan--best .aj-plan__flag {
  border-color: var(--c-fg);
  background: var(--c-fg);
  color: var(--c-inverse);
}

/* Miejsce na plakietkę; w rzędzie kart we wszystkich, żeby tytuły i ceny stały w jednej linii. */
.aj-plan:has(> .aj-plan__flag) {
  padding-top: calc(var(--s-8) + 40px);
}

@media (min-width: 700px) {
  .aj-grid:has(> .aj-plan > .aj-plan__flag) > .aj-plan {
    padding-top: calc(var(--s-8) + 40px);
  }
}

.aj-plan h3 {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.aj-plan__note {
  margin: var(--s-1) 0 0;
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.aj-plan > .aj-price {
  margin-top: var(--s-6);
}

.aj-plan > .aj-plan__list {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.aj-plan__foot {
  display: grid;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-8);
}

/* =========================================================================
   19a. Karta vouchera (aj_gift_card, aj_qr_art): miniatura wydruku. Logo i nazwa
   u góry, kwota i nadruk QR u dołu. Ta sama karta na stronie głównej, na /vouchery/
   i w sklepie. Treść idzie za szerokością karty (kontener aj-gift), nie ekranu:
   ta sama karta stoi w kaflu 380 px i w wierszu 128 px na telefonie.
   Kafel (opis, przycisk, stos kart, proporcje w wierszu) należy do arkusza strony.
   ========================================================================= */

.aj-gift__card {
  /* Odstęp rośnie z kartą: 16 px w małej, 24 px w kaflu. Procent liczy się od
     szerokości kolumny, a karta zawsze wypełnia swoją kolumnę. */
  --gp: clamp(var(--s-4), 6%, var(--s-6));
  --qr: 50px;
  container: aj-gift / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(var(--s-4), 1fr) auto;
  grid-template-areas:
    "top top"
    ". ."
    "amt qr";
  column-gap: var(--s-4);
  /* Karta jest kontenerem rozmiaru, więc nie bierze szerokości z treści: zawsze wypełnia
     kolumnę, także w kaflu, który wyśrodkowuje dzieci (align-items: center). */
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.586;
  /* clip, nie hidden: kontener przewijania traci minimum z treści i mała karta ucinała kwotę. */
  overflow: clip;
  padding: var(--gp);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  isolation: isolate;
  transition:
    transform var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-std);
}

.aj-gift__top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.aj-gift__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.aj-gift__logo img {
  display: block;
  width: auto;
  height: 44px;
}

.aj-gift__kicker {
  min-width: 0;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.3;
}

.aj-gift__bottom {
  grid-area: amt;
  align-self: end;
  min-width: 0;
}

/* Kwota bywa nagłówkiem kafla (h2, h3): rozmiar i krój dają jej części, nie nagłówek. */
.aj-gift__amount {
  display: block;
  margin: 0;
  color: var(--c-fg);
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.aj-gift__num {
  font-size: clamp(2.25rem, 16cqi, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.aj-gift__cur {
  color: var(--c-fg-2);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: 0;
}

/* Nadruk, nie przycisk: bez ramki i bez pola. 50 px to 2 px na moduł wzoru 25 x 25. */
.aj-gift__card > .aj-gift__qr {
  grid-area: qr;
  align-self: end;
  display: block;
  width: var(--qr);
  height: var(--qr);
  color: var(--c-fg);
  line-height: 0;
}

.aj-gift__card > .aj-gift__qr svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* Karta prosto w kaflu .aj-gift (kafel prowadzi do produktu): najechanie jak karta-link.
   W stosie na stronie głównej karta siedzi głębiej, więc stosu to nie rusza. */
@media (hover: hover) {
  .aj-gift:hover > .aj-gift__card {
    border-color: var(--c-line-hover);
    transform: translateY(-1px);
  }
}

/* Mała karta (wiersz na telefonie): sam znak logo, QR w górnym rogu, kwota na całą
   szerokość. 25 px to 1 px na moduł wzoru (2 i 3 px na ekranach 2x i 3x). */
@container aj-gift (max-width: 239px) {
  .aj-gift__kicker {
    display: none;
  }

  .aj-gift__logo img {
    height: 28px;
  }

  .aj-gift__card > .aj-gift__qr {
    --qr: 25px;
    grid-area: 1 / 2;
    align-self: center;
  }

  .aj-gift__bottom {
    grid-column: 1 / -1;
  }

  .aj-gift__cur {
    font-size: var(--t-sm);
  }
}

/* =========================================================================
   20. Opinie (aj_testimonials)
   ========================================================================= */

.aj-quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

/* Telefon: poziomy pas ze snapem, na każdej stronie tak samo (trzy opinie jedna pod drugą
   to ponad ekran). Następna karta wystaje z prawej, więc widać, że jest ich więcej.
   Szablon daje pasowi tabindex="0" i role="region" z etykietą: Safari nie przewija
   klawiaturą elementu bez fokusu. */
@media (max-width: 779px) {
  .aj-quotes {
    display: flex;
    gap: var(--s-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .aj-quotes::-webkit-scrollbar {
    display: none;
  }

  .aj-quotes > .aj-quote {
    flex: 0 0 min(85%, 340px);
    scroll-snap-align: start;
  }

  .aj-quotes:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: -2px;
  }
}

@media (min-width: 780px) {
  .aj-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .aj-quotes > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .aj-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aj-quotes > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.aj-quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

@media (min-width: 1024px) {
  .aj-quote {
    padding: var(--s-8);
  }
}

.aj-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-style: normal;
  line-height: 1.6;
  text-wrap: pretty;
}

.aj-quote blockquote::before,
.aj-quote blockquote::after {
  content: none;
}

.aj-quote__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

.aj-quote__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  line-height: 1.35;
}

.aj-quote__meta strong {
  color: var(--c-fg);
  font-size: var(--t-sm);
  font-weight: 500;
}

.aj-quote__meta span {
  color: var(--c-fg-3);
  font-size: var(--t-meta);
}

/* =========================================================================
   21. FAQ (aj_faq). Panele zostają w DOM; otwiera je [data-open] z app.js.
   Desktop: nagłówek przyklejony po lewej, lista po prawej.
   ========================================================================= */

.aj-faq {
  border-top: 1px solid var(--c-line);
}

.aj-acc {
  border-bottom: 1px solid var(--c-line);
}

.aj-acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  margin: 0;
  padding: var(--s-5) 0;
  border: 0;
  background: none;
  color: var(--c-fg);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aj-acc__btn > span:first-child {
  min-width: 0;
  text-wrap: pretty;
}

.aj-acc__btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.aj-acc__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--c-fg-2);
  transition:
    transform var(--d-med) var(--e-out),
    color var(--d-fast) var(--e-std);
}

.aj-acc__ico svg {
  width: 18px;
  height: 18px;
}

.aj-acc__btn:hover .aj-acc__ico {
  color: var(--c-fg);
}

.aj-acc__btn[aria-expanded="true"] .aj-acc__ico {
  color: var(--c-fg);
  transform: rotate(45deg);
}

/* Zamknięta odpowiedź zostaje w DOM (wyszukiwarki), ale jest visibility:hidden: jej linki
   wypadają z kolejności Tab i z drzewa dostępności, a fokus nie ląduje na czymś niewidocznym.
   Przy zamykaniu visibility przełącza się dopiero po animacji, przy otwieraniu od razu. */
.aj-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--d-med) var(--e-out),
    opacity var(--d-med) var(--e-std),
    visibility 0s linear var(--d-med);
}

.aj-acc__panel[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--d-med) var(--e-out),
    opacity var(--d-med) var(--e-std),
    visibility 0s;
}

.aj-acc__inner {
  min-height: 0;
  overflow: hidden;
}

.aj-acc__inner > div {
  max-width: 68ch;
  padding: 0 var(--s-12) var(--s-5) 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.65;
}

.aj-acc__inner p {
  margin: 0;
  text-wrap: pretty;
}

.aj-acc__inner p + p,
.aj-acc__inner ul,
.aj-acc__inner ol {
  margin-top: var(--s-3);
}

.aj-acc__inner ul,
.aj-acc__inner ol {
  padding-left: 1.2em;
}

.aj-acc__inner a {
  color: var(--c-fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-line-field);
  text-underline-offset: 3px;
}

.aj-acc__inner a:hover {
  text-decoration-color: currentColor;
}

/* Link w odpowiedzi: większy cel dotyku, padding elementu inline nie rusza wiersza. */
@media (pointer: coarse) {
  .aj-acc__inner a {
    padding-block: 12px;
  }
}

@media (max-width: 767px) {
  .aj-acc__inner > div {
    padding-right: var(--s-2);
  }
}

/* Te same połówki co hero podstron (.aj-phero) i wąska kolumna z figurą: lista startuje
   na tej samej osi co kadr hero, a nie 95 px wcześniej (5fr/7fr dawało zygzak przy przewijaniu). */
@media (min-width: 1024px) {
  .aj-wrap:has(> .aj-faq) {
    display: grid;
    grid-template-columns: var(--kit-split);
    align-items: start;
    column-gap: var(--s-16);
  }

  .aj-wrap:has(> .aj-faq) > * {
    grid-column: 2;
    min-width: 0;
    max-width: none;
  }

  .aj-wrap:has(> .aj-faq) > .aj-head:first-child {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    grid-column: 1;
    grid-row: 1 / span 10;
    margin: 0;
  }

  .aj-wrap:has(> .aj-faq) > .aj-head:first-child p {
    font-size: var(--t-body);
  }
}

/* =========================================================================
   22. Końcowe CTA (aj_section_cta): karta z ramką, wyśrodkowana, dwa przyciski
   ========================================================================= */

.aj-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--s-16) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  text-align: center;
}

@media (min-width: 768px) {
  .aj-cta {
    padding: var(--s-20) var(--s-12);
  }
}

.aj-cta > * {
  position: relative;
  z-index: 1;
}

.aj-cta .aj-eyebrow {
  margin-bottom: var(--s-3);
}

.aj-cta h2 {
  max-width: 24ch;
  margin: 0 auto;
  color: var(--c-fg);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-head);
  text-wrap: balance;
}

.aj-cta > p {
  max-width: 54ch;
  margin: var(--s-4) auto 0;
  color: var(--c-fg-2);
  font-size: var(--t-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.aj-cta .aj-btn-row {
  justify-content: center;
  margin-top: var(--s-8);
}

/* Cichy link pod przyciskami: cel 44 px wysokości; margines mniejszy o to, co dokłada pole,
   więc tekst stoi tam, gdzie stał. */
.aj-cta__more {
  margin: var(--s-2) 0 0;
}

.aj-cta__more .aj-link {
  min-height: 44px;
}

.aj-cta__glow {
  display: none;
}

/* Motyw fali: płaskie linie w kolorze marki w rogu karty. Jedyny kolor poza logo i zdjęciami. */
.aj-cta__wave {
  position: absolute;
  right: -24px;
  bottom: -8px;
  z-index: 0;
  width: min(42%, 360px);
  height: auto;
  pointer-events: none;
}

.aj-cta__wave path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.aj-cta__wave .w1 { stroke: var(--c-brand-aqua); }
.aj-cta__wave .w2 { stroke: var(--c-brand-aqua-2); }

/* Telefon: fala zostaje w prawym dolnym rogu jak na desktopie (u góry ucinała ją ramka
   i wisiała nad nadtytułem). Dolny odstęp karty rośnie, żeby linie nie wchodziły pod link. */
@media (max-width: 559px) {
  .aj-cta {
    padding: var(--s-12) var(--s-5) var(--s-16);
  }

  .aj-cta__wave {
    width: 60%;
  }
}

/* =========================================================================
   23. Pudełko Booksy z instrukcją w krokach
   ========================================================================= */

.aj-booksy-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

@media (min-width: 768px) {
  .aj-booksy-box {
    padding: var(--s-8);
  }
}

.aj-booksy-box > h3 {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
}

.aj-booksy-box > p {
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.6;
}

.aj-bsteps {
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj-bsteps > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
}

.aj-bsteps > li::marker {
  content: none;
}

.aj-bsteps__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line-field);
  border-radius: var(--r-pill);
  color: var(--c-fg);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.aj-bsteps h3 {
  margin: 3px 0 0;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
}

.aj-bsteps p {
  margin: var(--s-1) 0 0;
  color: var(--c-fg-2);
  font-size: var(--t-ui);
  line-height: 1.6;
}

.aj-booksy-box__foot {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.aj-booksy-box__note {
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.aj-booksy-box__note a[href^="tel:"] {
  color: var(--c-fg);
  font-weight: 500;
  white-space: nowrap;
}

/* =========================================================================
   24. Stronicowanie (archiwa)
   ========================================================================= */

.pagination .nav-links,
.page-numbers:is(ul) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

a.page-numbers,
span.page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-fg-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

a.page-numbers:hover {
  border-color: var(--c-line-field);
  color: var(--c-fg);
}

span.page-numbers.current {
  border-color: var(--c-fg);
  background: var(--c-fg);
  color: var(--c-inverse);
}

/* =========================================================================
   25. Mniej ruchu
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .aj-badge--new::before,
  .aj-dot--live {
    animation: none;
  }

  .aj-btn:active,
  .aj-vbtn:active {
    transform: none;
  }

  /* MARTWE od 20.09.2026 razem z miernikiem miejsc z sekcji 5. */
  .aj-seats__fill,
  .js .aj-reveal:not(.is-in) .aj-seats__fill {
    width: calc(var(--p, 0) * 100%);
    transition: none;
  }

  .aj-seats__cell.is-free::after,
  .js .aj-reveal:not(.is-in) .aj-seats__cell.is-free::after {
    transform: none;
    transition: none;
  }

  .aj-acc__panel,
  .aj-acc__ico {
    transition: none;
  }
}