/* DamTorty: podstrona cukiernia.html (decyzja 2026-10-05). Ładowany po tokens.css i site.css, których nie zmienia.
   Wzory (layout/inspiracje/podstrony-wzorce.md, kompozycja B): pigułki działów Levain „Our Cookies” przyklejone pod
   nagłówkiem, karty jak siatka produktów Bernice (Realizacje na stronie głównej: kwadratowe zdjęcie bez ramki, nazwa
   wersalikami), wstawka z przechylonym zdjęciem jak baner edytorialny Levain. Nagłówek strony i kafle na koniec
   są wspólne z Pracownią (site.css, 18b). Filmy klientki (2026-10-06): dwie karty z filmem i blok „przed i po”
   (sekcja 4). Zero literałów kolorów: wszystko z tokenów. Punkty: md 768, lg 1024. */

/* ==========================================================================
   1. Pasek działów: biały pas pod nagłówkiem, pigułki jak kategorie w Realizacjach
   ========================================================================== */

.ck-nav {
  --ck-nav-h: 64px;
  position: sticky;
  top: calc(var(--header-h) + var(--header-offset));
  z-index: calc(var(--z-header) - 1);
  border-bottom: var(--bw-hair) solid var(--c-hair);
  background: var(--c-white);
}
/* Telefon: jeden rząd przewijany w bok (bez paska przewijania), pigułki zatrzaskują się przy lewej krawędzi */
.ck-nav__list {
  display: flex;
  gap: var(--s-2);
  margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.ck-nav__list::-webkit-scrollbar { display: none; }
.ck-nav__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 2px solid var(--c-ink);
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-family: var(--ff-nav);
  font-size: var(--fs-meta);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ck-nav__link[aria-current]:not([aria-current="false"]) { background: var(--c-ink); color: var(--c-white); }

@media (hover: hover) {
  .ck-nav__link:hover { background: var(--c-ink); color: var(--c-white); }
}
@media (min-width: 1024px) {
  .ck-nav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .ck-nav__link { min-height: 48px; padding: 0 var(--s-5); font-size: var(--fs-nav); }
}

/* ==========================================================================
   2. Działy: nagłówek z jedną linią cen ogólnych, siatka kart bez cen
   ========================================================================== */

/* Skok z pigułki zostawia nagłówek działu tuż pod pasem pigułek: html ma już scroll-padding-top na nagłówek
   (site.css), a przeglądarka sumuje go ze scroll-margin, więc tu tylko wysokość pasa (65-69 px) z zapasem */
.ck-group { scroll-margin-top: 72px; }
.ck-group:focus { outline: none; }
.ck-group__prices { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ck-group__prices .badge { min-height: 32px; font-size: var(--fs-label); }

.ck-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--gap-tight);
}
.ck-card { display: flex; flex-direction: column; }
.ck-card__photo { --photo-r: var(--r-md); }
.ck-card__photo img { aspect-ratio: 1; }
/* Etykieta pory roku na zdjęciu (Sezon, Wielkanoc, Boże Narodzenie): biała pigułka w lewym górnym rogu */
.ck-card__pill {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 2;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
}
/* Najwęższe telefony (karta ok. 138 px): ciaśniejsze wypełnienie i rozstrzelenie, żeby „Boże Narodzenie” było w jednej linii */
@media (max-width: 359px) {
  .ck-card__pill { padding: 0 7px; letter-spacing: 0.02em; }
}
.ck-card__title {
  margin-top: var(--s-3);
  font-family: var(--ff-nav);
  font-size: var(--fs-card-title-sm);
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
}
.ck-card__meta {
  margin-top: var(--s-1);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--c-muted);
}

/* Podział „Torty z witryny”: musowe i bezowe */
.ck-sub { max-width: 780px; margin: var(--section-y) 0 var(--s-6); }
.ck-sub p { margin-top: var(--s-2); }
.ck-sub__title {
  font-family: var(--ff-nav);
  font-size: var(--fs-tile-title-sm);
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
}
.ck-sub__title--first { margin-bottom: var(--s-5); }
.ck-group__more { margin-top: var(--s-7); }
.ck-group__more .btn--dot { width: 100%; }

@media (min-width: 768px) {
  .ck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--gap); }
  .ck-card__photo { --photo-r: var(--r-lg); }
  .ck-card__pill { top: var(--s-3); left: var(--s-3); min-height: 30px; padding: 0 var(--s-3); font-size: var(--fs-label); }
  .ck-card__title { margin-top: var(--s-4); font-size: var(--fs-tile-title-sm); }
  .ck-group__more .btn--dot { width: auto; }
}
@media (min-width: 1024px) {
  .ck-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-sub__title { font-size: var(--fs-tile-title); }
}

/* ==========================================================================
   3. Wstawka: karta w Różu (lody), zdjęcie przechylone jak polaroid i wystające ponad kartę (baner edytorialny
      Levain, bez ramki na zdjęciu). Biała karta z obrysem to wariant domyślny; baner rezerwacji, który go używał,
      zniknął 2026-10-08 (klientka: bez odkładania na telefon)
   ========================================================================== */

.ck-banner {
  --ck-tilt: -3deg;
  display: grid;
  gap: var(--s-5);
  margin-top: calc(var(--section-y) + 48px);
  padding: 0 var(--s-5) var(--s-6);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.ck-banner--pink { --ck-tilt: 3deg; margin-top: 48px; border-color: var(--c-pink); background: var(--c-pink); }
.ck-banner__photo {
  --photo-r: var(--r-md);
  width: min(260px, 78%);
  margin: -48px auto 0;
  rotate: var(--ck-tilt);
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c-ink) 16%, transparent));
}
.ck-banner--pink .ck-banner__photo { width: min(200px, 60%); }
.ck-banner__title {
  font-size: clamp(26px, 1.2vw + 21px, 36px);
  line-height: 1;
}
.ck-banner__body p { margin-top: var(--s-3); }

.ck-end { padding-top: calc(var(--section-y) + 24px); }
.ck-end .more-tiles__title { margin-top: var(--section-y); }

@media (min-width: 768px) {
  .ck-banner {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-7);
    padding: var(--s-6) var(--s-7) var(--s-6) var(--s-6);
  }
  .ck-banner__photo { width: 240px; margin: -64px 0 -16px; }
  .ck-banner--pink .ck-banner__photo { width: 200px; margin: -72px 0 -16px 20px; }
}
/* ==========================================================================
   4. „Przed i po”: jagodzianka przed piecem i po nim w jednej ramce 4:5 (filmy klientki 2026-10-06).
      Warstwa „po” zasłania „przed” pionową kurtyną w rytm przewijania (site.js initPrzedPo, --pp-x = lewa krawędź
      „po”); bez JS i przy ograniczonym ruchu ramka stoi w połowie. Wzór: proces krok po kroku LPQ Atelier, ale bez
      przyklejonej sceny (podstrony-wzorce.md: bez scroll-jackingu). Tekst obok ramki, bez panelu i podwójnych ramek
   ========================================================================== */

.przed-po {
  display: grid;
  gap: var(--s-6);
  margin-top: calc(var(--section-y) + var(--s-4));
}
.przed-po__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 1.4vw + 22px, 44px);
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}
.przed-po__text > p:not(.overline) { margin-top: var(--s-3); }
.przed-po__kroki { margin-top: var(--s-5); border-top: var(--bw-hair) solid var(--c-hair); }
.przed-po__kroki div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: var(--bw-hair) solid var(--c-hair);
}
.przed-po__kroki dt {
  font-family: var(--ff-nav);
  font-size: var(--fs-nav);
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}
.przed-po__kroki dd { margin: 0; }

.przed-po__media { width: min(400px, 100%); margin-inline: auto; }
.przed-po__frame {
  --pp-x: 50%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--c-tint);
}
.przed-po__warstwa { position: absolute; inset: 0; }
.przed-po__warstwa .video-card__poster { width: 100%; height: 100%; aspect-ratio: auto; }
.przed-po__warstwa--po { z-index: 2; clip-path: inset(0 0 0 var(--pp-x)); }
.przed-po__label {
  position: absolute;
  top: var(--s-3);
  z-index: 2;
  min-height: 30px;
  padding: 0 var(--s-3);
  font-size: var(--fs-label);
}
.przed-po__warstwa--przed .przed-po__label { left: var(--s-3); }
.przed-po__warstwa--po .przed-po__label { right: var(--s-3); }
/* Kreska na krawędzi kurtyny; w skrajnych położeniach znika (.is-split ustawia initPrzedPo) */
.przed-po__linia {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pp-x);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--c-white);
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.przed-po.is-live:not(.is-split) .przed-po__linia { opacity: 0; }
.przed-po__media .video-card__caption { text-align: center; }

@media (min-width: 768px) {
  .przed-po { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-7); align-items: center; }
  .przed-po__media { width: 100%; max-width: 400px; margin-inline: auto 0; }
  .przed-po__label { min-height: 34px; padding: 0 var(--s-4); }
}
@media (min-width: 1024px) {
  .przed-po { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-9); padding-inline: var(--s-7); }
  .przed-po__text { max-width: 520px; }
}

@media print {
  .ck-nav { display: none; }
  /* Wydruk zawsze w połowie (przed | po), niezależnie od tego, gdzie przewijanie zostawiło kurtynę */
  .przed-po__frame { --pp-x: 50% !important; }
  .przed-po.is-live:not(.is-split) .przed-po__linia { opacity: 1; transition: none; }
  .ck-banner__photo { rotate: none; filter: none; }
}