/**
 * starter-kit-buy.css — sekcja zakupowa strony zestawu startowego w układzie
 * DWUKOLUMNOWYM: galeria po lewej, wybór wariantu i zakup po prawej, jedną
 * szklaną kartą z jedną obwódką. Makieta: starter-kit.html, sekcja
 * `starter-kit-buy` (l. 144–312) + zrzut sections/starter-kit-buy.png.
 *
 * Wymaga tokens.css, base.css, components/ring.css i components/marquee.css.
 * Każdy plik sekcji ładuje się na KAŻDEJ stronie, więc wszystko siedzi pod
 * prefiksem .dc-starter-kit-buy__ i nic stąd nie może wyciec na cudze
 * znaczniki. Wyjątki: .dc-ring, .dc-marquee (komponenty) i .dc-icon (rejestr)
 * — dostrajane wyłącznie w selektorze potomnym pod prefiksem sekcji.
 *
 * ANI JEDNEJ REGUŁY [data-theme='dark'] — kolory w obu motywach podmieniają
 * tokeny (reguła 10). Makieta zestawu nie ma wersji ciemnej; paleta idzie
 * z tokenów, jak w product-hero.
 *
 * MAKIETA NIESIE UKŁAD I WYMIARY, NIE STYL. Generator rysuje przyciski,
 * złoto, cienie i najazdy sprzed audytu; system z design-audit.md (C)
 * wygrywa. Kopie (skill, §0 „nie wymyślaj"):
 *   - __submit    ← .dc-volume-picker__submit przez .dc-product-hero__submit
 *                   (ranga 1, jedyny CTA z kompletem stanów),
 *   - __assistant ← .dc-hero__cta--secondary przez .dc-product-hero__assistant
 *                   (ranga 2; obwódka --dc-border-line, bo przycisk stoi
 *                   na jasnej karcie — ten sam powód co tam),
 *   - __fraction  ← .dc-product-hero__fraction (segment na torze),
 *   - __flag      ← .dc-volume-picker__flag (C.8, flaga bestsellera).
 * Różnice wobec makiety przy nich są zgłoszone w raporcie, nie wprowadzone.
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 5 — grep ma coś znaleźć
 * i te trafienia są świadome):
 *   1. Punkty zatrzymania i środek gradientu kolumny (`130% 95% at 50% 12%`,
 *      `85%`) — geometria rysunku, jak w hero.css.
 *   2. `scale(0.8)` / `scale(1.12)` w tętnie kropki — amplituda ruchu
 *      z makiety (dcPulse), nie wartość projektowa.
 *   3. `1px` / `-1px` w __radio — geometria ukrycia kontrolki (ta sama co
 *      w .dc-sr-only w base.css), nie odstęp.
 *   4. `blur(4px)` w stanie wejściowym zdjęcia — wartość ze skilla better-ui
 *      dla wejścia treści, geometria ruchu.
 *   5. WYMIAR Z MAKIETY, KTÓREGO SCALENIE BYŁOBY WIDAĆ (decyzja Andrzeja
 *      2026-08-30: reguła 15 obejmuje wartości nierozróżnialne dla oka, nie
 *      stopień dużego napisu): cena clamp(36px, 4.4vw, 46px).
 *   6. PROGI @media — zmierzone, patrz komentarze przy regułach.
 *
 * Pozostałe scalenia wg reguły 15 stoją przy regułach, których dotyczą.
 */

/* ==========================================================================
   1. RAMA SEKCJI, KARTA I SIATKA
   ========================================================================== */

/* .dc-starter-kit-buy nie ma deklaracji: .dc-container i .dc-section
   z base.css dają makietowe max-width 1240 / padding 32px w poziomie
   (reguła 8). Makieta ma tu 48px u góry zamiast 64 — odstęp międzysekcyjny
   należy do arkusza rytmu strony, nie do sekcji (decyzja 2026-08-31). */

/* Szklana karta. Scalenia: tło biel .5 = --dc-surface-glass-soft co do cyfry,
   szkło blur(20) saturate(165%) = --dc-blur-lg co do cyfry, obwódka biel .7
   -> --dc-border-subtle, cień 0 16px 50px .09 -> --dc-shadow-xl
   (0 16 44 .14) + inset .92 -> --dc-shadow-inset-top (.95), reguła 13.
   BEZ overflow: hidden na karcie — poświata obwódki leży 4 px poza obrysem
   (design-audit.md, partia 6); przycina dopiero owijka niżej. */
.dc-starter-kit-buy__card {
  position: relative;
  isolation: isolate;
  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);

  /* FAZA I ZWROT OBWÓDKI — numer 7 z rejestru w components/ring.css:
     start o 7/12 obrotu (210°), nieparzysty = w lewo. Rejestr ma zajęte
     wszystkie dwanaście numerów; reguła mówi „numer, którego nie ma na TEJ
     SAMEJ stronie", a 7 nosi wholesale — sekcja wyłącznie strony głównej.
     Na stronie zestawu sąsiadem z obwódką jest starter-kit-details (numer
     2), więc różnica wynosi 150° i zwrot jest przeciwny — dokładnie tak,
     jak rejestr rozstawia kolejne wpisy. */
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -7 / 12);
}

/* Owijka treści: przycina do promienia karty (patrz wyżej) i leży nad
   warstwami obwódki — z-index, bo warstwy .dc-ring mają własny z komponentu.

   SIATKA Z MAKIETY: repeat(auto-fit, minmax(340px, 1fr)) — 340 to
   --dc-measure-xs co do cyfry. Kolumny zwijają się same, bez @media
   (reguła 9); liczba kolumn zmierzona, patrz sekcja 12.

   min(…, 100%) W MINIMUM, nie samo 340: minmax() z twardym minimum NIGDY
   nie schodzi poniżej tej wartości, więc gdy kontener jest węższy, tor
   wystaje poza niego. Zmierzone przy 390 px: kontener daje 326 px,
   a tor stał na 340 — o 14 px za szeroko. Po poprawce tor ma 324 px
   i żaden element sekcji nie wychodzi poza okno na żadnej z trzech
   szerokości. min() zdejmuje minimum do szerokości kontenera, kiedy ten
   jest węższy, i nie zmienia niczego powyżej progu. */
.dc-starter-kit-buy__inner {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-measure-xs), 100%), 1fr));
  overflow: hidden;
  border-radius: inherit;
}

/* ==========================================================================
   2. GALERIA — KOLUMNA I SCENA
   Makieta: kolumna z tłem radial(130% 95% at 50% 12%, #fff 0%, #eef0f3 85%)
   i kreską po prawej rgba(30,40,60,.08). Biel to --dc-surface, szarość
   #eef0f3 to --dc-surface-sunken nałożone na --dc-surface (w motywie ciemnym
   oba tokeny są ciemne, więc kolumna ciemnieje razem z kartą).
   ========================================================================== */
.dc-starter-kit-buy__gallery {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-inline-end: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface);
  background-image: radial-gradient(
    130% 95% at 50% 12%,
    transparent 0%,
    var(--dc-surface-sunken) 85%
  );
}
/* Scena: KWADRAT o szerokości kolumny, kadr `cover`.

   DLACZEGO KWADRAT I DLACZEGO KADROWANY. Pliki packshotów to studyjne 4:3
   z szerokim białym marginesem po bokach — zmierzone na canvasie: worek ma
   treść 311 × 413 z 600 × 450 (52 % szerokości, 92 % wysokości, marginesy
   25 % / 23 %), zestaw 405 × 431 (68 % / 96 %, marginesy 16 % / 17 %).
   Wpasowanie takiego pliku w wysoką kolumnę (`contain`) skalowało go do
   szerokości, więc worek zajmował ledwie 272 px z 587 i tonął w bieli
   (uwaga Andrzeja, 2026-08-31: „potrzeba aby to bylo wieksze skoro jest
   miejsce"). Kadr kwadratowy z 4:3 obcina 12,5 % szerokości NA BOK, czyli
   mniej niż najciaśniejszy z tych marginesów (16 %) — produktu nie tyka,
   a zdejmuje samą biel: worek rośnie z 272 do ok. 407 px. W pionie nie
   obcina nic, bo kadr bierze pełną wysokość pliku.

   Zdjęcia z galerii są pełnokadrowe (zmierzone: treść 100 % × 100 %), więc
   ten sam `cover` wypełnia im scenę bez marginesu — i to one korzystają
   z kwadratu najbardziej.

   `margin-block: auto` rozdziela nadmiar wysokości kolumny po równo nad
   i pod scenę, więc szyna miniatur i wstęga zostają przy dolnej krawędzi,
   a kwadrat stoi pośrodku. Bez tego cała nadwyżka zbierała się pod sceną.

   TRYBU „--photo" JUŻ NIE MA. Wcześniej fotografia była pozycjonowana
   absolutnie z `inset`, a element zastępowany (img) z `width/height: auto`
   NIE rozciąga się do takiego pudełka — bierze swój rozmiar własny
   i wychodził poza kolumnę, na sąsiedni panel (zgłoszone przez Andrzeja,
   2026-08-31). Oba tryby mają teraz jedną regułę i jeden kadr, więc nie ma
   czego rozjechać. */
.dc-starter-kit-buy__stage {
  position: relative;
  flex: none;
  width: 100%;
  margin-block: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--dc-surface-on-dark);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Scena przyjmuje gest przeciągnięcia (skrypt): touch-action: pan-y
   oddaje przeglądarce pionowe przewijanie, poziomy ruch zostaje gestem;
   cursor: grab zapowiada to myszą. */
.dc-starter-kit-buy__stage:active {
  cursor: grabbing;
}

/* Zdjęcie wypełnia scenę w obu trybach — patrz komentarz przy scenie. */
.dc-starter-kit-buy__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity var(--dc-duration-slower) var(--dc-ease-out),
    transform var(--dc-duration-slower) var(--dc-ease-out),
    filter var(--dc-duration-slower) var(--dc-ease-out);
}

/* PRZENIKANIE DWÓCH WARSTW (skrypt w inc/product-packs.php; skill better-ui,
   animations: wyjście krótsze i łagodniejsze niż wejście, oba ease-out,
   oba elementy w DOM, żeby tło nie prześwitywało).
   WEJŚCIE nowego zdjęcia: --in to stan startowy bez przejścia (krycie 0,
   12 px od strony ruchu, rozmycie 4 px); zdjęcie przechodzi do spoczynku
   w --dc-duration-slower.
   WYJŚCIE ducha: --ghost to klon starego zdjęcia NAD nowym; --out gasi go
   w --dc-duration-fast z przesunięciem 6 px — połową wejścia. Kierunek
   podaje skrypt jako --dc-packs-dir (-1 / 0 / 1); przy zmianie pakietu (0)
   zostaje samo przenikanie. */
.dc-starter-kit-buy__image--in {
  opacity: 0;
  transform: translateX(calc(var(--dc-packs-dir, 0) * var(--dc-space-12)));
  filter: blur(4px);
  transition: none;
}

/* Duch leży dokładnie na scenie — ten sam kadr co zdjęcie żywe, więc
   przy przenikaniu nic nie skacze. */
.dc-starter-kit-buy__stage .dc-starter-kit-buy__image--ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition:
    opacity var(--dc-duration-fast) var(--dc-ease-out),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-starter-kit-buy__image--out {
  opacity: 0;
  transform: translateX(calc(var(--dc-packs-dir, 0) * var(--dc-space-6) * -1));
}
/* ==========================================================================
   3. SZYNA MINIATUR
   Makieta: grid repeat(5, 1fr), gap 10, padding 14px 16px, kreska górna,
   tło biel .6 -> --dc-surface-glass-soft (.5).

   PIĘĆ KOLUMN Z MAKIETY ZASTĄPIONE auto-fit. Makieta rysuje pięć kafli, bo
   tyle miała zaślepek (`hint-placeholder-count="4"` + kafel WIDEO); u nas
   kafli jest tyle, ile daje baza — slot wariantu plus galeria produktu
   (dziś 1 + 5 = 6). Stała piątka łamałaby szynę na dwa rzędy z jednym
   kaflem w drugim. auto-fit trzyma jeden rząd i jest tym, czego wymaga
   reguła 9; liczba kolumn zmierzona (sekcja 12).

   PADDING I MINIMUM KAFLA SKOPIOWANE Z product-hero.css (zgłoszenie
   Andrzeja, 2026-08-31: miniaturki stały za blisko krawędzi karty).
   Makietowe 14px 16px zastąpione 16px 32px, minimum kafla --dc-space-80
   zastąpione --dc-space-64 — ten sam kompromis co tam (mniejsze kafle,
   żeby sześć zmieściło się w jednym rzędzie przy szerszym poziomym
   oddechu). Uzasadnienie liczbowe stoi przy oryginalnej regule
   w product-hero.css, sekcja 5.

   SELEKTOR POTOMNY (0,2,0), NIE SAMA KLASA — ta sama pułapka, którą
   product-hero.css opisuje przy swojej szynie (sekcja 5): base.css zeruje
   padding każdej listy `ul[role='list']` selektorem o specyficzności
   (0,1,1), a znacznik tej szyny niesie `role="list"`. Sama klasa ma
   (0,1,0) i przegrywa — padding nie renderował się wcale, ani przed tą
   poprawką (makietowe 14/16), ani po niej, dopóki nie doszła druga klasa
   przodka. Zgłoszenie Andrzeja, 2026-08-31 (pierwsza poprawka nie było
   widać na zrzucie). */
.dc-starter-kit-buy__gallery .dc-starter-kit-buy__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dc-space-64), 1fr));
  gap: var(--dc-space-10);
  padding: var(--dc-space-16) var(--dc-space-32);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface-glass-soft);
}

/* Kafel: wysokość 84 -> --dc-space-80, promień 13 -> --dc-radius-12, tło
   biel -> --dc-surface, obwódka rgba(30,40,60,.1) -> --dc-border-line, cień
   0 1px 3px .05 = --dc-shadow-xs. Najazd: obwódka a50; uniesienie z makiety
   (translateY(-2px)) pominięte — C.2, hover wyłącznie kolorem. */
.dc-starter-kit-buy__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--dc-space-80);
  padding: 0;
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-xs);
  transition:
    border-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);
}

/* base.css daje :focus-visible promień --dc-radius-6 — przywracamy promień
   kafla wyższą specyficznością (0,2,0), jak w volume-picker. */
.dc-starter-kit-buy__thumb:focus-visible {
  border-radius: var(--dc-radius-12);
}

.dc-starter-kit-buy__thumb:hover {
  border-color: var(--dc-accent-a50);
}

/* Nacisk — ranga 4 (przycisk ikonowy z tłem): scale + inset-press. */
.dc-starter-kit-buy__thumb:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-xs), var(--dc-shadow-inset-press);
}

/* Kafel na scenie: obwódka rgba(201,168,76,.7) -> --dc-accent-a50, pierścień
   0 0 0 1px a35 -> 1 px --dc-border-accent (a30), cień 0 8px 20px .12
   -> --dc-shadow-lg (C.4 — karty rzędu drugiego). Stan niesie aria-pressed,
   więc selektor jest atrybutowy. */
.dc-starter-kit-buy__thumb[aria-pressed='true'] {
  border-color: var(--dc-accent-a50);
  box-shadow:
    0 0 0 var(--dc-border) var(--dc-border-accent),
    var(--dc-shadow-lg);
}

/* Miniatura wypełnia kafel. height: 100% wygrywa z base.css
   (img { height: auto }) specyficznością klasy — jak w fuel-switch. */
.dc-starter-kit-buy__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kafel packshotu: biel w obu motywach i contain — makieta trzyma packshoty
   w kadrze contain, fotografie w cover. */
.dc-starter-kit-buy__thumb--pack {
  background-color: var(--dc-surface-on-dark);
}

.dc-starter-kit-buy__thumb--pack .dc-starter-kit-buy__thumb-image {
  object-fit: contain;
}

/* ==========================================================================
   4. WSTĘGA PARAMETRÓW
   Ruch daje komponent .dc-marquee (maska 8/92 % z reviews; makieta tej
   wstęgi ma wygaszacze 5/95 % — różnica zgłoszona, komponent wygrywa jak
   obwódka). Makieta: tło rgba(201,168,76,.07) -> --dc-accent-a05, kreska
   górna line.
   ========================================================================== */
.dc-starter-kit-buy__ticker {
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-accent-a05);
}

/* Pas jest listą: bez punktorów (role="list" + base.css). Komponent daje
   flex, szerokość max-content i przesunięcie; sekcja dokłada wyrównanie. */
.dc-starter-kit-buy__track {
  align-items: center;
}

/* Pozycja: gap 9 -> --dc-space-8, padding 14px 22px z makiety; separator
   to kropka 5 px a55 -> --dc-space-6 / a50 (ten sam rysunek pasa co
   w product-hero). */
.dc-starter-kit-buy__param {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-14) var(--dc-space-22);
  white-space: nowrap;
}

.dc-starter-kit-buy__param::after {
  content: '';
  width: var(--dc-space-6);
  height: var(--dc-space-6);
  margin-inline-start: var(--dc-space-14);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a50);
}

/* Gwiazdka: makieta ma ją wypełnioną złotem; rejestr trzyma ikony kreskowe,
   więc zostaje kontur w złocie (uwaga H — rejestr wygrywa). */
.dc-starter-kit-buy__param .dc-icon {
  flex: none;
  color: var(--dc-accent);
}

/* Wartość: PJS 800 14 #2A2620 -> display / black / text-md / --dc-text. */
.dc-starter-kit-buy__param-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

/* Podpis: 11 600 rgba(58,52,42,.55) -> text-xs / medium / --dc-text-subtle
   (makietowa alfa .55 dawała 2,6:1 — token jest ciemniejszy). */
.dc-starter-kit-buy__param-label {
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   5. PANEL ZAKUPOWY — NAGŁÓWEK I OCENA
   Makieta: padding 38px 40px 36px -> --dc-space-40 (reguła 15).
   ========================================================================== */
.dc-starter-kit-buy__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--dc-space-40);
}

/* Wiersz oceny i dostępności: flex, gap 12, margines 14. */
.dc-starter-kit-buy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8) var(--dc-space-12);
  margin-block-end: var(--dc-space-14);
}

/* Ocena: gap 7 -> 8. Odnośnik bez podkreślenia — podkreślenie ma sama
   liczba opinii. */
.dc-starter-kit-buy__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  color: var(--dc-text);
  text-decoration: none;
}

/* Gwiazdki 14 px -> --dc-text-md, gap 2 — kopia .dc-volume-picker__stars. */
.dc-starter-kit-buy__stars {
  display: inline-flex;
  gap: var(--dc-space-2);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-none);
  color: var(--dc-border-line);
}

.dc-starter-kit-buy__star {
  position: relative;
  display: inline-block;
}

.dc-starter-kit-buy__star--full {
  color: var(--dc-accent);
}

.dc-starter-kit-buy__star-half {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 50%;
  overflow: hidden;
  color: var(--dc-accent);
}

/* 4,9: PJS 800 13.5 -> display / black / text-base. */
.dc-starter-kit-buy__rating-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-black);
}

/* „214 opinii": 13 #9a958a z kreską dolną rgba(154,149,138,.4)
   -> text-base / --dc-text-subtle / --dc-border-line. Kolor przejściem,
   bo odnośnik go zmienia na najeździe (C.2: color w liście transition). */
.dc-starter-kit-buy__reviews {
  border-block-end: var(--dc-border) solid var(--dc-border-line);
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-starter-kit-buy__rating:hover .dc-starter-kit-buy__reviews {
  color: var(--dc-text);
}

/* Dostępność: 12.5 600 #3e7c59, gap 6 -> text-sm / medium / --dc-success. */
.dc-starter-kit-buy__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-6);
  margin: 0;
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-snug);
  color: var(--dc-success);
}

.dc-starter-kit-buy__stock--out {
  color: var(--dc-text-subtle);
}

/* Kropka 7 px -> --dc-space-8 (C.8: kropka statusu 8 px, --dc-success).
   Czas tętna 2,2 s zapisany wprost: skala czasów motywu ma przejścia
   (0,15–0,45 s) i unoszenie (6–8 s), między nimi nie ma tokenu — ten sam
   przypadek co czasy blobów w calculator.css. */
.dc-starter-kit-buy__stock-dot {
  flex: none;
  width: var(--dc-space-8);
  height: var(--dc-space-8);
  border-radius: var(--dc-radius-full);
  background-color: currentColor;
  animation: dcStarterKitBuyPulse 2.2s ease-in-out infinite;
}

/* Tytuł: PJS 800 clamp(28, 3vw, 38) / 1.08 / -.028em, margines 12.
   clamp -> --dc-display-3 (clamp 30 / 3.8vw / 40): różnica 2 px na obu
   końcach mieści się w szumie eksportu (reguła 15). Interlinia 1.08
   -> --dc-leading-tight (1.12), trakt -.028em -> --dc-tracking-tighter,
   text-wrap: balance z makiety. */
.dc-starter-kit-buy__title {
  margin-block-end: var(--dc-space-12);
  font-size: var(--dc-display-3);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tighter);
  text-wrap: balance;
}

/* Druga część nagłówka #9a8230 -> --dc-accent-strong (reguła J: złoty
   tekst niosący znaczenie). */
.dc-starter-kit-buy__title-accent {
  color: var(--dc-accent-strong);
}

/* Akapit: 15 / 1.65 / #5a5a5a / max-width 520 -> text-lg /
   --dc-leading-relaxed (1.6) / --dc-text-muted / --dc-measure-md (480;
   skala tokenu obejmuje 520). Margines 22 -> --dc-space-22. */
.dc-starter-kit-buy__lead {
  max-width: var(--dc-measure-md);
  margin-block-end: var(--dc-space-22);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   6. PRZEŁĄCZNIK FRAKCJI — segment na torze, konstrukcja z nagłówka
   Makieta: tor gap 6, padding 6, r18, #ececec -> --dc-surface-sunken,
   margines dolny 20, max-width 460 -> --dc-measure-md. Segment: padding
   11px 14px -> --dc-space-12 / --dc-space-14, r13 -> --dc-radius-12
   (tor r18 − odstęp 6 = 12, C.9 co do piksela).

   BEZ NADTYTUŁU „Frakcja" nad torem — makieta zestawu go nie ma (karta
   produktu ma). Nazwę regionu niesie aria-label nawigacji.
   ========================================================================== */
.dc-starter-kit-buy__fractions {
  display: flex;
  gap: var(--dc-space-6);
  max-width: var(--dc-measure-md);
  margin-block-end: var(--dc-space-20);
  padding: var(--dc-space-6);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-sunken);
}

/* Niewybrany: przezroczysty, tekst #9a958a -> --dc-text-subtle. Najazd
   jak .dc-nav__link:hover — tło --dc-surface, tekst --dc-text. */
.dc-starter-kit-buy__fraction {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-2);
  min-width: 0;
  padding: var(--dc-space-12) var(--dc-space-14);
  border-radius: var(--dc-radius-12);
  color: var(--dc-text-subtle);
  font-family: var(--dc-font-display);
  line-height: var(--dc-leading-tight);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    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-starter-kit-buy__fraction:focus-visible {
  border-radius: var(--dc-radius-12);
}

.dc-starter-kit-buy__fraction:hover {
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-starter-kit-buy__fraction:active {
  transform: scale(0.97);
}

/* Bieżąca frakcja: biel z cieniem 0 2px 8px .1 -> --dc-shadow-sm
   (0 4 12 .08), tekst --dc-text. Segment jest WYPUKŁY (biały kafel
   z cieniem na szarym torze), więc nie inset-press jak w nagłówku. */
.dc-starter-kit-buy__fraction[aria-current='page'] {
  background-color: var(--dc-surface);
  color: var(--dc-text);
  box-shadow: var(--dc-shadow-sm);
}

/* Nazwa 800 15 -> black / text-lg; podpis 11.5 600 z kryciem .72
   -> text-xs / medium / --dc-text-subtle zamiast krycia (token trzyma
   próg kontrastu w obu stanach segmentu). */
.dc-starter-kit-buy__fraction-name {
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
}

.dc-starter-kit-buy__fraction-sub {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   7. KOMUNIKATY KOSZYKA — kopia z volume-picker
   ========================================================================== */
.dc-starter-kit-buy__notices {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-20);
}

.dc-starter-kit-buy__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-starter-kit-buy__notice--success {
  border-color: var(--dc-success);
}

.dc-starter-kit-buy__notice--error {
  border-color: var(--dc-danger);
}

/* ==========================================================================
   8. WYBÓR PAKIETU
   Makieta: kolumna, gap 9 -> --dc-space-10, margines dolny 22, wiersze
   max-width 460 -> --dc-measure-md.
   ========================================================================== */

/* Fieldset bez ramki i wcięcia przeglądarki. */
.dc-starter-kit-buy__packs {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
  max-width: var(--dc-measure-md);
  margin: 0 0 var(--dc-space-22);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* Nadtytuł „WYBIERZ ILOŚĆ" (C.8: 12 / 600 / --dc-tracking-wider; kolor
   z makiety #9a8230 -> --dc-accent-strong, nie --dc-text-subtle z C.8 —
   złoto jest tu etykietą wyboru). Makieta: 12 / 700 / .14em, margines 10. */
.dc-starter-kit-buy__eyebrow {
  margin: 0;
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-snug);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Wiersz: gap 13 -> 14, padding 13px 16px -> --dc-space-14 /
   --dc-space-16, r15 -> --dc-radius-16, tło biel .72
   -> --dc-surface-glass (.86), obwódka 1.5 px rgba(228,226,220,.95)
   -> --dc-border-thick + --dc-border-line. Najazd: obwódka a50;
   uniesienie z makiety pominięte (C.2). Interlinia --dc-leading-tight:
   makieta ma w wierszu `normal`, a body daje 1,6, z którą wiersz rośnie. */
.dc-starter-kit-buy__pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dc-space-14);
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border-thick) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  line-height: var(--dc-leading-tight);
  cursor: pointer;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease);
}

.dc-starter-kit-buy__pack:hover {
  border-color: var(--dc-accent-a50);
}

/* Radio ukryte wzrokowo, ale w drzewie i w kolejności fokusu — ta sama
   technika co .dc-sr-only, zapisana tu, bo utility z base.css jest dla
   treści, a to kontrolka (reguła 8: utility bez modyfikacji albo wcale). */
.dc-starter-kit-buy__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zaznaczony: tło a10, obwódka a50, BEZ poświaty 0 8px 22px a16 z makiety
   — C.4: poświata wyłącznie dla rangi 1. */
.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:checked) {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-accent-a10);
}

/* Fokus z klawiatury na radio rysuje pierścień NA WIERSZU — pierścień
   z base.css (2 px --dc-accent-strong, offset 2), z promieniem wiersza. */
.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:focus-visible) {
  outline: var(--dc-border-heavy) solid var(--dc-accent-strong);
  outline-offset: var(--dc-focus-offset);
}

/* Wyłączony (za mało worków): jak stan disabled przycisków (C.1). */
.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:disabled) {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-subtle);
  cursor: not-allowed;
}

/* Kropka radio 18 px -> --dc-space-18; zaznaczona 5.5 px złota
   -> --dc-space-6. Biel to --dc-surface, żeby w motywie ciemnym kropka
   nie świeciła białym oczkiem. Pierścień niezaznaczonej: makieta #c9c3b6.
   --dc-border-line na bieli jest niewidoczne, a --dc-text-subtle za ciemne;
   color-mix z połową krycia --dc-text-subtle daje odcień makiety
   bez literału. */
.dc-starter-kit-buy__dot {
  flex: none;
  width: var(--dc-space-18);
  height: var(--dc-space-18);
  border: var(--dc-border-heavy) solid color-mix(in srgb, var(--dc-text-subtle) 50%, transparent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface);
  transition: border var(--dc-duration-base) var(--dc-ease);
}

.dc-starter-kit-buy__radio:checked + .dc-starter-kit-buy__dot {
  border: var(--dc-space-6) solid var(--dc-accent);
}

/* gap 1 -> 2 (skala 2/4). */
.dc-starter-kit-buy__pack-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dc-space-2);
  min-width: 0;
}

.dc-starter-kit-buy__pack-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8);
}

/* Nazwa pakietu: PJS 800 15 #161616 -> display / black / text-lg. */
.dc-starter-kit-buy__pack-name {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:disabled) .dc-starter-kit-buy__pack-name,
.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:disabled) .dc-starter-kit-buy__pack-amount {
  color: var(--dc-text-subtle);
}

/* Flaga „Na start" — kopia .dc-volume-picker__flag bez pozycjonowania
   (C.8: pełne złoto, bez poświaty). Makieta: padding 3px 9px,
   10 / 800 / .05em -> 4 / 8 / --dc-text-2xs / --dc-tracking-wide. */
.dc-starter-kit-buy__flag {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-4) var(--dc-space-8);
  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);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Podpis: 12 #9a958a -> text-sm / --dc-text-subtle. */
.dc-starter-kit-buy__pack-sub {
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

.dc-starter-kit-buy__pack-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--dc-space-2);
  margin-inline-start: auto;
  white-space: nowrap;
}

/* Cena wiersza: PJS 800 15.5 -> display / black / text-lg. */
.dc-starter-kit-buy__pack-amount {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text);
}

/* Cena za kg: 11.5 #9a958a -> text-xs / --dc-text-subtle; na zaznaczonym
   wierszu złoto 700 (to tekst, więc --dc-accent-strong, reguła J).
   Kolor przejściem (C.2). */
.dc-starter-kit-buy__pack-unit {
  font-size: var(--dc-text-xs);
  color: var(--dc-text-subtle);
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-starter-kit-buy__pack:has(.dc-starter-kit-buy__radio:checked) .dc-starter-kit-buy__pack-unit {
  font-weight: var(--dc-weight-bold);
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   9. BLOK CENY
   Makieta: wiersz kwoty do linii pisma, gap 10px 14px, margines dolny 4;
   pod nim linia dopisku 13 #9a958a z marginesem 22.
   W miejscu PRZEKREŚLONEJ CENY stoi porównanie jednostkowe (cena za
   kilogram wybranego pakietu wobec pojedynczego worka) — przekreślona cena
   i procent rabatu odrzucone (2026-08-30). Przy zerowej albo ujemnej
   oszczędności porównanie po prostu znika (hidden ze skryptu).
   ========================================================================== */
.dc-starter-kit-buy__price {
  margin-block-end: var(--dc-space-22);
}

.dc-starter-kit-buy__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dc-space-10) var(--dc-space-14);
  margin: 0;
}

/* Kwota: PJS 800 clamp(36, 4.4vw, 46) / 1 / -.03em — clamp z makiety
   DOSŁOWNIE (nagłówek, pkt 6): --dc-display-2 (34/4.4vw/48)
   i --dc-numeral-lg (44 bez clamp) nie trafiają w ten kształt.
   nowrap: wc_price() rozdziela tysiące zwykłą spacją, więc kwota
   łamałaby się po pierwszej cyfrze. */
.dc-starter-kit-buy__amount-value {
  white-space: nowrap;
  font-family: var(--dc-font-display);
  font-size: clamp(36px, 4.4vw, 46px);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tighter);
  color: var(--dc-text);
}

/* „brutto": 14.5 #5a5a5a -> text-md / --dc-text-muted. */
.dc-starter-kit-buy__gross {
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
}

/* Wiersz przelicznika: cena za kilogram wybranego pakietu (złota, bo to
   liczba, po którą się tu przychodzi) i porównanie z workiem obok.
   13 -> text-base, margines górny 8. */
.dc-starter-kit-buy__unit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dc-space-4) var(--dc-space-10);
  margin: var(--dc-space-8) 0 0;
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

.dc-starter-kit-buy__unit {
  font-weight: var(--dc-weight-bold);
  color: var(--dc-accent-strong);
}

/* Dopisek o dostawie: 13 #9a958a -> text-base / --dc-text-subtle. */
.dc-starter-kit-buy__shipping {
  margin: var(--dc-space-4) 0 0;
  font-size: var(--dc-text-base);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   10. PRZYCISKI
   ========================================================================== */

/* RANGA 1 — kopia .dc-volume-picker__submit przez .dc-product-hero__submit;
   z makiety zostaje wysokość (padding 18px 28px) i rozmiar pisma 17
   -> --dc-text-2xl. Pominięte: pełne złoto zamiast tintu, r14, PJS 800,
   uniesienie — różnice rangi 1 wobec makiety, rozstrzygnięte w audycie
   (C.1, C.2, C.5). */
.dc-starter-kit-buy__submit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  width: 100%;
  padding: var(--dc-space-18) var(--dc-space-28);
  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-2xl);
  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-starter-kit-buy__submit .dc-icon {
  flex: none;
}

.dc-starter-kit-buy__submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-starter-kit-buy__submit:hover:enabled {
  background-color: var(--dc-accent-a50);
}

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

.dc-starter-kit-buy__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;
}

/* Kwota w etykiecie — makietowe „Dodaj do koszyka → 127,00 zł". Osobny
   <span> z hidden, bo bez skryptu byłaby nieaktualna po zmianie
   zaznaczenia (nagłówek pliku sekcji). */
.dc-starter-kit-buy__submit-amount {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
}

/* RANGA 2 — kopia .dc-hero__cta--secondary przez .dc-product-hero__assistant;
   z makiety margines górny 10. Makietowe padding 15px 28px / PJS 700 15
   ustępują geometrii kopii (C.1; skill §0 „nie wymyślaj"). Obwódka
   --dc-border-line, nie --dc-border-subtle jak w kopii: przycisk stoi na
   jasnej karcie, biała obwódka na bieli byłaby niewidoczna. */
.dc-starter-kit-buy__assistant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  width: 100%;
  margin-block-start: var(--dc-space-10);
  padding: var(--dc-space-16) var(--dc-space-28);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-lg);
  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),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-starter-kit-buy__assistant:focus-visible {
  border-radius: var(--dc-radius-16);
}

.dc-starter-kit-buy__assistant:hover {
  border-color: var(--dc-surface-inverse);
  background-color: var(--dc-surface-inverse);
  color: var(--dc-surface);
}

.dc-starter-kit-buy__assistant:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Sygnet 16 px; wysokość z pliku (auto). */
.dc-starter-kit-buy__assistant-mark {
  flex: none;
  width: var(--dc-space-16);
  height: auto;
}

/* ==========================================================================
   11. PASEK ZAUFANIA
   Makieta: rząd zawijany, gap 8px 18px, margines górny 18, 12.5 #9a958a
   -> text-sm / --dc-text-subtle; ikony 14 px, gap 6 -> 8. Rząd, nie kolumna
   jak w product-hero — tak rysuje to makieta zestawu.
   ========================================================================== */
.dc-starter-kit-buy__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8) var(--dc-space-18);
  margin-block-start: var(--dc-space-18);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

.dc-starter-kit-buy__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
}

.dc-starter-kit-buy__trust-item .dc-icon {
  flex: none;
}

/* ==========================================================================
   12. SZEROKOŚCI — makieta nie ma wersji wąskiej, progi z pomiaru
   ========================================================================== */

/* PRÓG 970 px — zmierzony sweepem po szerokościach, nie wzięty z głowy.
   Sama siatka auto-fit zwinęłaby się dopiero przy 744 px (2 × 340 + 2 × 32
   paddingu kontenera), ale panel zakupowy przestaje działać DUŻO wcześniej,
   bo dostaje połowę karty minus 2 × 40 paddingu:

     okno   panel   nazwa frakcji   nazwa pakietu   odnośnik do palety
     1000   387 px       1 wiersz        1 wiersz        1 wiersz
      960   367 px       1               1               2
      900   337 px       2               1               2
      860   317 px       2               2               2
      744   598 px       1               1               1   (już 1 kolumna)

   Najszersze okno, w którym cokolwiek łamie się na dwa wiersze, to 960 —
   zaokrąglone w górę do dziesiątki daje 970 (ta sama metoda co przy progu
   tabeli w origin). Poniżej progu jedna kolumna jest wyraźnie lepsza od
   dwóch: przy 744 px panel ma 598 px i wszystko wraca do jednego wiersza,
   podczas gdy przy 780 px w dwóch kolumnach ma 277 px i łamie się wszystko.
   Nazwa frakcji łamała się przy tym w środku wymiaru („Groszek 8–" /
   „25 mm"), co jest błędem rzeczowym z rodziny reguły 24, a nie tylko
   ciasnotą.

   Poniżej progu zmieniają się dwie rzeczy: siatka schodzi na jedną kolumnę,
   a kreska rozdzielająca przechodzi z prawej krawędzi galerii na jej dolną.
   Sceny nie trzeba dotykać — jest kwadratem o szerokości kolumny, więc
   skaluje się sama. */
@media (max-width: 970px) {
  .dc-starter-kit-buy__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .dc-starter-kit-buy__gallery {
    border-inline-end: 0;
    border-block-end: var(--dc-border) solid var(--dc-border-line);
  }
}

/* ==========================================================================
   13. RUCH — tętno kropki dostępności
   Z makiety (dcPulse): krycie .35 -> 1, skala .8 -> 1.12, 2.2 s.
   Blok reduced-motion własny (reguła 12): globalny wyłącznik w base.css
   zamroziłby kropkę w przypadkowej klatce; tu ma stać w pełnym kryciu.
   ========================================================================== */
@keyframes dcStarterKitBuyPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-starter-kit-buy__stock-dot {
    animation: none;
  }

  /* Bez przejścia między zdjęciami: czas 0 s odczytuje też skrypt
     i podmienia od razu; przesunięcie zerowane, żeby --in/--out nie
     zostawiły zdjęcia przesuniętego, gdyby przejście nie zaszło. */
  .dc-starter-kit-buy__image,
  .dc-starter-kit-buy__image--ghost,
  .dc-starter-kit-buy__image--out,
  .dc-starter-kit-buy__image--in {
    transition: none;
    transform: none;
    filter: none;
  }
}