/**
 * buy-bar.css — pasek szybkiego zakupu przyklejony do dołu okna na karcie
 * produktu. Makieta: product.html, blok `data-buybar` (l. 1021–1038),
 * to samo w product-dark.html; zrzut: sections/product-hero.png (pasek
 * nad szyną miniatur). Wymaga tokens.css i base.css (.dc-container,
 * .dc-section, .dc-sr-only, [hidden]).
 *
 * Wszystko pod prefiksem .dc-buy-bar__. ANI JEDNEJ REGUŁY [data-theme='dark']:
 * makieta ciemna różni się wyłącznie kolorami, a te niosą tokeny.
 *
 * KARTA JEST NIEPRZEZROCZYSTA (--dc-surface), NIE SZKLANA. Makieta jasna
 * rysuje szkło .86 + blur 36, ciemna — pełne #1C1A17 bez przezroczystości,
 * i to ciemna ma rację dla obu: pasek pływa nad DOWOLNĄ treścią strony,
 * także nad jasnymi zdjęciami węgla w motywie ciemnym. Zmierzone
 * 2026-08-31 z --dc-surface-glass (przepis nagłówka; w ciemnym alfa .05):
 * nad zdjęciem lewa połowa paska stawała się szara, a jasny tekst na niej
 * nieczytelny. --dc-surface daje biel / #1C1A17 (dokładnie kolor makiety
 * ciemnej), a na nieprzezroczystej powierzchni backdrop-filter nie ma
 * czego rozmywać — stąd go nie ma. Szkło w motywie jasnym (.86 → 1.0)
 * to różnica niezauważalna gołym okiem, kontrast tekstu za to jest
 * niezależny od tego, co akurat przewija się pod paskiem.
 *
 * PRZYCISK — ranga 1, kopia .dc-product-hero__submit (przez
 * .dc-volume-picker__submit) w geometrii paska: bez width 100 %, padding
 * 14 / 24 (makieta 14 / 26), tekst --dc-text-lg (makieta 15). Reszta
 * (gradient, obwódka a50, cień, najazd, wciśnięcie, wyłączenie) bez zmian.
 *
 * WIDOCZNOŚĆ TO `hidden`, NIE `transform` (reguła 11): schowany pasek
 * z translateY(120 %) jak w makiecie zostawiałby przycisk w kolejności Tab.
 * Wjazd animuje klatka kluczowa przy pojawieniu; zejścia nie ma — pasek
 * znika od razu, co przy przewijaniu w górę jest niezauważalne.
 *
 * POZIOM WARSTWY --dc-z-sticky (10): pasek nie styka się z nagłówkiem
 * (--dc-z-overlay, 50), a okno modalne (--dc-z-modal, 100) i tak go
 * zasłania; żaden element w nurcie strony nie stoi na warstwie ≥ 10.
 *
 * env(safe-area-inset-bottom) — PIERWSZE UŻYCIE W PROJEKCIE: na telefonach
 * z paskiem gestów dolna krawędź okna jest częściowo zasłonięta; druga
 * deklaracja padding-block-end dokłada tę strefę, a przeglądarka bez env()
 * odrzuca ją i zostaje przy pierwszej.
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 5):
 *   1. `100%` w klatce kluczowej wjazdu — własna wysokość paska;
 *   2. `100%` szerokości i wysokości obrazka w studni miniatury;
 *   3. `scale(0.97)` wciśnięcia — jak w każdej kopii rangi 1;
 *   4. `1` w flex: 1 1 … — proporcja, nie wymiar.
 */

/* ==========================================================================
   1. OWIJKA — przyklejona do dołu, przepuszcza zdarzenia poza kartą
   Klikalna jest tylko karta; pas po bokach (padding kontenera) oddaje
   kliknięcia stronie pod spodem.
   ========================================================================== */
.dc-buy-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--dc-z-sticky);
  padding-block-end: var(--dc-space-16);
  padding-block-end: calc(var(--dc-space-16) + env(safe-area-inset-bottom));
  pointer-events: none;
}

/* Podgląd na /styleguide: w nurcie strony, w rytmie .dc-section, bez wjazdu.
   Odstęp dolny wraca do wartości sekcji — reguła paska wyżej by go nadpisała
   (ta sama swoistość, późniejsza w pliku). */
.dc-buy-bar--static {
  position: static;
  padding-block-end: var(--dc-space-64);
  pointer-events: auto;
}

.dc-buy-bar--static .dc-buy-bar__card {
  animation: none;
}

/* ==========================================================================
   2. KARTA
   Makieta: flex, gap 16, padding 12 14, r20 -> --dc-radius-22, obwódka
   rgba(255,255,255,.95) / ciemna rgba(255,255,255,.12) -> --dc-border-subtle
   (oba motywy co do wartości), cień 0 14px 38px .2 -> --dc-shadow-2xl (.22)
   + --dc-shadow-inset-top. Tło: nagłówek pliku. Zawijanie: przy wąskim
   oknie grupa „cena + przycisk" schodzi pod produkt (sekcja 4).
   ========================================================================== */
.dc-buy-bar__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-12) var(--dc-space-16);
  padding: var(--dc-space-12) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
  pointer-events: auto;
  animation: dc-buy-bar-in var(--dc-duration-slower) var(--dc-ease-out);
}

@keyframes dc-buy-bar-in {
  from {
    opacity: 0;
    transform: translateY(calc(100% + var(--dc-space-16)));
  }
}

/* ==========================================================================
   3. PRODUKT — miniatura, nazwa, linia pakietu
   Makieta: studnia 52 x 52 r14 -> --dc-space-48 / --dc-radius-12 (przepis
   .dc-product-hero__thumb--pack: białe tło w obu motywach, obraz contain);
   nazwa PJS 800 14.5 -> display / black / --dc-text-md; linia 12.5 #9a958a
   -> --dc-text-sm / --dc-text-subtle. Oba wiersze w jednej linii
   z wielokropkiem — pasek nie może rosnąć w górę.
   ========================================================================== */
.dc-buy-bar__product {
  display: flex;
  flex: 1 1 var(--dc-grid-min-sm);
  align-items: center;
  gap: var(--dc-space-14);
  min-width: 0;
}

.dc-buy-bar__thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-48);
  height: var(--dc-space-48);
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-on-dark);
}

.dc-buy-bar__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dc-buy-bar__copy {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  min-width: 0;
}

.dc-buy-bar__name,
.dc-buy-bar__line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: var(--dc-leading-snug);
}

.dc-buy-bar__name {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

.dc-buy-bar__line {
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

.dc-buy-bar__dot {
  margin-inline: var(--dc-space-4);
}

/* ==========================================================================
   4. AKCJA — kwota i przycisk
   Grupa rośnie razem z produktem (flex 1 1 auto) i dosuwa zawartość do
   prawej: w jednym wierszu stoi przy prawej krawędzi karty, po zawinięciu
   zajmuje cały drugi wiersz i dalej trzyma prawą krawędź.
   Kwota: PJS 800 20 / -.02em -> display / black / --dc-text-4xl /
   --dc-tracking-tight; nowrap, bo wc_price() dzieli tysiące spacją.
   ========================================================================== */
.dc-buy-bar__action {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dc-space-16);
}

.dc-buy-bar__amount {
  margin: 0;
  white-space: nowrap;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text);
}

.dc-buy-bar__submit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-14) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  white-space: nowrap;
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-buy-bar__submit .dc-icon {
  flex: none;
}

.dc-buy-bar__submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-buy-bar__submit:hover:enabled {
  background-color: var(--dc-accent-a50);
}

.dc-buy-bar__submit:active:enabled {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-buy-bar__submit:disabled {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  color: var(--dc-text-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

/* ==========================================================================
   5. KOMUNIKAT ODMOWY
   Pełny wiersz pod kartą, tylko gdy endpoint koszyka odmówi (409) —
   w każdym innym przypadku formularz idzie zwykłą drogą i komunikat
   wypisuje hero.
   ========================================================================== */
.dc-buy-bar__status {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-danger);
}

/* ==========================================================================
   6. OGRANICZONY RUCH (reguła 12)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dc-buy-bar__card {
    animation: none;
  }
}