/**
 * volume-picker.css — cztery palety w rzędzie, z przełącznikiem frakcji.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Każdy plik sekcji
 * ładuje się na KAŻDEJ stronie, więc wszystko siedzi pod prefiksem
 * .dc-volume-picker__ i nic stąd nie może wyciec na cudze znaczniki.
 * Jedyne wyjątki to .dc-ring (komponent) i .dc-icon (rejestr ikon) —
 * oba dostrajane WYŁĄCZNIE w selektorze potomnym pod prefiksem sekcji.
 *
 * ANI JEDNEJ REGUŁY [data-theme='dark']
 * Kolory w obu motywach podmieniają tokeny; jedyna dawna reguła ciemna
 * (odwrócony, wolniejszy obrót obwódki) zeszła w partii 5 audytu — zwrot
 * i faza obwódki są teraz takie same w obu motywach (sekcja 2).
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 5 — grep ma coś znaleźć
 * i te trafienia są świadome):
 *
 *   1. `aspect-ratio: 7 / 6` na kadrze zdjęcia oraz `50%`, `54%`, `86%`,
 *      `89%`, `85%`, `95%`, `130%`, `15%`, `70%` przy pozycjonowaniu warstw
 *      i punktach zatrzymania gradientów. To geometria rysunku, nie wartość
 *      projektowa — dokładnie jak `50%` i `66%` w hero.css i jak kąty
 *      gradientu w components/ring.css.
 *   2. `rgba(var(--dc-shadow-color), …)` w cieniu pod paletą. To NIE jest
 *      zahardkodowany kolor: kanał barwy pochodzi z tokenu (jasny 30,40,60,
 *      ciemny 0,0,0), literałem jest sama alfa. Powód ten sam co w hero.css:
 *      CSS nie umie podać alfy do gotowego koloru bez relative color syntax,
 *      której Safari jeszcze nie ma.
 *
 * SKĄD SIĘ BIERZE 7 / 6. Kadr zdjęcia ma w makiecie stałe 220 px wysokości.
 * Stała wysokość przy siatce auto-fit znaczy jednak co innego przy każdej
 * szerokości okna, więc zamiast niej idzie proporcja — zmierzona z makiety
 * przy 1440 px, gdzie karta ma 257 px szerokości: 257 / 220 = 1,168, czyli
 * 7/6 co do drugiego miejsca. Przy tej szerokości kadr wychodzi więc
 * pikselowo tak jak w makiecie, a węziej i szerzej skaluje się z kartą,
 * zamiast zostawiać zdjęcie w za wysokim albo za niskim pudełku.
 */

/* ==========================================================================
   1. RAMA SEKCJI
   ========================================================================== */

/* .dc-volume-picker nie ma tu ani jednej deklaracji i to jest zamierzone.
   Szerokość i marginesy boczne daje .dc-container, pionowy oddech 64 px daje
   .dc-section — obie klasy z base.css, obie użyte BEZ modyfikacji, dokładnie
   w wartościach makiety (max-width 1240, padding 64px 32px). Nie ma czego
   przepisywać do sekcji (reguła 8). Sama klasa .dc-volume-picker zostaje
   w znaczniku jako nazwa bloku dla klas potomnych. */

/* Szklana karta obejmująca całą sekcję — ta sama konstrukcja co w facts.
   isolation: isolate zamyka warstwy obwódki we własnym kontekście nakładania,
   żeby sąsiednia sekcja nie mogła wjechać między obwódkę a treść.
   Scalenia wg reguły 15: padding 44 -> --dc-space-48 (skupisko 44/46/48),
   tło .46 -> --dc-surface-glass-soft (.5), cień 0 12px 44px -> --dc-shadow-xl. */
.dc-volume-picker__card {
  position: relative;
  isolation: isolate;
  padding: var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. OBWÓDKA — DOSTROJENIE KOMPONENTU
   Konstrukcja siedzi w assets/css/components/ring.css, warstwy wstawia
   znacznik. Sekcji zostaje to, czym RÓŻNI SIĘ jej wystąpienie.
   ========================================================================== */

/* Karta ma promień --dc-radius-28, czyli dokładnie tyle, ile domyślny promień
   poświaty w komponencie, a warstwy leżące na karcie dziedziczą go same —
   geometria nie wymaga więc ani jednej linii.

   FAZA I ZWROT — numer 3 z rejestru w components/ring.css: start o 3/12
   obrotu (90°) i nieparzysty numer, czyli obrót W LEWO. Liczba jest umowna
   — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od miejsca
   sekcji na stronie. W OBU motywach tak samo: dawne „w ciemnym wolniej
   i w drugą stronę" (makieta: dcRingSpinRev 9 s, scalone do
   --dc-duration-ring-slow) zdjęte w partii 5 audytu — tempo jest jedno,
   --dc-duration-ring, a zwrot różnicuje sekcje, nie motywy. Pokrętła na
   KARCIE, nie na warstwie — zmienne własne dziedziczą się w dół, więc jedna
   reguła obsługuje wszystkie trzy <span>-y. */
.dc-volume-picker__card {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -3 / 12);
}

/* ==========================================================================
   3. NAGŁÓWEK SEKCJI
   ========================================================================== */

/* Treść leży NAD obwódką. Warstwy .dc-ring mają z-index z komponentu, więc
   każdy blok treści musi mieć własny — inaczej łuk przechodziłby po tekście.
   align-items: flex-end sadza przełącznik na linii dolnej krawędzi akapitu,
   tak jak w makiecie.
   Scalenie: margines dolny 36 -> --dc-space-40 (skupisko 36/38/40/42). */
.dc-volume-picker__header {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-24);
  margin-block-end: var(--dc-space-40);
}

/* .dc-volume-picker__intro nie ma deklaracji: to zwykły blok, a odstępy
   niosą same elementy swoimi marginesami. Klasa zostaje jako nazwa. */

/* Wersaliki i rozstrzelenie robią z nadtytułu etykietę, nie zdanie.
   Kolor to --dc-accent-strong, a NIE makietowe --dc-accent-text: przy 12 px
   obowiązuje próg 4,5:1, którego jaśniejsze złoto nie osiąga (reguła J).
   Scalenie: rozstrzelenie .16em -> --dc-tracking-widest (.18em). */
.dc-volume-picker__eyebrow {
  /* Odstęp 14 do h2 jak w każdej sekcji (design-audit.md, C.8; partia 6). */
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Jedyna właściwość, jaką h2 dostaje od sekcji. Krój, --dc-display-3
   (clamp 30->40 px, co do piksela tyle co makieta), wagę 800, interlinię,
   światło międzyliterowe i kolor ma już z base.css. */
.dc-volume-picker__heading {
  /* Odstęp do leadu 14 jak w każdej sekcji (design-audit.md, C.10; partia 6). */
  margin-block-end: var(--dc-space-14);
}

/* Scalenie: 520 -> --dc-measure-md (480 px, skupisko 460/470/480/520).
   Interlinii nie deklarujemy — body ma --dc-leading-relaxed jako liczbę,
   więc akapit liczy ją od własnego rozmiaru. */
.dc-volume-picker__lead {
  max-width: var(--dc-measure-md);
  font-size: var(--dc-text-lg);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   4. PRZEŁĄCZNIK FRAKCJI

   Domyślnie GO NIE MA. Klasę --switchable dokłada skrypt wpisany w sekcji,
   więc bez JS-u przycisków nie widać, a widoczne są obie frakcje naraz —
   każda ze swoim tytułem. Przycisk, który bez JS-u nic nie robi, byłby
   fałszywą obietnicą interaktywności (ten sam powód co w regule 14).

   display: none, nie opacity — warstwa schowana przezroczystością zostaje
   w drzewie renderowania, a przycisk zostałby dodatkowo w kolejności
   tabulacji (reguła 11).
   ========================================================================== */
.dc-volume-picker__tabs {
  display: none;
}

.dc-volume-picker__card--switchable .dc-volume-picker__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--dc-space-10);
}

/* Pigułka ze szkła. line-height: 1, żeby wysokość przycisku liczyła się
   z paddingu, a nie z odziedziczonej po body interlinii 1,6. */
.dc-volume-picker__tab {
  padding: var(--dc-space-12) var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* base.css daje :focus-visible promień --dc-radius-6, co ścięłoby rogi
   pigułki na czas fokusu. Zapis niżej przywraca promień przycisku i bije
   base'a wyższą specyficznością (0,2,0 wobec 0,1,0) — nie licząc na to,
   że sekcje wczytują się później (reguła 8). Ten sam zabieg co w hero. */
.dc-volume-picker__tab:focus-visible {
  border-radius: var(--dc-radius-pill);
}

/* Kliknięcie = nacisk (pigułka wyboru, ranga 3: samo zmniejszenie).
   .97 — patrz uzasadnienie przy .dc-volume-picker__submit:active. */
.dc-volume-picker__tab:active {
  transform: scale(0.97);
}

/* Frakcja wybrana. Wypełnienie bierze --dc-gradient-cta, ten sam token co
   główne CTA w hero: w motywie jasnym złoty tint, w ciemnym pełne złoto,
   bo tint pod ciemnym tekstem dałby 1,8:1. Tekst to --dc-on-accent.
   Stan niesie aria-pressed, więc selektor jest atrybutowy, a nie klasowy —
   nie ma jak rozjechać wyglądu ze stanem ogłaszanym czytnikowi ekranu. */
.dc-volume-picker__tab[aria-pressed='true'] {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-weight: var(--dc-weight-bold);
  box-shadow: var(--dc-shadow-accent);
}

/* Najazd kursorem na frakcję NIEwybraną — jedyna zmiana to złota obwódka.
   Wybrana nie reaguje, bo nie ma dokąd się zmienić: jest już wybrana. */
.dc-volume-picker__tab[aria-pressed='false']:hover {
  border-color: var(--dc-accent-a50);
}

/* ==========================================================================
   5. KOMUNIKAT PO DODANIU DO KOSZYKA

   Treść komunikatu pochodzi z WooCommerce, ale opakowanie należy do motywu —
   dzięki temu ani jedna klasa .woocommerce-* nie musi być tu stylowana,
   a kolory i odstępy zostają na tokenach.
   ========================================================================== */
.dc-volume-picker__notices {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-24);
}

/* Tło NIEPRZEZROCZYSTE, choć komunikat leży na szklanej karcie sekcji:
   to jedyny element, który musi się przeczytać natychmiast po przeładowaniu,
   a szkło pożycza kontrast od tego, co pod nim (patrz hero.css, sekcja 7). */
.dc-volume-picker__notice {
  padding: var(--dc-space-14) var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  font-size: var(--dc-text-md);
  color: var(--dc-text);
  box-shadow: var(--dc-shadow-sm);
}

.dc-volume-picker__notice--success {
  border-color: var(--dc-success);
}

/* Błąd bierze złoto, a nie czerwień, bo tokens.css nie ma tokenu błędu —
   ma tylko --dc-success. Wymyślenie czerwieni pod jeden komunikat byłoby
   tokenem pod jeden przypadek (reguła 15), a wpisanie jej wprost łamie
   zasadę zero-hardkodu. Zgłoszone w raporcie jako brakująca para tokenów. */
.dc-volume-picker__notice--error {
  border-color: var(--dc-accent-strong);
}

/* ==========================================================================
   6. GRUPA FRAKCJI I SIATKA KART
   ========================================================================== */

.dc-volume-picker__group {
  position: relative;
  z-index: var(--dc-z-raised);
}

/* Odstęp między frakcjami istnieje TYLKO bez JS-u, bo tylko wtedy stoją
   jedna pod drugą. Z JS-em druga grupa ma atrybut hidden, a base.css tnie ją
   przez [hidden] { display: none !important }, więc sąsiedztwo nie zachodzi. */
.dc-volume-picker__group + .dc-volume-picker__group {
  margin-block-start: var(--dc-space-32);
}

/* Tytuł frakcji — widoczny wyłącznie bez JS-u. Z JS-em tę samą rolę pełni
   wciśnięty przycisk przełącznika. */
.dc-volume-picker__group-title {
  margin-block-end: var(--dc-space-16);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
}

.dc-volume-picker__card--switchable .dc-volume-picker__group-title {
  display: none;
}

/* Kolumny wynikają z dostępnej szerokości, nie z breakpointu (reguła 9).
   Scalenie: makietowe minmax(236px) -> --dc-grid-min-sm (220 px, skupisko
   180/200/220/236/240). Pomiar liczby kolumn na trzech szerokościach
   jest w raporcie zadania. */
.dc-volume-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-20);
}

/* ==========================================================================
   7. KARTA PAKIETU

   TŁO JEST NIEPRZEZROCZYSTE (--dc-surface), a makieta jasna daje mu biel .82.
   Powód: makieta CIEMNA daje tej samej karcie pełne #1C1A17, czyli dokładnie
   --dc-surface. Jeden token obsługuje więc oba motywy bez ani jednej reguły
   [data-theme], a różnica w motywie jasnym to biel .82 na prawie białej
   karcie sekcji wobec bieli pełnej — czyli nic widzialnego.

   BEZ REAKCJI NA KURSOR. Makieta ma tu style-hover z uniesieniem całej karty,
   ale karta nie jest klikalna — klikalny jest przycisk w jej wnętrzu.
   Tło reagujące na kursor na elemencie, w który nie da się kliknąć, obiecuje
   interaktywność, której nie ma (reguła 14). Reaguje więc przycisk, sekcja 12.
   Scalenie: promień 20 -> --dc-radius-22 (skupisko 20/22). */
.dc-volume-picker__pack {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  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-lg), var(--dc-shadow-inset-top);
}

/* Karta z plakietką „bestseller" — wyróżnia ją złota obwódka i plakietka.
   Makietowe „głębszy cień + złota poświata" zdjęte w partii 4 audytu:
   poświata jest zarezerwowana dla rangi 1 (C.4), a --dc-shadow-xl równałby
   kartę z panelem-rodzicem (dziecko ma stopień niższy) — zostaje --dc-shadow-lg
   jak na pozostałych trzech. */
.dc-volume-picker__pack--bestseller {
  border-color: var(--dc-accent-a50);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   8. KADR ZE ZDJĘCIEM
   ========================================================================== */

/* Gradient tła to reflektor za produktem: jasny środek u góry, ciemniejszy
   brzeg. W motywie jasnym --dc-surface -> --dc-bg to biel -> #eef1f4, czyli
   makieta co do odcienia. W ciemnym wychodzi #1C1A17 -> #0B0906, a makieta
   ma tam kremowy reflektor (#F4F1EA). ODSTĘPSTWO ŚWIADOME: żaden token nie
   jest biały w jasnym I kremowy w ciemnym, a --dc-text-on-dark, który taką
   parę ma, jest tokenem TEKSTU i użycie go jako tła byłoby nadużyciem nazwy.
   Wersja tokenowa czyta się spójnie: powierzchnia karty gaśnie ku tłu strony.
   Zgłoszone w raporcie.

   isolation: isolate — plakietki leżą na zdjęciu i mają się malować nad nim
   bez wchodzenia w z-index reszty strony. */
.dc-volume-picker__figure {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 7 / 6;
  overflow: hidden;
  background-image: radial-gradient(130% 95% at 50% 15%, var(--dc-surface), var(--dc-bg) 85%);
}

/* Cień na podłożu — to on stawia paletę na ziemi zamiast zawieszać ją
   w powietrzu. Kanał barwy z --dc-shadow-color, więc w motywie jasnym jest
   chłodno-granatowy, a w ciemnym czarny, bez ani jednej reguły [data-theme].
   Scalenia: dół 22 -> --dc-space-22, wysokość 18 -> --dc-space-18,
   blur(7px) -> --dc-blur-sm (10 px). */
.dc-volume-picker__ground {
  position: absolute;
  inset-block-end: var(--dc-space-22);
  inset-inline-start: 50%;
  width: 54%;
  height: var(--dc-space-18);
  transform: translateX(-50%);
  border-radius: var(--dc-radius-full);
  background-image: radial-gradient(
    ellipse,
    rgba(var(--dc-shadow-color), 0.2),
    rgba(var(--dc-shadow-color), 0) 70%
  );
  filter: var(--dc-blur-sm);
  pointer-events: none;
}

/* Zdjęcie. Wysokość w procentach kadru (makieta: 196 z 220 = 89%), szerokość
   z proporcji pliku — dzięki temu paleta rośnie razem z kartą i nigdy nie
   wychodzi poza kadr. object-fit: contain jest zabezpieczeniem na wypadek,
   gdyby max-width przyciął szerokość: obraz zmieści się wtedy w całości,
   zamiast zostać obcięty.
   position: relative, żeby malował się nad cieniem podłoża — wewnątrz kadru
   o kolejności decyduje kolejność znaczników, a element statyczny malowałby
   się pod pozycjonowanym (ten sam mechanizm co w hero). */
.dc-volume-picker__image {
  position: relative;
  width: auto;
  max-width: 86%;
  height: 89%;
  object-fit: contain;
  filter: drop-shadow(var(--dc-shadow-lg));
}

/* Fotografia wariantu z WooCommerce (JPG na jednolitym tle) zamiast
   wyciętego PNG: wypełnia CAŁĄ figurę (object-fit: cover), tak samo jak
   zdjęcia w rolce product/hero (.dc-product-hero__slide--photo) i miniatury
   w koszyku — kafel jest zdjęciem, plakietki leżą na nim (sekcja 9 wyżej
   właśnie na to ma nieprzezroczyste tło). Bez cienia rzucanego: obrysowałby
   prostokąt zdjęcia, nie paletę. Zmierzone 2026-08-31: wariant
   z mix-blend-mode: multiply na gradiencie figury wyglądał dobrze w motywie
   jasnym, ale w ciemnym gasił zdjęcie niemal do zera — dlatego cover. */
.dc-volume-picker__image--photo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  filter: none;
}

/* ==========================================================================
   9. PLAKIETKI NA ZDJĘCIU

   Wszystkie trzy mają tło NIEPRZEZROCZYSTE, choć makieta daje im szkło.
   To ta sama zasada, którą wymusił pomiar w hero: szkło pożycza kontrast
   od tego, co pod spodem, a pod spodem jest fotografia, więc kontrastu nie
   da się zagwarantować z tokenów.
   ========================================================================== */

/* Kaloryczność, lewy górny róg. align-items: baseline, bo liczba i jednostka
   mają różne rozmiary — oko porównuje linię pisma, nie środki pudełek.
   Scalenia: padding 5/11 -> --dc-space-6 / --dc-space-12,
   cień 0 4px 12px -> --dc-shadow-sm. */
.dc-volume-picker__energy {
  position: absolute;
  inset-block-start: var(--dc-space-12);
  inset-inline-start: var(--dc-space-12);
  display: inline-flex;
  align-items: baseline;
  gap: var(--dc-space-4);
  padding: var(--dc-space-6) var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-sm);
}

.dc-volume-picker__energy-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

/* Jednostka na --dc-accent-strong, nie na makietowym --dc-accent-text:
   9 px to tekst zwykły, więc próg wynosi 4,5:1 (reguła J).
   Scalenie: rozstrzelenie .04em -> --dc-tracking-wide (.06em). */
.dc-volume-picker__energy-unit {
  font-size: var(--dc-text-3xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  color: var(--dc-accent-strong);
}

/* Plakietka „bestseller", prawy górny róg. PEŁNE ZŁOTO z ciemnym tekstem,
   a makieta ma odwrotnie: ciemne tło i złoty tekst.
   ODSTĘPSTWO WYMUSZONE TOKENAMI, dokładnie to samo, o które rozbił się
   kwadracik z ptaszkiem w hero: żaden token nie jest ciemny w OBU motywach,
   a --dc-surface-inverse w ciemnym staje się kremowy i zostawiłby złoty tekst
   na jasnym tle. --dc-accent jest za to identyczny w obu motywach (#C9A84C),
   a --dc-on-accent jest w obu ciemny — więc plakietka wygląda tak samo
   w jasnym i ciemnym, co dla wyróżnika jednej karty z czterech jest zaletą. */
.dc-volume-picker__flag {
  position: absolute;
  inset-block-start: var(--dc-space-12);
  inset-inline-end: var(--dc-space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-4);
  padding: var(--dc-space-6) var(--dc-space-12);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

/* Gwiazdka jest znakiem tekstowym, nie ikoną z rejestru: rejestr trzyma
   ikony KRESKOWE z fill="none" (reguła 7), a ta ma być wypełniona.
   line-height: 1, żeby nie podnosiła wysokości pigułki. */
.dc-volume-picker__flag-star {
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-none);
}

/* Waga, lewy dolny róg. Para --dc-surface-inverse / --dc-surface jest jedyną
   w tokenach, która odwraca się poprawnie w OBU motywach (patrz hero.css,
   sekcja 4): w jasnym daje ciemną tabliczkę z jasnym tekstem, czyli dokładnie
   to, czego chce makieta, a w ciemnym jasną z ciemnym. Makieta trzyma tam
   czerń w obu motywach, ale takiego tokenu nie ma i nie powstanie pod jeden
   element (reguła 15). Odstępstwo zgłoszone w raporcie.
   Scalenia: padding 8/18, promień 16 -> --dc-radius-16,
   cień 0 6px 18px -> --dc-shadow-lg. */
.dc-volume-picker__weight {
  position: absolute;
  inset-block-end: var(--dc-space-12);
  inset-inline-start: var(--dc-space-12);
  display: inline-flex;
  align-items: baseline;
  gap: var(--dc-space-6);
  padding: var(--dc-space-8) var(--dc-space-18);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-inverse);
  color: var(--dc-surface);
  box-shadow: var(--dc-shadow-lg);
}

/* tabular-nums, żeby cztery tabliczki obok siebie miały cyfry tej samej
   szerokości — 1000, 2000, 3000 i 4000 czytają się wtedy jak jedna skala,
   a nie jak cztery osobne napisy.
   Scalenie: 22 px -> --dc-text-5xl (22 px, bez zmiany). */
.dc-volume-picker__weight-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-5xl);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dc-tracking-snug);
  line-height: var(--dc-leading-none);
}

/* Jednostka bierze ten sam kolor co liczba, a nie makietowe białe .52.
   Powód: przezroczystość liczona od --dc-surface-inverse nie ma tokenu,
   a różnicę wagi i rozmiaru widać i bez przygaszenia. */
.dc-volume-picker__weight-unit {
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   10. TREŚĆ KARTY
   ========================================================================== */

/* flex: 1 rozciąga treść na resztę wysokości karty, dzięki czemu blok ceny
   może zejść na dół przez margin-block-start: auto — i ceny czterech kart
   stoją w jednej linii niezależnie od tego, ile wierszy zajęła nazwa. */
.dc-volume-picker__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--dc-space-18) var(--dc-space-20) var(--dc-space-20);
}

/* Nazwa pakietu NIE JEST nagłówkiem (reguła 6): nie zapowiada treści,
   tylko nazywa kartę. Rangę niesie krój nagłówkowy i waga. */
.dc-volume-picker__name {
  margin-block-end: var(--dc-space-10);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-text);
}

/* Nazwa pakietu jest odnośnikiem do karty produktu z zaznaczonym tym
   pakietem (2026-08-31). Wygląda jak tekst nazwy — kolor i brak
   podkreślenia dziedziczone z akapitu — a odnośnikiem zdradza się dopiero
   pod kursorem (podkreślenie, reguła 22: rusza się dekoracja, nie układ). */
.dc-volume-picker__name-link {
  color: inherit;
  text-decoration: none;
}

.dc-volume-picker__name-link:hover,
.dc-volume-picker__name-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--dc-space-4);
}

/* ==========================================================================
   11. PLAKIETKI POD NAZWĄ
   ========================================================================== */

.dc-volume-picker__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-6);
  margin-block-end: var(--dc-space-12);
}

/* Wspólna geometria trzech plakietek. Makieta zwęża padding od strony ikony
   (6 px wobec 9 px), bo rysunek sam niesie światło — to różnica jednego
   piksela na oko i wpada w szum eksportu (reguła 15). */
.dc-volume-picker__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-4);
  padding: var(--dc-space-4) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-muted);
}

/* Znaczek nie może się ścisnąć, gdy etykieta zawinie się na wąskiej karcie. */
.dc-volume-picker__tag-mark,
.dc-volume-picker__tag .dc-icon {
  flex: none;
}

.dc-volume-picker__tag--season {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
  color: var(--dc-accent-strong);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

/* Zielone tło i zielona obwódka z makiety (rgba(62,124,89,.08) i .22) nie mają
   odpowiednika w tokenach — jest --dc-success, ale bez wariantów z alfą.
   Zamiast dokładać dwa tokeny pod jedną plakietkę (reguła 15) zielone zostaje
   to, co niesie znaczenie: kreska ikony i tekst. Tło i obwódka są neutralne. */
.dc-volume-picker__tag--cert {
  color: var(--dc-success);
}

/* Jeden wygląd złotej plakietki (design-audit.md, C.8; partia 6): ten sam
   przepis co --season — makietowe a05 / 600 bez wersalików było trzecim
   wariantem tej samej rzeczy. */
.dc-volume-picker__tag--origin {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
  color: var(--dc-accent-strong);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   12. OCENA
   ========================================================================== */

.dc-volume-picker__rating {
  display: flex;
  align-items: center;
  gap: var(--dc-space-6);
  margin-block-end: var(--dc-space-14);
}

/* Kolor gwiazdki PUSTEJ. --dc-border-line jest tu użyty jako kolor tekstu,
   i to nie jest nadużycie: to najjaśniejszy szary tokenu, dokładnie ta rola,
   którą makieta daje #d8d2c4. Gwiazdki są dekoracją (aria-hidden), więc próg
   kontrastu ich nie dotyczy — znaczenie niesie liczba obok i opis dla
   czytnika ekranu. */
.dc-volume-picker__stars {
  display: inline-flex;
  gap: var(--dc-space-2);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-none);
  color: var(--dc-border-line);
}

.dc-volume-picker__star {
  position: relative;
  display: inline-block;
}

.dc-volume-picker__star--full {
  color: var(--dc-accent);
}

/* Połówka gwiazdki: druga, złota kopia znaku położona na pustej i przycięta
   do połowy szerokości. Przycina overflow: hidden, więc nie ma tu ani
   maski, ani gradientu — a znak pod spodem zostaje pełny, dzięki czemu
   obie połowy są tym samym rysunkiem. */
.dc-volume-picker__star-half {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 50%;
  overflow: hidden;
  color: var(--dc-accent);
}

.dc-volume-picker__rating-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
}

/* ==========================================================================
   13. CENA
   ========================================================================== */

/* margin-block-start: auto spycha blok ceny na dół karty — patrz __body. */
.dc-volume-picker__price {
  margin-block-start: auto;
  margin-block-end: var(--dc-space-16);
}

/* Oba wiersze są blokami, bo stoją jeden pod drugim. tabular-nums ustawia
   ceny czterech kart w jedną kolumnę cyfr.
   Scalenie: 26 px -> --dc-text-6xl (24 px, skupisko 24/26). */
.dc-volume-picker__price-value {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-6xl);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dc-tracking-tight);
  line-height: var(--dc-leading-none);
  color: var(--dc-text);
}

.dc-volume-picker__price-unit {
  display: block;
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   14. PRZYCISK DODANIA DO KOSZYKA
   ========================================================================== */

/* Ten sam przepis co główne CTA w hero — złoto z --dc-gradient-cta i tekst
   na --dc-on-accent. Konsekwencja jest tu celem: jedno wypełnienie znaczy
   w całym motywie „to jest czynność główna".
   Scalenie: padding 13 -> --dc-space-14, promień 16 -> --dc-radius-16. */
.dc-volume-picker__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  width: 100%;
  padding: var(--dc-space-14);
  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-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  -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-volume-picker__submit .dc-icon {
  flex: none;
}

/* Jak przy zakładce: base.css ścięłby rogi na czas fokusu. */
.dc-volume-picker__submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* Najazd: tint ciemnieje, bez uniesienia — złoto a50 podłożone pod
   półprzezroczysty gradient CTA (ta sama decyzja co przy
   .dc-hero__cta--primary, tam pełne uzasadnienie). */
.dc-volume-picker__submit:hover:enabled {
  background-color: var(--dc-accent-a50);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — jedyna transformacja dozwolona na elementach
   klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
   ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-volume-picker__submit:active:enabled {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

/* Pakiet niedostępny. Przycisk ZOSTAJE w znaczniku i jest wyłączony, zamiast
   znikać — karta zachowuje wysokość sąsiadek, a użytkownik widzi, że tu też
   da się kupić, tylko nie teraz. Powód mówi tekst pod spodem. */
.dc-volume-picker__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;
}

/* ==========================================================================
   15. RUCH OGRANICZONY

   Sekcja nie ma ANI JEDNEJ własnej animacji — jedyny ruch to przejścia
   (kursor, zmiana stanu zakładki), a te globalny wyłącznik z base.css tnie
   do 0,01 ms poprawnie: dla przejścia „natychmiast" znaczy dokładnie to,
   o co chodzi. Blok prefers-reduced-motion należy do tego, KTO ANIMUJE
   (reguła 12 w uściśleniu z reguły 18) — obwódka animuje w komponencie
   i swój blok ma u siebie, w components/ring.css.

   Ten komentarz stoi zamiast pustego bloku, żeby było widać, że brak
   wyłącznika jest decyzją, a nie przeoczeniem.
   ========================================================================== */